手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:前端

前端开发大众手册

很明显,这段内容是ctrl+c,ctrl+v而来的,做备份和资料查询用,挺好的。
原文来自:http://www.chencheng.org/blog/2008/10/25/f2e-manual/#f2e-manual-s1

快捷导航:

另外还搞了个Firefox插件《前端开发工具集》,把资源整合到一个菜单下,方便查询。数据放在线上(Google AppEngine),速度应该会有保证,更新也会比较方便。

在线工具集

常用Firefox插件

IE下的调试工具

  • Fiddle2 —— 非常强悍的一款http流查看工具,默认支持IE,其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持插件
  • IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能,IE8自带了一个加强版的。
  • Microsoft Script Debugger + Companion.JS —— 调试JS用,虽然报错还是有误差,但是我已经满足了。安装顺序是:Microsoft Script Debugger,Companion.JS,在”IE选项-高级”里取消禁用脚本调试
  • 多版本IE共存两种方案:
    • IE7/8 + IE Tester —— 大众型配置,可以基本满足日常需要。
    • IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代,我还是推荐这种方案,因为只有神奇的原装IE 6,才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话,建议再装个IE 8 + IE Tester,因为IE 8下的Developer Toolbar还是有很大改进的,调试起来会方便一些。
  • 以下三个软件相对不重要些:

参考手册

批处理工具

IDE及其他工具

Bookmarklet(右键另存)

开发者社区及权威网站

推荐订阅的博客和网站(排名不分先后)

------
看了上面的内容,其实可以感觉得到国内的站点是什么样的。个人博客中还是有很多人研究一些东西,但走来走去,还是那些人的小圈子。你说呢?
如果你打不开原文地址的话,那么我就不得不说几句了,有时候,有个个人博客还是很有用的。
1、记录自己的开发心得,用与和其他人交流
2、摘抄一些信息,用于做数据的储存
3、也正是有了博客,除了做交流外,还能赚一些域名费和空间费(当然,我的服务器是我自己买 的和托管的,巨亏啊)

Tags: 前端

一张对前端有意义的图片

一些页面的宽高值,来自风干的果子。

前端对于这些值应该会比较关注吧。对于我这种虽然不从事前端,但了解一下也是很必要的。

大小: 190.37 K
尺寸: 372 x 376
浏览: 1670 次
点击打开新窗口浏览全图

Tags: 前端

犹豫:是否采用Yii把sablog重构

一直在犹豫,是否要重构sablog,还是说仅仅把前台的模版系统重构一下就完事。

曾经想过是采用thinkPHP或者fleaPHP(用不惯Qee),但后来有各种各样的原因,导致就没有重构。

现在,文章数据也多了,有2年的数据了,也因此想要增加一点新功能,所以就在想着是否要重构一下。否则新功能加起来就很繁琐。

同时还要考虑一下模版,因为现在的模版太挫了,很多广告位都无法设定好,不是在顶部就是在侧部,根本没有人想点,如果在中间,或许点击的次数会多一点?

当然,我需要考虑的是缓存,一直以来sablog都是用的自带的文件缓存,虽然文件数量不大,但总也占着资源,为什么不把APC开启并使用呢?呵呵。。。

可是我还要考虑的是我原先博客里的代码高亮,虽然有想过要换到synaxhilight上面,但原来的数据怎么办?我总不可能一个个的改吧?

再然后就是,如果是换系统,那又得考虑数据迁移了,现在这样的后台,我还能够接受。一旦换系统,后台我还不一定能够熟悉呢。

最后,同一文章存放多个分类。。。【被朋友说话打断了,郁闷】

反正,就是一想法。

Tags: yii, sablog, 前端, 重构

Rel与CSS的联合使用

说实话,rel在我眼里除了link CSS的时候用过,其他时候我还真没用过。根本不知道REL是用来干嘛 的。看了这篇文章才知道原来Rel还可以这么用。

原文是

Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。

Wordpress很早就引入了rel标准,在我们添加新链接的时候就可以看到“关系”属性。

早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系,但它对网页开发来说并无意义,值得庆幸的是随着浏览器的逐渐升级,我们可以利用 CSS属性选择器以及REL来做一些有意思的功能。

这是一段带有REL属性的HTML结构。

XML/HTML代码
  1. <ul>  
  2. <li><a href="#" rel="civil">小李</a></li>  
  3. <li><a href="#" rel="party">局长</a></li>  
  4. </ul>  

页面中他呈现这个样子

大小: 3.47 K
尺寸: 238 x 148
浏览: 1838 次
点击打开新窗口浏览全图

因为局长和小李是两个不同的阶级,所以我们应该有区分他们,我打算在小李和局长后面增加两张图片让他表现出这个样式。

大小: 5.38 K
尺寸: 169 x 115
浏览: 1870 次
点击打开新窗口浏览全图

过去,我们需要在两个链接标签上增加不同的class来实现这种样式,并且我们需要针对不同的样式书写不同的CSS

XML/HTML代码
  1. <style>  
  2.  .c,.b {background:url(01.png) right center no-repeat;}  
  3.  .b {background-image:url(02.png);}  
  4. </style>  
  5. <ul>  
  6. <li><a href="#" rel="civil" class="c">小李</a></li>  
  7. <li><a href="#" rel="party" class="b">局长</a></li>  
  8. </ul>  
现在,我们可以利用REL属性以及属性选择器来完成这个工作。
CSS代码
  1. a[rel~="civil"]{background:url(01.png) rightright center no-repeat;}  
  2. a[rel~="party"]{background:url(02.png) rightright center no-repeat;}  
同时,我们的HTML结构也可以剔除那些多余的样式了。
XML/HTML代码
  1. <ul>  
  2. <li><a href="#" rel="civil">小李</a></li>  
  3. <li><a href="#" rel="party">局长</a></li>  
  4. </ul>  
另外:ie6不支持属性选择器,但我们可以用JS来修复这个问题。

--EOF--

最后一句话实在让人寒心,不过总算也可以这样的做了,再过一两年,还有IE6的存在吗?IE6的时间够长了吧?好象从02年开始到现在,都经历了8年左右的时间了,居然还没有被消亡。习惯这东西真害人。。。。

原文地址为:rel与CSS的联合使用,不过其实我更喜欢第二幅图后面的小图标

 

Tags: 前端, css, rel