Don't make me think

In the past, if a different font was desired, I had to create images for the text instead.But image scale up badly and loaded slowly. I think web fonts is a better solution. Google Web Fonts(GWF) allow to host on their service for request fonts without limit. So It's easier to use different fonts in the web page. Most of all, I only use few characters but include one hole font family. Grunt-font-optimizer is the system which could help us to repack font with characters what we need. How to install Grunt-font-optimizer Install nodeJS Install grunt cli Install grunt-font-optimizer : npm install grunt-font-optimizer --save-dev Load grunt-font-optimizer in gruntfile.js grunt.loadNpmTasks('grunt-font-optimizer'); Download google web fonts form skyfonts Skyfonts is the system which could download and sync google fonts easily. Example to imprement grunt.initConfig({ font_optimizer: { default: { options: { // Chara...

Not all the mobile platform all support fixed position. I have written a project to be mobile friendly with bootstrap 3 and make fixed navbar on scroll. I found iOS5 and after has strong support for fixed positioning but iOS4 and below simply treats elements as static and scrolls them along with the rest of the page. Javascript Solutions for IOS enjoy it. //detect is iphone/ipad/iPod and safari version under 6533 //fix navbar-fixed-bttom position var safari_prefix = false; var ua = navigator.userAgent; if (/iPhone|iPad|iPod/i.test(ua) && ua.lastIndexOf("Safari/") > 0) { var version = ua.substr(ua.lastIndexOf('Safari/') + 7, 4); //console.log(ua.lastIndexOf('Safari/')); if (version iOS Release / Mobile Safari Version &#10172See more

有時為了求資料讀取速度與方面性, 真的很難避免全域變數的使用, 若該變數內容不具隱私權, 又不會被任意更動, 個人是覺得可以使用, 提供簡單的func如下, 將變數內容新增成object, 又給予id辨別, 全域變數只會被讀取不會被改變... HTML 宣告全域變數 JS 處理全域變數 //MODEL var MODEL = (function () { // Create a store to hold the private objects. var privateStore = {}; var uid = 0; function MODEL (data) { privateStore[this.id = uid++] = {}; privateStore[this.id].data = data || ""; } MODEL.prototype.readData = function (item) { var data = privateStore[this.id].data; if (item && data.hasOwnProperty(item)) { return data[item]; } else { return data; } }; return MODEL; }()); var model = new MODEL(dataTest); model = model.readData(); //model could be change not infect global variable