2019

9月

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

https://aijs.rocks/

React UI 组件库

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

时间转换 API 众多，体积小，支持tree-shaking 对比dayjs和momentjs

https://date-fns.org/

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

小微项目的业务中台解决方案

《Headless CMS——小微项目的业务中台解决方案》

如何监控网页崩溃？

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 模块系统源码探微

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插件(实战)

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

北京电影学院发了一篇满是数学公式的计算机顶会论文，并开源了其代码

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

前端安全—你必须要注意的依赖安全漏洞

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

3月

前端微服务在字节跳动的打磨与应用

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

如何设计实现 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 的性能优化分享]

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页面，方便调试抓包、查看页面不同机型适配等开发工作

2020年第9周

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周

2020年第39周

20200921 蚂蚁杨周璇：我做前端这十多年来的感悟
20200922 [译] 我是如何成为一名更优秀的程序员
20200923 最通俗的 React Fiber(时间分片) 打开方式
20200924 ESLint 修改点整理
20200925 面向未来的前端构建工具-vite

2020年第40周

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周

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 是一个运行在浏览器上的 PPT，让我们可以使用 HTML 甚至是 Markdown 语法去实现一个 PPT。Reveal 支持众多特性，例如自动动画、演讲者注释、代码语法高亮、导出 PDF 等，同时内置了若干默认主题。另外介绍一个项目 reveal-md，它对 Reveal 进行了一层封装，帮助我们使用 Markdown 语法快速地实现一个 PPT。 (via.陈嘉健)

使用 CSS Scroll Snap 实现滑动容器

你是否曾希望 CSS 能原生实现一个可吸附的滑动容器呢？本文将深入 CSS Scroll Snap 属性，带你了解滚动捕抓技术。 (via.何明晋)

前端宝藏