博客

新创建了一个文档站点，添加了学习路径相关的文档。这个路径可以让您起步，成为一名 Web 开发者。我最擅长的就是让你起步，让你明白一个从来都没听过的东西是什么，基本怎么用。就像学开车，只有学会起步，你才能会开车。至于以后你是想开车拉着女朋友兜兜风，还是要自驾去西藏，还是想成为一名赛车手，这完全是你自己可以控制的了。但这些都是只有在你学会起步以后才有可能实现的事情。

路径有时会遇到分支，你可以选择其中的某个分支，这决定了你后面要走的路。比如学到后端语言，宁皓网为你准备了两个分支，PHP 与 Ruby，如果选择 PHP ，后面你可以选择用 Drupal，WordPress 或 Laravel 为基础去开发需要的 Web 应用。选择 Ruby 的话，后面需要用到 Rails 框架作为你的主要工具。

抽象，这是我有了女儿以后才注意到的一个词汇。女儿挺早就开始说话了，7个月大小的时候我听到了她第一次叫爸爸。后来开始用一些卡片教她认识一些东西，我记得有张卡片上面画着一着猫，她很早也就认识了卡片上的那只猫。有次我们去商场，女儿指着一件 T 恤上的图案说：“这是小猫咪”。我很吃惊，她是怎么知道的，之前她从来都没看见过类似图案的小猫，而且她的卡片上印的是只真实的小猫照片，但 T 恤上印的是一只线条非常简单的卡通小猫，这跟她之前认识的小猫照片完全不一样。

后来我才知道，这就是人脑的抽象功能。我们不需要看过所有的小猫以后才能判断一个东西是否是一只猫，只要在我们脑子里形成抽象，以后不管你看到的是什么类型的用什么形式表示的小猫，你大概都会知道你面前的东西就是一只猫。回到技术学习这里，我想也是一个不断在脑子里形成各种抽象的过程，我们也不需要学习全部，因为我们自带抽象功能。

在学习技术的时候会遇到一些词汇，开始你会觉得它们对你来说没有意义，除非你从来都没听说过这个词，不然这个词对你来说一定是有意义的，只不过你需要换个语境去理解它，它对你来说才会有意义。因为很多技术类的词都源于生活，或者说它们就是我们平时用的词，但在技术这个语境下，你会认为这个词应该是个专业的计算机词汇。

昨天收到微信，silence 说出差到济南，想晚上一起喝点东西聊聊天。我问他在哪里住，他说他在济南纪委大楼，这让我想起《人民的名义》。因为之前在网上聊过几次，有些印象，我们就约在了商场里的某家咖啡馆见面。下午吃过饭，就带着一家子去这家商场里溜达溜达，顺道也给女儿过个节。

游戏室

我跟家人到了商场，小雪准备了之前剩下的游戏币，我们走进一家游戏厅。我自己现在并不是太喜欢玩游戏，不过小时候也经常会站在玩游戏的人的街机旁边，挺眼馋。偶尔会拍对方马屁，“这小子打的真好”。不过当时在东北，这话可能有点挑衅的意思，有一次差点没跟人打起来。我在东北还真没挨过打，个子小，外加装可爱，同学可能把我当小动物看待。我也不是太喜欢冲突导致的肾上腺素飙升的感觉，也可能因为胆儿小，或者说比较理性，我觉得今天我把你打了，明天你把我打了，这太麻烦了。

回到现在，游戏机室里充满了小朋友跟大朋友，小朋友们六一应该是放假，成群结队，时而狂奔，时而装酷。游戏室的角落有台机器，像一个大桌子，一群中年男子围着座，都没有表情，地上堆着一堆烟头。小雪说他们可能在赌，每次来都会看到有这样一帮人在那里坐很久，地方堆着一堆烟头。

你的网站最终要在 Linux 操作系统的服务器上运行，所以学习后端开发之前，你得先去了解一下这种操作系统。学习 Linux 的最好方法就是在本地创建一台 Linux 系统的虚拟机，然后在上面做些练习。Vagrant 是一个非常好的管理在本地创建的虚拟机的工具，用它你只需要几行命令就能创建各种不同类型的 Linux 虚拟机。

跟着《Vagrant》这本书里的操作你能学会使用这个工具去创建与管理虚拟机。这就是这本书的主要目的，后面会有一本专门介绍 Linux 操作系统的书。在学习 Linux 系统之前，你得先有个学习环境，也就是在本地你能创建，管理与配置一台需要的 Linux 机器。

注意 Vagrant它本身并不是虚拟机软件，它只是一个管理虚拟机的工具，有点像是它提供了一套管理虚拟机的界面或者叫方法。Vagrant 可以管理用 Virtualbox 创建的虚拟机，也可以管理用 VMware 创建的虚拟机。Vagrant 是个命令行工具，几乎所有操作你都要在命令行界面下完成，所以你需要先熟悉一下《CLI》。Vagrantfile 这个是虚拟机的配置文件，在上面你可以描述虚拟机的一些特性，比如 IP 地址，共享目录等等。

在线阅读

https://vagrant.ninghao.net

Git 可以保存你每次对项目做的修改，给你一个清晰的开发历史记录。它可以让你以后去检查之前在任意时间点对项目做的修改，给你恢复，重做的机会。有了 Git 大家可以一起协作开发一个项目，有几种流程方法，在 《Git》里都介绍到了。

你已经想成为一名开发者了，不管是以后的日常工作，还是以开发者身份去应聘面试，会用 Git 都是非常加分的。即使你是一名开发爱好者，我也推荐了解一下 Git 。它是为项目做版本控制，一起协作开发的必备工具。

能把 Git 用在自己的开发流程里，你不需要读完一本 500 页的书。这本《Git》完全可以让你起步，它不是一本详细的操作手册，而是一本能练习的书。有些东西只有动手实际做一下，才能理解它到底是什么，我的一点经验不断地验证了这一点。

学会了 Git，我们可以一起做点东西。比如我们可以一起写这本书，这本书也可以作为一个一起开发的项目，你可以为书提交自己写的章节，可以修复书中的错误。

在线阅读

https://git.ninghao.net/

前置阅读

1. 《CLI》熟悉命令行界面
2. 《Workflow》准备开发前期的几样工具

《工作流》里介绍了成为一名开始者，一开始你要知道的工具。之前我们已经介绍了《CLI》，现在你应该熟悉了在命令行界面下工具。现在你可以跟着《工作流》，去在电脑上准备一些工具。以后你还会遇到很多工具，不过要等到真正用到的时候再去准备与了解他们。先带上这些必备工具，就可以出发了，只有轻装上阵，你才可能走的更远。

今年感觉一直处于焦虑状态，有时几乎让我无法工作。自我调节也管点用，打个电话给朋友，喝几杯，出去走走，也都有所缓解，但这种焦虑状态还是会反复出现。引发的原因主要就两个，家庭与工作，会觉得事事不顺。这是不是要给我个大任务啊，还是因为我情商低，在别人那里这根本都不叫事儿。

家庭需要参与，别等事情变得更糟。儿子就像中间人，得在各方面去调节家庭关系。我之前路数是捂朵不听，闭眼不见，觉得自己有更重要的事情要做，家庭琐事根本不需要在乎。直到这些琐事引起的 bug 让你觉得无法修复，不可逆。即使我已经意识到了问题，打了补丁。

工作方面，有时候觉得自己能做任何事，但又经常感到一点自卑。面对未来，有时候觉得充满希望，但又会有点恐惧。总会在各种状态的两极，无限循环。我没明白人类为何要保留焦虑这种情绪，暂时我没想到它会对我有什么帮助，焦虑的状态经常让我无法工作。或许它也只是为了让世界平衡的某个因素。

《CLI》是宁皓网的一本蓝皮儿书，因为它的封面是蓝色的 ：）还没校对，忍不住先发给大家看看。大家可以 fork 到自己的 Github 仓库里，然后帮着改改错别字儿。不熟悉这个流程，可以参考 Atlassian 的 Git Workflow，我应该也再去写一本 Git 流程手册。

熟悉在命令行界面下工作，可以作为你成为一名开发者要做的第一个任务。在命令行界面下完成一些简单的日常工作，比如进入到某个目录的下面，查看目录里的东西，在目录里创建新的目录，文件，重命名文件或目录，移动文件的位置，编辑文件里的内容。

这些任务在图形界面下操作就是点点鼠标的事儿。在命令行界面下，你需要了解内容的路径，绝对路径与相对路径的区别，使用什么样的命令，要用到哪些参数，怎么获得帮助等等。

或许一开始你会觉得这一切毫无意义，不过我向你保证，越往后你会越觉得自己当初的想法是错的。既然已经决定要当一名开发者，不管您智商有多高，在学习的时候尽量把自己先当成小白。有个人为你提供了一个学习的路线，如果你觉得这人还算靠谱，那就跟着试一下。

在线阅读：《CLI》

在《 网站 》系列课程里，设计开发的页面需要的样式用的是 SASS 的形式创建的。这是一种更灵活的创建 CSS 样式的方法，你可以少写很多东西也可以重复利用一些东西。一旦你了解了 SASS，应该不会再直接写 CSS 样式了。在课程里，我们会用到几个 SASS 的重要特性。

组织

用 SASS 创建样式，组织这些样式的方法也很多。你可以创建一个主要的 SASS 样式文件，然后把其它的样式文件包含进来，项目的自动化任务会为你编译好一个普通的 CSS 文件，这个文件你可以直接用在你的项目里。

组织的方法一般像这样，比如你创建了一个主要的 SASS 文件，名字是 main.scss，它里面的内容像这样：

@import "variables";
@import "mixins";
@import "base";
@import "navbar";

这个主样式文件里不包含具体的样式，它可以作为一个入口文件，在这里你可以把其它的样式文件导入进来，项目的自动化任务会把所有的样式编译生成一个普通的 CSS 文件（main.css）。

《 网站 》系列要做的页面都是响应式的，页面在很多不同尺寸的设备上都能很好地显示。用到的一项关键的 CSS 技术就是媒体查询：Media Query，后面我们还会介绍让 JavaScript 也可以根据设备的不同尺寸在页面上应用不同的脚本代码。

媒体查询

CSS 允许我们在样式表里设置一些样式应用的条件，你可以限制设备的类型（Screen，Print），或者视口（Viewport）的宽度范围。

比如你想单独为小尺寸的移动设备上去应用一些样式，这条媒体查询的条件用文字描述应该像这样：在小于等于 767 像素的 Screen 类型的设备上。如果用 CSS 的媒体查询表示出来，应该像这样：