List of tools for Front End Developers!
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 Lighthouseintegration, 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”.
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 Guideand 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
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
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.
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.