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

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

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

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

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

2017 年用于 UI 设计的 CSS3 和 JavaScript 动画库(TOP 9)

前端网页设计在过去的十年里经历了一场革命。在2007年,我们大多数人仍在设计静态杂志布局,在2017年,我们重新设计了数字机器,有成千上万的调整、协调、移动的部件。

简单的说,很好的UI设计师还需要成为很好的动画师 – 需要对网络动画技术有一个很好的理解。

这是我们指南中最新更新的,帮助你为每个任务选择正确的动画库。我们将通过 9 个免费的、编码良好的动画库,最适合于UI设计,它们的优点和缺点,以及何时选择它们。

请记住,我们是从一个熟悉代码的UI设计师(而不是从代精通代码的开发人员)的角度来看待每个库。这些库中有一些是纯 CSS 实现的。其他是JavaScript 的,但是,除了了解基本的 HTML/CSS 之外,使用他们你不需要更多的其他知识。链接一个动画库 – 添加一个 CSS 类 即可。
继续阅读

PostCSS及其常用插件介绍

前几天,PostCSS 6.0 分布了。

PostCSS 处理了很多你不必处理的乏味工作。它很巧妙的不同于预处理器,提供了可选的且更简洁的编程语言,来编译成 CSS,如 Sass、Less 与 Stylus。得出这个结论的部分原因是:

  • 它的名字。PostCSS 既能在预处理器将源代码编译成 CSS 之前也能在其之后对文件执行操作。
  • PostCSS 能替代你的预处理器。现在有很多插件实现了一些设计,如变量、 嵌套、mixins 以及 extends。

然而,虽然你可以构建自己的预处理器,但除非你想限制功能并加快编译速度,你没有别的该这么做的理由。就我个人而言,为增强 CSS,我使用 Sass,再加以 PostCSS 辅佐。没什么波澜,可能是对于大多数前端使用者来说没什么大的影响,因为通常大家都是使用其插件。

CSS 预处理器 和 CSS 后处理器

在说 PostCSS 之前,先了解一下 pre-processor 。
继续阅读

Sass入门教程

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

  • 简单简洁
  • 语义化(expressive)
  • 重复使用性好(reusable)
  • 可维护性和扩展性好

Sass 的语法分为:

  • 新的SCSS  ( Sassy CSSSass 3,扩展名为*.scss);
  • 旧的SASS  ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass)

关于两者比较的补充可以参考这篇文章 What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:http://www.sassmeister.com/

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:http://www.css88.com/doc/sass/

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。 继续阅读

更多关于Flexbox布局如何工作的 – 用大彩图和GIF动画解释

上一篇文章我们入门了几个基本的 Flexbox 属性:flex-directionjustify-contentalign-itemsalign-self

这些属性对于创建基本布局非常有用。 但是一旦你开始使用Flexbox构建网页的时候,你需要更深入学习Flexbox 属性,以发挥它的潜力。

现在让我们深入了解 Flexbox 的缩放 – 以及如何利用它来构建漂亮的自适应布局。

属性 #1: Flex-Basis

在上一篇文章中,我们主要了解了适用于容器元素的属性。这一次,我们专门介绍如何控制子元素(flex项)的大小。 继续阅读

Flexbox布局是如何工作的 – 用大彩图和GIF动画解释

Flexbox 布局将我们从CSS的邪恶(如垂直对齐)中拯救了出来。

很好,Flexbox 确实实现了这个目标。 但掌握新的弹性模型可能还是具有一点挑战性的。

所以,让我们以动图的形式来看看 Flexbox 的工作原理,这样我们可以使用它来构建更好的布局。

Flexbox 的基本原理是让布局变得灵活和直观。 继续阅读

2017年前端开发工具趋势

你有两年以上的前端开发经验吗?你会用 Sass 和 Autoprefixer 等高级的CSS辅助技能吗?你的 JavaScript 知识是否融汇贯通,你是否喜欢使用 Gulp , npm 和 jQuery ?如果是这样,根据 Ashley Nolan 的前端问卷调查,你是一个典型的前端开发工程师。

谎言,该死的谎言,统计数字和调查问卷

愚人码头注:谎言,该死的谎言,统计数字(英文:Lies, damned lies, and statistics),是一句著名的西方谚语。主要描述数字的说服能力,特别是用来讽刺一些使用统计数字支持、但毫无说服力的分析报告,以及人们倾向于贬低那些不支持其立场的统计结论。 维基百科

诸如此类的调查有助于你发现新工具和你的知识短板。至本文撰写时,本次问卷调查收到了5,254份答复,这是比大多数民意调查更具有样本价值。但是,调研结果是否代表真相还是应该抱审慎态度。。。

全球性的统计结果

这次问卷调查是全球性的,但将主要来自英语国家。 在其他地方开发或使用的流行工具可能被忽略。 继续阅读

一个健壮且可扩展的 CSS 架构所需的8个简单规则

这是一份清单,里面列出了在我多年的专业 Web 开发期间,在复杂的大型 Web 项目中学习到的有关管理 CSS 的事项。我多次被人问起这些东西,所以写一份文档记录下来听起来是个不错的主意。

我已经尽力尝试用简短的语言去解释它们了,然而这篇文章本质上还是长文慎入:

  1. 总是类名优先
  2. 组件代码放在一起
  3. 使用一致的类命名空间
  4. 维护命名空间和文件名之间的严格映射
  5. 避免组件外的样式泄露
  6. 避免组件内的样式泄露
  7. 遵守组件边界
  8. 松散地整合外部样式

介绍

如果你正在开发前端应用,那么最后你肯定需要关心样式方面的问题。尽管开发前端应用的技术水平持续增长,CSS 仍然是给 Web 应用赋予样式的唯一方式(而且最近,在某些情况下,原生应用也一样)。目前在市面上有两大类样式解决方案,即:

  • CSS 预编译器,已经存在很长时间了(如 SASSLESS 及其他)
  • CSS-in-JS 库,一个相对较新的样式解决方案(如 free-style 和很多其他的

两种方法间的抉择不在本文过多赘述,并且像往常一样,它们都有各自的支持者和反对者。说完这些,在下面的内容里,我将会专注于第一种方法,所以如果你选择了后者,那么这篇文章可能就没什么吸引力了。

主要目标

但更具体地说,怎样才能被称为健壮且可扩展呢? 继续阅读

降低样式计算的范围和复杂度

添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作,都会引起DOM结构的改变,从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局(多数情况下)。这就是所谓的样式计算。

TL;DR

  • 降低样式选择器的复杂度;使用基于class的方式,比如BEM。
  • 减少需要执行样式计算的元素的个数。

计算样式的第一步是创建一套匹配的样式选择器,浏览器就是靠它们来对一个元素应用样式的。

第二步是根据匹配的样式选择器来获取对应的具体样式规则,计算出最终具体有哪些样式是要应用在DOM元素上的。在Blink(Chrome和Opera的渲染引擎)中,至少从现在来看,以上两步在时间消耗上是差不多的。 继续阅读

CSS3 Flexbox解决方案

1df97ee6-992d-4723-aa69-68730625dcc7

长期以来,CSS 一直缺乏合适的布局机制。 变形,动画,滤镜,对这门伟大的语言来说都很有用的补充的,但是都没有解决 Web 开发人员一直抱怨的的主要的看起来似乎是永恒的问题。

终于,感谢Flexbox ,我们有了一个解决方案。查看说明、DEMO及项目源代码:Flexbox解决方案

这个网站不是另一个CSS框架。相反,它的目的是展示曾经很困难甚至无法单独使用 CSS 能解决的问题,而现在使用Flexbox简单易用。随着最近发布的Internet Explorer 11和Safari 6.1,最新的Flexbox规格已经被每一个的现代浏览器支持(愚人码头注:浏览器的支持请客,你可以看 http://caniuse.com/#feat=flexbox)。 继续阅读