How to align things with CSS, and Houdini's advantages

#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. Mozilla 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. X-Team Find A Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers. Vettery 📘 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.

by via Frontend Focus