Testing React Hooks With Enzyme and React Testing Library

Solid intro to test your React apps with either Enzyme or React Testing Library: In this tutorial, we will look at how to do that by making use of a to-do application built with hooks. We’ll cover writing of tests using Ezyme and React Testing Library, both of which are able to do just that. …

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 …