--- title: "Is 'pixel perfect' still a thing?" publication: "Frontend Focus" issue: 450 published_at: "2020-07-22" canonical_url: "https://frontendfoc.us/issues/450" --- Plus this week's browser, HTML and CSS links. #450 — July 22, 2020 [Web Version](https://frontendfoc.us/issues/450) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1595420717/pc6cfsrfbfaawi4uddep.jpg)](https://ishadeed.com/article/pixel-perfection/) [The State of 'Pixel Perfection'](https://ishadeed.com/article/pixel-perfection/) — I don’t really hear the term “pixel perfection” as much as I used to, but the author says it still pops up enough. Here, he compares what this phrase really means today versus what it used to, and suggests how we should move beyond it. Ahmad Shadeed [Translating Design Wireframes Into Accessible HTML/CSS](https://www.smashingmagazine.com/2020/07/design-wireframes-accessible-html-css/) — Harris Schneiderman walks you through the process of analyzing a wireframe and making coding decisions to optimize for accessibility. Smashing Magazine [![\](https://copm.s3.amazonaws.com/a4c9d2c7.jpg)](https://frontendmasters.com/courses/xstate/?utm_source=cooperpress&utm_medium=email&utm_campaign=xstate) [Learn State Machines from the Creator of XState, David Khourshid](https://frontendmasters.com/courses/xstate/?utm_source=cooperpress&utm_medium=email&utm_campaign=xstate) — By modeling the state in your application with state machines and statecharts, you will spend less time debugging edge cases and more time modeling complex application logic in a visually clear and robust way. Frontend Masters sponsor [Modern CSS Grid Solutions to Common Layout Problems](https://vycke.dev/blog/css-layout-patterns/) — How CSS grids can solve responsive layout issues and enable you to create sites that flow with screen sizes without having to worry about breakpoints. Kevin Pennekamp [All the Ways to Make a Web Component](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/) — Compare coding style, bundle size and performance of 33 different ways to make a Web Component. div riots [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1595426328/dafyt9ge7vuqit6fbyid.png)](https://3d-book-css.netlify.app/) [3D Book Image CSS Generator](https://3d-book-css.netlify.app/) — A neat little tool to create a 3D book cover that lets you customize perspective, animation duration, thickness of the book, rotation on hover, URL, etc. then grab the CSS code. I remember when we used to have to pay for tools like this :-) Sebastien Castiel **⚡️ Quick bits:** - A new [dev channel build of version 85 of Edge](https://techcommunity.microsoft.com/t5/discussions/dev-channel-update-to-85-0-564-8-is-live/m-p/1524329) is now live. - Google is [taking a little longer](https://webmasters.googleblog.com/2020/07/prepare-for-mobile-first-indexing-with.html) to enable mobile-first indexing in search. - Julia Evans [shares a comic](https://twitter.com/b0rk/status/1285257205571366917/photo/1) on just how `position: absolute` works. 💻 **Jobs** [One Application, Hundreds of Hiring Managers](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery [Web Tools Developer (Cupertino, California)](https://jobs.apple.com/en-us/details/200152073/web-tools-developer) — The WebKit Developer Experience team seeks an experienced engineer to work on developer tools including the WebKit Web Inspector, Safari WebDriver, and others. Apple ℹ️ _Interested in running a job listing in Frontend Focus? There's [more info here.](https://booking.cooperpress.com/jobs)_ 📙 **Tutorials & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1595426482/lripqomkydwktkms1nmy.png)](https://abandonedwig.info/blog/2020/07/03/css-painting-order.html) [CSS Painting Order](https://abandonedwig.info/blog/2020/07/03/css-painting-order.html) — If you’ve ever been baffled by z-index positioning, the example shared here is worth remembering. “_things inside a stacking context are painted together, as a unit_” Martin Robinson ▶[The Details of UI Typography](https://developer.apple.com/videos/play/wwdc2020/10175/) — A good half-hour look at how you can enhance type legibility, accessibility, and consistency across your UI. Apple Developer [When Do You Use `inline-block`?](https://css-tricks.com/when-do-you-use-inline-block/) — Chris Coyier asked how folks use the `inline-block` value. Here’s a run through some common answers, and some issues that may crop up. CSS Tricks [Faster CI/CD for All Your Software Projects Using Buildkite 🚀](https://buildkite.com/?pk_campaign=fefocus_speed_nocr_rk_july_20&pk_source=cp&pk_medium=newsletter) — See how Shopify scaled from 300 to 1800 engineers while keeping their build times under 5 minutes. Buildkite sponsor [Bootstrap 5: Learn How to Get Started Without jQuery](https://themesberg.com/blog/tutorial/bootstrap-5-tutorial) — Yep, the latest version of Bootstrap (currently in alpha) does away with jQuery in favour of using vanilla JS. Here’s a few pointers on using it. Zoltán Szőgyényi [The Trouble with Mailto Email Links and What to Do Instead](https://adamsilver.io/articles/the-trouble-with-mailto-email-links-and-what-to-do-instead/) — These `mailto:` links are everywhere and yet browsers and operating systems don’t really make them easy to use. Adam Silver and Amy Hupe [How We Achieve "Simple Design" for Basecamp and HEY](https://m.signalvnoise.com/how-we-achieve-simple-design-for-basecamp-and-hey/) — The core approach here is dubbed ‘Fisher Price’ design - keeping things obvious and simple. Jonas Downey (Basecamp) [How to Create a CSS-Only, Animated, Wrapping Underline](https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline) Nicky Meuleman [In Defense of a 'Fussy' Website](https://css-tricks.com/in-defense-of-a-fussy-website/) Sarah Drasner 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1595426098/hagubcyriitzc3x2cbbs.png)](https://mailgo.dev/) [mailgo: A New Concept of `mailto:` and `tel:` Links](https://mailgo.dev/) — Add this script to convert `mailto:` and `tel:` links into a modal that appears on click that gives the user a choice to open in Gmail, Outlook, copy the link, etc. Matteo Manzinello [Wikimedia FontCDN: A Privacy First Search and Proxy for Google Web Fonts](https://fontcdn.toolforge.org/) — [Google Fonts](https://fonts.google.com/) is a hugely popular way to bring custom fonts on to Web sites but if you’re feeling uneasy about giving Google all that user data, consider this. (You could, of course, also host the fonts yourself.) FontCDN [500M End-Users Depend on Our Scalable Chat and Activity Feed APIs](https://getstream.io/chat/?utm_campaign=2020_07_22_frontend_focus&utm_medium=promoted_newsletter&utm_source=frontend_focus) Stream sponsor [css-media-vars: A New Way to Write Responsive CSS](https://github.com/propjockey/css-media-vars) — [Full explainer here](https://propjockey.github.io/css-media-vars/) but this basically uses CSS variables that are added to the element and act as universal mixins. PropJockey [doom-scroller.js - A JavaScript Library to Help You Avoid Endlessly Doomscrolling](https://defaced.dev/web/doom-scroller/) — Find yourself scrolling mindlessly through junk on social media? This Doom-inspired library may help. 😅 Chris Johnson [🍰 CSS Is Cake](https://codepen.io/jh3y/pen/KKVGoGJ) — Because what _isn’t_ cake? Jhey Tompkins codepen **🗓 Upcoming Events:** - **[ViennaCalling](https://webclerks.at/vienna-calling/)** (July 29) — An online meetup streamed on Twitch for "all who work on the web". - **[Frontcon](https://2020.frontcon.com)** (August 12 - 14) — A frontend conf based in Latvia that's now [taking a hybrid approach](https://twitter.com/FrontCon/status/1278240866121977856), offering both online and on-site attendance options. - [Front-End Focus](https://aneventapart.com/event/online-0820) (August 17) – It's got the same name as this newsletter but it's nothing to do with us. It's from the _An Event Apart_ team though and has some fantastic speakers lined up. A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom