Responsive Grid Design: An Ultimate Guide — A comprehensive and highly visual guide to using grid for layout (think column structure, gutters, side margin values, etc). The sort of thing that's handy for reference.

Nitish Khagwal

A Primer on the Different Types of Browser Storage — The browser has many options we can utilize to store data, this post from Ido Shamun runs through them.

CSS-Tricks

New Course: Introduction to Next.js, The Full-Stack React Framework — Next.js is a complete framework built on top of React.js. You'll learn server-side rendering, static site generation, data fetching, code API endpoints, creating pages with the file system, add CSS modules, and more.

Frontend Masters sponsor

Prevent Layout Shifts with CSS Grid Stacks — A detailed explanation with real examples of a CSS grid technique used to prevent layout shifts when a component state changes.

Hubert Sablonnière

Faster Web App Delivery with PRPL — PRPL is a pattern for structuring and serving web applications and Progressive Web Apps with an emphasis on improved app delivery and launch performance.

Addy Osmani

JavaScript/TypeScript Architect + Developer Advocate, London UK — It’s time to build your masterpiece – can you design a platform and a framework used by the NHS, HMRC, Valve, and Microsoft?

CareersJS

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

Creating CSS Shapes with Emoji — This is pretty neat. A mash-up of sorts, bringing together CSS Shapes with various 😎 emoji to create interesting text-wrapping effects.

Preethi Sam

Getting Started with Chrome's Origin Trials — Origin trials give you access to a new or experimental features before they are made available to everyone. Here’s how to register for them.

Sam Dutton

Comparing Tools for Quality Engineering for Web UIs — When tasked with automating his front-end tests, a developer set out to explore the options and shares an interesting comparison table here.

Vitali Malinouski

Anima 4.0: Go Straight From Design to React in the Design Handoff — Lets you cherry-pick elements straight from a design and get fully written React components that just work. Here's more about the Anima 4.0 release.

Geoff Graham

Web Performance: 11 Must-Read Tips to Give Your Site a Speed Boost

Shopify Partners sponsor

When Will Web Browsers Be Complete? — A short exploration into the ‘end game’ of web browsers. Lots of chatter on this over on HN too.

Lee LF94

How to Timeout a fetch() Request — How to use setTimeout(), the abort controller, and fetch() API to make requests with a configurable timeout.

Dmitri Pavlutin

How to Build A Progressively Enhanced Accordion Component with Vanilla JS

Chris Ferdinandi

Radix Icons: A Crisp Set of 15×15 Icons in a Variety of Formats — Assets available for Figma, Sketch, IconJar, SVG, installable via npm, and as React components.

modulz

A Better Way to Work With Git? — Trying to remember all those Git commands? Still afraid of using Git’s advanced features? There’s a better way.

Tower sponsor

NSFW JS: TensorFlow-Powered Client Side Indecent Content Checking — Would it be helpful for you to detect.. ‘unseemly’ images on the client side? Enter NSFW JS. We first featured this over a year ago but it’s just had a significant performance-oriented update.

Infinite Red, Inc.

Butter Slider: A Simple Drag and Hold Slider with No Dependencies — You can set it up with data-* attributes in the HTML with a simple init() call, or do it from your script. Demo here.

Armand SALLE

Pure CSS Oil Painting — Another amazing project from Diana, all done with just HTML and CSS. This time the page is presented like a game character creation screen, in which you can customize elements - such as hair color. The detail on the necklace is particularly impressive.

Diana Smith

Rocket Validator: Automated Accessibility Scanner for Large Sites — Not free, but you can sign up for a trial. This tool will automatically scan your site, from a single starting URL, to find markup and accessibility errors and warnings.

rocket validator

Fingerprint JS 3.0: Modern and Flexible Browser Fingerprinting Library — With v3 it’s become completely modular and has been rewritten in TypeScript. Definitely one of those ‘please use this for good, not evil’ type projects though.

FingerprintJS