原创 【問題歸納】前端開發問題集 | css 設置div寬高比1:2

想沉澱開發過程中遇到的問題,避免重複的查詢。接下來,我會一點點地將遇到的問題記錄在這裏。希望這本問題集能減少你在遇到問題時在搜索引擎中漫無目的且耗時地搜索花費的時間,提升開發效率! css 設置div寬高比1:2 html

原创 【前端試題】前端之九陽真經 | 每日更新一題(附解析)| 今日試題: 輸出下列代碼執行的結果

新的一天,加油! 每日一道筆試題,遇見不一樣的自己! 第102題:請輸出下列代碼執行的結果 //參考:忍者祕籍第二版 console.log('script start') let promise1 = new Promise

原创 【D3.js - v5.x】(2)繪圖 | 比例尺 | 座標軸 | 柱狀圖 | 過渡

繪圖:以柱狀圖爲例 要繪圖,首要需要的是一塊繪圖的“畫布”。 HTML 5 提供兩種強有力的“畫布”:SVG 和 Canvas。 SVG 是什麼 SVG,指可縮放矢量圖形(Scalable Vector Graphics),是用於

原创 【PWA】PWA入門到進階

最近在使用某款運動APP,使用過程中我發現一個很便捷的功能,就是你在跑步頁,App會提示你添加“便捷”功能至桌面,添加後桌面會有一個APP圖標,點進去它其實是一個web,然後通過web調用APP方法能直接進入APP跑步。我想了想

原创 【Web Components】Web Components 的最新開發方法

Web Components MDN 上對 Web Components 這個名詞的解釋是: Web Components是一套不同的技術,允許您創建可重用的定製元素(它們的功能封裝在您的代碼之外)並且在您的web應用中使用它們

原创 【函數式編程】基於JS 進行函數式編程(一)引入 | 什麼是函數式編程 | 純函數 | 命令式與聲明式 | 優點

相關文章 【函數式編程】基於JS 進行函數式編程(一)引入 | 什麼是函數式編程 | 函數式編程的優點 【函數式編程】基於JS進行函數式編程(二)高階函數 | 函數代替數據傳遞 | 函數是一等公民 | 閉包 | 使用高階函數實現抽

原创 【D3.js - v5.x】(4)繪製餅圖 | 附完整代碼

餅圖 https://www.d3js.org.cn/document/d3-shape/#pies 定義一個佈局: var pie = d3.pie(); 返回值賦給變量 pie,此時 pie 可以當做函數使用。 var pi

原创 【論文寫作】LaTeX排版工具_寫給新手的一篇容易上手的文檔

LaTeX 有一些列自定義的書寫規則組成,有特定的語法,比如Markdown,但語法和變量比前者多。 本篇文章,適合剛學習LaTex的小白同學,會對下列幾個方面進行介紹: 基本使用方法 使用 (Xe)LaTeX 進行簡單的中英混

原创 【Docker】基於實例項目的集羣部署(四)Docker虛擬機 | Docker 指令 | Docker容器與鏡像

爲什麼要使用Docker 按之前的想法,你可能會問:在Linux上就能安裝程序、部署項目了,那爲什麼還要在Linux上安裝Docker虛擬機呢?然後還要在Docker上安裝程序、部署項目? 答案是:爲了解決主要矛盾:隔離性問題

原创 【前端三分鐘】錨點自動跟隨滾動定位

最近看到寫 “錨點自動跟隨滾動定位”的方法,大都是基於JQ,或者是第三方。 所以,進行給出使用原生JS的寫法。 什麼都不說了,直接上代碼(使用模塊模式方式): <!DOCTYPE html> <html> <head> <tit

原创 【Web性能】Javascript 代碼性能優化條目31條

腳本 1 腳本數量 每個<script>標籤初始下載時都會阻塞頁面渲染,減少頁面包含的<script>標籤數量有助於改善這一情況。同時,不僅是針對外鏈腳本,內嵌腳本的數量同樣也要限制。瀏覽器在解析HTML頁面的過程中每遇到一個sc

原创 【譯】媒體查詢特性 - 適應用戶偏好 | perfers-reduced-motion | prefers-color-scheme | Save data

爲了踐行新的一年能翻譯12+的國外技術博客文章的目標,今天就讓我們開始第一篇。 本篇文章翻譯自一位專注於H5、CSS、web性能的自由開發者: Michael Scharnagl。 譯者引言: 當我們在使用APP時,我們在

原创 【CSS】Grid 柵格佈局 | 更新中..命名網格項

【CSS】 Grid 柵格佈局 2018年作爲Grid佈局的元年,Grid給開發者帶來了強大的佈局體驗,它能幫助我們在頁面上創建響應式佈局。目前已有77%+的瀏覽器支持這個特性,比例還在逐步增加。 要點: Grid Gri

原创 【ThreeJs】(2)照相機 | 正交投影照相機 | 透視投影照相機

1、照相機: 使用Three.js創建的場景是三維的,但是通常情況下顯示器是二維的,所以,三維場景如何顯示在二維屏幕上呢? 照相機:定義了三維空間到二維屏幕的投影方式。 不同的投影方式,照相機又分爲正交投影照相機與透視投影照相機。

原创 【D3.js - v5.x】(6)繪製樹狀圖 | 層級佈局 | 附完整代碼

樹狀圖 在d3 中,繪製樹狀圖,要用到層級佈局這個概念: d3.hierarchy(data[, children]) 根據指定的層次結構數據構造一個根節點。指定的數據 data 必須爲一個表示根節點的對象。比如: { "n