最新文章

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 中除了她的演讲,还有很多值得关注学习的内容,怎么挑出高质量的?相信你有自己的办法。

抽象语法树(AST)入门

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

Atom 新版集成 GitHub 功能

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

8 个能让你惊艳同事的 npm 技巧

工程师不光要技术扎实,对工具也要练习、练习、再练习,这里是几个 npm 的小技巧,跟你的日常工作关系紧密,但是你可能还不知道,在同事面前表演下,估计他们会被惊艳到。

Next.js 3.0 预览版发布

Next.js 是基于 React 的支持服务端渲染的开发框架,本周发布 3.0 预览版,支持动态 import。服务端渲染虽然提了很长时间,但是到目前为止还处在看上去很美、用起来性能达不到要求的阶段,不过社区的努力会带来好的结果。

如何知道 npm 模块的资源消耗?

前端网上流传一张图对比了各种语言包管理机制的深度,npm 是被黑的最狠的,有国外的朋友在 Twitter 上发文说清理 node_modules 让他的 Mac 增加了 15G 磁盘空间,真有这么严重?你用的最多的包到底会占用多少空间?安装时需要下载多少东西?这个小工具可以帮你计算。

Mac 中如何让两个应用并排全屏?

我喜欢在超大的显示器上同时开着 Vim 和 iTerm,一个用来写代码,一个用来调试或者操作 Git,那么如何让两个应用并排全屏好使我沉浸在编码中呢?需要用到 Mac 系统的一个特性,非常简单,1 分钟就学会。

Eruda:把开发者工具带到移动端

你有没有吐槽过为啥移动端浏览器没有类似与 Chrome 开发者工具这样的调试利器?有人已经做了尝试和努力,Eruda 可以在移动端浏览器中给你类似的调试功能,官方 README 尾部的那段接入代码要仔细看。

从 Angular.js 到 Vue.js 的迁移之路

你的老系统是使用 Angular 1.x 开发,现在又不想使用变化太快的 Angular 2.x、4.x 版本?可以看看这篇文章的作者如何从 Angular 1.x 迁移到 Vue.js。

让无状态 React Component 渲染快 45% 的黑科技

无状态 React Component 的概念就是那些纯粹负责渲染且没有状态变化的 Component,这篇文章的作者给出了让这类 Component 渲染加快的技巧:就是把它们当函数使、而不是当 Component 来使,如果你持怀疑态度,可以先看看他是怎么分析的,然后自己做实验来验证。

用 Atom 做 JS/React 开发的终极配置

虽然很多同学现在已经转向 Visual Studio Code 了,这个编辑器我也推荐,但对已经很熟 Atom 作为开发工具的同学这篇文章文章也不失其参考价值。怎么才算是完全掌握一个代码编辑器?把他当记事本用就行了?完全不是这么回事,你需要花时间去打磨和练习。这篇文章的作者花了几个月的时间把 Atom 的配置、插件、快捷键调到最优,可能不完全适合你,但是他的思路肯定是值得学习的。

使用 Node.js 的那些理由还站得住脚么?

技术社区的活力从各种撕逼的发生频率能看出来,这篇文章开头承认 Node.js 已经非常流行并且越来越流行,但是作者认为早些年列出的使用 Node.js 几大理由是站不住脚的,因为其他技术也在进步,在各个方面他们都比 Node.js 做的更好,你怎么看?

egghead.io: 在生产环境中使用 Webpack

Webpack 无疑是前端社区中最受欢迎的 JS 应用打包工具,因为内置了太多的功能,它的学习曲线也非常的陡峭,让它跑起来就要费不少的功夫,跟别提用它来做更多的事情了,Kent C. Dodds 在这个系列视频教程中会用实例帮你理解 Webpack 最常用的功能,以及如何优化 Webpack 的配置让它跑的更快。

BriteCharts:基于 D3.js 的图表绘制库

BriteCharts 是一款基于 D3.js V4 版本的图表绘制库,研究过 D3 的同学可能都会觉得 D3 就是绘图领域里面的 DOM,直接使用它你的自由度更大,但是绘图成本相对更高。而 BriteChart 这样的库帮你封装了常见的图表,可以用非常直观的方式在页面中渲染。整个仓库使用 ES6 编写,并且测试覆盖率也非常好,源代码本身就是个不错的学习资源。如果寻找其他 D3.js 图表库的同学可以去搜搜 C3.js 和 NVD3.js。

基于 Chrome Dev Tools 的现代前端工作流

Umar Hansa 在 Render Conf 2017 上所做的分享,主题是基于 Chrome Dev Tools 的现代前端工作流,里面的干货非常多,如果你想彻底掌握 Chrome Dev Tools,这篇绝对不容错过。内容涵盖:FPS Meter、Paint Profiler、Timeline Recorder、Source Code Profiling 等 15 个主题。

玩转 React Native 动画所需要掌握的

设计得当的交互动画能够让你的应用惊艳用户,使用户沉浸其中,典型的比如 Slack 的官方应用,作者在这边文章会跟你解释改如何去解剖一个动画(透明度、位置、尺寸、颜色),让你了解 React Native 动画的潜力,并且分享了如何设计能够使用到整个 React Native 应用中的动画的技巧。

ES6 模块加载登陆 Chrome Canary 60

不知道 ES6 模块的同学应该去看看 Ponyfoo 或者 Jake 的文章,Chrome Canary v60 已经提供了 ES6 模块的支持,不过需要你手动打开支持。这篇文章可以说是新特性尝鲜文章,并且对如何开始在项目中使用这个功能、如何做恰当的回退都提出了可行的方案。

execa:一个更好的 Node.js child_process

由在 npm 上发了 1000+ 个包的 Sindre Sorhus 出品,相比 Node.js 内置的 child_process,这个会好用很多,主要的优点有:Promise 化、自动处理子命令输出结尾、比内置大 500 倍的输出 Buffer、更好的 Windows 支持、在父进程退出时自动清理子进程等,经常用 Node.js 来写脚本的同学可以考虑看看。

如何让 Git 使用我最喜欢的编辑器?

对标题我先稍作解释,Git 的某些操作可能会打开系统中的某个编辑器让你填写内容,典型的就是 commit 的时候如果没指定 commit message,就会默认打开 VI 让你填写,如何把填写 commit message 的编辑器替换成我自己喜欢用的 Vim、Atom、VSCode?改下全局配置就行了,高票答案中有两个方案,要仔细看。

Keycastr:小巧的按键可视化工具

在你做技术演示、录制编辑器快捷键或者其他的 GIF 动图时,如果想全方位的把你的操作展示给观看的人,按键可视化必会让你的输出增色不少,Keycastr 是 Mac 下的一款按键可视化小工具,启动的时候会报错,你需要用管理员身份给他 Accessibility/Privacy 权限。

Vim Awesome:非常棒的 Vim 插件站点

不是典型的 Awesome 清单,而是个独立的网站,收录了所有的 Vim 插件,做了分类,首页上能看到最受欢迎的 Vim 插件,使用 Vim 的同学请收下,使用其他 IDE 的同学请绕路,哈哈。

codecopy:让你成为更好的代码摘抄员

或多或少,我们都会从网页粘贴代码到自己的项目中,codecopy 是一款加速你代码摘抄过程的浏览器插件,在页面所有疑似代码片段的地方增加复制按钮,目前支持 Chrome、Firefox,支持的网站基本包括了所有程序员常去的网站,比如 GitHub、GitLab、Medium、NPM 等。

如何知道仓库的代码行数?

有句话,可能很多人忽略,但是却是个不争的事实:没有 BUG 的代码就是没有代码。优秀的工程师是能用更短小、简洁的代码写出相同的功能的,即使第一次没有写出来这种代码,他通过后续的重构也能达到,那么怎么跟别人证明重构能让代码变少呢?你需要一个计算代码行数的工具。

Facebook 开源 JS 代码优化工具 Prepack

Facebook 近两月在开源领域动作频频,最近又开源了 Prepack:优化 JS 源代码的工具,实际上它是通过部分求值器(Partial Evaluator)在编译时执行原本在运行时的计算过程,并通过代码重写来提其执行效率。该怎么看待 Prepack?知乎上不少同学从不同角度发表了看法。

关于监控的几个基础问题

如果你觉得系统监控跟前端没啥关系,那就认识太局限了。页面的加载速度、JS 报错的数量趋势都是前端工程师应该负责的范畴,但是具体到监控,很多时候,做了跟没做一样,有时甚至都没做。介绍监控的常识问题,非常值得你阅读。

create-next-app:快速开始 React + Next.js 项目

create-next-app 看名字就很像 create-react-app,能够快速的帮你开始一个 React + Next.js 的项目,Next.js 不多解释了。该命令行工具简化项目初始化之外,还提供了超过 10 个项目模板供你选择,比如你可以选择性的加入 Redux 或者 Mobx 等 React 全家桶玩具。

react-native-masonry:灵活的砖块布局组件

砖块布局(Masonry Layout)常用来展示多列的多图页面,在 WEB 端和 APP 端都比较常见,react-native-masonry 给你提供了可以直接在 react-native 中使用的组件,支持动态列、图片渐进加载以及事件绑定。

egghead.io:20 分钟掌握 async/await

async/await 能让 JS 的可读性再上一个台阶,但实际使用中你可能还是会碰到不少问题,比如如何和匿名函数、箭头函数结合使用?多个 async 如何排列性能最好?花 20 分钟学习下这里的课程,或许你能发现自己之前的不正确用法。

Chrome Headless 终于来了

Headless Chrome 在 Chrome 59 中已经可用,把 Chrome 的强大能力带到了命令行中,搞浏览器端持续集成和功能测试的同学可以上手玩玩了?这篇文章作为入门。稍微解释下 Headless 的概念,只需要通过命令行去访问,不需要用户界面的工具都可称之为 Headless,早期的 PhantomJS 就属于这种。

pkg:把 Node.js 应用打包成可执行文件

zeit.co 出品的命令行工具,帮你把 Node.js 应用打包成可执行文件,可以直接部署到任何环境,支持跨平台,没有 Node.js 运行时也是没问题的。基于他你把 Node.js 应用打包成安装包分发给客户。国内貌似阿里有实践,但是没有系统的开源出来。

rn-splash-screen:用 JS 控制的 APP 闪屏组件

APP 闪屏是 iOS 中率先使用的提高用户感知速度的设计,后来部分 APP 拓展了这个设计的外延,在启动的时候展示或者播放广告,在 React Native 中也是可以实现的,这个库同时支持 iOS 和 Android。

Git 如何提交只改了文件名大小写的变更?

在对文件命名大小写不敏感的文件系统中,如果你改了文件名(只是大小写变化),Git 默认模式是识别不了这种变化的,自然就无法提交,那该怎么做呢?有不少方法,看看 StackOverflow 的讨论。当然绕过这个问题的办法是约定所有的文件名小写。

如何更好的组织 React 项目的代码?

项目代码的组织方式在很大程度上决定了新手上手项目的速度,项目后期的维护成本,基于代码角色(比如 component、container、action、reducer)的代码组织方式被很多人使用,也出现在很多脚手架工具中,那么这种组织方式到底适不适合项目的长远发展呢?从个人经验来说,基于业务领域的顶层组织可能更适合长远的可维护性。这篇文章给出了可行的代码组织建议。

给 Node.js 新手:提高效率必备的工具和库

不少刚入门 Node.js 的同学可能都会问这个问题,新手该如何利用社区中的工具和库最大程度的提高自己的效率呢?JS 语言基础当然是不可少,因为如果你没有提高效率的基础知识,效率自然无从谈起。接下来就是工具和库的选择,要做到尽量少的浪费时间,这篇文章做了梳理,包括编辑器、代码库、命令行工具等几大类。

React Amsterdam 大会学习资料

React Amsterdam 也是质量非常不错的 React 技术交流会,整体内容分为 React 和 React Native 两条主线,少数几个分享者还就相同主题在 React Conf 2017 上做了分享,大会在 Youtube 上有直播,自己去搜索就好,建议先仔细看看分享日程,然后在视频中选择性观看。

代码中添加注释之好坏丑

有句经典:好的代码自身就是文档。在代码中添加注释有哪些禁忌,有哪些建议,掘金翻译计划已经为你准备好了。当然,如果想写出一手漂亮的代码,还是建议去阅读更有体系的《The Art of Readable Code》,这本书也有中译本,但我强烈建议看英文。

TypeScript + Node.js 的 Yeoman 生成器

想使用 TypeScript 但是嫌工作流工具的拼凑过程太麻烦?可以试试这个 Yeoman Generator,能够让你快速开始使用 TypeScript 编写 Node.js 的包,实际上给浏览器编写也是可以的,生成的代码就包含了各种构建、测试的脚本,甚至还提供了 Visual Studio Code 的任务配置。

想看更多类似内容?