#385 — April 3, 2019

Read on the Web

Frontend Focus

How To Align Things In CSS — There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why.

Smashing Magazine

CSS Houdini Could Change the Way We Write and Manage CSS — Indeed, that's entirely why Houdini (a group of developers working on a group of cutting edge CSS-related APIs) exists :-) Here's a look at how Houdini will open the door to more modularity & configurability of your CSS.

Yangguang Li

Deploy Only the Parts of Your Application That Have Changed — Unlike most Continuous Integration (CI) solutions, Buddy only re-builds the parts of your application that have changed and deploys your updates in seconds to any cloud. Start building better frontend apps faster with Buddy.

Buddy sponsor

Managing z-index in a Component-Based Web Application — The z-index property, despite all that’s written about it, is still widely misunderstood and mishandled. Stacking issues in a complex single-page web application can become a major pain. Adhering to some principles, however, we can easily avoid these issues.

Pavel Pomerantsev

Firefox's Plan to Reduce Notification Permission Prompt Spam — Permission prompts are a common sight on the web today and while they can be useful in some situations, they are clearly overused. Mozilla are using Firefox Nightly (only) to conduct some experiments in improving the situation.


What Does Dark Mode’s supported-color-schemes Actually Do? — Thomas Steiner shares his understanding of the recently proposed supported-color-schemes meta tag and the corresponding CSS property.

Chromium Dev Channel

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.


Find A Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers.


📘 Articles, Tutorials & Opinion

Stop Using So Many DIVs: An Intro to Semantic HTML — Considering the HTML5 spec reads that “authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable”, this article is a handy reminder of the semantic alternatives.

Ken Bellows

Enforcing Accessibility Best Practices with Automatically-Generated IDs — A technique that renders it impossible for users of a design system to omit an important attribute and accidentally create an inaccessible experience.

Brad Frost

▶  React in 7 Minutes — If you’ve been intimidated by React so far, this is a neat, code-driven whirlwind tour showing the creation of an app in just 7 minutes.

John Lindquist

You Probably Don't Need That Hip Web Framework“The obsession with finding better frameworks is killing ideas before they reach the world.”

Owen Williams opinion

Browser Rendering Optimizations for Frontend Development — Explores the conditions that can enable (and prevent) a web app to run (optimally) at 60 frames per second.

Jordan Irabor

Learn to Build Blockchain Apps in 60 Minutes

Blockstack sponsor

How Web Pages Can Now Detect When Chrome’s Window Is Covered by Another Window — Supported on Chrome OS and macOS, with Windows support in progress.

Web Platform News

Creating a Reusable Pagination Component in Vue.js

Mateusz Rybczonek

🔧 Code and Tools

stepper: Animated Numeric Stepper Component — ..which can be used to increment or decrement a value by clicking arrows. Demo here.

Valery Alikin

yall-js: Yet Another Lazy Loader — An SEO-friendly lazy loader for <img>, <picture>, <video> and <iframe> elements, as well as CSS background images. It works in all modern browsers, including IE 11.

Jeremy Wagner

Input Type Sandbox: Test Different HTML Input Types — A quick tool that lets you dynamically select different types of form input and validation type for testing on your own browser(s).

Aaron Ladage

Typetura: Fluid Typesetting Tool — This tool, still in beta, will help you set up text transitions between breakpoints.

Scott Kellum & Sal Hernandez

Google Webfonts Helper — A ‘hassle-free’ way to self-host Google Fonts.

Mario Ranftl

Accessible Brand Colors — Shows you how ADA compliant your colors are in relation to each other.

Use All Five

React Particles WebGL: A 2D/3D Particle Library Built on Three.js

Tim Ellenberger

   🗓 Upcoming Events

IMAGECON, May 1–2 – San Francisco, CA — A two-day conference with a dozen workshops and seven speakers focused on all things images on the web.

CityJS Conference, May 3 — London, UK — Meet local and international speakers and share your experiences with modern JavaScript development.

Frontend United, May 16-18 — Utrecht, Netherlands — A yearly, non-profit, developer-first, community-focused conference.

CSSCamp 2019, July 17 — Barcelona, Catalunya — A one-day, one-track conference for web designers and developers.