Another year has ended and the tooling landscape has become simultaneously more exciting and more complex. There are countless new libraries, frameworks, plugins, build-related tools and more released every month, each claiming to help you improve your productivity or solve a specific development problem.
As developers, we’re happy to have all these options – but the sheer quantity can be paralysing. To start the year off right, we’ve done the legwork for you, weeding through 12 months worth of new releases and updates to bring you a list of 50 of the newest, most practical and exciting tools for frontend web coders, designers, and full-stack developers.
This really only scratches the surface of what’s available in the complex tooling ecosystem, but we hope this variety of practical options will be of help. We’re sure there’s at least one thing in this list you’ll personally be able to experiment with, use in your next project, or even contribute to (many are open-source!).
So don’t get too intimidated with how much is out there. Build stuff and use only the tools that help you be more productive and solve your development problems. Happy coding in 2018!
HTML and CSS tools
Input is a visual online form builder that makes it super-easy to create responsive forms based on Bootstrap, Materialize, or Foundation. It adds framework-specific HTML classes; you simply download and insert the code into your project.
02. Runway App
Style guides are big today but many developers find them tedious to build – this online WYSIWYG editor aims to help you build and host your style guides. There's also an older version of the app that enables you to build your style guide automatically via custom CSS comments.
03. CSS Grid Template Builder
The CSS Grid Layout spec is gaining in popularity and now has excellent browser support. This CodePen demo lets you visually build your grid then copy and paste the generated template string used in your CSS.
This is a really comprehensive and feature-rich online tool for building CSS animations. There are dozens of options to create custom animations including type of animation, object to animate, duration, timing function and so on.
A useful plugin for the popular and growing CSS processor PostCSS, which helps ensure you only use the parts of Normalize.css (the well-known CSS reset alternative) that your project requires. The plugin uses your project’s browserlist string to determine which parts of Normalize.css to exclude.
An extension to HTML syntax that enables you to build dynamic editable websites with just HTML. Mavo uses special HTML attributes to indicate where data should be stored and which elements on the page are Mavo-enabled.
Topol.io is a visual, drag-and-drop HTML email editor for creating responsive emails. The editor is easy to use and includes components for just about everything you’d want to include in an email campaign. Smaller components include useful spacers and dividers, and you can speed up the process by choosing from prebuilt themes.
Vivify is one of the newest drop-in CSS animation libraries, which enables you to introduce predefined animations to page elements by adding a class name to your HTML. It includes a wide variety of unique – but not overly bombastic – animations you won’t find elsewhere.
09. Sticky Bits
Dependency-free alternative to using CSS’s new position: sticky feature for making elements ‘stick’ to the top of the viewport while scrolling. Includes a pixel offset setting as well as the option to stick to the bottom of the viewport.
A mobile-compatible, user-friendly replacement for ugly and clunky HTML select boxes that use the multiple attribute. The user clicks the desired items and they are automatically moved to one side, rather than being highlighted. This tool includes an optional search feature for select boxes with dozens or more options.
Frameworks and libraries
12. Building Blocks
From the folks behind the popular Foundation framework, this is a library of frontend UI components that can be plugged into any Foundation project. The range includes everything from full-featured kits like dashboards and blogs, to smaller components like media elements.
For a really simple alternative to more popular frameworks, this is well worth looking into. Cell doesn’t require any environment or complex toolchain and it allows you to build pages using JSON-like structure.
Bojler is an email framework for developing cross-client responsive email templates. It includes components for typography, buttons, hero banners, and more. It also offers utility classes for alignment and spacing – a big requirement when developing HTML email.
15. Quasar Framework
Build ES6 and Vue-based responsive websites, Progressive Web Apps, hybrid mobile apps, and Electron apps using this framework and full-fledged toolchain. It includes lots of built-in components, themes, and live reload for preserving app state.
16. Keen UI
Keen UI is a lightweight collection of UI components written in Vue and inspired by Material Design. It includes custom form elements, a date picker, modal window, loading and progress indicators, tabs component, tooltips, and more.
A lightweight carousel plugin with no styling, so you can easily adjust it to match your brand’s needs. It includes some easy to use optional settings and has dragging and touch-enabled swiping.
This new option for a lazy-load library for progressive loading of images as a user scrolls. Offers a throttle setting for improving performance, image load delay, and callback functions.
23. Infinite Scroll
This is an old tool but it’s been rewritten for version 3. The new version includes URL changes while scrolling, no jQuery dependency, and lots of optional settings via a clean API.
A jQuery plugin with a twist on the carousel component. Timeline.js has been designed specifically to enable you to create a carousel timeline (i.e. a slider that progresses based on chronological points) with lots of visual and functional customisation options.
Library to implement cross-browser Push Notifications (which are still not widely supported). Some browsers use older versions of the spec, or the Notifications API instead of Push, which this library attempts to normalise.
A drag-and-drop library that abstracts native browser events into a comprehensive API to help build a custom drag-and-drop experience. Draggable includes modules for Sortable (to reorder elements), Droppable (define where items can be dropped), and Swappable (for swapping elements).
A neat utility that uses CSS selectors to detect new DOM nodes. For example, when a specific type of element is added to the DOM (e.g. the <section> element), you can customise that element as soon as it’s added.
Next page: React tools; Testing and coding tools
30. React Datasheet
An Excel-like spreadsheet component you can integrate into your React apps. Includes the ability to add formulas when a cell is edited (based on math.js) and the ability to add components like drop-down lists and buttons into the cells.
31. React Native for Web
This tool brings the platform-agnostic components and APIs of React Native to the web. Components include activity indicators, buttons, progress bars, toggle switches, scrollable views, and much more.
Reactide is described as “the first dedicated IDE for React web application development”. It's a cross-platform desktop app that will enable you to quickly render projects with no build or server configuration, reducing the complexity of building React apps.
33. React Studio
This is a visual design tool that outputs clean, high-quality React projects, without coding. You can draw graphics or import from Sketch and build React components based on the designs. A really gutsy project, and worth looking into if you're a non-coder.
34. ORY Editor
A React- and Redux-based mobile-friendly content editor that you can plug into your site for rich content editing. It was originally built for a large open education platform in Germany, so the component is robust and easy to use.
Testing and coding tools
This native terminal app available for Windows, Mac, or Linux includes theme and colour scheme options, configurable hotkeys, and lots more. It's apparently “designed for people who need to get things done”.
An online code editor enabling you to build web apps in React, Vue, Preact and Svelte. The interface includes a split view, Prettify, GitHub integration, and a dependency management panel to add npm packages.
A simple JSON store for your app that offers a CORS-enabled and SSL-supported API. Has the ability to generate a URL with your custom JSON data, or you can save the JSON to a page on the Myjson server via the website.
38. CSS in JS Playground
Progressive Web Apps (PWAs) are a huge part of what is helping the web to compete with mobile. This online tool helps you put together the different parts of a PWA, including the Web Manifest and Service Worker.
39. Vue.js devtools
40. GitHub for Atom
Atom, the popular code editor, now has Git and GitHub integration available via this package. GitHut for Atom enables you to work with branches, staging, commits, deal with conflicts, and more. The package is bundled with Atom 1.18 and up.
GitHub notifications aren’t useful, especially if you manage multiple projects. Octobox corrects some of the weaknesses inherent in GitHub’s notification system by using repo activity for archiving and unarchiving of the notifications.
42. Netlify CMS
CMS for static sites, which seems to be all the rage right now. Enables collaborators to create, edit, review, and publish content without writing code or dealing with version control. The React-based core acts as a wrapper for Git.
Google’s automated tool for analysing page quality. Lighthouse enables you to test public or password-protected sites for performance, accessibility, and Progressive Web Apps. View your reports online, share them in JSON format, or as GitHub gists using Lighthouse Report Viewer.
Micro is a terminal-based, configurable text editor. It's available for Windows, Mac and Linux, and aims to be easy to use while also taking advantage of the full capabilities of modern terminals. Available features include multiple cursors, strong mouse support and automatic linting.
Next page: Media tools
Feather is a beautiful, simple, and extensive set of open-source icons in SVG format. Includes options for pretty much any navigation element or UI widget.
Command-line based SVG inspection tool that inspects the content of SVG files. Provides information about the file, the elements in the SVG and hierarchy. It can also be integrated into a project as a dependency to examine SVG in scripts.
This article appears in net magazine issue #302. Buy it now or subscribe.
- 10 rules of great user experience
- 18 top CSS animation examples
- The 5 biggest UX design trends for 2018