50 amazing tools for developers 2018

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

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Louis is an author, speaker and frontend developer who’s been involved in the web development industry since 2000. He curates the popular newsletter Web Tools Weekly and blogs about code at Impressive Webs.