Bookmarks

web 前端学习资源分享

w3cplus

印记中文出品，唯一与官方文档同步的中文文档

极限前端

js, css 黑科技

计算机书籍控

JavaScript 基础系列

• 基础进阶系列
• JavaScript 深入系列
• 轻松学习 JavaScript
• JavaScript 浮点数陷阱及解法
• JavaScript 的 this 原理
• JavaScript This 的六道坎
• JavaScript 中 this 的运行机制及爬坑指南
• 别再为了 this 发愁了 ——JS 中的 this 机制
• 闭包，是真的美
• 你应该知道的 setTimeout 秘密
• 10 分钟理解 JS 引擎的执行机制
• javascript 常用实例的实现与封装
• 简单粗暴地理解 js 原型链 –js 面向对象编程
• 一篇文章理解 JS 继承
• 如何继承 Date 对象？由一道题彻底弄懂 JS 继承
• JavaScript 创建对象的七种方式
• 九种跨域方式实现原理（完整版） - 掘金
• 不要再问我跨域的问题了
• ajax 跨域，这应该是最全的解决方案了
• 用信鸽来解释 HTTPS
• 10 种最常见的 Javascript 错误
• JavaScript 错误处理和堆栈追踪
• 从一个 JSON.parse 错误深入研究 JavaScript 的转义字符

JavaScript 代码片段

• 精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解
• 30 seconds of code
• 打造自己的 JavaScript 武器库
• 分享前端开发常用代码片段 - 值得收藏
• JavaScript 有用的代码片段和 trick

JavaScript 代码规范

• 前端 JS 代码规范
• 为什么尽量别用 setInterval
• DOM 操作成本到底高在哪儿？
• 为什么我的代码让别人看起来头皮发麻？
• 前端小团队建设

JavaScript 扩展

• 2018 年最值得关注的 JavaScript 趋势
• 数组的遍历你都会用了，那 Promise 版本的呢
• Promise 实现原理（附源码）
• 关于 ES6 中 Promise 的面试题
• JavaScript 反调试技巧
• WebView 缓存原理分析和应用
• Javascript 将 html 转成 pdf, 下载, 支持多页哦
• 利用 javascript 实现富文本编辑器
• 如何使用 JavaScript 实现一门编程语言
• 一行代码实现一个简单的模板字符串替换
• 20 行 JS 代码实现粘贴板功能
• 关于负载均衡的一切：总结与思考
• 在 2018 年你应该知道的 9 个关于 CSS 组件化的 JS 库
• 一篇文章理解 Web 缓存
• 图片上传组件开发【思路篇】
• JSON Web Token 入门教程
• 如何精确统计页面停留时长
• JavaScript 反调试技巧
• AST抽象语法树——最基础的javascript重点知识，99%的人根本不了解 - node.js优雅之道 - SegmentFault 思否

TypeScript

• 深入理解 TypeScript
• TypeScript 入门教程

ES6

• ES6 javascript 实用开发技巧
• 用图表和实例解释 Await 和 Async
• async/await 是如何让代码更加简洁的？

Vue

• Vue技术内幕
• Vue2.x 源码解析系列
• Vue.js 技术揭秘
• Vue源码阅读
• Vue 相关开源项目库汇总
• 一个 Vue 页面的内存泄露分析
• Vue 兼容 ie9 的全面解决方案
• Vue.js 最佳实践（五招让你成为 Vue.js 大师）
• 在 VueJS 应用中管理用户权限
• VUE 使用中踩过的坑
• Vue 使用中的小技巧
• Vue 之 slot 深度复制
• Vue.js 父子组件通信的十种方式
• Vue 超快速学习
• Vue 项目架构设计与工程化实践
• Vue 数据响应式原理
• Vue 面试中，经常会被问到的面试题/Vue 知识点整理
• Vue 高版本中一些新特性的使用
• 用 Vue 编写一个长按指令
• 你不知道的Virtual DOM
• 加快Vue项目的开发速度 - 掘金

React

• 图解 React
• 图解 React Native
• 组件、Prop 和 State
• React Native 基础 & 入门教程：以一个 To Do List 小例子，看 props 和 state
• Redux进阶（一）
• 基于 React 的表单解决方案 noForm
• 30 分钟精通 React Hooks
• 当初要是看了这篇，React高阶组件早会了。
• 200行代码实现简版react🔥 - 掘金

微信小程序

• 微信小程序开发 01 - 小程序的执行流程是怎么样的？
• 微信小程序开发 02 - 小程序基本介绍
• 微信小程序开发 03 - 这是一个组件
• 微信小程序开发 04 - 打造自己的 UI 库
• 微信小程序开发 05 - 日历组件的实现
• 微信小程序开发 06 - 一个业务页面的完成
• 微信小程序开发 07 - 列表页面怎么做
• 【微信小程序项目实践总结】30 分钟从陌生到熟悉
• vue 和微信小程序的区别、比较
• 小程序开发实践总结
• 终极蛇皮上帝视角之微信小程序之告别“刀耕火种”
• 小程序构建骨架屏的探索
• H5 页面在微信端的分享
• 微信小程序之圆形进度条
• 微信小程序-自定义下拉刷新 - 【艾伦】 - 博客园
• 从入门到上线一个天气小程序 - 个人文章 - SegmentFault 思否

CSS

• 我脑中飘来飘去的 css 魔幻属性
• CSS 进阶系列
• 大学没学过数学也要理解 CSS3 transform 中的 matrix
• Vertical-Align，你应该知道的一切
• 滑向未来（现代 JavaScript 与 CSS 滚动实现指南）
• 利用 CSS 变量实现令人震惊的悬浮效果
• 神奇的 conic-gradient 圆锥渐变
• 神奇的CSS3混合模式
• 妙用 scale 与 transfrom-origin，精准控制动画方向
• 不可思议的纯 CSS 导航栏下划线跟随效果
• 你所不知道的 CSS 滤镜技巧与细节
• 你所不知道的 CSS 阴影技巧与细节
• 使用css 3 制作长投影Long Shadow
• 如何用 CSS 实现多行文本的省略号显示
• 纯 CSS 实现多行文字截断
• 神奇的选择器 :focus-within
• 滚动视差？CSS 不在话下
• 灵活的 overflow
• 利用CSS改变图片颜色的100种方法！
• 欲练 JS，必先攻 CSS——前端修行之路
• CSS3 动画卡顿性能优化解决方案
• CSS 中重要的层叠概念
• 前端布局基础概述
• CSS 布局解决方案（终结版）
• CSS Grid 中的陷阱和绊脚石
• CSS 样式书写规范
• 第三方 CSS 并不安全
• loaders.css - Delightful and performance-focused pure css loading animations
• Load Awesome - Pure CSS Loaders and Spinners
• Hover.css - Collection of CSS3 powered hover effects
• Animate.css - Bunch of cool, fun, and cross-browser animation.
• Write your own code library - CSS3 common animation implementation

HTML

• 欢迎来到 HTML5.2 时代！
• 主流浏览器图片反防盗链方法总结

面试

• 面试分享：2018 阿里巴巴前端面试总结 (题目 + 答案)
• 前端面试题 - url、href、src
• 2018 浅谈前端面试那些事
• 50 道 CSS 基础面试题（附答案）
• 从输入 URL 到页面加载的过程？如何由一道题完善自己的前端知识体系！
• JavaScript 面试必须知道的 10 个概念
• 一道面试题引发的对 javascript 类型转换的思考
• JS 高级必须知道的几个点！
• 37 个 JavaScript 基本面试问题和解答
• 37 Essential JavaScript Interview Questions
• 现代 js 框架存在的根本原因
• FE-interview
• 44 个 Javascript 变态题解析
• 面试官：请手写一个 webpack4.0 配置
• 前端面试总结——http、html 和浏览器篇
• 拜托，面试别再问我斐波那契数列了！！！
• 牛客网
• 10 秒抓人眼球的“技术类简历”怎么写？
• 新鲜出炉的 8 月前端面试题
• 一年半经验，百度、有赞、阿里前端面试总结 - 麦乐 - SegmentFault 思否
• FEGuide/vue.md at master · FEGuideTeam/FEGuide
• 前端面试重难点
• 前端笔试之手写代码(一)
• 总结了17年初到18年初百场前端面试的面试经验(含答案)

移动端

• 手机端页面在项目中遇到的一些问题及解决办法（持续更新）
• 了解真实的『REM』手机屏幕适配
• 移动 web 开发问题和优化小结
• 7 种方法解决移动端 Retina 屏幕 1px 边框问题

算法

• javascript 背包问题详解
• 常用排序算法总结 (一)
• 常用排序算法总结 (二)
• JavaScript 中常见排序算法详解

架构

• 一篇文章了解架构模式：MVC/MVP/MVVM

安全

• 30 分钟理解 CORB 是什么
• 如何防止 CSRF 攻击？

箴言

• 懂得这 40 条编程箴言才称得上优秀程序员
• 前端开发者必备思维
• 一个老程序员的忠告：不要一辈子靠技术生存
• 我是如何从零开始学习前端的
• 如何在疲劳的 JS 世界中持续学习

webpack

• webpack 详解
• 基于 webpack 的前后端分离开发环境实践
• 如何写好. babelrc？Babel 的 presets 和 plugins 配置解析
• webpack 启动代码源码解读
• 手摸手，带你用合理的姿势使用webpack4

Git

• An hour to learn Git
• 猴子都能懂的 git
• 廖雪峰 - 史上最浅显易懂的 Git 教程！

Node.js

• Node 定时器详解
• 从 1 到完美，用 node 写一个命令行工具
• 使用 cross-env 解决跨平台设置 NODE_ENV 的问题
• utility - A collection of useful utilities
• cheerio - Implementation of core jQuery designed specifically for the server
• mongoose - elegant mongodb object modeling for node.js
• SuperAgent - Super Agent is light-weight progressive ajax API
• connect-mongo - MongoDB session store for Express and Connect
• Morgan - HTTP request logger middleware for node.js

系统

• 当你「ping 一下」的时候，你知道它背后的逻辑吗？
• chmod 755 究竟是什么鬼？
• 前后端均适用的网络知识点大全

Front-end web UI/Framework

• Bootstrap - HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
• Angular-Material - Implementation of Google’s Material Design Specification

Fonts

• Google Fonts - So it’s google fonts :D

Icons

• Github-Octicons - GitHub’s icons
• Font-Awesome - Scalable vector icons that can instantly be customized
• Iconfont - Alibaba Icon Library (Chinese)
• flag-icon-css - Country Flags
• weloveiconfonts - Icon fonts
• Material Icon - Material icons

Color

• Minimalist-Color-Palettes - Minimalist Color Palettes
• Flatuiculors

Tool

• ProcessOn - UML web app for team (Chinese)
• draw.io - UML web app for team
• WinSCP - SFTP, SCP and FTP client for Windows

Books

• GitHub Cheat Sheet - GitHub Practical Tips
• Git Quick Reference - Git Quick Reference
• HTTP API Design Guide - HTTP+JSON API design practices

Websites

• HTML5 Up - Site Template