Archives for : 前端

星期二 晴 27~38℃

js 判断浏览器(含360)

判断 360 浏览器,详见:http://xliar.com/thread-138-1-1.html

下面的 360 判断是从上面的方法中抽离的,只允许 chrome 以及 IOS 上的 safari 访问:

function checkBrowser() {
    var ua = navigator.userAgent,
        isChrome = (ua.indexOf("Chrome") != -1) ? true : false,
        isIOS = /\((iPhone|iPad|iPod)/i.test(ua) ? true : false,
        isSafari = (ua.indexOf("Safari") != -1) ? true : false,
        help = function () {
            alert(‘非chrome浏览器’);
        };
    if (!isChrome) {
        if (isIOS && isSafari) {
            // 在IOS上使用safari
        } else {
            help();
        }
    } else {
        // 360
        var subtitleEnabled = function () {
                return "track" in document.createElement("track");
            },
            scopedEnabled = function () {
                return "scoped" in document.createElement("style");
            };
        if (subtitleEnabled() && scopedEnabled()) {
            help();
        }
    }
}


chrome扩展开发笔记(10) notification升级

chrome 更新到 v28,发现以前使用 createHTMLNotification() 创建桌面通知的方法:

webkitNotifications.createHTMLNotification(‘notification.html’);

会报错:

Uncaught TypeError: Object #<NotificationCenter> has no method ‘createHTMLNotification’

新的 notification 只支持“文本”和“图片”,且不再支持加载 html 页面。

参考:
(英文)https://developer.chrome.com/apps/desktop_notifications.html
(中文)https://crxdoc-zh.appspot.com/apps/desktop_notifications.html

新的 notification 方法参考:
(英文)https://developer.chrome.com/apps/notifications.html
(中文)https://crxdoc-zh.appspot.com/apps/notifications.html

(以上参考资料可能需要翻墙访问)


屌丝团记忆(55) 吃饭,永远的痛

一到吃饭时间就纠结,磨磨蹭蹭,磨磨叽叽,去哪吃呢?

其实去哪吃并不重要,重要的是,吃饭时间到了,就得先站起来走出去再说。

星期四 少云 26~37℃

html5 本地存储写入读取json

var data = {
    intro: ‘test’,
    arr: []
};

// 写入(把json转成字符串)
localStorage.setItem(‘my_storage’, JSON.stringify(data));

// 读取(把json字符串解析成json)
var json = JSON.parse(localStorage.getItem(‘my_storage’));
alert(json.intro);


办公室健身(36)

俯卧撑,下午 60 个。

星期一 晴 26~36℃

动态布局库 isotope

暂时用不上,记录一下。

Isotope 是一个jQuery的插件,用来实现精美的动态元素布局。

Isotope可以实现仅仅依靠CSS3无法实现的动态布局方式,可以动态添加,删除,排序,筛选元素。Isotope的动画引擎可以充分使用现代浏览器CSS动画中GPU硬件加速性能。


屌丝团记忆(45) 新同学

上周新入一位后端同学,今天新入一位运营同学,一共 13 人了。

接下去主要招的是后端和运营,前端可能也还要再招一个。

星期一 阴,傍晚暴雨 24~31℃

Koala – 开源前端预处理器语言编译工具(支持Less、Sass、CoffeeScript编译)

http://www.v2ex.com/t/63881

http://koala-app.com/index-zh.html


Backbone.js入门学习笔记(推荐教程)

找了一些中文教程,这个还不错,比我看到的其他中文教程好。

http://www.the5fire.com/backbone-tutorials-catalogue.html

2013-9-10 更新:

糯米同学推荐的:Backbone源码分析-Backbone架构+流程图

星期六 蒙蒙雨转阴 23~31℃

屌丝团记忆(42) 前端目录结构讨论

今天讨论前端目录结构,定下的结构:

/static
-/core(内部js, css)
–/base
-/vendor(外来js)
-/apps(所有的模块都放在这个目录下)
–/app_1
—/js
—/css
—…
–/app_2
–…
-/image(不把 image 放在的 app 各自的目录下,是考虑到目录移动的灵活性,如 cdn 等)
-/components(2013.06.28讨论新增)

主要用到 jQuery/RequireJS/Backbone/Underscore.

星期四 阴 22~31℃

html5 audio 语音播放在手机端使用注意

在手机端需要先播放,否则监听不到 canplay.
ios、android的chrome

var player = $(‘audio’).get(0);
//var ios = (/(ipod|iphone|ipad)/i).test(navigator.userAgent);
var mobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile./);
if (mobile) {
 player.play();
}
player.addEventListener(‘canplay’, function() {
 // …
});

扩展阅读:
http://kolber.github.io/audiojs/
http://leiyongping88.iteye.com/blog/1831145


在家健身(76)

小区里慢跑 6 圈,25 分钟左右。

星期一 晴转多云 25~35℃

js“复制到剪贴板”方案

  1. zeroClipboard
  2. zClip
  3. 参考:http://my.oschina.net/ernest/blog/39251

抽空整理了一份 zclip demo(含 zclip 文件):jquery.zclip.1.1.1.rar

注意:如果放在弹出层里,需要在弹出层显示后再调用 zclip() 方法。

以 bootstrap-modal 的 callback 为例:

$(‘#my_modal’).modal().show(function () {
 $(‘#my_modal .copy_url’).zclip({
  path: …
  copy: …
 });
});


bootstrap-modal 回调

$(‘#my_modal’).modal().show(function () {
 // callback…
});

参考:http://stackoverflow.com/questions/11821865/twitter-bootstrap-modal-how-to-pass-data-to-callback-function


屌丝团记忆(40) 工作已经开始影响到家人健康

上个月记录的《屌丝团记忆(29) 彷徨》,记录了创业与个人健康的担忧,现在发现,不仅是个人健康,还影响到了家人的健康。

LP 昨天早上突然心脏不舒服,紧急去医院,医生初步诊断是心律失常、心律不齐,然后拍胸片和做24小时动态心电图。

从昨天早上到今天早上,发作了四到五次,差不多四五个小时一次。

分析一下,主要有以下两个原因:

  1. LP 没上班,自己一个人在家,心情比较压抑。
  2. 我晚上太晚回家,在我到家之前,LP 要么在等我,还没睡;要么半睡着,又不敢完全睡着,经常在半睡半醒间被我的开门声惊醒。这么持续了三个月。

昨晚一夜没睡好,心里在纠节着,矛盾着,我们这样创业究竟是不是太急功近利了?

第1851天:js时间比较

星期五 小雨转阴 19~27℃

js时间比较

function compareTime(begin, end) {
 var begin_time = new Date("1970/1/1 " + begin);
 var end_time = new Date("1970/1/1 " + end);
 if(isNaN(begin_time) || isNaN(end_time)){
  return null
 }
 if(begin_time > end_time) {
  return 1;
 }
 if(begin_time < end_time) {
  return -1;
 }
 return 0;
}

var begin_time = ’8:00′;
var end_time = ’9:00′;
alert(compareTime(begin_time, end_time));
 

星期五 小雨 18~25℃

让scroll事件在滚动条停止时响应

var timeout = false;
$(window).on(‘scroll’, function () {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function () {
// doing…
}, 100);
});

参考:http://www.lav.so/vskill.php?id=2

星期六 小雨转阴 6~13℃

chrome 实时查看页面 ip 的插件

  1. Chrome Flags
    安装好后,点一下插件 ico 才可以看到 ip
     
  2. HostAdmin
    会直接在插件 ico 上显示 ip,同时也可以切换多组 hosts
     
  3. hosts文件管理工具
    可以设置在页面下方角落直接显示 ip,切换hosts也很方便。
    这个工具的页面 ip 显示比较准。切换hosts后,如果要生效,一般要重启浏览器,但是有时只要过一会就会生效,不用重启浏览器。这个工具可以实时监视页面ip。

PS:之前记录过一个SwitchHosts,也是一个切换 hosts 的系统小工具。


网站变灰CSS代码

html {
 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* ie */
 -webkit-filter:grayscale(100%); /* chrome */
}