30 Life-saving Tools for Front-end Developers

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.

Continue reading 30 Life-saving Tools for Front-end Developers on SitePoint.