DesiZen

在线设置浏览器窗口大小的网站

DesiZen — Thu, 16 Jun 2011 15:51:13 +0800

这些都是使用javascript来设置浏览器窗口大小的工具,只需要点几下鼠标就行了.同时,作为前端开发来说,可以更加精确的查看页面在各种不同尺寸浏览器中的容貌.

Browize
resizeMyBrowser:我通常使用的是这个,其标注了各种移动设备的屏幕尺寸大小,还可以选择设置浏览器窗口的大小或页面可视区域的大小.

占位图片在线使用

DesiZen — Fri, 25 Mar 2011 13:08:29 +0800

大家在编写网页的时候经常会遇到这样的问题:有一个地方需要用图片,但是一下子又不知道放什么图好看,也不想再去开PS进行处理图片尺寸,那么本文里面所列的URL正适合你.

以下几个都是进行图片占位操作的网站,你要做的就仅仅是在img的src里面写上他们的链接和参数的URI.

如果您也知道此类图片占位符功能的网站,请留言告诉我,谢谢.

以下几个图片占位服务可以作为备选

SheenHolders:只可生成随机图片,不提供其他
FlickHoldr
PlaceDog
lorempixum:可以生成随机选择图像的占位图片

前端在线编辑测试工具整理

DesiZen — Tue, 26 Oct 2010 14:40:52 +0800

本文将要介绍的这些编辑器,都是与前端开发相关的,并不同于传统的富文本编辑器.其中一些是可以多人同时进行编写一份文档,一些是可以编辑完以后进行多人共享,抑或是像一个IDE环境一样可以运行查看javascript和css运行效果.如果您知道我这里没有列出的优秀编辑测试工具,劳烦留个言.

编辑+运行+分享

Rendera:javascript+css
CSSDesk
codepad:不包括js和css
HTML5 Playground:非常强大,还有debug呢.
JS Bin
jsPerf:非常强悍,可以进行两份代码执行效率的对比.
jsFiddle

编辑+分享

Code Dumper:编辑后的文本可以选择非常多语种的代码高亮.
TitanPad:可以多人协助的同时编辑一份文档,不同的身份使用不同的颜色区分,非常酷.
OkSoClap:与上一个一样,可以作为后备.
notepad
write.fm
Gist:应该不陌生了,依托于github.
Entri
peg.gd
pastie

其他

coderun:一个强悍的基于web的ide开发环境
Kodingen
PHPanywhere
Codeita
Drawter
ecoder
ShiftEdit
ideone
Amy Editor
jsdo.it
memorizenow.com:类似于便签,也可以作为临时的脑图记录
darkcopy:一款纯黑背景的编辑器,没啥特别的,可以全屏,可以下载.
jottit:据说做网站可以这样子的.
PixieEngine:菜虫提供的,非常强悍,不过这个是编辑动画的.

10款优秀的测试网站在移动设备中表现的工具

DesiZen — Tue, 26 Oct 2010 12:35:27 +0800

VIA:sixrevisions.com

CSS清除浮动

DesiZen — Thu, 30 Sep 2010 11:06:39 +0800

在文章开始前,建议看一下这篇文章:All About Floats, 其讲解了相当多关于CSS浮动的内容,包括浮动产生的问题以及怎样清除浮动.

CSS清除浮动的方式

我认为清除浮动应该分为两部分:包含块外清除浮动与包含块内清除浮动. 包含块外当然就是指的 clear: both; 清除的浮动, 是用来避免块元素间的对齐问题; 而我们目前大家所说的CSS清除浮动一般都是指的包含块内清除浮动,这也是技术在不断发展, 布局技术在不断进步的必然结果, 详细的布局方面思考会在以后总结一下.

总归一下我使用过的包含块内部清除浮动方式:

包含块和其子块同时float
clear: both;
:after
overflow:hidden

包含块和其子块同时float

例如这个例子:


<div style="float:left; width:100%; background:#000; color:#ddd">

  <div style="float:left; width:30%; height:100px; background:#F00"><p>Some content</p></div>

</div>

可以看到, ie6,7是由于width触发了hasLayout,而包含块浮动是针对其它浏览器起作用的.对于布局上来说,不是很方便,而且如果有很多子块的时候,每一个都得去控制浮动, 多么惨的事呢.

clear: both;

<div style="background:#000; color:#ddd" >

  <div style="float:left; width:30%; height:100px; background:#F00"><p>Some content</p></div>
	<div style="clear:both;"></div>
</div>

使用这种方法,倒是不会出现什么大乱子,但是在html文本中必须使用额外的空标签去做清除的工作,对于追求标准的我们,这是不可容忍的.

:after

<style type="text/css">
.clear:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clear{*zoom:1;}
</style>
<div style="background:#000; color:#ddd"  class="clear">

  <div style="float:left; width:30%; height:100px; background:#F00"><p>Some content</p></div>

</div>

对于使用:after伪类选择符这个恐怕是现金为止认为最安全的方式了,各大css框架要么在布局上下功夫而不使用clearfix,要么就是使用的这种方式, 但各家清除的方式又存在细微差别.
例如, tjkdesign提出了在使用:after的同时,也要使用:before.例子

overflow:hidden

<style type="text/css">
body {background:#333;font:1em Arial, Helvetica, sans-serif;}
h1 {color:#ececec;text-align:center;margin:1.5em 0 1em;}
h2 {font-weight:normal;font-size:1.15em;padding-bottom:5px;border-bottom:1px solid #999;}
p {padding-right:1em;color:#000;}
pre {font-size:1em;color:#06f;margin:1em 0;}

#wrapper {background:#ececec;overflow:hidden;zoom:1;padding:20px;border-bottom:1px solid #000;border-right:1px solid #000;border-top:1px solid #fff;border-left:1px solid #fff;}
.css {float:right;width:50%;}
.markup {float:left;width:50%;margin-right:-1px;}
.box1,
.box2,
.box3,
.box4 {background:#fff;position:absolute;padding:10px;border:1px solid #333;}
.box1 {left:0;top:0;}
.box2 {right:0;top:0;}
.box3 {left:0;bottom:0;}
.box4 {right:0;bottom:0;}
</style>
<h1>overflow:hidden and absolutely positioned elements</h1>
<div id="wrapper">
<div class="markup">
<h2>Markup</h2>
<pre>&lt;div id=&quot;wrapper&quot;&gt;

  &lt;div class=&quot;box1&quot;&gt;box 1&lt;/div&gt;
  &lt;div class=&quot;box2&quot;&gt;box 2&lt;/div&gt;
  &lt;div class=&quot;box3&quot;&gt;box 3&lt;/div&gt;

  &lt;div class=&quot;box4&quot;&gt;box 4&lt;/div&gt;
&lt;/div&gt;</pre>
<p>If this wrapper was <em>positioned</em> (any value other than static), then it would become the positioning block and the four nested boxes would position themselves in relation to its layout. They would also be clipped outside of the positioning block boundaries.</p>
</div>
<div class="css">
<h2>CSS</h2>

<pre>#wrapper {
  overflow:hidden;
  zoom:1;
}
.box1,
.box2,
.box3,
.box4 {
  position:absolute;
  background:#fff;
}
.box1 {left:0;top:0;}
.box2 {right:0;top:0;}
.box3 {left:0;bottom:0;}
.box4 {right:0;bottom:0;}</pre>
</div>
	  <div class="box1">box 1</div>
		<div class="box2">box 2</div>
		<div class="box3">box 3</div>
		<div class="box4">box 4</div>
</div>

对于这个例子,我想是最好的解决了clearfix的烦琐和overflow:hidden的截断问题,因为overflow触发了Block Formatting Contexts, 而zoom是给ie6和7用的. 而内部box具有了’position:absolute;’, 就不会受这个overflow的限制. 但是这会有一个问题:我测试了两台纯ie6环境, 都没有通过.其他浏览器都ok(包括ie8的兼容模式).

会触发block formatting contexts的元素包括:

floats
absolutely positioned elements
inline-blocks
table-cells
table-captions
elements styled with “overflow” (any value other than “visible”)

所以使用 ‘display: inline-block;width: <any explicit value>;’ 也是可以达到兼容性的.
欢迎交流指正.

参考阅读

Git使用教程

DesiZen — Mon, 20 Sep 2010 10:24:53 +0800

提起Git, 大家无疑会想到 Github, 没错,我就是通过众多的Github项目链接了解到的Git,不知你是否也在走这条路呢?如果是的话,本文有一些有用的总结性文字以及一些 Git教程可以教会你如何去使用 Git.当然,这些对 Github 同样适用.

提供给大家可以下载的两本 Git中文教程:

这两本都是中文版,想要用的起Git,是必然要读一本的.第一本适合了解项目并比较快速的理解使用Git, 第二本则是官方极力推荐的,非常全面.
我是使用DBank共享的文件,因为外链有每月流量限制,所以如果遇到不能下载的情况,可以通过这个链接注册下,然后可以继续下载:DBank注册
这里我又翻到了个幻灯片,可以供大家观看:

寫給大家的 Git 教學

View more presentations from littlebtc.

再提供一个专门针对GitHub的教程:GotGitHub
有人为github官方出了一个非常赞的simple guide: http://rogerdudler.github.com/git-guide/,还有相应的中文版本

20个网站速度和性能检测工具

DesiZen — Tue, 14 Sep 2010 15:47:30 +0800

VIA:hongkiat.com

Google正在考虑在网站搜索排名中加入页面加载速度这个因素. 尽管这个因素不会产生很大的影响, 但它仍然值得我们(网站管理员和前端人员)好好的去研究. 原因很简单 – 大多数的访客并不会等待很久都不能加载的网页, 他们只关心所搜索的东西是否能够及时的找到.

换句话说, 如果你的网站很慢, 你会损失大量的访客, 并且失去将有可能带来的收入. 如果无视加载慢的这个缺点, 将会有源源不断的影响.

在你的网站建立起来之前,认识到加快网站载入速度是至关重要的. 本文收集了一些有用的网站和工具, 来帮助你诊断和分析你的网站, 让您更好的了解您的网站.

网络服务

Pingdom

测试对象网站的所有元素加载时间 (html, images, Javascript, css, iframes and others). 你还可以查看如何改善你的页面加载元素. 在测试结果的摘要里, 你可以看到页面总的加载时间和页面中每一个元素的加载时间以及大小.

GTmetrix

结合了 FireFox中最流行的两个插件 – Yslow 和 Google Page Speed. Gtmetrix 会给你提高网站速度的一些建议. 虽然 Yslow 和 Google page speed 是推荐给 Firefox 的, 但是它们也同样可以在其他浏览器中使用.

Light Speed Now

测试你的网站速度, 并且生成报告发送到你的邮箱.

Load Impact

Loadimpact 对于一个每天pv达到数以万计的大型网站来说是一个非常重要的工具. 一个免费的帐户可以查看五十个用户负载的情况, 想要更多的话,那就得升级帐户了.

Site-Perf

Site-Perf 就像一个普通的访客一样去完全模拟自然的浏览器访问行为下载你页面中的 images, CSS, JS 和其他文件; 在报告中你会看到网站页面是最先载入什么文件以及多块的速度. 它对于提高你的网站载入速度来说是非常重要的.

WebWait

很标准的测试您的网站和网站链接速度.

Gomez Networks

从外部节点进行实时的测试你的网站性能.

OctaGate

允许你监控下载网站的一个或多个页面时需要的时间.

Webslug

允许你与你的竞争对手进行网站加载速度上的比较.

WebToolHub

你可以选择你的访客带宽, 然后模拟不同的访客加载你的网页需要的时间. 然后 Webtoolhub 会给你一个关于页面大小, 不同的带宽载入时间的信息. 并且会得到关于所有 Css, Javascript 和 Images 的信息.

IWebTool

Iwebtool 同一时间加载十页,你可以在选项里面控制.

Searchmetrics

可以显示指定网站的运行周期. 这个值可以用来显示你是选择相同的空间商还是需要换一家 ISP.

BrowserMob

不需要脚本即可获取任何网站是否忙碌的状态.

DesiZen更新:

Webpagetest

可以模拟普通用户进行网站性能检测,期间可以模拟两次访问状况,对于测试使用缓存是否生效非常有帮助,并且有世界各地的访问线路供选择.

应用程序

Pylot

一个开放源码的测试性能和可扩展性的web services工具. 它用于 HTTP 负载测试, 对于系统性能测试分析非常有用.

Google Page Speed

Page Speed 是一个开源的 Firefox/Firebug 插件. 网站管理者和前端开发人员可以使用 Page Speed 去评估网页加载速度并获得提升建议.

YSlow

YSlow 拥有一套对普通网页的各种规则,可以充分的分析网站的整体性能.

PageTest

一个 Internet Explorer 插件, 功能同类似软件一样可以获得如何提升网站速度的建议.

Multi-Mechanize

Multi-Mechanize 是一个开源的网络性能和负载测试框架.它允许你运行Python脚本来生成对一个网站或网页加载的测试.

loads.in

这是一个很酷的应用,可以把网站载入分成四个时间阶段,可以查看不同时间段页面的反应情况.

CSS Grid

DesiZen — Mon, 06 Sep 2010 16:01:40 +0800

每次打 grid 这个单词的时候都很纠结,因为使用的是腾讯QQ拼音输入法,待选字符里面排第一的都会是”狗日的”.
实际使用中, CSS Grid 是需要设计师的良好设计结构为基础,良好的语义化html为辅助的.前者,我们可以试着去影响设计人员学习grid布局思想,后者则需要我们自己进行精细再精细的琢磨与总结.否则,grid会非常难以甚至无法在项目中得以实施.