A guide to getting your Macbook ready for web development — tools, shortcuts, accessories, tips and tricks, and more

Photo by Ben Kolde on Unsplash

Every now and then, I look for guides like this one to see what other people are using — I almost always learn something new that makes my life as a developer easier.

In this post I go over tools, shortcuts, tips and tricks that I deem essential for a productive setup, in the hopes that it will be useful to other developers.

Table of Contents


A Chrome extension that generates a table of contents for your Medium stories

Photo by Anthony Martino on Unsplash

Why?


How to seamlessly use Lodash high-order functions like debounce and throttle in your React functional components

Photo by Bernard Hermant on Unsplash.

Although modern browsers keep adding support to utility functions (thus rendering Lodash not as useful), you may still find yourself in a situation where you need/want to use Lodash for whatever reason.

And with React being one of the most popular front-end libraries, it’s very likely that you will eventually need to use both in conjunction. It might seem like a trivial task (and it is), but when we put functional components and hooks together in the mix, there can be some pitfalls. I hope this article helps you avoid them.

This article applies to all the high-order utility functions…


Add color scheme responsiveness to your web app

Photo by Glenn Carstens-Peters on Unsplash

Dark mode (aka a light-on-dark color scheme) has become very popular in the past few years. It’s arguably easier on the eyes and battery and it’s supported by all major operating systems for desktop and mobile devices.

In this article, I’ll show you how you can make your web application responsive to the color scheme chosen by the user with both pure CSS and Tailwind CSS.

If you’re not familiar with Tailwind CSS, I recommend checking out the website and the screencasts to learn more. …


Questions you might face during a job interview, and their solutions

Photo by Headway on Unsplash

Last year, I interviewed for software engineer positions at several different tech companies. Since most of the positions were for web development, unsurprisingly I had to answer a lot of questions related to client-side development. Some were simple questions, like What’s event delegation? and How’s inheritance implemented in Javascript?, and some were more challenging hands-on coding problems, from which I’ll be sharing my favorite five in this article.

The key to succeeding at interviews is, without a doubt, to be prepared. So, whether you are actively interviewing or are simply curious to see what kind of questions you might be…


Level up your CLI skills with these keyboard shortcuts

Photo by Juan Gomez on Unsplash

Whether you are an experienced command-liner looking to learn new shortcuts, or you avoid using the terminal because you hate using the arrows to navigate through long commands one character at a time just to change a parameter at the end or the beginning of the line, this article is for you.

I have compiled a list of, what I consider, the most useful keyboard shortcuts you can use in your terminal of choice.

As for the shell, I use Zsh but most of, if not all, the shortcuts also apply to Bash. …


Level up your CLI skills with fzf

Photo by Museums Victoria on Unsplash

Apr 7th update:
* Added chrome bookmark browser for macOS

As developers, when coding, we spend most of our time on IDEs and/or text editors, and although they do a great job abstracting lower-level commands to build, test, run, and debug our code, eventually you will find yourself having to run a command or change a file through the command line.

You can get by just fine with built-in commands and POSIX utilities like pwd, ls, cd, mv, cp, rm, mkdir, touch,cat, grep, find, etc.

But if you want to boost your productivity when working with CLI tools, fzf is:


A guide to getting your Mac ready for web development — recommending tools, shortcuts, tips and tricks, and more

Photo by Domenico Loia on Unsplash

Click here to check out the 2021 version of this post.

I recently switched jobs, and during the first few days on the new job, I had to setup a MacBook with all the tools required for me to do my job, web development. Although, I’ve used Macs for a long time, at my previous job I was developing on a PC with Windows 10. It was surprisingly pleasant and productive once I got WSL up and running, but I’m really glad to have a Mac as my primary workstation once again.

Every now and then, I look for guides…


An introduction to 2D HTML5 Canvas and the animation loop

Image source: Author

I’m trying to make the best out of these quarantine days, and learning new things has been my favorite pastime. A few days ago, I stumbled upon How to GraphQL while working through the Gatsby tutorial. I really liked the background animation, and I decided to replicate that using the HTML5 Canvas.

Vinicius De Antoni

Software Engineer - vdeantoni.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store