React Material-UI: a FAB with an optional tooltip

I’m using Material UI library to have Material Design components on a rather complex React project. Despite being good, this library unfortunately doesn’t provide a tooltip option to the Float Action Button, something I need at the moment.

I found some useful information on this project issue, and after digging into the code of IconButton – which has a tooltip option – and Tooltip itself, I wrote a component that provides a Float Action Button with an optional tooltip:

The icon is ready to be used with Font Awesome project, which is what I’m using. Other minor adjustments I made, like font size, can just be removed too. And my project requirements are web only, so that’s all I tested.

Extending native objects in create-react-app

Despite being considered a bad practice by some, I like to extend native objects to add some syntatic sugar. However, when working in a React project with create-react-app, I receive the following ESLint error:

Array prototype is read only, properties should not be added  no-extend-native

Fortunately this warning can be disabled by adding a comment in the file where you extend the native object. Putting it all together, this is what I’ve got:

/*eslint no-extend-native: ["error", { "exceptions": ["Array"] }]*/
Object.defineProperty(Array.prototype, 'last', {
  get: function() {
    return this[this.length - 1];
  }
});
Object.defineProperty(Array.prototype, 'empty', {
  get: function() {
    return this.length === 0;
  }
});

Syntatic sugar added, clear console.

Absolute imports with create-react-app

When developing React using create-react-app with custom-react-scripts, I wanted to use absolute paths for import, and I found this: just adding NODE_PATH=src/ to “.env” file. It worked on Windows, but not on Linux.

After a while, I sorted it out: echo $NODE_PATH told me that my Linux had NODE_PATH being set somewhere. Then, being conservative, I just added unset NODE_PATH to “~/.bashrc” file, and it finally worked.

JavaScript development is a nightmare these days.

Google Chrome 61 slow, how to fix

After updating to Chrome 61, I instantly noticed that YouTube became slow, and Google Maps – particularly Street View – became so slow it’s unusable. I went back to Firefox Developer 57, but then I missed Chrome’s search capabilities.

I found out that the problem is the HTML5 canvas, and the fix is rather easy: just disable this flag in Chrome flag page:

chrome://flags/#enable-color-correct-rendering

Instantly all the sites became responsive again.

React App State: React without Redux

Coming from Angular 2, I’m delighted with React simplicity. In large projects, having a global state management seems to be a very good thing – lift the state through the roof! –, so I started to search for libraries to do this.

After trying hard to use and like Redux, the most famous one, I became very frustated on how unnecessarily complicated it is, probably because it started as a framework-agnostic solution that was then ported to React. It’s the complete opposite of React’s simplicity. I also tried MobX, and I also disliked it. But I was convinced that the basic idea was good.

So I ended up writing my own implementation of a Redux alternative: what I would like to have as a state manager for React, the result is React App State.

The idea is to have an AppState instance that receives a set call, analog to setState, and then all components that have subscribed to this instance will receive the updates via props. Even better, my implementation doesn’t resort to context as crutches. Multiple AppState instances can be used in an app, and a component can subscribe to any number of instances.

Wrap the set calls in controller classes, like shown in the example, and you have a scalable solution.

I only found two pitfalls:

1. If a component subscribes to an instance which has a variable named foo, and the parent of this component tries to pass the same prop as foo="bar", there will be a name collision – what is obvious;
2. If two AppState instances have a variable foo, and a component subscribes to both instances, there will be a name collision as well.

I think these pitfalls are very manageable, and I can live with them. After all, name collisions also exist in Redux.

React App State is the first package I publish on NPM.

Grep and find aliases

Two quick bash functions to speed up name and content search on files. These are to be appended at ~/.bashrc file:

function gr { clear ; grep -rn $1 . ; }
function ff { clear ; find . -name "$1" ; }

Holy Grail CSS layout with overflow

This morning – yep, a Sunday morning – I needed to implement an HTML page with the Holy Grail layout. A quick search gave me dozens of implementations, but all of them broke apart when you trew a lot of content into the sections. Being fond of the Flexbox model, I quickly came with an implementation that had all the needed overflow control:

This implementation is also modular: if you don’t need any of the panels, just remove them – the layout will stay working. Also, the satellite panels can have fixed dimensions, see the commented values for width and height.

The funny part is that min-height: 0. It’s there for Firefox; without it, the overflow goes wild. Other interesting thing is the absence of the height: 100% to html and body elements, it’s not needed.