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

Links

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

汉堡派对的承诺

🔗 http://kosamari.com/notes/the-promise-of-a-burger-party
阅读评论

Mariko Kosaka 以一个精心制作的精彩比喻。

什么是 JavaScript 中的 Promise? 这就像你去餐厅点汉堡和奶昔一样。 餐厅需要准备你的食物,所以你付款后,会得到一个带有蜂鸣器的托盘。 托盘就是 Promise。

使用 Service Workers 实现“离线保存”

🔗 https://una.im/save-offline/
阅读评论

Una Kravets 关于使用 Service Workers 缓存资产和单独请求的文章以供离线阅读的简单教程。

我很好奇最佳实践会变成什么。 询问用户点击某些东西可能是它。 还有可能:根据最近发布的文章、当前正在查看的文章或与当前正在查看的文章相关的文章来被动缓存文章。

针对对 Progressive Web Apps 一无所知的组织的实用 Progressive Web Apps 指南

🔗 http://recordssoundthesame.com/blog/2017/01/27/a-practical-guide-to-pwas/
阅读评论

Sally Jenkinson

Progressive Web Apps(有时简称为 PWAs,因为科技界中的所有事物都需要缩写)是网站遵循特定方法,并满足特定技术标准的概括性术语。 名称中的“app”并非偶然 - 这些内容共享您在原生体验中会发现的大部分功能 - 但实际上,它们只是网站。

这就像您构建了一个**非常出色**的网站,因此您可以在移动设备上拥有一个主屏幕图标。 并且“出色”由性能和渐进增强来定义。

当您听到人们说“我希望网络获胜”时,他们通常的意思是“我不想让网络输给专有应用程序开发”。 PWAs 看起来是朝着让网络应用程序在移动设备上不再是二等公民迈出的早期一步。 也许未来原生应用程序开发**就是**网络开发。

免费、更快。

🔗 https://ethanmarcotte.com/wrote/free-faster/
阅读评论

Ethan Marcotte,关于时间和预算受限的组织网站

在他们工作紧迫性和资源规模之间,花费数月时间进行全面重新设计是他们负担不起的。 鉴于此,例如,WordPress 的免费主题可以产生相当大的价值,特别是对于预算受限的组织。 他们可以更快地启动他们的重新设计,并继续接触到最需要他们信息的人。

因此,Ethan 查看了许多免费主题,以便至少可以在那里做出负责任的选择,并发现

结果令人惊讶:在 3G 连接下,我测试的较慢的主题需要 45-90 秒才能显示任何内容。 换句话说,页面在大约一分钟后才能**使用**。

非常糟糕。

我发现特别可怕的是,这些只是空的主题。 我通常将此类网站(现成的,在上面添加 CMS)的缓慢归因于主题之上发生的事情。 例如,上传太多/太大图像以及安装数百万个加载自己的资源集的插件。

我认为它以一种新的方式展示了最近的技术:拯救我们自己。 HTTP/2 使连接资源不再那么重要,这**拯救了我们自己**以及数百万个独立 CSS 和 JavaScript 文件的插件。 WordPress 默认情况下使用响应式图像 by default,这**拯救了我们自己**并确保我们不会加载比我们需要的更多的图像。 AMP 作为一项技术,正在说你们在这里已经迷路了,我们需要拯救你们自己。

将 SVG 图标与文本对齐并告别字体图标

🔗 https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
阅读评论

Elliot Dahl

在 Pivotal,我们使用 React 创建了一个 SVG 图标系统,供我们的产品套件使用。 本文介绍我使用 CSS 样式化 SVG 图标系统的方案,使其易于使用且高效。

对齐和图标(任何类型的图标)可能永远都有些棘手。 它取决于每个网站都会不同的两个因素:字体和图标。 Elliot 能够通过使用 bottom: -0.125em; 将图标向下拉来实现 与 Arial 的完美对齐,因为 Arial 沿着基线对齐,而图标本身是在边缘周围设计了 12.5% 的白色空间。 在边缘设计 SVG 图标周围的空间(尽管对于对齐来说很烦人)是一种相当常见的做法,因为如果没有空间,您可能会在某些浏览器/分辨率/缩放/等(抱歉,我没有更多细节)中遇到边缘的尴尬裁剪。

Clearfix hack 的终结?

🔗 https://www.rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/
阅读评论

Rachel Andrew 对 display: flow-root; 做出了清晰(明白了吗?!)的解释,包括比较旧技术和新技术的演示。 显然,这个名字仍然有点 悬而未决。

它的重点是摆脱 clearfix(尽管它 有点不同),或者使用不同的/非预期的属性进行浮动清除。 每当提出这个问题时,总会有一个**实际上**关于 overflow: hidden; 如何执行相同操作(或任何其他创建新块级格式化上下文的属性)。 就像我们 之前提到过的那样,溢出具有与浮动清除完全无关的后果,例如 隐藏阴影。 所有其他方法都有无关的后果。

英雄图案

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

Steve Schoger 的项目

一个可重复的 SVG 背景图案集合,供您在数字项目中使用。

可定制的图案。 您甚至可以 获取路径数据 供您自己使用。

UI 设计中的颜色

🔗 https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e
阅读评论

Erik D. Kennedy

那么,如果色彩理论没有为 UI 设计中的颜色提供坚实的基础,那么什么提供了呢? 让我给您一个意见:颜色修改。 正是颜色的调整很重要,而不是从色彩理论帽子中选择它们。

Ahmad Shadeed 与 一些类似的思考和例子。

使用 WebSockets 和 CSS 创造奇迹

🔗 https://medium.com/outsystems-engineering/making-magic-with-websockets-and-css3-ec22c1dcc8a8
阅读评论

喔,喔,这是一个使用 CSS 的技巧。

香蕉的 Tinder

🔗 https://github.com/surma/tinderforbananas.com
阅读评论

我前几天看到 Das Surma 发布的这个小型网络应用程序(现场演示)。 它很有趣,但它也是许多现代技术的引人注目的演示应用程序。 我相信这就是它的全部意义。

  • 最小的构建过程。 只是使用 Gulp 来使用 Babel 和 PostCSS。 它在 ES6+ 和 CSS 自定义属性方面很重。
  • 大量的自定义元素,例如 <tinderforbananas-item>,使用 Polymer polyfill。
  • 图标是超小的 SVG,看起来是手绘的。
  • ServiceWorker 用于离线缓存。
  • 移动优先和性能优先的设计和交互。

也许它会成为未来 HTML5 Boilerplate 的样子。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 111
  • 112
  • 113
  • ...
  • 219
  • 旧版本

CSS-Tricks 由 DigitalOcean 提供支持。

关注网络开发的最新动态

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

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

© 2024 . All rights reserved.