1 - React Hooks, Context and Reducers

Quite soon, I need to share the user state within different components. If I understood context correctly, this should be one of the few cases.

Context allows me to share state within different components without the need of explicitly passing the props from top to bottom.

React Hooks is a more functional version/style of writing react components.

React have different APIs for context: the old and the hooks one. As new is always better, let's use the new react hooks. Here is the code

Open in Github

With just that few lines of code (for being javascript) we have a global variable that each component can use.

2 - The Box Component

Moving fast sometimes implies to take some shortcuts. I always struggle to decide when should I cheat or do it right. I use a rule of thumb:

If doing it right takes less than twice the time, let's take the shortcut.

The problem comes with the shortcut. A shortcut for me should not compromise maintainability.

Another rule that I try to respect is the rule of three:

Don't abstract until you have three cases where the abstraction is really needed.

So... After writing component dimensions in several files, I wanted to have the structure in one single file and isolate the component from its dimensions. I ended with a simple react component that enables me to design quite fast:


This trick allowed me to save a lot of time, by playing with different options quite fast. For example in the main App.js, I can do something like this:


Now I can pass normal CSS props to the component as normal props. Saving a lot of time by handling all the positioning within the same.

3 - Positioning

Nice timeline remembering when I am going to die based on average life expectancy

One of the things I will need is to map the mouse position or button click to a specific year of the timeline. I could create a grid of divs and each them reporting its select state. But that option, look too expensive. So I needed to read the mouse cursor and correlate back to a year.

Using again react Hooks, I created a small effect that returns the mouse position in a really simple way:

View on Github

And that was it for today.

Unicorns in Tech

BTW: as mention on Day 4, I gave a talk today @ Tourlane organized and Unicorns in Tech. Here are the slides:

What do you think. Please share your thoughts at @guillermooo.