--- title: "A is for aspect-ratio, B is for border.." publication: "Frontend Focus" issue: 601 published_at: "2023-07-12" canonical_url: "https://frontendfoc.us/issues/601" --- Plus how to use all the new viewport units, self-closing tag takes, and why CSS layout really is awesome. | Together with [![Dopt\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_432,h_117/e_make_transparent/co_white,e_outline:27/dtdzzmxtlphof2tk5g2m.png)](https://dopt.com?utm_source=frontendfocus) #​601 — July 12, 2023 | [Read on the web](https://frontendfoc.us/issues/601) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1689163848/qfxdvmicfrsly2nm4kye.png)](https://ishadeed.com/article/new-viewport-units/) [Exploring Modern Alternatives to `vh`/`vw` Units](https://ishadeed.com/article/new-viewport-units/) — Ahmad brings us up to speed on the new(ish) small, large, and dynamic viewport units in CSS (e.g. `svh`, `lvh`, and `dvh`) and how they work across various mobile browsers. As ever, there are plenty of visuals to convey the points being made. Getting mobile page height right has long been tricky, but these new units make things more manageable and [browser support is good too](https://caniuse.com/viewport-unit-variants), which makes a nice change. Ahmad Shadeed [](https://jakearchibald.com/2023/against-self-closing-tags-in-html/) — `/>` is sometimes ignored, and sometimes it isn’t… should we still be writing this? Should Prettier still be enforcing this? Does it matter? Jake shares his stance on a technique whose origin goes back more than 20 years. Jake Archibald [![\](https://copm.s3.amazonaws.com/0835bbf3.jpeg)](https://dopt.com?utm_source=frontendfocus) [SDKs to Build Quality Product Onboarding](https://dopt.com?utm_source=frontendfocus) — Dopt gives developers a component library and SDKs to build product onboarding and education in minutes. A visual builder lets the team map out flows; SDKs & APIs make it easy to develop them. Use Dopt’s prebuilt components or build with your own. Dopt sponsor ▶[Modern CSS Layout is Awesome](https://css-irl.info/video-modern-css-layout-is-awesome/) — A ~45-minute talk that will tell you what you need to know about modern approaches to CSS layout, covering some of the new features at our disposal and how to use them. Michelle Barker [WCAG 2.2: Quick and Simplified](https://medium.com/design-ibm/wcag-2-2-quick-and-simplified-73c3ff66b065) — With a new version of the Web Content Accessibility Guidelines on the cusp of becoming a standard, here’s a brief, simplified look at the nine new requirements. Mike Gower **⚡️ IN BRIEF** - Chris Coyier thinks about how [features from Sass have gradually ended up in CSS proper.](https://chriscoyier.net/2023/07/11/sass-features-in-css/) Thanks Sass and SCSS. - Aaron Francis looks at [how you can 'write' PHP on the frontend](https://www.youtube.com/watch?v=VJlpDlxPZ0k) using Laravel Livewire. - Manueo Matuzović is [seeking submissions](https://front-end.social/@matuzo/110691150357353314) for this year's HTMHell Advent Calendar. - _Where you at?_ No, Kelly Rowland [couldn't have used Excel's `=HYPERLINK()` function](https://blog.jgc.org/2023/07/unfortunately-kelly-rowland-couldnt.html) to message Nelly. Apparently. - [GitHub has added support for managing projects](https://github.blog/2023-07-11-github-cli-project-command-is-now-generally-available/) via GitHub Projects to its CLI tool. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1689156056/k01bgrm4ds78yt6uhv2p.png)](https://cloudfour.com/thinks/coding-randomized-zelda-patterns/) [Coding Randomized 'Tears of the Kingdom' Zelda Patterns](https://cloudfour.com/thinks/coding-randomized-zelda-patterns/) — The new Zelda game (which I’m really enjoying btw — _but I have [a Nintendo newsletter](https://switchweekly.com) for that_) uses repeated, geometric patterns to build a cohesive aesthetic throughout the world. Paul looks at how to recreate this motif with code. A fun little SVG experiment, and a pen-plotting robot even gets involved. Paul Hebert **Related:** Daley Wilhelm looks at the [UI considerations in the new Zelda](https://t.co/b9YrQ33PLa). [Offset Parent and Stacking Context: Positioning Elements in All Three Dimensions](https://polypane.app/blog/offset-parent-and-stacking-context-positioning-elements-in-all-three-dimensions/?ref=sidebar) — How you can use the offset parent and stacking context to position elements in all three dimensions, and how to debug them. Kilian Valkhof [How to Build a Web App in 60 Seconds Using AI](https://dynaboard.com/?utm_source=cooperpress-ff&utm_medium=email&utm_campaign=60seconds-q32023) — Dynaboard's low-code IDE offers 40+ built-in UI components & easy DB connections. Use AI to generate any SQL, JS & CSS. Dynaboard sponsor [Permission](https://adactio.com/journal/20315) — It’s generally accepted that our sites are crawled so people can find them via search, but are we ok with our sites being crawled to help train an LLM? In the evolving era of AI, Jeremy notes: “_We can rescind our invitation to Google_”. Jeremy Keith [What’s the Best Font? See How You and Others Perceive Different Types](https://www.washingtonpost.com/technology/interactive/2023/best-font-you-test-types-styles/?font=dyslexic_friendly) — A neat interactive article that runs through the unique characteristics of a few fonts and shares how these differences are perceived. Kumar, Fowler, Shapiro (The Washington Post) [Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images](https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/) Temani Afif [All the Places You Can Use the `prefers-color-scheme` Media Query](https://www.amitmerchant.com/places-where-you-can-use-prefers-color-scheme-media-query/) Amit Merchant [Find Memory Leaks by Comparing Heap Snapshots in Chrome or Edge](https://devtoolstips.org/tips/en/find-memory-leaks/) Patrick Brosset 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1689164467/doodiwl9lkeklw3mz6vu.png)](https://svghub.vercel.app/) [SVG Hub: 70+ Custom-Color Elements Ready to Paste Into Your Project](https://svghub.vercel.app/) — A unique set of graphics in SVG format consisting of squiggles, scribbles, and other unusual shapes — and you can live-edit the colors on the page to test out various palettes. Daniel Cranney 💡[Lucide](https://lucide.dev/) is also cool if you want something more icon oriented. [Feature Flags That Work the Way You Code](https://devcycle.com/?utm_source=frontend-focus&utm_medium=em&utm_campaign=newsletter-frontend-focus-july-2023) — DevCycle’s feature flags integrate seamlessly with your workflow so you can ship faster using tools you already love. DevCycle sponsor [Tailkits: A Directory of Tailwind CSS Templates, Components, and More](https://tailkits.com/) — Currently includes more than 250 products, and you can easily filter by free or paid and select by category (dashboards, landing pages, e-commerce, portfolios, etc). Tailkits [Prettier 3.0 Released](https://prettier.io/blog/2023/07/05/3.0.0.html) — The latest version of the popular code formatter (which isn’t just for JavaScript, it tackles CSS, JSX, Markdown, and numerous templating formats too) is here. Sosuke Suzuki [Proportio: An Interactive Tool to Create Proportional Scales](https://proportio.app/) — Similar to other type scale tools, but this one is much more complete, allowing you to create proportional scales for type, shapes, components, and even containers. Lots to fiddle around with here! nate baldwin [MathLive: A Web Component for Math Input](https://cortexjs.io/mathlive/) — A web component that provides an interface for editing formulas. It supports hundreds of LaTeX commands and uses LaTeX-style typesetting to keep things looking slick. [GitHub repo.](https://github.com/arnog/mathlive) Arno Gourdol [svgps.app: Converts Your Icons into a Single JSON File](https://github.com/aykutkardas/svgps.app) — Converts icon packs into a JSON file that can be used in your app via child libraries for React, React Native, Preact, Vue and Svelte. Aykut Kardaş 🧑‍💻 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 🖍️ **...and finally** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1689162887/uvwn9o3jrfsg7pnvk1cb.png)](https://comicss.art/?id=95) [comiCSS: The ABCs of CSS](https://comicss.art/?id=95) — Each letter of the alphabet here is drawn with CSS and showcases one CSS property/value - like A for `aspect-ratio`. There’s a [live demo version here too](https://comicss.art/comics/95/abc-css.html). Alvaro Montoro 📬 **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/601/*|UID|*?ipx=t)