FED

前端构建，指的是将开发环境中的代码编译、修改、重写成生产环境下可更快、更好运行的代码。比如压缩JS、CSS文件，或者合并JS、CSS文件，这些操作都是一个构建过程。可以不要前端构建吗？答案当然是可以，即生产环境和开发环境是同一份代码。如果开发和生产同一份代码，那么会出现以下问题：...

工欲善其事，必先利其器。在开始helloworld之前，先要学会使用以下工具。安装nodejshttps://nodejs.org/（可以参考阿里云ECS使用心得1：使用yum安装nodejs/npm环境），在这里nodejs是以下工具的运行环境。安装完成后，使用以下命令检验下：...

模块化是个相对概念，相对于整块、整体而言，模块通常是组成一个整体的最小单位。比如，你眼前的电脑，它在计算机网络世界里，它是个模块个体。而相对于一台电脑而言，电脑内部的CPU、内存才是最小的模块。如果你没有用过模块化，那你是否遇到过以下问题：...

假设这样一个场景：用户点击一个按钮，此时需要请求后端接口进行数据实时校验，如果校验通过则弹出新窗口并打开某个特定的URL，如果校验失败则给出错误提示并停留在当前页面不做任何处理。一般情况下，你可能会直觉想到这样去做，但显然问题没有这么简单，尝试后你会发现现代浏览器会屏蔽Ajax回调中的弹出窗口：...

HTMLhead头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head头部结构，移动端的meta元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。DOCTYPE(DocumentType)，该声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档使用哪种HTML或者XHTML规范。...

GIF/PNG/JPG/WEBP/APNG都是属于位图（位图,务必区别于矢量图）；GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复,webp图片格式现在还不普及：...

在所有HTML文档中规定DOCTYPE是非常重要的，这样浏览器就能了解预期的文档类型，告诉浏览器要通过哪一种规范（文档类型定义，DTD）解析文档（比如HTML或XHTML规范）；!DOCTYPE声明不属于HTML标签；tag;它是一条指令，告诉浏览器编写页面所用的标记的版本。...

这将意味着存在各种浏览器的兼容性问题。foreachin，对很多浏览器都不支持的。例如是不支持IE6，IE7，IE8等浏览器的。两种遍历方法的变量i的值是不一样的，foreachin无法获得对象的属性名，只能获取到属性值。最后总结一下使用建议：...

之前写过很久PHP,但现在是PHP黑，简单说一下为什么觉得PHP不好用的原因。语法设计不合理这个诚然有历史原因，但确实是不合理。很多被弃用的功能仍被广泛使用，新的功能被普及得很慢...

回想起来，大概是去年这个时候，Github宣布开始开发Atom,当时V2EX上到处都有人在求邀请码。因为Github并没有严格地限制下载和使用，所以虽然我当时没有邀请码，但也试用了一下Atom.当时的感觉是性能非常差，Bug非常多，非常难用，于是就放下了。后来2014年末，大概是听说Atom要发布1.0版本了（虽然到现在仍未发布），于是又下载试用了一个月左右，发现已经很少遇到Bug了，于是彻底从WebStorm迁移到了Atom,后来几个月变成了Atom的脑残粉。...

所谓“过滤器”，只是一个概念，可以理解是一个路由，也可以理解为一个中间件。原理非常简单，就是利用匹配规则，让其有限匹配在正常的路由前面处理就行了。比如有如下路由访问根目录就能看到index。在前面加上一个路由，封锁全部请求...

SublimeText快捷键...

发现最近大家都在关注有关前端开发的薪资问题，不同地方各有差异，今天我就总结一下发出来方便大家的查阅。根据你掌握的技能程度，薪水是不一样的。div+css，js会套用效果的4k到6k，新手熟悉切图，工作效率高的5k左右。有两年工作经验的，会ajax，可以手写代码，就是指常用的单词不用靠编辑器，了解一门后台语言（最好是php），不低于8k。对原生js有非常深入的研究，开发组件，框架库之类的，12k+，最低10k。最近比较流行移动终端，会这些的可能会更高一点的。...

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能，Chrome变成了一个必须掌握的工具。大多数前端开发者可能熟悉关于chorme的许多特点，例如使用console和debugger在线编辑CSS。在这篇文章中，我们将分享15个很酷的技巧，让你能够更好的改进工作流程。看完这些技巧你会惊奇而又兴奋的发现是不是很像SublimeText。如果SublimeText没有“Gotoanything”这个功能你不可能活下去。所以你会很高兴听到DevTools也有这个功能。当DevTools打开的时候，你可以按下Ctrl+P(在Mac上使用Cmd+P)来快速的寻找和打开你工程中的任意文件。...

今天就来说一说这个new。关于javascript的new关键字的内容上网搜一搜还真不少，大家都说new干了3件事：文字比较难懂，翻译成javascript：想想是这么回事哈，那就赶快试试：...

最近在找暑期实习，其中百度、网易游戏、阿里的面试都问到一些关于HTML5的东西，问题大多是这样开头的：“你用过什么HTML5的技术呀？”而后，每次都能扯到Cookie和localStorage有啥差别。这篇文章就旨在详细地阐述这部分内容，而具体WebStorageAPI的使用可以参考MDN的文档，就不在这篇文章中赘述了。Cookie是小甜饼的意思。顾名思义，cookie确实非常小，它的大小限制为4KB左右，是网景公司的前雇员LouMontulli在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在Cookie中存入一段辨别用户身份的数据来实现的。...

#Gulp，新一代流行的任务自动管理工具Gulp与Grunt一样，也是一个自动任务运行器。它充分借鉴了Unix操作系统的管道（pipe）思想，很多人认为，在操作上，它要比Grunt简单。##安装...

通过这些服务，一个没有HTML/CSS知识的人，就能在55分钟内搭建一个跨浏览器的页面。这是为网页设计师准备的完美解决方案，已经有超过26000人在使用Webflow。只能免费创建两个项目，想要创建更多项目的收费也很合理。这个工具真的很酷。如果你和我一样是个不喜欢GUI的前端，就可以在Webflow上导出几个免费的响应式布局模板。我还想推荐responsivelayoutgenerator和ResponsivePatterns。...

这是很赞的预处理程序。Prepros能编译很多种语言(LESS,Sass,SCSS,Stylus,Jade,Slim,Coffeescript,LiveScript,Haml,Markdown)，实时压缩和连接JS，优化图片，当CSS或HTML变化时自动刷新浏览器，多设备测试。所以你不用购买Liverload和Ghostlab，Prepros是开源、免费的。类似的功能只能通过Grunt实现，但Prepros让事情变得简单。...

在html里创建一个是下载链接是方便的，添加一个<a>标签和指向文件的href属性就行了。但是某些文件不会被下载（比如图像，pdf，txt，doc），相反，他们会在浏览器中被打开。如果你的站点是有服务器端的，你可以通过配置.htaccess文件来使得那些文件可以被下载。如果你的站点是被WordPress.com或者github页面托管的（静态页面），那么轻考虑使用<a>标签的download属性...