September 10th, 2021
I have learned a lot about front-end development over the past few years and as a result, I have stumbled across and discovered many tools that have helped me to work efficiently and effectively thus improving my overall workflow and finishing projects on time to a high standard. In this post, I will briefly share a few of my most-used tools that have helped me immensely when working on front-end projects.
Notion is a productivity app and it plays a central role in the way I plan and organise my work. For web projects, I use Notion to create notes and to-do lists which I use as a reminder and reference whenever I am working on several projects at the same time. I also use it to create weekly schedules to plan what I need to complete at a specific time and date. By doing this, I have total control over how each project is progressing and I can manage each project efficiently helping me to complete work on time before any deadlines.
Sourcetree is a Git graphical user interface client which I use when version controlling and tracking changes to my code with Git. With Sourcetree, I can create & delete branches and pull, push and commit code to my GitHub repository through Sourcetree's GUI. Sourcetree enhances my workflow as it saves time from having to type Git commands through the terminal which can become repetitive very quickly especially whenever I am working on a large project where I need to push, pull, commit a large number of files. Another benefit of using Sourcetree is that that it provides a visual graph of my commit history so I can see every commit I have made including the time & date the commit was made along with the commit messages.
Sass is a preprocessor and an extension of CSS. When working on a front-end project, I like to ensure that my code is maintainable and scalable so that it is easy to understand, clean and organised. Sass helps me to achieve this because instead of putting all of my CSS code into one stylesheet I can split and organise my code into various components. e.g. files for the styling of my header, navigation, footer, homepage etc. This makes my code more modular as I can quickly identify the file in case I need to change a specific component or a page.
I use Node Package Manager for projects that rely heavily on JavaScript. Through the NPM site, I can browse various open-source packages published by other developers which I can then use in my web projects. As a result, this speeds up the development process as it reduces the time required in having to create a solution myself when there are thousands of tried and tested open-source packages available.
I also use NPM Scripts to automate repetitive tasks. E.g. updating projecting dependencies, compiling CSS and deleting temporary files and folders etc. I can achieve this by creating custom scripts in the package.json file found in the roots folder of my project. Once created, I can then run the scripts in the terminal. So instead of having to type 'parcel src/index.html src/about.html src/contact.html --open' anytime I want to open up a site that uses Parcel I can simply run 'npm start' which will run the exact same thing for me.
Parcel is an application bundler for bundling code from multiple files into one single file ready for the browser. Parcel enhances my workflow as unlike other bundlers, it requires zero configuration meaning I can use it instantly out-of-the-box by running some commands in the terminal setup using NPM Scripts to watch, compile and build my code ready to be deployed to production.
Here's is a front-end template boilerplate I created using Parcel and Sass which can be used to help you get up and running in creating a new website: https://github.com/mo-rob-1/frontend-boilerplate
The Chrome DevTools is an integral part of my workflow and it is hard to imagine what it would be like to work on a project without it. I use DevTools to view and manipulate the DOM, edit the CSS of my site and run & debug JavaScript code in the console. I often take a mobile-first approach when building responsive websites and with the DevTools, I can view the site at various screen sizes allowing me to create responsive sites intricately and efficiently. The DevTools enhances my workflow as I get to see things in real-time and if I come across any errors, I can quickly identify and debug the code. I have also used the Firefox Developer Tools which equally works well.
Lighthouse is an extension for Google Chrome that generates an audit and report for a web page. Once I have deployed a site live, I run Lighthouse on each page to see the scores for the following categories; performance, accessibility, best practices and SEO. More importantly, it provides me with a list of recommendations for each category on how I can boost the scores leading to a more improved and optimised site. This adds value to my workflow and overall process because building a site that is highly optimised is crucial and Lighthouse helps me to achieve with ease and less stress.
Netlify makes deploying front-end applications easier and simply without having to worry about complex deployment configurations. I use Netlify in my workflow to deploy my sites and React applications. My favourite part of Netlify is its automatic build feature which is great for whenever I commit and push new code to a GitHub repository. Instead of having to manually deploy the site or application again, Netlify takes control of this for me as all I need to do is ensure my GitHub repository is connected to Netlify.
Whenever I build a custom WordPress site I like to use Local by Flywheel for my local development environment. This saves me time from having to set up a server and a database as it provides me with an intuitive interface where I can quickly install a new WordPress canvas where Local by Flywheel takes full control of setting up a server and a database for me. The installation only takes a minute and once installed I can swiftly move on to developing a brand new custom WordPress site saving me time from having to do the installation process myself.
To conclude, these are a few tools that I have discovered and use regularly for my front-end projects. Each tool mentioned in this post has drastically improved my workflow and as a result, aided me to build projects on time to the highest standards possible. Hopefully, this post has introduced you to some new tools or has made you think about your current workflow and the ways in which you can further improve it.