我最近在 DEV 上做了一个 AMA。 只是借此机会将一些答案像一个好的独立网络用户一样移植过来。
如果你在 2020 年开始成为前端开发人员,你会说首先应该学习什么,为什么?
你需要把自己置于一个需要创建和维护网站的角色中,即使这在你早期看来很困难。 获取域名,将网站放到公共互联网上。 在上面加上你的名字。 现在你给自己下了赌注,你将学习技术,因为你必须将你的想法变为现实。
对我来说,650 年前,那就是为老乐队建立一个网站。 我们需要一个网站! 这对我来说听起来很有趣,我设法努力地买了一个域名,租用了一个主机,建立了一个 WordPress 网站。 然后,随着时间的推移,我学习了前端网页技术,因为我想改变设计,改变模板,添加酷炫的功能等等。
给自己一个项目,并通过项目学习。
你是如何决定哪些内容要写成博文,哪些内容只发一条简单的推文的?
我通常不会避免发推文。 推文通常是博文的一个很好的试金石。 如果没有人关心,好吧,可能不是一篇好文章。 如果它确实获得了很好的互动,那么围绕它的讨论对博文创作很有帮助。 此外,推文很容易发出去。 对我来说,博文是有意地制定了一个更长的计划,包括编辑、安排等。
这里有一个 推文示例。 只是一个简单的 UI 实验。 我不想等博客来发布演示。 但是从推特线程中,我得到了一些有趣的技术反馈,关于哪些部分让大家最惊讶的信息,以及一些其他相关想法。 有望能促成一篇更有力的博文。
说实话,我甚至把 DEV 当成那样对待。 我在这里快速写了这篇博文反应,然后 在我的博客上对其进行了完善,加入了一些反馈。
你有没有最喜欢的 CSS 技巧,让你感觉“哇”?
我认为 CSS 中的“滚动阴影”是我最喜欢的 CSS 技巧之一。 它最初由 Roman Komarov 设计,但由 Lea Verou 解释和改进 Lea Verou。 我前几天看到一个围绕这个想法的工具,由 Stefan Judis 设计。
这是一个真正的令人费解的事情,它涉及四层渐变背景,每一层的位置、大小和颜色都不同,而且在滚动方面的行为也不同。
这不仅仅是一个巧妙的技巧,因为它具有真正的 UX 意义。 显示可以滚动的位置的阴影是重要的 UX。 考虑一下 iOS 中最近一次设计更新的故事,它导致了对隐藏在可以滚动到但没有提供如何到达该位置的提示的 UI 操作的完全混淆。 (顺便说一下,这在我的 Spotify 上经常发生。)
对于试图走类似道路来提升影响力和曝光度的开发者,你有什么三个快速建议?
我认为 *写作* 确实是 *唯一* 的途径。
我想不出哪个有影响力的开发者,其影响力不是来自写作。 或者如果不是写作,那就是 YouTube 频道或其他形式的 *公开创作*。
你认为自己会投入多少时间来亲自玩弄发布的 Houdini API? 你对哪个 API 最兴奋(Painting、Layout、Typed OM……)?
这些超级底层的东西有时让我感觉力不从心。 仅仅通过查看规范,我很难想象这些东西对行业的意义,你知道吗?
对我来说,Layout API 似乎拥有最强大的潜力。
我现在想象的是,Houdini 对我这样普通的日常前端开发人员的影响并不大。 我不会写太多 Houdini 代码。 但我会使用其他人创建的那些花哨的东西,因为它们对我来说很有用。 就像大多数人不会编写自己的库或发布 npm 包一样——他们只是使用它们。
对 Houdini 感到震惊很有趣。 如果有人正在寻找这种体验,一定要看看 Vincent De Oliveira 的展示网站.
你在 CodePen 或 CSS-Tricks 工作中最喜欢什么?
你知道我真正喜欢什么吗? 我喜欢每天去办公室,然后对当天要做什么有相当的自由度。 我可能会有会议。 我可能在日历上有一些事情。 我可能有一些要达成的团队期望。 但是我通常也有足够的时间去追求我当前感兴趣的事情。
有时我沉浸在处理电子邮件中。 有时我想捣鼓一些有趣的演示。 有时我想写一篇想法或录制一段视频。 有时我想规划一些事情或记录一些东西。 有时我想和其他人讨论一些事情或进行结对编程。
我很幸运,我是老板(哈哈),我故意把自己置于这样的位置,这样我就可以拥有这种自由。
你希望在 CSS 中添加什么?
我觉得每次有人问这个问题,我们都应该抓住每一个机会大声喊 *容器查询!* 直到我们得到它。
这个想法是我们应该能够编写这样的 CSS:“当这个元素是这个宽度时,这个 CSS 应该生效”。 而且不仅仅是宽度,还有我们在页面级别已经拥有的所有媒体查询。
最棒的用例演示是 Philip Walton 的页面.
我想编写一个卡片组件,它会根据自己的宽度进行调整,而不是页面的宽度,因为这两者之间并不总是存在直接的联系(例如,卡片组件可以显示在大型屏幕上的窄侧边栏中,但在平板电脑上或其他情况下可能是全宽)。
*每个* 组件都可能遇到这样的情况,所以为了爱护 CSS,请让我编写作用域到这些组件的媒体查询。 当我看到如果我们拥有这个,我们编写的大多数媒体查询将是这些,而不是页面级别的,我与许多其他人产生了共鸣。
你认为建议使用 `{ position: above-fold; }` 有意义吗?
我不确定在我的职业生涯中是否曾经做过一个基于折叠的重大决定。我不是很喜欢这种思维方式。这个重要的模块必须有一个不可跨越的界限,哈哈。当然,要优先考虑将最重要的内容放在页面上方的位置。网站不像报纸那样折叠。
另外,我们现在有了视窗单位,所以如果你真的需要将某个元素定位在可见视窗区域的顶部,你可以做到。
既然你写博客这么久了,你有没有开发出一个写作流程呢?
算是吧!对我来说,它仍然感觉很随意(我们称我的写作水平为中等质量),所以我不会像在荒野租一间小屋,从日落和廉价威士忌中寻找灵感一样。
- 我记下所有想到的博客文章想法。我试图让这个列表保持公开,但我也有一个私人列表,在那里我可以更随意。
- 我会在这些列表中尽可能地添加上下文,这样我就能希望唤起最初让我写下这些想法的相同情感。如果我一个星期后再看这个想法,却无法回忆起当时的感觉,那它可能不是一个很好的想法。
- 我尽可能详细地写下文章。通常会涉及一些轻微的调查。
- 我们在 CSS-Tricks 有一位主编,所以文章至少会由一个人审核,然后再安排发布时间。
CSS 还是 CSS-in-JS?
我看到了 CSS-in-JS 正在发生很多很酷的事情。我认为它解决了某些网站上的一些有趣问题。例如,我非常喜欢有一个选项,可以在代码中编写作用于组件的样式,这样当组件没有使用时,这些样式就会被自动 tree-shaken。
但网络是一个很大的地方,我敢说大多数网站都不是用 JavaScript 驱动的组件模型构建的。因此,对于很多网站来说,CSS-in-JS 并不必要或不合适。
不过,有两点需要明确
- 没有 CSS 就没有 CSS-in-JS。CSS-in-JS 仍然是应用于元素的样式。它并不能免除你学习 CSS 的必要。
- CSS-in-JS 的领域很广。很难进行笼统的讨论。CSS-in-JS 中的每个项目都以略有不同的方式处理问题,以及样式在网站中的应用方式也相当广泛。我认为,在某些情况下,人们在争论一些方法实际上会生成一个 CSS 样式表,就像你链接任何其他 CSS 一样——甚至包括 Sass 生成的 CSS——而对于这种方法,现在似乎没有太多争议了。