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

Links

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

用网络作画

🔗 https://matthiasott.com/notes/painting-with-the-web
阅读评论

Matthias Ott,比较画家格哈德·里希特(Gerhard Richter)的绘画方式(做一些事情,退后一步,看看)与网站构建过程以及可能破坏它的因素

[...] 这让我想起了为 Web 设计和构建:不可预测性、材料的特殊性、即兴创作、错误、意外的惊喜。不过,有一个关键的区别。通过使用静态线框图和静态布局,通过分离设计和开发,我们往往限制了与 Web 及其材料进行创造性对话的能力。

喜欢这个。我一直认为,将模型直接转换为代码,虽然以其自身的方式很有趣,但这是一项左脑任务,并且不会像在设计工具中玩耍或在构建时在代码中玩耍一样鼓励创造力,而没有特定的想法在你这样做的时候。当你的大脑处于将一个地方(模型)看到的东西在另一个地方(代码)体现出来的模式时,你不会像那样完全重新定位事物并进行大胆的更改。

设计不足的响应式表格

🔗 https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html
阅读评论

我第一次在博客中谈到了响应式数据表格,是在 2011 年。当响应式网页设计首次成为潮流时,有一些像数据表格这样的障碍需要克服。<table> 元素的本质在于,它们具有一定的最小宽度,具体取决于它们包含的内容,并且很容易超过小型屏幕设备的宽度。

我当时制作的这张图片仍然很好地涵盖了这个问题

继续阅读 →

超小图标

🔗 https://github.com/edent/SuperTinyIcons
阅读评论

一堆 SVG 图标(流行的东西)全部小于 1KB。SVG 非常适合代码高尔夫。

我本来想添加一个 CodePen 徽标,但那里已经有一个 375 字节的徽标了。我有一个 208 字节的徽标,基于几年前 David DeSandro 为我们做的徽标更新。

Tailwind 与 BEM

🔗 https://thoughtbot.com/blog/tailwind-versus-bem
阅读评论

Eric Bailey 撰写了一些真正令人耳目一新的技术比较文章。就像,你知道,生活中的一切,我们不必讨厌或热爱一切。我常说,要像“小熊”一样思考。有利有弊。这里的每个要点都经过深思熟虑且有效。我真的很喜欢每个部分中的第一个要点,所以我会在这里引用它们作为示例

继续阅读 →

核心 Web 指标炒作列车

🔗 https://sylormiller.com/posts/2020/core-web-vitals/
阅读评论

Katie Sylor-Miller 的一些“小熊”思考

我对核心 Web 指标的兴奋感伴随着健康的怀疑态度。我还没有确信最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS) 是所有网站都应该衡量自己的正确指标。我担心,将核心 Web 指标纳入 SEO 评分而对其给予过度的重视,会导致开发人员只关注这三个数字,而没有真正理解它们的含义,更重要的是,它们不代表什么。

继续阅读 →

Graphery SVG

🔗 https://www.graphery.org/svg/
阅读评论

我之前比较过 SVG 和 Canvas。如果你试图在这两者之间做出选择,请阅读那篇文章。我想说,它们之间最主要的差异是矢量(SVG)与光栅(Canvas)。但第二个差异是如何使用它们。SVG 是声明式的,也就是说,通过属性和内容表达其含义的文字元素。Canvas 是命令式的,也就是说,你编写脚本指令供其遵循。

Canvas 是一个 JavaScript API,因此它可能与 JavaScript 开发人员或 UI 以其他方式基于 JavaScript 构建的环境很好地配合使用。但 SVG 位于 DOM 中(并且具有 DOM),而 DOM 也具有 API!这意味着如果你愿意,你可以编写 SVG 脚本。只是,可以说,这并不是特别方便。我刚刚看到了Graphery SVG,这显然是为了解决这个问题。

继续阅读 →

CSS 中缺少什么?

🔗 https://whatsmissingfromcss.com/
阅读评论

来自CSS 状态的调查结果尚未公布,但他们创建了此登陆页面,随机显示一个人回答该问题的答案。只是不停地点击刷新按钮,我感觉最常见的答案是

  • 容器查询
  • 父选择器
  • 嵌套
  • 一些非常奇怪且毫无意义的东西,让我对人们感到好奇

Firefox 83

🔗 https://mdn.org.cn/en-US/docs/Mozilla/Firefox/Releases/83
阅读评论

更改日志中有一行很小的内容,对 CSS 来说是重大新闻

我们添加了对CSS 锥形渐变的支持(错误 1632351) 和(错误 1175958)。

🎉🎉🎉

锥形渐变是圆形的,就像它们的径向对应物一样,但颜色停止点位于圆形周围而不是圆形的中心。

继续阅读 →

跳出框框思考 CSS 网格

🔗 https://frontend.horse/articles/thinking-outside-the-box-with-css-grid/
阅读评论

来自 Alex Trost 的精彩教程(基于一些演示,例如 Andy Barefoot 的这个),展示了虽然 CSS 网格在横向和纵向上具有直线网格线,但你可以将项目放置在网格线上,从而创建看起来非常棒的交错效果。类似网格,但由于交错,它似乎与对角线而不是水平线和垂直线对齐。并且你仍然可以获得网格的所有灵活性!

继续阅读 →

Upptime

🔗 https://github.com/upptime/upptime
阅读评论

GitHub Actions 就像免费的电脑。

好吧,有定价,但即使是免费计划每月也能获得 2000 分钟。你可以编写配置文件来指定你希望这些电脑执行的操作。这些配置文件会放入存储库中,因此它们通常会执行特定于该存储库的操作。我相信 CI/CD 是 GitHub Actions 使用的大多数情况。也就是说,运行你的测试并部署你的代码。这绝对太棒了。

但就像我说的,GitHub Actions 是电脑,所以你可以让它们运行任何你喜欢的代码。(我确定你受 EULA 条款的约束,但你知道我的意思。)就像每个人最喜欢的无服务器函数一样,GitHub Actions 可以执行相同的事情。想运行构建过程吗?访问 API?优化图像?截取 URL 的屏幕截图?都可以。大多数操作都与特定的事件相关联,例如“当我提交到分支时运行此代码”或“针对此拉取请求运行此代码”。但你也可以根据cron 计划安排它们。

因此,你每月可以免费使用一台电脑 2000 分钟,并且可以按计划运行。我相信这将培养一些非常有趣的创造力,尤其是在 GitHub Actions 是一个市场的情况下。请允许我谈谈这篇文章的标题……我发现Upptime 是所有这些功能中非常巧妙的用法。你基本上可以获得一个免费的可配置的正常运行时间监视器,用于你想要的任何内容。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 24
  • 25
  • 26
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.