HTML, CSS, web platform, and browser tech news + demos, tricks, and tips every day (via the Frontend Focus newsletter). 👋 Curated by @chrisbrandrick.
🌐 Sign up for the newsletter
Joined August 2011
- Tweets9.6K
- Following219
- Followers54.6K
- Likes2.7K
Pinned Tweet
💌 A once–weekly roundup of the best #frontend news, articles and tutorials.
HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us/
Frontend Daily 🚀 retweeted
🛠️ New Interactive Article: Balancing Text In CSS
I explored text balancing in CSS — what it is, the problems it solves, how it works, and included plenty of examples and use cases. Happy balancing! ⚖️
ishadeed.com/article/balanci…
Frontend Daily 🚀 retweeted
All the videos from #SotB2024 are now available on the website.
2024.stateofthebrowser.com/s…
All videos are captioned and the pages contained transcripts
Frontend Daily 🚀 retweeted
📣 `CSSNestedDeclarations` is coming to browsers to improve CSS Nesting!
With this addition, declarations that come after style rules no longer shift up, among other improvements.
📝 web.dev/blog/css-nesting-css…
Available in Chrome 130 + Firefox 132 + Safari Technology Preview 204.
Frontend Daily 🚀 retweeted
A huge congratulations to all who joined this year's js13kGames competition. Winning games and rankings are now live! 🤩
Perfect weekend entertainment—all free, browser-based, ≤ 13kB, and with source for you to explore! js13kgames.com/2024/blog/win…
Frontend Daily 🚀 retweeted
📝 Feature detect Style Queries Support in CSS.
Awaiting browser support for `at-rule()`, here’s how you do it.
brm.us/style-queries-feature…
ALT Promotional screenshot of the code explained in the post.
Frontend Daily 🚀 retweeted
What’s the Difference Between HTML’s Dialog Element and Popovers?
They are pretty similar in both look and functionality, but are have some important differences, slightly different APIs, and functionality. The use cases are also a bit different, so let's have a look!
frontendmasters.com/blog/wha…
Frontend Daily 🚀 retweeted
`background-clip: text` is now supported cross-browser, unprefixed, in the shorthand.
But there are still bugs/ compat problems.
1⃣ `p` and `a` within both have `background-clip: text`. Firefox & Chrome produce different results if `a` has a stacking context trigger property‼️
ALT Screenshot. Shows that Chrome seems to ignore the clipped to text background of the paragraph containing the clipped to text link if this link has a property that causes it to form a stacking context.
Frontend Daily 🚀 retweeted
Introducing @bramus/style-observer, a MutationObserver for CSS.
It allows you to attach JavaScript callbacks to changes in computed values of CSS properties.
🔗 bram.us/2024/08/31/introduci…
ALT Logo for @bramus/style-observer
Frontend Daily 🚀 retweeted
🎂 Today Aug 26th, we are wishing a happy 18th bday to @jquery 1.0. The most popular javascript library by a mile and not close. It remains in the history books as a pivotal moment in web/developer history. As usual, sharing a few links as a reminder for all to enjoy:
🔸 As I mentioned, jQuery's popularity and use on the web is unrivalled. You can see the data from @HTTPArchive's 2022 web almanac
almanac.httparchive.org/en/2…
🔸 Of course, I took a look at what kind of performance the web has tracked re: sites using jQ. Per cwvtech.report:
🔹 ~7M sites. INP: 80%, LCP: 61%, CLS: 79%, CWV: 46%
lookerstudio.google.com/repo…
🔸 I always share this thread from a few yrs back after having a chat w/ @jeresig with little known gems about jQ -- or what almost became jSelect 👀
xitter.gq/HenriHelvetica/status/…
🔸 In 2011, John gave a very insightful talk at @FronteersConf on how things blossomed for jQuery. Some lessons that could apply today.
vimeo.com/32957711
🔸 John was also recently on the @syntaxfm podcast to discuss what he's doing at current:
youtube.com/watch?v=aE9mIWqC…
Anyhow, it's still very present on the web, and there's no shortage of jQ literacy appreciated as it's still actively maintained AND simply works. Per @cassidoo:
xitter.gq/cassidoo/status/182750…
Enjoy!
ALT a sheet of thick white stock paper with the jQuery logo on it, using the caption: "write less, do more."
Frontend Daily 🚀 retweeted
What Skills Should You Focus on as Junior Web Developer in 2024?
These are our recommendations for those of you early in your web developer journey. This is about tech and the real world stuff around it that you'll need.
frontendmasters.com/blog/wha…
Frontend Daily 🚀 retweeted
The State of CSS 2024 survey is now open! Learn more here dev.to/sachagreif/the-2024-s…
Frontend Daily 🚀 retweeted
🎨 A brief intro to `blocking=render`, and why on earth you’d want to make something render-blocking in the first place: csswizardry.com/2024/08/bloc…
Frontend Daily 🚀 retweeted
Safari Technology Preview 201 is now available with updates to CSS, DOM, JavaScript, Media, PDF, Rendering, SVG, Web Animations, and Web Extensions.
webkit.org/blog/15790/releas…
ALT Safari Technology Preview app icon on macOS Sequoia featuring a red and white compass needle over a purple background with white radial marks.
Frontend Daily 🚀 retweeted
My talk from @CSSDayConf is now public! youtube.com/watch?v=k_3pRxdv…
Frontend Daily 🚀 retweeted
📝 New Blog Post 📝
In this article, I share everything I learned to recreate a custom "Retro" style post-processing effect 📺
From dithering to replicating a CRT, I detail the many shader techniques that will elevate your next React Three Fiber project
blog.maximeheckel.com/posts/…
Issue 654 of Frontend Focus is out now: frontendfoc.us/issues/654
Frontend Daily 🚀 retweeted
Google says it won't be "deprecating third-party cookies" in Chrome and will instead keep working on "privacy-preserving alternatives" via Privacy Sandbox APIs (Digiday)
digiday.com/marketing/after-…
📫 Subscribe: techmeme.com/newsletter?from…
techmeme.com/240722/p15#a240…
Frontend Daily 🚀 retweeted
💡 CSS Tip!
Get the screen width and height using a few lines of CSS.
✅ Powered by @property (Now available in all the browsers)
✅ Unitless values so you can easily use them inside any formula
✅ Updates on screen resize (No need for JS)
@CodePen demo in the reply 👇
