#458 — September 16, 2020 |
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 |
|
💻 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 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. |
▶ 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 |
|
🔧 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 |