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 PMJeffrey | with no comments 4,215
Filed under:
使用 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 PMJeffrey | 1 comment(s) 5,778
Filed under: ,
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 PMJeffrey | with no comments 3,841
Filed under:
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 AMJeffrey | with no comments 7,336
Filed under:
Coding4Fun-試聽 16 進位字串表示的 MP3 內容
鹹蝦專案(利用閒暇經營的 Side Project )遇到的需求,先前把 MP3 音效資料整進 SQL 資料表轉成 IMAGE 資料型別,查詢起來像這樣: 如果我想試聽這段聲音該怎麼辦? 網路上可以找到一些 T-SQL 範例 ,將 SQL 裡的二進位資料匯出成檔案。不過這樣子每次試聽的步驟有點麻煩: 用 SELECT 取得某一筆 IMAGE 內容 -> 以內容及檔名為參數呼叫 Stored Procedure -> 在檔案總管點選檔案試聽。 我心中理想的操作方式是: SELECT 選出數筆內容...
Posted 24 September 2017 05:08 PMJeffrey | with no comments 4,817
Filed under: ,
閒聊:不想走在「最前端」, WebForm 開發者也該學的技能
就用這篇鬼故事當開場吧! 在 2016 年学 JavaScript 是一种什么样的体验? 這幾年 HTML5 火紅,前端開發技術發展如黃河氾濫一發不可收拾,開發框架百家齊嗚,眼花瞭亂不知如何下手就算了,更要命的是市場主流每兩年就轉一次風向,兩年前我才含淚從 Knockout 轉到 Angular ,現在卻眼看 React.js 及 Vue.js 可能把 Angular 的接班人 Angular 2 幹掉 Orz。不只開發框架主流變來變去,連開發工具也整套換光光。還記得兩年前的這篇 Gulp, Grunt...
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 PMJeffrey | with no comments 4,452
Filed under:
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 AMJeffrey | 2 comment(s) 6,491
Filed under: ,
搞懂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 AMJeffrey | 1 comment(s) 30,055
Filed under: ,
克服入口網站內嵌其他網站之跨網站存取限制
文章標題有點饒舌難懂,直接說我需求就清楚了。我想在員工入口網站(例如:portal.utopia.com)加入人事、行政、會計、電子表單等現成網站功能,這些應用程式各有自己的網站(例如:webap.utopia.com),最簡單的整合方法是在入口網站放個Iframe將其他網站的網頁內嵌進來,兩分鐘搞定,用膝蓋就能完成。 BUT,人生最機X的就是這個BUT! PM/老闆/使用者一定不會這麼簡單放過你,既然網頁已經整在一起,那麼切換樣式跟入口網站融為一體,審完表單入口網站的待審數字要減一,非常合情合理...
Posted 07 May 2016 03:00 PMJeffrey | 6 comment(s) 18,476
Filed under: ,
Chrome的Button Click行為差異
同事報案網頁在IE與Chrome表現不同,依稀記得遇過,但沒寫成沒找到明確記錄,花了時間回想、研究、實驗,得到結論後才恍然憶起,從HipChat對談翻出以前的辦案記錄。明明是前科犯還重啟調查,記憶力壞掉好可怕,也懊悔浪費了時間。由此得一結論-「勿以茶包小而不記,永遠別信任中年人的記憶力」,故寫此文。 用範例程式說明如下: Live Demo <! DOCTYPE html > < html > < head > < meta charset ="utf...
Posted 25 March 2016 07:21 AMJeffrey | 1 comment(s) 6,202
Filed under:
在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 PMJeffrey | 2 comment(s) 13,111
Filed under: ,
從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 PMJeffrey | 9 comment(s) 28,916
Filed under: ,
在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 PMJeffrey | 1 comment(s) 18,410
Filed under: , ,
HTML5 Canvas與幾何練習題-矩形邊框交點與線條箭頭
程式寫多了,什麼 死人骨頭都可能遇到 題材都有機會玩到。最近在寫電子表單流程圖模組,根本是在複習國中數學: sin、cos、兩點距離...  被幾何邏輯搞到昏頭,在草稿紙畫了一堆三角形示意圖還是似懂非懂 orz(數學老師站在我背後,他非常火) 其中有個需求: 用線條連接矩形中心與外部點,但線條需由矩形邊框開始畫起。換句話說,線條在矩形內部的部分隱形,只有與邊框交點到外部點間要畫線。原本已用一堆if else硬幹搞定,但想想還是該用幾何函數解決才會優雅。無奈數學天分不佳,只靠大腦模擬搞不出名堂...
Posted 07 August 2014 12:56 AMJeffrey | 4 comment(s) 8,952
Filed under:
更多文章 下一頁 »

搜尋

Go

<September 2018>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication