A list of web full stack resources and summarize.
在软件开发中,技术变化如此之快,你花费了大量时间学习技术和工具,一旦这些技术被取代,你的知识将变得毫无价值,因为它们大部分都是实施的细节。
- CSS
- JavaScript
- TypeScript
- Front-End Library
- Canvas
- Front-End Frame
- WeChat Mini-Program
- Web Mobile App
- Front-End Engineering
- Front-End Resources
- Browser
- Video
- PWA
- Serverless
- WebAssembly
- Node
- Flutter
- Other
- 如何居中一个元素 - 介绍水平居中,垂直居中,还有水平垂直居中各种办法。
- 文本溢出截断省略方案 - 文本溢出截断省略方案合集。
- CSS 过渡动画特效 - CSS过渡动画特效,附带常见动效分享。
- animation 动画技巧与细节 - animation 动画属性详解。
- JavaScript 指南 - MDN web docs 的完整的 JavaScript 参考文档
- JavaScript 标准参考教程 - 阮一峰 JavaScript 标准参考教程。
- 零基础 JavaScript 全栈教程 - 廖学峰的 JavaScript 教程。
- 现代 JavaScript 教程 - 以最新的 JavaScript 标准为基准,从基础到高阶的 JavaScript 相关知识。
- JavaScript 执行机制 - 浅读 JavaScript 执行机制。
- Event Loop 的规范和实现 - Event Loop 规范、实现、应用。
- JavaScript 事件循环:从起源到浏览器再到 Node.js - 从浏览器角度出发探讨 JavaScript 的事件循环。
- 浅谈 AST(抽象语法树) - 平庸前端码农之蜕变 — AST。
- Javascript 闭包 - 深入浅出 Javascript 闭包。
- 简明 JavaScript 函数式编程——入门篇 - JavaScript 函数式编程解读。
- JavaScript 错误处理 - 一文解读各场景错误处理。
- 尾递归优化 - 简述递归优化-尾递归优化。
- JavaScript 模块化的历史进程 - 模块化的历史进程历史故事。
- 四种模块加载方案 - AMD、CMD、CommonJS、ES6 模块。
- Javascript 模块化管理 - Javascript 模块化管理的发展历程。
- 前端模块化详解 - 前端模块化详解。
- node_modules 困境 - 目前 node_modules 在使用场景的一些问题以及对比其他语言的包管理工具。
- 前端模块化的十年征程 - 模块化历史进程。
jQuery 的 Deferred/Promise
- Category: Deferred Object - 官网实例详解。
- Deferred 对象详解 - jQuery 的 Deferred 对象详解 - 阮一峰的网络日志。
- ES6 Promise 和 jQuery Deferred 异同 - 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise。
- Canvas 教程 - 连载详细的 Canvas 教程
- canvas 图像旋转与翻转 - canvas 图像旋转与翻转几种方式。
- 跨平台Web Canvas渲染引擎架构的设计与思考 - 主要从技术视角介绍下跨平台WebCanvas的架构设计以及一些关键模块的实现方案(以Android为主)。
- 现代 js 框架存在的根本原因 - 深入思考为何前端需要框架,以及 web components 是否可以代替前端框架。
- 现代 JavaScript 概览 - 现代 JavaScript 新概念。
- Vue 实践技巧 - vue 实用的小技巧。
- vue 修饰符总结 - 详细的 vue 修饰符总结。
- Vue 父子组件通信总结 - Vue 父子组件通信的十种方式。
- 加快 Vue 项目的开发速度 - 巧用工具开发 vue 项目。
- Vue.js 和第三方 JavaScript 的逐渐集成 - Vue.js 和第三方 JavaScript 的逐渐集成方案
- 9 performance secrets revealed - 九种Vue性能优化方法,演讲视频与译文。
- React.js 小书 - 开源、免费、专业、简单的 React.js 在线教程。
- 实现简版 react - 200 行代码实现简版 react。
- 22 React Performance Optimization Techniques - 优化 React 性能的22个技巧。
- 性能!!让你的 React 组件跑得再快一点 - 分析渲染(Render)时影响性能的点。
- 小程序攻略 - 由银科控股融汇研发部曹俊及其团队总结。
- 小程序多端框架全面测评 - 多端框架对比。
- 关于移动端适配,你必须要知道的 - 像素、分辨率、
PPI
、DPI
、DP
、DIP
、DPR
、视口等概念及适配处理。 - Web移动端适配你应该了解得再多一些 - Retina 高分辨率显示屏在移动端适配的问题。
- Retina 屏下的图片优化 - 设备分辨率,屏幕密度(PPI),Retina 屏(DIPS) 等概念。
- 移动端真机调试指南 - 各移动端真机调试情况。
- 40条移动端H5坑位指南 - 从 HTML、CSS、JS 方向总结40条移动端H5常见的问题。
- React Native vs. Cordova、PhoneGap、Ionic - [译] React Native vs. Cordova、PhoneGap、Ionic,等等。
- React Native 新架构 - FB 团队正在重构的 ReactNative 新架构,主要当前架构,Bridge带来的问题,新架构,JSI,Fabric,TurboModules,CodenGen及LeanCore等概念。
- 浅谈移动端开发技术 - 移动端开发目前常见的一些技术。
- QQ音乐商业化Web团队前端工程化实践总结- ,结合移动端的基础库重构和UI组件库开发在前端工程化的一些探索和实践。
引入 babel 来解决代码兼容性的问题
- Babel - Babel 中文站。
- 需要了解的 Babel 知识 - Babel 是怎么工作的及 Babel 编译的三个阶段。
- 解剖Babel - 从
babel-core
为入门,Babel的上层能力:polyfill,DSL
转换(解析JSX
),语法转换(高级语法解析为当前可用的实现)。
- babel-polyfill VS babel-runtime VS babel-preset-env - 当运行环境不支持新的 API,对比这几种的解决方案。
- 对 babel polyfill 的一些理解 - babel-polyfill、babel-runtime 和 babel-plugin-transform-runtime 之间的联系。
- Polyfill 方案的过去、现在和未来 - Polyfill 方案。
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 来生产 可读的, 可重用的, 以及可重构的软件的指南。
- devhints - 优雅的 cheatsheet 大全
- 前端内存泄漏及万善的解决方案 - 前端常见的内存泄漏场景。
- V8引擎的垃圾回收 - v8 内存结构、垃圾回收机制(标记清除、引用计数)、V8垃圾回收策略(新生代、老生代)。
- 内存泄漏排查 - 以 Chrome devTools 为案例查看内存情况。
- 你不知道的 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 性能体验和质量指标。
- 如何开发一款H5小程序直播 - 从开发环境到H5端播放器再到微信小程序直播路线讲解,设计内容直播过程中的采集、编码、推流,视频的格式及直播协议等。
- 现代化 Web 开发实践之 PWA - Progressive Web App 实战过程的一些问题。
- 探索 Serverless 中的前端开发模式 - 从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。
- Serverless 给前端带来了什么 - 前端框架总是带入后端思维,而 Serverless 则是把前端思维带入了后端运维。
- Serverless 将使前后端从分离再度走向融合 - 云计算经过了从物理机到虚拟机、从虚拟机到云计算、从云计算到容器这几个阶段,而容器之后的下一个阶段,则是 Serverless。
- 从场景倒推我们要什么样的微前端体系 - 独立上线,互不干扰,微前端的体系化。
- 基于 Vue 技术栈的微前端方案实践 - 通过预加载路由与懒加载路由两种方式来实现基于 Vue 技术栈的微前端系统。
- 搭建一个属于自己的在线 IDE - 探究 CodeSandbox 实现在线 SandBox。
- Web Workers 分类及 5 个使用场景 - 译文来自,Web Workers 概览及应用场景。
- 2021 Web Worker 现状 - 译文来自,Web Workers 现状及JavaScript 的并发模型介绍,Comlink WebWorkers postMessage 消息通信管理。
- Browser 与 Node 的 Event Loop 的区别 - 浏览器与 Node 的事件循环的区别。
- 深入理解Node.js 中的进程与线程 - 线程与进程的概念及关于单线程的误区。
- 基于Flutter 的 Hybrid Webview 容器实践 - 以 iOS 为例实现 Flutter 的 Webview 插件。
- Flutter Web 是怎么工作的 - 从架构分析 Flutter Web 工作原理。
- Flutter Web 在美团外卖的实践及性能优化探索与实践 - 美团外卖商家端基于 FlutterWeb 的技术探索。
- 前端工程** - 想写好前端,先练好内功(开闭原则、函数式编程、消息机制)。
- 程序员如何把控自己的职业 - 程序员职业思考。
- 计算机教育中缺失的一课 - 麻省理工学院计算机课程,介绍基本的软件开发工具,提高使用工具的能力。