#353 — August 15, 2018

Read on the Web

Frontend Focus

webhint: A Linting Tool for Web Best Practices — A customizable (and extensible) tool that checks your site for accessibility, performance, security, and other concerns. Note: webhint is the new name for Sonarwhal.

JS Foundation

Everything You Need To Know About Alignment in Flexbox — A look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works.

Rachel Andrew

Highly Reliable, Scalable Object Storage Starting at $5 a Month — Manage, migrate, and control data any way you want, immediately, with no need for configuration. Learn more.

DigitalOcean sponsor

'Scroll Bouncing' and How It Works — A good understanding of the scroll bouncing effect (and how to prevent it, if you wish) is helpful for building any site that has fixed elements.

William Lim

Native Lazy Loading Coming to the Web Platform — You’d use the lazyload attribute on an image, say, to trigger the behavior. “To be clear, nothing is final yet and this might not become part of the spec,” says Feross, although IE and Edge already support it to some extent.

Feross Aboukhadijeh on Twitter

Browser Painting and Considerations for Web Performance — An explanation and case study on the impact the browser paint process has on web performance and why you should be mindful of it.

Georgy Marchuk

A Friendly Introduction to Flexbox for Beginners — Christian Krammer walks you through the basics of flexbox, showing how you can use flexbox to lay out specific page elements, and also how it can serve as a handy fallback method in browsers that don’t support CSS Grid.


💻 Jobs

Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.


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


📘 Tutorials

Simple Interactive Pie Chart

Simple Interactive Pie Chart with CSS Variables & Houdini Magic

Ana Tudor

The Art of Debugging with Chrome's DevTools

Prashant Palikhe

▶  SVG Filters: The Crash Course

Sara Soueidan

Exploring SMACSS: Scalable and Modular Architecture for CSS — SMACSS provides a set of solid organizational guidelines for working with CSS.

Slobodan Gajic

The Future of JavaScript: 2018 and Beyond. Get the Whitepaper

Progress Kendo UI sponsor

The Generic Sensor API — Exploring the Generic Sensor API, which aims to provide a consistent API for different sensors.

Ruadhan O'Donoghue

Dynamic Resources with the Network Information API and Service Workers — The Network Information API allows developers to determine the connection types and the underlying connection technology that the user agent is using.

Dean Hume

A Web of Anxiety: Accessibility for People with Anxiety and Panic Disorders? — An angle to accessibility you may not have considered before.

David Swallow

📘 Articles and Opinion

Let's Serve Everyone Good-Looking Content — Whether or not their browser supports the latest layout model or not.

Hidde de Vries

Don't Miss SIGNAL: Twilio Customer & Developer Conference - Oct 17 & 18 — Level up your skills. See how the right set of API tools help build better customer experiences, faster.

twilio sponsor

Icon Fonts vs SVGs: Which One Should You Use In 2018? — Aren’t sure whether you should be using icon fonts or SVG icons?

Cody Arsenault

🔧 Code and Tools

Hex Naw: A Color Accessibility Testing Tool

Hex Naw: A Color Accessibility Testing Tool — Enter your colors and get contrast ratios and find out if your combos are suitable for text or not.

The Scenery

Vue CLI 3.0 Released — The standard build toolchain for Vue apps supports pre-configured webpack features, ES2017 transpilation, and PostCSS out of the box.

Evan You

Developer Tools for Every Customer Session – New in FullStory

Fullstory sponsor

Spirit App: Easy Realtime Animation For the Web — The app itself is here but this tutorial is, perhaps, a better way to understand why it’s useful.

Dennis Gaebel

React Chrome Extension Boilerplate — Boilerplate code for if you want to build a React-powered browser extension.

FullStack Academy Kiev

Line-Height Crop: A CSS Formula to Remove Top Space From Your Text — By way of a simple SCSS mixin.

Claudia Romano