Tech TLDR;

Free Tools for Front End Web Developers

by

Table of Contents

Bellow is a list of tools that I find helpful as a web developer.

Mozilla Developer Network

Mozilla Developer Network – MDN is a great HTML/CSS/JavaScript reference. It is sponsored by Mozilla a non-profit behind Firefox, but anyone is welcome to contribute the content.

W3schools – Beginner friendly tutorial site. I learned my first HTML, CSS, and JavaScript from there. Usually it is not as accurate as MDN, but a great resource nevertheless.

You Don’t Know JS Series – a must read for any web developer. Paper books are for sale, but they are all hosted on GitHub and can be viewed for free.

Chrome Developer Tools

Chrome Developer Tools – Swiss army knife for Front End development, debugging and performance tuning. Include HTML Explorer, Interactive Console, Network Viewer, Performance Profiler, Debugger and much more. Notable recent additions is Lighthouse integration, that allows to benchmarks website performance on mobile devices and provides suggestions on how to improve.

I’ve written two articles highlighting some of my favorite and less known Chrome Developer Tools features:

Firefox Developer Tools – Similar feature set to Chrome Developer Tools, but with some interesting differences. It’s a good idea to learn and use both Chrome and Firefox Developer Tools.

Git

Git – the most popular version control software. Most Open Source libraries (including Front End libraries) are hosted on GitHub – the most popular source code sharing site.

Git Book – My favorite book on Git. Investing few days to read it cover to cover five years ago, was one of the best things I did in my development career.

I wrote a few posts on Git. For Git beginners I recommend taking a look at Git Cheat Sheet. More experienced users may enjoy 19 Git Tips For Everyday Use.

Node and NPM

Node – JavaScript on the server. Surprisingly fast. Built on top of V8 JavaScript rendering engine, developed by Google and used in Chrome. Even if you are not interested in writing back-end JavaScript most modern Front End tools are written in Node, so there is no avoiding it.

Node Package Manager – NPM is not only used for Node packages. Most front end libraries can be downloaded from NPM.

Yarn – Package manager on top of NPM developed by Facebook. It adds performance and predictability on top of NPM, although NPM is working hard to catch up. You can read more about in Understanding differences between npm, yarn and pnpm.

Frameworks

There are so many JavaScript frameworks, that I could run out of space on this site…

jQuery – I recommend this for absolute beginners. It is close to how real JavaScript operates, yet it makes it easier to get started and write cool things fast.

React + ecosystem – React is currently the hottest framework, so if you were going to learn one framework I would recommend getting started there.

Build Tools

Grunt – Beginner friendly and first JavaScript based build tool.
Webpack – Most popular at the moment.
RollUp – Up and coming build tool, that focuses on minimizing build bundles, using “tree shaking”.
parceljs. – Newest built tool, that offers 0 need for configuration (at least for React and Preact apps).

A good way to start using these tool is by finding an appropriate yeoman generator. Yeoman will create a full project set up. It’s easier to learn those tools by reading through the generated projects. It will also set up some of the best practices used.

For simple WebPack dev set up I maintain – Dead Simple JavaScript Next Boilerplate. Every branch of this project is a different WebPack recipe. I use it to quickly spin up new projects without generating too much boilerplate. For production projects, I would refer to Yeoman or some other authoritative set up.

Can I Use

caniuse.com – Allows to check which HTML/CSS/JavaScript feature is supported in various popular Desktop and Mobile browsers.

ESLint

ESLint – Static analysis tool for JavaScript. Closest thing to compiler and catches tons of little bugs.
ESLint Rules – In my opinion is a very well written and easy to understand documentation. I think it should be a required reading for any JavaScript developer.

A good place to start with ESLint rules, is by reading through Airbnb JavaScript Style Guide and particularly Airbnb Base ESLint Rules.

JsHint – An older but still very popular ESLint competitor. It is more performant, but less customizable.

Visual Studio Code

VS Code – In my opinion the most JavaScript friendly free text editor.

Atom – Another popular open source text editor. I prefer VS Code, but I must give credit to Atom. Without Atom we wouldn’t have VS Code, because Atom gave birth to Electron. A wrapper around open sourced Chrome that makes it very easy to develop native-like apps with Web Technologies. Check out Building a Simple Stopwatch App with Electron to learn more.

Sublime Text – Last but not least, I must give credit to Sublime. I still love and use Sublime, and since it is written in C++ it’s much more performant than the two competitors. It is available for free with prompt to upgrade.

So why do I recommend VS Code? Great JavaScript intellisense thanks to using TypeScript (another open source Microsoft product) under the hood. Great built-in Debugger (not only for JavaScript, but for Python, Go etc.). Very good and rapidly growing plugin ecosystem. Great Git integration. Great ESLint integration. Steady release cycle. Good enough performance. It is fast enough for me to not miss Sublime 95% of the time, and for really large files I would use vim anyway.

Sass

Sass – Most popular CSS processing library. Helps make CSS development more manageable. Adds variable support, ability to organize CSS (and combine it into one file for deployment/performance) etc. It was originally written in Ruby, but now works directly with Node.js via node-sass.

It is too powerful for its own good though, so use it with care. I highly recommend sticking to suggestions from 8 Tips to Help You Get the Best out of Sass.

TLDR Legal – Front End developers use a lot of open source project with various open source licenses. TLDR legal is a great tool to help make sense out of them.

Bootstrap

Bootstrap – Most popular CSS framework that makes it easy to make modern looking, responsive website – 118K Stars on GitHub. If you are a beginner, I would recommend learning and using it first.

Foundation – One of the most popular Bootstrap competitors – 25K Stars on GitHub.

Material Design – Google’s answer to Bootstrap, also very popular – 29K Stars on GitHub.

Reset.css

reset.css

The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

As the quote indicates, use it if you don’t use any other CSS framework, to make cross browser behavior more predictable.

Free Icons and Images

Images

Pixabay – A large collection of images, vector graphics, and (smaller collection of) videos in public domain.

Google Pages – Allows to search by various licenses.

Flickr – Also allows to search by license, ton of content that can be used with attribution.

Icons

Fount Awesome – a ton of open source icons that become available by including this library.

The Noun Project – a large collection of vector graphics that can be used for free with attribution or without attribution by paying a one time fee.

ImageOptim

ImageOptim Mac App – Simple GUI tool to optimize images (compressing without sacrificing quality) for web platforms. It’s important to be a good web citizen and reduce download sizes whenever possible.

ImageOptim only works on Mac, but their site links to similar products that work on other platforms.

GIMP

GIMP – Open Source competitor to Photo Shop. Great for adding transparent layers, filters, getting size and color from mock-ups and all kinds of other image processing needs.

Inkscape

Inkscape – Open Source vector graphics editor. Like GIMP but for SVGs.

Google Fonts

Google Fonts – Large set of custom fonts open-sourced by Google.

Regex Visualizer

regexper.com – Regular expression (regex) can be hard to read, this tool helps visualizing regular expression as a state machine. I often use it to check my own regex and to help me make sense of regexs written by others.

JSON Diff

JSON remains the most popular data format on the web. Most API calls, for example, will return JSON. JSON is pretty easy to read, but it’s pretty hard to compare two JSON files. That is where jsondiff.com is very helpful. It will sort JSON files and highlight the differences.

At my work, I deal with sensitive data, and I was not comfortable pasting that data into an online tool (even though jsondiff runs completely in browser and doesn’t send any data to the backend).

I cloned jsondiff from GitHub and added an alias to my .bashrc file.

alias json-diff="open /path/to/jsondiff/repo/index.html"

Now I can start a local copy by typing json-diff in my terminal. This example would only work on Mac, but similar approach can be taken in other environments.

CodePen

CodePen – Interactive JavaScript/HTML/CSS playground. Great place to prototype, showcase your work, and find inspiring demos showcasing just how much can be done in the browser.

See the Pen Magic by Alex (@akras14) on CodePen.

A couple of competitors that are worth mentioning are JSFiddle and JS Bin. Both have been around longer than CodePen, but CodePen won most people over with their focus on showcasing beautiful demos.

Conclusion

I hope you found this list helpful. Please share your favorite tools in the comment area below.

Value this content? 🌟
Your $1 helps sustain our efforts.
Grateful for your support! 🙏