web-developer-resources

web-developer-resources copied to clipboard

web-development-miscellaneous-resources

A list of web full stack resources and summarize.

在软件开发中，技术变化如此之快，你花费了大量时间学习技术和工具，一旦这些技术被取代，你的知识将变得毫无价值，因为它们大部分都是实施的细节。

Categories

• CSS
  • Basis
• JavaScript
  • Basis
  • Deeply
  • Modular
• TypeScript
• Front-End Library
  • jQuery
    • Deferred
• Canvas
• Front-End Frame
  • Vue
  • React
• WeChat Mini-Program
• Web Mobile App
  • 移动端适配
  • H5&Hybrid
• Front-End Engineering
  • Babel
  • Webpack
  • 版本管理
  • 编码整洁
• Front-End Resources
• Browser
  • BOM
  • 加载
  • 渲染
  • 线程
  • 网络
  • 异常
  • 存储
  • 安全
  • 性能
• Video
• PWA
• Serverless
• WebAssembly
• Node
• Flutter
  • 教程
  • WebView
  • Flutter Web
• Other

CSS

Basis

• 如何居中一个元素 - 介绍水平居中，垂直居中，还有水平垂直居中各种办法。
• 文本溢出截断省略方案 - 文本溢出截断省略方案合集。
• CSS 过渡动画特效 - CSS过渡动画特效，附带常见动效分享。
• animation 动画技巧与细节 - animation 动画属性详解。

JavaScript

Basis

• JavaScript 指南 - MDN web docs 的完整的 JavaScript 参考文档
• JavaScript 标准参考教程 - 　阮一峰 JavaScript 标准参考教程。
• 零基础 JavaScript 全栈教程 - 廖学峰的 JavaScript 教程。
• 现代 JavaScript 教程 - 以最新的 JavaScript 标准为基准，从基础到高阶的 JavaScript 相关知识。

Deeply

• JavaScript 执行机制 - 浅读 JavaScript 执行机制。
• Event Loop 的规范和实现 - Event Loop 规范、实现、应用。
• JavaScript 事件循环：从起源到浏览器再到 Node.js - 从浏览器角度出发探讨 JavaScript 的事件循环。
• 浅谈 AST（抽象语法树） - 平庸前端码农之蜕变 — AST。
• Javascript 闭包 - 深入浅出 Javascript 闭包。
• 简明 JavaScript 函数式编程——入门篇 - JavaScript 函数式编程解读。
• JavaScript 错误处理 - 一文解读各场景错误处理。
• 尾递归优化 - 简述递归优化-尾递归优化。

Modular

• JavaScript 模块化的历史进程 - 模块化的历史进程历史故事。
• 四种模块加载方案 - AMD、CMD、CommonJS、ES6 模块。
• Javascript 模块化管理 - Javascript 模块化管理的发展历程。
• 前端模块化详解 - 前端模块化详解。
• node_modules 困境 - 目前 node_modules 在使用场景的一些问题以及对比其他语言的包管理工具。
• 前端模块化的十年征程 - 模块化历史进程。

TypeScript

• 深入理解 TypeScript

Front-End Library

jQuery

Deferred

jQuery 的 Deferred/Promise

• Category: Deferred Object - 官网实例详解。
• Deferred 对象详解 - jQuery 的 Deferred 对象详解 - 阮一峰的网络日志。
• ES6 Promise 和 jQuery Deferred 异同 - 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise。

Canvas

• Canvas 教程 - 连载详细的 Canvas 教程
• canvas 图像旋转与翻转 - canvas 图像旋转与翻转几种方式。
• 跨平台Web Canvas渲染引擎架构的设计与思考 - 主要从技术视角介绍下跨平台WebCanvas的架构设计以及一些关键模块的实现方案(以Android为主)。

Front-End Frame

• 现代 js 框架存在的根本原因 - 深入思考为何前端需要框架，以及 web components 是否可以代替前端框架。
• 现代 JavaScript 概览 - 现代 JavaScript 新概念。

Vue

• Vue 实践技巧 - vue 实用的小技巧。
• vue 修饰符总结 - 详细的 vue 修饰符总结。
• Vue 父子组件通信总结 - Vue 父子组件通信的十种方式。
• 加快 Vue 项目的开发速度 - 巧用工具开发 vue 项目。
• Vue.js 和第三方 JavaScript 的逐渐集成 - Vue.js 和第三方 JavaScript 的逐渐集成方案
• 9 performance secrets revealed - 九种Vue性能优化方法，演讲视频与译文。

React

• React.js 小书 - 开源、免费、专业、简单的 React.js 在线教程。
• 实现简版 react - 200 行代码实现简版 react。
• 22 React Performance Optimization Techniques - 优化 React 性能的22个技巧。
• 性能！！让你的 React 组件跑得再快一点 - 分析渲染(Render)时影响性能的点。

WeChat Mini-Program

• 小程序攻略 - 由银科控股融汇研发部曹俊及其团队总结。
• 小程序多端框架全面测评 - 多端框架对比。

Web Mobile App

移动端适配

• 关于移动端适配，你必须要知道的 - 像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等概念及适配处理。
• Web移动端适配你应该了解得再多一些 - Retina 高分辨率显示屏在移动端适配的问题。
• Retina 屏下的图片优化 - 设备分辨率，屏幕密度(PPI)，Retina 屏(DIPS) 等概念。
• 移动端真机调试指南 - 各移动端真机调试情况。
• 40条移动端H5坑位指南 - 从 HTML、CSS、JS 方向总结40条移动端H5常见的问题。

H5&Hybrid

• React Native vs. Cordova、PhoneGap、Ionic - [译] React Native vs. Cordova、PhoneGap、Ionic，等等。
• React Native 新架构 - FB 团队正在重构的 ReactNative 新架构，主要当前架构，Bridge带来的问题，新架构，JSI，Fabric，TurboModules，CodenGen及LeanCore等概念。
• 浅谈移动端开发技术 - 移动端开发目前常见的一些技术。

Front-End Engineering

• QQ音乐商业化Web团队前端工程化实践总结- ，结合移动端的基础库重构和UI组件库开发在前端工程化的一些探索和实践。

Babel

引入 babel 来解决代码兼容性的问题

• Babel - Babel 中文站。

babel 工作原理

• 需要了解的 Babel 知识 - Babel 是怎么工作的及 Babel 编译的三个阶段。
• 解剖Babel - 从babel-core为入门，Babel的上层能力：polyfill，DSL转换（解析JSX），语法转换（高级语法解析为当前可用的实现）。

polyfill

• babel-polyfill VS babel-runtime VS babel-preset-env - 当运行环境不支持新的 API,对比这几种的解决方案。
• 对 babel polyfill 的一些理解 - babel-polyfill、babel-runtime 和 babel-plugin-transform-runtime 之间的联系。
• Polyfill 方案的过去、现在和未来 - Polyfill 方案。

Webpack

tree Shaking

• Tree Shaking in Webpack - Tree Shaking in Webpack 介绍

打包原理解析与实现

• webpack工程化打包原理解析与实现
• 你的Tree-Shaking并没什么卵用 - 本文将探讨tree-shaking在当下的现状，以及研究为什么tree-shaking依旧举步维艰的原因，最终总结当下能提高tree-shaking效果的一些手段。

版本管理

• LearnGitBranching- 交互式的 git 可视化练习和学习。

• 高效使用 commit - git commit 格式规范可以在浏览项目历史的过程中看到更易读的信息，并且能用 commit 的信息直接生成 change log 。

编码整洁

• clean-code-javascript - 代码整洁的 JavaScript，一个使用 JavaScript 来生产 可读的， 可重用的， 以及可重构的软件的指南。

Front-End Resources

• devhints - 优雅的 cheatsheet 大全

Browser

架构

• 深入理解现代浏览器 - 译文来源。

内存

• 前端内存泄漏及万善的解决方案 - 前端常见的内存泄漏场景。
• V8引擎的垃圾回收 - v8 内存结构、垃圾回收机制（标记清除、引用计数）、V8垃圾回收策略（新生代、老生代）。
• 内存泄漏排查 - 以 Chrome devTools 为案例查看内存情况。

BOM

• 你不知道的 Blob 总结 - 总结 Blob 的使用及应用场景。
• 玩转前端二进制 - 本篇文章总结了浏览器端的二进制以及有关数据之间的转化，如 ArrayBuffer，TypedArray，Blob，DataURL，ObjectURL，Text 之间的互相转换。
• 超好用的Blob对象 - Blob 是 Binary Large Object 的缩写，Blob 对象表示一个不可变、原始数据的类文件对象。

加载

• 从输入 URL 到页面加载的过程 - 梳理一个较为完整的前端向知识体系。
• Event Loop 和 JS 引擎、渲染引擎的关系 - JS 引擎的编译流水线、渲染引擎的渲染流程，以及引入 Event Loop 作用。

渲染

• 深入浅出浏览器渲染原理 - 以 Webkit 为例，对现代浏览器的渲染过程进行一个深度的剖析。
• 浏览器渲染笔记 - 着重介绍绘制 paint (分层-渲染层Paint Layer、分层-合成层Composite Layer）、层绘制 paint、栅格化流程。浏览器渲染小实战思考。

线程

• 浏览器的单线程到 JS 单线程 - 从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理。

网络

• 九种跨域方式实现原理 - 前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式。
• HTTP/2 及 HTTP/3特性 - 一文读懂HTTP/2 及 HTTP/3特性。
• 15 张动图全面讲解 CORS - 从同源策略到CORS（跨域资源共享）分析，再CORS 两种类型的请求以及跨越情况下的认证信息发送。

异常

• 前端异常捕获 - 解读前端异常捕获，优雅处理前端异常。
• 前端错误监控 - 前端监错误监控，可以分为脚本错误监控、请求错误监控以及资源错误监控。

存储

• 深入理解浏览器的缓存机制 - 通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。

安全

• 常见六大 Web 安全攻防解析 - 常见六大 Web 安全攻防解析。
• 单点登录 - 单点登录( Single Sign On ，简称 SSO）详解。
• 混合加密 - 混合加密详解及加密流程图。

性能

• 网站优化，这些工具你一定用得着 - 关于优化工具，两方面：「性能评估工具」和「优化工具」。
• 网页性能管理详解 - 详细介绍性能问题的出现原因，以及解决方法。
• 新一代 Web 性能体验和质量指标 - 解读新一代 Web 性能体验和质量指标。

Video

• 如何开发一款H5小程序直播 - 从开发环境到H5端播放器再到微信小程序直播路线讲解，设计内容直播过程中的采集、编码、推流，视频的格式及直播协议等。

PWA

• 现代化 Web 开发实践之 PWA - Progressive Web App 实战过程的一些问题。

Serverless

• 探索 Serverless 中的前端开发模式 - 从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面，与大家探讨 Serverless 中的前端开发模式。
• Serverless 给前端带来了什么 - 前端框架总是带入后端思维，而 Serverless 则是把前端思维带入了后端运维。
• Serverless 将使前后端从分离再度走向融合 - 云计算经过了从物理机到虚拟机、从虚拟机到云计算、从云计算到容器这几个阶段，而容器之后的下一个阶段，则是 Serverless。

Micro Front-End

• 从场景倒推我们要什么样的微前端体系 - 独立上线，互不干扰，微前端的体系化。
• 基于 Vue 技术栈的微前端方案实践 - 通过预加载路由与懒加载路由两种方式来实现基于 Vue 技术栈的微前端系统。

Code SandBox

• 搭建一个属于自己的在线 IDE - 探究 CodeSandbox 实现在线 SandBox。

Web Workers

• Web Workers 分类及 5 个使用场景 - 译文来自，Web Workers 概览及应用场景。
• 2021 Web Worker 现状 - 译文来自，Web Workers 现状及JavaScript 的并发模型介绍，Comlink WebWorkers postMessage 消息通信管理。

WebAssembly

• WebAssembly 现状与实战
• 使用 FFmpeg 与 WebAssembly 实现纯前端视频截帧

Node

• Browser 与 Node 的 Event Loop 的区别 - 浏览器与 Node 的事件循环的区别。
• 深入理解Node.js 中的进程与线程 - 线程与进程的概念及关于单线程的误区。

Flutter

教程

• Flutter 实战

WebView

• 基于Flutter 的 Hybrid Webview 容器实践 - 以 iOS 为例实现 Flutter 的 Webview 插件。

Flutter Web

• Flutter Web 是怎么工作的 - 从架构分析 Flutter Web 工作原理。
• Flutter Web 在美团外卖的实践及性能优化探索与实践 - 美团外卖商家端基于 FlutterWeb 的技术探索。

Other

• 前端工程思想 - 想写好前端，先练好内功（开闭原则、函数式编程、消息机制）。
• 程序员如何把控自己的职业 - 程序员职业思考。
• 计算机教育中缺失的一课 - 麻省理工学院计算机课程,介绍基本的软件开发工具，提高使用工具的能力。