--- title: "Everything You Need To Know About Alignment in Flexbox" publication: "Frontend Focus" issue: 353 published_at: "2018-08-15" canonical_url: "https://frontendfoc.us/issues/353" --- This Week's HTML5, CSS, Browser, and Frontend News #353 — August 15, 2018 [Read on the Web](https://frontendfoc.us/issues/353) Frontend Focus [webhint: A Linting Tool for Web Best Practices](https://webhint.io/) — A customizable (and [extensible](https://webhint.io/docs/contributor-guide/how-to/hint/)) 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](https://www.smashingmagazine.com/2018/08/flexbox-alignment/) — 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 [![\](https://copm.s3.amazonaws.com/1da03400.png)](https://www.digitalocean.com/products/spaces/?utm_source=paid_newsletter+frontend+weekly&utm_medium=display&utm_campaign=2018_Brand&utm_content=8-15-18+frontend+weekly+cooperpress) [Highly Reliable, Scalable Object Storage Starting at $5 a Month](https://www.digitalocean.com/products/spaces/?utm_source=paid_newsletter+frontend+weekly&utm_medium=display&utm_campaign=2018_Brand&utm_content=8-15-18+frontend+weekly+cooperpress) — Manage, migrate, and control data any way you want, immediately, with no need for configuration. [Learn more](https://www.digitalocean.com/products/spaces/?utm_source=paid_newsletter+frontend+weekly&utm_medium=display&utm_campaign=2018_Brand&utm_content=8-15-18+frontend+weekly+cooperpress). DigitalOcean sponsor ['Scroll Bouncing' and How It Works](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/) — 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](https://twitter.com/feross/status/1029134817135353856) — 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](https://caniuse.com/#feat=lazyload) to [some extent.](https://msdn.microsoft.com/en-us/ie/dn369270%28v=vs.94%29) Feross Aboukhadijeh on Twitter [Browser Painting and Considerations for Web Performance](https://css-tricks.com/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](https://www.sitepoint.com/flexbox-css-flexible-box-layout/) — 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)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. [Join X-Team](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend). x-team [Find A FrontEnd Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery specializes in dev roles and is completely free for job seekers. Create a profile to get started. Vettery 📘 Tutorials [![Simple Interactive Pie Chart\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/jkwae0bbvlo5zcozisxx.jpg)](https://css-tricks.com/simple-interactive-pie-chart-with-css-variables-and-houdini-magic/) [Simple Interactive Pie Chart with CSS Variables & Houdini Magic](https://css-tricks.com/simple-interactive-pie-chart-with-css-variables-and-houdini-magic/) Ana Tudor [The Art of Debugging with Chrome's DevTools](https://medium.com/frontmen/art-of-debugging-with-chrome-devtools-ab7b5fd8e0b4) Prashant Palikhe ▶[SVG Filters: The Crash Course](https://www.sarasoueidan.com/blog/svg-filters/) Sara Soueidan [Exploring SMACSS: Scalable and Modular Architecture for CSS](https://www.toptal.com/css/smacss-scalable-modular-architecture-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](https://www.telerik.com/campaigns/kendo-ui/wp-javascript-future-2018?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-futurejs18&utm_content=brieflink) Progress Kendo UI sponsor [The Generic Sensor API](https://mobiforge.com/design-development/the-generic-sensor-api) — Exploring the [Generic Sensor API](https://www.w3.org/TR/generic-sensor/), which aims to provide a consistent API for different sensors. Ruadhan O'Donoghue [Dynamic Resources with the Network Information API and Service Workers](https://deanhume.com/dynamic-resources-using-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?](https://developer.paciellogroup.com/blog/2018/08/a-web-of-anxiety-accessibility-for-people-with-anxiety-and-panic-disorders-part-1/) — An angle to accessibility you may not have considered before. David Swallow 📘 Articles and Opinion [Let's Serve Everyone Good-Looking Content](https://hiddedevries.nl/en/blog/2018-08-11-lets-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](https://signal.twilio.com/?utm_source=frontend-focus&utm_medium=cooperpress&utm_content=signal-2018) — 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?](https://www.keycdn.com/blog/icon-fonts-vs-svgs/) — 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\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/tphh4pzpy5f0yu4pxv9h.jpg)](https://hexnaw.com/) [Hex Naw: A Color Accessibility Testing Tool](https://hexnaw.com/) — 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](https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb) — 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](https://www.fullstory.com/features/dev-tools?utm_source=frontend-focus&utm_medium=email&utm_content=dev-tools&utm_campaign=dev-tools&utm_acquisition=paid) Fullstory sponsor [Spirit App: Easy Realtime Animation For the Web](https://webdesign.tutsplus.com/articles/spirit-app-easy-realtime-animation-for-the-web--cms-30111) — The [app itself is here](https://spiritapp.io/) but this tutorial is, perhaps, a better way to understand why it’s useful. Dennis Gaebel [React Chrome Extension Boilerplate](https://github.com/FullStack-Academy-Kiev/react-chrome-extension) — 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](https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f) — By way of a simple SCSS mixin. Claudia Romano A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom