跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

Links

来自网络各处我们正在阅读并有一些想法的内容。有没有我们应该知道的链接?告诉我们!

学习 CSS!

🔗 https://webdev.ac.cn/learn/css/
阅读评论

哇看看谷歌强大的 SEO 展示:学习 CSS! 这是实至名归的——这是很棒的内容。23 个章节带你了解 CSS 的所有基础知识,以及额外内容,如相关播客、互动示例,甚至还有测验,确保你记住你阅读的内容。

CSS 已经变成……一个真正的系统了吗?当然是的。

继续阅读 →

fit-content 和 fit-content()

🔗 https://www.quirksmode.org/blog/archives/2021/04/fitcontent_and.html
阅读评论

这里是来自 PPK 的一些硬核深度 CSS 极客内容。如果你能理解min-content(基于其包含的内容,元素可以达到的最小尺寸)和max-content(元素内容可以将其撑大的最大尺寸),那么理解fit-content就只需要多迈一小步了。正如 PPK 所说,它是以下内容的简写

.box {
  width: fit-content;

  /* ... is the same as ... */
  width: auto;
  min-width: min-content;
  max-width: max-content;
}
继续阅读 →

不起眼的 `img` 元素和核心 Web 指标

🔗 https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/
阅读评论

Addy Osmani 关于 HTML 中的图像

不起眼的 <img> 元素多年来获得了一些超能力。鉴于它在网络图像优化中的核心地位,让我们了解一下它可以做什么以及它如何帮助改善用户体验和 核心 Web 指标。

继续阅读 →

Euismod

🔗 https://www.euismod.dev/
阅读评论

一个用于学习网格语法的交互式工具,由 Etesam Ansari 创建。在“学习”部分,它会教你一些概念(涉及网格语法的多个部分),然后会给你一个任务,通过填写正确的语法来完成。我分享它是因为我认为这种方式确实能让人们理解——我知道Flexbox Froggy就是这样做的。一旦你了解了可能性,记住所有细节也无可厚非,这就是我们的指南存在的意义:我们为弹性盒和网格提供了指南。生成器也可能非常有用,例如 Sarah 的网格生成器。

题外话:我想知道Euismod是什么意思。谷歌建议它是拉丁语,意思是性能。

2021 版 CSS 布局开发者工具

🔗 https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/#%F0%9F%9A%B2
阅读评论

陈慧静介绍了开发者工具的一些最新变化

Firefox 的网格检查器从一开始就功能非常齐全,并且 与 Firefox 52 中的 CSS 网格一起发布。从那以后,它一直在不断改进。Chrome 在 Chrome 62 中添加了一个基本的网格检查器工具 ,允许开发人员使用网格布局突出显示元素,但更强大的功能是 仅在 Chrome 87 中添加。现在,Webkit [原文如此] 也加入了这场盛宴,Safari 技术预览版 123 也添加了网格检查功能 。

你一定会喜欢的。开发者工具对前端开发人员如何思考、构建以及当然还有调试网站产生了巨大的影响。例如查看带编号的网格线在视觉上就非常重要。我已经厌倦了在脑海中计算我想放置内容的行/列,非常感谢。

我可以在周末构建这个

🔗 https://world.hey.com/joaoqalves/i-could-build-this-during-the-weekend-aa093c5e
阅读评论

你听到过多少次这句话(甚至在心里默念过)?我知道我在谈话中听到过。我也知道我曾经对一两个产品产生过同样的疑问——嘿,这里的想法非常简单,让我们找几个朋友一起做同样的事情,但做得更好!

我喜欢 João 在这里提出的观点。他提醒我们,应用程序或 SaaS 的核心用例通常像听起来一样简单。但是,正是缺乏“二阶思考”阻止了我们理解幕后的复杂性

  • 团队人手不足,被迫做出让步了吗?
  • 项目是否以瀑布式管理,导致一些想法未能进入发布版本?
  • 是否有时间限制影响了项目的走向?
  • 预算不足以负担特定功能吗?
  • 团队内部是否存在不和谐?

我们看不到产品背后的许多东西。João 在解释为什么像 Uber 这样的公司需要数百名移动应用程序开发人员时非常清楚地表达了这一点。他们并非是为了支持最初的用例而存在的;他们的职责是解决二阶因素,并希望以尽可能降低复杂性的方式与系统的其余部分一起扩展。

继续阅读 →

从 Parcel 迁移到 Snowpack

🔗 https://benfrain.com/migrating-from-parcel-to-snowpack-build-tool-comparison/
阅读评论

我发现构建工具非常有趣,尤其是在现在这个激动人心的下一代过渡时期,有 Vite、wmr、Snowpack 和 esbuild 等参与者。Hugh Haworth 对新参与者进行了很好的概述,我们还在 ShopTalk 上讨论过它们几次时间。我特别喜欢人们记录他们迁移构建工具的个人经历,就像Ben Frain 所做的那样。

这不像购买新车,新车更快,但它们都有方向盘、车门和刹车踏板等等。它们之间的一个共同点是,它们都试图在本地提供 DX 并在生产环境中提供 UX(通过性能)——否则它们的方法、提供的功能以及期望的功能都大不相同。

继续阅读 →

我可以通过电子邮件……

🔗 https://email.caniuse.cn/
阅读评论

虽然我 85% 确定你已经看过并使用过Can I Use…,但我敢打赌,你只有 13% 的可能性看过并使用过Can I Email…。它们的感觉是一样的——提供网络平台功能的详细支持信息——只不过它不是提供网络浏览器的支持信息,而是电子邮件客户端的支持信息。Campaign Monitor 也 长期维护着一份指南,但我承认我喜欢 Can I Use… 首创的设计风格。

继续阅读 →

显然,你可以使用 Route53 作为速度极快的数据库

🔗 https://betterprogramming.pub/apparently-you-can-use-route53-as-a-blazingly-fast-database-dd416b56b005
阅读评论

Route53 是 AWS 提供的 DNS 管理服务。DNS 绝对不是数据库,但这里有Nicholas Martin 写的一些非常巧妙的技巧,这些技巧最初是由Corey Quinn完成的

仔细想想,DNS 配置实际上是一个非常基本的 NoSQL 数据库。你可以随时通过域名提供商的网站轻松查看和修改它,并且可以像查看数据库表中的行一样查看每个“记录”。

许多服务使用 DNS TXT 记录来验证域名所有权。你基本上会添加或修改一个 TXT 记录来存储键/值对,然后服务会查询该记录。

为什么?因为它速度超快,并且每次查询的费用为 0.50 美元 + 每百万次查询 0.40 美元。

甚至还有库(ten34、diggydb)可以帮助你做到这一点。我不会仅仅因为害怕亚马逊不喜欢它而将其关闭就使用它。此外,你知道,它并没有身份验证。

进度延迟即进度被拒绝

🔗 https://infrequently.org/2021/04/progress-delayed/
阅读评论

本周的重磅文章来自 Google/Chrome 的 Alex Russell。Alex 长期以来一直非常批评苹果,特别是关于在 iOS 上除了 Safari 之外根本没有其他浏览器选项。这篇文章不仅仅是关于此事的挥拳,而是一篇论文,指责苹果通过 Safari 的缓慢发展和没有网络应用程序的 App Store 对网络平台造成了真正的伤害。

继续阅读 →

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 15
  • 16
  • 17
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费积分!
CSS-Tricks
  • 为我们撰写文章!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.