【必备】史上最全的浏览器 CSS & JS Hack 手册

浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异。因此,浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册,那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊! IE 选择器 Hack /* IE 6 and below… Read More

深入理解JavaScript系列:《你真懂JavaScript吗?》答案详解

介绍 昨天发的《大叔手记(19):你真懂JavaScript吗?》里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了。 今天我们来对这5个题目详细分析一下,希望对大家有所帮助。 注: 问题来自大名鼎鼎的前端架构师Baranovskiy的帖子《So, you think you know JavaScript?》。 答案也是来自大名鼎鼎的JS牛人Nicholas C. Zakas的帖子《Answering Baranovskiy’s JavaScript quiz》——《JavaScript高级程序设计》一书的原作者 (但题目2的解释貌似有点问题) OK,我们先看第一题… Read More

初步认识 LESS

LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观。LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap)。本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化,及其典型的应用场景,并将其与其他样式表语言进行比较。相信前端开发工程师会喜欢 LESS,灵活运用 LESS 以提高开发效率。   LESS… Read More

php程序员应具有的7种能力

php程序员应具有什么样的能力,才能更好的完成工作,才会有更好的发展方向呢?在中国我想您不会写一辈子代码的,那样不可能,过了黄金期,您又怎么办呢?看了本文后,希望对您有所帮助。   一,php能力   1,了解阶段,您能写一些代码,因为那是在手册和google的帮助下,您才完成的。变量乱定义,N多函数不知道,做起事来很慢,想到什么写什么,代码写的比较乱,后期维护很麻烦。   2,熟悉阶段,经常查函数,手册估计也看过一,二遍了,常用的函数基本上您都了解了。后 期维护给您带来了不少痛苦,您开始发现自己的代码有很多不足,开始思考如果改进自己的代码,如何站在项目的角度来规划自己的代码,而不是想到什么写什么, 知道如何来减少冗余代码,使您的代码清晰,知道什么样的代码写出来让人看着舒服,基本的代码规范,已经形成。为了提高自己,会特意的去一些技术性的论坛, 学习研究。   3,很熟悉阶段,本来我想写精通的,到现在我也不知道精通是到什么程度,也没有听到有人 说自己精通PHP的,所以就用很熟悉了。这个阶段,我想您已经从面向过程进入了面向对象。个人觉得面向对象的最大好处就是,能使整个项目功能化,模块化, 后期维护,改版,升级就很方便了。没有面向对象的时候,不也一样开发吗.这个时期,您已经研究过了一种或者几种框架,结合自己的实际项目经验,在脑子里已 经能形成自己的一个框架,这个框架是最适合你的。并且能够将这个框架运用到实际的开发中去,以提高自己的开发效率。   如果您刚写代码的时候,就有人能约束你按OOP的思想去写代码的话,那您就遇到贵人了。当不好的代码习惯养成时,在想改就不那么容易了。  … Read More

[JavaScript] 判断网页能不能被IFrame 嵌入

IFrame是一个分享资讯非常方便的的方式 只要输入 <iframe src="http://example.com/"></iframe> 就可以嵌入一个网页了! 然而,事实上并不是这么的完美,并不是所有的网页都允许嵌入… 譬如说Google,如果妳直接就输入Google 的网址,如下面 <iframe src="http://google.com"></iframe> 那么将只会得到一个空白的IFrame而已… 如果有打开Console 的话,就会看到一些安全性上的错误,不过很可惜的JavaScript 很难去handle 这个错误… 针对IFrame监听onerror是没用的,因为根本没有这个事件! 那么如果针对window.onerror呢? 可以捕捉到错误,但是却不能判断到底能不能载入…(即便是可以嵌入的网站,也会有一些错误讯息出现)… Read More

解决URL出现%E2%80%8E(Zero-Width Space)

当URL出现%E2%80%8E就代表你的URL里面有包含一个ZERO-WIDTH SPACE (ZWSP) 这个是肉眼无法发现的空白,有时候你会觉得明明已经按下→了,却怎么游标还在原地,没有移动到下一个字元去   这种时候就代表这两个字元中间有一个ZWSP的存在 ZWSP一般情况是打不出来的,但是如果你是透过WORD等等的文件编辑器复制贴上的 就很有可能含有ZWSP,一般情况下ZWSP并不影响阅读 但是当它变成URL的一部分,就会变成%E2%80%8E ,使你的URL错误 这都还算是好发现且好解决的 要是当他要拿来当hash的值做验证,如同下面这样 if(sha1($password)!== sha1($_POST['password'])){ // no permission }… Read More

真正的响应式图片

不知不觉,现在国外网页已经到了“优先为移动平台创建”的时候了,优点是可以优化CSS结构与代码量,还可以使得移动端用户体验更优质的性能。我目前使用的这个Medium写作平台就是基于“移动先行”策略而开发的,使用起来不论什么方式,它的体验都很棒。   为 小屏幕的移动设备减少数据传输量可以大幅提高移动设备对web的加载性能,而性能对你的用户满意都有着重要的影响。Guy Podjarny做过调查,86%的响应式网站在最小的手机屏幕上浏览时的页面大小与大屏幕是相同的。也就是说虽然采用响应式设计的网站看起来像个移动站 点,实际上它们大多数加载了大屏幕端所有内容,造成的原因无外乎这三种: 1.下载并隐藏 2.下载并缩小 总结一下最近学习到的关于图片优化的相关问题。 1.可以有选择的为手机提供图片。 例如:许多博客边栏有“相关文章”“推荐文章”这一栏目,其中有一部分带有一张小的缩略图。更小的图片在手机上没有表现意义,可以不加载图片。然而display:no并没有起到优化性能的方法,显然图片依然加载了。 我们可以用Jquery解决它。matchMedia https://github.com/paulirish/matchMedia.js 这是一个CSS media queries。它可以告诉浏览器,只有当图片比matchMedia中的第一个断点大才插入图片。 我不精通javascript,但是这里有一片国内的翻译文章 http://w3ctech.com/p/948… Read More

Adaptive Images : 为不同的屏幕尺寸提供不同的图片

为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。 设置自适应图片 实现 Adaptive Images 解决方案需要 Apache 2、PHP 5.x 和 GD 库,也就是说需要 Web 服务器端编程。首先,在其网站上下载.zip 文件开始配置:   解 压文件,然后将其中的adaptive-images.php和.htaccess文件拷贝到网站的根目录。如果你网站的根目录下已经有一… Read More

Picturefill.WP – 根据屏幕尺寸加载合适的图片

Picturefill.WP插件利用picturefill.js脚本展示Responsive图片,即根据视口宽度选择尺寸合适的图片加载,节省带宽,提高网站载入速度。例如用户用手机访问站点,该插件会选择适合手机尺寸的图片(如缩略图)加载,不会加载完整尺寸图片。 使用方法 没有选项,无需任何设置,下载插件激活,网站文章中的所有图片就会变成Responsive图片,若是retina显示屏,则加载retina图片。 工作原理 该插件工作原理简单的说,就是充分利用WordPress为每张图片创建的副本图片:大尺寸、中等尺寸和缩略图,根据用户设备屏幕宽度,载入尺寸最接近的图片。 具体来说,插件首先在文章内容中查找图片标签 <img class="alignnone%20size-large%20wp-image-123" alt="Accessible alternate text for the image" title="A%20title%20that%20displays%20on%20hover" src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" width="770" height="577"… Read More

Ubuntu中升级Firefox

我的Ubuntu系统自带的Firefox浏览器版本是17.0.1,今天看到官网上最新版本已经到23了,因此想将其升级一下。   对Linux不是很熟悉,得益于搜索引擎,最终将其成功升级,这里记录一下操作过程。 升级Firefox 首先是下载Firefox,我是从这里下载的:http://firefox.com.cn/download/   火狐在linux下不提供安装包(如rpm或者deb包)下载,只提供二进制可执行文件打包。下载可执行文件包,解压后是可以直接用的,但我们一般会进行一些配置。   我下载的是中文版的Firefox,地址:http://download.firefox.com.cn/releases/firefox/22.0/zh-CN/Firefox-latest.tar.bz2     Linux发行版一般本身也带火狐,因些需要将其先卸载掉: sudo apt-get remove firefox 不要用-purge选项,这样会删除掉Firefox原来的配置文件。 然后将下载的Firefox-latest.tar.bz2解压到/usr/lib目录下:… Read More

PHP利用FPDI 制作PDF 档案 (php合并pdf, php签名pdf)

昨天研究如何在既有的PDF 档案上放入中文字,虽然找到支援中文的FPDF ,但是有些Unicode 字集我实在试不出如何显示(如:堃) 。   我的同事建议我用图形来解决看看,以下就是我的实验过程(我用的是Windows 平台) 。   我用的相关技术如下: 名称说明下载网址 FPDF PHP 上用来产生PDF 的第三方套件 [http://www.fpdf.org/](http://www.fpdf.org/) FPDI… Read More