提升 npm install 安裝速度

Npm-logo.svg

npmNode.js 套件管理模組,相信大家對 npm 不會很陌生,如果對於 npm 不了解的,可以參考阮一峰寫的這篇文章,今天要來探討的是如何提升 npm install 的安裝速度,如果你正在嘗試 npm@3 版本,我建議可以先換到 npm@2 的版本會比較快(為什麼呢?底下有數據會說話)。Github issue 上也蠻多速度上的討論,然而前幾天有網友發表一篇關掉 progress 提升不少速度,實際上我們可以拿專案來測試 npm@2 及 npm@3 的速度看看。

Continue reading “提升 npm install 安裝速度”

TJ 的新作品 frontend boilerplate 前端工具整合

github-logo

今天突然看到 TJ 開了一個新 Repo 是 frontend boilerplate 嚇到我了,自從 TJ 去年發表要轉向 Go 之後,就把他自己很多的 Node.js Project 轉給其他人維護,也漸漸沒在 Github 上面活動,但是今天又看到她整理了一份 frontend boilerplate,內容含了現代流行的前端開發工具,大家可以參考看看,是個不錯的 Template:

期待 TJ 能有其他新作品啊。

JavaScript in 2015

Screen Shot 2015-09-09 at 2.03.34 PM

在這幾年的趨勢看來,JavaScript 已經環繞在各領域了,不管在 Web 前端或後端,上層或下層,都充滿了 JavaScript,其實都是托 Node.js 的福,網路上看到這篇 JavaScript in 2015,裡面講到 JavaScript 所有的工具,不管前端到後端,每一年都有新的工具跟新的 Framework,從以前寫 BackboneAngular.js 到現在 React.js 改變了整個 JavaScript View 的生態,工具流程整合從 Grunt.jsGulp.js 的出現,整個生態又轉換了,大家陸續將工具全都轉到 Gulp,最後又出來一套 Webpack,Webpack 出現基本上不會影響 gulp 發展,因為 Webpack 還是有很多限制,在前端或後端在上 Production 前的一些流程像是 copy 檔案等,這些是 webpack 無法整合的,看到這些工具一一出現,也不知道明年或現在會不會又跑出一套新的玩具,讓整個 JavaScript 生態整個改變。寫上層的同時,看到同事在寫底層,同事就會跑過來拍拍我肩膀說:『好險我是搞 Kernel,搞上層就要跟你們一樣天天追新技術,永遠沒有停止的一天』。看一下全世界 Job Trends

Continue reading “JavaScript in 2015”

Laravel Presenter 在 Controller 的使用

Laravel PHP Framework

Laravel Auto Presenter 是一套用在 view 裡的 decorates objects,搭配資料庫時,如果有需要組合或整合欄位來顯示相關資訊,這套就非常適合使用在 Laravel View 裡,如果不是透過 Laravel Auto Presenter,開發者也可以利用 Laravel Accessors & Mutators 來實現這方法,只是這要寫在 Model 層,寫法如下,此做法寫起來蠻亂的,而且也並不是每個地方都需要擴充這些欄位。

/**
 * The accessors to append to the model's array form.
 *
 * @var array
 */
protected $appends = [
    'is_twitter',
];

/**
 * Get the user's is_twitter flag.
 *
 * @param  string  $value
 * @return string
 */
public function getIsTwitterAttribute()
{
    return (bool) ($this->attributes['options'] & self::$OPTIONS['is_twitter']);
}
Continue reading “Laravel Presenter 在 Controller 的使用”

Facebook React Jest 搭配 Webpack 測試

logo_og

Facebook React 就是要搭配 Webpack,Webpack 已經是前端開發的必備工具,要測試 React Component 就是要用 Facebook 開發的 Jest 框架,使用 Webpack 也許會搭配 Less or Sass Loader 讓每個 component 都可以獨立有 CSS 檔案。要在 JS 內直接引入 CSS 檔案寫法如下

import '!style!css!less!./Schedule.less';
import React, { Component } from 'react';
Continue reading “Facebook React Jest 搭配 Webpack 測試”

Awesome List

logo

@sindresorhus 建立一個強大的專案叫做 awesome,裡面收集了各式各樣的 Awesome List,包含 Programming Languages, Front-end Development, Back-end Development 等等,只要可以收集到非常 Awesome 的 Project List,經過大家認證,認為收集此列表非常俱有價值性,而不是把一堆教學文件集合在一起,程式開發者必定參考到這裡面列表。看到有人提出加入 Regular Expression 列表@arthurvr 就回覆底下

That’s not what an awesome list should be. It should be a curated list of the best things. Not a “collection of everything”

原發問者不了解 curated list of the best things,最後 @sindresorhus 拿了 w3schools 來回答為什麼 w3schools 總是能在搜尋排行榜第一名

Because they use sleazy and spammy SEO optimizations to get there.

有夠好笑的,原來大家都是很討厭 w3schools,難怪會有 W3Schools Hider 外掛

用一張圖學習 JavaScript

2015.07.03 作者出了 GitHub Page 線上版

javascript-logo

GitHub 上的 javascript-in-one-pic 作者將 JavaScript 一些基本用法整理成 PDF, PNG .. 等版本,讓開發者可以一目了然學習基本 JavaScript 用法,這專案啟動沒多久就一堆人 Star 了,看到作者是參考之前我有參與翻譯的 JavaScript GardenProfessional JavaScript for Web Developers 這本書,目前尚未全部整理完整,已經整理的目錄如下

Continue reading “用一張圖學習 JavaScript”

簡介 JavaScript ES6 物件及陣列

es6-logo

今年 2015 六月 17 號 Ecma International 已經同意 ECMA-262 6th edition 版本,這是在 ECMAScript 2015 Has Been Approved 看到的消息,而現在主流就是以 Babeljs 為主,將 ES2015 語法直接轉換成 ES5,讓各大瀏覽器可以繼續支援 ES2015 寫法。今天來介紹 ES2015 內如何使用物件 (Object) 或陣列 (Array)。

Continue reading “簡介 JavaScript ES6 物件及陣列”