wordpress禁用google font

作者:徐迅 XuXun(清风迅来 XX)
最后更新:2014年6月11日0:45:53

前言:google font似乎本身就难以在墙内访问的到,最近一阵子似乎又加大了封锁力度,所以导致原先加载google font的wordpress主题在打开页面时会出现加载速度慢的情况,因而对于受众为国内主流网名的wordpress站点而言,其实禁用google font是个不错的选择。谨以此文作为帮eason同学的阅读博客网站禁用 google font 的技术记录。

原先在网上搜集到以下这一串代码,

 //移除google fonts api
function remove_open_sans_from_wp_core() { 
wp_deregister_style( 'open-sans' );
wp_register_style( 'open-sans', false );
wp_enqueue_style('open-sans','');
}
add_action( 'init', 'remove_open_sans_from_wp_core' );

加上去之后,确实让网页访问速度快了一些.

但eason同学之后又说还是很慢,我再仔细看了下,发现网页上原来不止加载了一份google fonts

 

移除google fonts的bushwick-lato字体

移除google fonts的bushwick-lato字体

于是就依葫芦画瓢,依据原先的格式,补充了一份去除 bushwick-lato 字体的无脑php代码。

//移除google fonts api
function remove_open_sans_from_wp_core() {
 // 移除 open-sans 字体
wp_deregister_style( 'open-sans' );
wp_register_style( 'open-sans', false );
wp_enqueue_style('open-sans','');
// 移除 bushwick-lato 字体
wp_deregister_style( 'bushwick-lato' );
wp_register_style( 'bushwick-lato', false );
wp_enqueue_style('bushwick-lato','');
}

add_action( 'init', 'remove_open_sans_from_wp_core' );

收工~

参考:http://www.liyucang.cn/1289.html

后记:
写这篇文章的时候,突然发现 google 字体又喵地可以正常访问了,大概…… ╮(╯▽╰)╭

徐迅 / 叉叉 / 清风迅来
XuXun / XX / Dalston Xu

【MDN翻译】CSS常见问题

翻译作者:徐迅 XuXun(清风迅来 XX)

最后更新:2014年5月16日2:24:34
原文链接:https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions
译文链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Common_CSS_Questions

1 为什么我的CSS语法正确,但没有正常渲染?

 

2 为什么我的CSS语法正确,但完全没有渲染?

为了应用CSS,Web服务器必须以 text/css MIME 类型来处理 CSS 样式表;反之,CSS将不会被渲染。

3 id 和 class 有什么区别?

 

4 如何将CSS属性恢复到默认值?

 

5 如何继承CSS规则?

 

6 如何为一个元素设置多个class?

 

7 为什么我的CSS规则没有起作用?

 

8 诸如 -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 之类的属性的作用是什么?

 

9 z-index 属性与元素定位有什么联系?

 

未完待续

徐迅 / 叉叉 / 清风迅来
XuXun / XX / Dalston Xu

Google Analytics 使用技巧

作者:徐迅 XuXun(清风迅来 XX)

最后更新:2014年5月13日1:16:18

本文为徐迅童鞋在使用Google Analytics(简称GA)过程中学习、整理的一些使用技巧,如有不足或有更好的方案,恳请各位大神指点!

1 如何使用同一份GA统计代码,统计不同子域名网站数据

答:使用“过滤器 Filter”

进入“管理”界面,选定主域名网站所在的“媒体资源”,在“查看”部分中,选择“创建新视图”

新建报告数据视图

新建报告数据视图

创建完之后,在“过滤器”选项中,选择“+新过滤条件”,为过滤器命名:仅 m.aihuishou.com ;

接着最关键的一步到了,“过滤器类型”中选择“预定义过滤器”,在下面的单选框中,选择“仅包含”,“访问主机名的流量”,“等于”,然后在下方输入框中填入子域名的地址:m.aihuishou.com

向数据视图添加过滤条件

向数据视图添加过滤条件

点击保存后,就OK了

过滤器添加成功

过滤器添加成功

本方法的原理其实很简单,

  1. 首先第一步也是很重要的一步是要确保在子域名上也添加了相同的GA统计代码。
  2. 第二步,我们创建了新的数据视图,而这个时候又因为子域名下部署的统计代码属于主域名下的网站,不构成跨域,所以在统计数据中将不仅包含主域名下流量,还会包括子域名下的流量(只要部署了相同的统计代码)。
  3. 第三步,我们其实要做的就是将这份子域名下的流量给剥离出来,这个时候就用到了过滤器,我们设定过滤规则为仅包含该子域名的流量,这样就可以实现在同一份GA媒体资源中,统计单独的子域名网站数据了。

2  如何检测用户在网站上进行了哪些站内搜索操作?

答:很方便。如图,在数据视图分栏下,选择“查看设置”,在最下方找到“网站搜索设置”,开启后,在下方输入框中输入你的网站中搜索输入框的关键词字段的input name即可。

网站搜索设置

网站搜索设置

未完待续
徐迅 / 叉叉 / 清风迅来
XuXun / XX / Dalston Xu

前端开发经验札记

最后更新:2014年5月1日1:57:33

作者: 徐迅 (清风迅来 XX)

真正从事Web前端开发有一年多了,而接触前端最早可以追溯至小学时候电脑课上的网页制作,那个时候还在使用Front Page(我才不会说那个时候自己设计的网页巨丑…);后来一直到大学才“重拾旧业”:大二曾帮老师做过课程介绍网站,使用的仍然是DreamWeaver,并开始搭建 xuxun.me ;大三拥抱notepad++和zen-coding,开始折腾JavaEE的项目;大四毕业设计又回归PHP,偶尔接触了Python;工作以后爱上sublime text 2、less和coffee script,在C#坑中渐行渐远。

希望这篇文章能一直更新下去吧.

加油XX,奔跑在大前端之路上吧!

一、前端语言基础

(一)HTML

     1 标签语义化:使用合适标签,少使用无语义标签
     2 使用 <!DOCTYPE html> 既可以向前兼容,又体现了你网站的高大上!
     3

(二)CSS

     1 选择一款合适的CSS预处理语言(个人比较喜欢Less),大大提升CSS编写效率
     2 通用的样式提取成 .class 或者 less 中的 mixin() {} 更佳
     3 多使用限定度高的选择器, 例如 > + , 尽量避免后代选择器过度使用
     4 多用组合少用继承,减少耦合
     5 选择器权重222原则(XX自创……): 选择器权重不超过222,即最多2个id,2个class和2个tag……
     6 CSS伪类是个神器,例如使用:hover、:after等伪类可以替代JS实现不少效果

(三)JavaScript

     1 JS我是渣.

二、前端框架基础

(一) Bootstrap

     1 Bootstrap 的less 代码质量好,价值高,推荐学习

(二)JQuery Mobile

     1 深坑,慎入

三、前端杂七杂八

     1 适当了解浏览器的渲染机制,避免代码性能过低
     2 替换 .class 优于 替换 <xx style=”xx:xx;” ></xx>
     3 图片记得压缩, jpegtran 是个不错的jpg图片无损压缩工具

四、前端各种坑爹

1 IE 7 不支持 console.log ,因为 IE7 根本没有 console ,所以当你使用 IE 7 运行有 console.log 的页面你会悲剧..
2

 

徐迅 / 清风迅来

XX   / Dalston Xu

Google

解决Swiper中translate3d导致字体模糊

2014年4月11日0:34:17

今天公司的设计师sama跟我说,官网旧机回收首页上有个UI问题,说是用户晒单那部分的字体模糊,如下图所示:

translate3d导致字体模糊

translate3d导致字体模糊

(PS:以上原先是#666的字体颜色,为了使效果更明显于是我改成#000,原先在浏览器上比这个更模糊的画面木有截取下来= =)

嗯,这是使用了 swiper 插件,导致了文字出现了模糊。(不过在firefox、IE中倒是好的!)

于是乎我就开始找问题原因之所在咯,第一个想到是不是字号大小不一致,结果我查看了下一切都正常都是12px,特地调大还是会有模糊。

接着我想到的就是去swiper的官网上看看它的API上有木有相关的方法。

结果还真有一个:手册上有一个参数名是: useCSS3Transforms ,默认为true的,改成 false即可。

但是如果真的这么快就可以解决这个问题的话,我就用不着大费周折写这篇文章了吧……

所以结果是虽然修复了字体模糊问题,但是带来了另一个大问题.. chrome下每次滚动竟然4个一起滚了(原先每次移动1个项的)… orz ..!

于是没办法,只好在保持使用 css3 transform 的 translate3d 的情况下,继续寻找解决方案了。

在stackoverflow上,我也找到相关技术的话题讨论: http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d

网上有说是使用:     -webkit-font-smoothing: subpixel-antialiased; 这个的

也有说使用  -webkit-perspective: 1000; 这个的…

当然结果也都是木有用……

我甚至在 github 上面swiper官方的issue中找到了相关问题: https://github.com/nolimits4web/Swiper/issues/45 但问题是作者似乎木有给出有效解决方案=-=

倒是解释了下为何使用 translate3d,说是这样可以强制浏览器使用GPU来渲染,可以大大提高页面的性能,尤其是移动端(但会在一定程度上降低质量…正如API文档中所写的)

好吧,最终,又是经由API文档中另外一个参数的启发:

 roundLengths
Set to true and Swiper will round width/height values, may be useful if you have rounding errors (like 833.48px width) in responsive swiper.

于是就想是不是因为外围容器它的 translate3d 属性有小数的原因。

然后我就去看了下,结果还真是如此! 哦也!

我发现当 translate3d 属性中只要出现小数,那么容器中的文字就会有一定程度的模糊,当该属性为 *.5 时,模糊的现象最严重。

translate3d的值出现小数时会导致文字模糊
translate3d的值出现小数时会导致文字模糊

当这个值为整数的时候就木有模糊现象了!

于是就决定更新容器宽度,使之能被4整除!

这样就解决该问题了…

translate3d的值改为整数以后文字就不模糊了

translate3d的值改为整数以后文字就不模糊了

SO,现在看起来舒服多了吧~

另外: IE11 下,在 dulplicate的slide中,用户的微博头像会错位… 这个问题有点坑。。倒是IE10等都是好的..

XuXun 清风迅来

2014年4月11日0:09:01

【MDN翻译】响应式Web设计

最后更新:2014年4月3日1:32:48

Contributor:清风迅来

原文链接:https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design

 

随着越来越多的用户使用移动设备来浏览网站和应用,Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作,并且看上去和在传统台式电脑上一样好。 著名设计师 Luke Wroblewski 主张 “移动优先” 设计而不是为桌面端设计完之后再考虑移动端。 无论您将移动设备作为主要目标来设计或作为额外目标,您都可以借助强大的CSS来保证同样的内容从手机到宽屏高分辨率显示器上,实现跨全部硬件平台访问和适应。

这种方法被称为“响应式 Web 设计”。它的一些策略包括::

  • 流式布局: 按照浏览器视窗的百分比来设定所有容器的宽度,从而使容器在浏览器窗口大小变化时自动缩放。
  • 媒体查询: 基于显示设备的物理特性(例如:尺寸、分辨率、宽高比、颜色位深等)来调用不同的样式表。
  • 流式图片: 设置图像所占宽度至多为设备的最大宽度。

Firefox Marketplace 的最低需求

如果您提交一个应用到 Firefox OS 或 Firefox for Android 上的Firefox Marketplace,那么这个应用必须响应不同的手机屏幕尺寸和屏幕像素密度。请记住屏幕最小尺寸为 320 * 480 像素。另一个常见的错误是未识别屏幕像素密度,以至于没有相应地调整字体大小和触摸目标。欲了解更多信息, 请参阅 Marketplace 审查准则

相关资源

概述

技术文档

工具

样例

译注:这篇响应式设计的概述简单地介绍了一些响应式策略,又疑似顺便为Firefox Marketplace 做了个小广告..
之后提及的一些资料,其中的pointer media query 似乎有点意思,这个是根据不同的物理指针(pointer)的精度作为media query的查询条件,比方说鼠标就是fine,表示精度很高,普通的触屏设备比如pad啊mobile啊之类就是coarse,不具备任何指针的就是none(似乎很少见诶)……
不过呢,好像这货CSS 4 才支持哦….

【MDN翻译】Web 标准

最后更新:2014年4月2日0:32:24
Contributor:清风迅来(XuXun)
Web标准 Web标准经过精心设计,旨在让广大用户享有最佳的上网体验,同时也确保在网上发布的文件经久不衰。由这些标准设计、构建的网站简化并降低了开发成本,同时又可以让更多人访问,并适应更多的上网设备。随着传统桌面浏览器的进化、新型互联网设备进入市场,经由这些准则开发的网站将继续正常运作。

参考文章

将应用从IE浏览器迁移到Mozilla浏览器
是否在迁移针对IE浏览器定制的应用到Mozilla浏览器时遇到了麻烦?本文涵盖了迁移应用到开源的基于Mozilla的浏览器的过程中相关的常见问题。
在您的网页中应用Web标准
本文概述了如何升级你的网页从而使之遵循 W3C Web标准。
为什么选择符合标准而不是私有实现?
应用通常是跨多个开发小组设计的,因此在开发过程中需要一个通用标准。
Web标准的商业价值
本文探讨了遵守Web标准、丢弃私有标记和技术是如何帮助一家公司实现其商业目标的。

查看全部…

社区

  • 浏览 Mozilla 论坛…

 

工具

查看全部…

Examples

CSS, DHTML, HTML, Web 开发, XHTML, XML

The Web Standards Project

 

后注:

第一次尝试在MDN上贡献翻译文,自己英文也很久没啃了.. 翻译技巧啥的估计也都还给老师了,这篇小短文就花了我快1个多小时时间呐。。好拙计。。
总之自己好好努力…好好学习天天向上吧~

清风迅来 (XuXun)
Dalston Xu

2014年4月2日0:37:31

学习使用CoffeeScript(一)以及部分js基础知识扫盲……

2014年3月26日22:39:49

前一阵子一直听马老板推荐coffee script 这个神器。
我的理解是这货是一个用于JS预处理的东东,coffee 之于 javacript 就如 less 之于 css。
今天难得下班比较早,外加早上又不小心点到她人人主页围观了一会儿以及下午又被来面试前端的童鞋的高水平给刺激到了..
于是就稍微研究了一下这个东西,顺便开启博客恢复更新模式..
好了,废话不多说了,先上coffeescript 的官方网站: http://coffeescript.org/
然后打开nodejs客户端,输入以下命令:
npm install -g coffee-script

1-install-coffeescript

下载安装完之后就可以使用啦,文档的话还是参照官方网站好了。
2-test-coffeescript

2-test-coffeescript

接下来安装官网上的介绍做一下示例程序~
3-demo-coffeescript

3-demo-coffeescript

先是简单的一个定义语句

4-use-coffeescript

由 coffee 转为 javascript 之后,多了不少东东呢..
5-coffeescript-to-javascript

5-coffeescript-to-javascript

嗯.. js孤陋寡闻的我还是研究下这个“简单”的代码吧。。
首先,这个似乎是由一个匿名函数包裹起来.. 最后为啥尼玛又call调用自己啊我戳。。
查阅了一下 MDN的手册 ,
上面的解释是:
 The call() method calls a function with a given this value and arguments provided individually.
说人话大概就是:call()方法根据给定的this值和若干参数来调用一个函数…
实际操作呢结合到上面的代码,就是:直接调用这个匿名函数的call方法,木有参数。
查阅了JS高级程序设计这本书的第116以及117页,5.5.5 函数属性和方法。
上面写到:
每个函数都包含两个非继承而来的方法:apply()和call()。两者的用途都是在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值。
而函数体内的this对象,由5.5.4 函数内部属性 可知,
函数内部有两个特殊对象,arguments 和 this, 其中 this 的行为与 Java和C#中的this大致类似。
换句话说,this引用的是函数据以执行的环境对象——或者也可以说是this值(挡在网页的全局作用域中调用函数时,this对象引用的就是window)。
举个栗子:
window.color = “red”;
var o = {color:”blue”};
function sayColor() {
     alert(this.color);
}
sayColor();       // ???
o.sayColor = sayColor ;
o.sayColor();   //  ???
—————————
一定要牢记:函数的名字仅仅是一个包含指针的变量而已。因此,即使是在不同的环境中执行,全局的sayColor()函数与o.sayColor() 指向的仍然是同一个函数!
—————————
以上
清风迅来(XuXun)
Dalston Xu

弱弱发一则招聘启事我知道肯定木有人来看的~~~

 爱回收网招前端开发实习生,www.aihuishou.com
在这里,你将与视觉设计师一起,参与完成产品线Web功能的开发;
我们希望你,关注新事物、新技术,有较强的学习能力,喜欢挑战,热爱前端开发;我们希望你,可以熟练使用各种 Web 前端技术,包括CSS布局、解决常见浏览器兼容性问题;
我们希望你,有基于Ajax 应用的开发经验,了解一门后台开发语言。
有兴趣的可以留言~

【前端】table中使用colgroup应用样式在HTML5文档标准下的问题

近日,在做一个页面的时候,需要对一个表格的某几列添加一些样式,理所当然地想到了一个标签: colgroup。于是乎打算先在w3cschool上DIY下看看效果,结果发现被坑爹了……

 

colgroup样例代码的显示就出问题了

以上的代码我还没有对其修改,结果显而易见,colgroup里的style:color 属性失效了……  同时,就连 align 属性也跪了..

当时的开发需求是需要对N个网页里的表格模板进行样式修改,所以总不见得把每一个模板的table的那些行都手工添加上一个class吧 T_T..

在网上找了下原因,结果在  Table columns  这篇文章里,发现了一些相关的介绍,大致意思是:原先在HTML4的时候确实是可以对colgroup应用样式的,但是到了HTML5里:

“很不幸,W3C声明中,只有一部分的样式属性可以应用到column上(border,background,width和visibility)。例外: IE7 及更低版本”

这份介绍看得我真是菊花甚痛…… 我于是用ie浏览器去测试了一下,结果确实如此:从IE8一直到IE10,都无法显示colgroup的样式,但是到了IE7就瞬间亮瞎……

IE7下colgroup的属性正常应用样式

IE7下colgroup的属性能够正常应用样式..

以上的问题在 w3.org 的wiki上也有提及,确实是目前仅能应用4个样式。

按照语义化来说,使用 colgroup 确实是符合标准的诶,不知道为何目前仍然没有支持。根据 stackoverflow 上面的一个问答,发现竟然已经是5年前的问题了… 有一种可能性是因为table的物理模型上,colgroup以及col是位于第二、第三层,仅高于最底层的table,而tr,td,th等都位于最高层,会覆盖底层的样式?(可是也尝试给colgroup加了id以增加,不过也没有效果)

于是乎,回过头来看自己项目本身的需求,也只是需要修改下字体的对齐方式(居左改为居中),所以兼容性的要求相对也不是很高,决定使用 css 3 的 选择器。所以稍作权衡,就决定用css3选择器 :nth-child(n)

———————————————–

不过实际上,当我看到后台模板编辑里的某个东东的时候… 瞬间就手贱了……

富文本编辑器的text-align

妥妥地偷懒使用富文本编辑器的对齐功能了…… (不过实际上没偷懒多少吧… 还是要一个个跑到模板里去改…… ORZ….

 

徐迅
Dalston
2013年11月25日20:57:53