wangshijun2010的最新贡献

styled-components 2.0 发布

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

Stack Overflow 全站切换 HTTPS 之路

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

DevTools: State of the Union 2017

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

保障 CSS 编码风格的工具链

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

Autoprefixer 7.0 发布

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

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

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

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

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

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

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

JS 函数的前世今生

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

JSConf EU 2017 视频列表

JSConf EU 是比较大型欧洲 JS 开发者大会,上周举办的时候网上的都是直播版本,不利于挑选单个分享去观看,现在已经有完整的视频列表了,可以自己选择观看。

WebAssembly 对 React 究竟意味着什么?

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

NPM 5.0 发布:更像 Yarn

官方的 NPM 5.0 发布日志,你需要知道的版本更新要点:更快,有 Benchmark 表明它比 Yarn 还快;能够自动保持 package.json 里面的缩进;--save 变为默认参数;支持离线模式;支持依赖锁定。官方源上面还只能安装到 4.6.1 版本。

是时候停止关于 CSS 的争吵了

不知道大家是否注意到,最近一年社区中出现的 CSS 轮子越来越多,尤其是 CSS-in-JS 风格的轮子,这个事情在国外的前端社区引发的很多的讨论,或者说是争吵,比如有人说 CSS is Broken,就有人对 CSS is Fine。讲稿的作者给出了非常赞的观察视角,最后的总结也很实在:程序员应该务实,而不是教条,更重要的是保持好奇心。想看真人演讲的可以点击讲稿下面的 Yotube 链接。

egghead.io:玩转 JS 中的数组

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

Shoutem 开源的 React Native 动画组件

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

Vue Conf 2017 参会笔记

掘金编辑产出的参会笔记,全球首届 Vue.js 开发者大会,尤雨溪介绍了 Vue.js 的演进之路和今年的版本迭代计划,狼叔对前后端分离的大前端技术架构给出了良方,张耀春则分享了非常多 Webpack 用在实际项目中的技巧,掘金的创始人在现场做了他前端生涯的最后一次技术分享,可惜没有直播。

Google I/O 2017 视频列表

Google I/O 2017 可以说是整个互联网的盛宴,关于它的报道已经很多了,这里搜罗了全部的视频,里面关于前端的内容比较值得关注,比如 Polymer、Dev Tools、PWA 等,工程师不光要埋头做事,还要抬头看路,大的科技公司则走在我们前面。

CSS Grid 学习指南

CSS Grid 是比 Flexbox 更强大的布局特性,如果你还徘徊在门外,何不打开这篇教程研究下,作者对内容的组织非常的用心,你应该半小时就能学完。

程序人生:服务性能 101

来自我非常敬佩的程序人生的微信公号,虽然前端对性能的关注不需要到服务级别,但是培养一种思维方式还是非常有用的。比如什么时候该严肃地考虑性能问题?如何衡量和优化服务的性能?有兴趣的同学可以阅读原文看他的分享 Slide。

阮一峰:Fish shell 入门教程

早些时候有推过一篇文章说:为什么优秀的程序员都爱命令行?Phodal 在他的长文《在工作头三年里如何快速成长》中提到的要尽早开始拥抱命令行、纯键盘操作,慢慢你会发现过多使用鼠标会使你的效率下降,这点我深有体会,也非常赞同,但是你的命令行工具箱也是需要不断打磨的,如果你还没开始行动,那这篇文章可以入门。

静态网站生成(SSG)工具大搜罗

国外大行其道的一键部署服务 Surge、Now 是在静态网站生成器大背景下的商业产品,你也想部署纯净太的网站?需要先挑选一个 SSG 工具,然后挑个服务商,这个小站列出几乎所有的 SSG 工具。

让代码检查不再痛苦

为 Andrey Okonetchnikov 在 React Amsterdam 上做的分享,列出了现有的代码风格检查(Code Linting)方案的集成痛点,并给出了非常不错的解决方案,我们团队已经用上了,如果你还不知道啥是 Code Linting,得抓紧学了。

React Europe 2017 大会议程

React Europe 2017 大会也是本周举行,程序员界的漫画天才 Link Clark 又做了逆天的分享,她用漫画图解 Redux、GraphQL、React Fiber 让我在迅速理解这些概念的同学也为她的才华做震撼,有点跑题了,React Europe 中除了她的演讲,还有很多值得关注学习的内容,怎么挑出高质量的?相信你有自己的办法。

Recompose

A React utility belt for function components and higher-order components.

抽象语法树(AST)入门

抽象语法树是啥?有什么用?如果你好奇过各种预编译工具(比如 babel、postcss、eslint 等)是怎么工作的,这个教程能让你知其然还支持所以然。

All About Recursion, PTC, TCO and STC in JavaScript

In this post I’ll give you tips to better visualize and think about recursion and explain what are proper tail calls, tail call optimization, syntactic tail calls and how to differentiate them, how they work and talk about their implementation in major JavaScript engines.

Atom 新版集成 GitHub 功能

Atom 的最新版中集成了常用的 Git 功能你可以方便的在 GUI 上操作分支、查看日志、做代码的提交和拉取。已经抛弃 Atom 的同学可以绕路了。

在前端领域跟上时代步伐