2019
9月
[工具] TreeJS 在线编辑器：
[文章] 21 个 VSCode 快捷键，让代码更快更有趣；
https://juejin.im/post/5d34fdfff265da1b897b0c8d
React组件性能优化实例解析
https://zhuanlan.zhihu.com/p/34632531
可能是最全的 “文本溢出截断省略” 方案合集
https://juejin.im/post/5dc15b35f265da4d432a3d10
11月
基于canvas的截图
https://github.com/Aaaaaaaty/Blog/issues/5
网页截图
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 远程控制工具使用可以实现更多功能：
1、控制使用 CSS 和 DOM 模块
2、使用 Runtime 模块执行 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 实现 AI
React UI 组件库
https://reactjs.org/community/ui-components.html
时间转换 API 众多，体积小，支持tree-shaking 对比dayjs和momentjs
12月
网易云音乐前端性能监控实践
https://mp.weixin.qq.com/s/jQZEwmu1SG4RcVePWT8HBA
前端er须知的Nginx技巧(Docker SSI HTTPS)
[https://mp.weixin.qq.com/s/zGR3Pu0zt3Z2tVCQL7ImNQ
]
画图工具推荐
https://www.jianshu.com/p/b4992f48e06b
小微项目的业务中台解决方案
如何监控网页崩溃？
https://zhuanlan.zhihu.com/p/40273861
开源录制用户屏幕
https://github.com/rrweb-io/rrweb
首页
demo
https://www.rrweb.io/demo/checkout-form/
解密国内BAT等大厂前端技术体系-美团点评之上篇（长文建议收藏）
https://mp.weixin.qq.com/s/gxR-KPCdfbHWX5I1um5x_g
reg 在线工具
浏览器禁止同源验证
https://blog.csdn.net/qq_32786873/article/details/70173151
移动端调试~
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script> eruda.init(); </script>
https://www.jianshu.com/p/d8e232b23f7a
https://github.com/liriliri/eruda
Node.js 模块系统源码探微
https://juejin.im/entry/5ded93fc6fb9a0166316c535
画图工具 plantuml
高德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插件(实战)
https://mp.weixin.qq.com/s/GJ1H6gMoB1BEYfQbF3RQpQ
北京电影学院发了一篇满是数学公式的计算机顶会论文，并开源了其代码
https://www.zhihu.com/people/dancerphil/activities
前端安全—你必须要注意的依赖安全漏洞
https://juejin.im/post/5e1d68fc6fb9a0300b4c0eac
3月
前端微服务在字节跳动的打磨与应用
前端要了解的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
如何设计实现 h5 页面搭建-数据模型
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 实现仿石墨的图片预览插件
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 生产环境调试
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
大规格文件的上传优化
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 的性能优化分享]
[一些可以帮到你的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://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页面，方便调试抓包、查看页面不同机型适配等开发工作
2020年第9周
- 20200224 Remax - 使用 React 开发小程序
- 20200225 可视化辅助编程在蚂蚁的探索之路
- 20200226 通过HTML属性可改善用户的双重身份验证体验
- 20200227 ECMAScript 2020 aka ES11
- 20200228 前端微服务在字节跳动的打磨与应用
2020年第10周
- 20200302 前端程序员要懂的 UI 设计知识
- 20200303 小白必看，JSBridge 初探
- 20200304 设计体系的响应式设计
- 20200305 解决了我很多在开发可视化时候写 ts 与 react hooks 的疑惑
- 20200306 Uglify vs Babel-minify vs Terser 一场代码压缩的pk
2020年第11周
- 20200309 页面The Slideout Footer的实现~
- 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 六个提升前端开发效率的工具
- 20200325 React Hook 中 createContext & useContext 跨组件透传上下文与性能优化
- 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 字节跳动的微前端沙盒实践
- 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 如何设计实现 h5 页面搭建-数据模型
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 实现仿石墨的图片预览插件
- 20200423 systems-design-for-advanced-beginners
- 20200424 尤雨溪在Vue3.0 Beta直播里聊到了这些…
2020年第18周
- 20200427 H5常见问题及解决方法
- 20200428 Web中的图像技术总结与实践
- 20200429 漫画版：什么是机器学习？
- 20200430 njs 在 nginx 的一个模块也支持执行脚本，语法是es5.1和一部分es6
2020年第19周
- 20200506 Google 官方文章——如何去做code review
- 20200507 小姐姐用动画图解Git命令，一看就懂！
- 20200508 node_modules 困境
2020年第20周
- 20200512 Spacing in CSS
- 20200513 凹凸的一篇：关于大文件上传的
- 20200514 新发现的一个应用监控系统，有效的缓解系统悄咪咪挂了的问题
- 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 状态管理库
2020年第22周
- 20200526 了解JS中的解构、剩余参数和展开语法
- 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个前端开发人员的救生工具
- 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周
2020年第27周
- 20200629 TypeScript 4.0 里面有哪些新特性
- 20200630 从 Fetch 到 Streams —— 以流的角度处理网络请求
- 20200701 美团外卖Flutter动态化实践
- 20200702 系统的学习代码重构和设计模式的一个网站
- 20200703 如何挑选数据可视化框架及平台 - 前端篇
2020年第28周
- 20200706 《对低代码、零代码产品的一些看法》
- 20200707 一文读懂 TypeScript 泛型及应用
- 20200708 美国版毕业“后浪”演讲全文
- 20200709 The Six Habits of Highly Effective Software Engineers
- 20200710 编写可维护的前端代码
2020年第29周
- 20200713 一篇经典文章，《认识垂直韵律》
- 20200714 webpack核心概念 webpack高阶概念
- 20200715 技术选型：没有谷歌的命，得了谷歌的病
- 20200716 The Cost of Javascript Frameworks
- 20200717 使用lazysize .js很容易进行延迟加载
2020年第30周
- 20200720 通过 webcam 摄像头追踪眼动记录
- 20200721 Chrome的新功能：CSS Overview，了解网站上使用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函数指南
- 20200806 How Are Function Components Different from Classes?
- 20200807 Into the Matrix with SVG Filters
2020年第33周
- 20200810 “网易云团队 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 实现一个简单的基于 WebAssembly 的图片处理应用
- 20200821 每日一文：使用滚动特效的最佳实践
2020年第35周
- 20200824 Build A Confirmation Modal in React with State Machines
- 20200825
- 20200826 网页布局都有哪种？一般都用什么布局？
- 20200827 React17新特性：启发式更新算法
- 20200828 奇妙的 CSS MASK
2020年第36周
- 20200831 CommonJS 和 ES6 Module 究竟有什么区别？
- 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 前端规范工具链落地实战
- 20200911 如何搭建一个属于自己的脚手架
2020年第38周
- 20200914 关于 useState 的一切
- 20200915 一篇看懂新手和老司机的区别
- 20200916 细数 TS 中那些奇怪的符号
- 20200917 Chrome插件开发全攻略
- 20200918 CKeditor 智能编辑器组件
2020年第39周
- 20200921 蚂蚁杨周璇：我做前端这十多年来的感悟
- 20200922 [译] 我是如何成为一名更优秀的程序员
- 20200923 最通俗的 React Fiber(时间分片) 打开方式
- 20200924 ESLint 修改点整理
- 20200925 面向未来的前端构建工具-vite
2020年第40周
- 20200927 《基于React-hook实现前端国际化方案》
- 20200928 零距离接触websocket
- 20200929 盘一盘那些提效/创意的宝藏网站
2020年第42周
- 20201012 JS数组奇巧淫技
- 20201013 理解TypeScript泛型
- 20201014 《理解TypeScript泛型》- understanding-typescript-generics
- 20201015 SVGA 动效格式调研
- 20201016
2020年第43周
- 20201019 推荐几个常用的Chrome插件 —— 让你使用Github效率翻倍
- 20201020 2020年你不应该错过的CSS新特性
- 20201021 13个受谷歌启发的代码评审标准
- 20201022 如何构建微前端
- 20201023
2020年第44周
- 20201026 这次彻底搞懂 Promise
- 20201027 推荐一个表格组件
- 20201028 es2020新特性
- 20201029 用Canvas实现一个动态甜甜圈图表
- 20201030 Chrome V8让你更懂JavaScript
2020年第45周
- 20201102 JavaScript ES2021最值得期待的新特性解析
- 20201103 利用 Coverage 检查js和css是否被执行覆盖
- 20201104 The psychology of learning to code
- 20201105 如何进行表单体验优化-中台系统
- 20201106 使用 React Hooks 实现状态管理，不使用 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 实现容器模式
- 20201120 除了Web和Node，JavaScript还能做什么
2020年第48周
- 20201123 CSS 排版与正常流 —— 重学 CSS
- 20201124 有关 KISS，SOLID，YAGNI 等一些软件开发原则缩写的解释
- 20201125 The DevOps Reading List: Choosing your next DevOps book
- 20201126 前端 api 请求缓存的 5 种方案k
- 20201127
2020年第49周
- 20201123 移动端UI一致性解决方案
- 20201124 Yarn 2.4 发布，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 现状调查
- 20201125 Typescript代码整洁之道
- 20201126 12 CSS Libraries for Beautiful Image Hover Effects
- 20201127 这些高阶的函数技术，你掌握了么
程序员写 PPT 的正确姿势 — Reveal.js
作为一个程序员，在工作中需要做一些技术分享或项目汇报时，往往需要花费很长时间去做一个 PPT。Reveal 是一个运行在浏览器上的 PPT，让我们可以使用 HTML 甚至是 Markdown 语法去实现一个 PPT。Reveal 支持众多特性，例如自动动画、演讲者注释、代码语法高亮、导出 PDF 等，同时内置了若干默认主题。另外介绍一个项目 reveal-md，它对 Reveal 进行了一层封装，帮助我们使用 Markdown 语法快速地实现一个 PPT。 (via.陈嘉健)
使用 CSS Scroll Snap 实现滑动容器
你是否曾希望 CSS 能原生实现一个可吸附的滑动容器呢？本文将深入 CSS Scroll Snap 属性，带你了解滚动捕抓技术。 (via.何明晋)
谷歌录屏教学神器
[使用Web Vitals改善您的网站](https://developers.google.com/learn/pathways/web-vitals
)
