今天在解一個已停用 TLS 1.0 加密通訊協定問題時, 發現舊的 web server 上的 php curl 無法正常連線, 在 command line 下使用 curl https://xxx.xxx 時, 也會出現:
curl: (35) TCP connection reset by peer
研判為 curl 的原因造成, 由於需要使用 php 中的 curl_xxxx 系列指令與其他 server 的 api 溝通, 所以必須更新對應的模組來解決, 指令如下:
yum update nss curl openssl
更新完成後, 重起 apache 即完成正常呼叫其他 server api 停用 TLS1.0 的加密通訊協議問題.
參考資料:
https://stackoverflow.com/questions/30145089/tls-1-2-not-working-in-curl
這張梗圖很有趣:
(source: https://www.facebook.com/bitmovin/photos/a.454938237852624/1884408724905561/)
但利用 javascript 如何實作呢? 是個實用的小題目, 來看看程式吧:
html:
<h2>720p</h2>
<div class="result"></div>
<h2>1080p</h2>
<div class="result"></div>
<h2>1080i</h2>
<div class="result"></div>
<h2>4k</h2>
<div class="result"></div>
javascript:
var els = document.getElementsByClassName("result");
for (var i = 0; i < els.length; i++) {
var arr = els[i].previousElementSibling.innerHTML.match(/(\d+)(\w+)/i);
els[i].innerHTML = arr[2].repeat(arr[1]);
}
這個網站提供了線上執行 SQLite 的功能, 對於初學者, 或想要了解 SQL 語法的人有很大的幫助.
除了可以學習 SQLite 功能外, 其實在一般的應用, 有時想要快速的建立幾個簡單的 table 與輸入一些資料後存出來, 使用這個網站也能很快速容易地達成, 舉例來說, 建立一個 table:
CREATE TABLE t_product (f_id INTEGER PRIMARY KEY, f_name VARCHAR, f_cat VARCHAR, f_desc VARCHAR)
輸入一些資料:
INSERT INTO t_product VALUES (1, ‘哈利波特’, ‘書’, ‘有趣的魔法故事書’),
(2, ‘波西傑克森’, ‘書’, ‘半神半人的希臘混血人故事’),
(3, ‘充電線’, ‘3c’, ‘usb 充電線’),
(4, ‘iphone x’, ‘3c’, ‘apple最新手機’)
進行查詢:
select * from t_product WHERE f_cat = ‘3c’
或
select f_cat, Count(*) from t_product group by f_cat
而且可以方便地使用 link 分享, 上面的結果連結為:
https://sqliteonline.com/#fiddle-5aa25641295bd9gdjejr1mc0
另外也可以下載對應的 SQLite 資料檔, 真是太方便了呢.
若是希望使用應用程式來讀取, 可以使用 DB Browser for SQLite 這個軟體:
同時有 Windows 與 MAC 的版本可供使用.
[2020/8/11]
繼續學習更多: https://www.guru99.com/sqlite-tutorial.html
有時在做一些小型的前端介面, 需要 CMS (內容管理系統) 的上稿功能, 來進行內容管理, 不過實做上稿系統需要相當的時間與設計, 若能使用更簡便的方式, 將能大量節省維護的成本, 例如使用 WordPress 或今天要介紹的 Google Drive API.
使用共用文件的方式來管理內容, 除了介面不用再實做外, 也可以透過權限管理來做一些設限, 方便存取與更新. 這次介紹的 API 是讀取 Google Docuemnt 的內容來供應前端應用, 所以就是讓程式讀取內容, 而使用者則是使用 Google Document 來更新內容.
會使用到的 API 為 Google Drive API 中的 file export, 目前已是 v3 的版本了, 可以參考:
https://developers.google.com/drive/v3/reference/files/export
如何使用呢, 首先在 Google Drive 新增一個 Google文件(Document)檔案, 並開放為擁有連結的人都可以檢視, 並取得該檔案的 fileId, fileId 就是在 URL 上會看到或是 share link 上會看到的一串英數, 有區分大小寫, 如:
https://docs.google.com/document/d/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/edit?usp=sharing
其中的 18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA 即為 fileId.
接下來在 google developer console 新增一個專案, 啟用 Google Drive API 功能, 並建立 API key 即可透過以下 API 進行檔案內容存取:
https://www.googleapis.com/drive/v3/files/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/export?mimeType=text/plain&key=[your api key]
其中 fileId 即為該文檔的 fileId, 而 export 為讀取, 後面的 mimeType 可以有以下幾種:
(更多可以參考: https://developers.google.com/drive/v3/web/manage-downloads#downloading_google_documents)
而最後的 API key 則為在 Google Developer Console 專案內建立的 API Key, 就可以順利讀取內容, 以下則為一個簡單的範例:
http://sample.diary.tw/43/readdoc.php
程式碼如下:
$url = "https://www.googleapis.com/drive/v3/files/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/export?mimeType=text/plain&key=[your api key]"; $data = file_get_contents($url); echo $data;
如此一來可以方便使用者上稿又能快速更新到前台, 十分方便.
Quota 的部分如下:
每日 10億次, 每 100秒每使用者 1000次, 每 100秒 1萬次, 三個計算基礎以下為免費.
由於 MongoDB 是一種 schema-free 的資料庫, 使用 Document 為基礎的存放方式, 所以若是想要查找特定欄位是否存在的語法就很重要了, 先來看看官方的資料:
https://docs.mongodb.com/manual/reference/operator/query/exists/
語法是使用 $exists 的方式來判定特定欄位是否存在, 若要轉為 php 語法的話, 可以使用如下:
$cursor= $collection->find([ "field1" => [ '$exists' => false ] ]);
來列出在 collection 中 field1 不存在的資料, 這對於使用特定欄位做為處理資料或作業資料來說, 可以方便地判斷, 也不用預先開好欄位, 很方便實用的一個用法.
在前端使用 javascript 解析日期時間字串時, 在不同瀏覽器有不同的解讀, 我們來看一下:
2017-03-01T16:00:00
這個字串若是以 Firefox 與 IE 來解讀, 是 localtime, 若是以 Chrome 來解讀則是 GMT, 測試網址如下: https://jsfiddle.net/timhuang/8paLsfyr/2/
若是希望都是以 GMT 來解讀, 可以多加一個 Z 在字串的最後, 如: 2017-03-01T16:00:00Z 就會讓各瀏覽器取得一樣的 GMT 結果, 測試網址一下在上面.
所以若是在前端, 使用 javascript 處理日期時間字串時, 一定要理解與清楚這個狀況, 否則可能會有跨瀏覽器不一致的狀況.
參考資料: http://stackoverflow.com/questions/15109894/new-date-works-differently-in-chrome-and-firefox
線上的前端有好用的 jsfiddle (https://jsfiddle.net/), CodePen (http://codepen.io/), 今天發現了一個很棒的資料庫語法測試工具, SQL Fiddle, 網址如下:
這個好用的工具分為左右兩側, 分別是 DDL,DML 與 SQL 兩塊, 左側的 DDL, DML 可以直接定義資料表與資料內容, 當然, 還是用標準的資料庫語法. 右邊則是於 DDL, DML 執行之後, 才能使用的 SQL 語法查詢與測試用.
這樣不僅能快速定義資料表供應用外, 最重要的是可以測試 SQL 的查詢語法. 從左上角 Menu 可以看到支援的資料庫有:
MySQL 5.6
MySQL 5.5
Oracle 11g R2
PostgreSQL 9.3
SQLite (WebSQL)
SQLite (SQL.js)
MS SQL Server 2014
MS SQL Server 2008
8種不同資料庫與版本, 十分方便. 另外於 DDL/DML的部分, 也可以直接用上方 Text To DDL 進行設定, 更加方便, 讓不會使用 DDL/DML 的人員, 也能無痛建立資料表, 例如:
table name: t_staff,
data:
name, age, title
Mary, 25, manager
Charlie, 18, Clerk
Fiona, 19, Clerk
(第一列為欄位名, 之後為資料)
就會生出以下語法:
接下來, 就可以在右側進行查詢, 如:
select * from t_staff where age > 20
就可以查出對應的資料了, 十分方便, 尤其對於要查找資料時的不同資料庫語法間的應用, 都有很大的幫助. 另外已完成的結果, 還能快速分享, 對於查找問題, 有更多可以協同作業的可能, 上面的範例如下:
製作網站時, 前端的中文字體真的是很傷腦筋, 又沒有那麼多的選擇, 又需要考慮使用者端是否有對應的字型. Google Font 計畫提供了許多字型可供應用, 也有不少繁體字型可供應用.
先來看看有哪些吧:
https://fonts.google.com/earlyaccess
上面是目前所有新增的 Google Font 的字體(非英文與拉丁文為主的), 我們可以用 Chinese 來查看看有哪些:
楷體 cwtexkai
圓體 cwtexyen
仿宋體 cwtexfangsong
Noto Sans TC notosanstc
明體 cwtexming
黑體 cwtexhei
這6種字體可供應用, 使用方式也很簡單, 直接使用對應的 CSS 即可, 以楷體為例, 可以看到他的 CSS 引入語法如下:
@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);
之後只需要在對應的 class 下 font-family 語法即可, 如下:
font-family: 'cwTeXKai', serif;
為方便一次檢視所有字體, 可以參考範例資料:
從這裡看來的:
每位開發者都該看：如何在四十歲後還能繼續從事軟體開發？ http://www.inside.com.tw/2016/09/21/being-a-developer-after-40
的確開發者需要一定的熱忱維持才行(其實任何工作也是如此), 其實年齡一直都不是問題, 而是心態, 不過面對變化快速的技術, 開發者需要隨時把握時間來積極學習(哪個工作不是如此呢?), 面對這樣的挑戰.
找個自己喜愛的技術領域, 持續關注與學習, 多研究相關的應用領域, 另外教學相長也是很重要的, 參加讀書會或是 open source 聚會等, 都能讓自己保持活力與學習的心情, 這個也是一種持續進步的方法.
文章中提到的種種, 也都是很棒的建議方向, 大綱如下:
加油, 每一個你都是最棒的.
略縮語, 也就是… (這裡用三個點來表示, 但在 html 裡, 有特殊字元可用, 分別是水平用的 … 與垂直的 ⋮ 兩個特殊字元 (參考完整版本: https://dev.w3.org/html5/html-author/charref)
另外直排走文的部分可以使用 writing-mode 這個屬性來指定, 如 vertical-rl 與 vertical-lr, 一般中文若為直式走文, 應為從右至左, 所以是 vertical-rl.
不過有趣的是, 在原本的水平走文時, 使用 … 與 ⋮ 都可以正常顯示方向, 但在垂直走文時, 這兩個略縮語, 反而會造成相反的方向, 這點在使用上要特別注意, 或是反過來說, 只需要使用 … 即可, 走文方向控制會處理好這個略縮語的走向.
參考這個在 jsfiddler 的範例:
https://jsfiddle.net/timhuang/jxhhyxkz/2/
另外也請參考略縮語的 css 自動截字的語法: 網頁排版文字排不下的略語語法 https://diary.tw/archives/1292
writing-mode語法參考: http://ithelp.ithome.com.tw/articles/10139081