Together with  Frontend Masters logo

#​579 — February 8, 2023 | Read on the web

The Guide to Responsive Design in 2023 & Beyond — Ahmad shares a detailed look at modern responsive web design, offering a thoughtful take on how we should think about things in 2023. An excellent and up-to-date primer which may get you thinking about certain approaches.

Ahmad Shadeed

Mozilla, Google Looking Ahead to the End of Apple's WebKit? — Following word of Chrome’s Blink-based efforts, work on a Gecko-based version of Firefox for iOS is also said to be underway. Currently only WebKit-powered browsers are allowed on Apple’s iOS — but the hope from Google and Mozilla is that this will change.

Thomas Claburn

New Courses on the React Learning PathReact Performance: Optimize React applications for maximum perfromance. React & TypeScript: Create robust and reliable React apps at Scale.

Frontend Masters sponsor

Ten Web Development Trends in 2023 — Following the State of JS survey results Robin takes a considered look at new web dev trends that we should be paying attention to this year, and why they matter.

Robin Wieruch

Announcing Interop 2023 — 'Interop' is an ongoing cross-browser effort to “increase interoperability across browsers in key technical areas”. In 2022 significant improvements were made. This post from Mozilla outlines the plan for the year ahead.

James Graham (Mozilla)



📙 Tutorials, Articles & Opinion

How To Build a 'Magazine Layout' with CSS Grid Areas — A practical look at how to use the capabilities of CSS Grid to “achieve layouts that look like they were laid out by hand”.

Jennifer Brehm

ElementInternals and Form-Associated Custom Elements — As of Safari Technology Preview 162 support for the ElementInternals API is enabled, bringing it up to speed with other browsers.

Ryosuke Niwa

▶  Self-Hosting Fonts (@font-face) Explained (including Google Fonts) — A 15-minute video from Kevin in his usual accessible style on hosting fonts, making them performant, and why you may need to do it yourself anyway when it comes to GDPR compliance.

Kevin Powell

▶  "React Isn't Great at Anything Except Being Popular" with Josh Collinsworth

Whiskey Web and Whatnot sponsorpodcast

A color-contrast() Strategy for Complementary Translucent Backgrounds — Adam demos a potential ‘future CSS trick’ for dynamically contrasting text with a supportive translucent background to ensure maximum accessibility. Read the comments for further context, as this is just a bit of wish casting at this point.

Adam Argyle

Bringing Letters to Life: Coding a Kinetic SVG Typography Animation — Learn how to recreate a neat motion type effect using SVG and GreenSock. There's code examples and CodePen demos to help things along.

Louis Hoebregts

'My Favourite 3 Lines of CSS' — ...revealing just how powerful CSS custom properties are.

Andy Bell

How to Favicon in 2023: Six Files That Fit Most Needs
Andrey Sitnik

Building a Stylish Masonry Layout using CSS and JavaScript
Andrico Karoulla

Testing Color Accessibility with Dev Tools
Michelle Barker

Quirks of the Page Visibility API
Matt Joseph

🔧 Code, Tools & Resources

Vanilla List: A Directory of Vanilla JavaScript Plugins — But note that the plugins themselves may have multiple dependencies, just not stuff like jQuery, React, etc.


▶  ScrollyVideo.js: Responsive 'Scrollable' Videos — It’s an interesting effect and well demonstrated here. Compatible with React, Svelte, Vue, or just plain ole’ HTML.

Daniel Kao

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut — The best issue tracking software is one that software developers are actually happy to use.

Shortcut (formerly sponsor

lawnmower: A Library to Build VR Layouts Using HTML Tags — A web component library that aims “to make building a basic VR website as easy to make as your first HTML site”. There’s a 10-minute video showing it off here. Getting flashbacks to the X3D and VRML eras :-)

Gareth Marland

Swiper 9.0: Mobile Touch Slider with Accelerated Transitions — Tree shakable, library agnostic, and focused entirely on modern browsers and web APIs. RTL support too. GitHub repo.

Vladimir Kharlampidi

URL Animations: Add Loading Animations to a Site's URL — Certainly a novelty that you won’t use on many projects, if any! You can check out lots of different live examples here.

Abubukker Chaudhary

🧑‍💻 JOBS

Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what's possible if your mission is to increase human happiness.

Senior Frontend Software Engineer — Help us redefine how work is done. Join our remote engineering team and work on hard problems. React, TS, GQL, Storybook, AI/LLM 🚀

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.