--- title: "How to solve the CSS layout and source order disconnect?" publication: "Frontend Focus" issue: 589 published_at: "2023-04-19" canonical_url: "https://frontendfoc.us/issues/589" --- Plus learning OKLCH, what's new in WCAG 2.2, and more. | Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/algorithms-practice/?utm_source=frontendfocus&utm_medium=email&utm_content=algorithmspractice) #​589 — April 19, 2023 | [Read on the web](https://frontendfoc.us/issues/589) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1681896895/haiug9wbmwzi4fctjiyr.png)](https://keithjgrant.com/posts/2023/04/its-time-to-learn-oklch-color/) [It's Time to Learn OKLCH Color](https://keithjgrant.com/posts/2023/04/its-time-to-learn-oklch-color/) — Feeling a bit overwhelmed by all the developments happening in CSS lately involving color? We’ve got several new options to consider such as `hwb()`, `lab()`, `lch()`, `oklab()`, and `oklch()` — here Keith makes the case for [OKLCH](https://caniuse.com/mdn-css_types_color_oklch) and how to get started using it. Keith J. Grant [Solving the CSS Layout and Source Order Disconnect](https://developer.chrome.com/blog/reading-order/) — The CSS Working Group is seeking feedback on a proposed solution for “_the problem of layout methods arranging items in an order that is disconnected from the source of the document_”. This post explains the issue, the suggested fix, and invites your thoughts. Rachel Andrew (Chrome Developers) [![\](https://copm.s3.amazonaws.com/3355da2b.png)](https://frontendmasters.com/courses/algorithms-practice/?utm_source=frontendfocus&utm_medium=email&utm_content=algorithmspractice) [New Course by Kyle Simpson: Practical Problem Solving with Algorithms](https://frontendmasters.com/courses/algorithms-practice/?utm_source=frontendfocus&utm_medium=email&utm_content=algorithmspractice) — Walk through four fun challenges with Kyle in this new video course. You'll learn how to apply algorithms with techniques like recursion, traversals, and acyclic paths, cover memoization to avoid garbage collection, and come away writing more performant code. Frontend Masters sponsor [What's New in WCAG 2.2?](https://accessibleweb.com/wcag/whats-new-in-wcag-2-2/) — Notes on what’s changing in the upcoming 2.2 accessibility guidelines from WCAG expert Alaina Birney. Seth Wilson & Alaina Birney [Integrating React Flow and the Web Audio API](https://reactflow.dev/blog/react-flow-and-the-web-audio-api/) — [React Flow](https://reactflow.dev/) is a component for building node-based editors and interactive diagrams, which makes it well suited for building audio signal chains. There’s a lot of depth here, some nice examples, and these techniques could prove useful for a lot of other use cases. Hayleigh Thompson **⚡️ IN BRIEF** - Mozilla is allegedly working on a new usability feature for Firefox that may [reject cookie related prompts automatically](https://www.ghacks.net/2023/04/17/firefox-may-interact-with-cookie-prompts-automatically-soon/). - Adriana Jara runs through [what's new in Chrome 112](https://developer.chrome.com/en/blog/new-in-chrome-112/), including the much heralded support for CSS rule nesting. - [Version 6.0 of the Vivaldi browser is out now](https://vivaldi.com/blog/vivaldi-on-desktop-6-0/), with new tab management and workspace features. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1681895563/aj7newu1me14anhgbmmm.png)](https://rachsmith.com/recreating-creative-south-title/) [Recreating a 'Mouse-Aware' Text Effect](https://rachsmith.com/recreating-creative-south-title/) — The author was “_so impressed with the design_” of the [Creative South 2023 site](https://www.creativesouth.com) that she wanted to recreate the neat ‘3D’ effect seen on the title text. Here’s a quick look at how she did it, complete with code and a demo. Rach Smith [Designing for Color Blindness](https://www.theverge.com/23650428/colorblindness-design-ui-accessibility-wordle) — A few real-world examples of what a person with color-blindness sees. “_Living with colorblindness feels like you’re constantly being pranked by the world in subtle, irritating ways_”. Andy Baio [Build and Deploy ‘23: May 3rd - Save the Date](https://codefresh.io/build-and-deploy/?utm_source=javascript_weekly&utm_medium=paid_display&utm_campaign=build_deploy_23) — The ultimate CI/CD virtual conference - best practices and end-user success stories from DevOps experts. Plus, a keynote from Emily Freeman, author of _DevOps for Dummies_. Codefresh sponsor [Optimizing Resource Loading with the Fetch Priority API](https://web.dev/fetch-priority/) — Fetch Priority (previously known as Priority Hints) indicates the relative priority of resources to the browser — it can enable optimal loading and improve Core Web Vitals. It’s currently supported in Chrome and Edge. web.dev [Interaction to Next Paint (INP): What Is It and How to Improve It](https://calibreapp.com/blog/interaction-to-next-paint) — Page responsiveness is critical to a good user experience on the web. This post shares how best to measure and improve it with the Interaction to Next Paint metric. Karolina Szczur [Passkeys: What The Heck and Why?](https://css-tricks.com/passkeys-what-the-heck-and-why/) — The author has been studying up and experimenting with passkeys — and the associated WebAuthn API that they are built on top of. This is a solid primer on an increasingly popular security option. Neal Fennimore ▶[Reducing Layout Shifts with Custom Fallback Fonts](https://www.youtube.com/watch?v=0bZMVqXpAGY) Brian Ramirez [Improve Largest Contentful Paint (LCP) by Removing Image Transitions](https://performance.shopify.com/blogs/blog/improve-largest-contentful-paint-lcp-by-removing-image-transitions) Michael Gooding (Shopify) ['I Made My Blog Solar-Powered, Then Things Escalated'](https://louwrentius.com/i-made-my-blog-solar-powered-then-things-escalated.html) Louwrentius 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/qvtttqlaeplqavizzxke.jpg)](https://iconoir.com/) [Iconoir: 1300+ Open Source SVG Icons](https://iconoir.com/) — A vast array of clean and simple icons, complete with ways to quickly integrate them into React, React Native, Figma, and other apps – or just using CSS, if you prefer. Luca Burgio [Open-Source JavaScript Form Libraries: Build Multiple Forms In‑House](https://surveyjs.io?utm_source=frontend_focus&utm_medium=email&utm_content=index_19) — Make form creation secure and easy with a self-hosted no-code form editor. Store survey data with no third-party involved. SurveyJS sponsor [Tailwind Animations: A Small Library of CSS Animations Built with Tailwind](https://github.com/canopas/tailwind-animations) — There are animated GIFs showing off the animations [here.](https://github.com/canopas/tailwind-animations#--showcase) Canopas [Skeleton: A Toolkit for Building Reactive and Accessible UIs with Svelte & Tailwind](https://www.skeleton.dev/) — A cool feature of the home page is that you can try out the different built-in themes for the library, plus dark and light modes, using a drop-down at the top. Skeleton Labs [favicon.software: Quickly Generate Favicons and HTML from a Logo or Other Image](https://www.favicon.software/) — Supports just about any image format and all conversion happens in the browser. favicon.software [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1681903785/bhfua8mxqrb9tagfj2cy.png)](https://colorcontrast.app/) [Color Contrast Checker: Analyzer and Color Suggestions](https://colorcontrast.app/) — A straightforward tool for checking the contrast between colors using WCAG or APCA. It also offers up suggestions for better colors when needed. Polypane [Reveal.js 4.5: An HTML Presentation Framework](https://revealjs.com/) — Brings elegant presentations to anyone with a Web browser. [v4.5](https://github.com/hakimel/reveal.js/releases/tag/4.5.0) was just released with support for jumping to specific slides, a few new themes, and with live reload working with files in subfolders. Hakim El Hattab [Easy Email: A Drag-and-Drop Email Editor for React](https://github.com/zalify/easy-email) — Generates code through drag-and-drop editing and by employing the [MJML](https://mjml.io/) responsive email framework. Zalify 🧑‍💻 JOBS [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) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 📬 **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://mastodon.social/@brandrick) & [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/589/*|UID|*?ipx=t)