兩種安裝方法在 Mac OS X 下安裝 Go 有兩種方法，一種是去官網下載安裝包，另一種是使用 Homebrew 來安裝，為了以後更新的便利性著想，我決定使用 Homebrew 來安裝 Golang。 ps: 如果你還沒有 Homebre ...

實現上傳檔案create的時候controller要設定一些值給js接。 123456789101112def create @upload = Upload.create(upload_params) if @upload.save ...

文繞圖先看效果，這次要做的是文繞圖技巧，可以選擇靠左或靠右。 html結構圖片(img)必須在段落(p)的上面，當圖片加上float:left屬性時，圖片的空間會消失，變成浮在畫面上，利用這個技巧，我們來做到文繞圖的效果。 ...

錯誤訊息當瀏覽器發生422錯誤，很有可能是缺少CSRF Key所引起的。這時候可以到 Log 確認一下是否是缺少 CSRF Key的情形。 方法一：用js抓mete的csrf-token1234$(document).ajaxSend(fu ...

前端使用sortable 後端在幫要排序的類別(這邊是Memo)加上position欄位 原理與流程jquery-ui 的 sortable 套件內建了 serilize ，它的功用是把 id 變成 query string 依順序回傳 ...

概念：will paganiate 由送到 controller 的 params[:page] 決定回傳的@posts。 可以由我們在 controller 中定義@posts所知道。 1@posts = Post.paginate(:p ...

因為 Post 與 Category 都的網址都需要 Sluggify 以便 SEO 的進行。所以我們把 Sluggify 模組化，讓同樣的程式碼只要寫一次就好。 1. 建立module Sluggable，並引入之在lib資料夾中建立一個 ...

我用兩個不同方法個別製作出網站來讓大家比較看看： 純CSS打造捲動式動畫網站wow.js打造的捲動式動畫網站 接著來介紹這wowjs的製作方法與其優缺點。 使用方法：第一步要做的是animate.css與wow.js載進網頁中。接著幫要使用 ...

demo 第一部分：使用CSS撰寫Slide In效果這個單元使用的技巧有： 使用transition讓屬性值改變時有動畫的效果 使用animation-fill-mode設定結束狀態 使用transform:translate移動元素 ...

Demo展示頁 作法說明1.幫body加工將body加上display: relative，如果還是不行使用的話加上width: 100%與height: 100%。 123display: relative;width: 100%;hei ...

製作jumbotron有兩個重點 垂直置中 設定背景。 Background 設定position: center bottom讓圖片顯示出需要的區塊 使用background-size: cover;讓圖片滿版 1234567891 ...

這篇很簡短，但還是筆記一下怎麼用，因為網路上找的資料有點繁雜。 原理github的gh-pages分支可以用來展示靜態網頁，推上去就可以正確展示了。 步驟 建立新的branchgit branch gh-pages 推上githubgit ...

完成品展示頁 Materialize 是除了 Bootstrap 以外現今相當熱門的前端框架，可以製作的網頁類型相當廣泛，未來將使用 Materialize 來開發一些小作品，是今天練習的主要目的。 實現Materialize框架提供的視差 ...

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

這次來介紹兩個殺手級套件，以及其他的輔助的畫面跳躍套件來完善atom快速鍵不足的地方。 jumpy運用他你可以快速的跳躍到畫面中程式的任何一個地方，只需按下shift + enter。 如果你使用atom-Material-UI這個套件的 ...