google fonts

2016年5月23日 星期一

文繞圖的失敗原因

話說為了迎合設計跟銷售端,我在網頁顯示那邊做了display: table跟列印樣式時覆蓋成文繞圖(float: left)。

文繞圖是一種很基本的排版樣式,至今我無法理解為何可以繞XD,但總而言之他的寫法就是不動文字的部分,然後將要被環繞的區域加上float就好。

若文繞圖失敗目前可歸類兩個原因,1. 本文內容消除溢出。2. 本文內容清除浮動。(浮動要在最外面container才能清,如下方展示。)

See the Pen 基本文繞圖 by Inu (@Inu) on CodePen.

SASS學習筆記:Sourcemap

剛剛要整理NodeJS學習筆記的時候,為了不要亂貼CODE而不知其原因,因此上網翻「sourcemap」的功能。印象中,我最近提交專案上線後Chrome的Developer一直告訴我的map遺失。我是有想到我把css跟map放在不同folder(開發folder及發行folder),但由於我的網頁沒掛掉,因此我就先擱置在一邊。

今天剛好看到Getting started with CSS sourcemaps and in-browser Sass editing,覺得原來有這種功能很厲害!

原文那篇使用的是ROR,說要SASS 3.3以上才支援,但基本上我用NodeJS沒特別試過SASS的版本號啦@@

各種NodeJS方法中都會有Sourcemap的方法,筆者用gulp。所以在gulpfile.js這樣下:

    // gulpfile.js
    'use strict';
     
    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var sourcemaps = require('gulp-sourcemaps');

    // autoprefixer
    var autoprefixer = require('gulp-autoprefixer');

    // sass
    gulp.task('sass', function () {
        gulp.src('./scss/**/*.{scss,sass}')
        // Initializes sourcemaps
        .pipe(sourcemaps.init())
        // 轉譯SASS -> CSS
        .pipe(sass({
                //Log error
                errLogToConsole: true,
            }).on('error', sass.logError))
        // add Prefix in CSS。
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
        }))
        // 寫入sourcemaps到當前資料夾(以下下列dest('../css')為基準點,sourceRoot:以匯出的資料夾為基準點找他原本的scss資料夾位置。
        .pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '../src/scss'}))
        // 輸出CSS
        .pipe(gulp.dest('../css'));
    });

    // 有改變時即時 Watch
    gulp.task('watch', function() {
        // 任何scss folder下附檔名為scss、sass的檔案
        var watcher = gulp.watch([
            './scss/**/*.{scss,sass}'
        ], ['sass']);
    });

    // 預設一開始會跑的任務
    gulp.task('default', ['sass', 'watch']);
    

接著能在css folder內看到指定的*.css、*.css.map

然後接下來,在測試機的demo站使用Chrome開啟網頁按下F12(開發者工具)

如果路徑都沒錯的話,就能看到對應的scss位置:

[開發者工具]>[Elements]

最有趣的來了!!!如果想要用開發者工具改scss也沒問題,到[Source]中左邊目錄可以看到對應的SASS資料夾,要確定路徑是對的。

[開發者工具]>[Source]

任意位置按右鍵[Add folder to workspace],搜尋專案資料夾。

[Add folder to workspace]

[允許]後,若剛剛的專案資料夾消失,重新整理一下網頁,理論上專案資料夾就會出現。

[允許]

然後對著任一SCSS檔右鍵點選[Map to file system resource...]

[Map to file system resource...]

開發者工具即會列出剛剛資料夾內所有符合的檔案(及位置),選擇正確的路徑檔案,就會發現top內localhost下的資料夾消失了。

選擇正確的路徑

回去[Elements]隨便找一個可點選的scss link,可以發現他的確對到本機端的scss位置,不論是在[Elements]直接編輯或LINK到[Source]編輯,可以發現Ctrl+S是真的直接幫你存檔的!!!

scss link對到本機端的scss位置

但要注意的是[Elements]直接編輯的是*.css,到[Source]編輯才是改*.scss噢~

如果要編譯的話,一樣是得開CMD使用gulp、grunt、compass之類的compiler watch changed的~若Chrome沒有當掉,他偵測到更新後也會更新網頁。

最後,若是想跟我一樣同時產min跟非min(原始)的CSS的可以用下面的gulpfile。之所以用cssnano是由於之前試其他的CSS minify都失敗,餵關鍵字給辜狗後發現只有看到有人說cssnano支援sourcemap,但當code變大的時候,nano壓縮的速度真的有點慢QQ

    // gulpfile.js
    'use strict';
     
    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var sourcemaps = require('gulp-sourcemaps');

    // Post CSS unit (目前壓縮使用cssnano才有辦法用sourcemap @__@)
    var postcss = require('gulp-postcss');
    var cssnano = require('cssnano');

    // autoprefixer
    var autoprefixer = require('gulp-autoprefixer');

    var cssPath = ['../css/**/*.css', '!../css/**/*.min.css'];

    // sass
    gulp.task('sass', function () {
        gulp.src('./scss/**/*.{scss,sass}')
        // Initializes sourcemaps
        .pipe(sourcemaps.init())
        // 轉譯SASS -> CSS
        .pipe(sass({
                //Log error
                errLogToConsole: true,
            }).on('error', sass.logError))
        // add Prefix in CSS。
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
        }))
        // 寫入sourcemaps到當前資料夾(以下下列dest('../css')為基準點,sourceRoot:以匯出的資料夾為基準點找他原本的scss資料夾位置。
        .pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '../src/scss'}))
        // 輸出CSS
        .pipe(gulp.dest('../css'));
    });

    // css mini
    gulp.task('mini', function () {
        gulp.src(cssPath)
            .pipe(sourcemaps.init())
            // 再最小化,cssnano會幫你重新由小到大排序z-index,若不要要加入{ zindex: false }
            .pipe(postcss([cssnano({ zindex: false })]))
            // 將最小化的檔名末端加上.min
            .pipe(rename({suffix: '.min'}))
            // Writes sourcemaps into the CSS file
            .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''}))
            // 把最小化的寫入css folder
            .pipe(gulp.dest('../css'));
    });

    // 有改變時即時 Watch
    gulp.task('watch', function() {
        // 任何scss folder下附檔名為scss、sass的檔案
        var watcher = gulp.watch([
            './scss/**/*.{scss,sass}'
        ], ['sass']);

        var watcher2 = gulp.watch(cssPath, ['mini']);

        // 看有沒有修正到對的scss檔
        watcher.on('change', function(event) {
            console.log('SASS Task: File ' + event.path + ' was ' + event.type + ', running tasks...');
        });
        watcher2.on('change', function(event) {
            console.log('Mini Task: CSS File ' + event.path + ' was ' + event.type + ', running tasks...');
        });
    });

    // 預設一開始會跑的任務
    gulp.task('default', ['sass', 'watch']);
    

2016年5月3日 星期二

Node.js學習筆記:重複安裝後rollback安裝失敗

筆者最近碰到Node.js用官方的MSI檔案裝到快完後rollback的事件……歸咎原因我一開始就猜想是否沒清乾淨。

然後丟關鍵字餵Google,上頭方法都無腦測試過了,但還是不能用= =

在經過幾天空閒時間丟各種關鍵字餵Google,這邊提供幾種solution。

  1. 重新安裝至新的電腦再複製到開發機
  2. 使用官方exe再下載安裝npm
  3. 官方提供兩種第三方安裝方式
  4. 我就是要用MSI安裝!!!

至於有這幾種解的原因是:我一直想克服MSI的問題,但超過半數都叫大家用官方EXE後下載安裝npm,先是有時間壓力,因此多了幾種方法裝NodeJS。

重新安裝至新的電腦再複製到開發機

如果專案告急沒時間做各種嘗試,這絕對是最快的辦法。

  1. 先找一台沒裝過NodeJS的Windows OS。
  2. 下載官方MSI檔後逐步安裝。
  3. 到安裝的資料夾(通常是C:\Program Files\nodejs)把整個nodejs加到壓縮檔。
  4. 複製壓縮檔到開發機,解壓縮到任意位置(這裡解壓至C:\nodejs)
  5. 在Win環境[開始]>[控制台]>[編輯您的帳戶的環境變數]或者用下圖方式搜尋: [開始]>[編輯您的帳戶的環境變數]
  6. 在[環境變數]下新增[path],值為「C:\nodejs;C:\Users\{使用者帳戶名稱}\AppData\Roaming\npm」如下圖:

    [環境變數]下新增[path]

    第一個位置是NodeJs主程式的位置,第二個為global(-g)的安裝位置。
  7. 然後開cmd測測看:
    
        node -v
        npm -v
        npm install gulp -g & :: 隨意安裝需要安裝至global的package測試,這邊用gulp
        gulp -v        
            

    如圖:

    cmd測node、npm、gulp版本號

使用官方exe再下載安裝npm

我一開始是用這個方案ㄉ,但是我安裝失敗惹,所以才衍生了第一種方法。

但我現在檢討安裝失敗的原因八成是在安裝npm的時候層次不對。

參考這篇安裝:Install Node.js and NPM on WindowsHow to use npm with node.exe(以及下面另一個回答有搬移的目錄)

下載官方exe檔到任意資料夾(這裡設定C:\node)。

到npm的github打包專案到node資料夾,或者用git clone,如下:

    C:\node\node_modules > git clone --recursive git://github.com/npm/npm.git

安裝的層次會如下:

  • node(資料夾)
    • node_modules(資料夾,自行新增)
      • npm(資料夾,剛剛下載的,把版本號拿掉)
    • npm(從npm/bin裡面複製出來。)
    • npm.cmd(從npm/bin裡面複製出來。)
    • node.exe

NodeJS.exe手動安裝路徑

先確認[環境變數]的[path]已將NodeJS的exe加入路徑,然後在cmd測試是否安裝成功:

    c:\newproject > npm -v
    c:\newproject > npm install gulp-sass

但是我發現這個方式安裝的package會裝入一堆沒用到的東西ˊ_>ˋ,而且不能下指令更新npm……

所以與其這樣我寧可推薦「重新安裝至新的電腦再複製到開發機」。

某次NodeJS改版把裡面的專案的modules都拉到最外層了……因此上次測試時才看到他裝了一堆東西(遠)至於下指令更新npm還有待實驗。

官方提供兩種第三方安裝方式

NodeJS官方提供了兩種第三方安裝NodeJS的方式,為了寫這篇我老實的測試了他做了什麼……

我測試的是Scoop,Scoop的安裝方法蠻簡單的。先確認PowerShell有被安裝在電腦中,然後在CMD下指令安裝Scoop(ㄟ,Scoop官方首頁的YouTube影片照做就好)。

安裝完Scoop後執行下列cmd string,Scoop會幫你把官方MSI下載下來且安裝到:C:\Users\{{使用者}}\AppData\Local\scoop\apps\nodejs\{{版本號}}\nodejs

    C:\隨便 > scoop install nodejs

最後把NodeJS的路徑放到[環境變數]下新增[path],關掉CMD重開一個,測試一下npm版本號,就確認安裝成功了0.0/

順帶一提,我發現放在Scoop指定的目錄下時,對全域的npm指令會放在相同Scoop的node_modules位置,所以[環境變數]就不用加C:\Users\{{使用者帳戶名稱}}\AppData\Roaming\npm

我就是要用MSI安裝!!!

本人就是不信邪,覺得機碼沒刪乾淨,所以四處找刪除的方法。

但碰到的人似乎沒有很多,所以一直沒找到……(有找到一條指令能刪光機碼,不敢用XD)

真正解決問題是我老實的看了安裝LOG檔……再對應LOG輸出的錯誤回頭Google找到機碼的位置,把機碼砍了才OK的= =

所以這題的重點是如何看MSI的LOG……

按照如何啟用 Windows Installer 記錄的作法蠻簡單的,安裝完後到它指定的目錄找txt就好。

先開啟LOG紀錄,再做一次安裝NodeJS,回頭找LOG的txt裡面錯什麼。最難的就是找錯什麼XD,因為LOG有快20M……訣竅是開啟本文搜尋「value 3」,或者「錯誤」也可以試試看。

MSI的Log錯誤截圖

除了MSDN用裝的方式(記得要解安裝,不然每次用MSI裝都會產生20M左右的LOG),也可以在CMD下指令記錄單次LOG

    msiexec /i "C:\LocalDir\node-v4.4.3-x64.msi" /L*V "C:\LocalDir\InstallLog.txt"

本篇的錯誤是:無法在 C:\Program Files\nodejs\node_perfctr_provider.man 安裝效能計數器,錯誤碼是 13。明顯的就是這個「效能計數器」的問題,大概GOOGLE一下找到這篇[MS-SQL]安裝時發生錯誤『檢查現有的效能計數器登錄區是否一致』

雖然按照他的方法開啟Regedit([開始]>[Regedit])檢查了但沒有結果XD,不過他提供了我可能的路徑:

    [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Perflib\...]

地毯式搜尋了一下,還真的在[_V2Providers]找到未清掉的機碼XD,直接對這個folder({1e2e157d-....})右鍵刪除,重裝NodeJs.msi就成功了!!!

登錄編輯程式(Regedit)截圖

經此一事,很明顯的我學到要針對錯誤對症下藥……所以LOG要看,亂測是沒有用的。

2016年4月21日 星期四

Node.js學習筆記:init的應用

筆者剛開始用Node.js的時候看教學文件不太明瞭為何第一步驟是產生package.json,覺得copyright這種東西隨便ra…所以之前寫SCSS的時候都不init。

每次要建置新的專案的時候,都要按順序慢慢install,像這樣:

    
    $ npm install gulp
    $ npm install gulp-sass
    $ npm install gulp-sourcemaps
        …
    

執行第一次後,想說之後就複製貼上node_module…但試過後發現他會因為檔案數量太多有問題= =。

所以只能每次複製貼上嗎!?真心覺得蠢,難道我每做一個專案都要重新執行上述步驟= =!?

一開始想:不能放global區,大家都去global找檔案嗎?然後發現,Node.js的確不是這麼設計的,不然我只能去下link指令連到global…但總覺得好像哪裡有問題。

所以我過了兩三個月一個一個install的日子……直到我看到npm 基本指令。提到「只要將 package.json 這個檔案放在專案的根目錄裡, 就不需要一個個的手動安裝套件.」

於是我明白ㄌinit的重要性ˊ_>ˋ



先產製package.json的檔案:

    $ npm init

然後中間看需求輸入,重點是讓他生出package.json的文件。

產出文件後,由於筆者只用Node.js的SCSS跟CSS Minifiy、JS Minifiy之類開發時才需要的package,一個一個輸入歸類到開發:

    
    $ npm install gulp --save-dev
    $ npm install gulp-sass --save-dev
    $ npm install gulp-sourcemaps --save-dev
        …
    

如果要建製新的專案,用的東西也差不多的時候,直接把package.json複製到新的專案資料夾,輸入:

    $ npm install -l

就能把基本的東西裝完了!!!



bower也差不多,要重新建置一個bower.json

    $ bower init

建置bower.json完成後再安裝需要的內容:

    $ bower install normalize-scss --save-dev

新的專案把bower.json複製到新的專案資料夾,下一行指令,預設的bower就安裝完成了 !

    $ bower install

參考資源:

2016年3月11日 星期五

在Blogger為程式碼上色

其實是為了筆記XD,看了數種plugin後最喜歡prism的theme~

一般來說,程式若要寫在blog上,用html標記的話是放在pre>code內

 <pre><code>這裡</code></pre>

但如果未上色的話看起來會較不容易閱讀。如下:

 
setTimeout(function(){
    $('#areaMenu').parents('nav.nav').removeClass('active');
}, 1500);
$('#areaMenu').on('click', function(e){
    e.preventDefault();
    if($(this).parents('nav.nav').hasClass('active')) {
        $(this).parents('nav.nav').removeClass('active');
    } else {
        $(this).parents('nav.nav').addClass('active');
    }
});
 

如果highlight code就會覺得友善多了,而且很多人都有寫,所以找網路資源就好!

 setTimeout(function(){
     $('#areaMenu').parents('nav.nav').removeClass('active');
 }, 1500);
 $('#areaMenu').on('click', function(e){
     e.preventDefault();
     if($(this).parents('nav.nav').hasClass('active')) {
         $(this).parents('nav.nav').removeClass('active');
     } else {
         $(this).parents('nav.nav').addClass('active');
     }
 });

本次使用prism.js示範。

先到後台,選版面配置

到footer的位置新增HTML/JavaScript

將prism在cdn的位置填入

 
<!-- 主要的樣式 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css" rel="stylesheet" type="text/css" />
<!-- 顯示行數的樣式 -->
<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" type="text/css" />
<!-- 上色js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<!-- 顯示行數的js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/plugins/line-numbers/prism-line-numbers.min.js"></script>

然後基本上就會高亮程式碼了!

 <pre class="language-html"><code><!-- 這裡 --></code></pre>

如果發現mobile版的時候HTML/JavaScript沒有被插入,請在部落格右鍵,看網頁原始碼找被插入的檔案。在本篇,blogger給他的id="HTML1"

到範本中,選擇「編輯HTML」。

可以依照他的工具跳到HTML1或者我比較喜歡用ctrl+F快速跳轉。

在該widget下增加「mobile='yes'」的屬性

 <b:widget id='HTML1' locked='false' mobile='yes' title='code style plugin' type='HTML'>...

手機板就會顯示此樣式囉!


參考資源:

2016年1月8日 星期五

網頁使用微軟正黑體的修復方案

最近在工作上遇到要使用黑體為網頁預設字體,本來認為微軟正黑體很安全的,直到我們在標題出現『碧』這個字……
以下示範:
碧筵綰這三個字特別遠。
Google後看維基的資料,內心無限無言。M$老大,你為什麼明知道他是bug卻放生他TAT(崩潰)
維基上面有寫某個網誌在本機端的解法,但是我是web前端,怎麼可能叫用戶自己下載微軟正黑體修訂版……
後來同事提到換字體,立刻想在網路找open source的中文字體。Google固然是有提供黑體,但試用google黑體的粗體發現是個悲劇……
明顯的『熱』、『食』等很奇怪,放大到一定程度還會有奇怪的稜角XD……(最近一兩個月(2016/6)回來看發現google黑體要用其指定的方式置入字體樣式,然後稜角的問題消失惹,可喜可賀。但比較需要注意的是,我個人拿線上工具測,線上字型要1.93MB,可能要衡量是否有這個必要load線上字型)
以下新聞範例,原文按此
〈台北都會〉士林夜市美食區重新開幕 回饋招待
〔記者游蓓茹/台北報導〕北市觀光熱門夜市、士林市場美食區每四年皆會「自我健檢」,重新整頓用餐與作業空間,去年十一月卅日起暫停營業進行整修,在十二月廿八日開始恢復營業,士林市場自今年一月八日起舉辦四波回饋活動,歡迎在地人再次回到士林體驗夜市美食的好滋味。
今起四波活動 吃美食送獎金
「舊愛食客」今天由市場招待十組老朋友再聚士林用餐,每組都憑舊照片報名,過去聚餐畫面「原影重現」,還有當年第一次離開澎湖來士林參加畢業旅行的同學們來此重溫舊夢,用美食延續彼此感情。
「豪情宴客」明、後天晚上七點,顧客在B1美食區用餐都有機會被招待,市場將現場抽取攤號,找到指定桌次後,該桌所點購的餐點全數由市場買單,兩天共產生廿組幸運兒。
「在地食客」從一月十二日至十五日起連續四天,憑身分證末碼就可換取士林市場一百五十元消費券,每日限量兩百人;至B1美食區消費還可參加第四波「行動食客」,自一月十二日至十五日不限金額消費即可獲得限量序號參加抽獎,總獎金高達十萬元!本次活動也與本土插畫家合作,以不同角度設計四款士林市場手繪明信片,放置於B1美食區供民眾索取!
在查閱資料時候意外發現微軟的黑體系列日文可以使用,並且所有的漢字也可以用!所以本來想偷懶全部換成MS Gothic(win7以上內建)或Yu Gothic(效果比較好),但他會在特定的漢字以日文的寫法書寫,例如旅這個字。
正黑體的旅
Yu Gothic 或 MS Gothic的旅
※沒有yug的話會以msg代替
使用@font-face的時候就想他應該可以限定使用的字吧?結果真的有XD。
所以最簡單實現在微軟系統下能正常一點顯示這三個字的方式就是在粗體的時候把字改成Yu Gothic / MS Gothic的方式顯示。
碧筵綰這三個字就正常了!

/* 修正粗體 */
@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic);
}
/* 一般粗細的時候改回微軟正黑 */
@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體);
}
* {
    font-family: Helvetica, Arial, 微軟正黑體修正, 微軟正黑體, serif;
}
        
覺得沒有解決到問題嗎XD?
事實上只有windows系列才會產生這種問題,當然最保險的做法是提供整個完整的黑體字體,但中文字的大小真的很可觀,不太可能自己壓一套字體,就算壓了,想想CSS也不過幾百K,一套字型上去就他的10倍UP XD……
當然如果你家很有錢,可以用justfont這樣的雲端文字服務提供,可是他的服務不是買斷,我覺得不是我想要的方法(因為老闆可能也不在乎吧XD)。
所以接下來是進階修改,把電腦的微軟正黑體粗體叫出來,然後修正寬度,只存三個字的補丁,再利用上面的@font-face做修正就好了!
可參考下列網誌說明:
需要注意的是微軟正黑體只有在windows粗體出問題,因此要用js判斷裝置(navigator.userAgent)額外載入@font-face設定,不然像android、mac、iphone看到的就會是兩種黑體……