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

Links

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

渐进增强“辩论”

🔗 https://nolanlawson.com/2016/10/13/progressive-enhancement-isnt-dead-but-it-smells-funny/
阅读评论

Nolan Lawson

我在我的演讲中有一张幻灯片写着

在 2016 年,构建一个没有 JavaScript 就不起作用的网站是可以的。

谴责来得既迅速又强烈。

Jeremy Keith 的回复

这种说法让人感觉这是一个二元选择:网站要么起作用,要么不起作用。这不是我建议的。我主张网站的核心功能(可以简单到阅读一些文本)应该可以在没有 JavaScript 的情况下使用(因为,让我们面对现实,这些核心功能不需要 JavaScript)。

听起来大多数人,包括 Nolan 和 Jeremy,都同意渐进增强不必将网站置于“启用了 JavaScript 并加载了,所以它起作用,或者没有启用或没有加载,所以它不起作用”的位置。它更细致入微,并且在网站的逐个功能的基础上发生。

这是一个容易达成共识的中立立场。但我认为这场辩论不断地反复出现是因为“二元”正日益成为事情的处理方式。JavaScript 未完全加载 = 白页一片。很多人说:哎呀。很多人说:无所谓。

jQuery 仍然相关吗?

🔗 http://developer.telerik.com/featured/is-jquery-still-relevant/
阅读评论

花了一分钟,但我相信我们在 jQuery 讨论中找到了“刚刚好”的答案。来自合奏演员博客文章的一些精选引言

Nathanael Anderson:如今,jQuery 最大的负面影响是浏览器在覆盖范围方面更加标准化,并且直接操作 DOM 速度很慢,除非你能一次性完成所有操作;而 jQuery 不是为大型更改组设计的。

Todd Motto:我的最后一句话:让我们不要劝阻 jQuery 开发人员停止使用它——它很棒,非常成熟且强大,它在“现代网络”中的位置已经发生了变化,仅此而已。5 年后,我们都会再次用错方法。

TJ VanToll:对我来说,jQuery 仍然是拥有优雅 API 设计和全面文档的库的金标准。虽然我如今可能不会在每个应用程序中都使用它,但我仍然发现它是与 DOM 交互并将强大的窗口小部件添加到我的应用程序中最简单的方法。

巧合的是,在 Nicholas C. Zakas 的新闻通讯中

我离开雅虎后不久遇到了一个前同事,当时他正准备加入一家新公司担任技术主管。在我们交谈期间,他提到他的首要任务是将他们切换到 YUI。该公司正在使用 jQuery,他说他真的不想使用它。我委婉地建议,也许,这不是一场他想要发动的战斗。他当然可以评估整体架构以查看将进行哪些改进,但在加入一家公司并试图让每个人都切换到他最喜欢的库或框架的情况很少是成功的公式。

当我加入 Box 时,我遇到了类似的情况,只是人们似乎认为我会尝试从前端消除 jQuery。我一次又一次地被问到,“你要去掉 jQuery 吗?”我的回答总是相同的:“不,jQuery 不会消失。但是,我想确保它在架构中的位置得到明确定义。”

只要你不会对其变得教条式,宣誓效忠于特定的技术或方法是可以的。

Yarn

🔗 https://yarn.npmjs.net.cn/
阅读评论

来自“没有预料到”新闻台

我们很高兴地宣布 Yarn 的开源发布,这是与 Exponent、Google 和 Tilde 的合作成果。使用 Yarn,工程师仍然可以访问 npm 注册表,但可以更快地安装软件包并在机器之间或安全的脱机环境中一致地管理依赖项。

Yarn 是一个新的包管理器,它取代了 npm 执行的部分功能……你可以用 npm 安装它。

所以,它更快。Dion Almaer

由于其缓存和并行处理方法等功能,你会很高兴看到速度的显著提升。

Yehuda Katz 是贡献者之一,他表示该项目的开源设置是其最大的资产之一

……Yarn 项目被设置为一个社区项目,在其自己的 GitHub 组织中使用标准的开源许可证,并设置为使用对 Ember 和 Rust 非常有效的治理模型。

……我认为技术细节次于项目建立发展的方式。

由于明显的优势、简洁的功能以及与无处不在的 npm 的兼容性,我想这个工具的使用将在短期内席卷全球。这里有一个方便的备忘单,用于命令(例如,npm install taco --save === yarn add taco)。

Yarn 不是 npm 的完全替代品。看起来 npm 仍然是目录、存储库以及发布和维护软件包的地方。

感受反应

🔗 https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.qg21fyxwe
阅读评论

Jose Aguinaga 触动了社区的神经

如果 JavaScript 社区认为任何人都能跟上这个节奏,那他们就疯了。

我听到了很多太搞笑了!太对了!的反应。我听到了很多不。情况并非如此。的反应,以及一些你不必使用/从每个工具开始。和这两个人(在这个虚构的对话中)有点混蛋。的反应。

一些“刚刚好”的反应包括Tim Kadlec和Addy Osmani。Sacha Greif 写信给我指出他大型调查的结果表明大多数 JavaScript 开发人员对该语言和生态系统非常满意。

错失的标题机会:“阅读‘2016 年学习 JavaScript 的感受’的感受”

蝉原则和 CSS

🔗 http://www.lottejackson.com/learning/nth-child-cicada-principle
阅读评论

Charlotte Jackson 使用这种经典的巧妙技巧来伪随机化 border-radius,为照片网格创建不规则的圆圈。

蝉是一种看起来相当阴森的小虫子。你可能听说过它们。有一种叫做周期蝉的蝉,它们每 7 年、11 年、13 年或 17 年就会同时大量出现;它们找到配偶然后死去。这不算什么好日子。

然而,有趣的是,这些数字都是素数。

Alex Walker 深入研究了这一点,并在 2011 年创建了一些很酷的演示,例如随机的非重复背景和无限的乐高小人变体。

这是一个由 yoksel 演示的结合了该想法和混合模式的演示

查看 yoksel 在 CodePen 上创作的笔 蝉原则背景 + background-blend-mode。(@yoksel)

不再使用 Normalize(CSS)。

🔗 http://shaunrashid.com/2015/09/15/normalize-css-no-more/
阅读评论

Shaun Rashid

……当我致力于构建响应式网站时,各种设备的不断增加改变了我们设计网站的方式,我回到了一个古老的陈述,该陈述回答了网站是否需要在每个浏览器中看起来完全相同的问题。通过对该问题的回答,我发现重置/规范化样式表已变得不必要。

我想知道不使用任何类型的重置有多流行?当你查看类似sanitize.css修复的内容列表时,其中大部分内容是针对我认为很多人都不会太担心的浏览器,考虑到如今大多数桌面浏览器的常青特性。然后删除有主观见解的内容和只有细微跨浏览器差异的内容,剩下的就不多了。

但我离不开这个

* {
  box-sizing: border-box;
}

响应式图像断点生成器

🔗 http://www.responsivebreakpoints.com/
阅读评论

我有罪,我使用响应式图像的方法是获取高分辨率图像并将其随机缩小几次,并将这些作为 srcset 图像。基本上与断点一样,我也可能犯下同样的“桌面”、“平板电脑”、“移动设备”思维错误。

那么,创建响应式图像的完美方法是什么?理想情况下,我们会发送任何设备所需的精确图像。如果设备/浏览器/设计组合需要图像宽度为 457px,在理想世界中,我们会向它发送一个 457px 宽的图像。但从很多方面(创建、存储、缓存)来看,为“每个可能的像素宽度制作一张图像”是不切实际的。

这里有一个折衷方案。响应式图像断点生成器表示

响应式网站,即使是最现代的网站,也常常难以选择最符合各种用户设备的图像分辨率。它们要么在图像尺寸上妥协,要么在图像数量上妥协。是时候解决这些问题,并开始更数学地计算图像断点,而不是随意地计算。

它需要诸如断点、分辨率需求、版本之间文件大小的合理变化以及图像本身等信息来创建达到这种折衷方案所需的所有图像(以及响应式图像标记)。

使用 CSS 形状进行重新设计

🔗 http://alistapart.com/article/redesign-with-css-shapes
阅读评论

CSS 形状就像如今渐进增强的完美示例。有点像border-radius。旧版浏览器有方形角!谁在乎呢!CSS 形状允许你以不规则的方式环绕文本——例如沿着circle()的路径。

Eric Meyer 在生产页面上使用了它,并展示了它的工作原理。以下是我从网站本身的 CSS 中获取的一些代码,显示它仅在支持的大屏幕上应用

@media only screen and (min-width: 720px) {

  @supports (shape-outside: circle()) {

    .single-page article .complex-content img.right {
      shape-outside: circle(150px at 170px 130px);
    }

  }

}

Jen Simmons 也有许多很棒的演示,展示了这一点。看起来shape-outside支持circle()、ellipse()、polygon()和url(),但尚不支持path()。

文本加载动画

🔗 http://tawian.io/text-spinners/
阅读评论

一个在 CSS 中使用基于文本的加载动画的巧妙想法。你在content中设置“关键帧”,并通过在实际的keyframes中将文本行向左移动来循环遍历它们。

<button>Loading <span class="loading"></span></button>
.loading.bar2::after {
  content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█";
  animation: spin8 2s steps(8) infinite alternate;
}
@keyframes spin8  { to { transform: translateY(-12.0em); } }

这是 Max Beier 创建的整个存储库。我在这里隔离了一个

查看 Chris Coyier 在 CodePen 上创作的笔 文本加载动画。(@chriscoyier)

Choreographer-js

🔗 https://github.com/christinecha/choreographer-js
阅读评论

Christine Cha 创建的一个新的动画库

一个简单的库,用于处理复杂的 CSS 动画。

您通过其 JavaScript API 定义动画,并通过 DOM 事件执行它们,然后通过应用内联 CSS 完成动画。

在我看来,它不太适合帮助构建复杂的 CSS 动画,而是用于通过 CSS 执行您无法以其他方式执行的动画,因为您无法在 CSS 中获取鼠标或滚动位置等信息。

Quick Hits

# 2024年8月23日
# 2024年8月21日
# 2024年8月14日
# 2024年8月14日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 119
  • 120
  • 121
  • ...
  • 219
  • 旧版

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

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

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

© 2024 . All rights reserved.