Automatically correct color distortion in underwater photos with “Sea-thru”

When diving you’ll notice that the colors start acting up: everything will become more washed out (and look more green/blue) from the moment you look down in the water, and everything will become darker as you descend. Colors like red go first: at a depth of 10m it looks brown. To correct this, underwater photographers …

jQuery, now using ECMAScript module syntax

A nice commit migrating away from AMD Modules to ECMAScript modules recently landed in the jQuery repo. Once published as a new release, you’ll be able to actually import $ using the modern ES module syntax: import $ from "jquery"; $('#message').text('Hi from jQuery!'); Handy if you’re modernizing a legacy project that still uses jQuery. 💡 …

WebAssembly: To the Browser and Beyond!

Presentation by Patrick Hamann as given at performance.now(): WebAssembly (or Wasm) is a compilation target for the open web; often considered a hard-to-approach performance optimisation for your browser applications – but it promises to be so much more than that! In this talk we’ll debunk some myths about WebAssembly and explore what it is and …

Build your own React

Rodrigo Pombo: We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. Next to the contents themselves, it’s also presented in a really nice way. As you read along the code next to it also changes. Bret Victor …

Faster JavaScript Apps with JSON.parse()

A performance trick that’s been doing rounds on Twitter, now available as a video: Because the JSON grammar is much simpler than JavaScript’s grammar, JSON can be parsed more efficiently than JavaScript. This knowledge can be applied to improve start-up performance for web apps that ship large JSON-like configuration object literals (such as inline Redux …

Easily use SVG files in React Native with react-native-svg-transformer

React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a Web application when using a library like SVGR to transform your imported SVG images into React components. This makes it possible to use the same code for React Native and Web. Oh, …

Princesses make terrible passwords

From the Firefox Blog: When the Disney+ streaming service rolled out, millions of people flocked to set up accounts. And within a week, thousands of poor unfortunate souls reported that their Disney passwords were hacked. According to media reports, some Disney+ account holders have lost their account access while hackers have sold their logins online. …

Single div CSS Tesla Cybertruck

Of course it had to be done: What I found most peculiar is that only the front lights are generated content, all the rest is gradients. Only detail that’s missing are the smashed windows 😜 Oh, Here’s another nice version (no single div though): See the Pen Pure CSS CYBRTRK 🚙 by Jhey (@jh3y) on …

React: Fetching data with lifecycle methods, hooks, or suspense — a comparison

Dmitri Pavlutin has compared the several ways to fecthing data in React. Lifecycle methods had been for a long time the only solution to fetching. However fetching using them has problems with lots of boilerplate code, duplication, and reusability difficulties. Fetching using hooks is a better alternative: way less boilerplate code. Suspense’s benefit is declarative …

Change the marker of a list to any character with list-style-type: <string>

Since CSS Level 2, CSS list-style-type has supported keywords like disc or decimal to define the appearance of the list item marker. Landing in Chrome 79, and also available in Firefox ever since version 39, is the ability to set it to an arbitrary string. Here’s a pen that demonstrates its behavior / usage: Let’s …