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

Links

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

前端测试入门

🔗 https://www.javascriptjanuary.com/blog/getting-started-with-front-end-testing
阅读评论

Amy Kapernick 涵盖了前端开发人员可以并且应该进行的四种类型的测试

  1. 代码风格检查(有 ESLint 用于 JavaScript 和 Stylelint 和/或 Prettier 用于 CSS。)
  2. 无障碍测试(Amy 推荐 pa11y,我们还介绍了 Axe。)
  3. 视觉回归测试(Amy 推荐 Backstop,我们还介绍了 Percy。)
  4. 端到端测试(有 Cypress 以及 jest-puppeteer 之类的东西。)

Amy 在 24 ways 上发表了类似的内容,列出了 12 种不同的测试工具。

继续阅读 →

Autumn(macOS 窗口管理器)

🔗 https://apandhi.github.io/Autumn/
阅读评论

我喜欢它有多么的极客。 Autumn 允许你编写 JavaScript 来控制你的窗口。 获取此窗口,将其移到此处。 将此窗口稍微推一下。 有各种 API,例如键盘命令助手以及在事件上执行操作,例如从睡眠中唤醒。

我喜欢它的存在,但目前,我的窗口管理主要包括:抓取此窗口并将其扔到屏幕的左侧,然后抓取此窗口并将其扔到屏幕的右侧。 这些以及其他一些简单的事情被 Moom 处理得非常好。

继续阅读 →

设计波浪线

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

我认为我们都有一种直观的理解,即在需要我们创造力的项目的开始(无论是设计还是代码),事情都感觉不确定和混乱。 然后,随着我们进行,事情往往会变得井然有序。 仍然有一些波动和挫折,但到最后,我们会找到一个解决方案并发布它。

显然这种感觉有一个 logo:The Design Squiggle

继续阅读 →

揭穿神话:无障碍性和 React

🔗 https://www.deque.com/blog/debunking-the-myth-accessibility-and-react/
阅读评论

我发现当一家主要的无障碍性公司(如 Deque)的博客发布一篇名为 揭穿神话:无障碍性和 React 的文章时,这一点值得注意。 Mark Steadman 基本上说,如果一个网站的无障碍性很差,这与 React 无关......而是你。 工具就在那里,可以实现良好的无障碍性。

React 没有使用 <div></div> 来表示 <button></button>,而是你这样做的。 React 没有在你决定不使用 Fragment 时在页面上强制添加额外的标记。 React 没有忘记更改页面的标题,因为那是你忽略的事情。

继续阅读 →

为“无服务器”辩护——这个词

🔗 https://medium.com/serverless-transformation/in-defence-of-serverless-the-term-764514653ea7
阅读评论

Ben Ellerby:

就目前而言,至少对我来说,无服务器设法完成了一项艰巨的任务,它定义了我们可以在其中构建下一代架构的非常灵活和复杂的空间的边界。 如果没有同名的框架,它会有所帮助;如果人们没有首先听到它与 Lambda 同义,它会有所帮助;如果人们停止说“但是你知道有服务器......”它会有所帮助。 尽管如此,我还没有听到过更好的提议!

我喜欢这个词(我们有 整个网站 等等),但我不会解释原因,我会让 我所有推文中被点赞次数最多的推文 来解释。

继续阅读 →

波西米亚丑闻

🔗 https://sherlock.paravelinc.com/
阅读评论

我喜欢 Paravel 正在做很多很酷的事情,他们实际上是忘记了他们构建了 这个,现在才发布它。

这是一个福尔摩斯的故事,但设计得比屏幕上的文字更有趣、更身临其境(甚至有音频!)。

为什么我们有不同的编程语言?

🔗 https://shkspr.mobi/blog/2020/01/why-do-we-have-different-programming-languages/
阅读评论

“但为什么我必须学习 Python?” 她哀号着,“我喜欢 Scratch!”

“我知道,”我说,“但有不同的编程语言用于不同的任务。”

“这很愚蠢” 她说

我可以理解特伦斯·伊登故事中那个小女孩的心情。 在高中,我非常喜欢 Turbo Pascal。 我感觉我可以用它做很多事情。 然后我上了大学。 我上的第一门课是 Java,第二门课是汇编。 我记得我感到非常愤恨。 为什么我不能只用我已经熟悉的语言编程? 我花了四年时间这样想,然后换了专业。 现在我对我的语言飘忽不定更有冒险精神,但不是很厉害。

继续阅读 →

在 CSS 中重新创建《黑暗物质》的 logo

🔗 https://css-irl.info/recreating-the-his-dark-materials-logo-in-css/
阅读评论

文本 logo 在文本中有一条斜线。 你将两个副本叠加在一起,使用 clip-path 属性剪裁它们。

对我来说有趣的是,有多少很酷的设计效果需要多个副本的元素来实现。 为了获得额外的副本,至少对于文本来说,我们有时可以使用伪元素。 对于更复杂的内容,CSS 中有一个 element() 函数,但它仅限于 Firefox 中的前缀属性。 尽管如此,它还是可以实现很棒的东西,例如 制作长内容的小地图。

继续阅读 →

Water.css

🔗 https://kognise.github.io/water.css/
阅读评论

值得注意的是,Water.css 是 Louis Lazaris 的 Web Tools Weekly 在 2019 年点击次数最多的内容。 它来自一个名叫 Felix 的 13 岁开发者!

它只是一些你应用于无类语义 HTML 的 CSS,以使其具有不错的基本响应式样式——当你只是将一些标记放在一起并希望它看起来不错时,这是 笔 的完美之选。

2020 年你可以用浏览器做的事情

🔗 https://github.com/luruke/browser-2020
阅读评论

我编辑了很多关于网络的技术文章,作者往往会在他们的开头句子中非常宽泛,例如“近年来,我们在网络上能够做的事情有了很大的扩展”。

我倾向于删除这些内容,因为它们通常对文章没有帮助,尽管我理解这种情绪。 这太对了,浏览器能够做很多事情。 我们中的大多数人可能不知道浏览器可以做很多事情。

看看 Luigi De Rosa 的列表。 我敢打赌你们中的许多人并不知道浏览器可以做所有这些事情——推送通知! 原生分享菜单! 画中画!

这主要是 JavaScript 内容,以及一些 CSS。 值得注意的是,缺失的:HTML 中的任何内容。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速链接 →
  • 更新
  • 1
  • ...
  • 48
  • 49
  • 50
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注网络开发最新动态

使用我们精心制作的时事通讯

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

© 2024 . All rights reserved.