Recent Posts

Rails 筆記 - 使用 ActiveRecord::Enum 設定狀態

1 minute read

使用 Array 表達狀態 class Order KIND = [ ['未付款', 0], ['已付款', 1], ['已出貨',2] ] end 代表 orders 這張表中的 kind 欄位如果是 1 ,則此訂單狀態是未付款的。 寫成這樣的好處是在使用 select view helper 的時候可...

Deploy Redmine to VPS by Rails way in Ubuntu 14.04

2 minute read

前言 Redmine 是一套以 Ruby 為基底的專案管理網頁應用程式。而且正好就是使用 Ruby on Rails 開發的。所以如果你是 Rails 工程師,使用一般部屬 Rails 專案的方式就可將 Redmine 架起來。 本文記錄下來的方法,是我覺得最簡單,並且沒有副作用的架設方法。如果你要架設的不是...

在 Mac OS X 下使用 brew 安裝 Go

less than 1 minute read

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

Rails - 使用 dropzone.js 實現檔案上傳

1 minute read

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

CSS排版技巧 - 文繞圖

4 minute read

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

Rails - 如何解決ajax沒有CSRF Key的問題

less than 1 minute read

錯誤訊息 當瀏覽器發生422錯誤,很有可能是缺少CSRF Key所引起的。這時候可以到 Log 確認一下是否是缺少 CSRF Key的情形。 方法一:用js抓mete的csrf-token $(document).ajaxSend(function(e, xhr, options) { var toke...

Rails - Sortable Table With Ajax

1 minute read

前端使用sortable 後端在幫要排序的類別(這邊是Memo)加上position欄位 原理與流程 jquery-ui 的 sortable 套件內建了 serilize ,它的功用是把 id 變成 query string 依順序回傳,所以我們只要找出規則就可以知道移動的是哪些欄位,把移動後的...

從 Tealeaf 課程學習模組化 - Sluggify Module

2 minute read

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

Demo:使用wow.js快速打造捲動式動畫網頁

less than 1 minute read

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

Demo:實作捲動觸發CSS動畫

1 minute read

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

Demo:使用scrollspy讓畫面更生動

less than 1 minute read

Demo展示頁 作法說明 1.幫body加工 將body加上display: relative,如果還是不行使用的話加上width: 100%與height: 100%。 display: relative; width: 100%; height: 100%; 2. 宣告navbar並設定targe...

Landing Page 實作:來做個簡單的Jumbotron

less than 1 minute read

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

Demo:使用Matirialize框架實現視差滾動

less than 1 minute read

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