Sitemap

A list of all the posts and pages found on the site. For you robots out there is an XML version available for digesting as well.

Pages

About

Minimal Mistakes is a flexible two-column Jekyll theme.

A flexible two-column Jekyll theme. Perfect for personal sites, blogs, and portfolios hosted on GitHub or your own server. Latest release v4.7.1

Splash Page

Bacon ipsum dolor sit amet salami ham hock ham, hamburger corned beef short ribs kielbasa biltong t-bone drumstick tri-tip tail sirloin pork chop.

Posts

Web 基本功 - Cookie 與 Session

1 minute read

Cookie 1.1 什麼是 Cookie ? Cookie 在使用者第一次進入網站的時候產生。Browser 記錄一些隱私性較低的資料。 例如: 使用者第一次進入網站的時候會跳出教學視窗。當使用者點擊[關閉]後,Cookie 內記錄使用者已經看過教學了。使用者在下次登入的時候因為 Cookie 內記錄著使用...

使用 GIT Precommit hooks 防止 Binding.pry 進入 Commit

less than 1 minute read

Problem 如果不小心把 binding.pry commit 進 git 而且不幸的 push 的話, 勢必要使用另一個 commit 來修正。如果要讓這個 commit 不見可能就需要用 git push -f 來修改。這樣做很醜,不優雅。根治的方法是 - 根本不應該將 debug code 進入 co...

Time in Rails

less than 1 minute read

Rails 中的時間 Rails 中的時間是個有趣的議題,如果不多加注意,很容易被雷到。 尤其是一般在本地端開發的的時候並不會有時區不同的問題,但是一放到 Server 上,就會忽然爆炸。 是不能不小心的一個問題。 如果你在 config/application.rb 設定 Time.zone,範例如下: ...

Go - 在 OSX 安裝 GVM

1 minute read

前言 之前有寫過一篇用 Brew 安裝 GO,因為習慣上會用 rvm、nvm 來管理程式語言的版本, 所以心血來潮也想試試看安裝 GVM 在作業環境,不過如標題所示, gvm Bug 滿多,而且跟我慣用的 Fish shell 不太相容。 總結下來,如果使用 OSX 環境推薦大家使用 Brew 來安裝。 安裝...

CORS in Rails

less than 1 minute read

Problem 跨網域存取的時候需要使用 CORS 來讓不同網域也可以存取相同網域的資源。請看下圖,Server 返回的 Response 必須明確指出哪些網域可以存取該 Server 的資源。 有這樣的行為模式的話,是不是可以在 Controller 中的 Response 加上 Header 來達成 COR...

EFK(6) - 使用 docker 包裝 Fluentd

1 minute read

Aggregator 與 Forwarder 使用 docker 建立 fluentd image 為了模擬需要的環境,我們來使用 docker 建立 fluentd image 參考fluent/fluentd-docker-image來製作個人化的 fluentd image 2.1 準備工作 ...

EFK(5) - Fluentd 高可用架構(High Availibity)

less than 1 minute read

架構 之前我們的架構是直接由 fluentd td-agent 傳送到 elasticsearch (如下圖) 為了更高的可用性(High Availibity),我們在中間加入 aggregator 的角色,讓在 td-agent 扮演 forwarder 角色,職責更加單一,forwarder 只負責...

EFK(3) - Rails 與 Fluentd 的串接方法

1 minute read

幾種可以跟 Rails 串接的方式 gem ‘fluent-logger’ Centralize Logs from Ruby Applications 自定解析 fluent/fluent-plugin-grok-parser: Fluentd’s Grok parse...

EFK(2) - 介紹 EFK (Elasticsaerch + Fluentd + Kibana)

less than 1 minute read

Fluentd 介紹 Fluentd 跟 Logstash 扮演的角色相同。 過去 Logstash 的歷史有效能不佳的記錄,Fluentd 在效能上的口碑更好。 如下圖所示,Fluentd 可以將蒐集 Log 負責的過程統一規格化。我們在使用的時候,選用想要蒐集Log樣式的 input plugin, 例...

EFK(1) - 介紹 ELK Stack( Elasticsearch + Logstash + Kibana)

less than 1 minute read

ELK 整體架構 最左邊的 Logstash Shipper 用來運送 Log 到 Log 處理中心。 Redis 當做 Buffer 來緩衝資料量瞬間爆量的問題。 右邊的 Logstash 將 Log 加工成 Elasticserach、Kibana 可以處理的格式。 Kibana 是一個...

在 OSX 環境中測試 etc/hosts 是否成功修改

less than 1 minute read

前言 透過修改 etc/hosts 讓我們不需要透過 DNS 也能模擬網域名稱連線到伺服器。 可是設定是否成功?這時候我們可以用一些測試工具來檢測之。 OSX環境下 OSX 內建 dscacheutil 工具,可以用來檢測網址名稱對應 ip 的結果。 使用方法 dscacheutil -q host -a...

Ruby - 讓 irb 更好用

less than 1 minute read

前言 在使用pry的時候我們可以回到上一個輸入的指令,擁有記錄指令歷史的功能。其實irb也可以! 開始修改 修改~/.irbrc require 'irb/ext/save-history' IRB.conf[:SAVE_HISTORY] = 200 IRB.conf[:HISTORY_FILE] = "...

Ruby metaprogramming - Open Class and Refine

less than 1 minute read

簡介 Open Class 是 Ruby 常用的技巧,指的是我們可以覆寫已經存在的方法,來修改物件或類別的行為。 在這邊我沒有要講詳細的作法,要介紹的是在 Ruby 2.0 中新增的 refine Refine Refine 是 ruby 2.0 之後加入的元素。 會使用 Refine 的原因是使用一般 O...

Elasticsearch 筆記

1 minute read

前言 最近工作上使用的資料庫主要以 Elasticsearch 為主。而 Elasticsearch 跟傳統的關聯式資料庫有諸多的不同之處。初期在開發的時候並不是那麼快的上手。所以記錄下該如何使用 Elasticsearch 與如何在官方文件中找到自己需要的功能。 1. 準備工作 1.1 你需要知道的名詞 ...

Ruby metaprogramming - Method Lookup

less than 1 minute read

介紹 ruby metaprogramming 這本書除了教如何用 ruby 來生成其他的程式語言外,對語言特性的描述是比較深入的。因此在研讀這本書的同時,記錄下一些我覺得重要的部份。這些筆記不會依照章節的順序性。而是隨機記錄我需要的部分。 Method Lookup 即 Ruby 物件中查找方法的順序。從 ...

Ruby - 爬網頁時遇到的編碼錯亂問題

less than 1 minute read

問題描述 編碼問題是寫爬蟲常會遇到的問題。當你沒有處理好編碼問題,爬回來的網頁無法進行字串的切割,也無法使用 nokogiri 抽離需要的部份。 解決方法 找到原始網頁的編碼chartset='big' 把網頁 force_encoding 至原始格式 將網頁轉換成 utf-8,這是 ruby...

Ruby - 利用 ARGV 特性執行指定的方法

less than 1 minute read

情境 我想手動執行 class 的某個方法。這邊的例子是當我想移動的時候,我可以選擇走路、跑步或是游泳。 方法一: 在 irb 中引入 Ruby 檔 class Move def self.walking puts "walking" end def self.running ...

Ruby 爬蟲小技巧 - 處理 Html Entity

less than 1 minute read

這是一個在工作上遇到的小問題。 把網頁爬回來的時候有 HTML Entity 的編碼,看起來很不美觀。 舉例來說,爬回來的標題如果含有 HTML Entity 會是這個樣子: PURUS空氣清淨器(鴻海集團創星出品) 如果我想要使用資料建立自己資料庫的時候勢必要對 html ...

ActiveRecord - 更新大量資料

1 minute read

前言 本文使用的兩種方法,實際上都是用一個 sql 插入或更新所有的資料。 原因是使用其他的方法都沒有使用一個sql插入快。 如果插入的筆數過多,需要調整 sql buffer 的大小。 本例子的情景是一次更新100筆資料,資料量不大,所以不會遇到這個問題。 方法一:純 SQL 因為欄位很多,我要傳送...

Linux - 如何查詢 OS 版本

less than 1 minute read

要接手 Server 第一件事情就是要了解 server 的環境啦。 這邊要記錄的是如何判別 Linux 系統類別的方式 1. 確認 Kernel 版本 使用 uname -or 可以取得 kernel 的版本 $ uname -or => 3.10.0-327.el7.x86_64 GNU/Linu...

Rails: 使用 Whenever 產生 Cronjob

1 minute read

Part 1 - Crontab 介紹 Crontab 是 Linux 中用來管理例行事務的程式,而 whenever 實際上的作用就是用來產生 cronjob 的,所以先介紹一下 Linux 系統中的 crontab 如何操作。 crontab 指令 比較常用指令的有以下幾項: crontab -l 顯...

在 Atom 設定 .god 對應至 Ruby Syntax

less than 1 minute read

簡介 God God 是以 Ruby 撰寫而成,但不僅限於使用於執行 Ruby 檔,常見的用途是維持程式的運行使程式不中斷,萬一中斷可以自動重啟。不過本篇的重點不在於 God 的使用方法,而是在 Atom 編輯器中於如何讓.god可以對應到 .rb 的語法高亮。 這邊就是設定的方法,打開 config.cso...

JS - 確認 jQuery 是否正確載入

less than 1 minute read

使用情境 有時候你不能確定環境是否已經載入 jQuery,所以你也不能使用 jQuery.ready()。 例如:你想要在別人的網頁上執行一段 javascript 程式碼。 這時候你就可以用本篇筆記記錄的方法等待 jQuery 載入後再執行自己的程式碼。 程式碼: //如果沒有載入的話,會再執行一次直到...

jQuery vs Ruby - 取得倒數的元素並組成字串

less than 1 minute read

摘要 本篇利用把陣列轉成字串這個題目,探討 jquery 和 ruby 中,map 和 join 行為的差異。 1. 在 jQuery 中可以用類似 Ruby 的方式取得尾部的倒數第幾個元素。 $('span[itemprop=title]').eq(-2) 對照 ruby 語法 arr=[1,2,3...

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 ...

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 = {}; 上面你所看到的函式撰寫方式,稱之為函式實...

Ajax 學習筆記

1 minute read

ajax 如何運作? Ajax 立基於非同步 JavaScript 和 XML。簡單地說,Ajax 即運用非標準的XMLHttpRequest物件,並配合伺服器端的 Script 進行通訊。 Ajax 能夠傳送並接收各種格式的資訊,其中包括 XML、HTML 和 text 檔...

保哥 javascript 實戰課程筆記

1 minute read

javascript 語言特性 javascript是個動態型別語言,無法在開發期間宣告型別,意味著javascript的單一變數可能會隨時改變型別! javascript是個弱型別的語言:意味著在開發時期無法指定javascript型別。只能在執行期間檢查型別。如果真的要知道...

排版練習2:PSD to html with Bootstrap

less than 1 minute read

第二個練習一樣學習tuts的課程,選擇課程的好處是做到一半不知道該怎麼做時,有video解答可以看。看看高手怎麼做總是比自己亂弄的好的多。我選擇的課程是需要付費的,tuts還有一些免費的教材可以學習,影片或是文章教學都有,有興趣的自己發掘囉。第二個練習跟第一個練習不同之處在於本練習會使用bootstrap的gri...

排版練習1:PSD to HTML Porfolio

less than 1 minute read

最近在訓練排版的熟練度,要快速打造protype基本的前端技能是必須的。我選擇的教材是tuts的psd to html porfolio。課程中介紹了詳細的切版流程,從切圖到建構html到用css排版都有詳細的介紹。本篇是psd to html也就是排版練習第一篇,練習的是使用純css來刻網站。接下來會練習更多題...

Atom 套件整理

less than 1 minute read

atom-color-highlight 在編輯器中即時顯示色碼對應的顏色。 atom-development-server 一個很強大的東西,自己玩玩看吧。 atom-html-preview 老實說我不太會用這個套件,但是很多人下載,我就跟著下載了@@ autocomplete-plu...

Rails - 拆解 Form Helper 以 Checkbox 為例

less than 1 minute read

使用Rails Form Helper時,很重要的一點是要知道Form Helper會產生什麼樣的Html Code,了解之,觀察之,這樣你才能修改成自己需要的樣子。如果要在form中加入check box,可以使用collection_check_boxes這個在rails 4新加入的form helper來完...

Rails note : Require Creator

less than 1 minute read

增加一個叫做Creator的別名,讓我們在判別作者時文意更加通順。 設定發文者 我們透過foreign key新增一個叫做creator的別名。作法是修改model/post.rb原本的 belongs_to :user 改成 belongs_to :creator, foreign_key: "user...

Atom 常用快速鍵

less than 1 minute read

Sublime 快速鍵 Sublime有的快速鍵Atom幾乎都有,以下是我有在使用的一些快速鍵。 基本的移動與選取 游標移至行頭/行尾 cmd + 左 / 右 跳到頁首頁尾 cmd + 上 或 下 游標移至上個單字 / 下個單字 option + 左 / 右 選取上個單字 / 下個單字 option +...

Rails Project 1 URL Shortener

1 minute read

前言 接下來我要藉由實作一些比較小型的Rails Project,來練習工程師必備的技能,其中最主要訓練的目標是能抓出需要實作的use case與如何從use case中實踐功能。因為沒有網頁的相關背景,如何磨練Html css javascript的基本實作能力也是這一階段的重點。 熟悉了如何使用Rails...

Atom 防止 Snippet Package 更新

less than 1 minute read

使用 Snippet 最重要的針對自己的習慣客製化快捷鍵。 Atom 有許多內建的 Snippet,建議「不要」使用,因為那些設定會存在「Atom 程式」裡面,無法儲存在 .atom 資料夾中。所以一旦 Atom 版本更新之後,全部的設定都會不見。如果要使用 Snippet 請使用 Package 安裝,這樣用 ...

EDX Linux Foundation Ch15:Shell Script ( Ch14跳過 )

less than 1 minute read

這是參加開源社群Tossug Linux讀書會的心得筆記,部分內容經過大大的補充,讓學習上更完整:) Ch14講的是Printer,因為實際使用上較多Bug所以跳過這一章節,等有需要的時候再來學習。 Shell linux系統可分為三個重要的部份: 1.kernel 2.shell 3.application ...

jQuery Return Flight Ch5 ( 1 ):Advanced Event

less than 1 minute read

advanced event handler trigger 使用trigger就像是你按下那個按鈕。範例: function picture() { console.log('Show Plane'); } function status() { console.log('In Service'); } fun...

jQuery Return Flight Ch4:Utility Methods

less than 1 minute read

each 用each把result的物件讀出來,插入頁面元素之中。 要插入<p></p>之中使用的是html() 要插入img的src欄位,使用find('img').attr('src', city.image) 之前也有使用過attr()這個方法來找到data欄位。 success: ...

EDX Linux Foundation Ch13 Manipulating Text

2 minute read

Section 1 cat and echo cat(concatenate) cat file 顯示檔案,按空白鍵可以捲動 cat file1 file2 把file1和file2接起來顯示 cat file1 file2 > newfile 把file1和file2接起來並且存成newfile。...

jQuery Returm Flight Ch2:Javascript Object & Function

less than 1 minute read

Part 1. javascript Object 將改原本的程式重構,所有的function都變成Object的Method,增加可讀性。 這是原本的code var confirmation = { init: function() { $('.confirmation').on('click'...

jQuery Return Flight Ch1 ( 2 ):補充筆記

less than 1 minute read

使用.html()插入元素 要使用的ajax長這樣,點下#tour之下的button後,如果出現錯誤,就會顯示錯誤訊息。 $(document).ready(function() { var el = $("#tour"); el.on("click", "button", function() { ...

Sinatra初體驗( 1 ):Route

1 minute read

First Sinatra App 1.輸入gem install sinatra安裝gem 2.建立app.rb檔 require "sinatra/base" class App < Sinatra::Base get '/' do "Hello World!!" end end 3.建...

Techdays Videos 釋出

less than 1 minute read

門票要價15000的techday影片釋出了 蒐集了幾個比較有興趣的影片,分別是: 保哥的 使用 TypeScript 開發大型應用程式

EDX Linux Foundation 補充筆記

less than 1 minute read

七層筆記+tcp/ip筆記 ip mac socket 基本知識 乙太網路 了解封包內容 名詞釐清 IEEE 國際上專業制定單位的組織 LAN (LOCAL AREA NETWORK) 區域網路 WAN (WIDE AREA NETWORK) 廣域網路 NIC(NETWORK INTE...

EDX Linux Foundation Ch12:Network

2 minute read

IP and package IP(Internet Protocol) address is essential for routing packets of information through the network.These packets contain data buffers together ...

Personal Kanban:能夠用在自己身上的敏捷方法 學習筆記

less than 1 minute read

如何將敏捷方法用在個人身上? 符合敏捷精神 Agile 因為Scrum需要角色的區分,所以對個人來說,並不需要使用Scrum,只要符合敏捷精神即可。 「個人看板系統」Personal Kanban 偶然發現這個真的是太酷了,一直在尋找可以管理自己的敏捷方法。在今天終於找到了答案。Personal Kanban...

EDX Linux Foundation Ch11:Local Security Principle section 1~3

3 minute read

Section 1 Understanding Linux Security 使用者權限的管理在個人電腦上可以放輕鬆使用,但如果是多人共用的電腦,就必須限制的嚴格,最好只給用戶他所可以用的權限就好,不要多給,本章將會以最嚴格的標準來說明如何管理使用者的權限以增加安全性。 User Accounts For e...

Agile Meetup 2014 9月:喚醒者的工具箱

less than 1 minute read

Part1:當一個好的教練! 如何讓一個二十幾年沒運動的阿宅學會打球 一個網球教練如何讓一個二十幾年沒出門運動的宅女學會打球,答案是沒有太多的技巧,沒有標準的動作,當場示範怎麼打網球,然後把球丟給那個宅宅,阿宅揮空幾次以後,發現真的打的到了!證明學習的最好方法不是看書,而是用本能來適應。 Try error 嘗...

Agile Meetup 2014 9月:More with LeSS

less than 1 minute read

這是第三次參加agile meetup,真的很感謝scrum community舉辦這麼這麼有優質又免費的活動。 今天的主題LeSS在講的是Large-Scale Scrum,也就是大型的scrum組織如何協同合作。 每一個小team都要正確的執行scrum,否則team的數量一多更容易崩壞。 今天提到的sc...

Vim 學習筆記

less than 1 minute read

常用指令筆記 第一課: 使用hjkl控制上下左右 第二課: 使用w e b跳躍單字 第三課: 使用dd剪下一行,並使用p或P貼上。 第三課:移動 跳至某一行 :第幾行 跳至段落{或} 跳至句首$ 跳至句尾0 跳至某行: 第四課:畫面捲動 page down: page up: Vim資源整理 VIM...

EDX Linux Foundation Ch10:Text Editor

less than 1 minute read

本週比較輕鬆,介紹的是Text Editor,但是我卻從中得到很多收穫。課程中介紹了Vim和Emacs,話說這是我第一次聽到Emacs這個編輯器,但他卻是原生的linux編輯器。而且還有不少的愛用者,開發效率也不輸Vim! ( 以下內容大部分由Carl大哥所分享,加上我的心得所寫而成。 ) Vim VIM A...

EDX Linux Foundation Ch 8:Filesystem

less than 1 minute read

File system Mount File system table If you want it to be automatically available every time the system starts up, you need to edit the file /etc/fstab acco...

Ruby bits 2 ( 1 ):BLOCKS, PROCS & LAMBDAS

1 minute read

雖然跟Ruby bit名字很像,但是內容的確比較進階點。 two ways for storing blocks 1.Proc my_proc = Proc.new do puts "tweet" end my_proc.call # => tweet 等同於 my_proc = Proc.new ...

Ruby bits ( 6 ):Blocks 學習筆記

2 minute read

不得不再說一次,這些主題都超級重要,不先學Ruby直接學Rails感覺很卡。果然要從基礎開始打才是王道。在看這篇之前請先看完method / block / yield / Proc / lambda,很多觀念都是從這邊的延伸。 conventions block有兩種表達方式 single block bra...

Ruby bits ( 5 ):Modules

2 minute read

Ruby bits的課程真的很不錯,講到的主題都是很重要的東西。有點相見恨晚的感覺,趕快把它做完吧! 本節學習目標 module activesupport ::Concern 了解self的意義 part1: module class method與instance method use ...

Ruby bits ( 4 ):ActiveSupport

less than 1 minute read

install it and load it install it gem install activesupport gem install i18n load it require ‘active_support/all’ core extensions: array array.form() array...

Ruby bits ( 3 ):Class

less than 1 minute read

上一個禮拜想要嘗試更多的動手記憶,經過實驗證明,還是需要筆記的輔助反覆記憶會比較好。經過這次的練習之後會更注重學習本身的強度。 ENCAPSULATION封裝 跟物件本身有關的method,使用class會比使用許多的method來的好。 VISIBILITY 有一些method你並不想給外面的人直接使用他,...

Ruby bits ( 2 ) : Methods and Classes

less than 1 minute read

Hash Argument 每一個不同的欄位就多一個 argument不是個好方法,會造成很多欄位空在那邊。 用 Hash argument 來解決這個問題。 使用方法,因為 hash 是由 key-value 所組成,所以可以把需要的屬性設成 symbol ,也就是:lat這種樣子。後面指定它的 valu...

Ruby bits ( 1 ) : Expression

1 minute read

Unless Unless is more intuitive 用 unless 代替 if! 更加直覺 Unless with else is confusing unless 和 else 一起用的時候令人困惑 NIL NIL IS FALSE 因為 nil 的值等於 false 所以上面的程式可以...

jQuery Return Flight Ch1 ( 1 ):Ajax Basics

less than 1 minute read

這是之前在try jQuery做過的例子。 之前我們只能顯示localhost的圖片,現在我們要從server載圖片下來,並顯示之。 接下來來完成我們第一個Ajax程式。 $('.confirmation').on('click', 'button', function(){ $.ajax('http...

Discover Meteor Ch5:Routing

1 minute read

現在要做的事情是點選http://myapp.com/posts/post_id,就可以對應到post的網頁。 加入iron router這個package。 $ mrt add iron-router 知識補充站 Iron Router Not only does it help with routing...

Discover meteor Ch4:Collection

2 minute read

Collection 新增一個collection collections/posts.js Posts = new Meteor.Collection('posts'); 除了client與server以外的資料夾會在兩者都執行。 所以Posts collec...

Javascript Roadtrip 3 Closure

1 minute read

這一章講的是closure,很奇妙的東西。 JavaScript学习总结(十六)——Javascript闭包(Closure) 這個網站寫的不錯,看來以後要拜讀一下他的文章。 2.1 影片 function buildCoveTicketMaker( transport ) { retur...

Meteor專用的Sublime套件:TernJs

less than 1 minute read

終於安裝好這個Sublime套件了,安裝上有點麻煩,步驟很多,每次用的時候都要設定一下才能用。不過裝好之後爽度還是挺高的 demo影片 github 簡單記錄一下安裝過程 從finder開啟~/Library/Application Support/Sublime Text 3/Packages資料夾 ...

Bootstrap 學習筆記

less than 1 minute read

sublime的套件安裝與使用方式請看這裡 學習bootstrap的幾個重點 學會使用grid system切版。 找相似的範例來練習版面。 練習熟練到可以直接打指令叫出想要的元件。 懂得微調成自己想要的。 了解如何傳值給後端(selector)。 多練習各種不同的版面 儲存成gi...

Sublime 3 套件整理

less than 1 minute read

學習網頁一直以來有個困擾,打括號真的是慢到不行,原來sublime這個文字編輯器有許多方便的套件可以用。用簡單的指令就可以架構出一個網站。 先安裝必備的套件管理工具 ConvertToUTF8 : 解決 Sublime Text 3 預設不支援 Big5 與其他 CJK 編碼...

[7/16]Agile daily Stand up

less than 1 minute read

1.目前完成: 經過一個晚上所有組員一起激烈的討論產生的結果 a. 完成首頁雛形(如附檔) b. 新的user story: 新增Tatoo c. 討論出未來努力方向: 以2d為主,部分人員研究3d技術,看看可不可行,成品是否是我們所要的。也就是考量因素有技術使用上的難度,和呈現圖像的品質。 資源整理: 2d繪...

HTML額外標籤

less than 1 minute read

因為學習HTML在一般的標籤上並沒有遇到什麼問題,所以就不多做說明。 直接進入比較容易混淆不理解的地方,就是HTML的額外標籤。 HTML的額外標示 一般常見的標籤,很容易理解,所以特別針對HTML的額外標示來加強需具備的Web知識。 1. DOCTYPE html經歷了不同版本,所以每個網頁一開始都應該...

CSS簡介

less than 1 minute read

了解CSS運作方式的關鍵 想像每個HTML元素四周都有看不見得方框,使用Rules來改變呈現的方式。 CSS的運作方式 CSS associates style rules with html elements (CSS的運作方式是將HTML和Rules連結起來。) Rules rules包含兩個部分:s...

爆炸性的學習

less than 1 minute read

這學期我的目標是成為一個有爆炸學習速度的男人 忽然想到很多值得一試的方法: 聚焦 一段時間內聚焦於一個小目標,不顧一切的把它完成。避免游移所造成的浪費。 用大量的小目標代替一個大目標 像演算法這種需要大量時間摸索的科目,設立一些小目標,一一達成目標。 捲起...

UML - Class Diagram

less than 1 minute read

Design Pattern的學習中頻繁的出現著Class Diagram,如果不仔細地了解箇中意思,將會學得很辛苦,因此特別介紹Class Diagram,也就是類別圖。UML中的專有名詞與一般寫程式的專有名詞並不完全相同,例如UML用的一般化(generalization)這個名詞就等於是物件導向語言中「繼承...

Design Pattern - Command Pattern

1 minute read

定義: Encapsulate a request as an object, thereby letting you parameterize clients with different requests, queue or log requests, and support undoable operat...

Design Pattern - 資源總整理

less than 1 minute read

要學Design Pattern之前, 一定要先搞懂的物件導向基礎: 強烈建議先閱讀91Design Pattern學習的心得之後,再開始學習Design Pattern。文中提到學Design Pattern時必須具備下列的物件導向知識。強調Design Pattern只是幫助物件導向程式達到「高內聚、低耦合...