#402 — July 31, 2019

Read on the Web

Frontend Focus

I Used The Web For A Day On A 50 MB Budget — Data can be prohibitively costly, especially in developing countries. Chris Ashton puts himself in the shoes of someone on a tight ‘data budget’ and offers (a lot of) practical tips for reducing our own sites’ footprint. There is genuinely a lot of useful stuff in this post — read it! (And I might be showing my age here but I remember when aiming for 30KB total was a thing..!)

Chris Ashton

Form Design: From Zero to Hero All in One Blog Post — A quick and to-the-point guide for designing forms that “everyone can use and complete as quickly as possible”.

Adam Silver

Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

The Real ‘Dark Web’: The Quiet Majority of Web Developers? — An interesting opinion piece that reflects upon the quiet majority of Web developers, and how the minority of developers using cutting edge tools and techniques are not truly representative.

Charlie Owen

Sites Could Be Liable for Helping Facebook Secretly Track Your Web Browsing, Says EU Court — The argument is that users should have to consent to being tracked with ‘Like’ buttons.

Adi Robertson

New (US) Bill Would Ban Autoplay Videos and Endless Scrolling — US lawmakers are taking aim at Web-based features that are ‘designed to be addictive.’ Early days, but this could become a commonly discussed topic in years to come.

Makena Kelly

? Jobs

Senior UI Designer (Munich) — Shape the product design of the leading digital wealth management FinTech in Europe, located in the heart of Munich.

Scalable Capital GmbH

We’re Trusted by Over 100k Developers to Help Them Find Their Dream Job — Get matched with companies like Apple, Skyscanner and KPMG based on your skills. They apply to you, salary upfront and no recruiters.

hackajob

? Articles, Tutorials & Opinion

Creating an Accessible Inline List with Bullets Between Items — Basically a horizontal list with a character between each item, a · bit · like · this.

Artem Sapegin

output: HTML’s Native Live Region Element — A look at the output element and it’s suitability for creating a native toast element (plus accessibility considerations and quirks).

Scott O’Hara

?  Design System Magic with CSS Houdini — A look at how Houdini features can be used in your design systems today.

Samuel Richard

Backend for Frontend – How to Develop Custom SPAs with Tailored API — Need to refresh your software without breaking the business logic on the backend? Introduce the Backend for Frontend.

The Software House sponsor

An Overview of CSS Animation Libraries — A look at the current landscape of CSS animation libraries and how they vary.

Chris Coyier

?  Writing Tests For CSS Is Possible! Don’t Believe The Rumors — Overcoming “egoprogrammophobia” by writing tests to refactor your CSS.

Gil Taylor

How to Add Flexbox Fallback to CSS Grid — Adding a flexbox fallback to a calendar built with CSS Grid.

Zell Liew

Quick Tip: Responsive Iframes — What you need to do to make an iframe responsive on a website. It’s trickier than it looks and CSS is definitely involved.

Chris Coyier

The State of JavaScript: 2019 and Beyond. Get the Whitepaper

Progress Kendo UI sponsor

Why You Should Definitely Learn How to Use CSS-in-JS

Brent Jackson

? Code, Tools & Resources

A Satisfying Liquid Simulation — Merges WebAssembly and WebGL together. Shake the window about to see it in action. Uses the LiquidFun engine and the regl WebGL library.

Lorenzo Cadamuro

A Web Tool to Create ‘Striped Text’ and Get Styled Components Code — One of several visual design tools on Components.ai. This one lets you dynamically create a stripy text effect and provides CSS and Styled Components code to use in your apps.

Components.ai

x-autosuggest: Autosuggest Results Based On Input — A JavaScript autosuggest input. Here’s a demo.

Ivan Nikoli?

Gradient Magic — A growing gallery of unique CSS Gradients.

Jordan Marshall

? …and finally

A good reminder that it’s always worth knowing about the actual technology you’re using as well as the interfaces to it. A bit like knowing how to add by hand as well as how to use a calculator..