代码改变世界

一个CSS小工具

2011-05-02 17:16 by Feather, 2226 阅读, 3 推荐, 收藏, 编辑
摘要:今天写了一个CSS的小工具,也算是最近关于CSS和Web性能优化思考的一次实践。下面开始介绍一下,这个小工具主要功能有以下这些: 代码压缩 合并请求 语法扩展 缓存设置代码压缩这个小工具其实是一个Default.aspx页面文件,我们只要把它放到网站CSS文件夹里面,保证这个页面命名是默认首页,然后把我们原来引用的CSS文件夹后面加一个问号就行了。用我的博客举个例子,我本来文章页面中有三个CSS引用:<link href="css/detail.css" rel="stylesheet" type="text/css" /> 阅读全文

Web文件管理系统

2011-04-28 14:03 by Feather, 5271 阅读, 3 推荐, 收藏, 编辑
摘要:先直接看Demo,请用不要使用IE,最好用Chrome...这个是《操作系统》的课程设计,第一次把课内的作业放上Blog来讨论,大概也是最后一次了。这篇文章大概就说一下这两周开发这个东东的历程,虽然这个我自称的“系统”还有很多缺陷以及作为文件管理平台必需具有的功能我还没有开发,但是我还是先告一段落,工程量太大,在美国的时间宝贵,我会在这里写下我最初的所有设想和计划,待以后继续吧。缘由很久很久以前就开始在设想做一个这样的平台,特别在为学校开发亚运场馆团队OA的时候,也正好有这么一个需求。但是考虑到时间仓促,我当时直接找了一个开源的系统凑合着用。直到这学期开了《操作系统》课程,碰巧课程设计上面也有 阅读全文

浮动模型详解

2011-04-28 09:24 by Feather, 640 阅读, 1 推荐, 收藏, 编辑
摘要:写了这么久的CSS,觉得自己还没有很深入地了解CSS的一些概念。特别是浮动模型,我一直期待进入一种境界,看一个网页布局,立刻能想象出这个布局的Div结构,以及在各种浏览器中的实现。单纯从做项目中积累经验还不是很快捷的方式吧,毕竟很多情况由于时间紧迫,遇到很多问题我都是采取回避的方式而不是刨根问底。所以,我觉得最好的学习方式还是自己去动手去试试,发现问题,围绕问题去寻找解决办法。这篇学习笔记写一下昨天的一个关于浮动的学习成果。浮动模型为什么要使用浮动模型?在普通流中,有两种主要的呈现模式:block和inline,block会占据整行。inline是内联对象,没有宽高概念。如果只使用普通流的框模 阅读全文

山寨iphone缓动滚动条

2011-04-26 00:00 by Feather, 569 阅读, 0 推荐, 收藏, 编辑
摘要:第一句话还是,用IE6的退下,IE7/8勉强可以留下,强烈推荐使用Chrome,FF,Opera,IE9,Safari浏览。使用方法有点特别,把鼠标移动到滚动栏,不用点击,直接移动,到达目标位置移出滚动栏,如果页面仍然跟随鼠标移动,点击一下可以释放。至于为什么,下面会解释,可以直接在本页查看,或者点击这里看Demo.要实现这个效果,只需要可以在自己网页底部插入这段js:http://www.vinqon.com/codeblog/demo/scroll-min.js未压缩的源码:http://www.vinqon.com/codeblog/demo/scroll.js (写烂了)如果只是想看看 阅读全文

QQ书签 - Chrome插件

2011-04-23 00:00 by Feather, 875 阅读, 0 推荐, 收藏, 编辑
摘要:今晚一直在看技术文章,发现很多优秀文章,然后一个劲地收藏。收藏夹最近都被我塞爆了。以前我是用博客园的网摘工具的,很方便,右击网页选择收藏到博客园网摘就搞定,蛋疼的是那插件就只有IE和FF的,所以我投身Chrome之后就没有了。但也没关系,Chrome的收藏夹的记录可以保存在服务器端,也很方便。但是最近问题出来的是,乱七八糟的书签很多,而且那种浏览方式很不方便。于是,我在想,要不自己写一个网络书签网站吧…最近总是想到一点点需求就想写网站,再想想,觉得自己还是伤不起啊…轮子到处都有,然后我Google一下网络书签,前面就看到QQ书签。进去网站研究一翻之后,结论是:感觉是一个被历史遗弃的产品,而且我 阅读全文

HTML5中的History和Location对象

2011-04-19 00:00 by Feather, 763 阅读, 0 推荐, 收藏, 编辑
摘要:今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API。我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用。我很久之前就想过通过锚点来解决实现书签和定位,配合iframe使用一些小技巧,还可以实现历史记录的产生。后来发现,原来IE8和其它现代浏览器都大都已经实现了更改锚点来产生历史记录了。记得,我第一次做的一个相关的小应... 阅读全文

HTML5音乐播放器

2011-04-15 00:00 by Feather, 648 阅读, 1 推荐, 收藏, 编辑
摘要:前几天都在研究HTML5的媒体标签Audio和Video,本来打算写写笔记的,但把文章提纲列了出来后,又觉得如果展开来写的话内容实在太多了,于是,还是觉得编写一个Demo好了。还是先上Demo,还是那句话,请使用Chrome浏览,Safari也可以。刚刚发现iphone也可以完美支持。基本思路这个播放器构思了两天,很多细节一直确定不了,很多想法都是Coding的时候爆发出来,然后临时加上去的,虽然是这样,但程序都写得很顺利,没有被什么问题卡住,整个播放器用了半个下午和半个晚上搞定。目前播放器还很简陋,用户需要听音乐可以直接在输入框中写入歌曲,或者歌手,专辑之类的都可以。点击“我要听这首”,浏览 阅读全文

关于image的一些细节

2011-04-13 00:00 by Feather, 243 阅读, 0 推荐, 收藏, 编辑
摘要:今天看到Funny的一篇日志《另类Ajax--基于Cookie的Ajax》,是关于使用cookie来实现客户端和服务器端交换数据的。即使实用价值不大,但我觉得确实是一个创意爆点的想法,其中我注意到他是通过轮询到实现确认接收到数据并且调用回调函数的。个人觉得,这部分有优化的地方,我第一感觉是可以通过onload来实现,但是还是不太确认onload事件调用的时候,图片是在什么状态,于是今晚试验了一下。var img = new Image();img.onload=function(){alert(document.cookie)}img.src="Handle.ashx";H 阅读全文

HTML5语义化标签

2011-04-08 00:00 by Feather, 488 阅读, 0 推荐, 收藏, 编辑
摘要:语义化的作用语义化是最近几年经常被讨论的一个话题,在提倡Web标准化的今天,语义化越来越受到大家的重视,并且已经成为Web标准的一部分了。为什么要语义化?初次接触这个概念的人一定会这么问。CSS森林和愚人码头都对此讲述了自己的观点。综合两者,我的看法是:语义化的的直接作用大多是让机器可以更好地理解我们的网页。我说的机器,可以是屏幕阅读器,可以是移动设备,可以是爬虫程序甚至是我们自己写的程序。屏幕阅读器这个没有得到很多人重视,所以也没有很大说服力。但是后者几个应该没有人会不重视吧,许多手机Web浏览器都是把网页在服务器中解析,提取,压缩再返回手机客户端的,语义化的标签相当于一个公共的协议,可以让 阅读全文

HTML5 文档定义Doctype

2011-04-07 00:00 by Feather, 412 阅读, 0 推荐, 收藏, 编辑
摘要:我们都知道,在编写一个标准化网页时,第一行的文档定类型义是必须的。其缘由是,浏览器厂商为了保证标准化之后浏览器可以向后兼容,即依然可以正确解析过去没有按照标准规范编写的网页,提供了两套模式解析方案:标准模式和怪异模式。要简单介绍这两种模式的不同之处,有一个经典的例子,就是IE框模型的解析。怪异模式下元素的宽度包括了padding和border的总和,而标准模式下不会包括它们。所以,我们之后必须要在网页第一行写上类似这样的文档类型定义,来保证浏览器会以正确模式来解析网页:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition 阅读全文