The Toolkit of a Freelance Full Stack Web Developer

I am a freelance full stack web developer and I want to share with you which tools help me to build optimized web applications and custom websites.

Becoming a freelance full stack web developer requires a lot of work and love of learning. At first sight it might be overwhelming to understand what you need to know and learn to make an entire web application on your own. Over the years I’ve built a lot of web applications and custom websites as a full stack web developer. Regardless of what I am building, I always try to choose tools best suited for the project.

What is different if you leave a long-term job and start as a freelance full stack web developer?

If you don’t have a pool of clients to work for, you will spend a lot of time to find quality freelance jobs. A lot of people think it is very easy to find a project as a freelance developer, because there is high demand for web developers. However, it takes a lot of time to find projects which pay well and good clients with real expectations.

As a full stack web developer, I have built web applications in JavaScript language, both in back-end and front-end. Not because I believe Javascript (Node.js) is the best back-end language, but the benefit of using the same language in front-end and back-end development.

In this article, I want to share with you which tools and applications I use as a freelance full stack web developer. Feel free to reach out to me or leave a comment, if you think there are better tools or some tools are missing in this article.

No-coding tools

You need no-coding tools as a freelancer. They help you with communication with clients and landing a freelance job. When you start as a freelance full stack developer, the communication and final deliverable are more important than tools that you use to get the final result.

RSS Reader

RSS is a way for website authors to publish notifications of new content on their website. This content may include social media posts, blog posts, podcasts, or video recordings.

Why do you need RSS Reader?

Many freelance job listings websites allow you to subscribe their RSS feed. RSS reader application notifies you with new job opportunities and you are able to send freelance proposal among the first candidates.

Pagemonitor

Pagemonitor is a browser extension which monitors web pages for changes in the background. The purpose of Pagemonitor is the same as RSS Reader. It allows you to monitor web pages with job listings which don’t have RSS feed.

The Clock

You always need to schedule meetings with you clients and co-workers. As a freelance full stack developer you need to schedule meetings with others in different time zones. This tool is my personal preference. The Clock is a tool for Mac menu bar which allows you to add multiple time zones clocks. It contains a slider which lets you navigate through time. With this tool, scheduling meetings across different time zones is much easier.

Gmail Notes

If your clients or co-workers are overseas or in different timezones, communication is crucial and more challenging. If you have only a few hours overlap you will practice asynchronous communication a lot, usually by email. In this case, it is very convenient to write down notes directly in email messages. Gmail Notes helped me a lot in long email communication.

Coding tools

Visual Studio Code

As a full stack web developer I spend a lot of time in my code editor and that’s the reason why code editor is one of the most important tools. Visual Studio Code is a code editor optimized for building and debugging modern web applications. It is the first effort by Microsoft to create cross-platform editor which works on Windows, Mac OS and Linux. Visual Studio Code can be configured with themes, snippets and language support. Like many other popular code editors, Visual Studio Code has a massive amount of extensions available to customize its behavior. The software is quick like a pure text editor but it has the power of a much heavier IDE.

GitHub

GitHub is an open-source repository hosting service, which hosts your source code projects and keeps track of source code changes. The service uses git, an open source revision control system that runs in the command line interface. Using GitHub makes it easier to collaborate with co-workers and look back at previous versions of your source code. Moreover, it is one of the largest coding communities around, so using it can provide wide exposure for your projects. It’s also packed with social networking features that make it great for getting feedback and ideas from the broader software development community.

Kdiff3

Comparing source code is one of the most common tasks in software development. Text editors or IDE’s usually provide this feature. However I prefer a separate tool for this task, because sometimes I use a couple of editors simultaneously. KDiff3 is an open source difference and merge software that allows users to compare or merge text input files/directories, show differences between lines or characters, and provides an automatic merge-facility. KDiff works on Windows, Mac OS and Linux.

Front-end tools

React.js

React.js is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React.js allows developers to create complex web user interfaces which can change data, without reloading the page (single page applications). React.js can be used with a combination of other JavaScript libraries or frameworks. Since it requires only a minimal understanding of HTML and JavaScript, React has risen in popularity as a front-end web development tool. React Developer Tools is great for inspecting react components within their hierarchy and also great for observing their current props and states.

Gatsby

Gatsby is a static site generator based on React. You can enjoy the power of the latest web technologies including React.js, Webpack, React-router, GraphQL, ES6+ and more. Gatsby leverages powerful pre-configuration to build a website with fast page loads, code splitting, server-side rendering, data prefetching and assets optimization. Gatsby has been around since 2015 and its first version was released in 2017. You can find number of starters to help you get a site up quickly.

Bootstrap

Bootstrap is an open-source HTML, CSS and JavaScript Framework, which contains CSS and Javascript fragments and web components for front-end web development. Bootstrap is used to create mobile-first, responsive websites quickly and is compatible with all modern browsers. One other advantage of using Bootstrap is that you don’t have to start coding from scratch. The Bootstrap official website provides the code snippet for the basic HTML markup and for the various bootstrap components. You can easily avoid writing redundant front-end code and elements like buttons, tooltips, forms, modals, etc.

D3.js

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It is desired and very common to visualize data in modern front end web development. You can use various Javascript libraries for building data visualizations, but D3.js is the most popular library and you can find many examples, which you can “easily” customize. While there are plenty of D3 examples available, D3 doesn’t provide any templates. Instead, D3 provides helper functions that work at a more general level. These helper functions can handle selecting elements, generating a scale for data or animating elements.

Back-end tools

Node.js

Node.js is a JavaScript run-time environment that executes JavaScript code outside of a browser, which allows you to write server-side applications in JavaScript. Node.js gives you a great boost that comes from using the same language on both the front-end and the back-end. It’s unique I/O model makes it much more flexible and best for scalable and real-time situations. Due to its non-blocking architecture, Node.js works well for encoding and broadcasting video and audio, uploading multiple files, and data streaming. The tooling around Node.js is really good. You can find various tools such as Nodemon, Loggly, Migrat, PM2, which helps you debug, monitor and manage Node.js applications.

Express.js

Express.js is a web application framework for Node.js, designed for building web applications and APIs. Express gives developers all the tooling they need to build HTTP servers. Node.js does very little out of the box. You can use other alternatives such as Koa or Hapi, but Express is the most popular framework for Node.js and you can find a lot of examples and modules for this framework.

PostgreSQL

There are various solutions for storing data. You can choose a relational database management system (RDBMS) which uses SQL syntax and suits in most use cases. However, there are some cases where you need to store a graph or unstructured data and NoSQL database works better. As a freelance full stack web developer, you need to choose very wisely and pay attention to how data should be stored. When project scales or deadlines are pretty tight, wrong decisions can be very painful and expensive. I personally prefer PostgreSQL, because it is a free open source solution which provides a lot of features.

Postman

Postman is a well known HTTP client which allows you share, test and document APIs. It offers a user interface and powerful features to make API requests without the need to write some code to just interact with API. Postman allows you to send HTTP requests with parameters and show you the response. It allows you to test servers behaviour for a particular API endpoint. You can create collections, what is a group of individual requests in one folder. It helps you consolidate requests, parameters, descriptions, scripts in folders. You can export or import collections, which can be beneficial for API organization and sharing. Postman is useful for both front-end and back-end developers and their collaboration.

Hosting tools

Heroku

Heroku is a cloud platform as a service (PaaS), which allows you to deploy your web application. Heroku gives you a ready environment for application deployment where you don’t have to worry about the underlying infrastructure. Heroku allows developers to get applications up and running quickly without having to worry about operations. This is a great use-case for prototypes and MVPs with low traffic. On the other hand, you cannot control exact configuration of you server in terms of hardware. Moreover, if traffic to your web application is very high, you have to pay a lot and it makes more sense to use other solutions such as AWS.

AWS

Amazon Web Services (AWS) is an Infrastructure as a Service, offering compute power, database storage, content delivery and other functionality to help your online businesses scale and grow. Compare to Heroku, AWS is more attractive in terms of cost-efficiency. At the same time, it loses out as for usability. You can always switch between Heroku and AWS if hosting plans change or your application demands a custom infrastructure. If you are not sure about the traffic of your project, it is better to deploy your project on Heroku first. If your web application scales, it is better to deploy on AWS.

Firebase

Firebase started out as a Backend-as-a-Service  (BaaS) and grew into a next-generation app-development platform. Firebase allows you to develop the whole application on the front-end without any server-side code. However, you can set up some server-side logic via Firebase Functions if you need to react to some events like the creation of data or files, login, https requests, etc. You can use Firebase for hosting your front-end projects. It allows you to authenticate users using client-side code, setting up and provisioning a back-end database as a service, etc.

Cloudflare

Cloudflare provides content delivery network (CDN) and other services for websites, mostly as it offers a convenient free plan for personal sites and blogs. When a visitor of your website is located some distance away from your server, your site’s content has to travel much further, resulting in slow page load times. CDNs solve this problem by providing a globally distributed network of edge servers that keep a copy of your site’s static content. So when someone visits your site and they are located halfway around the world, the request is routed to the nearest possible edge server, reducing latency and serving up content quicker. For site owners who have visitors from all over the world, CDNs can help deliver a faster site experience. CDNs provide many additional benefits besides just the performance factors. CDNs can help improve your site’s security by protecting against DDoS attacks and Google has long-considered speed a ranking factor in its algorithms. Cloudflare provides SSL protection for customers for free and Google also consider SSL protection as a ranking factor.

Design tools

Pixelmator

Pixelmator is my personal preference for OS X. As a freelance full stack web developer, I was required to edit photos and images for user interfaces. Pixelmator is a photo editing software which includes a wide selection of basic and advanced editing tools for affordable price. Pixelmator uses layers, so you can make changes to your photos without permanently altering the original. Pixelmator supports a wide variety of file formats, including popular image files like RAW, JPG, TIFF, PNG, GIF, PSD and even PDF.

Invision/Avocode

Both tools Invision and Avocode are cloud services, providing features for sharing, inspecting and communicating design made by Sketch. Both tools are created for designers, but provides different features. Avocode give designers a way to share designs, style guides and assets to developers. It allows teams to inspect all the elements that compose the design, to leave comments, etc. Invision aims to create clickable prototypes with a possibility to link specific elements on a screen to another screen. It also has most of the Avocode’s features to inspect, comment and share assets & files with your team. Avocode is better for collaboration between designers and developers who don’t use Sketch or Photoshop. Invision is better for creating an interactive ui prototype. Freelance full stack web developers use one of these tools very often for developing front-end, but the decision for choosing the tool depends on budget and designers decision.

color-hex.com

Color hex is a very simple online tool and have many alternatives. This tool gives information about colors and it generates a simple css code for the selected color. Color is an essential part of design and your customers require to deliver whole solution including designing user interface. Choosing the perfect color scheme can be challenging for full-stack web developers, but you can find a lot of online tools which generate color schemes or give you some inspiration.

0to255.com

Did you find a color, which you would like to use in your web application, but it doesn’t fit well into your color scheme?

As a freelance full-stack web developer, I have came across a lot of situations when I picked a color for user interface or specific element, but the color was too bright or dark. 0to255.com is a color tool that helps you find lighter and darker colors based on any initial color. The tool is also useful for finding the right color or color combinations for hovers, borders, gradients or various states for ui elements.

Optimization tools

PageSpeed Insights

PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved. At the top of the report, PSI provides a score which summarizes the page’s performance. Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. Besides this, it can improve user experience and conversion rates on your web site. PageSpeed Insights tells you exactly what issues are slowing your site down and how to fix them. Research shows that internet users can be very impatient. 40% of users will abandon a website that takes longer than three seconds to load. On mobile sites, the number is even higher, at 53%.

TinyPNG and TinyJPG

Unoptimized images could be the main reason why your website loads slowly, which leads to losing your potential customers. TinyPNG and TinyJPG are great online tools that let you optimize your PNG and JPG images. TinyPNG uses smart ‘lossy’ compression techniques to reduce image size by selectively decreasing the number of colors in it. TinyJPG analyzes the best possible JPEG encoding. Based on the content of your image an optimal strategy is chosen. The resulting images require fewer bytes to store the data. The effect is nearly invisible but it makes quite a large difference in file size.

Mobile-Friendly Test

Google’s Mobile-Friendly Test tells you how Googlebot sees your page and if your page is mobile friendly. Google uses mobile-friendliness as a ranking signal. If your website isn’t mobile-friendly, your ranking in search results can be low when someone is searching by a mobile device. If the website you entered passes Google’s test, you will see a green banner indicating the website is mobile-friendly. If the website does not pass the test, Google will let you know the page is not mobile-friendly and gives you the reasons why.

WordPress tools

Jetpack

Jetpack is a WordPress plugin which adds a lot of features to your WordPress website within an user-friendly environment. Jetpack plugin can significantly improve the speed, functionality, and security of your WordPress website. The most of Jetpacks features are for free, but there are Premium or Pro editions that gives you more features. Jetpack provides free CDN for images for free. It monitors traffic to your site and gives you statistics to help you see which posts are popular. You can add social buttons on your posts so readers can share your content. Jetpack includes security features which help you keeping your site safe and much more.

Yoast SEO

SEO is one of the most important factors for a site’s growth. Yoast SEO plugin is by far the most complete SEO solution that is available for WordPress and help you make your site as a search engine-friendly as possible. You can add custom post titles, meta description, and meta keywords for posts and pages. When writing the meta information, WordPress SEO plugin shows you a Google search result snippet preview, so you can see exactly how your content will look when someone search for it in Google. Yoast plugin is able to generate XML sitemaps and you can edit your .htaccess and robots.txt files. It checks whether you’ve used the keywords in important locations, analyzes the number of words in paragraphs and also checks the presence of links and images in the post.

W3 Total Cache

Caching is the process of storing data from existing requests to re-use for subsequent requests. WordPress has a lot of caching plugins available. W3 Total Cache is by far the most versatile WordPress caching plugin available, because it gives you granular control over the settings. Optimizing those settings gives you more options to improve performance. W3 Total Cache plugin caches the dynamically rendered portions of your page into plain HTML. The result is improved user experience and enhanced server performance, reduced bounce rates and increased conversion.

Asset CleanUp: Page Speed Booster

If you have done all basic optimization such as cache, CDN, and others but still needs more improvement, Asset Cleanup plugin helps you optimize CSS and JavaScript files. Most themes and plugins inject their CSS and JavaScript files on every page regardless of being used on the page. To improve the speed of your website, it is much better to prevent those styles and scripts from loading on pages where they are not used. The plugin allows you to selectively remove unused styles and scripts from any page or post on your site.