原创 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:/
原创 使用 rollup 打包可按需加載的 NPM 包
安裝 rollup npm install rollup --save-dev 配置文件 rollup.config.js export default { input: 'src/index.js', output: {