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

Links

我们正在阅读的来自网络各处的文章,以及我们的一些想法。 有我们应该知道的链接吗?告诉我们!

Clarity 2016 年总结

🔗 http://codepen.io/chriscoyier/post/clarity-2016-wrapup
阅读评论

我对 Clarity 会议(最近关于风格指南的会议)的总结。 并非全面的笔记,只是我所共鸣的内容。

更快的 FT.com

🔗 http://engineroom.ft.com/2016/04/04/a-faster-ft-com/
阅读评论

来自金融时报团队的巧妙测试策略:他们使用阻塞 CSS来测试人们在面对网页加载缓慢时的行为。

我们想了解网站速度对用户参与度的影响,特别是阅读文章的数量,这是我们衡量成功的一项关键指标。 使用这些数据,我们希望量化对我们收入的影响。

如果你想阅读更多关于性能及其如何影响人们行为的有趣内容,请查看 WPO 统计 上的案例研究集。

ES6 模块加载:比你想象的更复杂

🔗 https://www.nczonline.net/blog/2016/04/es6-module-loading-more-complicated-than-you-think/
阅读评论

Nicholas Zakas

脚本和模块之间的差异非常细微,以至于开发人员很难理解提前声明 JavaScript 文件代表什么内容的限制。 我希望这篇文章能够澄清为什么不可能通过检查源代码来自动检测模块,以及为什么像 ESLint 这样的工具要求你在执行之前指定文件类型的一些原因。 未来,ES6 模块将成为主要的 JavaScript 文件类型,而脚本文件将只保留在遗留应用程序中,在那时,工具很可能会默认假设文件是模块。 与此同时,我们正在经历脚本和模块之间艰难的青春期,混合两者会有点痛苦。

CSS 包含

🔗 https://justmarkup.com/log/2016/04/css-containment/
阅读评论

Michael Scharnagl 解释了新的 contain 属性

如果你构建的是没有大量 DOM 节点和窗口小部件的简单网站,你可能不需要关心 CSS 包含。 另一方面,如果你构建的是更复杂的网站,CSS 包含将有助于优化性能。 为第三方窗口小部件设置 contain: strict; 也是一个好主意,以保护网站的性能。

弹性

🔗 https://www.youtube.com/watch?v=3aw6U2uVl0I
阅读评论

Jeremy Keith 在去年的 ColdFront 会议上的演讲,都是关于现代网络的脆弱性。 Jeremy 谈论了像 Javascript 这样的语言,它们具有“脆弱的错误处理模型”,以及为什么简单的标记与之相比更具弹性和更不容易出错。

他提出了成为网络良好公民的三个原则

  1. 识别网站的核心功能。
  2. 使用最简单的技术提供这些功能。
  3. 增强!

额外的会议演讲! 我们自己的 Sarah Drasner 在 ForwardJS Summit 上与 SVG 和 GreenSock 用于复杂动画 一起演讲。

介绍 React Storybook

🔗 https://voice.kadira.io/introducing-react-storybook-ec27f28de1e2
阅读评论

Arunoda Susiripala

使用 React Storybook,你可以在与应用程序分离的环境中开发和设计 UI 组件。 它将改变你开发 UI 组件的方式。

就像一个用于声明式 React 组件的模式库。

如何使用 SVG 图标

🔗 https://fvsch.com/svg-icons
阅读评论

来自 Florens Verschelde 的这份指南中提供了 SVG 图标系统的可靠基础知识,并结合了一些好技巧:双色技巧、预加载精灵,以及使用自定义属性实现无限的颜色变化。 另外,关于使用多种方法进行精灵插入的有趣内容。

我喜欢混合使用这两种方法,构建两个精灵。

  1. 一个包含基本图标的小精灵(例如,页面标题中使用的主要图标),在每个页面上内联。 目标大小:5KB 或更小。
  2. 一个包含项目所有图标的大精灵,作为外部文件保留。 目标大小:50KB 或更小。

算是“关键图标”。

为什么我不使用 CSS 预处理器

🔗 http://www.456bereastreet.com/archive/201603/why_i_dont_use_css_preprocessors/
阅读评论

Roger Johansson

我不认为 CSS 预处理器打算解决的“问题”足够严重到需要付出代价,即对我来说,解决方案比问题更糟糕。

支持预处理的合唱团的音量(我唱男高音)如此之大,我怀疑它淹没了相当一部分不喜欢使用它们的人。

不过,在令人惊讶的结局中,Roger 确实说他喜欢某些形式的 CSS 处理,但会直接在源 CSS 本身上进行。

你身后的矩形

🔗 https://medium.com/the-rectangle-behind-you/the-rectangle-behind-you-103179fcfc32#.b9u1xk210
阅读评论

去年,我观看了一场由 Marcin Wichary 关于他在 Medium 的工作的演讲,尽管他演讲的内容很有启发性、有趣且迷人,但我忍不住盯着他的幻灯片似乎是如何过渡和跳跃的。 在演讲的某个时刻,他劫持了一张幻灯片,开始输入值并移动周围的东西,我不知道他是怎么做到的。 是 Keynote 吗? 他自己制作了本地应用程序吗?

好吧,Marcin 在一篇名为你身后的矩形 的系列文章中详细记录了他的制作演讲的过程。 他的一些演讲使用 Node.js 在多个设备之间进行通信,而大多数演讲使用 HTML 和一些 JavaScript 将事物联系在一起。

我将分享我学到的大部分内容:从想法到代码。 也许它会激励你将你的演示文稿视为应用程序……即使你没有这样做,我希望你也能在一些帮助我在这些年里做出的一些清单和原则中找到有用的东西。

“也许是您从未听说过的 CSS 中最令人兴奋的开发成果”

🔗 https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/
阅读评论

Philip Walton 报道了 Houdini 的最新消息,这是一个新的 W3C 任务组,计划为开发人员提供低级浏览器 API。

最重要的是,想象一下,如果你可以使用任何 CSS 属性并确信它在每个浏览器中都能正常工作,并且完全相同,你的开发生活将会多么美好。 然后想想你在博客文章中阅读或在会议和聚会上听到的所有新功能——比如 CSS 网格、CSS 捕捉点和粘性定位。 想象一下,如果你今天就能使用它们,并且使用方法与原生 CSS 功能一样高效。 你只需要从 GitHub 获取代码即可。

这就是 Houdini 的梦想。 这就是该任务组正在努力实现的未来。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 较新
  • 1
  • ...
  • 126
  • 127
  • 128
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的新闻简报

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

© 2024 . All rights reserved.