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 →

What’s New In CSS?

At the excellent Web Directions Hover ’21, Adam Argyle opened with a rad presentation covering all what’s new and upcoming for CSS.

From risky and may never be in your browser, to stable and just released yesterday; follow Adam as he strolls through proposals, specs and supporting tools for all the this new CSS hotness.

Expect things such as Container Queries, CSS Scroll-Timeline, Spelling Features, CSS Nesting, CSS Layers, Grid Masonry, Houdini Paint, @property, aspect-ratio, etc. 🔥🔥🔥

You can find the slides embedded above, or review them here.

Your relationship with Apple: It’s complicated

This tweet by Niels Leenheer on his relationship with Apple hit more than close to home:

It’s the lack of consistency across all of these areas, combined with the arbitrariness and ivory tower stance in many situations, that make it a struggle being an Apple customer.

As I’ve put it quite some times before: Apple says “Jump!”, you say “How high?” 😔

Rethinking JavaScript Infrastructure

Christoph Nakazawa, former Engineering Management at Facebook and now Front End Engineer at Stripe, is writing a series about JavaScript infrastructure. In this second part of this still in progress series he digs into eliminating the ongoing need for installing dependencies from the development iteration cycle.

I provide recommendations that I personally implemented and have seen work in a large monorepo with hundreds of thousands of files at Facebook. The ideas are high impact but also high effort. Let me take you on a journey of what reimagining JavaScript infrastructure could look like. My solution — check all of our dependencies into source control and make all development tools available as pre-compiled binaries. This would speed up all repository operations (getting everything up-to-date after a rebase) as well as reduce our in-band reliance on dependency management tools.

Having implemented such a strategy at Facebook, the effects were remarkable:

Immediately after checking out a gigantic monorepo, the time it took to install dependencies, start Metro and build JavaScript bundles was reduced from seven minutes to seven seconds. Half of the improvements came from ideas presented in this series so far, and the other half was achieved through bundling optimizations we’ll talk about in the future. Stay tuned!

The proposed improvements can easily be applied to other programming languages too.

Rethinking JavaScript Infrastructure →

Konva.js — HTML5 Canvas JavaScript framework

For all your working-with-layers-on-<canvas> needs:

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.

There’s also a version to use with React, providing Components for all key components of Konva.

Konva.js →
React Konva →

Learn CSS! — A free course that guides you through CSS fundamentals

During Google I/O, Learn CSS! — An evergreen CSS course and reference to level up your web styling expertise — was launched. Broken down in 23 chapters, you’ll learn the fundamentals of CSS.

You’ll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you’ll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.

You might recognize these chapters from The CSS Podcast — one of the very few podcasts I listen to.

Learn CSS! →

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) →

Solving a Mystery Behavior of parseInt() in JavaScript

Dmitri Pavlutin digs into why parseInt(0.0000005); evaluates to 5:

parseInt(0.5);       // => 0
parseInt(0.05);      // => 0
parseInt(0.005);     // => 0
parseInt(0.0005);    // => 0
parseInt(0.00005);   // => 0
parseInt(0.000005);  // => 0
parseInt(0.0000005); // => 5 🤯

Solving a Mystery Behavior of parseInt() in JavaScript →

On a related note, Yannick Clybouw recently hit a similar quirk where his deploy onto GAE would fail because of a commit hash that looked a wee bit too much like a number:

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.