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

---

參考資源：

• NodeJS require a global module/package
• npm 基本指令

在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'>...

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

---

參考資源：

• 版面配置的網頁元素標記
• 如何在網頁blogger中插入程式碼

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

最近在工作上遇到要使用黑體為網頁預設字體，本來認為微軟正黑體很安全的，直到我們在標題出現『碧』這個字……
以下示範：

碧筵綰這三個字特別遠。

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做修正就好了！
可參考下列網誌說明：

• 原來微軟正黑體有這種怪問題
• 自製中文網頁字形（Web Font）並內崁至網頁中（使用 CSS @font-face）

需要注意的是微軟正黑體只有在windows粗體出問題，因此要用js判斷裝置(navigator.userAgent)額外載入@font-face設定，不然像android、mac、iphone看到的就會是兩種黑體……

sublime的前端實用小工具們

這邊是sublime的前端使用小工具紀錄，目前在安裝sublime後都會將擴充工具裝一裝。

1. package control：必須要有package control之後才能裝擴充套件。

2. emmet：撰寫一般HTML不可或缺的小工具！！！（當然如果用Haml就相對沒那麼重要，但還是有些指令可用。）

   emmet的寫法很簡單，拿list結構舉例，一般要打<ul><li></li><li></li><li></li></ul>這樣的階層結構，用emmet只要打ul>li*3就可以了。

   如果想要決定的operator先跑的順序，可以用小括弧()把要執行的先框起來(當數學函式使用)，像是這樣ul>(li*3)。習慣縮寫的輸入後，打HTML會變得更快

3. eCSStractor：自動產SCSS的格式(可選BEM)

待補...