A bit of math never hurt any icon, avatar, button or card. — Even the most skilled designers need help at first. Math can support you until you can rely on your own design skills. Round shapes in typography often expand below the baseline to follow the rules of optics. To balance these shapes, typography uses negative margins, even if you don’t notice it:

Ever wondered how to make such thing working right? Me too. So here’s how with none of the $ObjMap<T, F> utility obscurity. — It looks like is should work but it doesn’t. There are few mistakes in our basice assumptions. tl;dr: Use Object.freeze() and $Exact<T> Flow type utility. 1. Type is not Exact Defning object type in Flow is by default inexact. Making your object type $Exact<T> would force object to has only the properties/keys defined by the…

Recently I switched from developing React Native apps back to developing websites. You know, due the corona and stuff. And I miss few things. More than a few things to be honest. But what I miss the most is the tooling, Flow in particular. — Flow is a static type checker. It checks the Flow type annotations embeded into Javascript code and bugs you with errors while you code before you even start the engines. That’s why it’s tagline states it’s a static type checker for JavaScript.

When the Fujifilm XT-3 camera came with an firmware update Ver.2.10 that allows us to shoot video files over 4GB file size limit I thought that that’s it. All of my problems should have magically be gone by now. Except I was wrong. — The release note states: Recording over 4GB movie file as one file Movie files are no longer split when the file reaches 4GB file size. The file is recorded as one file providing an SD memory card greater than 32GB is used (excludes 32GB) (*1).

This my first take on looking for a straightforward unified solution to responding to Keyboard open–change–hide events in React Native. There are great solutions that work great in some specific cases. But I’ve tried and failed to get them work great together. — This is the first article to cover this broad topic to invite others to share their experience. I am sharing mine together with some code samples. I am looking for your comments and thoughts.

Having a dog left some serious marks on my life, on my wellbeing and on my mind. In no way I would be this person without my four legged companion. Maybe I would, but not that soon. He’s the catalyst to most of the advances I did as a human being. He pushes me constantly. Mostly because I have no other option and no extra time to think too much. He’s a stubborn as only a dachshund can be. — Here’s a list of what a dog like Tobias can teach you:

Rendering of the fonts differs on Android and iOS. — Even on iOS before version 7. Recently I had to use the same font on the React Native project for both platforms. The difference was just too big. Styles I’ve used: { fontSize: 12, lineHeight: 18 } On Android the line height rendered <Text /> component: 1 line of text…

Somebody should told me this before If you want to start with CSS in the React Native and if you come from the web environment just like me, the React Native environment comes with its own set of quirks. Here is a list of some I had to face for…

The missing piece for the vertical rhythm, typography & spacing on the web. — The picture above is a simple example of an information architecture. It’s not only about the visual aesthetics, but it also describes a visual system—paddings and margins create rhythm, but more importantly they create a hierarchy between objects, the relationships, emphasize priority and reinforce what is (un)important. …