原创 Node 項目通過 .npmrc 文件指定依賴安裝源

背景 npm 命令運行時,往往通過命令行指定相關配置,最常用的便是使用 --registry 來指定依賴的安裝源。 npm install --registry=https://registry.npmmirror.com 同樣的效果也可

原创 Mac 使用 Nginx 在本地部署靜態網站

安裝 安裝 Brew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 安裝 Nginx bre

原创 npm/cnpm 設置鏡像地址

npm 查看當前鏡像源: npm config get registry # https://registry.npmjs.org/ 修改當前鏡像源: npm config set registry https://registry.n

原创 PWA 實踐/實戰/應用(Google Workbox)

桌面端 PWA 應用: 移動端添加到桌面: 1 什麼是 PWA PWA(Progressive Web App - 漸進式網頁應用)是一種理念,由 Google Chrome 在 2015 年提出。PWA 它不是特指某一項技術,而是應用

原创 Bootstrap實戰 - 單頁面網站

一、介紹 單頁面結構簡單、佈局清晰,常常用來做手機 App 或者某個產品的下載介紹頁面。現在,展示型網頁整體趨向於單頁網站設計,這樣一次性把核心信息展現出來,對於用戶來說更加直觀和簡單,能夠快速瞭解一個產品。 二、知識點 2.1 滾動監聽

原创 npm 直接安裝 GitHub/GitLab 倉庫代碼及 npm link 本地調試

一、npm 直接安裝 GitHub/GitLab 倉庫代碼 語法 npm install <git remote url> 示例 命令: npm i [email protected]:mazeyqian/mazey.git -S # 或 np

原创 Bootstrap實戰 - 評論列表

一、介紹 社交媒體網站盛行,人們常常會使用評論表達自己的觀點,評論功能已然成爲網站的一部分。 二、知識點 2.1 媒體對象 官方解釋:這是一個抽象的樣式,用以構建不同類型的組件,這些組件都具有在文本內容的左或右側對齊的圖片(就像博客評論或

原创 Bootstrap實戰 - 註冊和登錄

一、介紹 註冊和登錄在社交和商業網站中是必不可少的一個部分。 二、知識點 2.1 標籤頁 2.1.1 基礎標籤頁 標籤頁的使用與導航欄類似,同時都依賴於基礎樣式 nav,不同的是附加樣式變成了 nav-tabs 和 nav-pills(膠囊

原创 Bootstrap實戰 - 響應式佈局

一、介紹 響應式佈局就是一個網站能夠兼容多個終端,而不是爲每個終端做一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。 導航欄與輪播在大部分網站的頭部佔很高的比重,特別是導航欄,扮演着網站地圖的角色。 在響應式佈局中,要求導航欄能夠根

原创 前端性能和加載體驗優化實踐(附:PWA、離線包、內存優化、預渲染)

一、背景:頁面爲何會卡? 1.1 等待時間長(性能) 項目本身包/第三方腳本比較大。 JavaScript 執行阻塞頁面加載。 圖片體積大且多。 特別是對於首屏資源加載中的白屏時間,用戶等待的時間就越長,用戶感知到頁面的速度就越慢。麻

原创 Bootstrap實戰 - 瀑布流佈局

講 Bootstrap 基礎的教程網上已經很多了,實際上 Bootstrap 中文網(bootcss.com)裏的文檔已經寫的很詳細了,但實戰的案例卻不多。這裏用一些當前流行的網頁佈局爲導向,使用 Bootstrap 中的樣式來完成它。每次

原创 Promise + Async&Await + Array.reduce + 函數遞歸 解決網絡/接口請求的依次/排隊不間斷間隔訪問

背景 試想在一個需要頻繁更新數據的場景(例如:監控、圖表類),常規方法是設置一個間隔 N 秒的定時器 setInterval;但是這種方式存在一個問題,當前一個請求時間過長時(超過了間隔時間),後一個請求的接口響應會先於前一個請求,也就是說

原创 使用 GitLab CI/CD 和阿里雲 CLI 自動部署前端項目

一、什麼是 CI/CD? CI(持續交付)是功能迭代後自動構建、打包、校驗代碼格式、跑單測、單測覆蓋率,常見的就是 Webpack、Rollup、ESLint等。 CD(持續部署)是經過 CI 後,代碼自動部署到服務器。 在 GitLab

原创 Postman 使用小技巧/指南

一、什麼是 Postman(前世今生) Postman 誕生於 2013 年,一開始只是 Abhinav Asthana 着手於解決 API 測試的工具,隨着這個工具的使用者和需求迅速激增,Abhinav Asthana 找了他的兩個前同事

原创 前端常用庫 CDN

jQuery 鏈接:https://mazey.cn/cdn/jquery-2.1.1.min.js 代碼: <script language="javascript" type="text/javascript" src="https:/