最新文章

Vue Conf 2017 国外版演讲精选

上周在波兰举行的 Vue Conf 2017 已经结束,与会人数超过 300 人,虽然声称是全球首届,但是实际上比国内的要晚一个月左右,这篇文章精选了本次大会中几个比较精彩的演讲,感兴趣的同学可以看看,想提高英语的同学,可以对照着中文看看尤雨溪的开题演讲。

注释良好的 CSS 代码应该长啥样?

社区中就代码可维护性的讨论 JS 比 CSS 多太多,实际上 CSS 也是写起来容易,维护起来难的语种,注释和文档良好的 CSS 代码能够保障代码一致性,大幅度提高代码可维护性,帮助团队形成编码时的“共同语言”,那么注释良好的 CSS 代码该包含哪些要素呢?理解这篇文章再加以实践,相信能提高不少。

为什么我选 React 而不是 Vue

React 和 Vue 可以说是当下大热的前端框架,而笔者对 Vue 的第一印象是:它怎么既像 Angular 又像 React。本文作者用 React 和 Vue 做过几个项目之后,还是更加倾向于使用 React,并给出了他的三大理由,技术选型没有最好的,只有最合适的,如果你是 Vue 的死忠粉,更应该看看这个。

React 组件解耦重构的技巧

有没有写过 render 函数巨大无比的 React 组件?为啥别人的 React 组件代码看起来那么优美?可能是因为没意识到这样做的好处,也可能是因为没有掌握方法论,这篇文章奉上 3 个立即可用的 React 组件解耦重构方法。

边学开发边赚钱的最佳姿势

传统观念都会认为学技能是需要交学费的,有没有可能在学会技能的过程中就开始赚到钱呢?答案是肯定的,尤其是在这个时代,从事创造性劳动的都极有可能获得。这篇文章就介绍了如何在学习开发技能的同学赚到钱的思路,虽然作者只赚了 $11,但是这是一个质的提升。

像产品一样优化你的交付流水线

靠谱工程师应该具有的三观:技术观、产品观、数据观,本文介绍了如何将 13 条产品设计原则应用到软件交互流水线优化上,取得的效果是平均每天节省 13 个工程师工时,相当于两人日的资源,能做出这样事情的人,贡献的价值自然是巨大的。总之,这是篇道与术并存的文章,如果你只是想优化自己的交付流水线或者学习通用的产品设计原则,都是非常值得阅读的。

Pencil:类 Sketch 的开源图表软件

Pencil 项目的愿景是提供所有人都可以免费试用的图表只做软件,完全基于 Electron 开发,目前提供的功能还算强大,如果你是个喜欢平面设计的前端工程师,这个仓库是个很不错的参与开源社区的机会。

支持事务的 MongoDB 操作库

不支持事务是 MongoDB 和其他数据库引擎相比的劣势,而这个仓库基于 MongoDB的两阶段提交特性提供了类似于事务的操作,你可以通过他指定一系列操作,要么全部成功,要么全部失败回滚,不理解事务是啥的同学可以去看看银行转账的例子。

Express.js 中的 Session 是如何工作的?

几乎所有需要维护用户数据、会话状态的 WEB 应用都需要使用 Session,作为开发者不光要知道如何使用 Session 还要知道它是如何工作的。这篇文章介绍了 Session 是什么?如何存储 Session 数据?如何确定 Session 的存储介质?常见的安全问题和对策。

Fluent Conf 2017 日程表

那个用各种动物做书籍封面的出版社也喜欢组织各种技术交流大会,Fluent Conf 算是 WEB 领域综合性的技术交流大会,我连续看了几年,每次都收获不小。这个日程表上有很多演讲的讲稿,如果想看视频自己去搜吧,大会共 4 天,前 2 天是各种 Workshop、短期闭门培训,后 2 天演讲比较多。

Detox:APP 端到端测试的利器

Detox 是高性能的 APP 端到端测试框架,能够在真实设备上运行测试,如真是用户般和 APP 交互,并且提供了天然的 React Native 支持,能够很好的与你的持续集成环节结合起来,并且可以很方便的与 Mocha、Ava 结合使用。

React Native 月刊第 1 期

React Native 社区大玩家组织的月度会议纪要,诸如 Airbnb、Shouten、Wix 等公司都会通报他们遇到的问题、在解决的问题、工程经验,从中不难窥探出 React Native 大致的演化方向:模块化,也能看到这些大玩家在使用哪些工具更好的解决 React Native 应用的问题,比如打包工具、E2E 测试工具。

Webpack 3 发布正式版

虽然 Webpack 3 正式版发布两周了,但是是个非常值得收录的事件,本次发版完全是提供社区投票所产生的功能需求,并且不再像之前那样不同版本之间不相互兼容。本次发版的旗舰特性是 Scope Hoisting,目的是为了提高打包后代码的运行效率,其他特性更包括 Magic Comments,能让打包后的代码更易阅读,如果还有其他你想要的特性,可以去它的投票页面看看。

CSS 年度调查报告

Louis Lazaris 进行了为期 6 周的问卷收集,对 1600 份问卷结果做的汇总,基本覆盖了 CSS 社区今年以来发生的变化,比如比较受欢迎的工具、方法论、编码技巧,信息量不小。不论老鸟、新手透过这份报告能观察到大家都是怎么做的,不断打磨自己的工具箱长期来说会是非常划算的投资。

Lin Clark:内存管理入门教程

程序员漫画作家 Link Clark 的作品,系列文章有 3 篇,链接在原文头部,即使初学者也能透过这 3 篇文章理解 JS 中为什么要引入 ArrayBuffer 和 SharedArrayBufer,以及引入这些特性之后如何处理特殊情况。

Vim 如何实现无限撤销?

Vim 如果不做任何配置,默认的撤销动作只能在当前打开的文件中执行,无限撤销的能力能让你撤销昨天甚至很久之前做的修改,只需要简单的几行配置就可以搞定。

V8 引擎发布 6.0 版本

这里探讨的 V8 引擎不是 Node.js 8,前段事件 Node.js 发布新版的时候,很多人把两者搞混了。该版本新增 SharedArrayBuffer 支持,并且带来了原生的 rest/spread 操作符支持。可用时间节点方面:V8 最新版将会在 Chrome 60 中发布,Node.js 也会跟随发布。

TypeScript 2.4 RC 版本发布

新版的 TypeScript 带来的特性包括:支持动态 import 表达式,更安全的回调参数检查,弱类型支持,字符串枚举等,其中弱类型支持是跟跟老版本不兼容的。正在学习或者使用 TypeScript 同学可以关注。

代码讲解把 Console 用到极致

来自 FreeCodeCamp,Console 是多数程序员的调试首选,但 Console 对大多数人来说是既熟悉又陌生的,我亲眼见到不少新同学的调试代码写的很蹩脚,读完这篇文章,你能学到诸如如何用 Console 格式化输出、对代码计时、对输出分组、输出表格。

那些年处理过的内容溢出

靠谱的程序员会很在意自己写的程序的健壮性,弹 JS 的健壮性很好理解,实际上 CSS 也是有的,有没有这样的体会,设计图非常的完美,但是仅仅照着那个做出来的东西在生产环境数据的测试下可能出各种问题,其中最典型的就是内容溢出,这篇文章讲了不少内容溢出的处理办法,文末有彩蛋,有个叫做 ForceFeed 的工具帮你在开发阶段做内容溢出测试。

19 个常用的 JS 简写技巧

用更少的代码做更多的事情,会让你成为更牛的程序员,说起来容易具体怎么做呢?熟练掌握代码的简写技巧就非常管用,作者在这篇文章中整理了 19 个常用的 JS 简写技巧,当然,部分简写转换是不等价的,注意原文中的标注,改出了 Bug 可不好。

高效 Node.js 程序员都有的开发习惯

这里整理了 8 个高效 Node.js 程序员都有的开发习惯,从包管理,到脚本管理,再到代码风格、测试等,原文用的次是 “Happy Developer”,养成这些好的习惯,能为你避免不少麻烦,麻烦少了,效率就高了,自然就会 “Happy”,不是么?

工作能力强的人有哪些共同特征?

知乎上广受关注的问题,跟每个人的成长有关。你有没有在工作中遇到能力很强的人,不仅知识渊博,而且软实力让人佩服,做什么事情都感觉很让人放心。这类人有什么共同的特征?对我们有什么启发?

React Native Spinner 工具箱

Loading Spinner 是多数应用都会采用的交互方式,可以极大的减少用户感知的等待时间,这是把 spinkit 迁移到 React Native 的即插即用的组件,支持超过 10 种动效,相比内置的 ActivityIndicator 能给你更多的选择。

如何对 হ 这种文字解码?

最近处理业务数据,发现部分数据全部被编码成了类似 হ 的内容,前端同学对这个应该都不陌生,因为 HTML 里面的 > 和 < 都是类似的,如何对这些东西解码?这篇就是个现成的轮子。

Awesome React Components

有同学问我该怎么选择适合业务使用的 React 组件或者组件库,做任何选择的方法论都是相同的,先找到备选,然后添加必要的条件对备选进行过滤,关于 React 组件或者组件库,这篇就收录了不少备选,接下来的必要条件就跟实际的业务有关了。

架构师必读:开源软件的架构

英文系列名为《The Architecture of Open Source Applications》,这个系列文章强烈推荐有志于成为架构师的同学阅读,里面介绍了不少开源软件的设计理念,全套分四册,完全开源,覆盖的开源软件有上古神器,也有黑马新秀,如果你没有思考过这些司空见惯的东西到底是怎么设计的,相信这里面的文章会给你不少启发。最新的系列叫做《500 Lines or Less》,用 500 行代码能做什么?比较有意思

从 Flow 到 TypeScript

作者在使用 React 开发的早些时候,因为 TypeScript 还不够完善,遂全部采用 Facebook 开源的静态检查方案 Flow,时过境迁发现 TypeScript 更能满足需求,虽然标题里有 vs 字眼,但是明显倾向于 TypeScript,并且给出了从 Flow 到 TypeScript 的基本步骤。TypeScript 是 2016 年 JS 调查报告中 39% 的开发者听说过并且原因试用的技术,你还在徘徊犹豫么?

FeatherIcon:美观的开源图标库

社区中能找到的图标库越来越多,选择的时候你会考虑哪些要素?是否开源、图标的种类、版权、受欢迎程度、添加新图标的难度?Feather Icon 使用 MIT 授权,主维护者也比较勤奋,使用者不少,设计风格比较简洁,你也可以看看。

Lighthouse:让 Dev Tools 如虎添翼

Google 官方出品,目前已经内置在 Chrome Dev Tools 中,可以用来对你的网页,尤其是 H5 做全面的诊断,给出的报告涵盖 PWA、性能、可访问性、最佳实践等方面,不得不说,一份报告就有太多值得学习的地方。并且 Lighthouse 还提供了命令行工具,可以很好的与你的 CI 流程结合。

程序员应该访问的最佳网站

已经有人在掘金发过了,里面收录了程序员工作生活可能涉及到的各种网络资源的列表,比如怎么准备面试、去哪里看新闻、哪里有不错的视频教学、有哪些不错的 Youtube 频道、免费的编程书等等,如果你想练习提高自己的英文,这里的每个链接都可为你所用。

ZangoDB:浏览器中的 MongoDB

ZangoDB 是基于 HTML5 中 IndexedDB 的类似于 MongoDB 的数据库封装库,如果你熟悉 MongoDB 的各种语法,那么在浏览器中书写 MongoDB 的代码来做数据过滤、分页、投影、排序、更新和聚合已经不是什么难事。

如何使用 Git 管理大文件?

如何使用 Git 管理诸如 PSD、二进制文件、数据库文件等的大文件?这里给出了详细的步骤,有版本的东西就好追溯,软件演化周期的各种资源都是一样的,而 Git 在做这种记录的时候有着天然的优势。

对比 Flow 和 TypeScript

主标题:JS 中的类型系统,原作者也是蛮拼的,JS 中类型系统的对比做了多次分享,早期对比了 Flow 和 TypeScript 1.x,后来对比了 Flow 和 TypeScript 2.x,最后还把 ELM 加入到对比里面。这是中篇的链接,对比的风格更学术化,如果你想对选用 Flow 还是 TypeScript 做出非常严谨的选择,这篇是不得不看的。

util.promisify 用法详解

Node.js 8 增加的新特性,让你把各种基于回调的函数方便的转成 Promise,这样就可以在 async/await 上下文使用了,这篇文章介绍了基本用法。

学习 Recompose 中的高阶组件和函数式组件

来自 egghead.io,如果你使用了 React 相当长的时间,比如说一年,但是还不知道函数式组件、高阶组件是啥,这个视频教程当属于敲黑板系列了,如果说 《React Best Practice and Design Patterns》是文字版的,那么这个就是视频版的,虽然基于 Recompose 讲解,但是很多模式即使不用它也可以自己实现。

FastImage:高性能的 React Native 图片组件

这周对公司 APP 做图片加载优化,调研时找到了 CachedImage 和 FastImage,其中 FastImage 更新,但是允许开发者对图片加载的调度有更大的自主权,两者都支持 Placeholder、文件系统缓存。你可以根据自己的需要选用。

动画渐变函数图示

恰到好处的动画能让你的应用体验更加流畅,谈到动画,不得不提到渐变函数(即 easing functions),渐变函数基本决定了动画的视觉效果,每种不同的渐变函数到底是怎样的曲线?这里用图示法给你生动的解释。

React Native 渐进式图片加载思路

WEB 和 APP 领域的很多东西都是通用的,对于多图的应用,图片加载的优化必不可少,这篇文章介绍了在 React Native 中实现图片渐进式加载的方案,并且有实际的代码示例。

学会做任何事情

你会教人如何使用筷子么?看起来很简单的事情,貌似找到他的关键,并且讲解给别人就没有那么容易了。wiki-how 里面有各种如何做 XXX 的教程,当你学一个新的东西时候,写个新教程的时候是不是可以参考呢?

egghead.io:60 分钟学会 ES6

是 egghead.io 上为数不多的多人合作的视频课程,通过实际的编码演示了 ES6 中的各种新特性,如果你只是看了 ES6 的各种新语法、结构,但是还是羡慕别人的代码为啥写的那么溜,可以来看看这个,当然,最好的办法是自己跟着练。

CSSConf EU 2017 视频列表

原计划收录在 56 期的技术大会视频里面的内容,但是考虑到信息量太大,延迟到了这周。这是 CSSConf EU 2017 的视频列表,相比而言 CSS 的社区更小也更年轻,但是还是有不错的内容,跟 CSS-IN-JS 有关的题为《A Unified Styling Language》演讲推荐观看,Medium 上也为相同名字的文章。

用 tmux 管理你的命令行会话

在程序员的世界里命令行终端就像是 chrome,会根据需要开很多个窗口或者标签页,但是机器重启之后如何快速恢复之前的工作目录,打开的文件,运行的程序?早些时候你可能需要用 screen,后来出现了更好的窗口管理工具 tmux,这个视频教程能让你在 30 分钟快速入门 tmux。

chrome dev tools 性能工具大观

Google 官方出品的 dev tools 性能工具详细介绍,文章比较长,介绍了几乎所有 dev tools 内涵的性能工具,包含如何打开、录制,如何解读结果,发现问题,如果你真的想学会性能诊断,把这个加到学习列表吧。

想看更多类似内容?