原创 【性能監控】如何有效監測網頁靜態資源大小？

前言 作爲前端人員肯定經常遇到這樣的場景：需求剛上線，產品拿着手機來找你，爲什麼頁面打開這麼慢呀，心想自己開發的時候也有注意性能問題呀，不可能會這麼誇張。那沒辦法只能排查下是哪一塊影響了頁面的整體性能，打開瀏覽器控制檯一看，頁面上的這些配圖

2024-04-25 14:05:06

原创 移動端安全區域適配方案

前言 什麼是安全區域？ 自從蘋果推出了驚豔的iPhone X，智能手機界就正式步入了全面屏的新紀元。然而，這一革新也帶來了一個特別的問題——那就是屏幕頂部的“劉海”和底部的“黑條”區域。這些區域猶如手機的“神祕面紗”，遮擋了一部分屏幕，給開

2024-04-16 13:56:12

原创 如何巧妙應對iOS鍵盤難題？

前言 寫過移動端的同學或多或少都遇到過軟鍵盤帶來的各種各樣的問題，最典型的就是輸入框被軟鍵盤遮擋、fixed元素失效等問題，並且這些問題在iOS上的表現讓人難以接受。 webview的差異 在移動端上，我們的H5頁面一般是運行在宿主APP提

2024-04-11 13:56:17 1

原创 關於小程序如何做到強制更新

前言 在小程序的日常迭代中，有一些場景我們可能需要在小程序發佈後，用戶能夠馬上感知並更新，比如上線新活動、修復高危漏洞等，如果用戶因爲各種原因未能及時更新小程序，這就可能導致一些功能無法正常使用或者存在安全隱患，因此，實現小程序的強制更新功

2024-03-15 13:56:27

原创 JavaScript 最新動態：2024 年新功能

前言 隨着 Web 技術的日新月異，JavaScript 也在不斷地吸收新的特性和技術，以滿足日益複雜和多樣化的開發需求。在 2024 年，JavaScript 迎來了一系列令人矚目的新功能，這些功能不僅提升了開發者的效率，也極大地豐富了

2024-03-07 13:56:40

原创 使用原生 cookieStore 方法，讓 Cookie 操作更簡單

前言 對於前端來講，我們在操作cookie時往往都是基於document.cookie，但它有一個缺點就是操作複雜，它並沒有像localStorage那樣提供一些get或set等方法供我們使用。對與cookie的操作一切都是基於字符串來進行

2024-02-28 14:00:30

原创 團隊協作如何確保項目Node版本的一致性？

前言 想必大家在工作過程中都遇到過node版本帶來的各種各樣的問題，對於團隊協作項目，你不能保證所有人的本地node版本都相同，所以在項目文檔中往往會寫上以下內容： 爲與線上環境一致，請保證以下版本 node：15.x.x vue-cli

2024-02-25 13:56:47

原创 揭開空白網頁背景色的神祕面紗

前言 一個看似簡單實則有坑的問題：空白網頁的背景色是什麼？ 大家是不是都會認爲是白色，但事實並非如此，有時候我們眼睛看到的也不一定是真的🧐 頁面根元素背景色 比如下面這段代碼： <!-- ... --> <style> body {

2024-01-30 14:00:13

原创 國慶微信頭像DIY：輕鬆打造個性化頭像

前言 國慶節馬上要到了，今天就教你如何從0到1使用canvas生成國慶風微信頭像。 本文包含以下內容： vue3項目搭建，需求分析 canvas合成圖片原理 github自動化部署 開發過程遇到的問題及解決方案 文末附源碼及在線體驗地址

2023-09-25 13:58:45

原创 純前端也可以訪問文件系統！

前言 週末逛github的時候，發現我們只需要在github域名上加上1s他就能夠打開一個vscode窗口來閱讀代碼，比起在github倉庫中查看更加方便 然後我就想網頁端vscode能不能打開我本地的項目呢，帶着這個疑惑我打開了網頁版v

2023-09-11 13:55:59

原创 【NestJS系列】連接數據庫及優雅地處理響應

前言 Node作爲一門後端語言，當然也可以連接數據庫，爲前端提供CURD接口 我們以mysql爲例，自行安裝mysql TypeORM TypeORM 是一個ORM框架，它可以運行在 NodeJS、Browser、Cordova、Phon

2023-08-30 14:09:02 2

原创 【NestJS系列】核心概念：Middleware中間件

前言 用過express與koa的同學，對中間件這個概念應該非常熟悉了，中間件可以拿到Request、Response對象和next函數. 一般來講中間件有以下作用： 執行任何代碼 對請求與響應攔截並改造 結束request-respon

2023-08-29 13:56:14 1

原创 【NestJS系列】核心概念：Module模塊

theme: fancy highlight: atelier-dune-dark 前言 模塊指的是使用@Module裝飾器修飾的類，每個應用程序至少有一個模塊，即根模塊。根模塊是Nest用於構建應用程序的起點，理論上Nest程序可能只有

2023-08-24 13:56:14 1

原创 Docker數據持久化與數據共享

上篇文章的最後我們使用Docker部署了一個純前端項目，但還有一個很重要的問題就是容器中產生的數據（比如log文件），容器一旦被刪除，容器內的所有數據也就沒有了，爲了避免這個問題我們可以將數據存儲到容器之外（比如宿主機），這樣即使刪除容器也

2023-08-17 13:59:05 1

原创 Docker從入門到部署項目

Docker概念 Docker是一個開源的應用容器引擎，它是基於Go語言並遵從Apache2.0協議開源。Docker可以讓開發者打包他們的應用以及依賴包到一個輕量級、可移植的容器中，然後發佈到任何流行的linux機器上，也可以實現虛擬化。

2023-08-14 13:56:10 1