Ten years of responsive web design

#442 — May 27, 2020 Read on the Web Frontend Focus 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's a 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 like Three.js are using behind the scenes, it’s all here. Maxime Euzière ⚡️ Quick bits: You can now emulate vision impairments and color blindness in Chrome 83 to see how your site may appear to certain visitors. Sure, you can play the dino game in Chrome when offline, but you how about a bit of offline surfing in Edge? Enhanced Safe Browsing protection is now available in Chrome 💻 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 ℹ️ Interested in running a job listing in Frontend Focus? There's more info here. 📙 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 🔧 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 can preview 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

by via Frontend Focus