#357 — September 12, 2018

Read on the Web

Frontend Focus

A Straightforward Introduction to ‘Houdini’ — Three years ago, Houdini was called ‘maybe the most exciting development in CSS you’ve never heard of’. And even now it can be tricky to understand what this collection of mostly incomplete CSS related APIs and technologies really represents. This mini-site helps clear it up.

Sam Richard

Latest Chrome Stripping ‘www’ from Hostnames in Location Bar — Chrome is hiding ‘trivial’ subdomains (such as www. and m.) in the location bar, but a lot of people aren’t happy about the change, and it kicked off one of Hacker News’s biggest discussions. You can turn the feature off though.

Chromium

Reduce Time Spent on Meetings & Increase Productivity — monday.com is a project management tool which is the next generation of visual tools, built specifically for developers. It’s designed to work with ease, and allows you to see what everyone on your team is working on in a single glance.

monday.com sponsor

Customizing Radio Buttons Without Compromising Accessibility — If you want to use HTML’s support for radio buttons to create more elaborate controls, this will be very handy.

Chen Hui Jing

Investigating Chrome’s NOSCRIPT Intervention — Chrome on Android may, in future, disable JavaScript on weak connections to attempt to speed things up. This article looks at how to test the feature out.

Tim Kadlec

Designing a Textbox, Unabridged — You might think it’s as easy as putting an input type="text" element down but this article goes into much more depth about what’s involved in making a text entry field for the Web that does what you want.

Shane Hudson

Use React? Check Out Our React-Focused Newsletter — If you work with React and haven’t heard about our React-focused newsletter yet, check it out as that’s where most of our React links go. ?

Cooperpress

Two Amazing Conference Days on Design, UX and Code. Get 100 USD Off

SMASHINGCONF NYC sponsor

? Jobs

React & Redux Frontend Engineer (New York, Paris, Remote) — We transform complex datasets into beautiful visualizations and implement innovative browser-app UIs. Apply to join us here.

Datadog

Try Vettery — Create a profile to connect with inspiring companies seeking Frontend devs.

Vettery

? Articles & Tutorials

Chromium Intent to Implement: ElementTiming for ‘img’ Elements — The ElementTiming API will allow developers to know when certain specified image elements are first displayed on the screen.

blink-dev

How GitHub Removed jQuery From Their Frontend — GitHub.com has just completely removed jQuery as a dependency but it’s taken years and here’s how they pulled it off.

GitHub Engineering

Creating Sliding Effects using Sticky Positioning — A break down of a novel slider effect that uses position: sticky.

Preethi Sam

Five Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18

Twilio sponsor

The Web Font Loading Checklist — Four key points to consider when both getting the most out of Web fonts and keeping your perf budget tight.

Zach Leatherman

Using the Speech Synthesis Interface of the Web Speech API — Get your browser to speak back to you.

Manuel Wieser

Color Cycling with Workers — A classic, oldschool visual effect but neatly brought into the modern frontend era.

Dave Rupert

The Benefits of Using CSS Grid for Web Form Layout

Craig Buckler

Implementing Single File Web Components

Tomasz Jakut

Master the Latest Technology and Trends Impacting Software Engineering — Online & evening M.S. in Software Engineering. Advanced understanding of Java™, C# and Swift, JavaScript, HTML, and CSS.

Regis University sponsor

Babel Explained in Simple and Digestible Terms — Babel 7 came out recently and if you’re wondering what the fuss is about, this might help.

Kashyap Mukkamala

Progressively Enhanced CSS Layouts: Floats to Flexbox and Grid — How to convert a traditional, float-based layout into one that harnesses flexbox and grid, plus tips on graceful degradation and progressive enhancement.

Diogo Souza

? Code

InfiniteGrid 3.4: Arrange Card Elements Infinitely on a Grid Layout — If you want to build a card-based layout, this could come in very handy. Check out this tutorial on making a Pinterest-style layout with it. GitHub repo.

NAVER

Splitting: CSS Variables for Split Words, Characters, and Other Elements — “Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more.”

Stephen Shaw

Ky: Tiny, Elegant Fetch-Based HTTP Client for Browsers — Makes the Fetch API tidier to use as shown here.

Sindre Sorhus

React Color: 13 Color Pickers from Sketch, Photoshop, GitHub, Twitter, etc. — A wide selection of color picking controls for your React projects.

Case Sandberg

luma.gl: WebGL2 Components for Data Visualization

Uber