前端，純屬紀錄。順便督促: 2018

在 input type="checkbox"
加入 attr. v-model="checkboxArrayName"，
可以將表格中checkbox暫時存入array，
使用 v-for="item in checkboxArrayName" {{ item }} 將其表達呈現出來。

在 input type="radio"
加入 attr. v-model="radioName"，
即使沒有 <form>也能圈在一起，變成單選。

2018年7月27日星期五

[JS/Vue]讓點擊 a href="#" 不要彈到最上方：preventDefault()

preventDefault()的對象是event
寫法是：
$('a.selector').on('click', function(evt){
evt.preventDefault();
})

假設href="#" 後方接一個網址，一樣不會連過去，
如同字面一樣的方法。
假設改成表單，則是停止送出(submit)

參閱https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

2018年7月18日星期三

[CSS]ordered清單列表用CSS來做：CSS 偽元素 ( content 與 counter )

CSS 偽元素 ( content 與 counter ) - oxxostudio.tw/

2018年6月6日星期三

[HTML] pug的註解、標籤後方有本文的處理、插值（變數）、pug-loader

https://www.getit01.com/p2018020125177324/
https://www.getit01.com/p2018020125310457/

pug中要註解可選擇是否生成在Html：
// 這樣寫會在 html生成
//- 前方有減號，這樣寫不會

使用<br>結束一行再輸入文字該怎麼寫呢？
用 enter附近的 " | " 符號例如：
<br/>
要輸入的文字

在pug裏會寫成：
br
| 要輸入的文字

<h1>title<span>sample</span>輸入的文字</h1>
也是一樣的寫法：
h1 title
span sample
| 輸入的文字
或是：
h1. title #[span sample] 輸入的文字

插值
https://pugjs.org/language/interpolation.html
在 HtmlWebpackPlugin 傳 data 變數
https://medium.com/@milkmidi/test-c3a23ca0cc55 - Milk Midi 奶綠茶

[Ang] 指令 directive：元件型、屬性型、結構型

component directives

attribute directives
兩種：ngStyle(直接鍵入a-選單尋找) ngClass

structural directives
三種：ngIf ngSwitch ngFor

[Ang]雙向繫結 two-way binding 、範本參考變數 template reference variables

雙向繫結 two-way binding [( )]
會自動做到 {{屬性}} 及 (事件)，

在app.module.ts 中import ngModel：

import { FormsModule } from '@angular/forms';

component 建立 propertyName，
template tag裡寫入 [(ngModel)]="propertyName"
也可以輸入a-，vs code擴充的 angular extension pack會自動跳出選單，
tab之後就會變成 [( ... )]，非常方便。

範本參考變數 template reference variables #name
可套用到任意 tag內，有點類似 id，直接在 template對它進行動作。

2018年6月5日星期二

[JS/Ang]鍵盤偵聽事件、event filter、TS中函式參數的宣告

输入框事件监听(一)：keydown、keyup、input -blog.csdn.net/yiifaa 甘焕的博客

這是在學ng時碰到的作業，
直接在 html塞 on***=""，以前都沒這樣寫過，為時未晚。

例如：在圖片塞 onclick，點擊後讓自己或其他元件產生變化；
在 input塞 keydown等等。

Ng的事件過濾器 event filter
(keyup)改為 (keyup.escape)或是 (keyup.enter) 這兩個常用的鍵；
搭配使用 $event.target / $event.target.value 。

在 component寫函式時，
寫入參數同時加入型別或屬性(property)有助於程式碼撰寫及除錯，
也可增加維護或修改效率，
例如：

countText(count: string) {

this.number = count.length;

}

原本未加入string，如果輸入 count.lenth，vs code不會有錯誤提示，
加入string後會出現提示。

countTextClean(input: HTMLInputElement) {

    ...

}

宣告之後可以在輸入‘.’時用選的，減少出錯。
也有看到有些寫法會使用any： (parameter : any)

[CSS]Sass中的HSL function

Sass HSL function -wcc723.github.io，討論顏色處理的function

常用的darken & lighten (color, n%)，
還有飽和 Saturate & Desaturate(color, n%)；

lightness(color)取得顏色的明度，就像 selector.text 的取得。

hue & adjust-hue(color, n deg)，
前者取得色環位置，後者取得調整後呈現；

grayscale(color) 調整為灰階，這裏調整後明度不變；

complement & invert (color)，互補色（負片）及反相色，
這兩個差異我也不清楚，應是跟RGB三原色、CMYK二次色有關係。
ps調色前必知的色彩原理 -愛經驗

[JS]將函數當成參數

我們知道函數可以寫成這樣：

function functionName (n, m){ ... }

也可以

function functionName (funcName, m){
...
return funcName (r)
}

2018年6月1日星期五

[HTML]使用自定義屬性、並能通過 html5驗證：data-*

趕案子的時候因為時間緊迫，
常常直接使用 plan-U(ugly) 而割愛捨棄 plan-A~C，
導致維護麻煩，所以要常常祈求不需維護

例如下面這個 plan-U程式碼，當使用者沒有選取任何物件，
或選擇數量不同的物件時，img 會跟著抽換：

這樣子又醜又胖，且 attr寫死在js裏。

於是結案後回想這個問題，想到可以寫函式將他們包住，
富經驗的前端高高手朋友更建議可以將 img圖檔直接存入 html。
什麼意思？使用data-*
HTML 5 自訂屬性 -Inet@Web

可以在 <img>這個 tag裏新增自定義的屬性，
但隨意命名不會通過 html5的驗證，例如：
<img src='...' layer01='diamondDarkest.png' alt='...'>
這樣可以使用，但不會通過驗證。
改成 data-layer01就可以囉！
這樣一來也更加符合資料呈現放在html的原則，
接著將 attr()寫成 attr('src','data-layer01') 就更方便也更整齊囉！

~~依上方文章推測，也許還能這樣寫，類似物件導向的方式：~~
~~attr('src', dataset.layer01)~~
~~最後這個寫法純屬臆測，尚未證實。~~

所以圖片的 .topImg img.txt2, .topImg img.txt3 原本html img tag中，
加入data-layer01 ~ data-layer04，後包入函示並給參數來調整src、display的內容，
就能解決讓程式碼更易讀、利於維護囉。

2018年5月31日星期四

[JS]要delay display的時候用到的 queue()

若要讓 display從 none到 unset，
需用到 queue()
http://www.w3school.com.cn/jquery/data_jquery_queue.asp

最佳解及說明在這裡
https://stackoverflow.com/questions/5396119/using-jquery-delay-with-css
$('h2').delay(800).css('display','none')
會沒有作用
要改成
$('h2')
.delay(800)
.queue( function(next){
$('this').css('display','none');
next();
});

而next()的作用在文中也有解釋，只是我還是不懂。

也有用setTimeOut的做法。

2018年5月30日星期三

[Ang]繫結binding：內嵌、屬性、事件

內嵌 {{ }}
在 app.component.ts檔案中設定的值，
可以直接在 app.component.html (template)調用，
可讓在標籤之間，也可放在屬性中，
也可以寫入回呼建構式。

屬性 []
這裡的屬性是指 DOM的 property，非 Html的 attribute，
要查詢 property可在開發者工具裡的找到

打開第二項的HTMLImageElement，
可以看到有 alt, attribute, title ...
eg: href="{{ url }}"
改寫成 [href]="url"。
[ ]綁定只限property，例如<a [myData]= "..."></a>會產生語法錯誤，
因為myData並不是property。
在ng中自訂字如要綁定，則使用：
[attr.自訂字]= " ..."
在[ ]自訂自前方加入attr.即可。

事件 ()
事實上，ng裡面並沒有function，
只有類別，類別裡面只有屬性跟方法。
在標籤中將原本 onclick=""改為 on-click=""就變成ng的語法，
然後放入方法，例如：
<img on-click="change()"></img>
其中change()，來自component。
而比較建議的做法是
把 on移除，加上 ()改為 (click)=""，可讀性也高。
在事件 binding使用上，" "中按下
win ctrl+space
mac
會跳出建議選項，再自行加入()，方便使用。

事件參數 ($event)
可以做到控制有無按下option(alt)+click，發生事件。
但要注意大小寫，例如 $event.altKey ；
我們在 component中加入 console.log($event);
進入開發工具來觀察，型別是MouseEvent。
展開可以看到有非常多 property能使用，
為避免寫錯大小寫，我們可以在參數後方加入型別，例如
functionName($event: MouseEvent) { ... }
這樣在 $event後輸入 ' . ' 就可以用選的，用tab鍵自動輸入，降低打錯字的機率。

2018年5月29日星期二

[Ang]部署的方法、升級 angular應用程式到新版本的方法

ng build
後會建立一個dist folder，
裡面若有不需要的檔案，到 angular.json中"assets"找到檔案名稱並刪除。

刪除後改執行
ng build --prod
product的意思，會自動幫我們合併壓縮檔案，
表示網頁載入效率及速度更好。

若我們在查詢版本時
ng -v
出現下列類似字樣：

那麼我們可進行更新動作
ng update
可在 git觀察 package.json升級前後的版本差異

檢查 global angular cli的方法
npm list -g --depth=0
or
yarn global list --depth=0
depth=0表示第一層。即可以查詢到目前版本，
接著輸入
npm outdated -g
or
yarn outdated
沒有顯示任何東西表示已是最新版本，
若有就輸入安裝指令即可。

2018年5月28日星期一

[Ang]快速建立元件、vs code切換template、全部儲存、搜尋開啟檔案快速鍵、加入靜態網頁版型

ng g component pagename
其中 component可簡化為 c

會造出

四個檔案

想知道可以製造哪些類型，可鍵入ng g -h

快速鍵：https://defkey.com/visual-studio-code-mac-shortcuts

快速跳到 template html，在template中鍵入則會跳到component
win alt+o
mac shift+option+o

全部儲存
win crtl+k+s
mac option+cmd+s

搜尋關鍵字開啟檔案，檔名甚至可以忽略小數點給參考項目
win ctrl+e
mac cmd+p（這個非常富功能性）

加入靜態網頁版型、圖片、CSS or JS：

放到src資料夾，再到專案目錄下 angular.json

"app": [{ ... "assets":[ 修改 ] ... }]

完畢後須重啟

npm start / yarn start

2018年5月21日星期一

[Ang]安裝環境：升級之前安裝過的node、安裝 angular cli

yarn的使用及升级Node.js的新方法 - haorooms.com

Angular 2 開發實戰：新手入門篇實作環境說明 - 保哥github
Angular 开发学习 02 – Angular CLI - DEVBEAN TECH WORLD
install：
yarn global add @angular/cli
or
npm install -g @angular/cli

檢查
ng -v
但在這裡我出現error
Error: Cannot find module '@angular-devkit/core' - after clean install - stackoverflow

而且嘗試移除也失敗，只好暫時先不管。

保哥回覆：

請你試著用 npm 移除重裝看看。

npm uninstall -g @angular/cli

npm install -g @angular/cli

開新資料夾後建立專案
ng new name
接著啟動
yarn start
就可以點 localhost:4200後自動從瀏覽器開啟檢查囉
Use Angular-CLI with Yarn - winsmarts.com
上面這篇改為 yarn沒有試成功
ng set --global packageManager=yarn

但是沒有出現 .angular-cli.json 檔案
How to generate .angular-cli.json file in Angular Cli? - stackoverflow
Missing .angular-cli.json file: Angular - stackoverflow

下面這篇有人回覆：

Update: With Angular 6.0.0 the filename is changed from .angular-cli.json to angular.json.

原來是改名字了且從 hidden 現形。

進入網頁後，右鍵檢視原始碼，（略不同於 option+cmd+I）
<base> 是非常重要的標籤！

2018年5月10日星期四

[JS]RegExp，FB彩蛋、tag作法推測

JavaScript (7) – 字串處理與正規表達式 (作者：陳鍾誠) -程式人雜誌 -- 2013 年 7 月號 (開放公益出版品)
[JS] 正則表達式(Regular Expression, regex) -PJCHENder Unpublished Notes

[JS]串接instagram API

Instagram API【筆記】新手入門 -leesonhsu.blogspot.tw
Instagram API 教學 (取得 User ID 及照片資訊) -聽顏小稀碎碎念(´∀｀)ノ
[30apis] Day 28 : Instagram Platform API -2018 iT 邦幫忙鐵人賽 chiaroluna
在未登入的情況下取得 instagram 的 hashtag api -小灰狼php筆記

2018年5月2日星期三

[HTML]form input (radio, file)、jQueryUI slider

自訂 Input File 檔案上傳按鈕 CSS 最佳解法 -wfublog.com

https://jqueryui.com/slider/#steps
对齐增量 -runoob.com (中文翻譯版)

表單元素收集使用者輸入的資料form input label button -u.camdemy.com/

2018年5月1日星期二

[jQuery]點擊div外部關閉

jQuery動態顯示Div，按Div以外的地方就隱藏Div -獅子內心的OS
用到.target

2018年4月29日星期日

[CSS]通常使用在遊戲的：強制橫向螢幕、Viewport(解析度,縮放比例,是否允許縮放)、表單取值、icon：FontAwesome

控制畫面方向 -developer.mozilla.org/
提及透過監聽鎖定畫面(js)
移动端如何让页面强制横屏 -jianshu.com
一樣使用js，或許有用到jQuert

Html5 - Viewport (解析度,縮放比例,是否允許縮放) -Mazs's Notes
SVG 研究之路 (23) - 理解 viewport 與 viewbox -oxxostudio.tw
理解viewport与device-width -xiaocaoge.com
快捷提示：别忘记Viewport Meta标签 -webdesign.tutsplus.com/zh-hans
[重點整理]RWD自適應的小技巧-別忘記Viewport Meta標籤 -馬米思個人紀錄站
Day13：小事之 HTML viewport 與 meta tag -前端路上那些重要與不重要的小事
傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享 -MUKI space*

可以訂viewport寬度為固定值，而不是device-width，
這樣就會在所有尺寸寬度照比例縮放了

[筆記]用javascript來取得表單元素內容的值(javascript取值) -PJCHENder那些沒告訴你的小細節

5 分鐘快速了解 FontAwesome 5 -PJCHENder那些沒告訴你的小細節

2018年4月23日星期一

[CSS]img組成的動畫並兼顧RWD、動畫注意事項、表格非bootstrap RWD化

無論圖片幾張
1.先規劃圖組，分別放入不同列的div(全放同一個也行，只是我習慣一組一組做)，
其中一張當主圖設 position: relative，width以%為單位縮放，margin調位置。
2.其餘全用div>img:nth-child()設 position: absolute，width一樣以%為單位縮放，left: %;top: %...調位置。
小撇步：可以用chrome developer tool 調完再改 code比較快
3.善用透明度觀察動畫行徑位置

Web Fundamentals Animations Overview -developers.google.com
提及動畫效能高成本，容易造成斷斷續續；及其他動畫設計原則

讓 Table RWD -不進則退 CSS、jQuery分享

2018年4月14日星期六

[Ruby]五倍紅寶石文：Mac 上使用 Nginx + SSL & HTTP/2

在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定 -5xruby.tw

2018年4月10日星期二

[gulp/HTML/CSS]pug & sass安裝教學、Node.js Express初入門、Mac好用工具

2019.07.26 此文章發表時，使用 gulp 版數為 3.9.1，所以在專案資料夾安裝 gulp 時請使用：gulp@3.9.1；
或在 package.json 降為 "gulp": "^3.9.1"，但有網友說在 Node v10 以上不要這麼做，雖我還沒去查證，不知為何
參考：https://stackoverflow.com/questions/51098749/everytime-i-run-gulp-anything-i-get-a-assertion-error-task-function-must-be

HTML網頁快速產生器：淺談jade(pug) -聯成電腦
淺談 CSS 方法論與 Atomic CSS -TechBridge 技術共筆部落格
從新手到中手：前端工程加強班 -github.com/aszx87410
Node.js Express 初入門 – 上集 -寫點科普，請給指教。
那些令人驚歎的 HTML、CSS、JavaScript 工具和庫 -頭條森林
我用的 Mac 軟體 -Hiraku Dev
Mac 下有哪些能極大地提高工作效率的軟體？ -getit01.com/（含大幅阿福介紹）
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅 -github.com/jawil
Visual Studio Code寫SCSS，並自動編譯為CSS -edwardkuo.imas.tw/
npm 與 package.json 快速入門 -hk.saowen.com

下載node.js，安裝後以

$node -v

$npm -v

檢查環境。

Sass 與 Bootstrap -六角學院
[ Alex 宅幹嘛 ] 👨‍💻從 CSS 到 SASS (SCSS) 超入門觀念引導
Gulp 基本運用與 Bower 之間整合 -六角學院
鐵人賽 10 - Gulp 與 Sass 開發環境 -wcc723.github.io，講解gulp
前端自動化神器 Gulp (更新) -鍵盤自耕農，這篇解釋很多套件是幹嘛用的

內文介紹將先安裝 sass，再裝 pug，最後整理設定偵測檔 gulpfile.js。

接著輸入：

$sudo npm install gulp -g

（-g: global）
$gulp -v
確認。

再到專案目錄，初始化專案
$npm init
~~但輸入gulp後說找不到gulpfile，所以放棄改用node.js express~~
(這裡應該是要自己新增 gulpfile.js，下方有提到)
【前端筆記】如何用Visual Studio Code架設前端開發環境（pug [ jade ]、sass、gulp、browser-sync） -翻滾吧！米粒與米麩

Cannot find module 'gulp-sass'

結果還是沒成功，可能是版本問題，
改用 yarn
三分鐘學會用 yarn gulp 編譯 scss -要改的東西太多了，那就改天吧
yarn 官網安裝文件
npm 常用命令（vs yarn） -慕課網 imooc.com
[Node.js打造API] 用Yarn取代npm加速開發 -1010Code
[译] Yarn 和 Npm 命令行小抄 -segmentfault.com
命令列表 -Yarn学习笔记
gulp-plumber -gulp 學習筆記 kejyuntw.gitbooks.io/gulp-learning-notes

yarn add gulp gulp-sass gulp-sourcemaps gulp-autoprefixer gulp-plumber gulp-notify --save

新增一個 gulpfile.js，這樣設：

var gulp = require('gulp'),

sass = require('gulp-sass');

autoprefixer = require('gulp-autoprefixer');

sourcemaps = require('gulp-sourcemaps');

gulpPlumber = require('gulp-plumber');

notify = require("gulp-notify");  

gulp.task('watch', function () {

gulp.watch('stylesheet/sass/*.sass', ['styles']);

});

gulp.task('styles', function () {

gulp.src('stylesheet/sass/*.sass')

.pipe(gulpPlumber())  

    .pipe(sourcemaps.init())

    .pipe(autoprefixer({browsers: ['last 2 version', 'safari 7', 'ie 8', 'ie 9', 'ios 6', 'android 4']}))

.pipe(sass({outputStyle: 'compressed'}))

.on('error', function(err) {

notify().write(err);

this.emit('end');

})

.pipe(sourcemaps.write('.'))

.pipe(gulp.dest('stylesheet/css/'))

.pipe(notify("success"));

});

gulp.task('default', ['styles', 'watch']);

成功！

再來裝pug
為前端開發省時省力 -getit01.com
PUG 系列 | 第一課初識Pug、插值和迭代 -getit01.com
Pug遇见Gulp -Pugjs中文文档
利用gulp和browser-sync实现Pug(jade)的实时预览 -Kimi DevBlog

$ yarn global add pug
$ yarn global add pug-cli

$ yarn add -D gulp-pug
(-D = npm 的 --save-dev)
以
$pug -V
檢查

$ yarn add -D browser-sync
browser-sync -gulp 學習筆記 kejyuntw.gitbooks.io/gulp-learning-notes

var gulp = require(gulp);
var pug = require(gulp-pug);

gulp.task(pug, function(){
gulp.src(./src/*.pug)
.pipe(pug({
pretty:true
}))
.pipe(gulp.dest(./dest/);
});

gulp.task(watch, function(){
gulp.watch(./src/*.pug,[pug]);
});

gulp.task(default, [pug, watch]);

全部改成

//  呼叫 要用的功能 

var gulp = require('gulp'),

sass = require('gulp-sass');

autoprefixer = require('gulp-autoprefixer');

sourcemaps = require('gulp-sourcemaps');

gulpPlumber = require('gulp-plumber');

notify = require("gulp-notify");  

pug = require('gulp-pug');

browserSync = require('browser-sync').create();

//  任務 watch 負責監看指定目錄的指定檔案類型 

gulp.task('watch', function () {

gulp.watch('stylesheet/sass/*.sass', ['styles']);

});

//  任務 styles 負責設定 scss 編譯的處理規則(本例為minify css)、瀏覽器前綴要對應到多舊的瀏覽器、產生 sourcemap 

gulp.task('styles', function () {

gulp.src('stylesheet/sass/*.sass')              // 指定要處理的 Scss 檔案目錄

.pipe(gulpPlumber())                        // 使用 gulp-plumber 處理例外

    .pipe(sourcemaps.init())

    .pipe(autoprefixer({browsers: ['last 2 version', 'safari 7', 'ie 8', 'ie 9', 'ios 6', 'android 4']}))

.pipe(sass({outputStyle: 'compressed'}))    // 編譯 Scss

.on('error', function(err) {

notify().write(err);

this.emit('end');

})

.pipe(sourcemaps.write('.'))

.pipe(gulp.dest('stylesheet/css/'))         // 指定編譯後的 css 檔案目錄

.pipe(notify("success"));

});

//  任務 task_pug 編譯 pug 

gulp.task('task_pug', function() {

    console.log(pug);

    return gulp.src('./*.pug')

        .pipe(pug({pretty:true}))                   //格式化

        .pipe(gulp.dest('./'))                      //輸出到文件夾

});

//  即時預覽

gulp.task('browser-sync', function() {

    browserSync.init({

        server: "./"                                            // 指定服務器指定根目錄  

    })

    gulp.watch('./*.pug', ['task_pug']);                            // 監聽pug文件變化 執行 task_pug 方法使用 gulp-pug 編譯 pug

    gulp.watch(['./*.html',]).on("change",browserSync.reload);    // 監聽pug文件變化 刷新瀏覽器

});

//  設定 gulp 啟動時執行的任務

gulp.task('default', ['styles', 'watch', 'task_pug', 'browser-sync']);

成功～～

但以上設定出錯，無法 save scss即刷新，
所以讓 pug & scss 都能 save後自動同步：

//  呼叫 要用的功能 

var gulp = require('gulp'),

scss = require('gulp-sass');

autoprefixer = require('gulp-autoprefixer');

sourcemaps = require('gulp-sourcemaps');

gulpPlumber = require('gulp-plumber');

notify = require("gulp-notify");  

pug = require('gulp-pug');

browserSync = require('browser-sync').create();

//  任務 watch 負責監看指定目錄的指定檔案類型 

// gulp.task('watch', function () {

//     gulp.watch('stylesheet/scss/*.scss', ['styles']);

// });

//  任務 styles 負責設定 scss 編譯的處理規則(本例為minify css)、瀏覽器前綴要對應到多舊的瀏覽器、產生 sourcemap 

gulp.task('styles', function () {

gulp.src('stylesheet/scss/*.scss')              // 指定要處理的 Scss 檔案目錄

.pipe(gulpPlumber())                        // 使用 gulp-plumber 處理例外

    .pipe(sourcemaps.init())

    .pipe(autoprefixer({browsers: ['last 2 version', 'safari 7', 'ie 8', 'ie 9', 'ios 6', 'android 4']}))

.pipe(scss({outputStyle: 'compressed'}))    // 編譯 Scss

.on('error', function(err) {

notify().write(err);

this.emit('end');

})

.pipe(sourcemaps.write('.'))

.pipe(gulp.dest('stylesheet/css/'))         // 指定編譯後的 css 檔案目錄

.pipe(notify("success"));

});

//  任務 task_pug 編譯 pug 

gulp.task('task_pug', function() {

    console.log(pug);

    return gulp.src('./*.pug')

        .pipe(pug({pretty:true}))                   //格式化

        .pipe(gulp.dest('./'))                      //輸出到文件夾

});

//  即時預覽

gulp.task('browser-sync', function() {

    browserSync.init({

        server: "./"                                              // 指定服務器指定根目錄  

})

gulp.watch('stylesheet/scss/*.scss', ['styles']);             //  任務 watch 負責監看指定目錄的指定檔案類型 

    gulp.watch('./*.pug', ['task_pug']);                          // 監聽pug文件變化 執行 task_pug 方法使用 gulp-pug 編譯 pug

    gulp.watch(['./*.html','stylesheet/css/*.css']).on("change",browserSync.reload);    // 監聽pug文件變化 刷新瀏覽器

});

//  設定 gulp 啟動時執行的任務

gulp.task('default', ['styles', 'task_pug','browser-sync']);

[CSS]sapn 內文換行設定及對齊、背景色漸層、濾鏡

在中文網站中的文字若要切換成英文，常使內文寬度變長。

[CSS] div 和 span 的差異 -TEN01
討論如何讓 div變成近似 span，span 變成近似 div原理；
以及各自置中方法。
CSS 語法，文字換行，強迫不換行。 -puritys.me
span 文本内容超过宽度自动换行 -blog.csdn.net
如何让span元素和textarea顶部对齐？ -SegmentFault
《CSS3 text-justify》文字左右貼齊適用各瀏覽器 -minwt.com

CSS3 渐变（Gradients） -runoob.com/css3/
safari前綴(-webkit-)設定起始點，
o前綴、firefox、標準語法(-o-、-moz-)設定終末點，
另外，標準語法要加 to ；
也可以設定為放射角度，參數單位使用deg，標準語法不須加 to；
還可設定多色漸層、重複漸層、顏色比例調整、圓(及橢圓)形漸層。

什麼?? CSS也有濾鏡可以用! (CSS3 filter) -eztrust.com.tw
Apply a Filter to a Background Image css-tricks.com 使用::before

2018年4月2日星期一

[Ruby]換！當學習工具變成生財工具，MacBook Pro：iTerm、Homebrew、Ruby、Rails、SourceTree、Alfred mac輔助工具；rails 技巧

用虛擬主機ubuntu實在太慢了，
自學時可以等，工作時多等一秒都焦慮，
所以怒下訂單買了 MacBook Pro，

除了裝必要的 VS code、Git，
如何在不同的電腦上同步 VS Code 的設定？ -medium.com/@mvpdw06
小雷點： vscode sync插件在不同設備同步的坑
按照大航道指示裝了：

iTerm -比 Mac原生 Terminal有更多功能
Homebrew -軟件包版本管理器

接著透過Homebrew安裝 Ruby、Rails；
最後則是SourceTree。

4/7 發現一個寫 Rails技巧的文章
Rails 開發注意要點 -gist.github.com/hechien

Alfred app
https://www.alfredapp.com/
Alfred：Mac 熱鍵控專屬的核武級神兵 -appleuser.com/

Mac效率神器Alfred系列教學——Alfred基礎 -頭條森林

丢掉鼠标－Mac神软Alfred使用手册1 -wellsnake的平行世界

5分钟上手Mac效率神器Alfred以及Alfred常用操作 -jianshu.com

http://youtu.be/_zfkaQGGXK8

安裝參考的指令

xcode-select --install
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew update
brew cask install iterm2
# update iterm2 settings -> colors, keep directory open new shell, keyboard shortcuts
brew install bash # latest version of bash
# set brew bash as default shell
brew install git
# update bash_profile
brew cask install alfred
# set CMD+space to launch alfred
# install nvm/node
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
brew cask install visual-studio-code
# update vscode settings
# install vscode extensions

[網站架設]暫時先用Heroku頂著，轉向Heroku、CloudFlare

由於部署問題一直解決不了，
上架日期也迫在眉睫，只好協商先用轉址方式，指向Heroku，
慶幸廠商也能接受。

Godaddy DNS設定轉向Heroku -Hazel Wu Medium
設定 Heroku 使用 Cloudflare HTTPS -andyyou.github.io
CloudFlare 架站者必備免費 CDN、DNS 託管服務設定教學，網站載入加速、節省流量防止惡意攻擊 -免費資源網路社群

2018年3月30日星期五

[Git]強制push、更改最後一次送出的commit -m

提交一個錯誤的commit且已經上遠端remote了，該怎麼辦呢？
還原上一個commit編輯後，想直接蓋過最新錯誤的版本：

git push -f

是一個危險的指令，單人開發比較安全，
多人時請小心！

強制更新遠端分支 zlargon.gitbooks.io/git-tutorial

【狀況題】修改 Commit 紀錄 -為你自己學 Git
有四個技法，這裡使用 -amend

2018年3月29日星期四

[CSS]類似youtube自動撥放？用CSS寫動態圓餅圖進度 key words：旋轉圓餅圖遮罩

在前端聊天室群組中有人發問，
youtube自動撥放的圓形倒數計時該怎麼寫，
不知道關鍵字也是無從問起，
但剛好在 jQuery書上有看過，遂能生出關鍵字，
於是找到這篇

純 CSS 繪製圓餅圖 -http://www.oxxostudio.tw

[HTML/CSS]切圖？拿到設計圖之前UI desiner做的事、優化網頁

跟設計師朋友討論案子視覺優化，
第一次聽到「切圖」這個詞，
跟切版是不同的哦！

(原來最近接的急件案，UI沒有討論到切圖也沒有把切圖做完整)

參考
新手福利！超全面的UI設計切圖規範指南 -壹讀

2018年3月28日星期三

[CSS]BS4、Flex參考網站

BootStarp4實做入門 -campus-xoops.tn.edu.tw
這個網站很完整，從安裝 vs code其中常用 extensions也有介紹

深入解析 CSS Flexbox -oxxostudio.tw
如果不要設class，要在CSS裡面寫的話，在這個網站有諸多介紹

[HTML]分享連結的縮圖與內文如何設定

客戶在上架前的要求

如何解決 FB 臉書分享連結時，標題和縮圖無法正確預覽的問題？ -SurveyCake 官方部落格
Sharing Debugger -developers.facebook.com
打造方便分享的網頁|Open Graph Protocol篇 -網路行銷零元本鋪|你的網路行
如何使用 Open Graph, Twitter Card 自訂網頁在 Facebook, Google, Twitter… 的顯示內容 -簡單究好網頁前端開發資訊

2018年3月17日星期六

[網站架設]Nginx + Passenger、新增系統管理帳號、自動化部署及部屬

接著回到iHower的Rails部署教學網頁，
要進行Nginx + Passenger的安裝
什麼是Nginx：
NGINX : 高效率的 Web Server -阿舍的隨手記記、隨手寫寫(內含大量ubuntu文章)
Apache vs. Nginx，究竟哪一個比較好 -IT邦幫忙技術問答我是老皮
全面了解Nginx到底能做什麼 -每日頭條極客教程
Nginx是什么？Nginx介绍及Nginx的优点 -LNMP.org
Nginx 容器教程 -阮一峰的网络日志(此站也有PostgreSQL新手入門)
Ubuntu 16.04上使用Nginx Passenger 部署 Rails -博客
Ubuntu 16.04 安装 Redmine项目管理系统（Nginx） -WTF Daily Blog 斗大的熊猫
Installing Passenger + Nginx on Ubuntu 16.04 LTS (with APT) -phusionpassenger.com

在首次登入與線上求助 -鳥哥的Linux私房菜提到

在Linux系統下最好常使用一般帳號來登入即可，所以上例中鳥哥是以自己的帳號dmtsai來登入的。因為系統管理員帳號(root)具有無窮大的權力，例如他可以刪除任何一個檔案或目錄。因此若你以root身份登入Linux系統，一個不小心下錯指令，這個時候可不是『欲哭無淚』就能夠解決的了問題的～

因此，一個稱職的網路/系統管理人員，通常都會具有兩個帳號，平時以自己的一般帳號來使用Linux主機的任何資源，有需要動用到系統功能修訂時，才會轉換身份成為root呢！所以，鳥哥強烈建議你建立一個普通的帳號來供自己平時使用喔！更詳細的帳號訊息，我們會在後續的『第十三章帳號管理』再次提及！這裡先有概念即可！

進入第十三章新增一個帳號，不過內容很多，
在上方博客的連結內文有個新增帳號的簡單步驟，先使用再回頭了解。

使用新增的帳號進行Nginx安裝，
照著安裝教學很順利就完成了，打開瀏覽器輸入IP位置試試：

SUCCESS !!!

在網站尚未決定上架前，應該需要關閉，
所以擷取Nginx啟動和重開用法：
sudo service nginx start
sudo service nginx stop
sudo service nginx restart

裝完 Nginx教學文的下個步驟就是剛做過的新增user，
但教學文不使用密碼登入，以 SSH key登入更安全。
也可參考：遠端 SSH 免密碼登入(key) 設定含新增帳號步驟-Leon's Blogging

這裡採用直接刪掉帳號，再重新創建一個，比較單純些，
刪掉帳號前先建議先
find / -user username
注意有無系統內例如例行性crontab檔案，查詢後很多檔案跑出來，
但我現在也不會判別這些檔案哪些該如何處置，
依常理判斷我僅是透過deploy(with passwd)安裝一些東西上去，
刪除應該是無傷大雅，所以就勇敢地將它刪除了，並創建新的deploy(without passwd)，

印象中與第一次創建帳號不同的是，中間有要求填入full name, room number...
全部按Enter直接跳過也不影響。

接者設定自動化部署，用到一個名為 Capistrano的gem，參考：
Capistrano 自動化 deploy Rails -ihower { blogging }
Capistrano 自動化部署設定 -Leon's Blogging
百度百科 Capistrano

在本地端 gemfile加入 capistrano及相關 gem，
cap install時出現了錯誤訊息：
cap aborted!
No Rakefile found (looking for: capfile, Capfile, capfile.rb, Capfile.rb, /usr/lib/ruby/vendor_ruby/Capfile)
解決方案網站參考：
'No Rakefile found' error from the 'cap install' command -Stack Overflow
輸入
cap --rakefile /usr/lib/ruby/vendor_ruby/capistrano/templates/Capfile install
即可解決。
執行 cap production deploy:check
出現
cap aborted!
LoadError: cannot load such file -- capistrano/rails
改成 cap --rakefile /usr/lib/ruby/vendor_ruby/capistrano/templates/Capfile production deploy:check
出現
cap aborted!
NoMethodError: undefined method `append' for main:Object
Tasks: TOP => production
在不知如何解決的情況下輸入
bundle exec cap production deploy:check
結果進入登入遠端畫面，但需要密碼，
所以是新增免密碼登入的帳號有出錯嗎？
（明天繼續）

答案是！！
1.本地端與遠端操作要正確，頭腦要清楚
！！2."ssh-rsa "不須換行，複製會被忽略自己補上！！
以上兩點搞了兩天，終於突圍

要寫入config/secrets.yml一直出現 E212的問題，用root也一樣
https://stackoverflow.com/questions/8253362/etc-apt-sources-list-e212-cant-open-file-for-writing
且發現複製字串可能會被截字，要小心

暫時不設定自動化，時間要停損，當作售後服務吧。

後來要部署還是得寫入，但是出錯原因找到了，
要進入遠端user cd ~(project_name)底下的
shared/config去新增檔案寫入secrets.yml database.yml，
寫入後就可以繼續做下去囉！

設定完成後
cap production deploy:check 最下面紅字錯誤訊息消失，
接者要正式
cap production deploy 結果出錯：
bundle stderr: /usr/bin/env: 'bundle': No such file or directory

gem cleanup 幫你清除重複安裝的 rubygem -小蟹的Rails心得筆記
Ruby Gem 命令详解 -陈斌彬的技术博客

經詢問後得到這個回答：

哎喲～突然想到你在本地有裝rvm了嗎？！

如果沒有裝的是要裝一下的喔！！

https://rvm.io/rvm/install

但還沒裝之前先試試看把capistrano-rvm 刪掉只剩capistrano-bundler，然後再bundle、deploy試試看，如果不行的話就兩個都裝上且在本地要安裝rvm。

刪除gem: gem uninstall [gemname ~ver.]

解除安裝其他程式與安裝 rvm之後登出，ubuntu就不理人了，
安裝完執行結果有好多gem都消失，連bundle install都不能執行，
所以從 gem install bundler 再開始，但手誤打成 gem install bundle，
輸入 bundle install 後還是可以執行，只是安裝很久。

[筆記]Ruby的RVM,GEM,Bundler是什麼？ -林克融

安裝完輸入 cap --v 有一些檔案找不到的訊息，
但後面很貼心有給指令，處理完還是不行，
不過還裝了gem rvm1-capistrano3, require 'rvm1/capistrano3'，
在遠端home mkdir .rvm, .rvm/bin
執行deploy可以通過第一道，後面錯誤訊息還是差不多。

4/2 高手來解答，先把 gem整理不需安裝cap rvm/bundle，
也不用 require上述二者，
再到server端 sudo gem install bundler，
注意 secrets.yml在遠端的設定，
production:
secret_key_base: #####(一堆數字)
這邊編輯不能使用 tab，兩個空白來代替，數字前也要空白，
secret那幾個字也要記得打！

接著再 deploy試試，我在這邊還有一個錯誤，
在 server端的 database.yml有打錯字：
production"n"

所以：Debug真是要命。
經一事，長一智～叮咚叮咚

雲服務部署技巧 - 虛擬主機構買到環境建置一次搞定 - 六角學院
雲端主機租賃及部署 Node.js 服務- 六角學院 youtube
使用 express

[Ruby] 線上課程網站 Growth School

在查找Nginx的時候發現這網站，
有幾堂免費課程，其中裡面有一堂內容提到Nginx，
(Mini Course) Deploy Rails Project to Linux Server

Growth School

尚未註冊也沒上過，無心得可分享

2018年3月15日星期四

[網站架設]網域、主機租好了，然後呢？我的步驟：A指向、SSH、Ruby、PostgreSQL、rsnapshot

！！所有相關連結皆須注意發表時間，可能會有版本問題！！

如何架設網站＋費用：21個教學（網頁製作軟體） -張阿道
網站架設－VPS主機申請與安裝 -梅問題教學網
網站架設－VPS主機lxadmin設定與開設帳號 -梅問題教學網
網站架設－lxadmin出現no_ip_address解決辦法 -梅問題教學網

租好 sugarhosts VPS主機，但不知為何找不到附加 cPanel的選項，
得到 IP位置後，
GoDaddy我的網域 > 點擊 ****(your_domain_name.com)> 管理 DNS>
紀錄類型 A> 編輯> 將指向Parked 改成 IP。
DNS基本觀念 -Seednet
【網路基礎知識】什麼是DNS(Domain Name System)Server？ -工程師的櫻花浪漫街道
DNS 設定教學 -Clark's 電腦知識日記簿

下載 SSH PuTTY，
這裡一直在 login as的時候輸入信件內的用戶名及密碼，
一直登入被拒絕，還失敗多次被關閉，
後來看到許多教學都在 login as時輸入 root，
gan~ 為什麼是 root！總之改成 root再輸入信件內的密碼就可以了。
如何登錄SSH客戶端？ -cpaneleasy
PUTTY 入門教學 -資訊爆炸的時代***
遠端連線伺服器SSH / XDMCP / VNC / RDP -鳥哥的Linux私房菜

總之沒有cPanel，要安裝cPanel嗎？要安裝 ubuntu嗎？
反正一定要裝的是 Ruby on Rails, PostgreSQL，
為了 Rails所以該裝 ubuntu吧！

由此篇文章得知，沒有 cPanel不是什麼大不了的事，所以不裝了！
cPanel 面板真的很重要 -gtour.info
補充：同作者如何在 Ubuntu 16.04 配置 iptables 防火牆 -gtour.info***

進入 sugar VPS後台控制面板，點擊你的hostname(your_host_name.your_domain_name.com)>
找到 Reinstall> 即可看到熟悉的 ubuntu圖示 >點選版本後Reinstall
>說要等10-15分鐘>

SUCCESS!

接著來安裝 Ruby on Rails
Ruby on Rails 實戰聖經網站佈署 -iHower (現行 Ruby版本 2.5.0)
跟著教學網頁走，其中 ./configure步驟時，充滿使人擔心的紅字NO：

也不知道是怎麼樣。
安裝完之後輸入 ruby -v

SUCCESS!!

接著要安裝 PostgreSQL，明天待續。
跟著文件步驟安裝，PostgreSQL也安裝成功了

這時朋友建議裝個快照備份程式，如rsnapshot：
How To Backup Local Unix Host Using rsnapshot rsync Utility -The Geek Stuff
How To Backup Remote Linux Host Using rsnapshot rsync Utility -The Geek Stuff
使用 rsnapshot 備份及比較設定檔 -Jengyic's 正義部落
淺談linux下的快照備份軟體—rsnapshot -中央研究院顏景喆
Rsnapshot︰一款面向Linux遠程檔案系統備份工具 -趣讀***
Ubuntu下使用rsnapshot做遠程備份 -問問題

第一步安裝沒有問題：
apt-get install rsnapshot
第二步調整設定檔：
/etc/rsnapshot.conf
出現Permission denied

參考
scp 总是显示 Permission denied [論壇 - 新手村] -ubuntu正體中文站
Linux 的檔案權限與目錄配置 -鳥哥的Linux私房菜
基礎系統設定與備份策略 -鳥哥的Linux私房菜

改成直接輸入：
vi /etc/rsnapshot.conf
就可以了，所以開始學 vi編輯器：
vim 程式編輯器 -鳥哥的Linux私房菜
改完之後 :wq

花了好大功夫終於

但在輸入伺服器名稱那邊沒有成功，
暫時先註解掉了，也看不懂教學網站寫的意思，

備份遠程目錄如果你想備份遠程服務器目錄，那麼你要告訴rsnapshot服務器在哪里、你又想備份哪些目錄。我在這里要備份rsnapshot服務器上”/data/backup”目錄下的遠程服務器”/home”目錄。 backup root@example.com:/home/ /data/backup/

編輯重點！參數檔只認tabs不認space！改好久、頭好痛
先做完第五步驟，明日繼續。

第六步驟要讓過程自動化，教學文提到：

默認情況下，rsnapshot在”/etc/cron.d/rsnapshot”下隨帶cron檔案；要是這個檔案不存在，就建立一個，然後將下面幾行添加到該檔案。

進入/etc/cron.d/ 之後，鍵入ls看到rsnapshot卻進不去了，why

嘗試使用 vi /etc/cron.d/rsnapshot/cron
進入編輯模式，但是編輯完要寫入離開 :wq!

嗯...
後來參考
rsnapshot 安裝與使用方式 -蔡宗融個人網站
去/etc/crontab 寫入，在/etc/下鍵入
vi crontab
進入編輯畫面，加入成：

:wq 可順利寫入離開

最後步驟，將報告傳入指定電郵，但找不到perl檔，
自動化都設定完了(雖然不知道有沒有成功)，沒有設定報告傳送應是不影響主要功能，
就先不設定了。

2018年3月13日星期二

[網站架設]支援Rails的主機 & 網域推薦及SSL教學

網站架設入門必備觀念介紹01 網域與主機 -YouTube優易教學網 (6:56 DNS，13:05 VPS與其他主機)，作者連結有許多VPS架設相關影片：
VPS環境架設安裝EasyEngine -ubuntu環境
VPS主機架設(ubuntu)與安裝WordPress 環境設定篇五之一
cPanel檔案管理員介面介紹

從完全不理解主機租用差異到現在摸到皮毛，
上網找查及問朋友才知道要看後端語言對應租用哪些主機，
支援Rails 只有 VPS 主機，
VPS 又比一般租虛擬主機貴些，尤其台灣主機商更是昂貴，
選擇台灣主機商大部分是因為中文客服，現在越來越多國外主機商有中文客服了。

以下推薦有中文客服的糖果主機 sugarhosts，客服回覆也快，
糖果主機推薦文：
不是CP值最高的虛擬主機Sugarhosts糖果主機 -Yoube
Sugarhosts 虛擬主機的速度、優缺點、評價與購買教學！ (非 VPS評價)

其他適合架 Ruby on Rails的主機：
適合架Ruby on Rails的國外虛擬主機商 -無良心筆記
Launch RoR App on HostGator -無良心筆記

自架 WordPress 虛擬主機租用教學，將網誌備份匯出、匯入到新家 -freegroup

網域部分，在租用主機時通常會以優惠價或免費贈送網域，
但這是只是第一年的網域，續年度的續約價格通常會昂貴許多，
以下是推薦的網域代理：
GoDaddy 有中文介面，購買前記得google coupon
【WordPress百寶箱1】申請 Godaddy 網址，專屬自己的網域門牌 -香腸炒魷魚

SSL，提高安全性，讓網站被瀏覽器信任，
也可以在買網域或主機的時候注意看能不能附加：
到哪裡買最便宜的SSL證書呢？ -Yoube
如何在虛擬主機的cPanel上輸入CSR的內容並啟用SSL服務 -工作熊
網站資安升級，如何為你的網站加上 SSL 綠色鎖頭 -北方羽林
https://www.ssls.com/ -很多等級的SSL可以挑選
購買SSL憑證，並將SSL憑證安裝到cPanel中 -梅問題教學網

將網址自動轉向 https:
節錄自如何將網址從http轉為https ?! -遠振資訊

在網頁目錄 public_html下 .htaccess檔案，編輯內容為：

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

或是

RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [L,R]

2018年3月10日星期六

[Ruby]Carrier Wave 來一份上傳圖片要切

老闆來一份上傳圖片要切

預覽圖片、上傳之前裁切、一次上傳多圖、拖曳上傳

2018年3月9日星期五

[HTML]設下載按鈕、自定義音頻播放器 & 遷入PDF文件、影音檔案語法

強制超連結下載檔案-碼人日誌使用 <a>的方式
簡中w3school的說明 <a>

Stack Overflow 的其他做法 form、button、iframe、純html、搭jQ、搭JS... 的方法都有

網頁嵌入PDF、影音、聲音、Flash、youtube的Html語法運用專案用到video、pdf，超級重要！
https://stackoverflow.com/questions/31956221/how-to-disable-auto-play-for-local-video-in-iframe 解決影片檔自動撥放
HTML5的Video標籤(3) -iT邦幫忙 iamya 標籤屬性、控制器是否顯示
https://stackoverflow.com/questions/15080222/add-click-event-to-iframe iframe click沒有作用該怎麼辦

創建一個自定義HTML5音頻播放器 webdesign.tutsplus.com

[Ruby]見龍大師的鐵人邦，變數、控制流程篇

內文都是重點整理，且白話

https://ithelp.ithome.com.tw/articles/10186891?sc=iThomeR

[Ruby]路徑，不使用helper的情況下 & 實戰聖經 Action View Helpers介紹、處理圖檔

執行rails s 後，會導向預設歡迎畫面，並非我們預期的 index，
要去 config/routes 編輯加入
root "(table_name)s#index"

(rails建立app的第一步，參考: https://ihower.tw/rails/firststep.html)

導回首頁使用 <a>而非helper (方便的 link_to root_path)，
要設定 href="/"或"/(table_name)s"，值設成 ""或 "#"的話只會刷新後停留在當前頁面。
例:
table_name = product
首頁導為 localhost:3000/products
設定為 href="/"或"/products"。
若設定為 href="products"
在其他頁面點擊後會變成導向 localhost:3000/products/products

已在 controller設定好 action，不使用link to helper 要前往第n筆資料的情況：
href="/products/<%= product.id %>"
注意！".id"不可省略！

(參考: 在Rails中使用Path或是Url的時機)

Ruby on Rails 實戰聖經 Action View - Helpers 方法
Ruby on Rails 實戰聖經如何處理 image 圖檔

2018年3月8日星期四

[CSS]學習CSS網站，關於position屬性 & 30個須記住的選擇器

一個由保哥翻譯的學習CSS網站
關於position屬性

30個你必須記住的CSS選擇器

[JS]ES6網站資源及Emmet

ECMAScript 6 入门作者：阮一峰
從ES6開始的JS學習生活
專為中學生寫的JS程式書

Emmet Documentation

[網站架設]附加服務選購：SSL

遇到廠商疑問，是否購買附加服務

不懂SSL重要性，被告知是 http -> https，
得知是安全性問題，便查了而知：

擁有「有效」SSL憑證的伺服器值得信任，和這類伺服器做SSL加密連線在內容資安上才有保障。

( 來源 https://www.evo-mailserver.com.tw/support/ssl_certificate.php )

表示有公信力、被側錄也有保護資訊成為亂碼，若無會出現不信任網站的畫面，
致瀏覽意願大幅降低。

參考 SSL數位憑證，我最不想見到的畫面

2018年3月1日星期四

[CSS]下拉式選單做法參考 & 用 hover使版型更好看

滑動即出現，滑出即消失，有第二層選單
https://www.astralweb.com.tw/pure-css-drop-down-menu/
https://www.minwt.com/webdesign-dev/css/831.html

點擊後出現，滑出不消失，含JS的寫法
http://tech.mozilla.com.tw/posts/642/%E6%B2%92%E6%83%B3%E5%88%B0css%E4%B9%9F%E5%81%9A%E7%9A%84%E5%88%B0%EF%BC%9F%EF%BC%81

點擊後出現，滑出即消失，純CSS寫法
http://audi.tw/Blog/CSS/css.click.asp

hover 以相簿、畫廊為例
http://www.dribs-drabs.com/blog/post/321563384-%E6%95%99%E5%AD%B8-%7C-css-%E7%B6%B2%E9%A0%81%E4%BA%92%E5%8B%95%E7%9A%84%E5%A5%BD%E5%B9%AB%E6%89%8B---hover%E7%9A%84%E6%87%89%E7%94%A8

2018年2月3日星期六

[Ruby]《Growing Rails Applications in Practice》書目重點整理

https://5xruby.tw/posts/Growing-Rails-Applications-in-Practice

2018年1月25日星期四

[Git]About 'git reset'

在 commit 時不小心多夾帶 (add) 一個檔案，

試著以

查節點代碼
git reset 節點代碼

來取消 commit

但並沒有成功，不知道問題出在哪？

後來參考此篇：

Git 版本控制：利用 git reset 恢復檔案、暫存狀態、commit 訊息

問題暫時解決，也是解決的不明不白，晚些時候再看一次。

Git 版本控制系統(3) 還沒 push 前可以做的事
30 天精通 Git 版本控管 (23)：修正 commit 過的版本歷史紀錄 Part 5 -保哥 iT 邦幫忙

2018年1月20日星期六

[Ruby]Alpha camp 半年記事、Git pull、VS code Exrension

Alpha camp 課程自2017.09月底開始，
使用Ruby ＆ Rails on Ruby，
因此也開始學會使用 Ubuntu on Windows system，
用的是 Oracle 的虛擬主機。

2018.01月中換筆電。
不經一事，不長一事：

一臺筆電帶著四處跑，不會遇到需要換電腦的情況，
這才更加瞭解 git github 在不同電腦間的轉換使用，
用 clone 指令
https://kingofamani.gitbooks.io/git-teach/content/chapter_5/github.html
https://zlargon.gitbooks.io/git-tutorial/content/remote/clone.html
保哥 git 學習筆記

不同電腦 Ruby app 該如何處置：
$ gem install bundler
$ bundle install
$ rails db:migrate
$ rails dev:rakename

遇到 gem install error

If you're on Ubuntu, most likely you're missing a hidden dependency
```
sudo apt-get install libpq-dev
```
https://stackoverflow.com/questions/30162572/error-message-make-sure-that-gem-install-pg-v-0-18-1-succeeds-before-bundl?answertab=votes#tab-top

開發時 VS code 擴充套件和 setting code
VSCode - 各種好用的擴充套件(Extension)介紹 -sqz777 der 技術小本本
VS Code 使用erb類型檔案時，Emmet快捷打html標籤跳不出來 -22'mm
VS Code 中自訂程式碼片段的功能（snippet） -PJCHENder
VS Code Ruby 插件 -GregYang
VS Code Ruby debug -Zneu Ray
Ruby on Rails With VS Code -Paul
Rubocop autoformat
如何在不同的電腦上同步 VS Code 的設定？ -Ryan Hsu Medium
VS Code Extensions for Happier JavaScript Coding
偏好的 Visual Studio Code 設定檔 POY CHANG
prettier - vscode 套件 Leo Lin

https://code.visualstudio.com/docs/getstarted/tips-and-tricks#vscode 官方提供的使用技巧

考慮將來使用 Hexo 寫文
https://hexo.io/zh-tw/

一鍵部署

您只需要一個指令就能把網站部署到 GitHub Pages, Heroku 或其他網站。

參考網址
從 Blogger 搬家到 Hexo
https://rickhw.github.io/2015/01/15/Hexo/Hello-Hexo/
Migrate to Hexo
[Hexo] 快速上手 Hexo 網誌框架
Hexo + GitHub 搭建个人博客及反思
http://motion-express.com/blog/20141109-why-do-i-use-hexo
From Hexo to Rails

訂閱：文章 (Atom)

2018年12月11日 星期二

2018年11月28日 星期三

2018年11月4日 星期日

2018年11月1日 星期四

2018年10月12日 星期五

2018年10月6日 星期六

2018年10月3日 星期三

2018年9月15日 星期六

2018年9月13日 星期四

2018年7月28日 星期六

2018年7月27日 星期五

2018年7月18日 星期三

2018年6月6日 星期三

2018年6月5日 星期二

2018年6月1日 星期五

2018年5月31日 星期四

2018年5月30日 星期三

2018年5月29日 星期二

2018年5月28日 星期一

2018年5月21日 星期一

2018年5月10日 星期四

2018年5月2日 星期三

2018年5月1日 星期二

2018年4月29日 星期日

2018年4月23日 星期一

2018年4月14日 星期六

2018年4月10日 星期二

2018年4月2日 星期一

2018年3月30日 星期五

2018年3月29日 星期四

2018年3月28日 星期三

2018年3月17日 星期六

2018年3月15日 星期四

2018年3月13日 星期二

2018年3月10日 星期六

2018年3月9日 星期五

2018年3月8日 星期四

2018年3月1日 星期四

2018年2月3日 星期六

2018年1月25日 星期四

2018年1月20日 星期六

一鍵部署

2018年12月11日星期二

2018年11月28日星期三

2018年11月4日星期日

2018年11月1日星期四

2018年10月12日星期五

2018年10月6日星期六

2018年10月3日星期三

2018年9月15日星期六

2018年9月13日星期四

2018年7月28日星期六