随笔分类 -  前端

1
grunt使用小记之uglify：最全的uglify使用DEMO
摘要：grunt-contrib-uglifyuglify是一个文件压缩插件，项目地址：https://github.com/gruntjs/grunt-contrib-uglify本文将以一个DEMO来展示如何使用uglify插件。DEMO环境package.json:{ "name": "grunt-demo", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-c 阅读全文
posted @ 2013-11-29 12:01 artwl 阅读(34383) 评论(6) 推荐(10) 编辑
grunt使用小记之开篇：grunt概述
摘要：Grunt是什么？Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩，编译，单元测试，代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务，你所需要做的只是配置好Grunt，这样能很大程度的简化你的工作。如果在团队中使用Grunt，你只需要与其他人员约定好使用Grunt应该规避的问题，就能够很方便的自动化的处理大部分的常见工作任务，你所付出的努力几乎为0。为什么要使用Grunt？Grunt是一个庞大的生态系统，每天都在成长。你可以自由的选择数以百计的插件以帮助你自动化的处理任务。如果你所需要的插件还没有被人创建, 那么你可以自己创建插件并通过npm很方便的发布以供更 阅读全文
posted @ 2013-11-29 11:27 artwl 阅读(792) 评论(0) 推荐(0) 编辑
HTTP权威指南阅读笔记五：Web服务器
摘要：Web服务器会做些什么：1、建产连接：接受一个客户端连接，或者如果不希望与这个客户端建立连接，就将其关闭。 1）处理新连接 2）客户端主机名识别 3）通过ident确定客户端用户ident在组织内部可以很好地工作，主要是因为以下原因导致在公共因特网上并不能很好地工作：1、很多客户端PC没有运行ident识别协议守护进程软件2、ident协议会使HTTP事务处理产生严重的时延3、很多防火墙不允许ident流量进入4、ident协议不安全，容易被伪伪5、ident协议也不支持虚拟IP地址6、暴露客户端的用户名还涉及隐私问题2、接收请求：从网络中读取一条HTTP请求报文3、处理请求：对网络报文... 阅读全文
posted @ 2013-11-01 11:46 artwl 阅读(704) 评论(0) 推荐(1) 编辑
ActionScript 3.0入门：Hello World、文件读写、数据存储(SharedObject)、与JS互调
摘要：近期项目中可能要用到Flash存取数据，并与JS互调，所以就看了一下ActionScript 3.0，现把学习结果分享一下，希望对新手有帮助。目录 ActionScript 3.0简介 Hello World 文件读写 数据存储(SharedObject) 与JS互调ActionScript 3.0简介 ActionScript 3.0 是一种强大的面向对象编程语言，ActionScript 3 符合 ECMAScript Language Specification 第三版。它还包含基于 ECMAScript Edition 4 的功能，比如类、包和名称空间；可选的静态类型；... 阅读全文
posted @ 2013-10-30 11:29 artwl 阅读(29588) 评论(4) 推荐(10) 编辑
HTML5 Canvas实现黑客帝国文字掉落效果
摘要：效果：原理： 用canvas逐行输出文字，然后让背景颜色逐渐加深，再随机中断某些列。代码：HTML：CSS：canvas {display: block;}JS：var c = document.getElementById("c");var ctx = c.getContext("2d");//全屏c.height = window.innerHeight;c.width = window.innerWidth;//文字var txts = "0123456789";//转为数组txts = txts.split("&qu 阅读全文
posted @ 2013-10-22 19:25 artwl 阅读(6205) 评论(2) 推荐(9) 编辑
HTTP权威指南阅读笔记四：连接管理
摘要：HTTP通信是由TCP/IP承载的，HTTP紧挨着TCP，位于其上层，所以HTTP事务的性能很大程度上取决于底层TCP通道的性能。 HTTP事务的时延 如图： HTTP事务的时延有以下几种主要原因。 （1）客户端首先需要根据URI确定Web服务器的IP地址和端口号。如果最近没有对URI中的主机名进行访问，通过DNS解析系统将URI中的主机名转换成一个IP地址可能要花费数十秒的时间。 （2）接下来，客户端会向服务器发送一条TCP连接请求，并等待服务器回送一个请求接受应答。每条新的TCP连接都会有连接建立时延。这个值通常最多只有一两秒种，但如果有数百个HTTP事务的话，这个值会快... 阅读全文
posted @ 2013-09-26 14:36 artwl 阅读(1056) 评论(0) 推荐(0) 编辑
HTTP权威指南阅读笔记三：HTTP报文
摘要：报文的组成部分 报文由三部分组成：对报文进行描述的起始行(start line)、包含属性的首部(header)，以及可选的、包含数据的主体(body)部分。 请求报文格式 响应报文格式 HTTP方法 主要的HTTP方法有：方法描述是否包含主体GET从服务器获取一份文档否HEAD只从服务器获取文档的首部否POST向服务器发送需要处理的数据是PUT将请求的主体部分存储在服务器上是TRACE对可能经过代理服务器传送到服务器上去的报文进行追踪否OPTIONS决定可以在服务器上执行哪些方法否DELETE从服务器上删除一份文档否 另外，HTTP1.1允许扩... 阅读全文
posted @ 2013-09-24 17:49 artwl 阅读(1085) 评论(0) 推荐(0) 编辑
HTTP权威指南阅读笔记二：URL与资源
摘要：URL中的限制字符： 在URL中，有几个字符被保留起来，有着特殊的含义。有些字符不在定义的US-ASCII可打印字符集中。还有些字符会与某些因特网网关和协议产生混淆，因此不赞成使用。 下面这些字符是URL中的限制字符，在将其用于保留用途之外的场合时，要在URL中对其进行编码。 字符保留/受限%保留作为编码字符的转义标志/保留作为路径组件中分隔路径段的字界符.保留在路径组件中使用..保留在路径组件中使用#保留作为分段定界符使用?保留作为查询字符串定界符使用;保留作为参数字界符使用$ , +保留@ & =在某些方案的上下文中有特殊的含义，保留{ } | \ ^ ~ [ ]由于各种传输Ag. 阅读全文
posted @ 2013-09-23 11:56 artwl 阅读(537) 评论(0) 推荐(2) 编辑
HTTP权威指南阅读笔记一：HTTP概述
摘要：HTTP协议版本： 1、HTTP/0.9：HTTP的1991原型版本称为HTTP/0.9。这个协议有很多严重的缺陷，只应该用与与老客户端的交互。HTTP/0.9只支持GET方法，不支持多媒体内容的MIME类型，各种HTTP首部，或者版本号。HTTP/0.9定义的初衷是为了获取简单的HTML对象，它很快就被HTTP/1.0取代了。 2、HTTP/1.0：1.0是第一个得到广泛使用的HTTP版本。HTTP/1.0添加了版本号、各种HTTP首部，一些额外的方法，以及对多媒体对象的处理。HTTP/1.0使得包含生动图片的Web页面和交互式表格成为可能，而这些页面和表格促使万维网为人们广泛地接受... 阅读全文
posted @ 2013-09-23 11:26 artwl 阅读(610) 评论(0) 推荐(1) 编辑
[转]Sublime Text 2 设置文件详解
摘要：Sublime Text 2是那种让人会一眼就爱上的编辑器，不仅GUI让人眼前一亮，功能更是没的说，拓展性目前来说也完全够用了，网上介绍软件的文章和推荐插件的文章也不少，而且很不错，大家可以去找找自己需要的。 之前想设置什么都是直接在网上搜，但最近想调行距，这个把我给难住了，软件上的设置没找到，网上搜也没有，最后的最后在Sublime的官方论坛找到了，个人觉得行距还是很影响视觉体验的，看看下面的对比图就知道了: 看来想驾驭好这软件不弄清楚配置文件是不行了，周末找了时间把配置文件的每条配置信息都加上了中文注释，现在贴出来和大家共享，里面有解释不清楚的也欢迎大家伙来互相讨论:) Pref... 阅读全文
posted @ 2013-09-12 10:32 artwl 阅读(897) 评论(1) 推荐(0) 编辑
分享我收集的前端好资源：网址、文章、工具、框架、电子书
摘要：开始全职前端开发已经9个月了，在这9个月中收集了一还自认为还不错的资源，主要有前端资讯、技术博客、精彩文章、实用工具、国内外前端框架，现在分享出来，希望对各位前端攻城师有用。 阅读全文
posted @ 2013-07-21 12:45 artwl 阅读(15733) 评论(65) 推荐(173) 编辑
发布一个win8 UI风格的前端开发者网址导航
摘要：一直在找一个比较好的地方存放收藏的网址，但用了好多产品后效果都不理想，于是自己动手，写了一个Win8 UI风格的，运行效果如下： 首页： 工具页： 其中主要收录了国内前端方面的资讯站和工具类网站，现在把这些网址与各位前端开发者工共享，本站致力于为前端开发者提供最好的网址导航，大家有推荐的网站欢迎提供。 beta版网址：http://feinfo.duapp.com/ 对开发者网址导航站，大家有什么意见建议，都欢迎留言讨论。如果有必要，后续可能会增加用户功能，让每个人都可以自己添加收藏。 UPDATE: 今天给部分网址后面加上了该网站最后更新时间，方便判断是否发布了新文章，效果... 阅读全文
posted @ 2013-06-08 09:48 artwl 阅读(2575) 评论(4) 推荐(3) 编辑
CSS网站变灰
摘要：.htmlGray{ filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>&l 阅读全文
posted @ 2013-04-22 11:36 artwl 阅读(384) 评论(0) 推荐(0) 编辑
【转】【IE大叔的嘴歪眼斜】之—— 由hasLayout引发的临床CSS Bug表
摘要：注：本文转自http://www.cnblogs.com/ccto/archive/2013/03/07/2948630.htmlIE大叔这嘴歪眼斜的毛病不是一天两天了，集体拉出来测试时候，明明大家都在微笑，就丫一副呲牙咧嘴的......哎，没办法，谁让咱国内市面上都是这种呲牙咧嘴的浏览器呢.....(关注IE678死亡速度)查阅，翻读，摘抄，记录，再逐一实践，总结，终于对他这个臭毛病有了根源上的认识。hasLayout！先上定义：它是IE的特有属性。它决定着一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算组织内容。为了区别这两个概念，渲染引擎采用了hasLayout的属 阅读全文
posted @ 2013-03-07 21:22 artwl 阅读(368) 评论(0) 推荐(0) 编辑
yahoo CSS reset
摘要：html{ color:#000; background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0}table{ border-collapse:collapse; border-spacing:0}fieldset,img{ border:0}address,caption,cite,code,dfn,em,strong,th... 阅读全文
posted @ 2013-02-27 16:25 artwl 阅读(540) 评论(0) 推荐(0) 编辑
[转]解析CSS设置默认字体样式
摘要：默认字体样式会因为浏览器不同，版本不同，甚至操作系统不同的设置不同导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。样式优先级通常用户看到的页面的样式会受到三层控制:第一层是浏览器的默认样式第二层是网页定义样式第三层是用户自定义样式和CSS一样， 阅读全文
posted @ 2013-02-26 20:26 artwl 阅读(941) 评论(0) 推荐(0) 编辑
Javascript图像处理之平滑处理
摘要：原理来自Justany_WhiteSnow的Javascript图像处理——平滑处理一文。/* * BORDER_REPLICATE: aaaaaaaa|abcdefgh|hhhhhhhh * BORDER_REFLECT: hgfedcba|abcdefgh|hgfedcba * BORDER_REFLECT_101: hgfedcb|abcdefgh|gfedcba * BORDER_WRAP: efgh|abcdefgh|abcd * BORDER_CONSTANT: iiiiiiii|abcdefgh|iiiiiiii with... 阅读全文
posted @ 2013-01-22 23:59 artwl 阅读(1127) 评论(2) 推荐(0) 编辑
Javascript图像处理之虚拟边缘
摘要：原理来自Justany_WhiteSnow的Javascript图像处理——虚拟边缘一文。 /* * BORDER_REPLICATE: aaaaaaaa|abcdefgh|hhhhhhhh * BORDER_REFLECT: hgfedcba|abcdefgh|hgfedcba * BORDER_REFLECT_101: hgfedcb|abcdefgh|gfedcba * BORDER_WRAP: efgh|abcdefgh|abcd * BORDER_CONSTANT: iiiiiiii|abcdefgh|iiiiiiii wi... 阅读全文
posted @ 2013-01-18 22:41 artwl 阅读(1435) 评论(2) 推荐(1) 编辑
Javascript图像处理之将彩色图转换成灰度图
摘要：最近看了Justany_WhiteSnow的Javascript图像处理一文，写的非常好，于是就练练手，略做了一些封装：(function () { function imageToGray(iCanvas, url) { this.canvas = iCanvas; this.iCtx = this.canvas.getContext("2d"); this.url = url; } imageToGray.prototype = { imread: function (_image) { v... 阅读全文
posted @ 2013-01-16 00:29 artwl 阅读(3788) 评论(0) 推荐(0) 编辑
canvas标签的width和height以及style.width和style.height的区别
摘要：背景 今天在博问中看到一个问题：用canvas 的 lineto方法画对角线，但画出来的图形不对？ 这是一个很常见的误区，这里给大家细说一下。原理 在w3网站上是这样解释的：Thecanvaselement has two attributes to control the size of the coordinate space:widthandheight. These attributes, when specified, must have values that arevalid non-negative integers.Therules for parsing non-ne... 阅读全文
posted @ 2012-02-28 18:23 artwl 阅读(17777) 评论(5) 推荐(5) 编辑

1

个人简介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"设计模式"
	],
	"hobby": [
		"阅读", "旅游",
		"音乐", "电影"
	]
}
TOP