Chrome 88 – What’s New in DevTools

I especially like the New CSS Angle Visualization Tool 🙂

What’s New In DevTools (Chrome 88) →

The Lava Lamps That Help Keep The Internet Secure

At the headquarters of Cloudflare, in San Francisco, there’s a wall of lava lamps: the Entropy Wall. They’re used to generate random numbers and keep a good bit of the internet secure: here’s how.

How geeky! 🤩

SqUID Warehouse Robot

SqUID consists of a synchronized autonomous robotic fleet that has 3-dimensional movement capabilities, allowing a fully flexible operation. A high-end embedded control system and smart real-time data analysis allow BionicHIVE’s algorithmic engine to dynamically learn problems created in one warehouse and apply resolutions to all warehouses in the network.

Cool.

BionicHIVE →

10 Next.js Tips You Might Not Know!

Next.js can do a lot for you — which means there’s features you probably haven’t used! This video covers ten tips you might not know about Next.js.

Thinking on ways to solve Centering in CSS

Adam Argyle looking at several techniques to center in CSS, and how they hold up in several conditions (narrow screen, rtl, etc)

In today’s challenge, we’re stress testing 5 different CSS centering techniques. See what techniques should earn a place in your tool belt by watching how they react to common layout stress. The contestants: content center, gentle flex, autobot, fluffy center, and pop & plop.

If you prefer a written format, a full write-up is also available on web.dev

Centering in CSS →

Data Fetching with React Server Components

Just announced by the React Team are Server Components:

React Server Components are still in research and development. We are sharing this work in the spirit of transparency and to get initial feedback from the React community.

With Server Side Rendering the rendering of your app to HTML happens up front, gets sent to the client, and then needs to be hydrated once the bundle is loaded. After that the app becomes interactive and every change/render happens on the client. With React Server Components, the HTML for each component can be fetched several times from the server throughout the app’s lifecycle, and certain libraries that are only used on the server won’t ever make it into the bundle.

Knowing that the folks from Next.js are also involved makes this even more exciting …

“React Notes” Source →
Server Components RFC →

Better Times

Pretty crazy: a timelapse + lip-sync video all while growing a beard in between:

Timelapse animation music video, with my beard growing through Covid lockdown. Using my face as a stop-motion puppet (a technique called pixilation), I took 2,117 individual photos, every night, over 101 days, and synchronized the actions to the song “Better Days” by Radical Face.

A ton of planning and work went into that video, as talked about in this behind the scenes:

🤯

7:1 Furniture Collection, the first furniture made to be seen by the vision-impaired

The collection precisely uses a 7:1 color contrast ratio, a contrast level that makes a visual most accessible to people with disability. We use an international vision enhancement method by W3C organization, which makes a content or object visible at Level AAA standard (a highest level of visibility).

Must say I find them visually quite pleasing. Reminds me of Cel Shading (aka Toon Shading)

7:1 Furniture Collection →

Via Roel

Beyond Fast: Features to Improve the Performance of your Web Pages

Few tips by Jake Archibald — as presented at #ChromeDevSummit — on how you can use some of the new and upcoming web features to improve the performance of your page.

Covered are the aforementioned content-visibility, Font metric override descriptors, the Back/Forward Cache, Portals, and Preloading

Extending CSS with Houdini

In this video from #ChromeDevSummit 2020, Una walks us through Houdini and the aforementioned houdini.how

CSS Houdini is an umbrella term that describes a series of low-level browser APIs and worklets which enable developers to hook into the browser’s rendering engine and extend the styling capabilities of today. Learn about the various Houdini API’s, as well as how to use them cross-browser with the Houdini Paint Polyfill. Also learn about a new resource to help you quickly get started with exploring Houdini in your own projects today.