Makzan’s Dispatch 19w43: Life Chart

I turned into 33 year-old this week, and added 12 more crosses to my life chart.

I read from somewhere long ago telling that we can put our entire life into a chart within one piece of paper. Expecting if we will be 80-year old, that is 960 months. If we represent one tiny tile as a month, we can plot a 24 x 40 grid into one piece of paper.

You can download a piece of life chart here →


Links worth sharing

Firefox 70 is out

Inactive CSS properties in the Rules view of the Page Inspector are now colored gray and have an information icon displayed next to them. The properties are technically valid, but won’t have any effect on the element. 

Book: Laying the Foundations by Andrew Couldwell

This is real talk about creating design systems and digital brand guidelines. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips.

This book is full of practical advices and tips.

JAM SF Videos

JAM stack stands for JavaScript + API + Markup stack. Their latest conference was hosted in San Francisco last week. Now the organizers are uploading the videos. They are all great speakers and valuable sharing. 

Free for Developers

A big list of software (SaaS, PaaS, IaaS, etc.) that provides free tier for developers.

CSS Mistakes

That should be corrected if anyone invents a time machine. :P

We learn from our mistakes. But first, we have to be honest to our mistakes.

UI: The problem with dropdown fields (and what you should use instead)

Dropdown fields are:

  • Sometimes being missed.

  • Not easy to use.

  • Hiding the available options.

  • Subject to mouse scroll accidental changes.

Video: The Real Fake Cameras Of Toy Story 4

A virtual camera in animation that simulate real world lens limitation.

Just for Fun: Can you draw a perfect circle?

My best score is 96.1%, using mouse. How about you?

Code worth sharing

After upgrading to macOS 10.15, I see many icons are updated with a gradient border. I mimic the same gradient border effect in CSS3.

The core CSS effect:

.demo:before {
  --border-width: 6%;
  content: '';
  background: linear-gradient(to bottom, white, #ccc);
  width: calc( 100% + var(--border-width)*2 );
  height: calc( 100% + var(--border-width)*2 );
  position: absolute;
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);

The full code example:

Quote worth sharing

“Top skill for entrepreneurs: Being great at ignoring what everyone else is doing.” — Jason Fried

Thomas Mak,
until next week.