Stylus似乎并不是很有名，以至于很多人不知道它是做什么的，但提到SASS相信有不少人听说过甚至使用过很长时间。其实无论是LESS、SASS还是Stylus甚至是Absurd这些预处理工具，都是对CSS的一种延伸和强化。出现这些工具的原因很简单，CSS本身只是一种描述性质的东西，甚至它不能算是语言而是样式表，所以我们需要一个有条件语句和变量甚至是函数的东西去动态生成CSS代码来达到提高效率和增强可维护性的目的。
本文主要以Stylus语法本身和简单的使用为主要内容，它的目的是介绍和简单指南。将不会过多涉及Javascript的API调用等问题。
介绍
官方的介绍非常简短而精炼：
Expressive, dynamic, r
继续阅读 »
上一篇文章简单介绍了 Source Map，接下来我们来看看如何利用各种工具来生成 Source Map。
什么是 Source Map？
Source Map 提供了一个与语言无关的方式，来将生产环境中的代码映射回开发环境中的原始代码。
在现代的开发流程中，我们的开发环境和实际线上环境的代码通常都不一样。在应用上线部署前，我们通常都要对我们的代码进行编译、合并、压缩或者其他方面的优化，这使得我们非常困难来准确定位会原始代码。但是，在生成过程中，Source Map 文件储存了这些位置信息，因此，当我们查找一行中的某个位置时，Source Map 文件可以准确定位到原始文件中的位置。这使得我们线上环境中的代码变得可读，甚至可调
继续阅读 »
content
{:toc}
往前推2到3年，前端工程师还在忧心忡忡地想，移动互联网时代下，前端是不是没有生存空间了。但今天一看，在我们团队，前端工程师超过一半的工作都是在做移动端的Web或者APP的开发。移动Web或者APP在技术本质上是和做桌面端Web没有本质区别，但是移动端的坑那是非常的多，通过学习这部分内容，让你成为一名桌面移动通吃的前端开发工程师。
继续阅读 »
在Javascript的开发过程中，经常会遇到一些重复性的任务，比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通常，我们需要使用不同的工具，来完成不同的任务，既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具，可以帮助我们自动管理和运行各种任务。
简单说，Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担。
安装
Grunt基于Node.js，安装之前要先安装Node.js，然后运行下面的命令。
```javascript
sudo npm install grunt-cli -g
```
grunt-cli表示
继续阅读 »
在大型、复杂和快速迭代的系统中，CSS 将非常难以维护。原因之一就是 CSS 没有作用域的概念，每个 CSS 都是全局的，这意味着对 CSS 的任何修改就可能导致一些 UI 的级联改变。
CSS 的扩展语言 -- CSS 预处理器，比如 Sass、Less 和 Stylus，使我们编写 CSS 更加容易，但在我看来，这些 CSS 的扩展语言并没有真正解决可扩展性问题。
在 CSS 支持作用域机制之前，我们需要一种机制，使我们的样式只与特定的 HTML 部分关联，这就是 CSS 方法论。本文将讨论如下的 CSS 方法论：
Object-Oriented CSS (OOCSS)
Block, Element, Modifier (
继续阅读 »
How to install Freshman theme?
please make sure you have already installed git tools and ruby tools(gem)
$ gem install sass
$ gem install jekyll
$ git clone https://github.com/yulijia/freshman21.git
继续阅读 »
为了UED前端团队更好的协作开发同时提高项目编码质量，我们需要将Web前端使用工程化方式构建；
目前需要一些简单的功能：
1. 版本控制
6. 编译SASS
2. 检查JS
3. 图片合并
4. 压缩CSS
5. 压缩JS
继续阅读 »
content
{:toc}
起因
起因是这样的，在尝试前后端分离的这条道路上，我自己也在不断摸索，感觉要把大部分的坑都踩踩了。目前我用的技术是：
webpack 自动构建
AMD 模块化 js
Sass 预处理 CSS
使用前端模板引擎 handlebars 解决动态操作将 html 拼接在 js 中的问题
但最近写了一个项目类似知乎这样的多页网站。前端 url 的处理让我觉得不够优雅。我使用的是 hash 的方式处理动态 url 的，为此我专门在知乎上提了一个问题：前端如何处理动态url？
继续阅读 »