Month7 月 2016

Sass 學習筆記(一) – 安裝與巢狀結構

官方網站:http://sass-lang.com/

Sass 是以 Ruby 所編寫的編譯器,也是一種 CSS 的擴展語法, Sass 編譯器能將 Sass 及 Scss 檔轉譯為 CSS 檔,就像 CoffeeScript 需要先轉譯成 JavaScript 一樣,瀏覽器看到你直接餵了 Sass 檔給它吃,它可是會嚇個半死呢!

前面提到,Sass 編譯器看得懂兩種語法: Sass 和 Scss , Sass 是較舊的語法, Scss 是較新的,而且 Scss 內可以使用 CSS 語法,也就是說將 CSS 的語法複製到 Scss 檔內是可以編譯的,但 Sass 是用縮排取代大括號,因此直接複製 CSS 到 Sass 檔內是會錯誤的,雖然 Sass 因為省略的大括號和分號,減少了打字的次數,不過 Scss 和 原本的 CSS 寫法比較相近,又是比較新的語法,所以以下和之後的內容都會以 Scss 語法為主喔!(實際上請依各位喜好選擇 Sass 或 Scss)

其實本來是要查一下 Webpack 的 Sass 相關設定,後來就想說乾脆學一下好了,雖然我是從前端開始學習,但美感不好的我 CSS 並沒有多熟悉,不過理解一種新的語言也是一種樂趣,而且光這次的主題:巢狀結構,就已經讓寫 CSS 更像寫程式了,如果你還是重複同樣的 Class Name 在編輯 CSS 檔,強烈建議抽空學習一下 Sass ,對常常在編寫 CSS 的開發者可是受用無窮的喔!

Continue reading

React 新手入門筆記(四) – React Component

前面教了一些關於 Webpack 設定,以下給各位看一下 webpack.config.js 的範例:

Continue reading

React 新手入門筆記(三) – Webpack Plugin

上一篇介紹了 Webpack的基本設定,本篇要繼續帶各位看一些更進階的應用!

Continue reading

React 新手入門筆記(二) – Webpack 入門

這次的主題是最近很紅的「Webpack」, Webpack 是一個擴充性極佳的打包工具,最基本的功能就是幫我們的程式碼打包成一個或多個檔案,而且我們還可以安裝 Loader ,例如: Babel 可以幫我們轉譯 ES6 成 ES5,而我們前一篇文章說的 JSX ,瀏覽器當然也是完全看不懂,我們還是要經過 Babel 轉譯,將 JSX 翻譯成 JavaScript ,瀏覽器才會看得懂我們在寫什麼。

如果只是轉譯檔案還沒什麼,一個指令幫我把轉譯好所有檔案才是 Webpack 最有價值的地方,而更厲害的是,我們還可以為 Webpack 安裝額外插件, Minify 、 Uglify 、 Source Map 等等都可以靠插件來幫我們一次完成,唯一可惜的是 Webpack 的設定相比其他 Task Runner 來說複雜不少,學習曲線有點高,希望這篇新手教新手的文章能給各位一點方向!

Continue reading

React 新手入門筆記(一)

沒錯!我要變成寫 React 了!其實是因為剛踏進門,現在還在四處碰碰找自己喜歡的風格,碰過 React 之後,我真的還滿喜歡 JSX 的。

現在寫Angular最麻煩的問題是,需要在 HTML 和 JavaScript 之間切換,有不少的邏輯同時存在在這兩者身上,但是 JSX 反而是把 HTML 帶進了 JavaScript ,雖然有一些語法不同造成了一些學習門檻,例如: class 變成 className 、 for 變 htmlFor 等等,但目前個人的看法,還挺值得一學的!

Continue reading

Angular 2 與 TypeScript 筆記(一)

其實之前就有認真考慮想學React和Angular,本來是打算先學React,不過因為在研究的專案使用的是Angular,所以就先來研究Angular了,而且Angular也開始將文件中文化,我相信在學習上應該會比只有英文文件來得順利一些,不過老實說我覺得Angular有點複雜就是了XD

Angular 2 中文官網:https://angular.cn/

Continue reading

CoffeeScript 學習筆記:運算元 與 條件陳述

這次介紹的主題是很常用的if和switch,讓我們看看CoffeeScript如何呈現吧。

運算元

首先要介紹的是運算元,我們知道JavaScript有 == 和 === 的區別,但是基本上建議大家都使用 === 取代 == ,因為 === 會去判別變數類別,而 == 較不嚴謹,所以在某些情況會出現意想不到的錯誤,例如:數字1等於字串1等等。
而在CoffeeScript裡,一律都是編譯成 === ,以下將運算元列表給各位參考:

  • 左邊為CoffeeScript,右邊為JavaScript
    • ==    等於    ===
    • !=    等於    !==
    • not    等於    !
    • and    等於    &&
    • or    等於    ||
    • true, yes, on    等於    true
    • false, no, off   等於    false

Continue reading

Mongoose – Node.js 連接 MongoDB

Mongoose其實就是一套把MongoDB再包裝使用的一套工具,不過因為我是直接碰Mongoose,所以也沒辦法說明比MongoDB好的地方,能力不足的地方只能請各位見諒了,以下把自己讀官方文件的筆記彙整出來,希望能幫到需要的人。

Continue reading

部署 Node.js 程式到 Heroku

因為在找有沒有地方可以放自己寫的程式,所以找上了Heroku,而且為了申請主機、網域和轉移原本的wordpress到自己的主機花了不少時間,原本給wordpress管會沒辦法裝插件,就決定來搬一下家了。

準備

首先,請到Heroku官方網站申請帳號

Continue reading

NPM – 套件管理程式

一. 前言

NPM,是「Newbie Paintball Master」…不對是「Nobel Prize Magnet」…也不對,好啦!其實是「Node Package Manager」

雖然本來npm主要是來管理JavaScript的套件(Package),但是越來越多人使用npm,所以在上面可以找到很多其他語言編寫的套件,這也是為什麼npm會被官方惡搞(大家可以點點看官網左上角的小字),因為他已經不是單單為Node.js而生了。

原本是安裝管理Node.js的套件的軟體,本來我們想用別人的code來工作時,需要複製、貼上別人的程式碼到自己的資料夾,但是如果使用npm,我們可以以標準化的方式來安裝、移除或更新這些程式碼。

Continue reading