Plus share your thoughts on CSS in 2024. |
👋 Hey! Hope you’re doing well. I’m back after a week away in Germany, and as such, usual service resumes. Let’s get to it.
__
Chris Brandrick, your editor
Together with
🚀 Frontend Focus
#657 — August 28, 2024 | Read on the web
The State of CSS 2024 Survey — The increased pace of evolution in the CSS space seems to show no signs of slowing, as such we can now do so much more than we could just a few short years ago (be that advanced math, scroll-triggered animations, etc). As such, this recently launched survey — which covers things like layout, color, typography, accessibility, and more — plays an important role in letting browser vendors know what we all think about the path CSS is taking. Be sure to fill it out, and tell em we sent ya. 😉
Devographics
How to Make Your Web Page Faster Before It Even Loads — Can we measure the events that happen before the first byte of a web page is received by the browser, and in turn optimize them to make our web pages and apps load even faster?
Salma Alam-Naylor
Front-End System Design — Learn to create scalable, efficient user interfaces in this extensive video course by Evgennii Ray. Explore the box model, browser rendering, DOM manipulation, state management, performance and much more.
Frontend Masters sponsor
Can You Convert a Video to Pure CSS? — Can or should..? A highly detailed exploration of using scroll-based animations as a way to play video as just CSS. David has also made a neat browser-based tool for converting any video into a pure CSS keyframe animation ready to be dropped into your site.
David Gerrells
blocking=render: Why Would You Do That?! — Harry stresses that unless you know you need this behavior, you don’t need it.
Harry Roberts
⚡️ Quick Links
-
😉 jQuery, everyone’s favorite JavaScript library, turned 18 earlier this week.
-
📱 The UK gov is carrying out an investigation around mobile browsers and browser engines, however Alistair highlights how Apple could “follow the proposals whilst violating their intention”.
-
🖼️ Public Work is a neat site that allows you to search over 100,000 copyright-free images from The MET, New York Public Library, and more.
-
✏️ Instead of leaving a comment under a blog post, why not draw your response?
📙 Tutorials, Articles & Opinion
Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations — It’s still a touch early to truly adopt these two features (only Chrome and Edge have full support today), but it can’t hurt to explore both Anchor positioning and scroll-driven animations to get an overview of just what could be done in the near future – it’s a nifty effect!
Temani Afif
🙈 Spoiler Alert: It Needs to Be Accessible — Here’s what Scott would expect from a would-be spoiler component, “if someone were to build one, or if one were to ever be standardized”.
Scott O’Hara
Increase Library Adoption with Interactive Coding Tutorials — TutorialKit enables you to create interactive tutorials instantly without building or managing any backend infrastructure.
StackBlitz sponsor
Basic Keyboard Shortcut Support for Focused Links — Turns out there’s a lot of different actions you can perform via the keyboard when an anchor element is focused.
Eric Bailey
Double Your Specificity with This One Weird Trick — A bit of a hack, sure, but by doubling up the relevant selector(s) you can boost your specificity without resorting to overrides or using !important.
James Nash
Five WASM Use Cases for Frontend Development — WebAssembly is gaining ground in frontend development, so how should you consider applying it?
Eleanor Hecks
Elastic Overflow Scrolling — Creating a CSS-only “rubber band” scrolling effect.
Dave Seidman
Common Misconceptions About How to Optimize LCP
Brendan Kenny
What Skills Should You Focus on as a Junior Web Developer in 2024?
Frontend Masters
🔧 Code, Tools & Resources
Tagger: Zero Dependency, Vanilla JavaScript Tagging Library — You can play with a live demo here.
Jakub T. Jankiewicz
Web Vitals: Chrome Extension for Instant Feedback on Loading, Interactivity and Layout Shift Metrics — Includes support for all of the Core Web Vitals.
Addy Osmani
Extensible JavaScript Builder for Surveys and Forms — Streamline form management in your JS app with SurveyJS—fast, secure, and code-free.
SurveyJS sponsor
Replace Twitter (X) Embeds with Semantic HTML — A Python script for converting a public Tweet into embedded, semantic HTML.
Terence Eden
The Monospace Web — A well formed, minimalist CSS design exploration, featuring lists, tables, charts, ASCII drawings, etc.
Oskar Wickström
Fuite 5.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that you can point at a URL to analyze for memory leaks. Here’s how it works. There’s also a video tutorial.
Nolan Lawson
Milkdown: Plugin-Driven WYSIWYG Markdown Editor Framework — A lightweight WYSIWYG Markdown editor based around a plugin system that enables a significant level of customization. It’s neat to see the docs are rendered by the editor itself. GitHub repo.
Mirone
heic-to: Convert HEIC/HEIF Images to JPEG or PNG In-Browser — HEIF is a modern container format for storing images but is frequently unsupported by many tools, so converting supplied HEIF images to more popular formats could be useful.
Hopper Gee
RoundtableJS: A JavaScript Library for Building Complex Surveys, Forms, and Data Annotation Tasks
roundtableAI
Time Picker: A Date/Time Picker Component Built with React and shadcn/ui
OpenStatus
📰 Classifieds
Blacksmith runs GitHub Actions up to 2x faster at half the cost with a one-line change. Trusted by 100+ companies like GitBook and Slope.
Boost your PostgreSQL skills with Redgate’s 101 webinar series of easy-to-follow, expert hosted sessions. It’s PostgreSQL, simplified.
📬
Got a new email address? You can change your email here.
Bored of us? Click here to stop getting this newsletter.
另外，请分享您对 2024 年 CSS 的想法。
👋 嘿！ 希望你一切顺利。我离开德国一周后回来了，因此，正常的服务恢复了。 让我们开始吧。
__
克里斯·布兰德里克，你的编辑
连同
[](https:// frontendfoc.us/link/158986/bb16deca26)
🚀 前端 焦点
#657 — 2024 年 8 月 28 日 | 网上阅读
[](https://frontendfoc.us/link/158988/bb16deca26 ）
CSS 2024 年状况 调查 — CSS 领域不断加快的发展步伐似乎没有放缓的迹象，因此，我们现在可以做的事情比几年前要多得多（例如高等数学、滚动触发的动画等）。因此，这项最近启动的调查——涵盖布局、颜色、排版、可访问性等——在让浏览器供应商了解什么方面发挥了重要作用我们都在思考 CSS 正在走的路。 请务必填写，并告诉他们我们已发送给您。 😉
地形学
如何让你的网页在加载之前更快 - 我们可以测量在第一个字节之前发生的事件吗？浏览器接收网页，然后对其进行优化以使我们的网页和应用程序加载速度更快？
萨尔玛·阿拉姆-内勒
前端系统设计 — 在 Evgennii Ray 的这个内容丰富的视频课程中学习如何创建可扩展、高效的用户界面。探索盒模型、浏览器渲染、DOM 操作、状态管理、性能等等。
前端大师赞助商
Can You Convert a Video to Pure CSS? — 可以或 应该..? 使用基于滚动的动画的高度详细的探索作为一种像 CSS 一样播放视频的方式。 David 还制作了一个基于浏览器的简洁工具，用于将任何视频转换为纯 CSS 关键帧动画，随时可以将其放入您的网站中。
大卫·格勒尔斯
blocking=render：你为什么要这样做？！ - Harry 强调除非你知道你需要[这种行为](https ://frontendfoc.us/link/158994/bb16deca26），您不需要它。
哈里·罗伯茨
⚡️ 快速链接
-
😉 jQuery，每个人最喜欢的 JavaScript 库，本周早些时候 18 岁生日。
-
📱 英国政府正在针对移动浏览器和浏览器引擎进行开展调查，但阿利斯泰尔强调苹果如何“*遵循这些提案，同时违反其意图” *”。
-
🖼️ 公共作品 是一个简洁的网站，可让您搜索来自 MET、纽约公共图书馆等的超过 100,000 张无版权图像。
-
✏️ 与其在博客文章下留下评论，为什么不画出你的回应？
📙 教程、文章和意见
[](https://frontendfoc.us/link/159000/bb16deca26 ）
使用锚点定位和滚动驱动动画的自定义范围滑块 — 真正采用这两个功能仍然是一个“接触”早期（仅限 Chrome）和 Edge 今天已得到全面支持），但探索 锚定定位 和 [滚动驱动动画](https://frontendfoc. us/link/159002/bb16deca26）来大致了解在不久的将来可以做什么 - 这是一个很棒的效果！
特马尼·阿菲夫
🙈 剧透警报：需要可访问 — 这是 Scott 对潜在剧透组件的期望，“如果有人要建造一个，或者是否要标准化”。
斯科特·奥哈拉
通过交互式编码教程提高库的采用率 — TutorialKit 使您能够立即创建交互式教程，而无需构建或管理任何后端基础设施。
StackBlitz 赞助商
焦点链接的基本键盘快捷键支持 - 结果是，当锚元素时，您可以通过键盘执行很多不同的操作是专注的。
埃里克·贝利
用这个奇怪的技巧使你的特异性加倍 - 当然，有点黑客，但通过加倍相关的选择器）您可以提高您的特异性，而无需诉诸覆盖或使用 !important。
詹姆斯·纳什
前端开发的五个 WASM 用例 — WebAssembly 正在获得进步前端开发基础，那么您应该如何考虑应用它？
埃莉诺·赫克斯
弹性溢出滚动 — 创建纯 CSS“橡皮筋”滚动效果。
戴夫·赛德曼
关于如何优化 LCP 的常见误解
布伦丹·肯尼
2024 年作为一名初级 Web 开发人员应该关注哪些技能？
前端大师
🔧 代码、工具和资源
Tagger：零依赖、Vanilla JavaScript 标记库 — 您可以在此处进行现场演示 /link/159015/bb16deca26）。
雅库布·T·扬凯维奇
Web Vitals：用于对加载、交互性和布局转换指标进行即时反馈的 Chrome 扩展程序 — 包括对所有核心 Web Vitals 的支持。
阿迪·奥斯马尼
用于调查和表单的可扩展 JavaScript 生成器 — 使用 SurveyJS 简化 JS 应用中的表单管理 — 快速、安全且无需代码。
SurveyJS 赞助商
用语义 HTML 替换 Twitter (X) 嵌入 — 用于将公共推文转换为嵌入式语义 HTML 的 Python 脚本。
特伦斯·伊登
[](https://frontendfoc.us/link/159019/bb16deca26 ）
The Monospace Web — 一个结构良好、简约的 CSS 设计探索，以列表、表格、图表、ASCII 绘图等为特色。
奥斯卡·维克斯特罗姆
Fuite 5.0：在 Web 应用程序中查找内存泄漏的工具 — 一个 CLI 工具，您可以指向 URL 来分析内存泄漏。 其工作原理如下。 还有视频教程。
诺兰·劳森
Milkdown：插件驱动的 WYSIWYG Markdown 编辑器框架 — 一个基于插件系统的轻量级 WYSIWYG Markdown 编辑器，可实现显着级别的自定义。很高兴看到文档是由编辑器本身呈现的。 GitHub 存储库
米罗内
heic-to：在浏览器中将 HEIC/HEIF 图像转换为 JPEG 或 PNG — [HEIF](https://frontendfoc.us /link/159044/bb16deca26）是一种用于存储图像的现代容器格式，但许多工具通常不支持，因此将提供的 HEIF 图像转换为更流行的格式可能会很有用。
霍珀·吉
RoundtableJS：用于构建复杂调查、表单和数据注释任务的 JavaScript 库
圆桌人工智能
时间选择器：使用 React 和 shadcn/ui 构建的日期/时间选择器组件
打开状态
📰 分类广告
Blacksmith 只需一行更改，即可将 GitHub Actions 的运行速度提高 2 倍，成本降低一半。受到 GitBook 和 Slope 等 100 多家公司的信赖。
通过 Redgate 的 101 网络研讨会系列 的易于理解的专家主持的会议来提高您的 PostgreSQL 技能。它是 PostgreSQL，经过简化。
📬
发布者