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
01. Input (opens in new tab)
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 (opens in new tab)
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 (opens in new tab) of the app that enables you to build your style guide automatically via custom CSS comments.
03. CSS Grid Template Builder (opens in new tab)
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.
04. Animista (opens in new tab)
This is a really comprehensive and feature-rich online tool for building CSS animations (opens in new tab). There are dozens of options to create custom animations including type of animation, object to animate, duration, timing function and so on.
05. postcss-normalize (opens in new tab)
A useful plugin for the popular and growing CSS processor PostCSS (opens in new tab), which helps ensure you only use the parts of Normalize.css (opens in new tab) (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.
06. Mavo (opens in new tab)
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.
07. Topol.io (opens in new tab)
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.
08. Vivify (opens in new tab)
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 (opens in new tab)
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.
10. multi.js (opens in new tab)
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
11. Svelte (opens in new tab)
12. Building Blocks (opens in new tab)
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.
13. cell (opens in new tab)
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.
14. Bojler (opens in new tab)
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 (opens in new tab)
Build ES6 and Vue-based responsive websites, Progressive Web Apps (opens in new tab), 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 (opens in new tab)
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.