延續上一篇，打造舒適的 Windows ＋ Mac 雙系統開發環境，打算用一系列的文章，一一來介紹開發各種環境。打造舒適的雙系統開發環境 Windows + Mac 雙刀流 重度 Mac / Linux 開發者，嘗試 Windows 開發 ...

什麼是 GitOps ?兩年前初次聽到 GitOps 的時候，我想說是不是只要 Git tag 觸發一些部屬相關的事情，像是下了某個 tag，就會觸發某 Ansible 的工作，部屬某一台伺服器。很遺憾，完全不是我想的那樣。 在最近實際將 ...

本週我們來讀一下「如何為開源做貢獻」。這份文件是 Github 的 Open Source Guide 開源指南，約莫兩年前剛出的時候全部是英文版的，已經三年了，拖到現在才讀（汗）。 （這篇是閱讀開源指南的筆記，原創內容偏少，原文在下 ...

TL;DR 的意思是：哩供蝦？講重點好嘛？ TLDR 能夠讓初學程式的新手 ，輕鬆了解命令列工具的各種 Linux 指令，並且自由運用。本篇文章分成幾個兩個部分： 命令列工具 Command line tool 到底是什麼東西？ TLD ...

以往我們在管理 Kubernetes 集群的時候，需要大量的命令列操作，需要去四處找尋需要的資訊，例如你想看 Node 的狀態你可能需要在 AWS Console 上面看，如果你用的是 GKE 的話你就需要到的 GCP 的後台上看。你想要 ...

最近因為工作上需要用到開很多個視窗的情景，研究了一下如何把 tmux 變得更具有生產力。 tmux 是什麼？tmux 是一個很好用的遠端 session 管理套件，兼具效能與功能性，可以讓你在遠端伺服器中，輕易管理背景執行程式。 Larr ...

最近開始接觸單元測試，一堆名詞看不懂，來狠狠地 K 一下。而單元測試中的最佳男配角，就是替身 Double。藉由寫一篇文章的方式來讓自己更了解單元測試中的重要部分。一起來學寫測試，Go Go !! 註：接觸時間還很短，有錯還請不吝指正 ...

Minikube、kubectl 終於派上用場囉 前情提要在 前一篇 中我們弄懂了 K8S Cluster、Node、Pod 與 Container 的關係，並且在文章末段介紹了能夠與 kubectl -「能夠與 K8S 溝通的命令列 ...

為什麼該學 K8S ？ Pod、Node 是什麼？搞的我好亂呀！ 適合讀者： 已經會使用 Docker，但是不知道 Kubernetes 是什麼。 想看看 Kubernetes 到底在幹嘛的人。 為什麼該用 Kubernetes? ...

目前 DevOps 已經是 Backend 或 Frontend 多多少少都會碰到的部份。而 Drone，正可以讓開發者專心開發自己的專案，每個專案獨立設定需要的 CI / CD 流程，解放前端、後端工程師的戰鬥力，將測試與部屬結合在開發 ...

什麼是 Docker Registry？顧名思義就是用來儲存鏡像檔 (Image) 的地方。例如：DockerHub 就是 Docker 官方提供的 Docker Registry，你可以把你自己編寫的 Dockerfile 編譯之後上傳 ...

媽阿，原來電影裡演的都是真的 Hello 大家好，我是 Luka，一名喜歡追新技術並喜歡做些有趣嘗試的工程師。這次來的是分享參加 DEVCORE CONF 2019 的心得與收獲。 這篇以 Web 前端、後端工程師的角度來分享參加 DEVC ...

From: Updating S3 Object Metadata With the AWS Ruby SDK v2Author: Mattposted at: 2017/5/31 今天我在 S3 就如同在玩火一樣 - 弄壞了一個網站. ...

From: Amazon S3 Delimiter and Prefix - realguessposted at 2014/05/24 AWS S3 是一個不昂貴的線上檔案儲存服務，我們可以透過 javascript SDK 來使用 ...

什麼是 OLTP?最近在讀資料庫文件的時候接觸到 OLTP 這個名詞，大致上理解並比記下來。資料處理大致可以分成兩類: OLTP 與 OLAP。OLTP (Online Analytical Processing)指的就是傳統式關聯式資料庫 ...

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

Problem如果不小心把 binding.pry commit 進 git 而且不幸的 push 的話, 勢必要使用另一個 commit 來修正。如果要讓這個 commit 不見可能就需要用 git push -f 來修改。這樣做很醜，不 ...

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

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

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

Aggregator 與 Forwarder 使用 docker 建立 fluentd image為了模擬需要的環境，我們來使用 docker 建立 fluentd image 參考fluent/fluentd-docker-image來製 ...

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

架構 安裝步驟2.1 安裝 elasticsearch123$ curl -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.0.2.tar.gz$ ...

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

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

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

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

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

簡介Open Class 是 Ruby 常用的技巧，指的是我們可以覆寫已經存在的方法，來修改物件或類別的行為。在這邊我沒有要講詳細的作法，要介紹的是在 Ruby 2.0 中新增的 refine RefineRefine 是 ruby 2.0 ...

前言最近工作上使用的資料庫主要以 Elasticsearch 為主。而 Elasticsearch 跟傳統的關聯式資料庫有諸多的不同之處。初期在開發的時候並不是那麼快的上手。所以記錄下該如何使用 Elasticsearch 與如何在官方文件 ...

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

問題描述編碼問題是寫爬蟲常會遇到的問題。當你沒有處理好編碼問題，爬回來的網頁無法進行字串的切割，也無法使用 nokogiri 抽離需要的部份。 解決方法 找到原始網頁的編碼chartset='big' 把網頁 force_e ...

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

這是一個在工作上遇到的小問題。把網頁爬回來的時候有 HTML Entity 的編碼，看起來很不美觀。舉例來說，爬回來的標題如果含有 HTML Entity 會是這個樣子: 1PURUS空氣清淨器(鴻海集團創星出品&# ...

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

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

Part 1 - Crontab 介紹Crontab 是 Linux 中用來管理例行事務的程式，而 whenever 實際上的作用就是用來產生 cronjob 的，所以先介紹一下 Linux 系統中的 crontab 如何操作。 cront ...

Solution 1: sanitize_sql12ActiveRecord::Base.send(:sanitize_sql,["select * from my_table where description='%s ...

簡介 GodGod 是以 Ruby 撰寫而成，但不僅限於使用於執行 Ruby 檔，常見的用途是維持程式的運行使程式不中斷，萬一中斷可以自動重啟。不過本篇的重點不在於 God 的使用方法，而是在 Atom 編輯器中於如何讓.god可以對應到 ...

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

摘要本篇利用把陣列轉成字串這個題目，探討 jquery 和 ruby 中，map 和 join 行為的差異。 1. 在 jQuery 中可以用類似 Ruby 的方式取得尾部的倒數第幾個元素。1$('span[itemprop=ti ...

使用 Array 表達狀態123class Order KIND = [ ['未付款', 0], ['已付款', 1], ['已出貨',2] ]end 代表 orders 這張表 ...

前言Redmine 是一套以 Ruby 為基底的專案管理網頁應用程式。而且正好就是使用 Ruby on Rails 開發的。所以如果你是 Rails 工程師，使用一般部屬 Rails 專案的方式就可將 Redmine 架起來。 本文記錄下來 ...

兩種安裝方法在 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這個套件的 ...

本篇介紹Ruby中特有的寫法，將解答&:to_s和:symbol這兩種寫法的意義。並依序介紹以下議題： Symbol和String的不同之處分別宣告兩個symbol與string。 12345678[22] pry(main)> ...

標題列(Header)固定的標題 往下捲動時仍然會固定在上方 ...

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

1.ImportSASS在檔名前面加上底線時，不會直接編譯成CSS，使用@import引入後，才會編譯。 2. Mixins常見的mixin作法，要傳入的引數前面需加上$字號。 12345678910/* Mixins */@mixin b ...

使用Bootstrap好一段時間了，卻沒有好好的把官方文件讀過一遍，雖然寫的出來但是速度不盡理想，所以這兩天花些時間將幾個不太理解的常用元件與一些以前有使用到卻不太了解的data-attribute用法寫下筆記，好提高生產力。 Part 1 ...

為什麼 Typescript 是新手的好朋友typescript百分之百跟javascript相容，所有javascript的語法都可以在.tstypescript檔案中執行。因此就算是要javascrtip新手，也可以享受typescri ...

靜態命名空間方法1 - 直接指定123456789101112131415161718var myApp = {}myApp.id = 0;myApp.next = function() { return ...

建立物件時，實際上做了什麼事?使用 new 關鍵字時，JavaScript 會先建立一個空物件，接著設定物件的原型為函式的 prototype 特性所參考的物件，然後呼叫建構式並將所建立的空物件設為 this。接下來依照建構式設定實例上的特 ...

Scope 每個function在呼叫時都會建立新的 Function execution context，有個物件用來代表 Execution context，而區域變數則是 context 物件上的特性。 JavaScript 在查找 ...

javascript的函數是一級物件(First-Class)function是由Function的實例，並且在javascript中可以指定給變數，函式與數值的地位相同，並不會像有些語言中，無法像數值一樣地被指定，不會淪為二等公民，因此， ...

callback是一種設計模式來看看callback的定義： Callback (computer programming) - WikipediaIn computer programming, a callback is a refe ...

call可以讓你決定this的參考對象在 JavaScript 中，函式是 Function 的實例，Function 都會有個 call 方法，可以讓你決定 this 的參考對象。舉例來說，你可以如下呼叫： 123456789101112 ...

在 JavaScript 中，物件是 Object 的實例。你可以如下建立一個新的物件： 1var obj = new Object(); 實際上，現在已經很少人這麼撰寫了，使用物件實字（Object literal）語法就可以建立一個物件 ...

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

javascript 語言特性 javascript是個動態型別語言，無法在開發期間宣告型別，意味著javascript的單一變數可能會隨時改變型別! javascript是個弱型別的語言：意味著在開發時期無法指定javascript型別 ...

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

最近在訓練排版的熟練度，要快速打造protype基本的前端技能是必須的。我選擇的教材是tuts的psd to html porfolio。課程中介紹了詳細的切版流程，從切圖到建構html到用css排版都有詳細的介紹。本篇是psd to ht ...

atom-color-highlight 在編輯器中即時顯示色碼對應的顏色。 atom-development-server 一個很強大的東西，自己玩玩看吧。 atom-html-preview 老實說我不太會用這個套件，但是 ...

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

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

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

前言接下來我要藉由實作一些比較小型的Rails Project，來練習工程師必備的技能，其中最主要訓練的目標是能抓出需要實作的use case與如何從use case中實踐功能。因為沒有網頁的相關背景，如何磨練Html css javasc ...

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

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

advanced event handlertrigger使用trigger就像是你按下那個按鈕。範例: 1234567891011function picture() { console.log('Show Plane ...

each用each把result的物件讀出來，插入頁面元素之中。要插入<p></p>之中使用的是html()要插入img的src欄位，使用find('img').attr('src', ...

Section 1 cat and echocat(concatenate)1cat file 顯示檔案，按空白鍵可以捲動 1cat file1 file2 ...

Part 1. javascript Object將改原本的程式重構，所有的function都變成Object的Method，增加可讀性。 這是原本的code 12345678910var confirmation = { in ...

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

First Sinatra App輸入gem install sinatra安裝gem 建立app.rb檔 1234567require "sinatra/base"class App < Sinatra::Bas ...

門票要價15000的techday影片釋出了蒐集了幾個比較有興趣的影片，分別是: 保哥的 使用 TypeScript 開發大型應用程式 幾個敏捷開發的經驗分享: Kanban 看板及 Lean 精實的技巧在大型軟體開發專案 現代化網站 ...

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

IP and packageIP(Internet Protocol) address is essential for routing packets of information through the network.These pa ...

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

Section 4: Working with passwordsHow Passwords are Stored On modern systems, passwords are actually stored in an encrypt ...

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

Part1:當一個好的教練！如何讓一個二十幾年沒運動的阿宅學會打球一個網球教練如何讓一個二十幾年沒出門運動的宅女學會打球，答案是沒有太多的技巧，沒有標準的動作，當場示範怎麼打網球，然後把球丟給那個宅宅，阿宅揮空幾次以後，發現真的打的到了！證 ...

這是第三次參加agile meetup，真的很感謝scrum community舉辦這麼這麼有優質又免費的活動。今天的主題LeSS在講的是Large-Scale Scrum，也就是大型的scrum組織如何協同合作。 每一個小team都要正確 ...

常用指令筆記 第一課：使用hjkl控制上下左右 第二課：使用w e b跳躍單字 第三課：使用dd剪下一行，並使用p或P貼上。 第三課：移動跳至某一行 :第幾行跳至段落{或}跳至句首$跳至句尾0跳至某行： ...

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

File Ownership 0.File Permission Modes rwx: rwx: rwx u: g: o rwx ...

Section 3:Recalling Previous CommandsUp and Down you can recall previously used commands simply by using the Up and Down ...

##Environment VariablesEnvironment variables are simply named quantities that have specific values and are understood by ...

Section 1 Account1. Identifying the Current UserwhoTo list the currently logged-on users, type who whoami ...

File systemMountFile system table If you want it to be automatically available every time the system starts up, you need ...

雖然跟Ruby bit名字很像，但是內容的確比較進階點。 two ways for storing blocks1.Proc1234my_proc = Proc.new do puts "tweet"endmy_pro ...

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

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

install it and load itinstall itgem install activesupportgem install i18n load itrequire ‘active_support/all’ ...

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

Hash Argument每一個不同的欄位就多一個 argument不是個好方法，會造成很多欄位空在那邊。用 Hash argument 來解決這個問題。使用方法，因為 hash 是由 key-value 所組成，所以可以把需要的屬性設成 ...

UnlessUnless is more intuitive用 unless 代替 if! 更加直覺 Unless with else is confusingunless 和 else 一起用的時候令人困惑 ...

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

Part 1:工作清單以一週為規劃優點 不需要每天製工作清單，可以節省時間精力。 一年原本365份的工作清單，縮減成52份。 有足足一週可以進行最終的彙整工作，消除「工作未完成」的心理壓力。 可嚴選真正重要的工作：一天的工作量僅為一週的七分 ...

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

Collection新增一個collection 1collections/posts.js 1Posts = new Meteor.Collection('posts'); 除了client與server以外的資料 ...

CSS DinnerCSS Diner 是一個很有趣的小遊戲，你必須使用css來選取桌上扭動的物體，全部26關玩完對 CSS selector 想忘也忘不了。css selector 在 javascript 或是 jQeury 也會用到， ...

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

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

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

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

因為學習HTML在一般的標籤上並沒有遇到什麼問題，所以就不多做說明。直接進入比較容易混淆不理解的地方，就是HTML的額外標籤。 HTML的額外標示 一般常見的標籤，很容易理解，所以特別針對HTML的額外標示來加強需具備的Web知識。 1. ...

了解CSS運作方式的關鍵想像每個HTML元素四周都有看不見得方框，使用Rules來改變呈現的方式。 CSS的運作方式CSS associates style rules with html elements（CSS的運作方式是將HTML和 ...

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

Design Pattern的學習中頻繁的出現著Class Diagram，如果不仔細地了解箇中意思，將會學得很辛苦，因此特別介紹Class Diagram，也就是類別圖。UML中的專有名詞與一般寫程式的專有名詞並不完全相同，例如UML用的 ...

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

要學Design Pattern之前, 一定要先搞懂的物件導向基礎:強烈建議先閱讀91Design Pattern學習的心得之後，再開始學習Design Pattern。文中提到學Design Pattern時必須具備下列的物件導向知識。強 ...