--- title: "An epic, interactive guide to Flexbox" publication: "Frontend Focus" issue: 569 published_at: "2022-11-23" canonical_url: "https://frontendfoc.us/issues/569" --- Plus experimenting with layering, filtering, and masking in CSS. | Together with [![Progress Kendo UI for Angular\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_480,h_50/e_make_transparent/co_white,e_outline:7/unqewzs6uvnqy4ehhxfi.png)](https://www.telerik.com/blogs/building-more-powerful-faster-data-grid-kendo-ui-angular?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-prod-masters-of-the-grid&utm_content=build-faster-data-grid-kendo-ui-angular) #​569 — November 23, 2022 | [Read on the web](https://frontendfoc.us/issues/569) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1669201587/y0mbkmbfuhn2ticu5mci.jpg)](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) [An Interactive Guide to Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) — A new, interactive explainer from Josh, with over 20 demos showing off how Flexbox works. This is an excellent, detailed overview, and a real sound way to wrap your head around the core flexbox functions. There's a _lot_ to enjoy here and even if you think you know your Flexbox already, it's a great refresher. Josh W. Comeau [![\](https://copm.s3.amazonaws.com/2ca18157.png)](https://www.telerik.com/blogs/building-more-powerful-faster-data-grid-kendo-ui-angular?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-prod-masters-of-the-grid&utm_content=build-faster-data-grid-kendo-ui-angular) [Building Powerful and Faster Data Grid With Kendo UI for Angular](https://www.telerik.com/blogs/building-more-powerful-faster-data-grid-kendo-ui-angular?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-prod-masters-of-the-grid&utm_content=build-faster-data-grid-kendo-ui-angular) — Let’s see how the Kendo UI for Angular Grid can be used to create a robust data grid, and how it compares to Angular Material. Progress Kendo UI for Angular sponsor [Experimenting with Layering, Filtering, and Masking in CSS](http://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/) — Jeff shares some findings following recent experiments with layering, filtering, and masking in CSS. They note that the language has come a long way in recent years, with properties like `filter`, `mask-image`, `mix-blend-mode`, additional gradient types like `radial-gradient`, and more, opening the door for Photoshop-like effects that weren’t possible before. Jeff Zych [A Guide to Keyboard Accessibility with JavaScript](https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-javascript-part2/) — The first article in this series [looked at HTML and CSS accessibility](https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/), and this second entry focuses on JavaScript. It covers a JS toolset you can use to create a great experience for keyboard-oriented users. Cristian Diaz **⚡️ IN BRIEF** - The [2022 State of JavaScript survey](https://survey.devographics.com/survey/state-of-js/2022) is open and [here's what's new.](https://dev.to/sachagreif/take-the-2022-state-of-javascript-survey-5ap6) - Work with Wordpress? They have [a new, official developer blog.](https://developer.wordpress.org/news/) - The UK's 'Competition and Markets Authority' has [launched an investigation](https://www.gov.uk/government/news/investigation-into-cloud-gaming-and-browsers-to-support-uk-tech-and-consumers) into Apple & Google’s “effective duopoly” on mobile ecosystems. - Sara Soueidan's [Practical Accessibility course](https://practical-accessibility.today) is open for pre-order. - Browser updates: Firefox Nightly and Developer Edition will now [support Manifest v3 browser extensions](https://www.theregister.com/2022/11/17/mozilla_next_week_will_begin/). The latest Firefox Nightly also now has [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) enabled. IE 11 will be [permanently disabled on certain versions of Windows 10](https://twitter.com/MSEdgeDev/status/1595100070940123138) in February. Prepare for panic from mid-sized corporations and my local library. [Safari Technology Preview 158 is out](https://webkit.org/blog/13584/release-notes-for-safari-technology-preview-158/) with updates to the web inspector, WebCodecs support, `font-size-adjust` implementation, API improvements, and more. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_600,e_sharpen:60,q_auto/v1669201927/vy2ewtpdat6fnj0opg6a.png)](https://iamkate.com/code/tree-views/) [Tree Views in CSS](https://iamkate.com/code/tree-views/) — How to create a collapsible list (tree view) with just HTML and CSS, no need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically. Kate Rose Morley [Create Stunning og:image Tags Automatically](https://mugshotbot.com/customize?utm_source=Newsletter-Campaign&utm_medium=Newsletter&utm_campaign=Frontend+Sponsored&utm_id=Cooper-Newsletter) — Check how you can set up beautiful and dynamic link previews automatically on[mugshotbot.com](https://mugshotbot.com/customize?utm_source=Newsletter-Campaign&utm_medium=Newsletter&utm_campaign=Frontend+Sponsored&utm_id=Cooper-Newsletter). Mugshot Bot sponsor [Using Automated Test Results to Improve Accessibility](https://www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/) — Looks at how to leverage automated test results from accessibility checks to see real, sustainable digital accessibility transformation. Noah Mashni and Mark Steadman [Inline Layout Switch Ideas](https://tympanus.net/codrops/2022/11/22/inline-layout-switch-ideas/) — Two ideas for animating images from an inline layout to a column or grid-based one — and as it’s from Codrops, there’s [demos of course](http://tympanus.net/Development/InlineLayoutSwitch/). Mary Lou [Improving Firefox Stability with This 'One Weird Trick'](https://hacks.mozilla.org/2022/11/improving-firefox-stability-with-this-one-weird-trick/) Gabriele Svelto (Mozilla) [A Guide to Image Optimization on Jamstack Sites](https://www.smashingmagazine.com/2022/11/guide-image-optimization-jamstack-sites/) Alba Silvente [Taming the Cascade with BEM and Modern CSS Selectors](https://css-tricks.com/taming-the-cascade-with-bem-and-modern-css-selectors/) Liam Johnston 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_800,e_sharpen:60,q_auto/v1669197235/iipgfjqu2tg0dvmleoia.png)](https://www.media-chrome.org/) [media-chrome: Fully Customizable Media Player Controls as Web Components](https://www.media-chrome.org/) — You can see an interactive breakdown of each of the components by hovering over them in the list on the left hand side. [GitHub repo.](https://github.com/muxinc/media-chrome) Mux [Build Custom Automations 10x Faster with Retool Workflows](https://retool.com/products/workflows/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=frontendfocus) Retool sponsor [Boxy SVG: An Online, Full-Featured SVG Editor](https://boxy-svg.com/) — Has a Photoshop-like UI, and can be installed as a PWA and you can use customizable keyboard shortcuts for different features. It does cost money, though, but has a free trial and you can play around with the editor itself without signing up to see if you like the flow. Jarosław Foksa [Random User Generator: A Free, Open-Source API for Generating Random User Data](https://randomuser.me/) — This will return various bits of data in JSON, CSV, YAML, or XML format and includes quite a bit of info for each “user”, including a profile photo. RandomAPI [![\](https://res.cloudinary.com/cpress/image/upload/w_600,e_sharpen:60,q_auto/v1669197100/rztoipdpzykgl2slxwvi.png)](https://onotakehiko.dev/clothoid/) [CSS Clothoid Corners: Generate "Visually Softer" Rounded Corners Using CSS clip-path](https://onotakehiko.dev/clothoid/) — This online generator uses the CSS `clip-path` property to subtly improve the look of rounded corners on elements. The result is similar to the rounded edges on iOS app icons. _('Clothoids' are also known as [Euler spirals.](https://en.wikipedia.org/wiki/Euler_spiral) Now you know.)_ Takehiko Ono [uiGradients: A Community Contributed Collection of Beautiful Multi-Color Gradients](https://uigradients.com/) — Includes a useful option to rotate any gradient to allow you to customize it before grabbing the code or downloading as a JPEG. I'm definitely feeling _Fresh Turboscent (below).._ Indrashish Ghosh 🧑‍💻 JOBS [Senior Frontend Engineer (EU Remote or relocate to Berlin)](https://feather-insurance.com/careers/senior-frontend-engineer?channel_id=921910) — We’ve built a product thousands of people love (see Trustpilot if you don’t believe us). We need your help with React & TypeScript. Feather [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired Ahh.. _Fresh Turboscent.._ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/dhywlh8ftq8gr7hbowgb.jpg)](https://uigradients.com/#FreshTurboscent) 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/569/*|UID|*?ipx=t)