Recent Posts

HTTP Status Code In Rails

1 minute read

Rails將這些HTTP Status定義成有意義的單字。讓我們可以在使用的時候減少因為背錯而發生錯誤的機率。 使用方式 用symbol加上單字即可取代原本的HTTP Status Code(500) render status: 500 render status: :forbidden 這些Symb...

Atom殺手級套件介紹

less than 1 minute read

這次來介紹兩個殺手級套件,以及其他的輔助的畫面跳躍套件來完善atom快速鍵不足的地方。 jumpy 運用他你可以快速的跳躍到畫面中程式的任何一個地方,只需按下shift + enter。 如果你使用atom-Material-UI這個套件的話可能畫面會變得像這樣。 這時候在選單列選擇 atom &g...

Ruby中冒號開頭Symbol與&:to_s用法解釋

less than 1 minute read

本篇介紹Ruby中特有的寫法,將解答&:to_s和:symbol這兩種寫法的意義。並依序介紹以下議題: Symbol和String的不同之處 分別宣告兩個symbol與string。 [22] pry(main)> sym = :abc => :abc [23] pry(main)>...

練習:使用SASS開發Portfolio (1) Header 與 Footer

less than 1 minute read

標題列(Header) 固定的標題 往下捲動時仍然會固定在上方 幫header加上position: fixed可以做到這個效果。透明的效果則是使用background: rgba(0, 0, 0, 0.8)。 標題列的水平置中 這邊使用的水平置中技巧是使用CSS 垂直置中的3種方法中的設定行高(l...

使用SMACSS製作button

less than 1 minute read

module抽離出常用元件,負責大致的外觀 SMACSS是Jonathan Snook所發表的一個CSS/SASS的設計模式。在製作button時我們會把它放在module資料夾底下,並存成檔名為_btn.scss。在modules資料夾中的_btn.scss裡面撰寫Button的外觀,需要注意的是不包含顏色和...

SASS 的 @import @mixin @content @extend 與 @function

less than 1 minute read

1.Import SASS在檔名前面加上底線時,不會直接編譯成CSS,使用@import引入後,才會編譯。 2. Mixins 常見的mixin作法,要傳入的引數前面需加上$字號。 /* Mixins */ @mixin border-radius($radius: 10px) { -webkit-bor...

細讀 Bootstrap 3 文件

4 minute read

使用Bootstrap好一段時間了,卻沒有好好的把官方文件讀過一遍,雖然寫的出來但是速度不盡理想,所以這兩天花些時間將幾個不太理解的常用元件與一些以前有使用到卻不太了解的data-attribute用法寫下筆記,好提高生產力。 Part 1: Navbar 這是一個bootstrap官網上的完整navbar範...

Typescript是新手的好朋友

less than 1 minute read

為什麼 Typescript 是新手的好朋友 typescript百分之百跟javascript相容,所有javascript的語法都可以在.tstypescript檔案中執行。因此就算是要javascrtip新手,也可以享受typescript帶來好處。typescript能夠讓 目前暫時不...

Javascript核心筆記:namespace

less than 1 minute read

靜態命名空間 方法1 - 直接指定 var myApp = {} myApp.id = 0; myApp.next = function() { return myApp.id++; } myApp.reset = function() { myApp.id = 0; } window.c...

Javascript核心筆記:建構式與prototype

1 minute read

建立物件時,實際上做了什麼事? 使用 new 關鍵字時,JavaScript 會先建立一個空物件,接著設定物件的原型為函式的 prototype 特性所參考的物件,然後呼叫建構式並將所建立的空物件設為 this。接下來依照建構式設定實例上的特性,最後再由prototype補上未設定的特性。 建構式如何初始化實例...

Javascript核心筆記:scope

less than 1 minute read

Scope 每個function在呼叫時都會建立新的 Function execution context,有個物件用來代表 Execution context,而區域變數則是 context 物件上的特性。 JavaScript 在查找變數時,會先在目前 context 物...

Javascript核心筆記:function

less than 1 minute read

javascript的函數是一級物件(First-Class) function是由Function的實例,並且在javascript中可以指定給變數,函式與數值的地位相同,並不會像有些語言中,無法像數值一樣地被指定,不會淪為二等公民,因此,對於支持函式可如數值一樣指定給變數的語言,我們稱函式在這個語言中是一級函...

Javascript核心筆記:callback

1 minute read

callback是一種設計模式 來看看callback的定義: Callback (computer programming) - Wikipedia In computer programming, a callback is a reference to a piece of executable ...

Javascript核心筆記:this

1 minute read

call可以讓你決定this的參考對象 在 JavaScript 中,函式是 Function 的實例,Function 都會有個 call 方法,可以讓你決定 this 的參考對象。舉例來說,你可以如下呼叫: function toString(){ return '[' + this.name + ',' ...

javascript核心筆記:Object

1 minute read

在 JavaScript 中,物件是 Object 的實例。你可以如下建立一個新的物件: var obj = new Object(); 實際上,現在已經很少人這麼撰寫了,使用物件實字(Object literal)語法就可以建立一個物件: var obj = {}; 上面你所看到的函式撰寫方式,稱之為函式實...