50 Top New Tools for Freelancers

50 free web tools

In many occupations, solving problems and finding ways to be more productive are top priorities. This is especially true for web designers and frontend developers who perform and repeat many micro-tasks. The fact we work with open web technologies that are often used to build free and open source software means we have a plethora of tools at our disposal.

In my ongoing research into web tools, I come across dozens of new options every week – scripts, plugins, WordPress themes, browser extensions, native apps, web services, libraries, frameworks, web templates, graphic packs and so much more.

After wading through the mountains of possibilities, I’ve put together a categorised list of 50 amazing web tools that can benefit web designers or frontend developers. And the best part? These web tools are all absolutely free!

HTML, CSS & Sass Tools

01. ai2html

50 free web tools - ai2html

Now you can design in Illustrator and create instant HTML and CSS

This is an open-source script that converts your Ilustrator documents to HTML and CSS, from the developers at the New York Times. It looks like a really powerful and useful tool for designers who work in Adobe Illustrator. The script is a JavaScript file that you download and drop into the scripts folder of your Illustrator install.

02. PostCSS

The community around PostCSS is gaining momentum and growing steadily. It’s a toolkit of JavaScript plugins that helps you take advantage of the latest standards and conveniences in CSS development, and it’s well worth looking into.

03. Autoprefixer

You’re not still writing CSS vendor prefixes by hand, are you? Keep your development files clean and let Autoprefixer (now a PostCSS plugin) do the hard work for you as part of your build process.

04. UIkit

50 free web tools - Uikit

UIkit’s a plucky young competitor in the frameworks hood

While Bootstrap and Foundation are the clear winners in terms of popularity in the framework space, UIkit is worth checking out. Its core features and interface components are right up there with the big kids on the block.

05. AniCollection

AniCollection is a library of CSS animations. It sports an interface that lets you easily add animations to your collection and quickly grab the necessary HTML, CSS or JavaScript code to implement them in your project. You can even submit your own.

06. Brick

Mozilla’s UI library, based on the new Web Components standard. It includes a calendar, a form that can be hooked into an IndexedDB component, a tabbar and lots more.

07. HTML_CodeSniffer

You’re probably familiar with basic HTML and CSS validation. This tool is specifically for accessibility testing, and you can use it directly through the site or as a bookmarklet. It will test your HTML against WCAG 2.0 Level A, AA, AAA, and Section 508 compliance.

08. HTMLHint

50 free web tools - HTMLHint

HTMLHint is a static code analysis tool for HTML

Linting has slowly overtaken validation in importance. This tool has multiple options and lets you cycle through the warnings and errors in your code.

09. DomFlags

50 free web tools - DomFlags

DomFlags makes it easier to navigate deeply-nested HTML elements in the DevTools

A Chrome extension that lets you flag elements in the DOM using a domflagsattribute. When the DevTools are opened, the first flagged element will be auto-inspected, and keyboard shortcuts can be used to navigate through the flags. This tool is handy for tackling a messy DOM that’s hard to navigate.

10. Susy

50 free web tools - Susy

Wake up to Susy, popular layout toolkit based on Sass

A Sass-based layout toolkit that’s gained steam over the past year or so. It has a strong community and offers lots of customisable features to suit the needs of just about any project.

11. Critical

Did you get the memo? Inline CSS is a requirement for good performance. Addy Osmani’s Critical is available as a Grunt plugin, and along with Filament Group’s loadCSS script it is a great option for extracting and loading your above-the-fold styles.

12. Shoelace

Shoelace is an easy-to-use Bootstrap 3 visual grid builder. Amongst its features are responsive media query views and a fully functional preview.

13. Sass Lint

A node-based code quality tool for Sass/SCSS code, available as a Grunt or gulp plugin. Sass Lint is especially great for beginners who aren’t too familiar with Sass best practices.

JavaScript tools

14. React

Facebook’s popular library includes a virtual DOM and optional JSX syntax. Its reusable components are designed to to help anyone building large, dynamic web apps.

15. Babel

50 free web tools - Babel

Babel enables you to use tomorrow’s JavaScript today

A JavaScript transpiler that lets you use the newest ECMAScript features (ES6, now called ES2015) without having to wait for browsers to catch up.

16. annyang

A small JavaScript library to help you build voice-controlled interfaces. It has a really nice API that’s easy to use. After including the library, you define your commands along with the behaviour in response to those commands.

17. List.js

50 free web tools - List.js

Add search, sort, filters and flexibility to HTML lists and tables with List.js

This is a fast and powerful way to create search, sort and filter functionality for lists, tables or just about any type of grouped content. All you need is some HTML and a few lines of JavaScript.

18. VerbalExpressions

If you’re like me and can’t stand the thought of writing regular expressions from scratch, this is the library for you. It’s a plain-English way to write regex and since the return value compiles to the actual expression, it can be a great way to learn, too.

19. Skeuocard

Skeuocard progressively enhances credit card inputs with its skeuomorphic interface. There are a few scripts like this one, but Skeuocard is one of my favourites. Users enter their details inside a realistic representation of a credit card, which automatically matches the layout of the specific card type (Visa, Mastercard etc.). They can even flip the card over to fill in the other side.

20. JSCS

This is not just another code style linter. What’s so powerful about JSCS is that it enables you to specify your own custom style guide, against which your code is linted. Alternatively, you can choose to test your codebase against popular style guides from jQuery, Airbnb, Douglas Crockford, Wikimedia and more.

21. Chart.js

One of many available JavaScript charting libraries, but certainly one of the nicest. There are six HTML5 canvas-based chart types, and all charts are responsive, modular and interactive. The library is small and dependency-free.

22. Quill

This is an embeddable rich text editor supported in all modern browsers, as well as IE 9 onwards and mobile. It offers powerful customisation options through a clean API.

23. Awesomplete

Lea Verou’s easy-to-use form input autocomplete widget. I love that it can be used with just HTML and the library, without any extra lines of JavaScript. On top of that, it offers advanced customisation options through built-in events and methods.

24. jQuery Boilerplate

50 free web tools - jQuery Boilerplate

A great tool for getting started with jQuery plugin development

jQuery plugin developers will appreciate this boilerplate, which provides a nice starting point for making plugins. The source is well commented so it’s useful for those just starting out with jQuery plugin development.

25. Foundation for Apps

You’ve no doubt heard of ZURB’s Foundation framework. This is a separate project specifically designed for building responsive web apps. It’s based on AngularJS, but doesn’t require advanced knowledge of Angular.

Design tools

26. CSSketch

CSSketch is an open source CSS plugin for Sketch, the popular Mac-based design and prototyping app. With it, you can write CSS inside Sketch, applying the styles to the items on the page in your current Sketch file.

27. Fluid for Sketch

Another Sketch plugin: this one assists with designing responsive layouts in Sketch. Fluid’s features include the ability to relatively pin, offset, centre and size objects, and use mathematical expressions.

28. AllTheFreeStock

This is a massive single resource where you can search for free stock photography from loads of different sites. It includes popular free sources such as Unsplash, along with other, lesser-known sites, to give you plenty of options for populating your designs.

29. Octicons

There are countless options for icons, and GitHub has released its own nicely designed set. Octicons is available as an icon font (or web font), which is commonly inserted into a page using CSS pseudo-elements.

30. Transformicons

50 free web tools - Transformicons

Transformicons: SVG and CSS icons that can be animated with CSS transitions

Transformicons is a different kind of icon set. These are SVG- and CSS-based icons that incorporate CSS transitions for an animated effect that can be controlled with some JavaScript.

31. Icono

One final icon option; this time a pure CSS set built with CSS pseudo-elements.

32. 0to255

50 free web tools - 0to255

Find variations of a chosen colour in hex format with 0to255

An online colour tool that helps designers find variations of a chosen colour (e.g. for choosing hover states, contrasts, gradient colours, borders and so on). This takes away the need for guesswork with hex codes, and is great for those who design in the browser.

RWD & Mobile Tools

33. Picturefill

The popular responsive images polyfill allows you to use HTML’s new <picture>element and its associated srcset and sizes attributes in your projects today, with strong browser support.

34. ish

There are loads of responsive layout testing tools, I’m only including one, because it’s all you need. ish does exactly what it should do, without an unnecessary focus on device sizes.

35. Ionic

50 free web tools - Ionic

Ionic is a popular library of mobile-optimised CSS and JavaScript components

One of the biggest HTML5-based mobile app development frameworks, built with mobile-optimised CSS and JavaScript components. Ionic boasts a very strong community, which is great for those looking for a good long-term option.

36. Embed Responsively

A simple online tool that lets you grab responsive embed codes for all sorts of popular media sources. It supports YouTube, Vimeo, Google Maps, Instagram, Vine and more.

37. Tablesaw

Responsive tables are one of the most difficult layout considerations. Tablesaw is a set of jQuery plugins to help in this area, by means of features like stack, toggle, minimap and more.

38. QAid

A bookmarklet that provides a tool panel with which you can overlay an image of a design (with alpha setting) to compare to your work in the browser. You can also test breakpoints.

39. Grunt-respimg

A Grunt plugin to automate tasks associated with responsive images: image resizing, rasterising of SVGs and PDFs, and lossless optimisation.

40. Email Framework

An HTML email framework to help build responsive email layouts and templates. This one offers well-tested modules, grids, typography, buttons and more.

SVG Tools

41. Snap.svg

50 free web tools - Snap.svg

Snap.svg is an SVG-manipulation library from the Adobe Web Platform team

An extensive JavaScript library from the Adobe Web Platform team. This provides a clean API for creating, animating and otherwise manipulating SVGs on the web.

42. Vivus

A dependency-free JavaScript library that animates your SVGs, giving the appearance of drawing. The on-page demos are well worth checking out.

43. Circulus.svg

50 free web tools - Circulus.svg

Sara Soueidan’s helpful SVG pie menu navigation builder. Mmm, pie.

An online tool that lets you generate the SVG code for a pie menu. As the site points out, pie menus have (surprisingly) been found to be more usable than standard nav in many instances.

44. Paths

50 free web tools - Paths

Paths is an SVG editor that helps you understand SVG’s path element syntax

An interactive interface to help explain the path element syntax for building SVGs. The editor allows you to download the completed shape in SVG format.

45. SVG Editor

With this tool you can upload an SVG file or paste in your SVG code, and it will optimise it by removing white space, unnecessary attributes, namespaces and so on, to reduce file size.

Best of the rest

46. Atom

50 free web tools - Atom

GitHub’s text editor can be customised to suit your needs

The GitHub dev team’s hackable text editor for modern development. Atom comes full-featured, with packages, themes, smart auto-completion, multiple panes and more. Best of all, it can be fully customised via HTML, CSS and JS.

47. Browsersync

50 free web tools - Browsersync

Browsersync is a powerful tool for synchronised cross-device testing and live debugging

Browsersync is like LiveReload, but on steroids. It’s a powerful tool for synchronised cross-device testing that will live-reload your project for every edit and save in all browser instances. It even syncs up navigation and scrolling in the browser sessions. You can add CSS outlines for debugging, and a latency option enables you to mimic a slower internet connection.

48. Brackets

Adobe’s contribution to the text editor race is an open source editor with focused visual tools, preprocessor support, and the ability to ease in-browser design through live preview. It also integrates well with Photoshop via the Extract for Brackets extension.

49. Accessible HTML5 Video Player

This is a video player from the PayPal accessibility team. It has custom controls and a keyboard-accessible and screen reader-supported UI. There are no scripting dependencies and it uses HTML5 form controls for volume and progress indicators.

50. Let’s Encrypt

50 free web tools - Let's Encrypt

Let’s Encrypt will help you switch a project over to HTTPS

If you’re looking to switch a project over to HTTPS, you’ll want to investigate this option. It’s a free, open and automated certificate authority that provides you with a hassle-free way to go secure.

Primary illustration courtesy of Tobias Hall.

This article originally appeared in net magazine issue 278; buy it here.