50 incredible web developments tools you need to know

[Rss Bot 1]

Welcome to our guide to the must-have web development tools of 2020 so far. If you regularly write front-end code for web applications, then you probably have your go-to set of tools. A boilerplate that serves as a skeleton, a UI library that helps you make things dynamic and interactive, a build process that might include one or more tools to scaffold out the files and directories you'll need. 

You might even have a set of CSS and JavaScript utilities that you go back to time and again. Or maybe your tooling is a couple of blank files, your code editor and nothing more (which is absolutely fine, especially if you’re new to the scene).

Whatever your toolset looks like, it's always beneficial to take a peek at what's out there and what’s new in front-end tooling. To that end, let's roll out 50 of the most interesting and practical web development tools that you should know about. Most of these are fairly new, having been released at some over the past year, while a few have been around for a little longer and have only started to gain traction during the last 12 months.

Whatever the case, you'll most definitely find something in this list you can use in a project soon. We've organised the list into sections, to make it easier to navigate. You can use the links to jump straight to the section you're interested in, or just browse the whole list. Want even more? Here's another list of amazing web design tools, and be sure to check out our list of user testing software tools, too.

01. autoComplete.js

• Get it here

A small library to add auto-complete functionality to a form field. Offers loose and strict search modes, customisable minimum number of characters before offering suggestions, optional callback functions and more.

02. indigo-player

• Get it here

A modular, easy-to- customise JavaScript video player with advertisement support out-of-the-box so you can enable pre-roll, mid-roll or post-roll sponsors for embedded videos.

03. Simple-keyboard

• Get it here

An elegant, responsive virtual keyboard component that offers ready-to-use demos of both mobile- and desktop-style keyboards. The demo keyboards are gorgeous but you can also style one easily to suit your brand.

04. fslightbox.js

• Get it here

A vanilla JavaScript lightbox plugin that can display images, HTML5 video and YouTube embeds in an attractive and usable overlay. Offers React and Vue versions and the ability to upgrade from the free version if you want to get your hands on more features.

05. Rallax.js

• Get it here

Parallax shouldn’t be used heavily but a simple dependency-free solution like this one is a good option. This has good performance and an easy-to-use API for starting effects, stopping, speeding up and the ability to chain .when() methods for queuing actions.

06. FrenchKiss.js

• Get it here

A super-fast internationalisation library with an extensive API. One example customisation it offers is the ability to deal with a language that has multiple pluralisation rules.

07. Moveable

• Get it here

Make any element on the page draggable, resizable, scalable rotatable or even warpable (like the perspective tool in a graphics editor). You can also enable grouping and snap-to-guides functionality.

08. Hotkey

• Get it here

Trigger an action on a specified element by means of a shortcut key, combination of keys or sequence of keys pressed by the user. The documentation has suggestions to ensure good accessibility.

09. Freezeframe.js

• Get it here

Add play/pause functionality to animated GIFs on a page. Trigger play/pause via hover, click, touch event or by an external element that serves as a play/pause button.

10. pagemap

• Get it here

Add a scrollable 'mini map' to long web pages, similar to what you find in the Sublime Text code editor. It’s arguable whether this is more usable than a scrollbar but you could implement this with the scrollbar disabled for a native feel.

11. lax.js

• Get it here

Vanilla JavaScript plugin to add responsive and mobile-friendly. Add play/pause functionality to animated GIFs on a page. Trigger animations, transitions and parallax effects to pages while the user scrolls. Get started with the presets or create custom effects.

12. Project Wallace

• Get it here

This is a CSS analysis tool with a dashboard that lets you track the complexity of your code, including the number of lines of code, amount of selectors, quantity of declarations, specificity, use of !important, performance bottlenecks and more.

13. DebuCSSer

• Get it here

An unobtrusive CSS debugging tool that works as an option for manually adding an outline to one or more elements. Include the script, then hold the CTRL key to outline an element or CTRL-SHIFT to outline all.

14. Animated CSS Burgers

• Get it here

A small library of animated mobile hamburger menus that should satisfy your needs should you require a slightly different menu style in each project.

15. DropCSS

• Get it here

A fast JavaScript module that compares a page's HTML to the CSS, then returns the latter with unused code removed, saving valuable bytes in page load time. For more on unused CSS, see the accompanying box.

16. CSSFX

• Get it here

Yet another useful and unique set of plug-and- play CSS animations and effects. This one includes a wide variety of effects – some require more than a single HTML element but they’re easy to add to a project.

17. CSS Grid Generator

• Get it here

For anyone first getting into the CSS Grid standard, having a visual helper will be a huge boost. This generator is a great way to learn the features and create practical grid code for all your layouts.

18. Darkmode.js

• Get it here

There seems to be a dark mode craze lately. This project lets you add a dark mode toggle to pages, utilising CSS’s mix-blend-mode property to handle the dark/light modes.

19. ARC Toolkit

• Get it here

Chrome extension by the Paciello Group that integrates with DevTools to provide extensive accessibility testing as part of your development and testing workflow.

20. Clarity Dashboard

• Get it here

A user-testing platform from Microsoft. Add a script to your page then replay user sessions to see how users interact with your site or app.

21. GraphQL Editor

• Get it here

This is a useful online editor that enables you to speed up the creation of GraphQL schemas. GraphQL is a popular new technology that serves as a more efficient alternative to using REST.

22. jsonbox.io

• Get it here

Free JSON storage that 22 offers users the ability to store, read and modify JSON data over HTTP APIs using various commands such as GET, POST, PUT and DELETE.

23. Accessibility Insights

• Get it here

A Chrome extension, 23 Edge add-on or native Windows app to run accessibility testing. You can do a quick test for the most common problems or show visual overlays on a page to examine colour contrast, ARIA landmarks and more.

24. Measure

• Get it here

This one is part of Google's new developer hub, providing a one-stop online tool to test your content for vital concerns such as performance, accessibility, best practices and SEO.

25. Chart.xkcd

• Get it here

A quirky JavaScript charting library that generates charts in sketchy or hand-drawn manner in the style of xkcd, the popular web comic. Might be a great option as part of an informal app design.

26. useAnimations

• Get it here

A collection of simple, customisable animated icons that you can plug into projects on mobile or web, offering a React version and the ability to edit the pre-made animations either in Lottie or Adobe After Effects.

27. Strikefree Music

• Get it here

A growing library of audio clips you can use in things like videos and podcasts without fear of being penalised for copyright violations. You can optionally create your own custom beats or randomly select one that's already been created.

28. ZapChart

• Get it here

A neat online tool to build shareable data in chart format. Just plug in the numbers for the x and y axes and this app will generate a bar chart downloadable as PNG or shareable via URL.

29. Optimole

• Get it here

An image optimisation service and CDN for WordPress. Includes features for serving device-appropriate images with lossy or lossless compression, optional lazy loading and lots more.

30. Mixkit

• Get it here

A collection of HD videos and illustrations, filterable by categories and free to use anywhere in commercial and non-commercial projects, without attribution.

31. Static Site Boilerplate

• Get it here

A non-opinionated and feature-rich toolkit for building static sites. Offers automated builds, a local dev server, production-level optimisations (such as code minification and image processing) and has support for a number of modern front-end technologies (Sass, ES6, etc).

32. Base Web

• Get it here

A React-based UI framework with a vast suite of components that range from complex functionality like a payment card component (ie input mask for different credit card types) to low-level features such as FlexGrid and Layer for composing your layouts.

33. Materialize

• Get it here

A responsive front-end framework with a slew of CSS and JavaScript components. Includes components for form features, layouts, mobile-specific and more – all based on Google's Material Design.

34. Scene.js

• Get it here

An extensive API for controlling things like animation timing, transitions and effects. Want some more?

35. Quasar

• Get it here

A Vue-based UI library with components to help build single-page applications, progressive web apps, hybrid mobile apps and desktop apps with no unnecessary bloat.

36. React Simple Img

• Get it here

A lazy-loading image solution for React projects that uses the IntersectionObserver API and the new Priority Hints standard for an elegant image-loading solution.

37. React Animation

• Get it here

An easy-to-use animation library for React that lets you easily add unique pre-built animated effects to page elements based on content changes and loading or enables you to build your own.

38. React Redux Loading Bar

• Get it here

A progressive animated loading indicator bar for React projects, with the ability to add multiple loading bars on a single page that indicate different items loading independently of each other.

39. react-image-magnifiers

• Get it here

A set of responsive React components to magnify and zoom in to high-res images on mobile or desktop, similar to the zoom feature available on shopping sites like Amazon, which enables you to drag while zooming to examine specific parts of an image.

40. RIFM

• Get it here

React component to convert any HTML form input into formatted input. For example, if a user types something in all lower case, you can force upper case (or just about any preferred format) as they type.

41. Remote Development

• Get it here

An extension pack for Visual Studio Code that enables you to use VSCode's full set of features remotely by SSHing into any folder in a container, remote machine or Windows Subsystem for Linux (WSL for short).

42. Fabulous

• Get it here

This lets you edit CSS Properties in a sidebar in VSCode. Will display CSS from different sources including CSS-in-JS libraries, .scss files, <style> blocks in the HTML and styles tied to library components (Angular, Svelte, Vue).

43. packtracker.io

• Get it here

A tool that tracks and analyses your webpack bundle on every commit. Helps to avoid oversized assets, npm package overuse and redundant content to ensure better overall app performance.

44. Flutter

• Get it here

Google's UI development toolkit for creating natively compiled apps for web, desktop and mobile. Produces an app for all platforms from a single codebase, offering flexibly UI to boot.

45. Packem

• Get it here

A JavaScript module bundler that purports to be twice as fast as its main competitor, Parcel. Still in alpha at the time of writing but a promising tool that could be your go-to bundler in the coming months.

46. Pika

• Get it here

A multi-featured toolset that includes npm stats, package search, a CDN and Pika Web. The latter lets you add dependencies to a project directly in the browser without webpack, Browserify, etc.

47. Commento

• Get it here

A lightweight, ad-free, privacy-focused commenting system you can embed in your web pages, usable via their cloud service or self-hosted. Includes Akismet spam detection, sticky comments, voting, Markdown support and more.

48. Just

• Get it here

A build task library with an easy-to-use API to compose chained, parallel or nested tasks during your build process.

49. Git History

• Get it here

Easily browse any file's history on GitHub, GitLab or Bitbucket. Just select a file URL then replace github.com with github.githistory.xyz and an animated, visual history of the file will display.

50. Sublime Merge

• Get it here

A fast, search-friendly Git client (Mac, Windows, Linux) from the makers of Sublime Text. Offers syntax highlighting, integrated merge tool, side-by-side diffs and more.

This content originally appeared in net magazine.

Read more:

• The next big thing in web design: 7 trends you need to know
• 11 amazing graphical JavaScript frameworks
• 11 CSS secrets you need to know in 2020

View the full article