前端 JS 如何避免 callback 地獄?Fetch API 及 Promie 使用技巧

由於早期 Javascript 設計上的缺陷,一方面使用 Ajax 送出 http 請求時,舊時代的 API 異常繁複,非得使用 JS 框架操作 Ajax 才比較方便,例如 jQuery。 一方面 Ajax 是非同步(Asynchronous)執行緒,會造成前端工作一些麻煩,例...

繼續閱讀全文

如何讓新版 Blogger 按 Enter 能建立換行符號

Blogger 推出新版後台介面後,原本我一直是手動切回舊版來操作,以規避新版介面產生的各種問題。但是前幾天官方已消滅了舊版後台,也就是強制一律只能使用新版介面,這下真的沒輒只能硬著頭皮使用。 其實這段期間以來,新版很多問題都已反應給官方,有些是有改進,但官方沒有動作的部分想必...

繼續閱讀全文

檢舉侵權抄襲的 APP 使其下架(連同 Adsense)﹍流程實錄

約一年前由本站研發及架設的網頁服務「 線上看電視 」,推出後迴響不錯,累積了一批數量不小的忠實觀眾。 而手機版的網頁,覺得介面、效果還算堪用,暫時尚未研發 APP 版本,不過偶爾也會觀摩一下同性質的 APP,看看別的開發者如何設計,有無優點可學習、或缺點可改進。 在今年五...

繼續閱讀全文

2020 Lazy Load 延遲載入圖片原理及實作分析研究

前陣子接到一個需求,客戶網站做完「PageSpeed Insights」檢測後分數很低,於是尋求協助。對客戶網站進行健檢後提供一份報告與建議,客戶詢問「延遲載入畫面外圖片」的部分如何改善。 這個項目「PageSpeed Insights」本身提供了不少參考資料,不過研究後才發...

繼續閱讀全文

前端使用 JS 裁切圖片並壓縮再存到後端﹍Croppie 實作範例

最近接到一個需求,希望使用者上傳圖片時,可先在前端進行裁切,以免存到後端的圖片尺寸比例不對,也可避免檔案過大。 之前寫過一篇「 前端如何使用 JS 先壓縮圖片尺寸大小再進行上傳 」,其實也能處理前述大部分需求,但稍有不足之處: 只能對上傳的圖片等比例縮小 不能防止 使用...

繼續閱讀全文

自然輸入法購買使用心得及許氏鍵盤替代方案

最近買了新的 Win10 筆電,將原本 Win10 筆電的自然輸入法解安裝後,在新筆電重新安裝(我買的是單機版、非多機版)。沒想到使用原版光碟、序號安裝後,卻變成只有試用版的功效,設定畫面許多選項都是反白、無法變更的狀態,我最需要的「許氏鍵盤」被封鎖了。 習慣許氏鍵盤後,一般...

繼續閱讀全文

Adsense 出現惡意蓋版廣告事件紀實

前陣子接獲報案,表示網站出現蓋版廣告,找不到排除的方法,因而尋求協助。 原本猜想到 Adsense 後台改一下設定、調整一下安裝碼就好,結果處理後才發現事情不單純,因此特別整理一篇做為記錄。

繼續閱讀全文

Javascript 字串加密解密範例研究

最近需要用 JS 保存一些,不想被很容易就判讀出來的資料,因此研究了一下 JS 如何對字串進行加密及解密。 結果搜尋發現網路上這方面的實用工具不多,原因大致是: JS 是攤在陽光下的語言,加密解密流程會被看到 因此很少純前端進行加密與解密,大多是配合後端進行運算,一邊加...

繼續閱讀全文

利用 Instagram 基本顯示 API 取得圖片

IG 原本很方便就能存取圖片,做成各種小工具在網站展示,例如「 在部落格側邊欄安裝 Instagram 小工具,顯示九宮格圖片 」。 不過 IG 被 FB 收購後,於日前宣布舊的 IG API 於 2020 年 6 月 30 日失效,請參考「 IG 官網公告 」。此公告並說明...

繼續閱讀全文

Blogger 2020 後台介面及功能變革整理

接續上一篇「 2020 Blogger 新版文章編輯器使用心得 」,本篇繼續整理 Blogger 後台新介面的功能有什麼變化。 Blogger 新後台的 UI 設計接續 Google 一貫的 Material Design 風格,也可說 Blogger 的外觀看起來將越來越像...

繼續閱讀全文

2020 Blogger 新版文章編輯器使用心得

Blogger 後台改版後,FB 社團不少人反應新版的文章編輯器不好用,例如「 Html換行一定要用br嗎 」、「 不喜歡這種莫名其妙的改版 」。 持平而論,新版有增加不少以前沒有的功能,但也閹割了一些非常核心的功能。權衡得失後,新功能對我而言加分有限,但失去的功能讓我寫文章...

繼續閱讀全文

Blogger 使用錨點的操作方式(新版文章編輯器)

如果不熟悉 HTML 語法的話,要製作出錨點效果不太容易。Blogger 新版文章編輯器增加了不少功能,其中「錨點」算是非常實用的一個,就算不懂語法也能實現這個效果。 本篇會說明錨點的原理,以及如何在新版文章編輯器做出錨點。 (圖片出處: hippopx.com )

繼續閱讀全文

JavaScript 四合一工具:壓縮+加密+混淆+美化

前一篇介紹了「 Javascript 壓縮、混淆、加密、解密工具及原理 」,也說明了 JS 加密混淆不容易被破解的處理流程,此流程需要開啟三個線上工具的網頁來進行。 重複三次「等待編碼、複製、貼上」的時間不算長,但工程師思維就是會想辦法簡化所有重複流程,我長久以來一直想做個前...

繼續閱讀全文

Javascript 壓縮、混淆、加密、解密工具及原理

網頁前端的程式語言 Javascript,由於攤在陽光下誰都看得到,不如後端來得安全。因此除了機密性的程式碼別放前端,最好網頁上的 JS 也需要經過處理,除了降低可讀性,也可避免被盜用。 常見的處理方式有壓縮、加密、混淆等等,如果做得太簡化,使用某些破解工具就能還原。因此本篇...

繼續閱讀全文

被 FB 封鎖網址的徹底解決方法,以及申訴、聯絡管道

前陣子在「 FB 社團 」有不少站長表示,自己的網站被 Facebook 封鎖,除了完全無法貼網址,更嚴重的是,有網站連結的所有貼文也被 FB 刪光光。 這實在滿扯的,因為 FB 除了封鎖網址、大量刪除貼文,連我收錄為 FB 社團「學習單元」的文章也遭池魚之殃(一同被刪了),...

繼續閱讀全文

一文多發的重複內容可能會被 Google 移除索引

前陣子接到一個來自痞客邦的需求: 去年寫的文章之前搜尋明明有看到 甚至在前幾名 最近搜尋卻不見了 使用sitemap查詢文章網址 出現的是"網址不在屬性中" 這類搜尋不到文章的狀況,無論是在「 FB 社團 」或是向我求救都十分常見,我也寫過許多文章解決搜...

繼續閱讀全文

處理網頁大量表格神器,搜尋、翻頁都沒問題﹍jQuery DataTabels

最近接到一個需求,案主的網頁整理了大量的表格(Table)資料,例如提供訪客比較大量餐廳的價格、特色、聯絡資訊等等,表格資料多的時候可能將近上百筆,訪客找起資料來螢幕可能會捲到頭昏眼花。 案主希望有簡便的表格搜尋、篩選功能,同時最好表格還能分頁切換,如此不必額外的螢幕捲動,一...

繼續閱讀全文

舊版 Instagram API 於2020年3月底失效,請更新 IG 九宮格圖片外掛

去年寫過「 部落格側邊欄 Instagram 九宮格圖片 」外掛,不過最近協助安裝 IG 圖片外掛時,發現原本提供免費取得 access token(存取權杖)的線上服務「 Pixel Union 發佈了一則聲明 」,中文意思大概是這樣: 2020 年 3 月 31 日之後...

繼續閱讀全文

使用 Safari 可能無法在 Blogger 網站留言﹍聊聊 cookie

幾個月前「 Blogger 社團 」有成員反應表示她的 Blogger 網站無法留言,這現象看起來挺離奇,因此花了一些時間辦案。 雖然最終水落石出,但對於結果感覺不是很舒服,因為這是「蘋果 MAC」體系的一個難解現象。 早期前端開發人員、站長們對於 IE 的網頁相容性很頭痛,...

繼續閱讀全文

如何從 Google Analytics 站內搜尋數據瞭解訪客需求?

網站經營的風格與內容走向,通常取決於網站主題或站長意願,例如 WFU BLOG 主要是記錄筆記心得的部落格,沒有追求流量,那麼內容寫什麼、不寫什麼,或是多久更新,不太會被某些數據所左右。 不過做了「 線上看電視 」之後,由於這是個極度民生導向的平台,必須時時刻刻瞭解觀眾喜好,...

繼續閱讀全文

Google 搜尋結果無法出現麵包屑的原因研究

過去在「 輕鬆讓 Blogger 搜尋結果出現麵包屑導航 」提供了安裝程式碼,基本上只要在「 Google 結構化資料測試工具 」沒有錯誤,那麼在搜尋結果出現麵包屑導航關鍵字沒什麼問題。 不過最近出現一個案例,安裝了程式碼後,只有少部分文章可以在搜尋結果顯示麵包屑,大部分文章...

繼續閱讀全文

查詢網站熱門關鍵字的管道有哪些?

熱門關鍵字就像訪客身上掉落的麵包屑,不經意透露了行徑的路線與意圖。如果想知道自己網站如何吸引客人拜訪、又去了哪裡,記得不定時到門口看看地上痕跡,找找有哪些麵包屑。 Google Analytics(簡稱 GA) 是記錄這些物證的最佳工具,不過近年來能夠調閱的資料越來越少。沒了...

繼續閱讀全文
TOP