Smoother & sharper shadows with layered box-shadows

If you try to capture the subtleties of a real shadow with box-shadow then, well, you’re pretty much out of luck. The box-shadow CSS property isn’t exactly built to encourage expressiveness. But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control …

More performant YouTube embeds with <lite-youtube-embed>

By Paul Irish: Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster. Installation per NPM: npm install lite-youtube-embed Usage: <!– Include the stylesheet, this could be direct from the package or bundled –> <link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" /> <!– Include the custom element …

Use Netlify as a URL Shortener

The idea is to have a dedicated repo with only a _redirects file in there which you constantly update and push (and thus deploy). To help automate that, Kent C. Dodds create a package named netlify-shortener which does that for you: Generates a short code if one is not provided Validates your URL is a …

Write your own React with Concurrent Mode from Scratch

At React Advanced 2019 Conference, Shawn Wang planned on giving a talk on writing your own React with Hooks from scratch. As he already did that (ace!) talk at JSConf.Asia (video here), he decided to swing things around and write his own React clone with support for Concurrent Mode:

The State of JavaScript 2019

Last week the State of JavaScript 2019 got released, showing the results of a survey taken amongst some 20K JavaScript Devevelopers, asking them about their favorite JavaScript features, front-end frameworks and back-end frameworks. Although the group of participants is quite limited (both in numbers and locations), they’re all fond of React and Vue, TypeScript, Arrow …

A Netlify Serverless Function in one Tweet

Your first serverless function in one tweet: 1. Save this as `functions/my-first-function.js`: exports.handler = async () => ({ statusCode: 200, body: 'boop',}); 2. Deploy to Netlify3. Call it at <your site>/.netlify/functions/my-first-functionhttps://t.co/cRgT9Yxbmy — Netlify (@Netlify) December 20, 2019 This is cgi-bin all over again, right? 💡 Looking to deploy a website to Netlify? You can find …

Native Image Lazy Loading in Chrome Is Way Too Eager

UPDATE 2020.07: the thresholds have been adjusted to be less eager: We’ve improved <img> lazy-loading in Chrome! https://t.co/zx8sf7I86L The new thresholds for when we load <img loading=lazy>: * Offer *much* better data-savings* Are closer to JavaScript lazy-loading libraries* Are rolling out to Chrome 79+ pic.twitter.com/3OHm2rnRAm — Addy Osmani (@addyosmani) July 17, 2020 For the Web …

A/B Street – A traffic simulator written in Rust

Ever been on a bus stuck in traffic, wondering why there are cars parked on the road instead of a bus lane? A/B Street is a game exploring how small changes to a city affect the movement of drivers, cyclists, transit users, and pedestrians. I should send this to my local government, as they keep …

Drawing Tip: A thicker pen hides mediocrity

Your drawings probably look rubbish because you’re using an old biro that happened to be laying around. Nobody’s used one of these since cassette tapes stopped needing to be fixed, so throw that in the drawer full of batteries, twine and assorted electrical tape from whence it came. Instead, go thicker. Go felt tip. Go …