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

Links

来自网络的我们正在阅读的内容,以及我们的一些想法。 有什么链接我们应该知道吗? 告诉我们!

渐进式 Web 应用:长期游戏

🔗 https://remysharp.com/2016/03/18/progressive-web-apps-the-long-game
阅读评论

Remy Sharp 参加了 Google 的第一个渐进式 Web 应用活动

对我来说,最突出的是,少量的 JavaScript 代码和一些经过深思熟虑的代码,可以真正创建一个脱机优先的体验,不仅可以与它的原生对应物相媲美,而且在我看来,它远远超过了它们。 加载时间是即时的,对于一个 Web 应用来说,它是通过常规的 HTML、CSS 和 JavaScript 实现的。 它很快,并且所有功能都与连接无关。

使用 SVG 滤镜的漫画书 FX 字体

🔗 http://thenewcode.com/633/Boom-Wham-Pow-Comic-Book-FX-Lettering-with-SVG-Filters
阅读评论

关于如何使用 SVG 滤镜来 为图像设置样式 或 操纵形状 甚至 制作疯狂的动画 的内容已经有很多了。

但我最近没看到多少关于如何使用 SVG 滤镜为文本设置样式的内容。 谢天谢地,Dudley Storey 已经写了一篇 关于该主题的简洁介绍,展示了如何使常规字母看起来像来自插图漫画书的文本。 这是该系列的一部分,从 气泡 和 交错字母 开始。

分辨率独立像素插图

🔗 http://essenmitsosse.de/pixel/?showcase=true&slide=4
阅读评论

Marcus Blättermann 制作了一系列精美的插图,这些插图会根据浏览器窗口的大小(以及您的光标位置)进行调整。 确保在大屏幕上查看这些插图,以获得完整的视觉效果。

内容和显示模式与富有表现力的 CSS

🔗 http://johnpolacek.com/content-display-patterns/
阅读评论

John Polacek 考察了一些例子,这些例子表明可以使用小的实用程序 CSS 类来设计页面的布局,他将这种方法描述为“富有表现力的 CSS”

与其围绕内容模式创建 CSS,不如基于显示模式构建 CSS。 富有表现力的 CSS 是一种使用实用程序类的轻量级、可扩展的 CSS 编写方法,这些类易于编写和理解。

我不确定 John 是否是第一个提出“内容引用”这个词的人,但我喜欢它。 这就是 CSS 的一部分描述了内容,例如

<p class="event__location">Washington D.C.</p>

然后,我们使用该单个钩子在 CSS 中为所有内容设置样式

.event__location {
  border-top: 2px solid #eee;
  font-size: 23px;
  padding: 10px;
}

但 John 建议将这些样式分解成单独的模块,这些模块最终看起来可能像这样,其中相同的类可以在代码库的每个部分的不同模块中使用

<p class="grid-12 l-grid-6 l-border-right m-border-bottom s-border-bottom marg-2-bottom">Washington D.C.</p>

正如 John 所提到的,这并非编写 CSS 的一种新方法,但看到另一个开发人员如何随着时间推移和经验的积累而改变他们的编码风格,确实很有趣。

更多代码审查工具(在 GitHub 上)

🔗 https://github.com/blog/2123-more-code-review-tools
阅读评论

GitHub 改进了他们的代码审查工具

有效的代码审查可以在代码部署之前发现错误,提高代码一致性,并帮助培养新开发者。 我们正在添加新功能,使 GitHub 上的代码审查更快、更灵活。

其中一些功能包括一个方便的时间线指示器,用于显示您在审查拉取请求后可能错过的内容,以及一种按类型(例如,您可能只想要查看 CSS 文件)筛选拉取请求中的筛选器的方法。

没有 jQuery 的一年

🔗 http://blog.wearecolony.com/a-year-without-jquery/
阅读评论

Patrick Kunka 撰写了他关于在没有 jQuery 的情况下制作大型 Web 应用的实验

在我看来,ES6 在很大程度上是对 JavaScript 语言的急需的语法进步,而 jQuery 在很大程度上是一个具有漂亮设计的 API 的 DOM 操作库。 这两件事实际上没有太多共同点,所以我想写这篇文章的主要目的是证明您今天可以停止使用 jQuery——而且您不需要 ES6 或 Babel 来做到这一点。

也许我们可以降低 JavaScript 的使用量

🔗 https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/
阅读评论

Lexy Munroe 展示了 Twitter 对 JavaScript 的依赖所带来的十几个问题,这些问题本来可以通过某种渐进式增强来解决。 有时候,批评大公司是有用的,因为他们确实会影响其他应用程序如何选择做事。 这并不算欺负弱小。

零配置 React 静态站点生成器

🔗 http://jxnblk.com/writing/posts/zero-configuration-react-static-site-generator/
阅读评论

Brent Jackson 对 React 的巧妙运用

React 是一种使用基于组件的 UI 生成静态 HTML 的好方法。 使用 React 的最大障碍之一是开始使用它所需的样板代码和构建配置量。 我想让使用 React 构建静态页面变得非常简单,而且无需安装大量 npm 模块和配置 webpack。

显然只需使用这个疯狂性感简单易用的内容测试器

🔗 https://www.mapbox.com/blog/retext-mapbox-standard/
阅读评论

实际上,不要使用这些词中的大多数。

Mapbox 开源了他们用来自动审查所有文档的内容测试工具,retext-mapbox-standard.

将其视为一个迂腐的机器人,它确保我们写简单的英语,使用一致的术语,并避免使用不敏感的语言。

这个“自动吹毛求疵者”使用从 国家残疾人与新闻业中心、plainlanguage.gov 以及我们自己的 教育写作中避免使用的词语列表 等来源收集的清晰简洁写作规则。

职业日特辑:未来网页设计师

🔗 http://karenmcgrane.com/2016/03/04/career-day-special-with-a-future-web-designer/
阅读评论

Karen McGrane 回答了一个对网页设计感兴趣的八年级学生的提问,然后反过来问她问题。

Quick Hits

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

CSS-Tricks 由 DigitalOcean 提供支持。

随时了解 Web 开发

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

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律条款
  • 获取免费积分!
CSS-Tricks
  • 为我们写文章!
  • 在我们这里做广告
  • 联系我们
社交
  • RSS 提要
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.