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
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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
04. Animista
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.
05. postcss-normalize
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.
06. Mavo
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
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
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.
10. multi.js
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
This 'anti-framework' attempts to solve the problem of bloated JavaScript libraries that slow down browsers, especially on mobile. Compiling happens during build-time rather than run-time, putting minimal strain on the user experience.
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.
13. cell
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
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.
Next page: The best JavaScript tools for developers
