Clik here to view.
利用隱藏的 Iframe 跨域傳送訊息實作﹍postMessage
最近處理的案子需要在 A 網域登入後，同時在 B 網域一樣能保持登入的狀態。這就像登入 Google 一次後，旗下的各種服務例如 Gmail、Google Drive 等等，就算不同網域也不需要再重新登入。實作的方式可以將登入資訊儲存在 HTML5 的 localStorage (就像以往的 cookie)，在跨域的狀態下利用隱藏的 Iframe 來傳送請求，來取得另一網域的...
View ArticleClik here to view.
Blogger 自訂網址出現 404 錯誤﹍事件紀錄及處理方法
前兩天開始，Blogger 使用自訂網址的網站，開始會間歇出現 404 錯誤連不上。出現這個狀況的原因很複雜，最後經由「FB 社團」大家的討論，總算釐出一些頭緒。同時回顧這個事件，也可當成一個很好的借鏡與教材，因此整理成這篇心得留存。(圖片出處: 699pic.com)一、事件的開始1. 瀏覽器問題前天早上用 Chrome 打開自己的網站 WFU BLOG 時，突然發現變成 404...
View ArticleClik here to view.
網頁最強的文字編輯器 CKEditor﹍安裝使用心得整理
當初為了架設「Blogger 中文論壇」，如何讓使用者發佈文章時，能有個「所見即所得」(WYSIWYG)的文字編輯器，是滿棘手的一件事。總不能隨便做個 Textarea，讓使用者輸入純文字吧！因為有太多種情境需要考慮，發佈文章可能會有這些需求：插入程式碼引用文字插入圖片再加上一些基本的需求，如粗體、斜體、上色等等，沒有安裝一套文字編輯器是不行的。還好已經有不少免費外掛，本篇要介紹的 CKEditor...
View ArticleClik here to view.
Clik here to view.
利用 Chrome 對 iOS 裝置進行除錯(iPhone、iPad)的絕佳方案
前端開發非常頭痛的是，除了跨瀏覽器的問題，各種行動裝置的效果也可能不一樣。其中最麻煩的，算是針對蘋果 iOS 裝置進行偵錯 debug。資本夠粗的話最好，各種蘋果筆電、平板、手機都買上一台。但 iPhone、iPad 的問題是，就算硬體有了，debug 流程也沒有 Windows 系統來得方便。在網路爬了很多資料，本篇整理一個相對方便的流程，可在 Windows 下連接 iOS 設備，用...
View ArticleClik here to view.
讓 Kindle DX 起死回生﹍更換電池(淘寶艱辛紀實)
去年 Kindle DX 壽終正寢後，改買 Kindle 8 作為替代品，操作上比較方便(觸控)、反應速度又快，可參考「電子書閱讀器 Kindle 8 購買及使用心得」。前陣子在 HBO 看到「The Wire」，開始想追完這部經典美劇，同時練習英文。以前的作法是把字幕檔複製到 Kindle DX 上看，這次也試著複製到 Kindle 8。結果讓我滿訝異的，K8 的檔案管理功能覺得很不順暢，把 PC...
View ArticleClik here to view.
Iframe 跨域傳值在 iOS 失效的解法﹍利用網址 + localStorage + cookie 並用
上一篇「利用隱藏的 Iframe 跨域傳送訊息實作」，很可惜在前端開發人員的大魔王(iOS)面前又失效了，在 iPhone 鬼打牆了很久才瞭解：iOS 禁止 localStorage 跨域傳值iOS 的 Safari 設定中，預設關閉 cookieiOS 的 Chrome 跟一般 Chrome 不太一樣，封鎖了跨域的 localStorage...
View ArticleClik here to view.
部落格從搜尋引擎而來的流量，是不會有感情的﹍找回經營網站的動力
近期製作網站需要大量使用 Bootstrap，因此寫了不少「Bootstrap 相關文章」，其中這篇「Bootstrap 3 & 4 速查表」，曾介紹 kkbruce.tw 製作的繁中版說明書。有次搜尋相關資料時，又跳到了 kkbruce.tw，可見這個網站吃下了多數 Bootstrap...
View ArticleClik here to view.
電子墨水 (E-ink) 護眼顯示器 Paperlike Pro﹍(1) 入手及開箱心得
為了解決眼睛長時間看螢幕會不舒服的問題，十多年來一直關注「非背光」螢幕顯示器的發展，以及各種解決方案。除了買過各種廠牌、尺寸的「電子墨水 Eink 產品」，去年也買過淘寶賣家自行改裝的「10吋 富士通反射屏」黑白顯示器。前兩年也關注過「大上科技」的電子墨水顯示器...
View ArticleClik here to view.
滑動開關切換按鈕﹍CSS 語法產生器
最簡單的切換選項效果，是使用 Input 元素的 radio 型態，也就是單選(非複選)的效果，長得像這樣：之前接到一個需求，希望切換效果做得有質感，像是蘋果系統的切換按鈕，例如下面的範例：原以為這樣的效果，需要用 JS 才能做出來，沒想到純 CSS 就能有很棒的效果，請見本篇的介紹。一、Proto.ioProto.io 是一個收費的網頁服務，不過也提供了一些免費的小工具，其中這個是本篇要介紹的...
View ArticleClik here to view.
從小編到總編之路﹍如何成為部落客中的佼佼者
前陣子這篇「部落格從搜尋引擎而來的流量，是不會有感情的﹍找回經營網站的動力」寫完後，有位美食部落格客戶，同時也算本站長期讀者，問了一些 SEO 問題。其實滿訝異的，既然是忠實讀者，想必知道我希望讀者將注意力放在 SEO 以外的地方。瞭解她詢問的原因後，覺得這段對話可以看到一些普遍性的現象，並非只是個案，值得探究哪些站長會特別關注...
View ArticleClik here to view.
Blogger 網址買了很後悔，可以再搬到新網址嗎？
前幾天有讀者表示，網址已經買了很多年，最近快要到期，想要換個新的網址，但又怕原來的網站連結就失效了，詢問我可不可以搬到新網址。她的文章有 1500...
View ArticleClik here to view.
免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用
之前這篇「利用 Chrome 對 iOS 裝置進行除錯」可以讓開發人員很方便地對 iPhone、iPad 等裝置進行偵錯，不過並非所有前端開發者都有辦法買齊各種昂貴的蘋果裝置來測試，因此本篇將會介紹一個比較省錢的解決方案。雖然不用花錢，不過必須花時間跑模擬器，電腦的 CPU 要夠強，記憶體要夠多，否則模擬器會很卡。MacOS 官方提供了一個強大的開發工具 Xcode，可以很正確地模擬...
View ArticleClik here to view.
部落格載入速度太慢，要如何判斷哪些外掛可以移除？
重視 SEO 的站長自然都會關注網頁的載入速度，因為這也是 Google 的排名評分項目之一。過去寫過一系列「網站效能」的相關文章，有興趣的站長可以瞭解不同的主題要如何處理。由於提升「網頁載入速度」的詢問度一直很高，以往就算請讀者看這些相關文章，一段時間後還是可能回頭問一樣的問題，因此本篇決定整理出比較簡單、清楚的判斷流程，讓站長們可以自行健檢，決定哪些會拖慢網站速度的外掛需要移除。(圖片出處:...
View ArticleClik here to view.
輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛
最近的案子處理行動版的表格效果時，發現以前的「Blogger 插入表格最佳流程 + 自適應寬度」，這個方式若用在商業網站，將沒有任何質感可言，甚至可以用簡陋來形容。於是找了一下自適應 RWD 表格有沒有比較美觀，而且又簡便的處理方式。有發現幾個功能強大的外掛，但操作稍嫌複雜。本篇要介紹的方案，比較能夠無腦套用，且現成的樣式、配色就很美觀，不用另外修改或研究 CSS 語法。點此看範例網頁一、RWD...
View ArticleClik here to view.
究竟 Blogger 會不會關閉？從 Google 商業經營的角度分析
Blogger 會不會倒閉，是使用者長期以來的擔憂。過去曾在「Blogger 的未來」發表過看法，不過曾有讀者看完，一段時間後仍提出相同的問題。我想，這件事除非有官方說詞，否則疑問不會有停止的一天。然而，Google 官方有可能發佈這樣的聲明嗎？我想不會的，連 Yahoo 這樣等級的網路龍頭都會因經營不善而被裁併，就算是 Facebook...
View ArticleClik here to view.
Blogger 官方免費幫自訂網址升級 HTTPS！ 設定處理流程注意事項整理
這真的是最好的新年禮物了，過年前夕在「FB 社團」 +Vista Cheng 分享了「Blogger站長看過來：自訂網域的網誌，也可以支援HTTPS囉」 ，原來官方悄悄開始測試，可以讓自訂網域直接升級 HTTPS，這代表：不用付錢，Blogger 免費提供我們網站 SSL 憑證瀏覽器網址可以直接出現綠色鎖頭圖示，有助於 SEO 排名不必再倚賴第三方伺服器，例如...
View ArticleClik here to view.
自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛
雖然時間軸的效果看過不少網頁使用，不過倒是很少看到部落格站長放在文章內。這次接到的需求是，案主希望將單車行旅的圖文經歷，版面用時間軸效果串起來。於是研究了相關的外掛，同時也要顧及手機的 RWD 效果，請見本篇的心得整理。點此看範例網頁(圖片出處: eeyellow-Timeline)一、時間軸外掛以下這個頁面可看到各式各樣的時間軸效果：Free jQuery Timeline...
View ArticleClik here to view.
Blogger 維護/架站 是否需要加工程師為管理員？只跟信任的對象合作是很重要的
如果找本站進行 Blogger 架站，因為是比較大的工程，到後台進行作業是必須的，那麼必定要加 WFU...
View ArticleClik here to view.
部落格使用「結構化資料」的最佳作法 JSON-LD﹍提供「文章」型態的範例程式碼
過去曾寫過一篇「部落格如何處理結構化資料標記 + 修復錯誤訊息」，主要是因為鑽研 SEO 的站長，使用了 HTML 微資料(Microdata)語意標記後，拿「結構化資料測試工具」檢測總是會看到一堆錯誤。該篇文章我也說了，部落格網站不理會結構化資料也沒什麼差，因為 Google...
View Article