50 amazing tools for developers 2018

[Rss Bot 1]

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.

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

17. across-tabs

A JavaScript library based on HTML5 Cross-document messaging (which has solid browser support), to enable cross-origin communication between browser tabs. Nice API with ability to get info on the tabs and write callbacks.

18. KUTE.js

KUTE.js is a JavaScript animation engine with performance as its primary feature. This one grabs your attention immediately due to the gorgeous and super-smooth animation on the homepage. The API looks elegant and well worth trying out.

19. Waypoints

Scrolling animations and interactions are in demand in many layouts today. This library, available for jQuery, Zepto, or in vanilla JavaScript, is the easiest way to trigger a function when you scroll to an element on the page.

20. Siema

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.

21. Muuri 

A JavaScript API for responsive, sortable, filterable, and drag-and-drop Masonry/Packery-style grid layouts. The demos are really nice and there are lots of options available to customise the grid for different layout types.

22. Progressively 

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.

24. Timeline.js

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.

25. Push 

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.

26. Draggable

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).

27. Hyperform 

The complete implementation of HTML5’s native form validation API in JavaScript. This tool replaces or polyfills the browser’s native methods and makes it easier to validate forms using custom events and hooks.

28. SweetAlert2 

A fork of the original SweetAlert, this is a replacement for native JavaScript popups like alert() and confirm(). The modals are attractive, responsive, customisable, and accessible.

29. SentinelJS

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

React 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.

32. Reactide 

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

35. Terminus

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”.

36. CodeSandbox

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.

37. Myjson 

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 

The CSS-in-JavaScript thing is pretty hot right now. This playground enables you to examine and experiment with the code for various CSS-in-JS libraries, live in your browser.

39. PWABuilder

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

 This Chrome or Firefox extension adds a ‘Vue’ panel to your browser’s developer tools. This will then assist you in debugging pages and apps built with Vue.js, the popular JavaScript UI framework.

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.

41. Octobox

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.

44. Lighthouse

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.

45. Micro 

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

46. BigPicture

JavaScript-based lightbox designed for images and video, with built-in loading indicator and captions. Supports YouTube, Vimeo, and direct HTML5 video. Includes error handling for times when a media item doesn’t load.

47. Pasition 

A path transition and animation library with a clean API using minimal JavaScript. Pasition can render your shapes to Canvas, SVG, or WebGL and has support for all SVG path commands (moveto, lineto, and so on).

48. Feather

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.

49. AmplitudeJS

A modern JavaScript HTML5 audio player that gives you total design control, plus playlist features, callback functions, events, and live stream capabilities. The examples page is worth checking out to see the player’s design and functional flexibility.

50. svgi

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.

Related articles:

• 10 rules of great user experience
• 18 top CSS animation examples
• The 5 biggest UX design trends for 2018

View the full article