logo头像

总有人间一两风,填我十万八千梦

网罗天下好教程

总结了一下我看过的好的教程,多数为系列文章,鉴于如今信息鱼龙混杂,这篇文章可以省去很多找好教程的时间。

入门级

HTML

手把手教你使用Hexo + Github Pages搭建个人独立博客

很完整很详细的 Hexo 搭建个人博客教程

从0到1搭建和部署个人博客

此教程会教你从 0 到 1 搭建一个完整的博客,包括前端展示页、后台管理系统、后端接口及接口文档、服务端部署整个完整流程。技术栈是 vue+express+mongodb

Hexo 主题开发指南

该文章包含的内容如下:

  • 主题的基本结构
  • 常见问题
  • 常用页面的实现
  • 基本工具

CSS

CSS布局说——可能是最全的

其实很多时候,我们都会在布局上花费很多时间,尤其是遇到一个比较“严格”的设计师的时候,而 css 虽然语法简单(css 有语法?),但是真正用起来会有很多学问,而布局这种问题是老生常谈的问题了,这篇来自 SegmentFault的文章对 css 中的布局的相关知识进行了总结,满满的干货。

CSS 中重要的层叠概念

作者参考了很多关于层叠概念的文章,对这一经常迷糊的概念进行了全面总结,讲解的非常清晰全面,是我看过的讲层叠概念最好的文章,十分值得一看!

JavaScript

深入理解 TypeScript

此书是《TypeScript Deep Dive》的中文翻译版

TypeScript handbook

这本书是官方推荐的入门手册,这里给的链接是中文翻译版的链接,翻译的质量非常好,虽然内容没有英文官方文档新,不过学习新的东西最好还是从自己最熟悉的内容入手,所以不妨先看中文文档。

写给不耐烦程序员的 Javascript

该书尽可能的从一个符合现代理念的角度出发,让初学者能更容易的学习 JavaScript。

一点微小的工作:

  • 从一开始就着眼于现代功能,快速入门。
  • 大多数章节都提供测试驱动的练习和测验。
  • 涵盖了 JavaScript 的所有基本功能,包括 ES2019。
  • 可选的高级部分能让您继续深入挖掘。
  • 不需要 JavaScript 的预备知识,但您应该知道如何编程。

英文原文:http://exploringjs.com/impatient-js/

从零开始构建 JavaScript 技术栈 - 中文版

这是一个简单直接的 JavaScript 技术栈构建指南。在此之前,你需要掌握基本的编程知识和一些 JavaScript 基础。本教程旨在将所有上图这些工具结合起来使用,并为每个工具提供最简单的示例。 你可以把它当作从零开始编写代码样板的示范。

TypeScript 入门教程

本书着重于从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript,希望能给大家一些帮助和启示。

《TypeScript 入门教程》全面介绍了 TS 强大的类型系统,完整而简洁,示例丰富,比官方文档更易读,非常适合作为初学者学习 TS 的第一本书。 —— 阮一峰

Javascript 教程

该教程全面介绍 JavaScript 核心语法,从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。
本教程适合初学者当作 JavaScript 语言入门教程,也适合当作日常使用的参考手册。另外作者还有其他教程:html、css、node、git等。

JavaScript 标准参考教程(alpha)

阮一峰的 JS 教程,内容很多,而且讲解的很详细,很透彻,是一篇不错的 JS 入门教程。

如何定义一个高逼格的原生JS插件

作者通过很多实例介绍了如何定义自己的 JS 插件,包含了很多方面和技巧

框架

学习 RxJS 操作符

本仓库是 Learn RxJS 的中文版。意在通过每个操作符的清晰示例及解释来进行 RxJS 的学习。

希望各位喜欢,另外配合官方中文文档操作符篇来学习效果更佳。

电子书: pdf格式 | mobi格式 | epub格式

尚硅谷React技术全家桶全套完整版(零基础入门到精通/男神天禹老师亲授)

本套视频教程基于新版React17录制,对React开发中的各项核心技术进行了详细讲解。核心React基础知识+周边技术一网打尽!
所有知识点都以案例为驱动,演绎式教学,生活化举例,保姆式解读官网,授之以渔更授之以渔!讲解细致,幽默风趣,让你听着上头,学到痴迷。即便零基础的小伙伴也可以愉快地学会React技术!

建立你自己的React 翻译

Didact的目标是, 通过提供相同API的更简单实现, 以及如何构建它的逐步说明,使React的内部更容易理解. 一旦你理解了React如何在内部工作,使用它将更容易.

Why You Should Consider Reactive Programming

RxJS 入门教程,共有 5 篇文章

一起学 Node.js

使用 Express + MongoDB 搭建多人博客,过程中对 Node.js 的基础知识进行了讲解

七天学会node.js

这是一篇比较详细的 node.js 入门教程,但是我确实没有七天就学会。。

node.js之fs模块

fs 模块是 node.js 中一个很重要的模块,其提供了文件相关操作,包括打开、读取、写入和追加等等操作

Express 4 入门中文手册

最近在做 node 相关的项目,express 之前接触过,但是基本上一点印象都没有留下。。然后 express 的英文文档从布局和样式上就给人一种不想看的感觉,同时我的英语水平也很差,所以就在网上找了很久的中文文档,最终追根溯源找到了上面这篇,无法评价好坏,因为有就不错了嘛~

Redux中文文档

在线 gitbook,有很多实例,是一个很不过的 redux 入门文档(我就是通过看这个文档入门的~)

Redux从设计到源码

这也是一篇 Redux 入门教程,虽然比不上上面的教程,但是这篇文章里面的某些图片画的还是相当不错的,可以当做补充资料

react-starter-kit 入门(翻译)

starter-kit 的教程实在太少了,只找到了这一篇中文的,就先凑合看吧,具体写的好不好可以先睹为快,因为篇幅比较短,而且 starter-kit 本来就是一个脚手架,还是需要了解其他技术栈才能真正看懂

React Router官方教程

官方给出的 react-router 入门文档,通过14个实例一步步进行讲解,由浅入深,由易到难,只需要一个多小时就可以跟着文档写完 14 个实例,同时在写的过程中还可以学习到 express 和 webpack 的相关知识。

Redux作者出的教学视频

Redux 作者自己在 egghead.io 上面上传了教学视频,墙裂推荐,不过全程英文讲解,可能会有点费劲- -:

从零开始学 ReactJS(ReactJS 101)

从零开始学 ReactJS(ReactJS 101)是一本希望让初学者一看就懂的 ReactJS 中文入门教学书,由浅入深学习 ReactJS 生态系 (Flux, Redux, React Router, ImmutableJS, React Native, Relay/GraphQL etc.)。

Vue.js源码分析

Github 上 star 数超 10K 项目,记录了作者个人学习 Vue.js 源码的过程中的一些心得以及收获。以及对于 Vue 框架,周边库的一些个人见解。

工具

《深入浅出Webpack》电子书

国内第一本系统全面讲解 Webpack 的图书,涵盖了 Webpack 的入门、配置、实战、优化、原理。

  • 第1章教你从0开始学会使用 Webpack;
  • 第2章详细的讲解了 Webpack 提供的常用配置项;
  • 第3章结合实际项目中常见的场景给出最佳实践;
  • 第4章罗列出了各种优化 Webpack 的手段;
  • 第5章剖析了 Webpack 原理以及如何开发 Plugin 和 Loader。

除了深入讲解 Webpack,本书还附带介绍了 ES6、TypeScript、PostCSS、Prepack、离线缓存、单页应用、CDN 等 Web 开发相关的技能。

无论是对 Webpack 一无所知的初学者,还是经验丰富的工程师,相信都能通过本书进一步提高对 Webpack 的理解,让你在 Web 开发中更加熟练的运用 Webpack。

入门Webpack,看这篇就够了

进度条说明了一切,作者通过对比 gulp 和 webpack,详细的介绍了 webpack 的优缺点,同时还介绍了一些其他工具的用法,虽然篇幅较长,但是大部分都是代码,可以跟着作者自己敲一遍,相信敲完之后的你可以自信的说 webpack 我终(hai)于(shi)会(bu)了(hui)

webpack 2 打包实战

这是一篇对于 webpack 2 的讲解,作者通过追根溯源向我们阐述了为什么需要 webpack,作为历史的产物, webpack 具备哪些优势,文章篇幅较长,不过弥补了 webpack 官方文档写的很差的缺陷,是一篇比较不错的 webpack 入门文档

令人困惑的webpack之entry

鉴于 webpack 的文档实在太差,而 webpack 本身又比较复杂,各种 loader,各种 plugin,各种配置,所以刚接触 webpack 的童鞋会感到很头疼,而 entry 作为 webpack 中最基础的配置,可以作为入门 webpack 的关键点,这篇文章非常详细的介绍了 entry 配置项的作用以及参数含义

用grunt搭建自动化的web前端开发环境-完整教程

jQuery 在使用 grunt,bootstrap 在使用 grunt,百度 UEditor 在使用 grunt,你没有理由不学、不用!

Sublime Text 2 - 性感无比的代码编辑器!程序员必备神器!

这是一篇比较全的 sublime 介绍文章,作者介绍了很多 sublime 的特性和优点,同时还推荐了一些插件和使用技巧。

浅入浅出webpack

webpack 作为一个非常流行的构建工具,其文档和使用一直为人所诟病,而当我真正的自己对 webpack 进行了了解和实战之后,发现其实 webpack 并不是那么难理解,而很多童鞋其实是因为 webpack 的功能太强大而对其产生了畏惧,这篇文章对这部分童鞋来说是一篇很好的教程,从基本使用的角度对 webpack 进行了介绍和讲解,除此之外还介绍一些高阶应用,如 TreeShaking、构建 PWA 应用等

iOS开发工具——网络封包分析工具Charles

Charles 是在 Mac 下常用的截取网络封包的工具。Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。作者在该教程中介绍了安装 Charles、安装SSL证书、将Charles设置成系统代理、过滤网络请求、截取 iPhone 上的网络封包、截取 SSL 信息、模拟慢速网络、修改网络请求内容等内容。

webpack 教程资源收集

作者收集总结了关于 webpack 的各种教程,大概共有 50 篇文章。

运营小白带你5分钟入门谷歌分析(GA)

主要通过截图的方式简单介绍了如何使用 GA 进行数据分析,以及 GA 都有哪些功能。

全网最贴心的webpack4系列中文教程和配套代码

作者花费了 3 个多月整理了这份教程,一共分成 16 节,每节都有讲解,并且准备了配套代码。

理论

什么是神经网络?

这是一个系列课程,可以关注该账号发布的关于神经网络的其他视频;完整的播放列表:http://3b1b.co/neural-networks

同构(Isomorphic) web 是什么鬼?

同构这个概念最近比较火,相比 SPA,同构会有其独特的优势,作者用非常简短的语言介绍了同构产生的背景和如何将自己的网站改造为同构 web。

再不懂区块链,你就OUT了!

区块链从 15 年到 17 年,但是你却任对区块链一知半解,百度经验联合火币网打造讲解区块链的系列小动画《区块链100问》 ,将抽象的区块链概念转化为100集轻松易懂的 1 分钟小动画,每集学懂一个知识点~

快乐的Linux命名行

The Linux Command Line 的中文版,一个文科生说他看完这个都会 Linux 了

HTTPS 的故事

作者缘于在 Twitter 上看到的 HTTPS explained with carrier pigeons,原作者用很简单的故事就把 HTTP / HTTPS 的传输过程讲解的很清楚。 借原文的意思,该作者重新写了这个故事,加上了一些配图和补充,很形象的解释了为什么要有https以及如何实现。

JS 函数式编程指南

这是mostly-adequate-guide的中文版,可以说是最好的函数式编程书籍,作者还非常有心的提供了 EPUB 和 MOBI 格式的下载。

Bash 脚本 set 命令教程

阮一峰老师写的教程,也是一些大牛推荐的 set 命令教程,文章短小精悍,基本上把 set 命令相关的所有知识都涵盖了。

其他

npm scripts 使用指南

阮一峰讲解的 npm script 入门知识,关于 npm script 首推这篇文章

Linux大棚版Thrift入门教程

thrift 作为一种 RPC 框架,其诞生以来就受到了广泛关注,虽然 RPC 框架有很多种,但是 thrift 还是有其独特优势的,这篇入门教程篇幅较长,作者介绍了 thrift 的基础概念,同时通过实例介绍了如何应用 thrift,比其他教程要详细很多。

Shell脚本编程30分钟入门

前端工程师和 shell 打交道会比较少,但是知道一些往往会节省自己很多时间,比如定时备份、定时提交修改神马的,这篇文章虽然看上去有点“标题党”的意思,但是作者介绍的还算详细,同时作者还有一些其他类型的“30 分钟教程”,也可以看一看(作者是多么喜欢30分钟这个时间段啊。。)

Docker 入门

Docker 是一个非常有趣的项目。它最大的作用就是隔绝了操作系统环境,类似于虚拟机,但是相对于虚拟机,他又拥有绝对的高效率、和通用性。相信看完这篇文章之后,你会对docker有一个直观的认识= =

图说设计模式

通过画图的方式理解设计模式,以一种轻松的姿势理解高深的学问。

Go 指南

该指南介绍了 Go 的大部分重要特性,同时有一些练习进行巩固。

centos 6.7安装最新版 git

阿里云上的 ECS 很多人都会选择 CentOS 系统,而作为前端,可能需要安装 nvm,但是 CentOS 6.7 默认安装的 git 版本是比较低的 1.7.1 版本,所以需要重新安装最新版 git,这篇教程讲的很详细,我按照他的步骤很顺利的就安装成功了。

Jenkins+nginx 搭建前端构建环境

废话很少,直接上代码的方式我很喜欢,Jenkins 解决了很令人头疼的构建问题,所以如果想成为一名称职的前端工程师,这是一篇值得参考和手巧的教程,赶快跟着作者的手速敲起来吧!

技术胖 155 集前端视频教程

技术胖在 2017 年录制的 155 集视频教程,可以免费观看,其中包括 Vue2.x、Vue-cli、Vue-router、vuex、Vue实战、weex、ES6、React基础、React全家桶、Koa2.x、Fabric.js 和 CocosCreater 实战教程等。

进阶级

《深入理解Node.js:核心思想与源码分析》

Node.js 的源码分析,基于node v6.0.0。源码分析包括(libuv, v8), 需要有一定的 C、C++基础。 Node.js 的源码到处闪烁着开发者的智慧和追求极致的精神。 包括但不限于:

  • 系统架构
  • 设计模式
  • 性能优化
  • 奇技淫巧

该书通过分析 node 核心模块的实现,向读者阐述 node 异步 IO,事件循环的核心思想。帮助开发者更好的使用 Node.js。通过追溯 node 社区开发issue, 探讨 node 的变迁和演进,学习 node.js 的设计哲学。

深入理解JSON

作者将 JSON 和 JS 中的 JSON 都梳理了一遍,也对里面的细节和注意点进行了一次遍历,从中我们能够知道 JSON 是一种语法上衍生于JS语言的一种轻量级的数据交换格式,也会明白 JSON 相对于一般的JS数据结构(尤其是对象)的差别;除此之外,作者更进一步地仔细讨论了 JS 中关于 JSON 处理的 3 个函数和细节。

通用 CSS 笔记、建议与指导

作者总结了 CSS 的相关规范,但是建议下面腾讯 AlloyTeam 总结的那篇。。

前端规范总结-AlloyTeam

腾讯 AlloyTeam 通过分析 github 代码库总结出来的工程师代码书写习惯,内容很全很详细,值得一看!

CSS进阶系列

通过作者的 github,可以看出来这是一位腾讯的大牛,作者通过 CSS 实现了很多复杂的效果,其中有些例子是《CSS揭秘》这本书里面的,这本书也是我之前强烈推荐大家看的一本 CSS 进阶书籍。

简书-前端基础进阶系列

作者叫“波同学”,我之前是从来没有听说过作者大名的,但是读过作者这一系列的文章之后对作者的前端能力很是钦佩,同时作者的讲解能力也很强,将一些别人讲的晦涩难懂的原理讲的很透彻,十分推荐大家认真阅读一下作者这一系列的文章,我相信你看完之后你的前端水平会有很大的提升

更新于2017-01-26:波同学将自己在简书上的文章都迁移到了自己的Gitbook

深入理解 JavaScript 系列

汤姆大叔写的文章,文章内容实在是多。。而且感觉难度有点大,推荐大家先看一下上面简书的前端基础进阶系列,再来看汤姆大叔这一系列的文章,可能理解起来会更容易一些。

webshell 原理

webshell,顾名思义:web 指的是在 web 服务器上,而 shell 是用脚本语言编写的脚本程序,webshell 就是就是 web 的一个管理工具,可以对 web 服务器进行操作的权限,也叫 webadmin。接触过集群的童鞋对这个概念肯定不会感到陌生,虽然一般人不会接触到 webshell,但是多了解一些总是没错的~

全自动科学上网方案分享

有些童鞋并不了解如何通过 VPS 实现科学上网,这篇文章介绍了如何利用 VPS 进行代理配置,以及实现自动切换,讲解的很详细。

算法

JavaScript 算法与数据结构

本仓库包含了多种基于 JavaScript 的算法与数据结构。

每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有 YouTube 视频) 。

支付宝打赏 微信打赏

听说赞过就能年薪百万