Ten years of responsive web design

Responsive Web Design Turns Ten — Ten years ago the phrase ‘responsive web design’ was first coined. This guiding blog post , outlining the three ‘ingredients’ needed ( fluid grids, flexible images, and media queries ), soon followed. Here, Ethan takes a look back at just how responsive design came to be.

Ethan Marcotte

Everything New on Microsoft Edge from Build 2020 — Microsoft Build 2020 took place entirely online for the first time last week but it wasn’t short of announcements and great talks, particularly for MS’s Edge browser. Here'sa video roundup of what's new if you'd prefer.

Kyle Pflug (Microsoft)

New Course: Design Systems with Storybook & React — Learn to create a design system from scratch using React, and document the design system to share with your team using Storybook.

Frontend Masters sponsor

Google Fonts Is Fast. Now It’s Faster. Much Faster — Using Google Fonts? It can often prove to be one of the bigger performance bottlenecks, but in this thorough guide Harry Roberts runs through several optimisations you can put in place to make things snappy.

CSS Wizardry

A Complete Walkthrough to Using WebGL — A really detailed walkthrough of getting started with WebGL at the low level, complete with integrated, editable examples and coverage of the math behind 3D rendering. If you’ve ever wondered what libraries likeThree.js are using behind the scenes, it’s all here.

Maxime Euzière

:computer: Jobs

Frontend Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

:orange_book: Tutorials & Opinion

How to Tame Line Height in CSS — Caleb Williams looks at the line-height property, “probably one of the most misunderstood, yet commonly-used attributes”.

CSS Tricks

▶   How to Center an Element Horizontally and Vertically with Flexbox — You’ve heard all the jokes about the difficult of center aligning things with CSS, but laugh no more as Ali demonstrates how to do it in just a minute.

Ali Spittel

Local Testing on an iPhone — You should be testing on a real-world mobile device, so here’s a nice and quick way to get your localhost server running on an iPhone with the help of ngrok.

Josh Comeau

The State of Micro Frontends — “ One of the more controversial topics in frontend web dev is microfrontends. Are they worth it? Should you really split up your application? ”

Florian Rappl

Here’s What I Didn’t Know About “ content ” — You’ll no doubt learn something here.

Manuel Matuzović

How to Make a Simple CMS with Cloudflare, GitHub Actions and Metalsmith — Let’s say you want to build a CMS but don’t want to mess with the fiddly UI bit.. how about using GitHub itself? Couple that with the Metalsmith static site generator and Cloudflare Workers.. and here you go.

Jon Paul Uritis

target="_blank" - The Most Underrated Security Vulnerability — Why rel="noopener" should be added to links containing target="_blank" as a precaution against reverse ‘tabnabbing’.

Manjula Dube

▶   Using Chrome DevTools Console Utilities to Make Debugging Easier

Tomasz Łakomy

:wrench: Code, Tools and Resources

instant.page 5: A Way to Make Your Site's Pages Feel Faster — A reasonably simple piece of JavaScript you can drop onto a page that adds link preloading (upon mouse or pointer hover on a link) to make page transitions seem unnaturally fast.

Alexandre Dieulot

Tailblocks: Ready-to-Use Tailwind CSS Blocks — This is a set of 60+ ready-to-use UI blocks built with Tailwind, the popular CSS framework. 15 categories of blocks, which you canpreview here.

Mert Cukuren

Blunt: A CSS Framework That Helps with Layouts and Leaves Your Styling Alone — This is a little different. This framework doesn’t have any effect on design visuals, it only provides helper classes for positioning and responsive layouts.

Frankie

LaTeX.css: Make Your Site Look (More) Like a LaTeX Document —LaTeX is a popular typesetting system frequently used in academia and mathematic or scientific documentation.

Vincent Dörig

Howler.js: An Audio Library for The Modern Web — Makes things easier cross-platform. Uses the Web Audio API but can fall back to HTML5 Audio.

James Simpson

LineIcons: 2000+ Free Line Icons for Designers and Developers — A nice looking set of line-based icons, categorized, and available in a number of different formats including web font, SVG, AI, and more.

LineIcons

A Pure CSS 'Oil Painting' — Another amazing effort, this time of an Italian-style renaissance painting, from CSS artist Diana Smith.Related repo.

Diana Smith