Featured

Timeline

记录清风迅来(徐迅,Dalston Xu)生活中遇到的各种各样的开心事、无奈事、有趣事、郁闷事,各种流水账、吐槽、日记、游记、食记……一日一记,线性的时间,非线性的生活。尽在清风迅来博客的timeline,各位看官记得要提醒懒人叉叉(XX,XuXun),每天进步一点点,享受慢生活。Carpe diem …… to be coninued !

to be continued……^_^

Timeline for May,2016

2016年5月
1. 创建2个微信公众号
① 喵本吃土白: 介绍墨尔本的好东西

喵本吃土白 分享澳大利亚墨尔本的好东东~

喵本吃土白 分享澳大利亚墨尔本的好东东~

② 清风迅来: 美食,摄影,在路上

清风迅来 美食,摄影,编程,在路上,你若盛开,清风迅来
清风迅来 美食,摄影,编程,在路上,你若盛开,清风迅来

Timeline for December,2013

2013年12月7日
1. 公开日记.

Timeline for July,2013

2013年7月30日
1. 今天访问这边的速度到挺快的。。。我在想是不是因为之前一直没有动这个网站,导致网站的数据库懒得生锈了所以没法一下子恢复正常的工作状态…在考虑如果这边稳定的话,以后就把百度上面的个人记录搬过来……
2. 给这边添加了GA统计…… 继续加油吧骚年~

2013年7月29日
① 重新开始折腾博客╮(╯▽╰)╭ ,导入了去年8月7日的XML~ 导入的过程中,网址各种500报错无法访问⊙﹏⊙…… 本来还想删掉这个Wordpress重新安装一个的,结果看到创建日期是2013年6月13日…于是还是想等等试试

Timeline for August

2012年8月7日 4th year since 2008.8.7
① 网站的免费空间转战于 freehosting.com

Timeline for July

2012年7月15日
① Add some ADs  on my site:

各位童鞋… 好心的话帮忙点击上面图片注册下呗~ 免费的~ 注册成功后…… 我的网站就基本可以免除月初被封空间的情况了=.=

② 折腾了Java EE 配置……简单实现了下JPA声明式定义实体,以及Hibernate 基础的数据库交互(没有使用Spring的HibernateTemplate哦~~ 因为据说 Hibernate 4,Spring 3.1 就不支持 HibernateTemplate了的说……)

2012年7月14日
① 到学校去把被子等行李搬回家
② 笔记本的无线网卡好像坏掉了!

2012年7月13日
① 工作任务完成了90%+
②  办公室换座位咯~
③ 晚上留下来打 DotA ……  一直随机流 …… 超常发挥……

]2012年7月8日
① @杭州

Keywords:纪念品、抽奖、微博、自荐代码、 iOS、

2012年7月7日
① @杭州

Keywords:打的、高铁、杭州、阿里技术嘉年华、MySQL、拔赤、微博、久八久 、西湖、一个人

2012年7月6日
① iPhone 多视图切换
② 2011年7月发展的那批童鞋,今天终于转正了…… 我也轻松了不少……

2012年7月5日
① iPhone上的 Hello World
② iPhone上的 计算器~

2012年7月4日
① 终于搞定了 Xcode ~ 开始学习~~

2012年7月3日
① 正式实习第一天~  从Web 前端开发实习生被调到了 iPhone 前端开发= = 这……

2012年7月2日
① 网站 down 掉了

2012年7月1日

Continue reading “Timeline”

远方 | 莫干山 雾茫茫 雨濛濛 | 莫干山游记 by 清风迅来

莫干山 雾茫茫 雨濛濛 爱回收团队欢乐游

忽闻春尽强登山
偷得浮生半日闲

小时候 春游秋游经常下雨
那时候 总抱怨不能玩得尽兴
然而现在 却特别喜欢雨天
不得不说 雨天是个摄影的好天气



这一次 莫干山之行也不例外地一路风雨相随
还幸运地邂逅了茫茫云雾
司机大叔说 他开车带团上莫干山数十次,却从未见过如此大雾。

这里的山路200多个弯,雾最浓处能见度不过10米
由衷为司机大叔车技点赞的同时不禁冷汗连连

下榻酒店名为“剑池山莊”,距离剑池景区入口不过几步之遥
后人为纪念莫邪、干将,将其铸剑、磨剑处叫剑池,将剑池所在之山名为莫干山。

剑池山庄

毛主席下塌处是第一处游览的景点,乘坐小巴行驶约5分钟抵达景区入口
台阶两旁除去白茫茫的雾便是一片绿色

 

延台阶步行约5分钟到达毛主席下榻处
大雾天 透过窗户往外看去 石墙 密林 略显沧桑和荒凉

 

到此一游之后下一处景点则是蒋介石官邸:武陵村 。

此处地势轩爽绿荫蔽天,环境幽静自成天地,建有掩映于绿树芳趣之中的武陵村宾馆等别墅群,犹如陶渊明笔下之“世外桃源”,故名“武陵村”。


紧接着继续下一处景点则是芦苇荡公园,也是今天导游带路的最后一站,同样是乘坐小巴前往,10分钟左右车程。
可能因为今天山中大雾,到处除去绿色就是灰蒙蒙的雾气,下车后第一眼就被一间咖啡屋窗边色彩斑斓的盆栽给吸引了。

继续行走在石阶上,无意中发现一处有意思的台阶,上面印着似乎是喵星人的爪印,倒是山中真的很难得遇见有野生的小动物,唯一能见着的动物似乎只有当地人养殖的鸡和狗。

十二生肖雕塑也只见着了龙、鼠。其余的可能由于路线原因没有见着。园内树林葱茏,流水淙淙,夏日幽静清凉,极宜消暑。有处喷泉,水质清冽。

莫干山 莫元雕塑
莫元雕塑

相传春秋末年,太湖人莫元中年娶妻,老年得女。妻故后携女莫邪来山隐居,闲时学医采药,为乡人治病。山上百草俱全,唯缺芦苇,莫元从太湖移来芦根,植于门前水洼。寒来暑往,芦苇成荡。
忽一日,天空一声鹤唳,昆仑山西王母派往东海瀛洲的仙鹤信使,正被秃鹰追逐,坠入芦荡。莫元赶走恶鹰,救下仙鹤,后莫元成仙跨鹤而去。

游览完芦苇荡公园后,接下来就是自由行了。芦苇荡公园的出口离下榻酒店很近,不多远便走到了。

有道是:

莫干之美在剑池,剑池之美在飞瀑。

而陈毅也曾题词

夹道万竿成绿海,百寻涧底望高楼。
剑池飞瀑涤俗虑,塔山远景足高歌。

由于时间尚早,决定还是去剑池景区转一圈,去领略一番剑池的风光。据说从入口处到到剑池约800多级台阶,不过显然对于我们来说不在话下。

一路下坡,感受着空山新雨后的怡人气候,观赏着清泉石上流的美好景致。

路上走走停停拍照歇息,约半小时左右,终于走到了剑池……
小伙伴们也纷纷在此留念~

据说继续往下走就是飞瀑,不过似乎小伙伴们也都有些累了,也不清楚再往下还有多远的路,以及邻近饭点肚子也都开始饿起来了,于是乎约好第二天清早再探剑池飞瀑。
接着就便是: 茫茫大雾,漫漫登山路……

虽然前路愈发迷蒙 幸运的是一路上与小伙伴们一同前行 路上充满欢声笑语

If you want to go fast, go alone;
if you want to go far, go together.

离开剑池景区回到酒店路上,发现雾气似乎更重了一些……

晚饭过后,便是Team Building 时刻,破冰、游戏、惩罚…… 于是时光就在欢声笑语中度过了.

TB过后,长夜漫漫,小伙伴们组队桌游、打牌各得其乐……


一夜过去 Zzz~


6点30起床 准备再探剑池飞瀑
不巧的是 就在准备出发时 山中下起了大雨 于是作罢
巧的是 酒店的早餐时间为7点半到8点半 错过了飞瀑 却可以享用早餐
对于吃货属性的笔者而言简直福音
毕竟 ——

早餐是人生的一半

早餐过后 上午8点
雨还在一直下个不停 也似乎没有变小的趋势
按照行程 11点钟我们即将离开莫干山
于是原先的6点早起探飞瀑小分队化身为酒店4楼露台摄影小分队 =。=
在露台拍照修图 也有不一样的风景
从露台眺望远方
山林深处 云雾缭绕 却隐着几幢小屋
随着雾气聚散 时隐时现


期间 还试着玩了会儿慢动作摄影以及延时摄影.

露台摄影小分队还神奇地统一了队服
ps:此处要感谢把我拍年轻10岁的app……

 

ps: 此处应该有两段视频,然而腾讯视频貌似不太支持外链的样子~ 大家可以到

http://dwz.cn/3wkEPo 

此链接去看看~ 而且里面也附有背景音乐哦~

最后一直在露台拍照直到集合离开莫干山……
而在县城中的美味午餐则为此次莫干山之行画上了圆满的句号。
感谢公司安排了这么一次莫干山欢乐游~


后记:

时过境迁,终于明白, 人一生中每一个经历过的城市都是相通的, 每一个努力过的脚印都是相连的。 人生没有白走的路,每一步都算数。

 

路漫漫其修远兮 吾将上下而求索


感谢各位看官能将这篇长篇巨文看到此处~ 希望大家喜欢,也欢迎大家点评~
若是喜欢,可以关注一下我的微信公众号,里面会分享美食、分享风景,或许也会分享前端的个人经验。 ^_^

清风迅来 微信公众号

 

清风迅来

2016 初夏

【清韵·墨白】眼里为你下着雨,心却为你撑着伞.

眼里为你留着泪,心却为你撑着伞 阿楞
眼里为你留着泪,心却为你撑着伞

我宁愿所有痛苦都留在心里
也不愿忘记你的眼睛
即便眼里为你下着雨
心会一直为你撑着伞

2015.6.28
摄于上海植物园

清韵·墨白

Drifting Bottle

Four years ago,

I got a drifting bottle

from you ,

saying hi to me .

 

Nice to see you,

you wrote ,

Let’s be friends.

 

Words saved in

my message box ——

so deep , so secret.

From time to time ,

I might read.

 

Four years later,

You received a drifting bottle

from me,

saying I love you.

 

Nice to meet you,

I wrote,

Let’s be a couple.

 

Words hidden in

the drifting bottle ——

so deep , so secret .

Maybe

You’ll never see.

———————

2011.2.6 known

&

2015.1.15 met

Author: XX

2015/7/10

————————————

后记:

习惯性地会将自己写的长的像诗的文字去写成英文,

其实是高中时候经常写一些“英文小诗”。

自娱自乐,自愚自乐

之前写的中文版在这里 《漂流瓶》

2015年7月10日21:41:13

漂流瓶

四年前

我收到一个漂流瓶

里面是你的问候语

 

你说,

很高兴认识你

可以的话,我们交个朋友吧

 

短信里黑色的字

存在信箱里

藏得很深、很深

偶尔

我就去看看

 

四年后

你收到一个漂流瓶

里面是我的悄悄话

 

我说,

很高兴遇见你

可以的话,做我女朋友吧

 

纸条上红色的字

躲在瓶子里

藏得很深、很深

也许

你不会看见

————————–

2011.2.6 相识

&

2015.1.15 相见

写于 2015年7月1日23:26:26 上半部分 完

ps: 文笔渣,等哪天文笔好点了再来修饰修饰吧 =w=

关于 xuxun.me

这个网站也默默地存在了3年多了,一直以来也并没有好好的打理.

期间经历过服务器宕机,被挂木马,数据丢失等等奇奇怪怪的问题

甚至现在每隔一段时间来后台删垃圾评论也成了一种日常。

原先还写过不少跟技术相关的文章,也开发过一些前端的小玩意儿,后来自己越来越懒,也就偶尔记记日记,发发牢骚,换来一个好心情。

还记得以前还至少会有人来看看我这小网站,现在快一年多没有正常人的评论消息了。

当初一时兴起,以自己名字命名的网站就这么慢慢地被我冷落了 _(:з」∠)_

看到这里,如果有人看到的话,估计会以为我要停掉了?

不好意思让你们失望了。。。

我又在立flag打算好好弄这个网站了!

啊哈哈哈哈,

接下来,

有不少新想法,

因为这两年的沉淀,

自己肚子里的代码稍微有了一点点,

自己单反里的照片稍微多了一点点,

还有,

正在酝酿的青春小诗三部曲,

以及未完成的梦想,

我都不会放弃,

那就加油吧。

最后附上自己的Lofter链接~

吃货XX http://liveforfood.lofter.com

清風迅來 http://xu-xun.lofter.com

哦对了

我还建了一个QQ群,

279717899

虽然我知道

然并卵

不过,

永远相信美好的事情即将发生

建群建到群数量上限,

终于确定好这个群号

279717899

爱妻97一起吧~久久~

2015年6月25日22:37:28

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)

最后更新:2015年7月18日11:31:08
原文链接: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语法正确,但没有正常渲染?

浏览器会根据 DOCTYPE 声明来决定如何渲染网页:更符合Web标准或是更兼容旧版浏览器的bug。

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

为了应用CSS,Web服务器必须以 text/css MIME 类型来处理 CSS 样式表;如果Web 服务器不支持该类型,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. IE6 同一个html元素上挂多个class 并且css样式也有多个 .class1 .class2 会以最后一条为准

 

徐迅 / 清风迅来

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