Tools and Tips for Faster and Easier Frontend Development

In this post, I'll share some tips, tricks, and tools I use every day in frontend development. So buckle-up, and let’s jump into the vast world of the web!

The Planning stage

First of all, use bug and time trackers, such as:

• JIRA - bug and issue tracking, project management

• Breeze - project management and collaboration tool

• Trello - project management tool

These tools will help you in carefully planning your tasks, time and process reporting what will eventually lead to easier frontend development.

PSD era is over

There are much better alternatives than PSD if it comes to frontend development. If you’re using a Mac then Sketch will be your best friend. Zeplin and InVision - both great collaboration tools for designers and front-end developers. They have similar features but also some differences.

Some developers don’t realize that they can make a significant difference if it comes to the time spent on exporting a project while making their job so much easier.

You really don’t need Photoshop

If you are a front-end developer, you probably don’t need all the features Photoshop has. In fact, chances are that you only need a few basic ones, such as a ruler, export settings etc.

There are tons of applications that can replace Photoshop in terms of exporting PSD files to use them with CSS or HTML. Here’s a list of tools I use on daily basis:

• Avocode

• Adobe Cloud

• Photopea

Besides Sketch and other tools mentioned above, there are many more, of course, that can be used to design the UI of your application. Check out Figma that offers collaborative design, Adobe XD or Affinity Designer which is a great and inexpensive tool for vector graphics.

Frontend development stage

Choosing an editor

Different things appeal to different people. Each and every code editor has its own unique features, some people may like them or not. This is why the choice between available code editors is individual. There are many options, such as Atom, VS Code, Sublime, and Webstorm.

Personally, I recommend Webstorm. It has a great support for ES6, snippets, grunt/gulp/npm task launching, bash console, out-of-the-box GIT support (push/pull/merge/rebase/stash/etc.) and the great preview of changes before commit. Unfortunately, it’s not free.

Linter

Using Linter will help you write better, more correct code. I recommend using either Airbnb configuration or configuration recommended by the framework you’re working with.

Browser extensions

If you are using one of the popular frameworks or libraries like Angular, Vue or React you’re in luck because there are debugging browser extensions designed specifically for each one of them. On top of that, there are some extensions that support the development process such as PixelPerfect.

Now let’s talk about CSS for a bit.

CSS Preprocessors

SASS/LESS are CSS preprocessors. They allow us to create variables, methods, modules and lots of add-ons (mixins) that can do the dirty work for us :) These are well-established standards that have been on the market for the past few years, and they still seem to be very popular. I can’t imagine my work without them.

CSS Methodology

CSS methodology is established by the team you’re working with. It is not really verified by apps (like eslint in JS). It is a method of naming CSS classes, creating a file structure and HTML structure. As a developer, you should use one, because it makes the development easier and you help people who are new to the project to understand your code better and faster.

CSS Frameworks

Don’t reinvent the wheel (unless you have the money and resources ;) ). Use frameworks such as Bootstrap or Foundation but keep in mind the way you implement them. You don’t need to include whole packages into your project, you can simply pick modules you actually need and use.

Lots of people develop and test them on hundreds of devices. I don’t think I can achieve a similar solution in a reasonable period on my own laptop ;)

Lastly, use bundlers!

I highly recommend using bundlers such as Webpack or Parcel. They are great for development, creating production package, setting up a development server, hot reload etc. They certainly will make your frontend development much easier.

Conclusion

That’s all folks. If you have any questions or suggestions make sure to leave a comment down below! And remember: work smart, not hard. :)