HTML & CSS

30 Life-saving Tools for Front-end Developers

    Maria Antonietta Perna
    Share

    As the functionalities of web apps keep getting ever more sophisticated and complex, web developers need flexible tools to keep up with rising user expectations. The good news is, the web development ecosystem gives us plenty of choice, with both well-established companies and the open-source community racing to build more powerful libraries, frameworks and apps to help developers do their job and increase productivity and efficiency.

    In this post, I’ve rounded up 30 top tools for front-end web developers ranging from code editors and code playgrounds to CSS generators, JS libraries, and more.

    Let’s dive right in!

    Code Editors

    Front-end developers spend hours writing or editing code. Therefore, it’s only natural that their closest friend on the job is the code editor. In fact, getting to know their code editor of choice and all its capabilities and shortcuts gives any dev a great advantage in terms of productivity.

    1. Visual Studio Code

    Visual Studio Code (VS Code) by Microsoft is a full-blown, free and open-source cross-platform integrated development environment (IDE) — that is, a complex piece of software that allows developers to create, test and deploy an entire project.

    Here are some of VS Code’s most popular features:

    • IntelliSense, offering syntax highlighting and smart completions based on variable types, function definitions and imported modules
    • debugging capabilities
    • built-in Git commands
    • flexibility and extensibility: you can easily add extensions relative to new languages, themes, etc.
    • easy deployment capabilities

    You can download VS Code for Windows, MacOS, and Linux.

    2. Atom

    Atom is a free, open-source and powerful cross-platform code editor that allows you to:

    • collaborate with other developers using Teletype for Atom
    • work with Git and GitHub with GitHub for Atom
    • edit code on different platforms
    • speed up coding with smart auto-completion
    • search for, install and even create your own packages
    • browse project files
    • split the interface into multiple panes
    • find and replace in a file or in multiple projects
    • add new themes and customize the editor’s appearance and behavior by tweaking its code.

    3. Sublime Text

    Sublime Text introduces itself as “a sophisticated text editor for code, markup and prose”.

    It’s a paid, cross-platform code editing app with tons of features. These include:

    • Goto Anything functionality: shortcuts that allow developers to search for bits of code in files and open files in projects
    • multiple selections
    • powerful API and package ecosystem to extend the built-in functionality
    • split editing
    • easy customization
    • fast project switching
    • high performance
    • and more

    Package Managers

    Package managers are collections of tools for consistently automating processes like installing, upgrading, configuring and removing programs. Typing npm install or yarn install in a command-line interface has become one of the most ordinary parts of a developer’s day-to-day job.

    4. NPM

    What is npm? Well, as it says on the company’s website, it’s many things. In particular:

    • it’s the package manager for Node.js that helps JS devs to share packaged modules of code
    • the npm registry is a public collection of packages of open-source code for Node.js, front-end web apps, and more
    • npm is also the command-line client developers use to install and publish those packages
    • npm, Inc. is the company responsible for hosting and maintaining all of the above

    5. Yarn

    Yarn is a package manager for installing and sharing code and also a project manager. It’s extensible via plugins, stable, very well documented, free and open source.

    Bundlers

    Module bundlers are used to bundle several modules into one or more optimized bundles for the browser.

    6. Webpack

    Here’s all the goodness you’ll find in webpack, as it’s detailed in the software’s website:

    At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. … Since version 4.0.0, webpack does not require a configuration file to bundle your project. Nevertheless, it is incredibly configurable to better fit your needs.

    7. Parcel

    Parcel is a “blazing fast, zero configuration web application bundler”.

    Parcel

    • is fast
    • bundles all the project’s assets
    • has zero-config code splitting
    • and more.

    CSS Generators

    Have you ever tried to memorize how to declare CSS properties for gradients, text shadows, Flexbox or Grid, to mention just a few? Not easy. Unless you use some CSS features and their properties over and over again, it’s hard to remember them all. But even those who master CSS sometimes need a refresher on some properties, especially if they haven’t used them in a while.

    If you need some quick help with the latest and greatest CSS, here are CSS generators to the rescue. Enter the values, preview the result, grab the generated code and run.

    8. CSS3 Generator

    The CSS3 Generator is a free online app that lets you quickly write code for a number of modern CSS features like Flexbox, gradients, transitions and transforms, and many more.

    Enter the required CSS values, preview the result in real time, copy and paste the generated code. Also, this app shows a list of browsers and their versions where your CSS code is supported.

    9. The Ultimate CSS Generator

    The Ultimate CSS Generator is a free online app that lets you generate code for CSS animation, backgrounds, gradients, borders, filters, and more.

    The interface is user-friendly, the information about browser support for the CSS feature you’re interested in is clear and easy to spot, and the generated code is clean and accurate.

    10. The CSS Grid Layout Generator by Dmitrii Bykov

    CSS Grid is awesome, and creating your grid in code gives you full control over the final result. However, it’s helpful to have a visual representation of the grid while you’re coding. Although some major browsers have implemented great tools to let you visualize your grid, some devs could do with some additional help. Here’s where a CSS Grid generator might come in handy.

    The CSS Grid Layout Generator by Dmitrii Bykov is free, accessible online, and extremely flexible. I took it for a spin and found that it gives me a lot of control both at the level of the grid container and that of the grid item while providing me with nice preview capabilities and clean code.

    If you need help, click on the How to Use button and watch the presentation video offered by the app’s author.

    To know more about which CSS Grid generators are available, I put some of the best ones through their paces on SitePoint in my article “5 Super CSS Grid Generators for Your Layouts”.

    Libraries and Frameworks

    The demands on today’s web apps place great importance on speed in loading and updating page content. As powerful as modern JavaScript is, when packaged into a library or a framework, it becomes a fantastic tool for writing elegant and maintainable code and cutting back on repetitive and time-consuming typing efforts.

    11. React

    React is a free JavaScript library for building user interfaces created by Facebook developers. It’s super popular and has a well-established company and strong community behind it. Its features include:

    • being declarative, which makes building user interfaces easy to code, update and debug
    • being component-based
    • being agnostic about the technology stack used to build the project

    12. Vue

    Vue is a “progressive JavaScript framework” created by Evan You and maintained by an international team of developers. It’s free to use and released under the MIT license.

    Vue is:

    • Approachable: if you know the core languages of the web — that is, HTML, CSS and JavaScript — you can learn Vue quickly and start integrating the framework into any web project in no time.
    • Versatile: you can easily integrate Vue into a web project as little or as much as you need. You can start by applying Vue to the UI and progressively scale up to its full-blown framework capabilities.
    • Small and highly performant.

    13. Angular

    Created by Google, Angular is the most mature of all the frameworks listed here. It’s free and open source, it’s got the backing of a giant company and the support of a strong community.

    Advantages of using Angular include:

    • being cross-platform: web, mobile web, native mobile and native desktop
    • speed and performance
    • powerful tooling
    • the productivity and scalable infrastructure that supports Google’s largest applications

    Static Site Generators

    Static site generators represent a

    … compromise between using a hand-coded static site and a full CMS,
    while retaining the benefits of both. In essence, you generate a
    static HTML-only website using CMS-like concepts such as templates.
    The content can be extracted from a database but, more typically,
    Markdown files are used. — Craig Buckler, “7 Reasons to Use a Static Site Generator”

    Here are the top two static site generators listed on the StaticGen website.

    14. Next.js

    Next is a free and open-source framework for statically exported React apps. Features include:

    • pre-rendering (Next supports server-side rendering)
    • zero configuration
    • extensibility
    • CSS-in-JS
    • awesome documentation
    • and more.

    15. Gatsby

    Gatsby is a free and open source framework based on React that helps
    developers build blazing fast websites and apps.

    Gatsby provides tons of features like:

    • the power of React, webpack, modern JavaScript and CSS
    • a rich data plugin ecosystem
    • progressive web apps generation
    • super easy deployment
    • starters, or pre-packaged Gatsby sites tailored to different use cases
    • and more.

    SVG Optimizers

    Performance is crucial on the Web: visitors get impatient as they wait for content to load and search engines tend to penalize slow and sluggish websites.

    Optimizing graphics is a necessary step towards building blazing-fast websites and apps, and SVG graphics are no exception. To make sure the SVG code is clean and uncluttered, using an SVG optimizer has become an essential step in the workflow of a front-end developer.

    Below are two SVG optimizers that do a fantastic job and are widely used by professional devs.

    16. SVGOMG by Jake Archibald

    SVGOMG is a free online app that lets you apply a number of optimization options to your SVG code and preview the end result. It’s easy to use and it also works offline. Check out this article by Sara Soueidan to learn more.

    17. SVG Optimizer by Peter Collingridge

    This is another fantastic, free, online SVG optimization tool you can use to trim your SVG code. It’s intuitive and a breeze to use. For more details on how to get the best out of it, head over to “The Designer’s Guide to Working with SVG – Pt 1” by Alex Walker.

    Animation Libraries

    Animation is present everywhere on the Web, be it in the form of subtle micro effects or the story-telling movement of big chunks of content that gradually unfolds on the screen.

    While modern CSS and JavaScript include the features you need to create some cool web animations, the libraries listed below certainly let you do the job much quicker with some amazing results.

    18. AnimateCSS

    Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

    As its name suggests, the library is in pure CSS. Among the pre-packaged effects, you’ll find: attention seekers like bouncing and flashing effects, back entrances and exits, fading in and fading out, and tons more.

    Features include:

    • quick installation with npm, Yarn or CDN
    • ease of use
    • option of using CSS custom properties (CSS variables) to customize the animation duration, delay and interactions
    • utility classes for delays, speed variations and repetitions

    19. GreenSock (GSAP)

    GSAP (GreenSock Animation Platform) offers “ultra high-performance, professional-grade animation for the modern web”.

    Its highly intuitive JavaScript-powered syntax lets you build amazing animations in no time. There’s no limit to what you can animate with GSAP, from DOM elements and JavaScript objects to SVGs, canvas, and WebGL immersive experiences. Furthermore, GSAP is cross-browser and backward-compatible, and offers fantastic documentation and a supportive community.

    20. Anime.js

    Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

    Anime was created by Julian Garnier and is entirely free and open source. Thanks to its intuitive syntax and fantastic docs, you can be up and running with Anime.js in no time.

    Browser tools

    Front-end developers’ best friends, built-in developer tools offered by major browsers are an integral part of day-to-day web programming tasks. They allow developers to understand code written by others, to test changes to the code in real time, and to debug chunks of front-end code, as well as making performance checks and much more.

    These tools keep getting more and more sophisticated and helpful, so much so that I can’t think of ever being able to do without them.

    Below are developer tools made available by two major browsers, Mozilla Firefox and Google Chrome.

    21. Firefox Developer Tools

    Firefox Developer Tools are some amazing tools built into the Firefox browser that allow developers to examine, edit and debug HTML, CSS and JavaScript code.

    For a detailed guide on what they are and how to use them, don’t miss this dedicated reference on MDN.

    22. Chrome DevTools

    For those who mainly use Chrome as their browser of choice, the Chrome DevTools are an essential part of their workflow.

    Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

    Cross-browser testing

    Developers have no control over which kind of device their websites or apps are going to be accessed from. In 2019, over half of the web traffic came from mobile devices. On the whole, screen sizes vary from desktop and tablet to smartphone and wearable technology.

    As front-end developers, making sure the web page remains usable at any screen size constitutes a core component of our job. While nothing compares to testing websites and apps directly on different browsers and platforms, covering all the bases this way is not an option available to most of us. The services and apps listed below can help.

    23. Caniuse

    I don’t know about you, but when I need to get current information about browser support for any HTML, CSS, SVG, and JavaScript feature — however new or obscure it might be — caniuse is my first go-to website.

    You’ll get up-to-date statistical results, both at the global and country-specific level, as well as information about specific issues, resources, etc.

    24. Am I Responsive?

    This is a free online app that lets you quickly check how your website looks at different screen sizes.

    Here’s a list of the features:

    • You can use the app from its website by entering the URL of the site you intend to test in a textbox or from anywhere by using the Am I Responsive bookmarklet on your browser.
    • http://localhost/ works.
    • You can click and scroll inside each device on which your website is displayed for testing.

    25. Responsive Web Design Checker

    Responsive Web Design Checker is another free online app to test how your website looks not only on different screen sizes, but also on a wide range of devices. These include various kinds of desktops and notebooks, tablets like Apple iPad Retina and Amazon Kindle Fire, and smartphones like Apple iPhone 6/7 Plus, Samsung Galaxy, and plenty more.

    26. BrowserStack

    BrowserStack is a popular, paid service that lets you test your website or app on 2000+ real devices and browsers. It works out of the box and is totally secure.

    Code collaboration and Playgrounds

    If you imagine coders as being individuals who spend their days typing away in splendid isolation for hours, forget it. At least, this is part of the story. The most common scenario involves teams of developers and non developers working on the same project. Therefore, being able to collaborate on projects and share code is of paramount importance to the success of most web projects.

    Below are some great tools that let you quickly share code, prototype and test project ideas.

    27. GitHub

    The #1 go-to place for team collaboration and code sharing cannot be but the super popular and established GitHub.

    Here’s how GitHub introduces itself:

    GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside 50 million developers.

    28. CodePen

    CodePen has been around for years and is loved and widely used by the front-end developer community. Created by Chris Coyier and Alex Vazquez, it’s amazing for trying out concepts, prototyping, learning to code, and code sharing. It’s defined by its team as follows:

    CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

    29. JSFiddle

    Founded by Oskar Krawczyk and Piotr Zalewa, JSFiddle is an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as “fiddles”. It allows for simulated AJAX calls. In 2019, JSFiddle was ranked the second most popular online IDE by the Popularity of Programming Language (PYPL) index based on the number of times it was searched, directly behind Cloud9 IDE, worldwide and in the USA.

    30. SoloLearn

    SoloLearn is a great online playground that lets you test HTML, CSS and JavaScript code. It also offers basic coding courses for free and a forum where developers and learners discuss various code-related topics.

    Conclusion

    There are thousands of web development tools available to front-end devs. What’s important is that you understand entirely what each tool does so that you can make the best choice specific to your project’s needs. Front-end web development keeps growing and evolving, so it’s crucial to stay on top of the new shiny tools out there as some will save you hours of development, and more importantly, contribute to a better user experience.