Poté — Open Up

Combine a SBTRKT-like voice with beats like The Blaze make ‘m, put ‘m under Bonobo’s wings, and you get Poté.

Debut album “A Tenuous Tale of Her” out today!

Using deepfake to create better Lip-Syncing

Now this is a good use of deepfake: correct the mouth and jaw movements of actors in dubbed video to match the new language track. The result is a (nearly) seamless lip-synced experience.

TrueSync is the first AI offering from our neural network film lab. Filmmakers and content owners are now able to visually translate foreign language film into the native language of any audience. The photorealism is at such a level, the lip-sync so seamless, that the idiosyncratic performance of the onscreen actor remains intact in every detail.

Flawless TrueSync →

Chrome 91 – What’s New in DevTools

That CSS Scroll-Snap highlighter sure is one very welcome addition!

What’s New In DevTools (Chrome 91) →

Remix v1 Beta Launch Video

Michael Jackson and Ryan Florence recently launched the v1 beta of the aforementioned Remix.

Through lots of live code, Ryan and Michael will tell you all about where Remix started, where it’s at now, and what this v1 Beta launch means for one of the most exciting web frameworks today.

If you’re into React, be sure to watch this — especially the part at the 31 minute mark … you’ll love the final code to solve that specific problem 😍

What’s especially to love is that Remix embraces the fundamentals of the web: fetch API, Request, Response, URLSearchParams, etc.

Light Years Ahead | The 1969 Apollo Guidance Computer

Half a century ago, on 20 July 1969, Neil Armstrong was in the final stages of the lunar descent, just a few thousand feet above the surface, when suddenly his on-board computer indicated a critical alarm. For three nail-biting seconds it looked as if the mission would have to be aborted. However, Armstrong was given a “go” to continue, and after several more alarms the Eagle touched down safely on the Moon.

Very insightful talk by Robert Wills, engineer at Cisco. No only does it give an insight in how to land a Lunar Lander on the moon, it also provides a thorough analysis of the hardware and software design principles that saved the mission.

New in Chrome 90

Get your 90s vibe on, as Pete LePage has took the version number 90 to the next level there … BRILLIANT! 🤩

Chrome 90 is rolling out now! There’s a new value for the CSS overflow property. The Feature Policy API has been renamed to Permission Policy. And there’s a new way to implement and use Shadow DOM directly in HTML. Plus there’s plenty more.

~

The Declarative Shadow DOM seems like a very nice addition, but will to have to wrap my head around not using <shadow-root /> for it though — it’s <template shadowroot="open" /> we need to use. You can read the reasoning behind this decision in the explainer.

~

I’ve tweeted about overflow: clip; before. It can be compared to overflow: hidden;, except for the fact that it will never ever create a scrollcontainer (not even one that can be moved programmatically, through JavaScript).

~

New in Chrome 90 →

This Web Site is a Tech Talk

Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020:

The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development.

/me nods along for the entirety of this talk.

Powering his faux-live-coding slidedeck is Queue Code, a package to let you live code like he did in this talk.

This Web Site is a Tech Talk (incl. resources)

The new native web: Bye bye animation libraries?

Talk by Ben Deitmer, as recorded at the latest Front-end Forward Meetup:

Traditionally most web animations are driven purely by javascript. The now widely supported Web Animations Api has potential to drastically decrease the javascript footprint and improve performance out of the box. Ben learns you how to implement this new api but also have a critical look at its limitations.

SVG Explained in 100 Seconds

Nice little video explaining SVGs and how the d attribute of paths work.

Building a Settings Component

In this episode of GUI Challenges, Adam Argyle builds a Settings Component with sliders and checkboxes.

In this post I want to share thinking on building a Settings component for the web that is responsive, supports multiple device inputs, and works across browsers.

Tons of CSS-knowledge in there:

Building a Settings Component (Demo) →Building a Settings Component (Writeup) →