Everyone is busy inputting their goals in GoodReads for their reading lists and starting their 2021 goals of several books to read. But this year, I thought something more interesting would be to make a list of 10 topics that I would love to read about this year and learn more about.

This way of keeping track of what I read is also inspired by the fact that I have started to take notes using the Zettelkasten Method. It inspires you to create your “Second Brain” by just creating notes and then linking them to other notes. …

It’s always hard to keep your own website up to date when you are busy with the 100 different projects that you are working on. This is my way to make that process easier to always have an up to date presence on the web.

This by no means is a perfect solution to your website, or even mine. Maybe next year it will change, and evolve. This is just for me to put my thoughts down and help you automate your workflow as I have done with mine!

What’s the Architecture?

For the hosting solution, I went with Netlify. It’s an affordable…

We are all used to the clean code that Array.map and Array.filter provide us, but for your real world applications, are regular for loops better than these convenient methods?

There are a few metrics we will consider when comparing the methods in the Array class, to the “old” for-loop way of doing things: performance, readability, and scalability. Here is one example of the types of loops we will be comparing today:

const items = [’abc’, ’def’, ’ghi’, ’jk’];

This is a perfect use case for the filter method:

const threes = items.filter(item => item.length === 3);

Or the for-loop way…

JavaScript is a dynamically typed language, and that is fantastic. But, it does add some confusion when you work with many developers together as a team. Interfaces, types, and generics can be a helping hand in developing reusable, type-safe, and bug-free code.

TypeScript Generics can really help elevate your code readability and usability. If you’ve seen TypeScript code that becomes so complicated that you see “any” type everywhere, it can usually be solved with a generic.

What is a Generic?

A generic is sort of a term to identify the signature of a method, which supports many different types. The most common generic which…

MobX is one of the popular state management libraries which uses the ever-so-popular publish-subscribe pattern to store data across your entire front-end application. Actually, MobX has nothing to do with front-end code, you can use it for any JavaScript Code.

Redux library has been known for it’s lengthy start-up time because of the boilerplate code that is needed. It has some basic concepts like: Providers, Actions, the Store, and the almighty connect() function. However, setting all this up usually takes several files and an in-depth understanding of how all of those pieces connect together.

Step-by-Step WalkThrough

If you prefer a walkthrough video…

For new developers coming from an Object Oriented Programming (OOP) background, classes and lifecycle methods may be much easier to understand. However, React’s Hook API has been ever more popular and usable in the front-end world.

What are Lifecycle Methods?

Here is a chart listing all the lifecycle methods in each phase of the component: mounting, updating, and un-mounting. As you can see, mounting and updating share couple of methods, but the others are very distinct to each step in the lifecycle.

We all know that iPhones are very restrictive and make you use your own phone in a certain way, but Mac OS provides a vast amount of flexibility which you should definitely update based on your own personal preferences. Below are just some examples which I always change when I get as new PC (or reset my current one).

Some advanced options will require you to open the Terminal application on your Mac. You can do this by opening /Applications/Terminal or search for it in Spotlight CMD+Space and Type “Terminal”

Customize Your Dock

The dock might be the most interacted component of your…

When you write the same piece of code, more than 1 time with minor differences, it’s a good indication that you need to create a more generic version? This is where you can benefit from creating a custom React Hook.

Probably the most frequent task in front-end web development is integration with external APIs to populate your application with data.

Prefer a Video Walk-Through Instead?

Requirements for useData hook

• Must be able to fetch data from an API for any query
• Must indicate when data is loading
• Must return a proper error when the fetch failed
• Must not make unnecessary calls to APIs

So let’s tackle these one…