V8 internals for JavaScript developers: Arrays

This presentation demonstrates how learning just a little bit about JavaScript engine internals can help you improve the run-time performance of your JavaScript code — not just in V8 specifically, but across all JavaScript engines!

A written version is also available.

Elsewhere , , , Leave a comment

The tip of an iceberg

Look closely … 😢

By Jorge Gamboa (via Artists.Without.Borders)

Elsewhere Leave a comment

The Making of ”Welcome Home” by Spike Jonze

I really enjoyed Apple’s “Welcome Home” ad for the HomePod, directed by Spike Jonze:

Over at AdWeek there’s a behind the scenes video available showing how they made it:


In particular, we get immersed in the choreography and the production design. But we also see how other elements came together, like the lighting, music and VFX.

Really fascinating stuff as there was almost no CGI involved (the set really moves as it was built using hydraulics).

This Look Inside Spike Jonze’s Apple Ad Is as Fascinating as the Film Itself →

(via )

Elsewhere , , , Leave a comment

The Broccoli Tree: A Parable

Patrik Svedberg had been taking photos of a particular and unique tree which he named “The Broccoli Tree”. He posted the photos on an Instagram account dedicated to the tree. And then one day, he noticed something was wrong with the tree. This video by Seth Radley tells the story.

To share something is to risk losing it

(via Kottke)

Elsewhere , Leave a comment

Convert SVG to JSX with SVGR

Ooh, this one’s handy. Paste in (no drag and drop unfortunately) the contents of an SVG file and out comes the JSX code for immediate use within your React project.

SVGR also simplifies your SVG using SVGO (which is also the driving force behind SVGOMG)

SVGR : The SVG to JSX transformer →

Elsewhere , , , Leave a comment

Subsetting web fonts with glyphhanger

glyphhanger is a great tool to work with web fonts, developed by the folks at Filament Group. It serves two goals:

  1. It shows what unicode-ranges are used on a web page:

    # local and remote URLs
    $ glyphhanger ./test.html
    $ glyphhanger https://example.com
    
    # output characters instead of Unicode code points
    $ glyphhanger ./test.html --string
    
    # show results for each font-family on the page
    $ glyphhanger ./test.html --json
    
    # show results only for one or more font-family names
    $ glyphhanger ./test.html --family='Open Sans, Roboto'
  2. It can subset web fonts so that you end up with smaller font files:

    # Subset to the glyphs at a URL only using content that matches a specific font-family
    $ glyphhanger ./test.html --subset=*.ttf --family='Lato,sans-serif'
    
    Subsetting LatoLatin-Regular.ttf to LatoLatin-Regular-subset.ttf (was 145.06 KB, now 24 KB)
    Subsetting LatoLatin-Regular.ttf to LatoLatin-Regular-subset.zopfli.woff (was 145.06 KB, now 14.34 KB)
    Subsetting LatoLatin-Regular.ttf to LatoLatin-Regular-subset.woff2 (was 145.06 KB, now 11.37 KB)

From 145.06kB to 24kB, that’s a huge win!

glyphhanger is mentioned in this highly interesting talk “Web Fonts are ▢▢▢ Rocket Science” by Zach Leatherman:

Installation per NPM:

npm install -g glyphhanger

glyphhanger – your web font utility belt →

Elsewhere , , , Leave a comment

Fancy Words and Big Concepts

Reminds me of a few meetings/conversations I recently had 🙃

More quotes by Naval in this post: Navalism.

Elsewhere , Leave a comment

Using @supports to detect if a browser supports CSS Variables

As tweeted by Ire Aderinokun:

@supports (color: var(--)) { 
   /* has support */
}

Not too surprising if you’ve used Feature Queries before, but what does surprise me is that you can make it work by only passing the prefix of CSS Custom Properties (e.g. --) into the var() function.

See the Pen Supports CSS Variables by Ire Aderinokun (@ire) on CodePen.

Original Content , , 2 Comments

A New View of the Moon

Wylie Overstreet and Alex Gorosh took a telescope around the streets of LA and invited people to look at the Moon through it. Watching people’s reactions to seeing such a closeup view of the Moon with their own eyes, perhaps for the first time, is really amazing.

(via Kottke)

Elsewhere , , Leave a comment

Rough.js – Create SVGs with a hand-drawn, sketchy, appearance

Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

To get started first create a rough canvas:

const rc = rough.canvas(document.getElementById('canvas'));

On that rough canvas you can then start drawing things, and tweak the “roughness” along with that:

rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

The code above evaluates to this:

Rough.js – Create SVGs with a hand-drawn, sketchy, appearance →

Elsewhere , , Leave a comment