资讯专栏INFORMATION COLUMN

前端周刊第57期:《战争与和平版》的 CSS-IN-JS 黑历史

zhangqh / 3221人阅读

摘要:以战争与和平为蓝本回顾了历史,也给出了非常赞的观察视角,程序员应该务实,而不是教条,更重要的是保持好奇心。初版于年前发布的,作者重写整个仓库从到之后,最近发布了版本,新版最大变化是升级到。

不知道大家是否注意到,社区中出现的 CSS 尤其是 CSS-IN-JS 风格的轮子轮子越来越多,这个事情在前端社区引发的很多的讨论,或者说是争吵,比如有人说 CSS is Broken,就有人对 CSS is Fine。Cristiano Rastelli 以《战争与和平》为蓝本回顾了历史,也给出了非常赞的观察视角,程序员应该务实,而不是教条,更重要的是保持好奇心。

另外第 56 期提到的各种技术大会,已经陆续有人整理适合 WEB 的视频列表,本期收录了我看过的比较精彩的两个,如果你有时间看更多,请移步:Google I/O、JS Conf Europe、Vue Conf。

共 2121 字,读完需 4 分钟。以下是本周精选内容,请享用。

技术动态 NPM 5.0 发布:更像 Yarn

官方的 NPM 5.0 发布日志,你需要知道的版本更新要点:更快,有 Benchmark 表明它比 Yarn 还快;能够自动保持 package.json 里面的缩进;--save 变为默认参数;支持离线模式;支持依赖锁定,直接 npm install -g npm@5 可以体验。

styled-components 2.0 发布

对,就是以抹指甲油图片为图标的那个 CSS-IN-JS 库,我第一次使用就爱上她了,本周发布了 2.0 版本,可以说是真正意义上的大版本,代码体积更小、添加 SSR 支持、发布全新的文档站点、新增多个 helper 函数帮助你实现代码复用、新增 Babel 插件来优化生产环境的代码,最重要的点是你可以直接升级到版本 2.0 而不用做任何更改。

Autoprefixer 7.0 发布

可能部分同学对 Autoprefixer 比较陌生,是能够自动帮你提高 CSS 的浏览器兼容性CSS 预处理工具,各种构建工具都有对应的插件。初版于 4 年前发布的,作者重写整个仓库(从 Coffee 到 Babel)之后,最近发布了 7.0 版本,新版最大变化是升级 BrowserList 到 2.0。

文章教程 Stack Overflow 全站切换 HTTPS 之路

本周宣布帮助 100W 开发者成功退出 Vim 的程序员社交网站 Stack Overflow 最近宣布了另外一件大事:花了两年时间终于把全站切换到 HTTPS,对于部分正在升级到 HTTPS 或者想升级的同学可以看看,有个心理准备。内容比较全面,从基础设施的迁移、到应用架构、代码逻辑的迁移,都有经验和教训。

JS 函数的前世今生

函数是 JS 中的一等公民,语言在进化,其中函数的编写、使用方式也在不断进化,这篇文章做了非常不做的梳理和讲解,从早期的函数表达式、函数声明,函数构造,匿名函数,到后来的箭头函数、generator、async 函数,以及不同语法组合的函数,值得看看。

保障 CSS 编码风格的工具链

清晰简洁的代码看起来养眼,读起来也更易懂,在 JS 领域,有很多工具来保障编码风格,比如 ESLint、Standard,也有工具帮你格式化代码,比如 Prettier、JS-Beautify。社区还比较年轻的 CSS 领域呢?早期的 csslint 太难用,但是最近一两年出现了几个比较好的工具,比如代码检查的 stylelint,代码格式化的 stylefmt。

Style Guide Guide:编写样式规范的指南

比较重视代码重用和用户体验一致性的前端团队在处理复杂的业务都会着手积累自己的样式规范,但实际操作过程中,可能部分样式规范后来沦为纸上的规范,该如何维护真正有价值的样式规范呢?比如样式规范该怎么组织?文档该怎么写?向 Brad Frost 学习。

开发工具 sitespeed.io:给你的应用来个全面的性能诊断?

sitespeed.io 完全基于开源工具构建,能够一键对你的 WEB 应用做全面的性能诊断,内涵 Browsertime、ChromeHar、PageXRay 等工具,支持把结构输出到 Grafana,安装方式也比较灵活,近期在关注性能的同学可以看看。

代码框架 Shoutem 开源的 React Native 动画组件

Shoutem 已经被认为是移动领域的 WordPress,可以快速帮用户构建 APP,其在 React Native 上做的事情还是不少,这是他们开源 React Native 的动画组件,支持常见的位置、大小、透明度、坐标轴,动画作者还在 Medium 上发了一篇不错的文章:《Declare Peace with React Native Animations》,感兴趣的可以去搜来读读。

在 Node.js 顶级作用域中直接使用 await

或许你也曾疑惑,为啥 Node.js 里面的 await 语法不能直接使用,而需要在特定的 async 函数中使用,这个 package 源自 Sindre Sorhus 在 twitter 发的一条牢骚,实现的方式也比较 hack,很可能这个特性会出现内置的支持,梦想是要有的,万一实现了呢。

ensure-error:确保你收到的是 Error 对象

npm 社区贡献的各种 package 在数量上绝对碾压其他语言,但是质量也是参差不齐的,具体到笔者自己踩过的坑就是某些包抛出的错误不是标准的 Error 实例,导致我们的错误处理代码要做特别的改造才不会在处理错误的时候再出错。和 ensure-callback 类似,这个包能确保你拿到的 error 是正确的对象,Sindre Sorhus 这种发现问题解决问题的思路非常值得我们学习。

找找灵感 Awesome 系列:函数式编程的资料合集

Awesome 系列,整理了函数式编程方面的很多不错的演讲、文章、视频,覆盖的语言也比较多,感兴趣的可以慢慢看。

视频教程 DevTools: State of the Union 2017

由 Paul Irish 在 Google I/O 2017 上给大家带来的分享,里面包含大量 Chrome 开发者工具的现场演示,比如:调试 PWA 的功能和技巧;如何解读应用性能、可用性报告;如何使用最新的 async 单步调试功能;如何快速的在开发者工具中编写、保存代码。

WebAssembly 对 React 究竟意味着什么?

程序员卡通作家 Lin Clark 在 JSConf EU 2017 上的演讲,Facebook 是真心想把 React 的性能做到机制,而 WebAssembly 确实快,二者结合起来会怎样?我不剧透了,感兴趣的自己看哈。如果想看 Link Clark 的更多卡通画,可以去搜 ”A Cartoon Guide to“。

egghead.io:玩转 JS 中的数组

数组可以说是任何编程语言里面最重要的数据类型,JS 也不例外,掌握他们的必要性不必言语,该视频列表涵盖了几乎所有的 JS 数组操作,内涵不少使用数组完成常见任务的特别技巧。

One More Thing

本文作者王仕军,商业转载请联系作者获得授权,非商业转载请注明出处。如果你觉得本文对你有帮助,请点赞!如果对文中的内容有任何疑问,欢迎留言讨论。想知道我接下来会写些什么?欢迎订阅我的掘金专栏或知乎专栏:《前端周刊:让你在前端领域跟上时代的脚步》。

Happy Hacking

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83228.html

相关文章

  • 阿里云前端周刊 - 26

    摘要:小米直达服务探秘,如何保证移动体验小米直达服务是小米推出的混合开发框架,它可以实现秒开,同时可以在浏览器短信微信等地方打开。本文即是小米直达服务体验保障方面的实践分享,讨论了目前移动体验的瓶颈小米直达服务的机制与核心关键等内容。 推荐 1. Node.js 8.5.0 发布 https://nodejs.org/en/blog/re... 已经发布的 Node.js 8.5.0 版本中...

    beanlam 评论0 收藏0
  • 前端周刊58:送你 3 道面试题

    摘要:下面是本周精选内容,请享用。不要看错了,这个是,和测试框架仅一字之差。本文作者王仕军,商业转载请联系作者获得授权,非商业转载请注明出处。想知道我接下来会写些什么欢迎订阅我的掘金专栏或知乎专栏前端周刊让你在前端领域跟上时代的脚步。 showImg(https://segmentfault.com/img/remote/1460000009646412); 破解前端面试系列文章本周出到第 ...

    miguel.jiang 评论0 收藏0
  • 阿里云前端周刊 - 17

    摘要:接下来本清单还列举了对于接入过滤与防攻击使用合适的方法并且对用户输入进行有效校验避免关键资源外泄设置合理的响应头等等内容。该论文的主要论点是,没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍。 推荐 1. Styled-Components 实战 https://hackernoon.com/styled... Styled-Components 是由 Max Stoib...

    bingo 评论0 收藏0
  • 阿里云前端周刊 - 17

    摘要:接下来本清单还列举了对于接入过滤与防攻击使用合适的方法并且对用户输入进行有效校验避免关键资源外泄设置合理的响应头等等内容。该论文的主要论点是,没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍。 推荐 1. Styled-Components 实战 https://hackernoon.com/styled... Styled-Components 是由 Max Stoib...

    gityuan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<