~frontendfocus | Issue 631 - Just what is the best way to center a div? (16)

How To Center a Div

joshwcomeau.com

How To Center a Div — What was once a tricky ordeal in CSS is now...
How To Center a Div — What was once a tricky ordeal in CSS is now much easier thanks to lots of new tools — but which one do you reach for? Flexbox, Grid, something else? Josh dives in, and shares the trade-offs between different approaches, and the strategies to use. He notes “this turned out to be way more interesting than I initially thought”....
5
Tailwind CSS Course | Build Maintainable User Interfaces with Tailwind

frontendmasters.com

Tailwind CSS: Write Efficient, Utility-First CSS — Join Steve Kinney for this detailed video course exploring...
Tailwind CSS: Write Efficient, Utility-First CSS — Join Steve Kinney for this detailed video course exploring Tailwind CSS. You'll build real-world components like modals, forms, and page layouts — becoming proficient in creating stunning, responsive, and maintainable UI.
2
Update on apps distributed in the European Union - Support - Apple Developer

apple.com

An Update on Apps Distributed in the European Union — Last week we shared news that...
An Update on Apps Distributed in the European Union — Last week we shared news that Apple looked to be dropping support for Progressive Web Apps for users located in the EU. That news has now sadly been confirmed in a developer support document.
1
It’s Official, Apple Kills Web Apps in the EU - Open Web Advocacy

open-web-advocacy.org

“It’s Official, Apple Kills Web Apps in the EU” — Here’s a response to the above...
“It’s Official, Apple Kills Web Apps in the EU” — Here’s a response to the above news from the Open Web Advocacy group, who are also asking for feedback from developers and businesses who operate online in the EU on how this may impact things.
2
Okay, Color Spaces — ericportis.com

ericportis.com

Okay, Color Spaces — This is an excellent, fun explainer of color spaces — a worthwhile...
Okay, Color Spaces — This is an excellent, fun explainer of color spaces — a worthwhile read if you’re curious about the various color changes coming to CSS.
1
What is Utility-First CSS?: HeydonWorks

heydonworks.com

What is Utility-First CSS? — A critical view on so-called 'utility-first' CSS, highlighting skepticism towards its...
What is Utility-First CSS? — A critical view on so-called 'utility-first' CSS, highlighting skepticism towards its practicality, and noting that whilst it may seem appealing it often complicates things rather than simplifies them.
1
Clerk | Authentication and User Management

dub.sh

Build Secure Apps with Clerk's Auth & User Management — Clerk is a complete suite of...
Build Secure Apps with Clerk's Auth & User Management — Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.
1
CSS-only DVD Screensaver animation

javiermorales.dev

Creating a CSS-Only DVD Screensaver Animation — No, you’ve been staring at this for five minutes...
Creating a CSS-Only DVD Screensaver Animation — No, you’ve been staring at this for five minutes waiting for it to hit the corner… Anyway, here’s a detailed look at how this classic DVD animation has been recreated, without JavaScript. All presented with dynamic examples and handy code snippets.
1
100 things you can do on your personal website | James' Coffee Blog

jamesg.blog

100 Things You Can Do On Your Personal Website — Do you have a personal site?...
100 Things You Can Do On Your Personal Website — Do you have a personal site? If not, maybe consider it and then go through this list. 🧡 IndieWeb
3
SVG Flag Icons

nucleoapp.com

SVG Flag Icons — A collection of over 200 country flag icons with one click SVG code-to-clipboard.
1
GitHub - devnomic/marquee: A beautiful marquee component for React.

github.com

Marquee: A Beautiful 'Marquee' Component for React — Not just for text, which is what we...
Marquee: A Beautiful 'Marquee' Component for React — Not just for text, which is what we normally associate with the so-called ‘marquee’ effect. You can see some examples here, one of which is a vertical marquee.
1
Tempo • Dates by FormKit

formkit.com

Tempo: An Easier Way to Work with Dates — This is a collection of utilities for...
Tempo: An Easier Way to Work with Dates — This is a collection of utilities for working with the native Date object. Under the hood, it mines JavaScript’s Intl.DateTimeFormat to extract complex data, giving you a simple API to format, parse, and manipulate dates. Good stuff.
3
Next-gen Web Extension Framework – WXT

wxt.dev

WXT: Next-Gen Web Extension Framework — A framework for creating cross-browser extensions. You can target Chrome,...
WXT: Next-Gen Web Extension Framework — A framework for creating cross-browser extensions. You can target Chrome, Firefox, Edge and Safari.
2
GitHub - epicweb-dev/restore-scroll: 🌀 Restore scroll position of elements on page navigation

github.com

restore-scroll: Restore Scroll Position of Elements on Page Navigation — This means not only the <body>...
restore-scroll: Restore Scroll Position of Elements on Page Navigation — This means not only the <body> element’s scroll position can be restored, but any scrollable element.
1
canvas-size - Determine the maximum area, height, width, and custom dimensions of an HTML canvas element.

jhildenbiddle.github.io

canvas-size 2.0: Determine Max Area, Height, Width, and Custom Dimensions of HTML Canvases — The Canvas...
canvas-size 2.0: Determine Max Area, Height, Width, and Custom Dimensions of HTML Canvases — The Canvas element is broadly supported across browsers but there are differences in the size limitations, which this library can determine for you. GitHub repo.
2
https://killedbyapixel.github.io/TinyCode/games/CrossMyHeart/

killedbyapixel.github.io

Cross My Heart — This is an impressive playable 'demake' of arcade classic Frogger (or Crossy...
Cross My Heart — This is an impressive playable 'demake' of arcade classic Frogger (or Crossy Road, depending on your generation!) in just 256 bytes. You’ve got to get the 🖤 up the screen using your arrow keys.
2

~frontendfocus | Issue 631 - Just what *is* the best way to center a div? (16)

Domains

~frontendfocus | Issue 631 - Just what is the best way to center a div? (16)