50 amazing tools for developers 2018
Get up to speed with what’s hot and new in the frontend development toolbox.
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.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
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
Current page: JavaScript tools
Prev Page HTML and CSS tools Next Page React tools; Testing and coding toolsLouis 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.