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

Links

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

​数据收集的未来已来

🔗 https://synd.co/2pHD0K1
阅读评论

谁说收集数据很容易?JotForm 做到了。在当今世界,获取相关数据对于做出明智的商业决策比以往任何时候都重要。问题是,公司仍然为此而苦苦挣扎,因为他们用来收集信息的表单通常与他们的客户没有共鸣。但现在不一样了。有了 JotForm 的最新格式 JotForm Cards,您的在线表单与传统表单一样强大,但还具有额外的好处:它们更友好、更简洁,而且不枯燥乏味。更重要的是,使用 JotForm Cards 的公司看到转化率提高了 36%,这意味着更多潜在客户、更多付款、更多注册和更多反馈。所以,您还在等什么?获取您的公司所需的数据,并立即尝试 JotForm Cards。

继续阅读 →

如何编写 Git 提交消息

🔗 https://chris.beams.io/posts/git-commit/
阅读评论

老生常谈,Chris Beams 讲述了编写有帮助的 Git 提交消息的秘诀。以下是他认为这如此重要的原因

如果您没有认真考虑什么构成了一个优秀的 Git 提交消息,那么您可能也没有花太多时间使用 git log 和相关工具。这里存在一个恶性循环:由于提交历史记录无结构且不一致,人们不会花太多时间使用或维护它。而因为它没有得到使用或维护,它仍然保持无结构且不一致。

但一个精心维护的日志是一个美丽而有用的东西。git blame、revert、rebase、log、shortlog 和其他子命令都将变得更有用。审查他人的提交和拉取请求将成为值得做的事情,并且突然可以独立完成。了解几个月或几年前发生的事情不仅变得可能,而且变得高效。

一个项目的长期成功取决于(除其他外)它的可维护性,而维护者很少有比其项目的日志更强大的工具。值得花时间学习如何正确地维护一个日志。最初可能很麻烦,但很快就会成为习惯,最终成为所有参与者的自豪感和生产力来源。

这篇文章与一篇关于该主题的更近期的文章很搭。Chris 提供了一种格式以确保一致性,而 Stephen Amaza 则采用了相同的想法并通过建议如何在提供提交消息时提供更多上下文来扩展它。

继续阅读 →

动画 SVG 径向进度条

🔗 https://daverupert.com/2018/03/animated-svg-radial-progress-bars/
阅读评论

Dave Rupert 向我们展示了如何使用一个小型脚本以及 stroke-dasharray 和 stroke-dashoffset 属性在 SVG 中为径向进度条制作动画

对于一个客户项目,我们给自己设定了任务,要构建一个那些很酷的径向进度条。过去,我们使用过完整的基于 Canvas 的图表库(156k/44k gzip),但这似乎有点过头了。我查看了 Airbnb 的 Lottie 项目,您可以在其中将 After Effects 动画导出为 JSON。这对于复杂的动画来说很酷,但对于一个微型动画来说,依赖项似乎太重了(248k/56k gzip)。

按照惯例,我尝试使用带有 CSS 动画的最小自定义 SVG 和一小段 JavaScript(~223b gzip)。我对结果很满意。

这里还有另一个例子 Jeremias Menichelli 在 CSS-Tricks 上发布了它,并增加了在 React 和 Vue 中将它们制作成组件的额外技巧。

IBM Plex

🔗 https://www.ibm.com/plex/
阅读评论

这是一款免费的新字体 IBM Plex,由同名标志性公司创建的字体系列。如果您想使用它,它在Google Fonts 上。

我们谈论的是一款多方面的字体。它吹嘘自己拥有

  • 罗马体和斜体
  • 四个子系列
  • 八种字重
  • 支持 100 种语言

宣传这款字体的网站本身就很值得注意。它旨在展示这些字体是如何作为单个复杂系统构建的,并使用视差效果在交互式部分讲述故事。即使您不是这些字体的忠实粉丝(尽管我确实很喜欢),看到它们如何在视觉上描述他们在设计过程中的挑战仍然非常有趣。这里有很多奇怪而有趣的UI 事情正在发生。

如果您喜欢关于公司制作自己字体的新闻,最近还有一些其他字体,比如美国足球队的 90 Minutes 和Netflix Sans。

w 描述符和大小:幕后

🔗 https://beta.observablehq.com/@eeeps/w-descriptors-and-sizes-under-the-hood
阅读评论

Eric Portis 深入探讨了浏览器如何决定当您提供 <img srcset="" sizes""> 时下载哪个图像。值得注意的是,浏览器可以随心所欲地做任何事情

有意未指定的行为让浏览器能够对开放式问题提供创新的答案。

尽管如此,计算仍然会根据您提供的内容进行,您仍然可以很好地完成这部分工作。

所有这些中最奇怪的部分是 sizes 属性可以改变图像的“自然宽度”,这会导致意外的向上缩放,这是我们训练有素的厌恶的东西。如果您遇到这种情况,您可以选择...

  • 使用内联 width 属性
  • 使用带有 max-width 的内联 style
  • 接受您可能会遇到偶尔的向上缩放的事实

专为设计师设计的 DevTools

🔗 https://uxdesign.cc/a-devtools-for-designers-2342aab88c06
阅读评论

长期以来,网络的视觉设计和网络设计与开发之间存在着不幸的脱节。我们在这里设计的是网站的图片,而不是网站本身——这就是人们的感受。

A.J. Kandy 对此进行了说明。如今,我们看到设计工具激增,所有工具都在取得进步。然而...

但关键是,大多数工具并非以网络为中心。没有一个工具真正与现代网络开发工作流程集成,除非使用转换器或插件;它们的输出不是网站,而是网站的可点击模拟。

尽管如此,这些原型不可避免地是一次性的工件,必须首先由开发人员进行分析,然后用代码重新创建。

这只是 A.J. 要说的其中一部分,所以我鼓励您阅读全文。

你们是否订阅了Clearletter,Clearleft 的时事通讯?这是一份很棒的时事通讯。他们在这里与近十年的类似想法建立了一些联系

  • Jason Santa Maria:真正的 Web 设计应用程序
  • Jeffrey Zeldman:针对 HTML 和 CSS 的 Indesign?
  • Jon Gold:工具的演变

我怀疑没有人找到完美的解决方案的原因是,这是一个非常难解决的问题。可能没有一个能够在各行各业都得到普遍喜爱的解决方案。就像 A.J. 一样,我希望它能在浏览器中实现。

跟踪工作的不确定性

🔗 https://www.feltpresence.com/work/hill-climb
阅读评论

Ryan Singer 讲述了项目和时间管理问题,这些问题是我最近一直在经历的。他描述了每个项目的两种状态:不确定性和确定性,或者说是“弄清楚要做什么”和“执行”。

Ryan 这样描述它

工作就像一座有两面的山。有一个向上爬的阶段,需要弄清楚要做什么以及如何解决问题。那就是攀登。到达山顶后,就没有什么毁灭性的未知数了。您可以看到另一边,并完成执行。从那时起,估算和完成工作就很直接了。

在我看来,每个项目前半部分最难的事情是确保团队中的每个人都持续沟通,因为微小的设计决策会对工程师产生巨大的连锁反应。我认为我一直都在为此而苦苦挣扎,因为我只想尽快进入“执行”阶段。这也回到了Geoff 之前发布的一篇文章,内容是关于在项目过程之前和期间设定良好期望的。

Vue 设计系统

🔗 https://viljamis.com/2018/vue-design-system/
阅读评论

我们经常谈论 Vue,包括一些实际的应用,但还没有深入研究为其设计。在这篇文章中,Viljami Salminen 描述了他的 Vue 设计流程以及促使他构建Vue Design System 的思路

设计系统可以帮助在组织中的每个人之间建立共同的词汇,并简化不同学科之间的协作。我也看到过这种情况反过来发生,即重要的决定仓促做出。为了避免这种情况,Vue Design System 引入了以下命名框架,我发现它在过去非常有效...

Viljami 列出了设计原则、令牌、元素、模式和模板作为他构建系统的方式,我认为这是一个非常有趣的方法,它与 Lucas Lemonnier 关于在 Sketch 中创建设计系统 的文章类似,使用原子设计作为结构。我特别喜欢 Viljami 将所有内容整合到提供的示例样式指南中的方式。

革命性的项目管理工具

🔗 http://synd.co/2GvWGHE
阅读评论

monday.com 是一款您的团队实际上会喜欢使用的项目管理工具。它可以让每个人轻松愉快地协作,专注于重要事项,并在工作中完成更多事情。它是一款可视化的项目管理工具,可以帮助您和您的团队协作并共同取得更多成就。

使用monday.com,您可以在一个看板中管理项目和任务,以直观的方式在时间轴上移动,并在每个任务的上下文中与您的队友进行交流。此外,它还与您已经使用和喜爱的所有应用程序(如 Dropbox、Google Drive 和 Zapier)连接。

开始免费试用。

继续阅读 →

React 的新 Context API 解释

🔗 http://wesbos.com/react-context/
阅读评论

在这个视频教程中,Wes Bos 考察了新的 Context API 以及它试图解决的问题

React 16.3 有一个新的 Context API,它可以让您轻松地访问应用程序中任何位置的数据和功能。如果您发现自己通过 props 传递 4-5 层深的数据,那么 Context 可能就是您想要的解决方案。

不要忘记 Neal Fennimore 最近关于将事物放入上下文 的文章。它详细介绍了这个概念,并提供了一些解决使用它时可能遇到的怪癖的变通方法。

Quick Hits

# 2024 年 8 月 23 日
# 2024 年 8 月 21 日
# 2024 年 8 月 14 日
# 2024 年 8 月 14 日
更多快速提示 →
  • 更新
  • 1
  • ...
  • 85
  • 86
  • 87
  • ...
  • 219
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

订阅我们的精心制作的时事通讯

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

© 2024 . All rights reserved.