最新文章

JS 驱动网站的 SEO 最佳实践

来自 Google 的工程师 John Mueller,跟大家分享现代网站(主要指大量使用 JS 网站) SEO 最佳实践,澄清了社区中关于 JS 网站 SEO 的一些认识误区,并给了不少有用的建议,需翻墙。

Split.js:轻量的视图分隔 JS 插件

Split.js 是一款轻量级的视图(面板)分隔插件,无任何外部依赖,对 HTML 的书写也没有特别的规定,只需要分隔的面板有相同的父节点。支持横向、纵向分割,相邻的面板中间自动给加上了可拖拽的分割线。

Egghead.io:Redux 入门教程

任何应用的状态管理都是至关重要的,Redux 被部分同学误解为是给 React 应用使用的状态管理工具,实际上他可以应用到更广义的 JS 应用中,本视频教程由 Redux 的作者(那个让 HMR(模块热更新)成为前端开发标配的男人)亲自录制,免费开放到了 Egghead.io 上,想学的赶紧去。

通过案例学会 React Native Navigator  原理及用法

React Native 入门的时候,脑子里面肯定很多疑问,React Native 里面是否有类似于 React Router 的东西?如果有怎么用?React Native 内置的 Navigator 就是用来干这个的,方便你开发多页面的 APP,这篇文章从最简单的例子开始教你如何使用 Navigator、传递参数、配置转场动画。

管理 React Native 应用样式的几点建议

入手 React Native 开发的同学有没有纠结过应用的样式代码到底该放到哪里?是单独抽出来,还是全部内联?共享的样式怎么办?实际上没有标准的做法,这篇文章会给你一些建议,让你的代码更好管理。

Froggy:玩儿游戏学会 Flexbox

这样说吧,Flexbox 对布局带来的便利只有学会的人能真正体会到,这个 24 关的小游戏,通过灵活运用 Flexbox 把青蛙放到正确的位置,助你掌握 Flexbox 里面的各种属性用途、用法。

如何使用 HTTP Headers 来保护你的 Web 应用?

无论是简单的小网页还是复杂的单页应用,Web 应用都是网络攻击的目标。开发者可以利用 HTTP 响应头来加强 Web 应用程序的安全性,通常只需要添加几行代码即可。本文将介绍 web 开发者如何利用 HTTP Headers 来构建安全的应用。虽然本文的示例代码是 Node.js,但基本所有主流的服务端语言都支持设置 HTTP 响应头,并且都可以简单地对其进行配置。

箭头函数你需要知道的都在这儿了

箭头函数是 ES6 中的新特性,让函数代码更简洁,箭头函数本身没有绑定执行上下文,参数等等。很多时候,我们犯了错误才会明白“动手之前要先去看文档”,MDN 上关于箭头函数文档非常详细,关于哪里能用,哪里不能用,都解释的很详细,如果你就生在 ES6 的环境,这个必须得仔细看。

漫画赏析:Linux 内核到底长啥样

这篇文章为大家解读来自 TurnOff.us 的漫画 “InSide The Linux Kernel” ,非常形象有趣。TurnOff.us 是一个极客漫画网站,作者 Daniel Stori 画了一些非常有趣的关于编程语言、Web、云计算、Linux 相关的漫画。

httpie: 比 curl 和 wget 更好用的网络工具

httpie 是一款比 curl 和 wget 更好用的网络请求命令行工具,Egghead.io 上还有一门介绍 http 基础知识的免费课程全程就是用的这个工具,你看了这个课程 httpie 的用法和 http 基础都学会了,注意这个工具的读法是 “爱吃提提派”,而不是“爱吃踢踢屁爱意”。

写给略懂 jQuery 同学的 Vue.js 入门教程

jQuery 在前端领域的地位就像是 Web Server 领域的 Apache,据统计现在全球有 70% 的网站都引用了 jQuery,技术在进步,如果你只是略懂 jQuery 想学 Vue.js 咋办?学习新东西的最大障碍就是思维方式的转变,阅读这篇文章看看学会 Vue.js 接受哪些新的思考方式。

前端精读评论:前后端渲染之争

十年前,几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染,但后来随着 Angular、React、Vue 等 JS 框架的崛起,开始转向了前端渲染。从 2014 年起又开始流行了同构渲染,号称是未来,集成了前后端渲染的优点,但转眼间三年过去了,很多当时壮心满满的框架(Rendlr、Lazo)从先驱变成了先烈。同构到底是不是未来?自己的项目该如何选型?建议阅读

VMS:基于 Vue.js 2.0 的 CMS 系统

类似项目收录过两个,前端类似 vue-admin,但是包含了完整的 Node.js 后端,有比较简单的权限控制(对于复杂的应用略显简陋),集成了常见的后台管理所需的组件:如 WangEditor 富文本编辑器、轻量级 Markdown 编辑器、七牛云图片上传、极光推送等。

谷歌推人工智能绘图工具 AutoDraw

AutoDraw 是谷歌推出的人工智能绘图工具,能根据你的手稿作为启发式信息,然后列出你可能想画的内容,对于画画不好的同学可能会很有帮助,不画画没关系,当个玩具也可以。为什么发在前端周刊?你对它的前端是怎么做不感兴趣么?

集成 Nuxt.js 到现有的 Node.js 项目

Nuxt.js 是基于 Vue.js 的前后端同构应用脚手架,Feathers 是 Node.js 的 MVC 框架,当然绝大多数同学在公司不会是从头开始一个新的项目,这篇文章讲了如何把 Nuxt.js 集成到现有的 Feathers 应用中去,对其他的 MVC 框架也有参考价值。

Vue Conf 2017 报名入口

全球首届 Vue.js 开发者大会将于 2017 年 5 月 20 日在北京航空航天大学新主楼会议中心举办。Vue.js 作者将出席本次大会,并发表主题演讲。这里是报名入口,早鸟票当天就被抢光了,你如果有女朋友,可以带过去,哈哈!

微信公众号可以注销了

微信公众号近期宣布支持自主注销,用户在核实身份信息或者验证帐号主体后,可以在公众号后台发起注销流程。帐号完成注销后,主体注册次数、运营者身份证信息、手机号码、帐号昵称、管理员微信号、注册邮箱等,均可释放。

图解 Chrome 中的滚动锚定机制

看到这个的时候,再次感慨 Google 做产品就是在做用户体验,不知道你没有遇到过,打开了一个长页面,已经开始阅读,突然页面跳了一下,丢失了你的浏览进度,这通常是因为你看的内容上面还有未加载完成的内容,它加载完就把下面的内容挤下去,产生页面跳跃的感知。Chrome 浏览器已经对这种体验问题做了优化,用了叫做 Scroll-Anchroing 的技术,技术方案细节在本文内的某个链接上。

酷壳:如何重构“箭头型”代码?

“箭头型代码”如果嵌套太多,可能看起来很美,因为对称,但是读起来想吐血,因为太长,会相当容易让维护代码的人(包括自己)迷失在代码中,因为看到最内层的代码时,你已经不知道前面的那一层一层的条件判断是什么样的,代码是怎么运行到这里的,所以,那怎么能不写出这种代码呢?这篇文章提供了思路。

toolingtips:如何在 git grep 的时候默认显示行号?

Git 相信很多人都熟悉,grep 自命令可用来快速查找,但是默认的查找结果不显示匹配的代码在哪一行,这其实不利于效率的提升,因为大概率你定位到文件之后还要去文件里再搜一遍才能定位到行,为什么不一步搞定呢?看看这里的第 2 个答案,修改的文件时 ~/.gitconfig。

React Native 微信功能集成实例

该仓库在 React Native 中集成了微信登录、收藏、分享、付款功能,支持 Android 和 iOS 版本,如果你最近在研究 React Native,接下来你很可能会有类似的需求。

GitHub:开源项目运维自动化工具箱

GitHub 官方整理的能帮助你运维开源项目的工具列表,能把日常的大部分运营工作自动化,比如代码风格检查、持续集成、包管理、变更日志生成、自动找 Reviewer、依赖包过期提醒。说实话,大部分工具其实可以用到公司内部的工程化实践中,前提是你愿意花时间去学习折腾。

React v15.5.0 正式版发布

Facebook 近期发布了 React v15.5.0 小版本,该版本的变化主要包括增加 CreateClass 和 PropTypes 的弃用警告和部分 Bugfix,具体可以参照原文,需翻墙。

工程师面试为什么要考算法和写代码?

很多面试工程师职位的抱怨,为什么面试的时候老是要考什么算法呀,还要现场写代码?弄得大家天天去刷面试题,这些有什么用?这篇文章聊了这么做的原委,笔者非常赞同。不是为了考算法而考算法,面试官需要在短暂的面试时间内确定候选人是否够聪明、是否能出活。

async/await 甩 Promise 几条街的 6 大理由

Node.js v7.6.0 中已经天然开启了 async/await 特性的支持,如果你还不知道他们是啥,放下手头的事情研究下先。async/await 可以说是更加优雅的 JS 异步处理方式,写出来的代码比 Promise 更加简洁,这里列出了 6 大理由,哈哈~

Vue.js 2.2 API 作弊条

这个作弊条完整列出了 Vue.js 2.2 版本的全部 API,并且附上了到官方文档的链接,排版也一目了然,喜欢使用作弊条的同学可以打印出来了。

MobX vs Redux: Comparing the Opposing Paradigms

Redux 与 MobX 是 React 生态中最火热的状态管理工具,社区也一直没有停止对上述两者的讨论。在不久前结束的 React Conf 2017 中,Preethi Kasireddy 也做了相关分享,MobX vs Redux: Comparing the Opposing Paradigms,让我们来看看她的观点是怎样的。英文好的同学可以去 Youtube 上看视频。

bash 入门学习指南

第 49 期周刊中有篇题为《优秀的程序员都喜欢命令行》的文章,而 bash 是众多命令行环境中的经典,这篇文章列出了能够在 bash 中完成的各种操作,比如文件、目录、文本、网络等,没有非常复杂的参数讲解,非常适合入门。

通过 .npmrc 打磨你的 Node.js 开发环境

对于 Node.js 开发者来说,每天使用 npm 命令行的次数恐怕是仅次于编辑器的,Node.js 生态的蓬勃发展离不开 npm,npm 命令行工具是高度可配置和自定义的,这篇文章列出了可以通过 .npmrc 来完成的优化你开发环境的全局配置。

Reactide:专门为 React 定制的 IDE

Reactide 是收款专门为 React 定制的集成开发环境,支持 Windows、Mac,目测也是使用类似于阿童木的技术编写的,使用 Reactide 开发 React 应用不需要任何配置,你只需要打开文件、编辑、保存,就能预览效果。还在早期开发阶段,有兴趣的同学可以试试。

如何通过 HTTP Header 让你的应用更安全?

这篇发表在 smashingmagazine 的文章介绍了如何通过设置恰当的 HTTP Header,让你的应用更安全,具体来说就是如何避免被人内嵌、如何避免 XSS、如何避免被缓存、如何避免点击劫持、如何避免嗅探。严肃的工程师都应该把这些安全措施用到实际项目中。

你看不到的 CSS 属性

前端日常工作中,你的首要目标可能就是让页面元素看起来跟设计图完全相同,实现目标的过程跟结果相比起来可能并不是那么重要,这也意味着,使用 CSS 的时候,我们会更关心视觉效果而不是 CSS 究竟是如何工作的,有过部分工作经验的同学可能已经意识到,CSS 代码的视觉效果会受到部分不可见属性的影响,比如 display 属性,怎样才算是真的掌握了 CSS ?通过这篇文章认真学习不可见属性。

如何处理 Node.js 中的 Unhandled Promise Rejection

Node.js 从 V6.6.0 开始,会在命令行中把未处理的 Promise Rejection 打印成 Warning,而 Promise Rejection 通常意味着我们的应用抛出了错误,未来的 Node.js 版本遇到 Promise Rejection 会直接抛错而不是简单的警告,我们在现在的代码中该如何处理这种问题?有什么坑?都在这篇文章里啦。

调用 JS 函数的 11 种姿势

这个 gist 列出了调用 JS 函数的 11 种姿势,然后给大家挖了一个大坑,后面的评论区还有不少补充,估计大多数同学只用过其中的几种,站在个人角度,冷门的方式不建议用,但是站到你面前,你要能认出来。

Harry Roberts 的开发环境和装备

不知道 Harry Roberts 的同学总该知道 csswizardry.com 这个网站吧,他就是这个网站的博主,他在这篇文章中贴出了自己的开发环境和装备,工欲善其事必先利其器,如果你想效率非常,对开发环境的调校和练习是必不可少的。

透视 webpack 构建,把 CommonsChunkPlugin 用到极致

webpack 官方开发组在 twitter 上发起了一个活动,让大家使用 webpack-bundle-analyzer 把打包后的 webpack 依赖可视化截图发出来,然后给诊断 webpack 配置不合理的地方,这篇文章把大家典型的错误姿势做了纠正,你需要自己研究下,很大概率,你用的姿势也不对。

通过实例搞懂 Grid 和 Flexbox 两种布局方式

做前端的同学不光要着眼于 JS 的变化,CSS 领域也在不断演化,从早期的 table 布局,到后来的 div + css 布局,再到 flexbox 布局,现在出现了更好用的 grid 布局,对于新出的这两种,flexbox 和 grid 有何异同?对比起来可能学习更快。

为什么优秀的程序员喜欢命令行?

要给优秀的程序员下一个明确的定义无疑是一件非常困难的事情。擅长抽象思维、动手能力强、追求效率、喜欢自动化、愿意持续学习、对代码质量有很高的追求等等,这些维度都有其合理性,不过又都略显抽象和主观。这篇文章的作者有他独到的观点,我也非常赞同,文中列出了工程师可以通过命令行完成的很多事情。

想看更多类似内容?