Table of Contents
- Mozilla Developer Network
- Chrome Developer Tools
- Node and NPM
- Build Tools
- Can I Use
- Visual Studio Code
- TLDR Legal
- Free Icons and Images
- Google Fonts
- Regex Visualizer
- JSON Diff
Bellow is a list of tools that I find helpful as a web developer.
Mozilla Developer Network
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 – 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 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.
React + ecosystem – React is currently the hottest framework, so if you were going to learn one framework I would recommend getting started there.
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.
Can I Use
JsHint – An older but still very popular ESLint competitor. It is more performant, but less customizable.
Visual Studio Code
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.
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 – 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.
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
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.
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 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 – 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 – Open Source vector graphics editor. Like GIMP but for SVGs.
Google Fonts – Large set of custom fonts open-sourced by Google.
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 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
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.
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.
I hope you found this list helpful. Please share your favorite tools in the comment area below.