2017年最值得学习的前端框架和技术

JavaScript 的普及造就了一个非常活跃的技术,框架和库的生态系统。 这个生态系统不断涌现多式多样的框架和技术,对许多人来说都是高度的混乱。 那么你应该关注什么样的技术呢?

你应该在哪里方面投入时间来获得最大收益呢? 目前公司招聘哪些技术栈呢? 哪些技术增长潜力最大呢?

现在最重要的技术是什么?这篇文章高度概括了你需要知道的内容,你可以通过文章中的链接了解所有关于它的一些信息。

记住,当你在学习一些实际的代码时,您可以在 Codepen.io 上交互式地执行代码。如果你还在学习 ES6 ,您可以看看如何使用 Babel REPL 进行转译。 继续阅读

2017年成为全栈开发工程师的权威指南

根据 2016年 Stack Overflow 开发者调查 显示,全栈开发工程师是当今最受欢迎的开发者职业。 毫无疑问,有许多在线和现场教学课程可以帮助你成为全栈开发工程师,甚至帮助这些新开发人员找到高薪编程开发工作。

国内外有很流行的在线课程,比如: LyndaUdacityCourseraThinkful全栈开发工程师远程就业班带你轻松搞定node.js从前端小工到 BAT 中高级工程师的必备技能Vue2.0全栈实战项目WEB前端开发零基础课程React 大神进阶 等等。

除了这些在线课程,还有许多 现场教学课程 正在教人们成为 Web 开发人员所需的技能。

在这篇文章中,我不会讨论哪些在线或现场教学课程比较好。相反,我将提供一份我认为当今要成为一个全栈开发工程师所需最重要技能的权威指南,如果你以前从未编写过代码的话,或许可以获得一份好工作。我会从三个方面列出成为一个全栈开发工程师所需的最重要技能: 继续阅读

你必须收藏的Github技巧

选择完master branch之后,master自动变成了网站。master所有的提交会自动更新到网站。

精准分享关键代码

比如你有一个文件里的某一行代码写得非常酷炫或者关键,想分享一下。

可以在url后面加上

#L行号
比如,点击下面这个url:

https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L240

你便会跳到alloy_touch.js的第240行。

那么问题来了?如果我是一段代码,即多行代码想分享呢?也很简单:url后面加上
#L开始行号-L结束行号
比如,AlloyTouch的运动缓动和逆向缓动函数如下面代码段所示:
https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39-L45

其实也不用记忆你直接在网址后面操作,github自动会帮你生成url。比如你点击39行,url变成了
https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39
再按住shift点击45行,url变成了
https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39-L45
然后你这个url就可以复制分享出去了,点击这个url的人自动会跳到39行,并且39-45行高亮。

继续阅读

[前端日报]推荐一个GitHub/GitLab 代码结构浏览插件-Octotree

Octotree 是一个浏览器扩展(Chrome,Firefox,Opera和Safari),用以显示GitHub/GitLab 代码结构(代码树)。可以非常方便的浏览项目源代码,这样不必把每个项目拉取到你的机器。浏览器浏览时就像使用IDE目录结构,也不必来回的前进后退。

项目地址:https://github.com/buunguyen/octotree
chrome-github 继续阅读

打造一个自动化的前端项目

转载自:http://www.awesomes.cn/source/9

前言

作为一名前端开发者,刀耕火种的年代随着 NodeJS 等工具的出现,已经一去不复返了。如果你还停留在写着冗长的HTML代码,不断重复着复制粘贴,那么你应该继续学习了。

之所以写这篇文章,是源于前段时间我的一个Github个人主页项目。因为是要放在Github上的,所以只能是静态站点,那么所有静态页面如果一个一个手写的话,是很痛苦的。没有了后台程序,如何去定义模板文件?总不至于每个页面中都写上相同的 header 和 footer 吧。可以使用 Sass 去写 CSS 吗?可以使用 CoffeeScript 去写 JavaScript 吗?可以使用 Markdown 去写HTML内容吗?可以使用 Jade 去写HTML结构吗?

带着这些疑问,我将一步一步实现一个自动化的前端静态站点项目。

环境准备

Mac 或 Linux,不推荐Windows下开发,因为你会遇到很多蛋疼的问题,从本质上来说,你应该开始在Linux下做开发了。

如果你像我一样还在使用 Windows,可以安装一个Ubuntu虚拟机,然后通过 Samba 共享文件,用 SSH 和 Windows做连接,最终就能实现在你熟悉的 Windows下做开发(编辑文件),而运行环境却是 Linux。

1、创建项目

不管做什么开发,我们都应该遵循一定的规范,创建项目同样要注意文件夹的名字和结构。首先创建一个如下的基础项目结构,暂且就将项目命名为 auto-web

awesomes-cn

简单解释一下:

  • /src 源文件所在地。开发过程中的各种CSS和JS源文件都往这里面放。
  • /dist 目标文件所在地。上线前通过工具生成的CSS和JS目标文件都输出到这里。
  • /images 图片文件。
  • /vendor 第三方的 CSS、JS 和字体文件都存放到这里。
  • /views HTML 视图文件。

当然目前我们是手动创建的,可以设想一下,利用NodeJS,我们是完全可以做到一条命令创建出这样的文件夹结构。 继续阅读

Github 的 CSS 风格指南

这个CSS风格指南是在GitHub内部用于应用程序的指南。我们鼓励您建立一个适合你自己团队的风格指南。在你阅读这个之前,你需要大致了解SCSS语法和KSS文档。虽然我们通过KSS文档把风格移植到了SCSS上,但请务必立刻升级整个元素的CSS。不要混合少量SCSS和无格式的CSS。

编码风格:

  • 用两个空格的“soft-tabs”来缩进
  • 在属性声明的“:”后加上空格
  • 在规则声明后的“{”前加上空格
  • 使用十六进制颜色代码#000,如果不使用RGBA
  • 使用//来做注释块(而不是/**/)
  • 文档风格与KSS相同

这里有个好的语法示例:

// This is a good example!
.styleguide-format {
  border: 1px solid #0f0;
  color: #000;
  background: rgba(0,0,0,0.5);
}

继续阅读