The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何利用瀏覽器原生的 Clipboard API 讀寫使用者的剪貼簿資料

我們有時候會在一些網站看到「複製到剪貼簿」功能,它不但可以複製我們肉眼看見的文字,還能複製完整的格式讓你可以貼到 Teams 或 Word 之中,有時還能複製完全客製化的內容,其實這背後都是透過瀏覽器內建的 Clipboard API 達成的。今天這篇文章我就來梳理一下 Clipboard API 的一些用法與地雷。

... 繼續閱讀 ...

透過瀏覽器瀏覽網站時到底 URL 長度有沒有一定的限制

我們一般在規劃設計一個網站時,通常都不會特別考慮一個網頁的 URL 到底會有甚麼上限,因為一個正常人絕不會把網址設計的很長很長,對吧?但有時候我們希望把一些網頁的狀態保存在網址列上,方便用戶將網址加入書籤,下次回來時就可以看到原本的資料,這時就有可能會讓網址變的很長。這個問題每隔一段時間就會有學員提出,今天我想透過這篇文章跟大家說說這個 URL 的長度限制。

... 繼續閱讀 ...

開發與部署網站時需注意不要使用到 ERR_UNSAFE_PORT 不安全的埠號

我昨天在授課的時候,突然遇到 Chrome 瀏覽器無法瀏覽網站的情況(ERR_UNSAFE_PORT),我踩到一個不知道算不算罕見的地雷,在深入瞭解之後,覺得有必要寫成文章提醒大家,因為你還真的很有可能會在不久的將來遇到這個問題,看完文章才不會讓你日後鬼打牆太久,讓我們繼續看下去。

... 繼續閱讀 ...

設定 Angular 專案使用 husky 簡化 Git hooks 設定並用 Prettier 統一風格

我們在團隊中開發 Angular 應用程式,經常需要同步每個成員的程式碼格式,與其訂定 Coding Style (代碼風格),倒不如直接用工具強制所有成員用一致的風格進行程式碼排版。本篇文章我將示範用 husky 搭配 prettier 來設定 Git 的 pre-commit hook,讓每個人在 git commit 之前就自動將變更的程式碼進行排版。

... 繼續閱讀 ...

前端工程研究:關於 JavaScript 的物件藍圖建立方法

我們都知道 JavaScript 物件建立的過程,大多都不需要事先設計「藍圖」就可以建立「物件」,不像 C#Java 等強型別語言,需要先設計「藍圖」(也就是類別),才能產生物件。在 ES2015 出來之前,並沒有 class 語法,而是使採用以原型為基礎的物件導向設計模式 (Prototype-based OO)。本篇文章將介紹幾種在 JavaScript 裡面建立物件藍圖的方式。

... 繼續閱讀 ...

網站如何開始使用 ES6 / ES2015 模組化技術進行前端開發

在 2019 的今天,還有多少人在使用傳統前端技術在開發 Web 應用程式?撇除市面上知名的 SPA 框架不說,就算你公司內部還在使用 jQuery 開發網頁,你依然可以將自己升級到使用現代化前端技術的前端工程師。今天這篇文章,將分享如何將現有傳統網站逐步升級,改用如 ES6 / ES2015 等語法,以及透過好用的模組打包工具(module bundler)將全新的 JS 語法轉譯為舊版瀏覽器也能執行的 JS 語法。

... 繼續閱讀 ...

公司找不到資深前端工程師可以導入前端框架嗎?

我有很多客戶都跟我提過這個問題:「我公司想導入前端框架,不過公司內沒有人熟前端,很怕如果遇到技術問題會卡關,做不出想要的功能怎麼辦?」公司內沒有資深的前端工程師,導入前端框架確實是件痛苦的事,本篇文章將探討我對這個議題的想法與對策。

... 繼續閱讀 ...

2018 企業前端框架趨勢論壇之問答回應 (完整版)

我們今年在 2018/9/15 舉辦了一場「企業前端框架趨勢論壇」活動,現場來了將近 200 人,可見許多人對前框架的發展相當感興趣。由於是我們第一次舉辦大型活動,我發現整體活動安排得不是很理想,尤其是最後專家座談的部分,留給會眾提問的時間太少了,這點我們一定會在日後的活動中改進。本篇文章,我打算回答線上提問的所有問題,幫助大家釐清疑惑。

... 繼續閱讀 ...