[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那些沒告訴你的小細節

[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分享

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

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

[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

[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 託管服務設定教學，網站載入加速、節省流量防止惡意攻擊 -免費資源網路社群