Rails - Sortable Table With Ajax

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

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

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

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

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

Demo:實作捲動觸發CSS動畫

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

Demo:使用scrollspy讓畫面更生動

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

使用Github展示靜態網頁

這篇很簡短,但還是筆記一下怎麼用,因為網路上找的資料有點繁雜。 原理github的gh-pages分支可以用來展示靜態網頁,推上去就可以正確展示了。 步驟 建立新的branchgit branch gh-pages 推上githubgit ...
繼續閱讀
Demo:使用Matirialize框架實現視差滾動

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

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

HTTP Status Code In Rails

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

Atom殺手級套件介紹

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

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

本篇介紹Ruby中特有的寫法,將解答&:to_s和:symbol這兩種寫法的意義。並依序介紹以下議題: Symbol和String的不同之處分別宣告兩個symbol與string。 12345678[22] pry(main)> ...
繼續閱讀
練習:使用SASS開發Portfolio (1) Header 與 Footer
使用 SMACSS 製作button

使用 SMACSS 製作button

module抽離出常用元件,負責大致的外觀SMACSS是Jonathan Snook所發表的一個CSS/SASS的設計模式。在製作button時我們會把它放在module資料夾底下,並存成檔名為_btn.scss。在modules資料夾中的 ...
繼續閱讀