#352 — August 8, 2018

Read on the Web

Frontend Focus

What Happens When You Create a Flexbox Flex Container? — Rachel Andrew unpacks how flexbox works in detail, starting with a look at what actually happens when you add display: flex to your stylesheet.

Smashing Magazine

Well-Controlled Scrolling with CSS Scroll Snap — An introduction to CSS ‘Scroll Snap’ features (API shipping in Chrome 69) which allow developers to create well-controlled scroll experiences by declaring scroll snapping positions for things like carousels and paginated articles.

Robert Flack and Majid Valipour

The Future of JavaScript: 2018 and Beyond — What is the state of the JavaScript ecosystem? This whitepaper offers our future-looking analysis and predictions about the latest in JavaScript. We also look back at all the craziness from 2017 and neatly tie it together with a bow. Download now.

Progress Kendo UI sponsor

Creating a Sticky, Smooth, Active Navigation Bar — Walks through the creation of an elegant sidebar for single page navigation that automatically updates the current item based on scroll position.

Chris Coyier

Chrome 69 Now in Beta: What's New? (Tons.) — Chrome 69 introduces a lot of new features of interest to developers, from several new CSS features (including conic gradients, new margin and padding properties, plus display cutouts), as well as OffscreenCanvas, the Keyboard Map API, the Web Locks API, and, yes, even more.

Google

CSS Grid Level 2 Updated: Subgrid Specification Completed — The CSS Working Group has published an updated Working Draft of CSS Grid Layout Level 2 that contains the much awaited ‘subgrid’ feature.

W3C

js13kGames: The HTML5 and JS Game Development Competition Is Back — Always a fun contest with some interesting results. You’re limited to 13KB for all code and assets. It runs August 13-September 13.

Andrzej Mazur

The Cost of JavaScript in 2018 — A detailed write-up of thoughts and findings on how much effect JavaScript has on page sizes and performance and some ways to improve matters.

Addy Osmani

Blink Intent to Ship: Support for WebSockets Over HTTP/2 — Currently if a WebSocket is requested from an HTTP server, a new HTTP/1.1 connection must be established even if there is an active HTTP/2 connection. Work is being done to change this.

blink-dev

Your Site's Body Text is Too Small — Why website body text should be bigger, and ways to optimize it.

Christian Miller

💻 Jobs

Front-end Designer With Strong UI/UX Focus — Help our growing team build amazing tools, games and websites used by thousands of people every day. Near Oxford and/or UK remote.

Helical Levity

Find A FrontEnd Job Through Vettery — Create a profile to connect with 4,000+ companies seeking top tech talent.

Vettery

📘 Tutorials

How to Build a Location-Aware Form with Google Maps and Materialize

Eugene Ambass

Getting Started with Material Design Components for the Web — MDC Web is the successor to Material Design Lite.

Mustafa Kurtuldu (Google)

A Primer on Front-End Automation — Walmart does a lot of automated front-end testing and this post introduces us to their tooling and approach.

Nidhi Sadanand

How to Reduce Page Load Speed and Latency with a CDN — CDNs offload bandwidth, reduce load times, improve performance, and lower infrastructure costs. Learn more.

DigitalOcean sponsor

Over 100 Curated Resources for Learning CSS — Lots of good links here, many of which we’ve linked before.

Kevin Ball

Create Interactive Gradient Animations Using Granim.js

Monty Shokeen

Don't Miss SIGNAL: Twilio Customer & Developer Conference - Oct 17 & 18

twilio sponsor

The Complete Illustrated Flexbox Tutorial

Greg Sidelnikov

🔧 Code and Tools

Isometric iPhones

Isometric iPhones — A buttery-smooth animation featuring an endless stream of CSS-created phones.

Jon Kantner demo

CSS Filter Playground — This playground environment lets you play and learn about 10 CSS filters including sepia() and blur().

Dat Nguyen

Web Typography Resources for Designers and Developers — A well curated list of web typography related apps, tools, plugins and other resources.

Matej Latin

Developer Tools for Every Customer Session – New in FullStory

Fullstory sponsor

Mavo: A New, Approachable Way to Create Web Applications — Create apps by just writing HTML and CSS without any JavaScript at all. Being built at MIT CSAIL by a team led by Lea Verou.

Haystack Group MIT CSAIL

A Slide Out 'Irregular Grid' Box Menu — Another neat UI concept from Codrops — this time it’s an expanding grid of items that reveal from the top right corner. Demo here.

Mary Lou

Teutonic CSS: A Versatile, Modern 12KB CSS Framework

Frank Lämmer