#348 — July 11, 2018

Read on the Web

Frontend Focus

A 'div' That Looks Different In Each Major Browser

A 'div' That Looks Different In Each Major Browser — A neat demonstration of how specs don’t guarantee an identical result across browsers. Here’s the CodePen to try it for yourself.

Martijn Cuppens on Twitter

Writing IE-Friendly CSS Grid Code — Want to lean on CSS Grid but not get in trouble for abandoning Internet Explorer 11 users? Using Autoprefixer and keeping some rules in mind will help you get there.

Daniel Tonon

CSS Working Group Working on Native CSS Nesting Support — It’s still a long way from getting browser support, but the ball is now truly rolling on native support for Sass-like style nesting in ordinary CSS. Thanks to Tobi Reif for sending this in.

World Wide Web Consortium

How to Do Functional Programming with JavaScript? — JavaScript developers, here’s a handy resource for your reference stack. This essential cheat sheet outlines syntax features that enable you to express your code using functional programming techniques. Check it out.

Progress Kendo UI sponsor

15 HTML Element Methods You’ve Potentially Never Heard of — The DOM is full of delights, some of which David pokes at here, including scrollIntoView, getBoundingClientRect, and select.

David Gilbertson

Pattern Library First: An Approach For Managing CSS — Rachel Andrew looks at how using a pattern-based approach can make CSS easier to manage across a project. In this case, she uses Fractal to manage components which use CSS Grid.

Rachel Andrew

Web Components in 2018 — What we call “Web Components” is really a set of often separately specified Web technologies, including Shadow DOM, Custom Elements, and HTML templates.

James Milner

An Introduction to the CSS Paint API — The CSS Paint API allows you to call a special paint JavaScript function wherever you might ordinarily write a value where an image is expected by a CSS property. Google also has a guide to this feature which is, as yet, only supported in Chrome.

Ruth John

Intent to Ship in Blink/Chrome: Web Locks APIWeb Locks is an API that lets scripts asynchronously gain locks over resources such as data stores.

Blink-Dev

💻 Jobs

Sr. Front-End Engineer, Creator Tools - New York City — We empower video creators to tell exceptional stories and to connect with their audiences & communities. Build the future with us.

Vimeo

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 Job Through Vettery — Vettery matches top tech talent with fast-growing companies. Create your profile to get started.

Vettery

📘 Tutorials

Physics-Based Background Scroll Effects — Creating physics-based scroll effects using the open-source framework Matter.js.

Will Boyd

Performance Auditing: A Firefox Developer Tools Deep Dive — An in-depth guide to making use of the performance-related tools within Firefox.

Ahmed Bouchefra

Gallery Grid with CSS Grid — How to simply add a variable number of images into a blog post and have the scaling handled for you.

Laura Kalbag

CSS Grid in IE: Faking an Auto-Placement Grid with Gaps

Daniel Tonon

WebRTC and the Mechanics of Peer-to-Peer Networking

Alexander Zlatkov

Experimenting with First Input Delay in the Chrome UX ReportFirst Input Delay is the time it takes for a page to respond to a user’s first interaction with it, and ideally that’s under 100 milliseconds.

Google Developers

How to Quickly Prototype Apps with CSS Grid and CSS Variables

Per Harald Borgen

How to Build Complicated Grids using CSS Grid — A real-world example showing the creation of an unconventional homepage grid layout.

Dan Webb

On Leading and Trailing Spaces in HTML Attribute Values

Louis Lazaris

🔧 Code and Tools

30 CSS Radio Button Styles Demonstrated with CodePen

30 CSS Radio Button Styles Demonstrated with CodePen

Freebie Supply

Browsh: A Fully-Modern Text-based Browser, Rendering to TTY and Browsers — A fun one, this. It uses headless Firefox behind the scenes but renders graphics and video out to terminal.

Browsh

web-riimote: Turn Your Phone Into a 3D Controller for the Web

Omkar Konaraddi