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

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 圖檔