- 博客(34)
- 收藏
- 关注
RSS订阅转载 CSS分层
随着CSS的发展，使用CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。在我前面的文章中讨论很多关于CSS的问题都可以通过使用一个适当的CSS策略来避免。在这篇文章里，我将着重于讨论使用一种方法或者一个命名规则所带来的好处。这里有很多可供使用的前端方法和命名规则，每个都有自己的优缺点。在几乎所有的案例中CSS被分割成更易于管理的代码“块”。
2015-07-03 09:46:21
903
转载 Materialize - 响应式 Material Design 框架
由谷歌创建和设计的 Material Design（材料设计）是一种设计语言，结合成功的设计的经典原则以及创新科技。谷歌的目标是开发一个设计系统，让所有的产品在任何平台上拥有统一的用户体验。 Materialize 是一个基于材料设计的一个现代化的响应式前端框架。他们做了最繁重的工作，为您提供默认的样式，结合了您的自定义组件。此外，他们还改进动画和过渡，为开发人员提供流畅的
2015-03-03 13:21:52
1373
1
原创 用karma测试angularjs应用
介绍网上有很多就不赘述了Karma的安装sudo npm install karma -g网上只给了这步，由于版本迭代会导致本地找不到KARMA命令。像很多模块的最新版本一样，只需再安装个客户端就OK了sudo npm install karma-cli -g再进到项目目录初始化karma initWhich testing framework do you wan
2015-03-02 10:50:47
751
原创 配置MAC开发环境笔记
赶上公司硬件更新，需要重新配置下新机。这里做下记录先安装XCODE（自带终端命令）安装oh my zsh（扩展命令）curl -L http://install.ohmyz.sh | sh安装brewruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go安装gitbrew install git
2015-02-11 17:51:41
723
转载 AngularJS: Factory vs Service vs Provider
When you first get started with Angular, you’ll naturally find yourself flooding your controllers and scopes with unnecessary logic. It’s important to realize early on that your controller should be v
2015-02-11 11:20:03
738
转载 nodejs http 发送请求
在近期的项目重构中，需将前后端独立开来，前端并不与MONGODB直接打交道，通过HTTP调用后端提供的RESTful进行数据交互，Node做为中间层，负责向模板填充数据。使用http模块发起请求GET请求var http = require('http');var qs = require('querystring');var data = { a: 123, ti
2015-01-23 19:46:14
606
原创 在Ubuntu下安装mongodb与nodejs
今天在阿里云的服务里搭建mongodb与nodejs。在安装过程中遇到很多问题，感谢基友的指导，特此总结下。同网上的教程不太一样，我下的都是直接使用的版本，不需要先./configure再make什么什么的。首先来说node：apt-get updatesudo apt-get install nodejssudo apt-get install npm就完毕了，是不是很简单！
2015-01-19 17:54:59
536
转载 移动前端不得不了解的html5 head 头标签
本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签。移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta标签显得非常重要。DOCTYPEDOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种
2015-01-16 18:30:06
524
转载 Async详解之一：流程控制
为了适应异步编程，减少回调的嵌套，我尝试了很多库。最终觉得还是async最靠谱。地址：https://github.com/caolan/asyncAsync的内容分为三部分：流程控制：简化十种常见流程的处理集合处理：如何使用异步操作处理集合中的数据工具类：几个常用的工具类本文介绍其中最简单最常用的流程控制部分。由于nodejs是异步编程模型，有一些在同步编
2015-01-05 11:20:48
759
原创 用gulp-livereload实现自动刷新页面（v3.0.2）
第一步：安装$ sudo npm install gulp -g$ sudo npm install http-server -g安裝 Chrome Extension: LiveReload 第二步：配置Gulp： 进入项目目录后在终端输入：npm init //用于创建package.json与gruntfile.jssudo np
2014-12-17 13:05:16
3603
转载 “流式”前端构建工具——gulp.js 简介
Grunt 一直是前端领域构建工具（任务运行器或许更准确一些，因为前端构建只是此类工具的一部分用途）的王者，然而它也不是毫无缺陷的，近期风头正劲的 gulp.js 隐隐有取而代之的态势。那么，究竟是什么使得 gulp.js 备受关注呢？Grunt 之殇gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了
2014-12-16 09:52:55
619
转载 常用meta整理
元素概要标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School必要属性属性值描述contentsome text定义与http-equiv或name属性相关的元信息
2014-12-05 15:58:52
833
转载 Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
grunt.initConfig方法用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。cwd：需要处理的文件（input）所在的目录。src：表示需要处理的文件。
2014-12-05 12:42:53
1091
转载 socket.io emit的几种用法解释
// send to current request socket clientsocket.emit('message', "this is a test");// sending to all clients except sendersocket.broadcast.emit('message', "this is a test");// sending to all clien
2014-11-21 14:08:02
34048
3
转载 Styling Checkbox
复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般就像下面这样： 这取决于操作系统和浏览器，有些时候，这种样子并不能满足设计要求，这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式，比如拿到这样一张设计图： 在过去，想要通过简单地修改样式达成这种设计效果根本不行，不过，现在借助强大的 CSS3 属性 ap
2014-10-13 17:06:53
518
转载 简单的手机页面触屏滚动
(function(){ var oTabWrap = document.querySelector('#sigle_ul'); var aSigles = oTabWrap.getElementsByClassName('sigle_page'); var oPrev = document.querySelector('#js_prev');
2014-10-06 20:34:28
735
转载 开始编写sass
// sass@mixin bordered($color: #000) { border: dotted 2px $color;}.header { @include bordered; }.footer { @include bordered(#BADA55); } //编译的CSS.header { border: dotted 2px black; }.f
2014-09-23 19:10:38
473
转载 express 4.2.0安装与使用
npm install -g express在以前的书上，装上这个就可以直接命令行使用Express了，但是现在的版本Express已经把命令行相关的部分分离了，需要再安装：
2014-08-25 14:54:27
594
转载 Javascript异步编程的4种方法
你可能知道，Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段J
2014-08-13 19:00:43
461
转载 CSS3动画帧数科学计算法
循环动画按循环方式可以分为：用CSS代码的方式表示，就是：单向循环： animation-iteration-count: infinite; animation-direction: normal;双向循环： animation-iteration-count: infinite; animation-direction: alternate;先看看做一个动
2014-05-22 21:09:53
1328
转载 模拟用户点击弹出新页面
相信用过window.open的小伙伴们都遇到过被浏览器拦截导致页面无法弹出的情况；我们换下思路，什么情况下的新页面弹出才不会被浏览器拦截呢？比如标签这种就不会；那么我们只要模拟下用户去主动点击这个标签就不会有拦截的问题了。先定义好HTML标签：
2014-04-14 18:14:19
686
转载 一些常用js方法
/*使用命名空间*/var GLOBAL = {};GLOBAL.namespace = function(str){ var arr = str.split('.'),o = GLOBAL; for(k=(arr[0]=="GLOBAL")?1:0;k<arr.length;k++){ o[arr[k]]=o[arr[k]]||
2014-04-12 17:03:04
689
转载 提升开发速度！随时可用的HTML5代码片段
HTML 很容易写，但创建网页时，您经常需要重复做同样的任务，如创建表单。在这篇文章中，我收集了10个超有用的 HTML 代码片段，有HTML5启动模板、空白图片、打电话和发短信、自动完成等等，帮助你提高开发速度。 当启动一个新的项目的时候，你需要一个启动模板。这里是一个简洁干净的模板，可以作为 HTML5 项目的基础。HTML5 启动模板
2014-04-10 16:24:20
809
转载 CSS + DIV 让页脚始终底部
1、利用 bottom 属性？在实践之前，很容易联想到用 CSS 里面的 bottom 属性让页脚在最下面，可是这个是行不通的。如果使用了如下方法：footer{ bottom: 0px;}
2014-04-09 11:42:20
6000
1
转载 你可能不知道的5种 CSS 和 JS 的交互方式
CSS和JavaScript: 在各个浏览器版本中的分界线似乎变得越来越模糊，两者所完成的功能差异非常明显,但说到底他们都是前端技术，所以确实需要紧密地配合。虽然我们将代码拆分到独立的 .js 文件和 .css 文件中，但他们之间还能进行一些更密切的交互，这些通常是普通JS框架所不支持的。 下面是你可能不知道的CSS和JS的交互的5种方式: 使用JavaScript获取CSS
2014-03-20 19:21:31
586
转载 非阻塞JavaScript脚本加载【优化网站】
昨天在看《高性能JavaScript》，提到Javascript是以阻塞的方式加载的，也就是说：当JavaScript 运行时其他的事情不能被浏览器处理。根据Yahoo的建议，脚本放在最后。让网页先显示，先得到一个正确的外观，再加载脚本，为网页添加各种功能，锦上添花，是一个很好的实践。以非阻塞的方式加载Javascript，就是这样的实践。其原理是使用一个脚本来加载其它脚本，这个脚本就是loa
2014-03-14 10:33:13
864
转载 Web开发者不容错过的10段CSS代码
1. CSS Resets 网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。2.经典的CSS Clearfix 这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内
2014-03-12 10:11:01
1354
转载 开发中可能会用到的几个 jQuery 小提示和技巧
1) 禁止右键 在开发 Web 应用的时候，有些情况需要禁用右键单击功能。使用此代码，jQuery 开发人员可以在网页上禁用鼠标右键点击。代码如下：$(document).ready(function() { //catch the right-click context menu $(document).bind("contextmenu",function(e) {
2014-03-06 20:16:05
758
转载 Opera、FireFox、IE、Safari中CSS差别及兼容CSS的解决方法
一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}2, IE6
2014-02-27 10:44:49
9194
原创 在webstorm中使用git
git的安装与配置略过1.在webstorm中选择VCS==>Checkout from Version Control==>GitGit Repository URL: git@xx.xx.xx.xx:项目名称Parent Directory:本地要存放地址的父目录Directory Name:项目名称-------------------------------------
2014-02-26 16:10:12
4275
原创 在HTML中使用<script>做模板
有时我们会遇到在HTML中使用模板进行填充内容而又懒的使用文件操作（如XML）。可以用本文中的方法：html中加入标签，注意此时类型为text/html并在标签中加入任意HTML结构，需要动态定制的内容可用[]括起---------[Title][Content]然后在JS中先定义用于对带[]的内容做替换的正则表达式var reg = new RegExp("
2014-02-22 10:39:03
3755
原创 aralejs与alice
介绍个前端的简单框架css框架：http://aliceui.org/js框架：http://aralejs.org/此为阿里的前端框架优点是上手快，开发起来也很方便，很多现成的代码直接拿过来用。功能语句一眼就能看明白。缺点是该框架毕竟是服务于支付宝，不利于扩展
2014-02-22 10:35:54
1140
原创 sea.js简单的调用
seajs是个很简单的模块开发框架，并没有太多可说的。只需要如下语句便可使用。seajs.config({ base: "./sea-modules/",//基址路径，“./”表示同级目录，不加为相对路径 alias: {//{缩写：长地址} "jquery": "jquery/jquery/1.10.1/jquery
2014-02-22 10:32:33
737
转载 1.初识backbone.js
backbone，英文意思是：勇气，脊骨，但是在程序里面，尤其是在backbone后面加上后缀js之后，它就变成了一个框架，一个js库。backbone.js，不知道作者是以什么样的目的来对其命名的，可能是希望这个库会成为web端开发中脊梁骨。好了，八卦完了开始正题。backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及custom事
2014-02-22 10:30:27
644
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人