--- title: "Making designs feel more random with prime numbers" publication: "Frontend Focus" issue: 449 published_at: "2020-07-15" canonical_url: "https://frontendfoc.us/issues/449" --- Plus this week's browser, HTML and CSS links. #449 — July 15, 2020 [Web Version](https://frontendfoc.us/issues/449) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1594810888/qjam08r7xrlr6tybsany.jpg)](https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/) [The Cicada Principle, Revisited with CSS Variables](https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/) — The _Cicada Principle_ is the idea that when creating repetitive patterns, backgrounds, etc. using prime numbers can increase the appearance of organic randomness. Lea shows how she used a modern approach to this idea to format her code examples in a visually striking way. Lea Verou [Style Stage: A Modern CSS Showcase](https://stylestage.dev/) — A modern twist on the _CSS Zen Garden_ idea of yesteryear where people submit their own manipulations of a concept using the most modern of CSS features. Here are [the submissions so far](https://stylestage.dev/styles/) with [Vaporwave](https://stylestage.dev/styles/vaporwave/) being my favorite. They all have a very _“90s Web design renaissance”_ feel to them. Stephanie Eckles et al. [![\](https://copm.s3.amazonaws.com/9d87edb6.png)](https://hasura.io/?utm_source=FrontEndFocus&utm_medium=email&utm_campaign=FrontEndFocus) [Get an Instant GraphQL API with Hasura to Build Fullstack Apps, _Fast_](https://hasura.io/?utm_source=FrontEndFocus&utm_medium=email&utm_campaign=FrontEndFocus) — Integrate Hasura’s GraphQL API with any frontend language or framework. Configure your backend with our intuitive UI. Hasura sponsor ▶[What’s New in Chrome DevTools](https://www.youtube.com/watch?v=6yrJZHqJe2k) — Two of Google’s best known faces on the Chrome side of things give a twenty minute run through a whole bunch of new bits and pieces available in the DevTools in areas like performance monitoring, WebAssembly source mapping, and cookies. Paul Lewis and Surma (Google) **⚡️ Quick bits:** - Adobe Flash passes off into the sunset later this year, and [Ars Technica have taken a look back at its story.](https://arstechnica.com/information-technology/2020/07/the-rise-and-fall-of-adobe-flash/) A nice bit of nostalgia. - You can now start up a new Codepen [by visiting pen.new](https://pen.new). - Got a flashlight to hand? [This personal site](https://tonsky.me/) takes an amusing unique approach to dark mode. - I like this: A curated list of [whimsical websites](https://whimsical.club) that have a bit of fun and spark joy. 💻 **Jobs** [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find a Job Through Vettery](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 growing tech teams at startups and Fortune 500 companies. Vettery ℹ️ _Interested in running a job listing in Frontend Focus? There's [more info here.](https://booking.cooperpress.com/jobs)_ 📙 **News, Tutorials & Opinion** [Memorizing Scroll Position Across Page Loads](https://css-tricks.com/memorize-scroll-position-across-page-loads/) — An interesting UX enhancement that involves saving the current scroll position in `localstorage` before the user navigates away. Chris Coyier / Hakim El Hattab [Responsive Suffixes in CSS Class Names with Sass](https://seesparkbox.com/foundry/responsive_class_suffixes_automating_classes_with_sass_mixins_and_sass_maps) — An interesting look at automating classes with Sass mixins and maps. Philip Zastrow [A Basic Technique for Switching a Logo in Dark Mode](https://www.giftegwuenu.com/how-to-switch-logo-in-dark-mode/) — Logos often suit dark or light contexts and not the other, but you can swap them dynamically with a bit of CSS. Gift Egwuenu ['13% of My Website Visitors Block Google Analytics'](https://markosaric.com/google-analytics-blocking/) — It’s not just _ads_ that get blocked but trackers too. Every site will have a different audience profile and a different likelihood of having its tracking blocked, so maybe it’s better to track requests behind the scenes or focus on other metrics instead. Marko Saric [Adding the `prefers-contrast` Media Query to Firefox](https://hacks.mozilla.org/2020/07/adding-prefers-contrast-to-firefox/) — This [upcoming media query](https://drafts.csswg.org/mediaqueries-5/) works in a similar way to `prefers-colour-scheme`, and is to be used to detect if the user has requested the system increase or decrease the amount of contrast between adjacent colors. This blog post walks through its design and implementation in Firefox. Zeke Medley (Mozilla) [Everything You Have to Know About Core Web Vitals](https://calibreapp.com/blog/core-web-vitals) — Core Web Vitals is a set of metrics portraying three aspects of user experience: loading, interactivity and visual stability. Karolina Szczur [Barebones WebGL in 75 Lines of Code](https://avikdas.com/2020/07/08/barebones-webgl-in-75-lines-of-code.html) — WebGL is pretty intimidating but this boils it down to the bare essentials. And if you want to go further, I still think [this thorough guide](https://xem.github.io/articles/webgl-guide.html) is one of the best. Of course, you may see all of the boilerplate needed and just use [Three.js](https://threejs.org/) instead, which is fine too! 😄 Avik Das [Always Bet on HTML.. Being Misunderstood](https://christianheilmann.com/2020/07/06/always-bet-on-html-being-misunderstood/) Christian Heilmann 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/vttdounnlssbud63twka.jpg)](https://tablericons.com/) [Tabler Icons: 500+ Customizable SVG Icons](https://tablericons.com/) — Simple, monochrome, line art SVG icons covering lots of concepts from (mostly) computer and browser based concepts to arrows and weather. Paweł Kuna [Squircley: A SVG 'Squircle' Maker](https://squircley.app/) — If you don’t find it [hip to be square](https://www.youtube.com/watch?v=LB5YkmjalDg), consider a cross between the square and the circle: the [_squircle_.](https://en.wikipedia.org/wiki/Squircle) georgedoescode [Headless WordPress with Gatsby Cloud](https://www.gatsbyjs.org/blog/2020-07-07-wordpress-source-beta/) — Gatsby is an increasingly popular React-based site building framework and this new plugin brings it to WordPress. The idea is you can use WordPress as a headless CMS with Gatsby taking care of the front-end. Hashim Warren (Gatsby) [shareon: Simple and Stylish 'Share Buttons'](https://shareon.js.org/) — They also boast good ethics as there’s no tracking code involved. Nikita Karamov [Halfmoon: A Frontend Framework With a Built-in Dark Mode](https://www.gethalfmoon.com/) — A responsive frontend framework designed for quickly building dashboards and product pages. Uses Bootstrap-like classes, and is compatible with IE11. Halfmoon [EmailComb: Remove Unused CSS From Email Templates](https://emailcomb.com/) — A handy online tool to try out. Codsen ltd [A Typing / Typewriter Effect in Pure CSS](https://codepen.io/denic/pen/GRoOxbM) — I’m quite impressed how simple this is - it leans on the `steps` directive to make the animation jerky enough to look like typing. CodePen demo **🗓 Upcoming Events:** - **[An Event Apart: Online Together — Human-Centered Design](https://aneventapart.com/event/online-0720)** (July 20) — A single-day online conference with a focus on design for all users, not just some idealized average. - **[ForwardJS](https://forwardjs.com/sanfrancisco)** (July 20 - 24) — A virtual event, providing five days of workshops and talks to registrants from the comfort of their browser. - **[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, so it's bound to be good (just don't complain to us if you don't enjoy it! 😂) 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