Front End World

How would you build Wordle with just HTML & CSS? A fun little form validation and CSS selector experiment https://scottjehl.com/posts/wordleish/

React Server Components in a Nutshell Paul Scanlon uses Waku to show how RSCs give React developers access to asynchronous server-side requests and data at the component level. https://thenewstack.io/react-server-components-in-a-nutshell/

How to display language-specific quotes in CSS Use CSS and the open-quote and close-quote values to display language-specific quotes. https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/

Always unsubscribe. No exceptions. Debate closed. So many years with Angular. So many years with RxJS. Yet people still fight over “when NOT to unsubscribe”. https://itnext.io/always-unsubscribe-no-exceptions-debate-closed-5184c2655ac3

Creating a Navbar in React How to build a navbar in React, covering everything from design considerations to implementation and accessibility best practices. https://www.sitepoint.com/creating-a-navbar-in-react/

What if you had real control over Light Mode / Dark Mode on a per-site basis? Dark Mode Toggle Buttons should be a browser feature. Thanks to the Web Preferences API, that might become a reality someday. https://www.bram.us/2024/04/13/what-if-you-had-real-control-over-light-mode-dark-mode-on-a-per-site-basis/

Sliding 3D Image Frames In CSS Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off. Temani Afif applies 3D effects and sliding transitions to a single using clever CSS techniques that demonstrate advanced, modern styling practices. https://www.smashingmagazine.com/2024/04/sliding-3d-image-frames-css/

Testing HTML With Modern CSS https://heydonworks.com/article/testing-html-with-modern-css/

Core Web Vitals: Rank your websites higher on SEO Core Web Vitals are metrics that Google uses to measure the user experience of a webpage. They are an important factor in search engine… https://blog.codeparrot.ai/core-web-vitals-rank-your-websites-higher-on-seo-29a2e7cba49c

Managing User Focus with :focus-visible This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo https://css-tricks.com/managing-user-focus-with-focus-visible/