2019

9月

11月

基于canvas的截圖

https://github.com/Aaaaaaaty/Blog/issues/5

網(wǎng)頁截圖

https://www.npmjs.com/package/chrome-remote-interface

推薦一個可能大家會用到的工具：headless chrome （無頭谷歌瀏覽器）

https://developers.google.com/web/updates/2017/04/headless-chrome（會的同學可以忽略）

默認功能：獲取屏幕截圖、獲取頁面為PDF、打印頁面DOM

如果配合 chrome-remote-interface 遠程控制工具使用可以實現(xiàn)更多功能：
1晴楔、控制使用 CSS 和 DOM 模塊
2、使用 Runtime 模塊執(zhí)行 JS 腳本
3界酒、使用 Network 模塊讀取并設置 UserAgent 和 Cookie 等信息
4、配合 Karma 進行單元測試

https://zhuanlan.zhihu.com/p/27100187

賣菜的前端文章匯總

https://www.yuque.com/sxc/front/rb6hn7

Google How to do a code review

https://google.github.io/eng-practices/review/reviewer/

用JavaScript 實現(xiàn) AI

https://aijs.rocks/

React UI 組件庫

https://reactjs.org/community/ui-components.html

時間轉換 API 眾多嘴秸，體積小毁欣，支持tree-shaking 對比dayjs和momentjs

https://date-fns.org/

12月

網(wǎng)易云音樂前端性能監(jiān)控實踐

https://mp.weixin.qq.com/s/jQZEwmu1SG4RcVePWT8HBA

前端er須知的Nginx技巧(Docker SSI HTTPS)

[https://mp.weixin.qq.com/s/zGR3Pu0zt3Z2tVCQL7ImNQ
]

畫圖工具推薦

http://www.reibang.com/p/b4992f48e06b

小微項目的業(yè)務中臺解決方案

《Headless CMS——小微項目的業(yè)務中臺解決方案》

如何監(jiān)控網(wǎng)頁崩潰？

https://zhuanlan.zhihu.com/p/40273861

開源錄制用戶屏幕

https://github.com/rrweb-io/rrweb

首頁

https://www.rrweb.io/

demo

https://www.rrweb.io/demo/checkout-form/

解密國內BAT等大廠前端技術體系-美團點評之上篇（長文建議收藏）

https://mp.weixin.qq.com/s/gxR-KPCdfbHWX5I1um5x_g

reg 在線工具

https://regexr.com/4q3dn

瀏覽器禁止同源驗證

https://blog.csdn.net/qq_32786873/article/details/70173151

移動端調試~

Node.js 模塊系統(tǒng)源碼探微

https://juejin.im/entry/5ded93fc6fb9a0166316c535

畫圖工具 plantuml

https://plantuml.com/

高德JS依賴分析工程及關鍵原理

https://mp.weixin.qq.com/s/vbp_tXErSKe23oO2xmzc0Q

h5秒開方案大全

http://www.alloyteam.com/2019/10/h5-performance-optimize/

對應舊版本的react hooks岳掐，對比兩邊的寫法

https://wattenberger.com/blog/react-hooks

從 VSCode 看大型 IDE 技術架構

https://www.yuque.com/paranoidjk/blog/vuuz30

騰訊開源跨端框架

https://github.com/tencent/hippy

前端技術周刊

https://www.yuque.com/awesome/fe_weekly

ConardLi 的 2019 — 尾聲和開始 | 掘金年度征文

https://juejin.im/post/5e093619e51d45581e441fc4

2020

1月

Single-Spa + Vue Cli 微前端落地指南 (項目隔離遠程加載凭疮，自動引入)

https://juejin.im/post/5dfd8a0c6fb9a0165f490004

關于分享

https://www.zhihu.com/question/34625985

采訪布萊登艾克

https://www.youtube.com/watch?v=IPxQ9kEaF8c

5 Ways to animate a React app.

https://medium.com/@dmitrynozhenko/5-ways-to-animate-a-reactjs-app-in-2019-56eb9af6e3bf

手把手教你寫幾個實用的AST插件(實戰(zhàn))

https://mp.weixin.qq.com/s/GJ1H6gMoB1BEYfQbF3RQpQ

北京電影學院發(fā)了一篇滿是數(shù)學公式的計算機頂會論文，并開源了其代碼

https://www.zhihu.com/people/dancerphil/activities

前端安全—你必須要注意的依賴安全漏洞

https://juejin.im/post/5e1d68fc6fb9a0300b4c0eac

3月

前端微服務在字節(jié)跳動的打磨與應用

https://mp.weixin.qq.com/s?__biz=MzI1MzYzMjE0MQ==&mid=2247485444&idx=1&sn=62b872dac1c7ef15305b0eca4f01c8e0

前端要了解的UI設計知識

https://mp.weixin.qq.com/s/et4tEZny97eUezY_E8qNwg

小白必看串述，JSBridge 初探

https://mp.weixin.qq.com/s/Tsc52538Se2VumuiszEpnA

設計體系的響應式設計：

https://mp.weixin.qq.com/s/K7rBl13xOoAzhogaHMACew

短文执解，使用router hooks

https://css-tricks.com/the-hooks-of-react-router/

前端勸退預警：JavaScript 工具鏈不完全指南

https://www.cnblogs.com/lzkwin/p/12462725.html

對React Hooks的一些思考

https://zhuanlan.zhihu.com/p/48264713

How V8 optimizes functions in JavaScript

https://itnext.io/v8-function-optimization-2a9c0ececf5e

chrome 80 cookie問題

https://harttle.land/2020/01/27/secure-cookies.html

4月

考拉前端骨架屏生成技術揭秘

https://mp.weixin.qq.com/s/hMDC-NEJ-AyUqO6hM4fkaw

微前端體系結構

https://changelog.com/jsparty/121

如何設計實現(xiàn) h5 頁面搭建-數(shù)據(jù)模型

https://mp.weixin.qq.com/s/Fyl3SMHjv3ROw9QUBdwutA

systems-design-for-advanced-beginners https://robertheaton.com/2020/04/06/systems-design-for-advanced-beginners/

Vue 3.0 Beta 那些事

https://juejin.im/post/5e9f6b3251882573a855cd52

使用 React Hooks 實現(xiàn)仿石墨的圖片預覽插件

https://juejin.im/post/5e9bf299f265da47ee3f6c31

從代碼到像素

https://developers.google.com/web/updates/2018/09/inside-browser-part1

一個好的組件應該是什么樣子的

https://mp.weixin.qq.com/s/P3pwzn1pmoGzjnS8nVyMgg

[賽高！一個掃碼就可以跨端傳輸文件的工具]

https://github.com/claudiodangelis/qrcp

Node 生產(chǎn)環(huán)境調試

https://aotu.io/notes/2016/02/24/node-debug-in-production/

[移動端真機調試指南]

https://aotu.io/notes/2017/02/24/Mobile-debug/

[譯] 為新的Facebook.com重建我們的技術棧

https://www.yuque.com/docs/share/6aee9dd5-da3f-462b-b4bd-caec0ec6f60e

大規(guī)格文件的上傳優(yōu)化

https://segmentfault.com/a/1190000022624799?utm_source=tag-newest

打開攝像頭纲酗，2D插畫實時變動畫衰腌，中國程序媛出品，Demo在線可玩

https://mp.weixin.qq.com/s/rEmNKSd0eV2u1iRMp90EZA

eslint prettier

https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project

前端常用60余種工具方法

https://segmentfault.com/a/1190000022736837

[Twitter 的性能優(yōu)化分享]

https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

[一些可以幫到你的CSS屬性～～]

https://segmentfault.com/a/1190000022851543

[為什么這么設計系列]

https://draven.co/whys-the-design/

[解讀新一代 Web 性能體驗和質量指標]

https://segmentfault.com/a/1190000022744550
web vitals 相關 https://web.dev/vitals/#core-web-vitals

[替代 webpack觅赊？帶你了解 snowpack 原理右蕊，你還學得動么]

https://zhuanlan.zhihu.com/p/149351900

[react 動畫庫]

https://github.com/react-spring/react-use-gesture
https://github.com/react-spring/react-spring

原本用licecap這個錄制gif的小工具不支持x64架構不能用了，給大家推薦個kap茉兰，也是基于 electron 構建的開源小工具

https://github.com/wulkano/Kap
https://www.electronjs.org/apps

視頻講解從TCP講到NIO, BIO, 線程同步

https://www.bilibili.com/video/BV1Af4y117ZK

558個完全可定制的 SVG 圖標。

https://tablericons.com/

《認識垂直韻律》

https://iamsteve.me/blog/entry/a-guide-to-vertical-rhythm

webpack核心概念

https://mp.weixin.qq.com/s/VyAQos6aq6Ln-tgxcAc8NA

webpack高階概念

https://mp.weixin.qq.com/s/32oQ6ve8EapSYXs78wWzdQ

通過 webcam 攝像頭追蹤眼動記錄

https://webgazer.cs.brown.edu/

40 個 CSS 布局技巧

https://developer.aliyun.com/article/768212

awesome-lowcode

https://github.com/taowen/awesome-lowcode

Nuclear黑科技欣簇，在模擬器中打開小程序规脸、H5頁面坯约，方便調試抓包、查看頁面不同機型適配等開發(fā)工作

2020年第10周

20200302 前端程序員要懂的 UI 設計知識
20200303 小白必看莫鸭，JSBridge 初探
20200304 設計體系的響應式設計
20200305 解決了我很多在開發(fā)可視化時候寫 ts 與 react hooks 的疑惑
20200306 Uglify vs Babel-minify vs Terser 一場代碼壓縮的pk

2020年第11周

20200309 頁面The Slideout Footer的實現(xiàn)~
20200310 深入剖析React Native下一代引擎框架重構
20200311 前端工程師的 LeetCode 之旅
20200312 The Performance Benefits of Variable Fonts.
20200313 The Hooks of React Router

2020年第12周

20200316 React Hooks響應式布局
20200317 前端勸退預警：JavaScript 工具鏈不完全指南
20200318 對React Hooks的一些思考
20200319 How V8 optimizes functions in JavaScript
20200320 useEffect 完整指南

2020年第13周

20200323 破譯解決Typescript檢查下的React報錯
20200324 六個提升前端開發(fā)效率的工具
20200325 React Hook 中 createContext & useContext 跨組件透傳上下文與性能優(yōu)化
20200326 A list of everything that could go in the <head> of your document
20200327 淺談script標簽的defer和async

2020年第14周

20200330 React-Router v6 新特性解讀及遷移指南
20200331 How To Make Life Easier When Using Git
20200401 eslint的補充闹丐，也可以作為我們以后codereview的參考
20200402 字節(jié)跳動的微前端沙盒實踐
20200403 What React Does (and Doesn't Do)

2020年第15周

20200407 How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet
20200408 考拉前端骨架屏生成技術揭秘
20200409 微前端體系結構
20200409 如何設計實現(xiàn) h5 頁面搭建-數(shù)據(jù)模型

2020年第16周

20200413 BPMN2.0渲染工具包和web建模器, 前端來完成畫流程圖的功能。
20200414 2020前端工程師必讀手冊
20200415 CSS demo：404 的別樣展示
20200416 10 security tips for frontend developers
20200417 探索 webpack5 新特性 Module federation 在騰訊文檔的應用

2020年第17周

20200420 基礎理論+JS框架應用+實踐被因，從0到1構建整個前端算法體系
20200421 從Facebook的新設計中窺探他們如何運用CSS技巧
20200422 使用 React Hooks 實現(xiàn)仿石墨的圖片預覽插件
20200423 systems-design-for-advanced-beginners
20200424 尤雨溪在Vue3.0 Beta直播里聊到了這些…

2020年第18周

20200427 H5常見問題及解決方法
20200428 Web中的圖像技術總結與實踐
20200429 漫畫版：什么是機器學習卿拴？
20200430 njs 在 nginx 的一個模塊也支持執(zhí)行腳本，語法是es5.1和一部分es6

2020年第19周

20200506 Google 官方文章——如何去做code review
20200507 小姐姐用動畫圖解Git命令梨与，一看就懂堕花！
20200508 node_modules 困境

2020年第20周

20200512 Spacing in CSS
20200513 凹凸的一篇：關于大文件上傳的
20200514 新發(fā)現(xiàn)的一個應用監(jiān)控系統(tǒng)，有效的緩解系統(tǒng)悄咪咪掛了的問題
20200515 The Deno Handbook: a concise introduction to Deno

2020年第21周

20200519 GMTC全球大前端技術大會（深圳站）2019 演講視頻回放
20200520 學習 React Hooks 可能會遇到的五個靈魂問題
20200521 “Super” and “Extends” In JavaScript ES6 - Understanding The Tough Parts
20200522 Recoil 一個基于 Actor Model 的 React 狀態(tài)管理庫

2020年第22周

20200526 了解JS中的解構粥鞋、剩余參數(shù)和展開語法
20200527 京東CDN內部視頻課程
20200529 關于 Edge 在 Build 2020 上的一些新特性介紹

2020年第23周

20200602 前端常用60余種工具方法
20200603 了解tsconfig.json
20200604 A Complete React Mental Model: Putting It All Together.
20200605 面向 Model 編程的前端架構設計

2020年第24周

20200609 19個前端開發(fā)人員的救生工具
20200610 一些可以幫到你的CSS屬性
20200611 The complete guide to CSS media queries
20200612 解讀新一代 Web 性能體驗和質量指標

2020年第25周

20200616 別人是怎樣review你代碼的
20200617 git commit前檢測husky與pre-commit
20200619 使用git rebase讓歷史變得清晰

2020年第26周

20200624 一個 CSS 變量的使用指南缘挽，講解了瀏覽器支持、與CSS預編譯方言中變量的差異呻粹、用 CSS 變量進行樣式封裝壕曼、分離行為和樣式的最佳實踐。
20200628 deno 基礎教程

2020年第27周

20200629 TypeScript 4.0 里面有哪些新特性
20200630 從 Fetch 到 Streams —— 以流的角度處理網(wǎng)絡請求
20200701 美團外賣Flutter動態(tài)化實踐
20200702 系統(tǒng)的學習代碼重構和設計模式的一個網(wǎng)站
20200703 如何挑選數(shù)據(jù)可視化框架及平臺 - 前端篇

2020年第28周

20200706 《對低代碼等浊、零代碼產(chǎn)品的一些看法》
20200707 一文讀懂 TypeScript 泛型及應用
20200708 美國版畢業(yè)“后浪”演講全文
20200709 The Six Habits of Highly Effective Software Engineers
20200710 編寫可維護的前端代碼

2020年第29周

20200713 一篇經(jīng)典文章腮郊，《認識垂直韻律》
20200714 webpack核心概念 webpack高階概念
20200715 技術選型：沒有谷歌的命，得了谷歌的病
20200716 The Cost of Javascript Frameworks
20200717 使用lazysize .js很容易進行延遲加載

2020年第30周

20200720 通過 webcam 攝像頭追蹤眼動記錄
20200721 Chrome的新功能：CSS Overview筹燕，了解網(wǎng)站上使用CSS的概況
20200722 給程序員的中文寫作指北
20200723 Generating UUIDs at scale on the Web
20200724 輕松使用純css3打造有點意思的故障藝術

2020年第31周

20200727 TypeScript 編程的心智模型
20200728 脫離996轧飞，Chrome DevTools 面板全攻略！Ｗ踪少！
20200729 戳破微服務的七大謊言
20200730 Full Guide to Testing JavaScript & React with Jest, React Testing Library, Cypress
20200731 SEIN.JS - 漸進式Web3D解決方案

2020年第32周

20200803 8 Awesome React Hooks
20200804 immer.js:也許更適合你的immutable js庫
20200805 CSS函數(shù)指南
20200806 How Are Function Components Different from Classes?
20200807 Into the Matrix with SVG Filters

2020年第33周

20200810 “網(wǎng)易云團隊 React Hooks 最佳實踐
20200811 應該在JavaScript中使用Class嗎？
20200812 可折疊Web可能會給我們帶來的變化
20200813 Javascript 多線程編程的前世今生
20200814 A Guide to SVG Animations (SMIL)

2020年第34周

20200817 JavaScript 引擎基本原理：Shapes 和 Inline Caches
20200818
20200819 輕松搞定移動端適配
20200820 實現(xiàn)一個簡單的基于 WebAssembly 的圖片處理應用
20200821 每日一文：使用滾動特效的最佳實踐

2020年第35周

20200824 Build A Confirmation Modal in React with State Machines
20200825
20200826 網(wǎng)頁布局都有哪種糠涛？一般都用什么布局援奢？
20200827 React17新特性：啟發(fā)式更新算法
20200828 奇妙的 CSS MASK

2020年第36周

20200831 CommonJS 和 ES6 Module 究竟有什么區(qū)別？
20200901 你應該了解的5種TypeScript設計模式
20200902 「一勞永逸」由淺入深配置webpack4
20200903 如何保障前端項目的代碼質量
20200904

2020年第37周

20200907 4W字從0到部署上線忍捡，用 TS 帶你徹底掌握前端工程化
20200908 How & Why Front End Developers Need to Diversify Into Design
20200909 帶你快速上手Rollup
20200910 前端規(guī)范工具鏈落地實戰(zhàn)
20200911 如何搭建一個屬于自己的腳手架

2020年第38周

20200914 關于 useState 的一切
20200915 一篇看懂新手和老司機的區(qū)別
20200916 細數(shù) TS 中那些奇怪的符號
20200917 Chrome插件開發(fā)全攻略
20200918 CKeditor 智能編輯器組件

2020年第39周

20200921 螞蟻楊周璇：我做前端這十多年來的感悟
20200922 [譯] 我是如何成為一名更優(yōu)秀的程序員
20200923 最通俗的 React Fiber(時間分片) 打開方式
20200924 ESLint 修改點整理
20200925 面向未來的前端構建工具-vite

2020年第40周

20200927 《基于React-hook實現(xiàn)前端國際化方案》
20200928 零距離接觸websocket
20200929 盤一盤那些提效/創(chuàng)意的寶藏網(wǎng)站

2020年第42周

20201012 JS數(shù)組奇巧淫技
20201013 理解TypeScript泛型
20201014 《理解TypeScript泛型》- understanding-typescript-generics
20201015 SVGA 動效格式調研
20201016

2020年第43周

20201019 推薦幾個常用的Chrome插件 —— 讓你使用Github效率翻倍
20201020 2020年你不應該錯過的CSS新特性
20201021 13個受谷歌啟發(fā)的代碼評審標準
20201022 如何構建微前端
20201023

2020年第44周

20201026 這次徹底搞懂 Promise
20201027 推薦一個表格組件
20201028 es2020新特性
20201029 用Canvas實現(xiàn)一個動態(tài)甜甜圈圖表
20201030 Chrome V8讓你更懂JavaScript

2020年第45周

20201102 JavaScript ES2021最值得期待的新特性解析
20201103 利用 Coverage 檢查js和css是否被執(zhí)行覆蓋
20201104 The psychology of learning to code
20201105 如何進行表單體驗優(yōu)化-中臺系統(tǒng)
20201106 使用 React Hooks 實現(xiàn)狀態(tài)管理集漾，不使用 Redux 或者 Context API

2020年第46周

20201109 2020不容錯過！24個CSS新特性來了
20201110 Create React App 4.0 CHANGELOG
20201111
20201112 結合源碼分析 Node.js 模塊加載與運行原理
20201113 JavaScript's Memory Management Explained

2020年第47周

20201116 前端智能化 2020 年中總結和反思
20201117
20201118 10 React security best practices
20201119 使用 React Hooks 實現(xiàn)容器模式
20201120 除了Web和Node砸脊，JavaScript還能做什么

2020年第48周

20201123 CSS 排版與正常流 —— 重學 CSS
20201124 有關 KISS具篇，SOLID，YAGNI 等一些軟件開發(fā)原則縮寫的解釋
20201125 The DevOps Reading List: Choosing your next DevOps book
20201126 前端 api 請求緩存的 5 種方案k
20201127

2020年第49周

20201123 移動端UI一致性解決方案
20201124 Yarn 2.4 發(fā)布凌埂，2.x的最后一個版本驱显，以及Yarn 3.x 除了 node 要求提升至12或14以外的功能和改動清單等
20201125 What Vue.js Does Better Than React
20201126 web應用安全設計指南_Web無障礙設計基礎的設計師指南
20201127 如何從0到1搭建一個自己的前端腳手架

2020年第50周

20201123 談談前端水印攻防:明水印/暗水印
20201124 2020 CSS 現(xiàn)狀調查
20201125 Typescript代碼整潔之道
20201126 12 CSS Libraries for Beautiful Image Hover Effects
20201127 這些高階的函數(shù)技術，你掌握了么

作為一個程序員，在工作中需要做一些技術分享或項目匯報時埃疫，往往需要花費很長時間去做一個 PPT伏恐。Reveal 是一個運行在瀏覽器上的 PPT，讓我們可以使用 HTML 甚至是 Markdown 語法去實現(xiàn)一個 PPT栓霜。Reveal 支持眾多特性翠桦，例如自動動畫、演講者注釋胳蛮、代碼語法高亮销凑、導出 PDF 等，同時內置了若干默認主題仅炊。另外介紹一個項目 reveal-md斗幼，它對 Reveal 進行了一層封裝，幫助我們使用 Markdown 語法快速地實現(xiàn)一個 PPT茂洒。 (via.陳嘉健)

使用 CSS Scroll Snap 實現(xiàn)滑動容器

你是否曾希望 CSS 能原生實現(xiàn)一個可吸附的滑動容器呢孟岛？本文將深入 CSS Scroll Snap 屬性，帶你了解滾動捕抓技術督勺。 (via.何明晉)

前端寶藏