初识D3
D3是指数据驱动文档（Data-Driven Documents），根据D3的官方定义：
D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。----D3维基（2013年8月）
从一个Hello Wordld示例来看看d3如何运行 点击查看在线DEMO
```javascript
function render(data){
var demo = d3.select('b
继续阅读 »
最近写手机页面颇多, 经常有弹出框, 或者下拉列表, 如果弹框或者下拉列表的内容太多,出现了滚动条, 恰好外面的内容也很多,也有滚动条的话,就会出现一种情况:
比如上图, 当用力划一下屏幕, 下拉框滚到底了之后, body 随之也开始滚, 很讨厌。出现过好多次了, 而且测试逼我太紧~
我要解决这个问题啊
其实很简单, 只要弹出下拉列表的时候让下层的元素不能滚动就好了。
css
.modal-open {
overflow: hidden;
}
js 的话就这么写:
```js
function show($div) {
$('body').addClass('modal-open');
/
继续阅读 »
为了UED前端团队更好的协作开发同时提高项目编码质量，我们需要将Web前端使用工程化方式构建；
目前需要一些简单的功能：
1. 版本控制
6. 编译SASS
2. 检查JS
3. 图片合并
4. 压缩CSS
5. 压缩JS
继续阅读 »
声明
本文转载自：The Bloom of Youth|锦瑟华年
Hexo 博客系统的核心支持生成目录（Table of Contents），但其默认的主题 Landscape 并不支持目录的显示。我们只需对 Landscape 的主题文件稍作修改并添加一点目录的 CSS 就可以在文章前面显示友好的目录了。
修改 Landscape 主题的 ejs 文件
我们首先要编辑文章显示页面的模板，也就是 themes/landscape/layout/_partial/article.ejs 文件。为了将目录生成在正文之前，我们首先在这个文件中找到，并在这一行之前加入如下代码：
javascript
Table of Conte
继续阅读 »
content
{:toc}
起因
起因是这样的，在尝试前后端分离的这条道路上，我自己也在不断摸索，感觉要把大部分的坑都踩踩了。目前我用的技术是：
webpack 自动构建
AMD 模块化 js
Sass 预处理 CSS
使用前端模板引擎 handlebars 解决动态操作将 html 拼接在 js 中的问题
但最近写了一个项目类似知乎这样的多页网站。前端 url 的处理让我觉得不够优雅。我使用的是 hash 的方式处理动态 url 的，为此我专门在知乎上提了一个问题：前端如何处理动态url？
继续阅读 »
近期在公司把 PC-WWW 项目从之前比较复杂的脚本改成了webpack，随后因为看到webpack2发布了正式版本又升级到了 webpack2。效果非常好。
为什么使用 webpack
webpack 是一款非常非常强大的前端资源处理工具，可以把所有前端需要的资源统一处理。比如js文件，css文件，甚至图片，字体文件，html文件。通过一个个独特的 loader 来对文件进行一些处理。
继续阅读 »
看了 Lea Verou 在 CSSConf 2015 上面的演讲 The Miss Slice 后觉得很兴奋，又一次感受到了 CSS 的强大之处
继续阅读 »
在Javascript的开发过程中，经常会遇到一些重复性的任务，比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通常，我们需要使用不同的工具，来完成不同的任务，既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具，可以帮助我们自动管理和运行各种任务。
简单说，Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担。
安装
Grunt基于Node.js，安装之前要先安装Node.js，然后运行下面的命令。
```javascript
sudo npm install grunt-cli -g
```
grunt-cli表示
继续阅读 »
gulp的一个案例，主要是对gulpfile.js中的任务进行分割，完成清理、文件复制同时进行筛选压缩、以及html中js和css引用的替换等
more
gulpfile.js
```javascript
'use strict';
var gulp = require('gulp');
var config = {
pkg: require('./package.json'),
publicDir: ['./{public,public/}'],
resourcesDir: ['./{resources/,resources/}'],
apps: ['ads', 'analysis', 'h
继续阅读 »
今天系统突然响应慢了很多，所以就考虑对目前的系统进行优化，底层mysql开启慢查询日志的记录，同时使用一些测试的工作对网站的性能进行测试。我们使用chrome浏览器进行分析加载速度的时候发现很多没有注意到的细节，这是我们以后运维需要加强学习的地方。我们发现有很多css和js文件都100多kb，造成资源加载的时候会非常慢，同时使用一些在线工具eg阿里测等进行监测，我们确实有很多工作可以做，例如开启tomcat的gzip压缩。
继续阅读 »