第四届 CSSConf CN 见闻

上周末作为一名分享者参加了 CSSConf CN,在厦门。

其实除了自己的分享内容,这次我是带着很明确的目的参会的,因为有两个主题我特别关注,就是:

  • 第一个:响应式的组件
  • 第三个:从 API 的角度看组件的 CSS

(两个分享的标题都被我稍微“演绎”了一下)

这两件事都是自己工作上正在特别关注的事情,一方面,我们很少从 API 的角度去理解一个组件的 CSS 该如何组织和管理,所以这个标题就特别吸引我,另一方面响应式组件的分享者是来自新加坡的前端工程师 Zell (我个人一直觉得国内的响应式都是在瞎搞,看了很多周围团队都没有认真做这件事,甚至不相信响应式的价值,从设计师到工程师),因此非常珍惜这个机会能近距离学习一些国外的同行们是怎么看待和实践响应式的。

所以尽管我们团队的差旅经费已经用完了,还是决定自费来厦门近距离交流一下。

现在证明这次真的不虚此行。

当然参加这种线下活动,“面基”的目的是一定有的……恩,这个不值一提。

响应式组件

在谈这次分享内容给我的收获之前,我想说,实际上我不只是从几十分钟的分享中学习了响应式组件的东西。我这次去厦门的行程特地提前了两天,周四就到厦门了,就是希望能多一些分享的准备和现场交流。正好 Zell 也到的比较早,于是乎我在周末的会议之前就跟 Zell 聊了很多。真的是很难得的机会。

回到分享的内容,我听过 Zell 的分享之后简单整理了一些要点:

  1. Proportional scaling:让所有的组件成比例
    • 注意字号:font-size 尽量使用 em 单位,而不是如 px 的绝对单位
    • 注意视口/窗口大小 (viewport):尽量使用 vwvhvminvmax 单位,必要的时候可以配合 calc()
  2. Responsive scaling:处理好响应式的断点
    • 善用 media query
    • 尽可能使用 min-width,以小屏幕为基础
    • 必要的时候使用 min-widthmax-width 的交集,避免样式间不必要的相互干扰
  3. Modular scaling:像乐高一样拼合模块时的注意事项
    • 不要在子元素上直接设置外边距
    • 取而代之的是在父元素上整体设置每个子元素的边距
    • 巧用 + 选择器处理最后一个元素多余的边距
    • 在需要对其的地方使用 rem 作为边距的单位以避免被组件的字号影响布局
  4. Morphable blocks:尽可能透过不同的表象提炼相同结构的组件,以达到尽可能的复用和组件数最小化
    • 找出相同点和不同点
    • 得出最佳的 HTML 结构
    • 通过设置不同的样式展示出不同的效果
    • 让 modifier (BEM 中的 M) 的数量尽可能的少
  5. 额外的小贴士:命名规范和约定、避免在选择器上使用 ID 从而使得选择器的权重失控

实际上每一条都不是很难,也不是没有见到过,但是总结的非常有系统性,给了大家一些很好开始的着手点。

另外 Zell 在聊天过程中也提到了很多我非常认同的观点和细节,想分享给大家:

  • 前端工程师是真正用户体验的“最后一道门”,身为前端工程师一定要有意识捍卫用户体验 (这句话后来跟 裕波 聊天的时候他说了一模一样的话,可见大家都十分认同)。
  • 前端工程师一定要跟设计师“坐在一起”工作,一定要强沟通,才能把工作做好。
  • 跟 Zell 聊到响应式在自己的工作中遇到很多困难的时候,Zell 出乎意料的大方对我说“你找我就对了”,即大方又自信。看得出来响应式在 Zell 看来已经是吃饭喝水一样了,我们自己包括周围的人却连一步都还没走出来,真是觉得惭愧。

从 API 的角度看组件的 CSS

我记录了一些要点和自己的理解:

  • 首先,通过 CSS 的发展史来看,我们一直试图通过一种特定的语法 (CSS) 来描述网页的样式,但在 web page -> web app 的划时代趋势下,我们组织代码的方式也发生了变化,尤其是 CSS 的部分容易被人们忽视。
  • 分享者 E0 把今天的 CSS 设计问题,从 API 的角度划分成了三个层次:
    1. 对于组件的维护者来说:要把一部分 CSS 样式封装起来,供自己维护,同时也要避免被组件的使用者误修改或滥修改,通常这些样式会被内联或编译为无语义不可编辑的 CSS class
    2. 对于组件的使用者来说:要把一部分 CSS 用法暴露出来,供开发者灵活配置或修改,很多组件库会在文档中列出可以配置和修改的 CSS class,但除此之外,还有一些库做了很巧妙的不一样的封装,比如通过扩展的伪类或伪元素。这种方式我之前没有留意到过,有点开眼界
    3. 对于浏览器插件作者:这个角度也是我之前没有认真思考过的,就是说还有这样一群开发者,希望通过浏览器插件处理一些不同用户的特定需求。如果我们的组件希望对这些人友好,那么就多了一层考量。这时我们就想到了一些更加通用或规范化的,和具体工具、库、编译方式无关的设计,比如 CSS 自定义属性、无权重的选择器等

听过之后非常受启发。

这两份 slides 我也第一时间分享给了我们团队组件库的同学们了解学习了:)

关于自己分享的 CSS Houdini

这些内容可能真的是有一点“超前”了,因为很多浏览器都还没实现,而且规范本身也没有稳定下来。但是我迫不及待的想分享出来,是因为我也听到了一些说法,说“CSS 很久没有什么新闻了”。那 CSS Houdini 绝对是一个可以让 CSS 更上一层楼的“重量级”的东西。希望可以通过分享 CSS Houdini 让大家对 CSS 更有信心和期待。

同时很多技术的“风向”都是由最底层的东西决定的,我们从规范层面对 CSS 有更多的了解,一定会对我们的实际工作有很多指导和借鉴的价值。如果你同时还是一个有开源精神的人,那么你可以从今天开始就构思一些基于 CSS Houdini 的工具和库了对吧,用这些工具和库加速 CSS Houdini 的落地,同时也尽快把一些之前没有 CSS Houdini 的时候大家用起来很别扭很勉强的东西汰换掉,更在这个过程中体会 web 带给我们的乐趣:)

其它

另外几个分享也各有特色,总体上,我觉得这次 CSSConf CN 同时包含了 CSS 的规范、理念、工具、技巧、动画、八卦、吐槽各个方面,应该是尽可能照顾到了大家的兴趣和需求了。还是觉得这样的会议非常的棒。

我觉得 CSS 和动画、SVG、字体设计、3D 图形学、可访问性、语义化的 web 等话题有着非常紧密的联系,有很多有意义的延伸,并且这些话题也很难有独立的 Conf 了吧我估计。再加上 CSSConf 的主办者们,尤其是 裕波,是非常懂前端开发者们的,他们经营 CSSConf 的理念和方式我一直非常认同和欣赏,所以也许未来有一天,CSSConf 会比 JSConf 更受人关注。

以上

Web 表单的未来

译自:https://blog.prototypr.io/the-future-of-web-forms-4578485e1461 Matt West 的 The Future of Web Forms

license: CC BY-SA 4.0


如何通过会话式的界面让数据收集更加人性化。

Web 表单是从纸质媒介进化而来的。即设计一组标签和线框来限制输入,同时让数据处理变得跟容易。

毕竟,表单的目的是收集数据,以便执行操作。为了执行该操作,我们需要把收集的数据统一汇总。我们在界面上设计了一些约束以便达到统一汇总的目的。表单旨在符合流程上的需求,而非用户本身。

表单经常给人的感觉是冷冰冰的,没有人情味。因此,我们得到的回应往往也是冷酷和不人性的。我们不深入细节,如果一个朋友问你相同的问题,你可能会多一些回复,但这是一台电脑。他想要的只是数据,别的不在乎。就好像你在跟人说话但是人家并没有在听。为什么没人听的话说出来会让人觉得烦呢?

Image by Ken Teegardin.

和许多数字化的东西一样,表单已经被之前的形态严重影响。我们之所以往线框里填东西是因为我们以前在纸上就是这么画的。

阅读剩余部分...

苹果正在做一些他们的程序员明摆着不想要的东西

译自: https://medium.com/make-better-software/apple-is-about-to-do-something-their-programmers-definitely-dont-want-fc19f5f4487

Jul 29, 2017

作者 Anil Dash 是 Fog Creek Software 的 CEO,致力于让科技变得更人性和道德一些,同时他也是 Medium 的顾问。


苹果在 Apple Park 这个漂亮的新办公楼上花了 50 亿美金,却犯了一个完全可以避免的极其昂贵的错误:让他们的程序员工作在一个开放式的格局中。这真让人惊讶。

我在 Fog Creek Software 工作,我们的联合创始人兼前 CEO Joel Spolsky至少 17 年前就已经针对开放式办公室对于程序员产能的糟糕影响撰文了。他在这方面的洞察基于了 Tom DeMarco 和 Tim Lister 的经典书籍《Peopleware》——该书已经出版了三十年。所以这其实不是什么全新的观点。当然在这数十年里,也已经有无数的学术研究确认了同一个结论:人们在开放式空间办公是烦躁的、注意力不集中的、常常不开心的。

这不是说开放式办公环境一无是处——它能够营造很好的协作和联络的氛围。对于市场或销售团队来说,共享空间是非常有意义的。但是对于需要身处某种工作流状态的任务来说呢?这个问题从科学的角度是有定论的。

那就是把门关上。

阅读剩余部分...

为什么我不会无偿加班且你也不应该

译自:http://thecodist.com/article/whyidon39tdounpaidovertimeandneithershould_you

原文写于 2012 年,至今已经有一段时间了,前段时间这篇文章又被大家翻出来热烈讨论,看过之后有些感触,所以翻译了一下


我是一个在美国待了 30 年的程序员,我有过一周工作超过 40 小时的经历,这在行业里面并不常见,但是我[很难][rarely]因此而得到更多的薪水。

总之,我现在发现整个做法[很恶心][nauseating]。

我并不是针对自营或创业等多干活儿就能得到更多回报的情况。我曾经在 80 年代中期到 90 年代开过两个小的软件公司,并且工作时间也很长,但是我们会共享全部的成果,而第二家公司我们在合同里就定好了多劳多得的规矩。当然这不是我们今天讨论的重点。

如果我为一家大公司工作并且谈好了薪水,那我的预期就是我在标准的时间内,即公认的 (至少在美国) 一天 8 小时一周 5 天,尽我所能完成工作。如果他们希望我每周工作 70 个小时或有些主管期望团队每天都来上班,现在的我是会拒绝的。为什么呢?

当我们决定工作赚钱的时候,我们假定工作的主要原因是为了换取我们生活所需的开销。雇员的预期是他们会获得等价于这笔薪水的产出。但问题在于,雇主概念中的价值经常和雇员的不一样,尤其在美国和亚洲。许多公司期望薪水是固定的,但是他们创造这些价值需要完成的工作是不确定的。雇主觉得只要提高对雇员的预期和要求,就能够获得更大的回报,这样他们就可以通过为每份薪水延长工作时间来降低实质的劳动成本。

这对于雇员来说意味着什么?如果你同意了,那么你实际上就认同了自己的工作更廉价。甚至这种工作其实就是无偿的。那么作为雇员你在这样的无偿工作中收获了什么呢?在绝大多数雇主面前,你什么也没有得到。如果你是一个主管,也许会得到晋升,但是作为程序员你职业发展的道路不只是做管理这一条。如果你连续几个月每周编码超过 80 个小时,通常情况下得到的回报和一周努力工作 40 小时差不多。

阅读剩余部分...

寄语应届生:走出校园的几个人生转变

最近收到个邀请,有机会和大学生的在线互动交流,体裁不限。我选了上面这个题目,整理了一些心得感想,虽然活动很快就结束了,但是这些想法我打算还是以文字形式备忘一下。如果能给更多人帮助或参考,我会倍感欣慰。

目标的转变

作为学生,毫无疑问是以学业为重。在校园里,大家不出意外都会把学习定为最大的目标,围着功课转。但是工作之后,你可能面对很多事情要处理,怎么有所成就?怎么赚钱?怎么照顾好自己?怎么照顾好家庭……除了目标本身不同之外,我觉得更大的不一样在于,在相当长且连续的学生生涯中,我们没有太多选择的余地和必要,即便是有什么目标,也基本上是被动接受或被灌输的。但是走出校园之后,你面对的是一个无比自由开放的社会。这个时候你需要的不是意见,而是主见。甚至你是否做好了准备,有了足够的本事从事一项工作,还是继续学习深造修炼自我,直到自己准备好为止再工作?这也需要你的主见 (并为这个主见承担相应的后果,某种角度上)。最终很多选择是开放的,权衡的,遵从自己内心的结果。

还有一点我想说的是,因为你拥有了新的目标,而且不再会有人逼着你学习,从外部给你学习上的压力,所以客观上学习的环境也没有那么好那么纯粹了,学习这件事情会逐渐变得让你渴望、珍惜、喜欢。希望你还没有因为繁重的学业对新事物新知识,尤其是表面上枯燥但实际上对你有很多帮助的东西,失去动力。我们在校园里更多的是学习知识,然后推导这些知识可以用在什么地方;走出校园之后更多的需要思考,我遇到一个问题想解决它,究竟有多少知识哪些知识可以为我所用?也许在未来的某一天你会突然觉得,当时在校园里,学习环境那么好,怎么没有多看两本书,多做些训练。所以最好不要丢下自己看书学习的习惯,给自己定个长期的学习计划,有空就多看两本书。

学会社交

坦白地讲我觉得这在校园里并不是必备的技能。但是走出校园之后,它非常非常重要。这也是为什么几乎所有的公司都会给员工做沟通培训 (尽管那并不一定管用)。社交并不只是沟通而已,也不只是表达,更是聆听,是待人接物的每一个细节。我发现很多人在工作中,最简单的两件事情做不好,也不知道该怎么做,那就是:1 如何写邮件、2 如何开会。这表面上是职场礼数的范畴,也有很多文章介绍这些职场礼数,看上去就是个知识点罢了。但实际上一个人在理解和实践它的背后,反映的是修养,甚至是教养。这不是一两篇文章能够教会你的,是你平时为人处事方式的积累和感悟。

另外社交能力的重要性不止体现在工作中,体现在你步入社会之后可能会面对的各种场合的各种人,比如和同事下班之后一起组织些活动放松消遣一下,和老乡或老同学叙叙旧——这些也都是我刚毕业的时候经常会做的事情。但是这里我认为更重要的场景是:学会如何跟陌生人打交道,如何更主动的和陌生人交流,和这个社会交流。从最简单的跟陌生人问路、跟陌生的房东租房子、甚至搭讪对吧 ^_^,到跟不同性格的服务员、乘务员、售票员、公交车司机、出租车司机沟通或寻求帮助,再到你如何主动但又不会让对方和周围人尴尬的帮助别人,包括你是否会本能的路见不平挺身而出……抱歉这可能有点超出社交这个话题了。但这些都是有关联的不是吗?每个人在这个社会中都是一个独立的个体,但又是相互依赖相互依靠的一个集体社会。想真正融入这个社会,我觉得这些都是必须的。

最后,关于社交,还有一点很重要,就是在你刚刚加入一个公司或团队的时候,你周围的人一开始对你来说都是陌生人。这个社会上可能有很多适合你的机会,但它们不会主动找到你头上,这个时候需要你学会跟陌生人打交道。好的社交能力会让你的人生更有安全感,对自己办好一件事更有信心。和别人交流同样是一个完善自我认知的过程,尝试接受更多不同的观点,发现并理解不同的看问题的角度,有助于更认清自己,避免自以为是 (相信我,这种事情别人帮不上忙的,只能你自己领悟)。

个人发展

我觉得找工作这件事情,更多的要从兴趣出发,而不是所谓的“前途”。我逐渐越来越认同和相信一句老话:“三百六十行,行行出状元”。首先,如果对这件事情没有兴趣,你很难“用心”做好它,这样的状态也不是长久的;第二,我们已经看得见摸得着的“前途”和“机会”,往往已经不是什么好机会了,尤其是如今互联网时代事情变化发展这么快。而且那些真正抓住机会的人往往都是在完全没人看好的时候就开始全身心的投入在这个行业或方向上,才能在“机会”来临的时候抓住它,我不觉得这些人只是更厉害的“投机主义者”,如果没有兴趣在背后趋势着这些人,他们又是怎样才能在枯燥 (往往还伴随着高风险和不确定性) 的领域里这么坚定的做到今天呢?所以我的个人建议是,找工作,就完全追随自己的兴趣和内心就好了,不要想太多“这个行业比较赚钱比较有前途”之类的——它最多是你的一个参考项。找到自己的兴趣所在,相信它,相信自己,保持专注,一定有最好的回报,剩下的东西交给运(时)气(间)就好了。

再有就是要相信专业的力量,对学问保有“敬畏之心”。这里的学问不只是纯职业技术,也包括做事方式方法等等一切社科类的研究。如果一个行业的专业性丢掉了,整个行业也就被毁掉了,最后大家会一起丢掉工作,一起失败。

这种东西我觉得跟很多已经被一份工作或长期不良型的环境所固化思想的“老家伙”们讲已经不一定有意义和效果了。但是对于打算或刚刚从校园步入社会,有理想,有抱负,承载着社会的未来的大学生们来说,我希望有机会在这方面多呼吁一下。尊重和相信专业的力量,耐得住性子,不要被一时的挫折、不走运或委屈左右,多多磨练自己,你一定不会后悔。

So Are You Ready?

:)