Everything You Need To Know About Alignment in Flexbox

#353 — August 15, 2018 Read on the Web Frontend Focus webhint: A Linting Tool for Web Best Practices — A customizable (and extensible) tool that checks your site for accessibility, performance, security, and other concerns. Note: webhint is the new name for Sonarwhal. JS Foundation Everything You Need To Know About Alignment in Flexbox — A look at the alignment properties in Flexbox while discovering some basic rules to help remember how alignment on both the main and cross axis works. Rachel Andrew Highly Reliable, Scalable Object Storage Starting at $5 a Month — Manage, migrate, and control data any way you want, immediately, with no need for configuration. Learn more. DigitalOcean sponsor 'Scroll Bouncing' and How It Works — A good understanding of the scroll bouncing effect (and how to prevent it, if you wish) is helpful for building any site that has fixed elements. William Lim Native Lazy Loading Coming to the Web Platform — You’d use the lazyload attribute on an image, say, to trigger the behavior. “To be clear, nothing is final yet and this might not become part of the spec,” says Feross, although IE and Edge already support it to some extent. Feross Aboukhadijeh on Twitter Browser Painting and Considerations for Web Performance — An explanation and case study on the impact the browser paint process has on web performance and why you should be mindful of it. Georgy Marchuk A Friendly Introduction to Flexbox for Beginners — Christian Krammer walks you through the basics of flexbox, showing how you can use flexbox to lay out specific page elements, and also how it can serve as a handy fallback method in browsers that don’t support CSS Grid. SitePoint 💻 Jobs Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. x-team Find A FrontEnd Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers. Create a profile to get started. Vettery 📘 Tutorials Simple Interactive Pie Chart with CSS Variables & Houdini Magic Ana Tudor The Art of Debugging with Chrome's DevTools Prashant Palikhe ▶  SVG Filters: The Crash Course Sara Soueidan Exploring SMACSS: Scalable and Modular Architecture for CSS — SMACSS provides a set of solid organizational guidelines for working with CSS. Slobodan Gajic The Future of JavaScript: 2018 and Beyond. Get the Whitepaper Progress Kendo UI sponsor The Generic Sensor API — Exploring the Generic Sensor API, which aims to provide a consistent API for different sensors. Ruadhan O'Donoghue Dynamic Resources with the Network Information API and Service Workers — The Network Information API allows developers to determine the connection types and the underlying connection technology that the user agent is using. Dean Hume A Web of Anxiety: Accessibility for People with Anxiety and Panic Disorders? — An angle to accessibility you may not have considered before. David Swallow 📘 Articles and Opinion Let's Serve Everyone Good-Looking Content — Whether or not their browser supports the latest layout model or not. Hidde de Vries Don't Miss SIGNAL: Twilio Customer & Developer Conference - Oct 17 & 18 — Level up your skills. See how the right set of API tools help build better customer experiences, faster. twilio sponsor Icon Fonts vs SVGs: Which One Should You Use In 2018? — Aren’t sure whether you should be using icon fonts or SVG icons? Cody Arsenault 🔧 Code and Tools Hex Naw: A Color Accessibility Testing Tool — Enter your colors and get contrast ratios and find out if your combos are suitable for text or not. The Scenery Vue CLI 3.0 Released — The standard build toolchain for Vue apps supports pre-configured webpack features, ES2017 transpilation, and PostCSS out of the box. Evan You Developer Tools for Every Customer Session – New in FullStory Fullstory sponsor Spirit App: Easy Realtime Animation For the Web — The app itself is here but this tutorial is, perhaps, a better way to understand why it’s useful. Dennis Gaebel React Chrome Extension Boilerplate — Boilerplate code for if you want to build a React-powered browser extension. FullStack Academy Kiev Line-Height Crop: A CSS Formula to Remove Top Space From Your Text — By way of a simple SCSS mixin. Claudia Romano

by via Frontend Focus