#458 — September 16, 2020

Web Version

Frontend Focus

Read Me: An Essay on Reading on the Web — An expressive, visual, and detailed piece exploring what makes web text readable, the evolution of type on the web, and a series of concluding tips on what you can do to achieve engaging text/layouts. There's something pleasingly both modern and 'early CSS' about the design of this too.

Tsvetelina Miteva, Vitaly Volk

The History of Web Search — The fourth entry in Jay Hoffmann’s excellent and comprehensive Web History series, this time looking at the birth of web search (think WebCrawler, AltaVista, Yahoo!, Google, etc).

CSS-Tricks

Over 500M End-Users Depend on Our Scalable Chat & Activity Feed APIs — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

An Introduction To Running Lighthouse Programmatically — A brief introduction to Lighthouse (a popular tool for improving the quality of your pages), the advantages of running it programmatically, and a walk through of a basic configuration.

Katy Bowman

Introducing Source Order Viewer in the Microsoft Edge DevTools — Edge 86 has introduced a feature that shows the source order of a page. Tap through for some video examples of it in action, and details on how to enable it.

Microsoft Edge Team

Is The Web Getting Slower? — A detailed look at how devices and the web have changed over the past 10 years, and what those changes have meant for web performance.

DebugBear

⚡️ Quick bits:

💻 Jobs

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

➡️ Looking to share your job listing in Frontend Focus? More info here.

📙 Tutorials, Articles & Opinion

How to Use CSS Masking — CSS masking gives you the option of using an image as a mask layer. This means that use can use an image, SVG, or a gradient as a mask to create interesting effects in the browser without the need for an image editor.

Rachel Andrew

How CSS Perspective Works — Amit Sheen explains the concept of perspective in CSS animations, starting with the very basics, working up to a fully animated 3D cube.

CSS-Tricks

▶  Navigating Navigation & Keyboard Accessibility — A 12-minute video looking at accessible navigation, achieved via things suchh as semantic HTML, ARIA roles, document structure, and stylized states using :focus: as well as the new :focus-within styling.

Una Kravets

30 Developer Resources to Diversify Your Skill Set — Identify the most important, high-impact developer skills that will help your résumé and business remain relevant.

Shopify Partners sponsor

▶  You Really Don't Need All That JavaScript, I Promise — If you have twenty minutes, you might enjoy this. Stuart, a long time Web standards expert, explains why we shouldn’t rely on JavaScript as much as we do and why we shouldn’t reach for a JS framework as the first, last, and only tool we use.

Stuart Langridge

Giving Users and Developers More Control Over Focus — Chrome 86 introduces two new features that improve both the user and developer experience when it comes to working with focus. Here’s what you need to know.

Google

▶  Web Content Accessibility Guidelines 2.1 and 2.0 Explained — In this 15-minute video Eric provides an overview of the latest accessibility guidelines, their structure, and you can start following them in your work.

Eric Eggert

Proportional Resizing with CSS Variables

Ahmad Shadeed

Managing Several Displays with The Multi-Screen Window Placement API

Thomas Steiner

How to Detect Fullscreen Mode using CSS

Amit Merchant

🗓 Upcoming Events:

  • Getting Started with the DOM (September 18) — Edidiong Asikpo explains the DOM, its tree-like structure, and how to target and manipulate it.
  • Improving Web Animations by Learning from Performance Mistakes (September 21) — Rowan Merewood, Developer Advocate for Chrome at Google will deliver a free, personal talk on things discovered trying to build fun animations on the web.
  • Front-End Web Development Foundations (September 28) — An in-depth, four half-day live online training event that "will give you a foundation of front-end web development".
  • Frontend Love (October 1 - 2) — Online JavaScript conference with over over 20 frontend professionals and authors speaking.
  • ImageReady (October 2) — A free half-day online event featuring talks about modern image formats.

🔧 Code, Tools and Resources

No Mouse Days: A Package to Disable The Mouse Cursor — Why would you want this? Well, having a way to compel you to do some keyboard accessibility testing can’t be a bad thing.

Marcy Sutton

BGJar: Free SVG Background Generator — This interactive site lets you customize existing backgrounds (dimensions, colors, gradients, shapes) and download the updated file (or grab the SVG or data URI code).

BGJar

Go Keyless with Award-Winning Smart Locks. Protect What’s Important

igloohome sponsor

glaze: CSS-in-JS Microlibrary for Making Design Systems Approachable with React — Another CSS-in-JS option, this one features utility-first CSS, constraint-based layouts, and a near-zero runtime.

Kristóf Poduszló

Stitches: The Modern Styling Library — Another CSS-in-JS solution, this one offering high performance, SSR, theming, critical path CSS, an intuitive API, and lots more.

Modulz

Zoomstock: Free Stock Photos Organized Visually — This is a little different. A free stock photo search engine that shows you related results as you zoom in or out on the page. Pulled in from about a dozen free image sites.

zoomstock