2015-11-12所有文章 Luka Rails - Sortable Table With Ajax 前端使用sortable 後端在幫要排序的類別(這邊是Memo)加上position欄位 原理與流程jquery-ui 的 sortable 套件內建了 serilize ,它的功用是把 id 變成 query string 依順序回傳 ... 繼續閱讀
2015-11-12所有文章 Luka Rails - 使用 will pagniate 搭配 ajax 實作無限捲動概念:will paganiate 由送到 controller 的 params[:page] 決定回傳的@posts。 可以由我們在 controller 中定義@posts所知道。 1@posts = Post.paginate(:p ... 繼續閱讀
2015-11-02所有文章 Luka 從 Tealeaf 課程學習模組化 - Sluggify Module因為 Post 與 Category 都的網址都需要 Sluggify 以便 SEO 的進行。所以我們把 Sluggify 模組化,讓同樣的程式碼只要寫一次就好。 1. 建立module Sluggable,並引入之在lib資料夾中建立一個 ... 繼續閱讀
2015-10-22所有文章 Luka Demo:使用wow.js快速打造捲動式動畫網頁我用兩個不同方法個別製作出網站來讓大家比較看看: 純CSS打造捲動式動畫網站wow.js打造的捲動式動畫網站 接著來介紹這wowjs的製作方法與其優缺點。 使用方法:第一步要做的是animate.css與wow.js載進網頁中。接著幫要使用 ... 繼續閱讀
2015-10-20所有文章 Luka Demo:實作捲動觸發CSS動畫demo 第一部分:使用CSS撰寫Slide In效果這個單元使用的技巧有: 使用transition讓屬性值改變時有動畫的效果 使用animation-fill-mode設定結束狀態 使用transform:translate移動元素 ... 繼續閱讀
2015-10-19所有文章 Luka Demo:使用scrollspy讓畫面更生動Demo展示頁 作法說明1.幫body加工將body加上display: relative,如果還是不行使用的話加上width: 100%與height: 100%。 123display: relative;width: 100%;hei ... 繼續閱讀
2015-10-19所有文章 Luka Landing Page 實作:來做個簡單的Jumbotron製作jumbotron有兩個重點 垂直置中 設定背景。 Background 設定position: center bottom讓圖片顯示出需要的區塊 使用background-size: cover;讓圖片滿版 1234567891 ... 繼續閱讀
2015-10-12所有文章 Luka 使用Github展示靜態網頁這篇很簡短,但還是筆記一下怎麼用,因為網路上找的資料有點繁雜。 原理github的gh-pages分支可以用來展示靜態網頁,推上去就可以正確展示了。 步驟 建立新的branchgit branch gh-pages 推上githubgit ... 繼續閱讀
2015-10-12所有文章 Luka Demo:使用Matirialize框架實現視差滾動完成品展示頁 Materialize 是除了 Bootstrap 以外現今相當熱門的前端框架,可以製作的網頁類型相當廣泛,未來將使用 Materialize 來開發一些小作品,是今天練習的主要目的。 實現Materialize框架提供的視差 ... 繼續閱讀
2015-10-10所有文章 Luka HTTP Status Code In RailsRails將這些HTTP Status定義成有意義的單字。讓我們可以在使用的時候減少因為背錯而發生錯誤的機率。 使用方式用symbol加上單字即可取代原本的HTTP Status Code(500) 12render status: 500 ... 繼續閱讀
2015-07-22所有文章 Luka Atom殺手級套件介紹這次來介紹兩個殺手級套件,以及其他的輔助的畫面跳躍套件來完善atom快速鍵不足的地方。 jumpy運用他你可以快速的跳躍到畫面中程式的任何一個地方,只需按下shift + enter。 如果你使用atom-Material-UI這個套件的 ... 繼續閱讀
2015-07-16所有文章 Luka Ruby中冒號開頭Symbol與&:to_s用法解釋本篇介紹Ruby中特有的寫法,將解答&:to_s和:symbol這兩種寫法的意義。並依序介紹以下議題: Symbol和String的不同之處分別宣告兩個symbol與string。 12345678[22] pry(main)> ... 繼續閱讀
2015-06-03所有文章 Luka 使用 SMACSS 製作buttonmodule抽離出常用元件,負責大致的外觀SMACSS是Jonathan Snook所發表的一個CSS/SASS的設計模式。在製作button時我們會把它放在module資料夾底下,並存成檔名為_btn.scss。在modules資料夾中的 ... 繼續閱讀
2015-06-01所有文章 Luka SASS 的 @import @mixin @content @extend 與 @function1.ImportSASS在檔名前面加上底線時,不會直接編譯成CSS,使用@import引入後,才會編譯。 2. Mixins常見的mixin作法,要傳入的引數前面需加上$字號。 12345678910/* Mixins */@mixin b ... 繼續閱讀