--- title: "Eric Meyer shows off max-inline-size" publication: "Frontend Focus" issue: 540 published_at: "2022-05-04" canonical_url: "https://frontendfoc.us/issues/540" --- Plus Firefox 100, creating realistic reflections, and Edge makes it to #2. | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus 🇺🇦 #​540 — May 4, 2022 | [Read on the web](https://frontendfoc.us/issues/540) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/oyl1smxkf1jvni8jphkv.jpg)](https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/) [You Don’t _Need_ a UI Framework](https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/) — You’ve got an app or a site to build so you reach for Bootstrap or Material UI and.. well, maybe you shouldn’t, says Josh, who argues they’re not needed for most projects and makes his case here. Josh Comeau 🎂 [Celebrating Firefox 100: How Mozilla Got There](https://blog.mozilla.org/en/mozilla/celebrating-firefox-100/) — Just a month behind Chrome 100 comes Firefox 100, and how far Firefox has come since its birth as _Phoenix_, a lightweight rethinking of the former Netscape browser suite. Firefox 100 is broadly _not_ a developer oriented release but there are [release notes](https://www.mozilla.org/en-US/firefox/100.0/releasenotes/) nonetheless. Mozilla [![\](https://copm.s3.amazonaws.com/0ad9921b.png)](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=frontendfocus&utm_medium=sponsored_primary&utm_campaign=20220504) [Build a More Accessible Web App with axe DevTools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=frontendfocus&utm_medium=sponsored_primary&utm_campaign=20220504) — Start accessibility testing in your browser in just minutes. Avoid wasted time with inaccurate results. Easily fix issues with in-product guidance. Install the free axe DevTools Chrome extension and start building a more accessible app today. Deque sponsor [Flexibly Centering an Element with Side-Aligned Content](https://meyerweb.com/eric/thoughts/2022/04/26/flexibly-centering-an-element-with-side-aligned-content/) — I'm old enough to remember when folks like Eric had to come up with complicated solutions for Web layout issues, so it’s fantastic things have progressed that such solutions are now _simple_, yet still clever enough to involve CSS properties I've not used before such as `max-inline-size` here. Eric Meyer [Microsoft _Edge_ Overtakes Safari as 2nd Most Popular Desktop Browser](https://www.macrumors.com/2022/05/03/microsoft-edge-overtakes-safari-popularity/) — So now the #1 and #2 browser are, essentially, both Chromium under the hood for a total of 76.7% share between them. Safari is still _huge_ in the mobile space, however, due to Apple’s rules around browser engines (or lack thereof) on iOS devices. MacRumors **⚡️ Quick bits:** - The CSS Zen Garden project [has turned 19 years old.](https://twitter.com/i/web/status/1521502338283978755) - Rachel Andrew reflects on [what's was new to the web platform in April 2022.](https://web.dev/web-platform-04-2022/) - Dave Rupert considers the complexity of [server-side versus client-side analytics](https://daverupert.com/2022/04/server-side-vs-client-side-analytics/) and concludes _"If your goal is not to grow your site… maybe ignorance is bliss."_ - A neat list of [cool things people do with their blogs.](https://brainbaking.com/post/2022/04/cool-things-people-do-with-their-blogs/) Seeing a lot more stuff on Twitter about blogging 'coming back' lately.. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/fpri60wf3jsenowffnjk.jpg)](https://css-tricks.com/creating-realistic-reflections-with-css/) [Creating Realistic Reflections with CSS](https://css-tricks.com/creating-realistic-reflections-with-css/) — The idea is you have a copy of something (like some text) then use CSS transforms to flip it vertically and apply some extra styling. It’s a neat effect. Preethi (CSS Tricks) [Generating SVG 'Mountain Ridge' Dividers](https://alistairshepherd.uk/writing/svg-generative-ridges/) — I see this as being a bit more like a ‘torn paper’ effect, but whatever it’s called, it’s neat to see how to generate SVG on the fly to represent it. Alistair Shepherd [Level-Up Your Cypress Testing Knowledge for Free](https://learn.cypress.io/?utm_medium=newsletter&utm_source=sponsorship&utm_campaign=frontend-focus-sponsorship-may-4-2022&utm_term=&utm_content=website) Cypress.io sponsor [Creating the DigitalOcean Logo in 3D with CSS](https://css-tricks.com/creating-the-digitalocean-logo-in-3d-with-css/) — Finally DigitalOcean are taking full advantage of their acquisition of CSS Tricks(!) :-) Regardless of the commercial intent, this tutorial digs a _lot_ further into using CSS to create and work with logos and symbols than I expected and should be a learning experience for all. Jhey Tompkins [Starting a Blank Jekyll Site with Tailwind CSS in 2022](https://mzrn.sh/2022/04/09/starting-a-blank-jekyll-site-with-tailwind-css-in-2022/) Giorgi Mezurnishvili [Build a Lightweight Web Component with Lit.js](https://blog.openreplay.com/build-a-lightweight-web-component-with-lit-js) Clara Ekekenta [My Browser Support Strategy](https://css-irl.info/my-browser-support-strategy/) Michelle Barker [The Appeal of Using Plain HTML Pages](https://utcc.utoronto.ca/~cks/space/blog/web/PlainHTMLAppeal) Chris Siebenmann Jobs [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-frontend&utm_content=frontend) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Frontend Engineer](https://feather-insurance.com/careers/frontend-engineer/) — We’ve built a product thousands of people love (see [Trustpilot](https://www.trustpilot.com/review/feather-insurance.com) 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 🔧 **Code, Tools & Resources** [Pyscript: Run Python in Your HTML](https://pyscript.net/) — A framework for creating Python apps in the browser by way of HTML. You get bi-directional communication with JavaScript, too. Unsurprisingly, WebAssembly is what does the heavy lifting and makes this all possible. [More background here.](https://www.anaconda.com/blog/pyscript-python-in-the-browser) Anaconda Inc. [Frappe Gantt: A JavaScript Gantt Chart Control](https://frappe.io/gantt) — Gantt charts are commonly used in project management to show the progress and connection between activities spread over a timeline. There’s a live demo on this page, or you can head to the [GitHub repo.](https://github.com/frappe/gantt) Frappe [Speed Up Your Builds with Buildkite’s New Plan](https://buildkite.com/blog/all-new-free-plan?utm_campaign=CPress&utm_source=ppc&utm_medium=CPress&utm_term=free-plan&utm_content=new-announcement) — Set up CI/CD pipelines, frontend builds, ML training, Ops automation, security scanning, or IOT testing 📦 Buildkite sponsor [CSS Generators: Custom Borders](https://css-generators.com/custom-borders/) — A CSS-only generator for zig-zag, rounded and wavy-style borders. Temani Afif [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/l5p8rdml0q0uiksuqlov.jpg)](https://github.com/missive/emoji-mart) [Emoji Mart 5.0: A Customizable Emoji Picker for the Web](https://github.com/missive/emoji-mart) — You can [test it out here.](https://missiveapp.com/open/emoji-mart) Missive [Plyr React 4.0: A Responsive Media Player React Component](https://plyr-react.js.org/) — Supports video, audio, YouTube and Vimeo. [GitHub repo.](https://github.com/chintan9/plyr-react) Chintan Prajapati [HyperUI: Open Source Tailwind CSS Components](https://www.hyperui.dev/) — Popups, inputs, pagination, cards, and a lot more besides. Mark Mead [Peaks 2.0: UI Component for Interacting with Audio Waveforms](https://github.com/bbc/peaks.js) BBC **🕰 ICYMI** (_Some older stuff that's still worth checking out_) - [Here's a sizeable collection of handy little tools and time-saving apps](https://speckyboy.com/tiny-little-tools-web-design/) for web designers. You'll no doubt find something cool here. - [This video from Hussein Nasser](https://www.youtube.com/watch?v=rjZpGc9xWlM) digs into how Instagram goes about serving its content to the user (via GraphQL). - Ready to speedrun your CSS knowledge? [This game quizzes you](https://css-speedrun.netlify.app/) on your CSS selector know-how. - [This browser-based tool](https://aremythirdpartiesgreen.com) checks to see if the third-party code on your site is 'green' (renewable-based hosting, carbon impact, effective caching, etc). 📬 **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/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)