Browse by Tags

前端小筆記－Progressive Web App (PWA)

抓了開源專案 MiniBlog.Core 回來玩，想在其中套用 Form target 模擬 AJAX 表單傳送 技巧時踢到鐵板，開啟 F12 偵錯工具後驚呼：天吶，這世界又變了! 新時代的 Postback 不再是單純送出一個 Request 拿回 HTTP 200，而是像這樣子： 如上圖，表單送出行為被拆成三個動作，並出現關鍵字 ServiceWorker。 另外，我發現 js、css 也變成由 ServiceWorker 載入。 爬文得知原來是專案引用了 WebEssentials.AspNetCore...

Posted 18 August 2018 09:58 PM 由 Jeffrey | with no comments 11,092

Filed under: HTML5

使用 Headless Chrome 擷圖、轉存PDF、爬資料

Chrome 自 59 版起內建了 Headless 模式 ，允許透過命令列啟動 Chrome 以無 GUI 方式執行，具備與正常開啟完全相同的網頁渲染及 JavaScript 引擎，還可透過網路連線遙控。這個功能可以用於不少有趣應用，這裡列舉幾種實用情境。 註：Headless Chrome 的完整參數可參考 List of Chromium Command Line Switches « Peter Beverloo 網頁擷圖 將網頁存成圖檔或 PDF，過去我是用 PhantomJs 。Headless...

Posted 10 July 2018 11:24 PM 由 Jeffrey | 1 comment(s) 8,801

Filed under: Javascript, HTML5

Chrome 記憶密碼誤填欄位問題

同事報案，Chrome 會莫名把客戶帳號填入輸入與帳號無關的 <input type="text"> 欄位，初步研判是 Chrome 內建的帳號密碼記憶小工具 Google Smart Lock 搞鬼。 用以下網頁重現問題。如操作所示，在登入網頁 Logon.aspx 用 Google Smart Lock 記下密碼，登入後導向 Index.html，網頁上只有一個訂單編號，Chrome 卻自動自發填上使用者名稱。 原因在於 Index.html 中有個被 display...

Posted 23 May 2018 11:32 PM 由 Jeffrey | with no comments 4,499

Filed under: HTML5

HTML5 筆記 - 使用 SVG 取代 PNG/GIF 圖示

隨著主流瀏覽器支援度愈來愈好，在網頁裡用 SVG 取代 PNG、GIF 呈現圖示(Icon)及簡單圖案漸成趨勢，沒吃過豬肉也要看看豬走路，趕緊做點功課並整理筆記備忘。 網頁引用 SVG 有三種做法： Object: <embed src="…"> <object data="…"> <iframe src="…"> Inline: <svg>…</svg> Image: <img...

Posted 23 April 2018 07:01 AM 由 Jeffrey | with no comments 8,592

Filed under: HTML5

Coding4Fun-試聽 16 進位字串表示的 MP3 內容

鹹蝦專案(利用閒暇經營的 Side Project )遇到的需求，先前把 MP3 音效資料整進 SQL 資料表轉成 IMAGE 資料型別，查詢起來像這樣: 如果我想試聽這段聲音該怎麼辦? 網路上可以找到一些 T-SQL 範例 ，將 SQL 裡的二進位資料匯出成檔案。不過這樣子每次試聽的步驟有點麻煩: 用 SELECT 取得某一筆 IMAGE 內容 -> 以內容及檔名為參數呼叫 Stored Procedure -> 在檔案總管點選檔案試聽。 我心中理想的操作方式是: SELECT 選出數筆內容...

Posted 24 September 2017 05:08 PM 由 Jeffrey | with no comments 5,617

Filed under: Coding4Fun, HTML5

閒聊：不想走在「最前端」， WebForm 開發者也該學的技能

就用這篇鬼故事當開場吧！ 在 2016 年学 JavaScript 是一种什么样的体验？ 這幾年 HTML5 火紅，前端開發技術發展如黃河氾濫一發不可收拾，開發框架百家齊嗚，眼花瞭亂不知如何下手就算了，更要命的是市場主流每兩年就轉一次風向，兩年前我才含淚從 Knockout 轉到 Angular ，現在卻眼看 React.js 及 Vue.js 可能把 Angular 的接班人 Angular 2 幹掉 Orz。不只開發框架主流變來變去，連開發工具也整套換光光。還記得兩年前的這篇 Gulp, Grunt...

Posted 08 November 2016 09:39 PM 由 Jeffrey | 12 comment(s) 39,980

Filed under: ASP.NET MVC, HTML5, Kendo UI, knockoutjs, AngularJS

ASP網頁IE9相容拉皮筆記

整合清代ASP 的工作持續進行，上回提過用IFrame內嵌ASP網頁時，父網頁與IFrame必須為同樣的IE模式，若父網頁要採HTML5時代寫法，就得考量各程式庫的IE最低版本要求，例如：KendoUI為 IE8以上 、AngularJS 1.3+ 需要IE9 ，再加上XML Data Island最後的支援版本為IE9、VBScript只到IE10，算下來IE9是基本要求。 初試幾個老ASP網頁切到IE9大致可行，但要改的小地方挺多，這篇先整理從IE5拉到IE9標準遇到的幾個CSS問題。 我把狀況整理成一個問題大全...

Posted 07 June 2016 10:30 PM 由 Jeffrey | with no comments 5,127

Filed under: HTML5

IE11、XML Data Island與VBScript

前文 提到眼前的棘手任務是在HTML5網站整合活化石等級的ASP（是的，就是ASP！不是ASPX），其中一大挑戰是ASP網頁裡大量使用XML Data Island與VBScript，能不能與HTML5並存是未知數，心中最理想結果是以IFrame內嵌ASP，大草原上羚羊跟迅猛龍一起快樂奔跑，世界真美好～當然，最後證明這只是不切實際的幻想，真實上演的是迅猛龍趕羚羊咬羚羊的慘烈場景 orz 試著在HTML5 IFrame內嵌實際的ASP，陸續發生詭異錯誤，為讓測試單純化，我簡化成用一個parent.html加一個embedded...

Posted 27 May 2016 08:08 AM 由 Jeffrey | 2 comment(s) 8,712

Filed under: IE, HTML5

搞懂X-UA-Compatible IE相容設定

始終沒認真搞懂X-UA-Compatible IE=7跟IE=EmulateIE7有什麼不同，最近專案要步入「古今合壁」的偉大工程，把許多IE Only的活化石網頁跟HTML5網頁摻在一起做瀨尿牛丸，再不弄清楚恐會死得難看，於是查了文件做了實驗，筆記備忘。 MSDN文件 Defining document compatibility 所有IE包含三種文件模式： Standard Mode（標準模式） 努力支援最新HTLM5/CSS3/SVG等標準，但一如大家所知，不同版本IE支持程度不同 Quirks...

Posted 26 May 2016 06:37 AM 由 Jeffrey | 1 comment(s) 31,527

Filed under: IE, HTML5

克服入口網站內嵌其他網站之跨網站存取限制

文章標題有點饒舌難懂，直接說我需求就清楚了。我想在員工入口網站（例如：portal.utopia.com）加入人事、行政、會計、電子表單等現成網站功能，這些應用程式各有自己的網站（例如：webap.utopia.com），最簡單的整合方法是在入口網站放個Iframe將其他網站的網頁內嵌進來，兩分鐘搞定，用膝蓋就能完成。 BUT，人生最機X的就是這個BUT！ PM/老闆/使用者一定不會這麼簡單放過你，既然網頁已經整在一起，那麼切換樣式跟入口網站融為一體，審完表單入口網站的待審數字要減一，非常合情合理...

Posted 07 May 2016 03:00 PM 由 Jeffrey | 6 comment(s) 19,997

Filed under: Javascript, HTML5

Chrome的Button Click行為差異

同事報案網頁在IE與Chrome表現不同，依稀記得遇過，但沒寫成沒找到明確記錄，花了時間回想、研究、實驗，得到結論後才恍然憶起，從HipChat對談翻出以前的辦案記錄。明明是前科犯還重啟調查，記憶力壞掉好可怕，也懊悔浪費了時間。由此得一結論－「勿以茶包小而不記，永遠別信任中年人的記憶力」，故寫此文。 用範例程式說明如下： Live Demo <! DOCTYPE html > < html > < head > < meta charset ="utf...

Posted 25 March 2016 07:21 AM 由 Jeffrey | 1 comment(s) 7,505

Filed under: HTML5

在IIS設定SVG與字型檔MIME Type

開始試用docfx產生API文件（ docfx 是微軟程式庫文件產生器 SandCastle 的接班人），編譯專案時可一併產生API文件網頁，非常方便，大推！（docx的安裝使用可參考網友霧隱虎的 文章 ，VS2015用NuGet在專案安裝docfx.msbuild，以後每次編譯時可在_site目錄找到API文件網頁。） 直接從檔案總管瀏覽文件網頁大致正常，只有左側目錄總表因本機網頁JavaScript受跨網域存取限制無法顯示，將文件丟到IIS，目錄總表正常了，但出現另一個小問題，docfx的Logo...

Posted 17 February 2016 09:00 PM 由 Jeffrey | 2 comment(s) 14,373

Filed under: IIS, HTML5

從IE11的可笑UserAgent聊起

微軟在Windows Phone 8.1 Update裡幹了一件看似好笑的事，把Windows Phone的IE11 User Agent 改成 : Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 930) like iPhone OS 7_0_3 Mac OS X AppleWebKit /537 (KHTML, like...

Posted 17 August 2014 11:00 PM 由 Jeffrey | 9 comment(s) 31,458

Filed under: IE, HTML5

在IE8顯示SVG

除了Canvas，HTML5還提供另一種向量繪圖技術--SVG( Scalable Vector Graphics )，透過XML標籤定義矩形、圓弧、路徑(Path)、多邊形(Polygon)等向量模型，並可加上濾鏡、變形等特效，就能在網頁顯示可縮放的向量圖案。而SVG的XML元素如同HTML元素能透過JavaScript動態改變屬性、樣式，甚至用CSS :hover選取器就能做出滑鼠移過變色效果，例如: SVG與Canvas各有所長，適用場合不同，MSDN有篇詳細的 分析 可做為選擇評估的依據...

Posted 07 August 2014 10:28 PM 由 Jeffrey | 1 comment(s) 19,390

Filed under: IE, HTML5, SVG

HTML5 Canvas與幾何練習題-矩形邊框交點與線條箭頭

程式寫多了，什麼 死人骨頭都可能遇到 題材都有機會玩到。最近在寫電子表單流程圖模組，根本是在複習國中數學: sin、cos、兩點距離...  被幾何邏輯搞到昏頭，在草稿紙畫了一堆三角形示意圖還是似懂非懂 orz(數學老師站在我背後，他非常火) 其中有個需求: 用線條連接矩形中心與外部點，但線條需由矩形邊框開始畫起。換句話說，線條在矩形內部的部分隱形，只有與邊框交點到外部點間要畫線。原本已用一堆if else硬幹搞定，但想想還是該用幾何函數解決才會優雅。無奈數學天分不佳，只靠大腦模擬搞不出名堂...

Posted 07 August 2014 12:56 AM 由 Jeffrey | 4 comment(s) 10,442

Filed under: HTML5

搜尋