--- title: "Web features you need to know about" publication: "Frontend Focus" issue: 595 published_at: "2023-05-31" canonical_url: "https://frontendfoc.us/issues/595" --- Plus Chrome 114, WordPress turns 20, 30000 color names, and even a new Bootstrap release. | Together with [![Buildkite\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_560,h_100/e_make_transparent/co_white,e_outline:7/bckwwyzxwdyqwucnyyvz.png)](https://buildkite.com?utm_campaign=CPress&utm_source=ppc&utm_medium=Q2-2023-FrontEndFocus&utm_term=Sign-up) #​595 — May 31, 2023 | [Read on the web](https://frontendfoc.us/issues/595) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1685537405/krd05ujlb5gcypu6rvxb.png)](https://www.youtube.com/watch?v=q1fsBWLpYW4) ▶[21 Awesome Web Features You’re Not Using Yet?](https://www.youtube.com/watch?v=q1fsBWLpYW4) — Runs through some of the “_game changing new features_” that have landed on the web platform of late. It’s a good high-level run through of things delivered in a light-hearted, yet informative style. _(8 minutes and a sense of humor required.)_ Fireship [300ms Faster: Reducing Wikipedia's Total Blocking Time (TBT)](https://www.nray.dev/blog/300ms-faster-reducing-wikipedias-total-blocking-time/) — TBT is the sum of the blocking portion of long tasks on the main thread between First Contentful Paint (FCP) and Time to Interactive (TTI) — so lower is always better. The author got Wikipedia’s TBT down by 300ms through small, targeted optimizations like removing an unnecessary JS call and using event delegation. Nicholas Ray [![\](https://copm.s3.amazonaws.com/24282f8d.png)](https://buildkite.com?utm_campaign=CPress&utm_source=ppc&utm_medium=Q2-2023-FrontEndFocus&utm_term=Sign-up) [Your CI, Secured](https://buildkite.com?utm_campaign=CPress&utm_source=ppc&utm_medium=Q2-2023-FrontEndFocus&utm_term=Sign-up) — Build your dream CI/CD workflows without sharing your secrets or source code. Buildkite sponsor [SupportsCSS: Feature Detection for Modern CSS](https://supportscss.dev/) — Inspired by Modernizr, this little script expands on the capabilities of CSS’s `@supports` feature by adding classes to your HTML and exposing a results object so you can run custom tests live in the browser. Stephanie Eckles ▶[New in Chrome 114: `text-wrap:balance`, CHIPS, Popover API and More](https://www.youtube.com/watch?v=qqTnAWL7-v0) — Version 114 of Chrome is rolling out now and it has a few notable new features to be aware of, including `text-wrap: balance` ([more on that here](https://developer.chrome.com/blog/css-text-wrap-balance/)), the `popover` API, and changes to cookies. This quick five minute video runs through what you need to know. Adriana Jara (Google Chrome Developers) **⚡️ IN BRIEF** - WordPress is now [20 years old](https://wptavern.com/wordpress-turns-20). [Here's the original post from 2003](https://wordpress.org/news/2003/05/wordpress-now-available/) in which Matt Mullenweg shares the news of the first release. (And [React is 10 years old.](https://vercel.com/blog/10-years-of-react) It must be the week for launching influential projects!) - Did you know that [Safari supports a `passwordrules` attribute](https://www.stefanjudis.com/today-i-learned/safari-allows-to-configure-password-autofilling/) for finer control on password autofill criteria? - The Web Share API (for sharing text, links and other content) is [now a W3C Recommendation](https://www.w3.org/blog/news/archives/9931). - Digital document format [EPUB 3.3 is also now a W3C Recommendation](https://www.w3.org/blog/news/archives/9919). - 📗 Addy Osmani has [a new book on the way](https://www.smashingmagazine.com/2023/05/success-at-scale-pre-release/) (_"Success at Scale"_) covering best-practices 'at scale', unsurprisingly, in areas like performance, accessibility, and DX. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1685535358/nmxs6wbjbvjfubalydr0.png)](https://www.kodingkitty.com/blog/blend-modes/) [Mastering CSS Blend Modes](https://www.kodingkitty.com/blog/blend-modes/) — CSS mix blend modes provide an easy, yet powerful way to create visually interesting designs, as explained here with clear cat-inspired visuals. Koding Kitty [Announcing the Second 'Compute Pressure' Origin Trial](https://developer.chrome.com/en/blog/compute-pressure-origin-trial-2/) — This new origin trial from Chrome allows web developers to monitor compute pressure (how hard the system is being worked to render the content on the current page) via the Computer Pressure API. Christiansen & Mandy (Intel) [How to Scale a Complex React Native App?](https://www.callstack.com/blog/optimize-development-efficiency-when-building-super-app?utm_campaign=super_apps&utm_source=email&utm_medium=development_efficiency&utm_content=frontend_focus) — Discover how to optimize development efficiency with super apps. Callstack sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1685531671/bwez8jgof72tzkrdvjdn.png)](https://developer.mozilla.org/en-US/blog/javascript-shape-drawing-function/) [How to Draw Any Regular Shape with Just One JavaScript Function](https://developer.mozilla.org/en-US/blog/javascript-shape-drawing-function/) — Mozilla/MDN has a (relatively) [new blog](https://developer.mozilla.org/en-US/blog/) — here they share how to use JavaScript to draw any regular shape to a HTML canvas with a single function, and how to modify it to draw multiple shapes. Ruth John [A Brief Note on Popovers with Dialogs](https://adrianroselli.com/2023/05/brief-note-on-popovers-with-dialogs.html) — When it comes to popovers and dialogs Adrian sees a potential issue for users “_when developers mix and match the patterns_”. Adrian Roselli [An FYI — `display: contents` Considered Harmful](https://ericwbailey.website/published/display-contents-considered-harmful/?ref=sidebar) — “_The erratic nature of how the declaration actually functions [in practice] represents a very real, very serious risk of critical accessibility issues being introduced into your website or web app in a way that you have no control over_”. Eric Bailey [Error-Message Guidelines](https://www.nngroup.com/articles/error-message-guidelines/) — Sound advice for designing effective error messages that deliver high visibility, provide constructive communication, and respect user effort. Neusesser & Sunwall (NNG) [Two Things That are Not Great About OKLCH](https://chriscoyier.net/2023/05/25/two-things-that-are-not-great-about-oklch/) — Color manipulation is.. tricky. Chris Coyier [Creating a 'Shine Effect' on a Card with Tailwind CSS](https://www.julienthibeaut.xyz/blog/create-shine-effect-on-card-with-tailwind-css) Julien Thibeaut [Wishlist: Single Line Comments in CSS](https://blog.jim-nielsen.com/2023/single-line-comments-in-css/) Jim Nielsen 🧑‍💻 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 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zi9ptkwigsiuon9g4jjw.jpg)](https://www.blocknotejs.org/) [BlockNote: A 'Notion-Like' Block-Based Text Editor](https://www.blocknotejs.org/) — Flexible and presents an extensive API so you can integrate it with whatever you want to do. You can drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. Builds on top of ProseMirror and TipTap. TypeCell [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1685531509/m92rdh9f242knl3j1crj.jpg)](https://github.com/meodai/color-names) [Color Names: Large List of Handpicked Color Names](https://github.com/meodai/color-names) — This goes beyond just the obvious choices like the named colors in HTML ([💜 `rebeccapurple`](https://medium.com/@valgaze/the-hidden-purple-memorial-in-your-web-browser-7d84813bb416)) — you'll actually find over _30,000_ colors here with a delightful array of names and uses. David Aerne [React Authentication — Without Complexity](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=react_authentication) — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now. Userfront sponsor [Inkline 4.0: A Customizable Vue.js 3 UI/UX Library](https://inkline.io/) — A design system and numerous customizable components designed for mobile-first (but desktop friendly) and built with accessibility in mind. Alex Grozav [ls-lint 2.0: A Fast File and Directory Name Linter](https://github.com/loeffel-io/ls-lint) — Written in Go but aimed at JS/front-end dev use cases, `ls-lint` provides a way to enforce rules for file naming and directory structures. Lucas Löffel [Bootstrap 5.3.0: The Reponsive Sass-Based Frontend Toolkit](https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/) — “_a monumental effort to revamp our codebase for CSS variables and color modes_” – including first class support for dark mode. Mark Otto [Scroll-Driven Animation Examples](https://scroll-driven-animations.style/) — There’s a bunch of neat demos here to show off scroll-driven animations in action that may get you thinking about how you can implement them. Bramus Van Damme 📬 **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/595/*|UID|*?ipx=t)