千古刘传【认知编程 | 心法篇】分享

Published on:

大前天,我零基础入门前端技术,暴力通宵实作2晚,写出了人生第一个网站《Galaxy Recruitment6》:






本文说说认知学习法理论如何与编程学习结合,以达到短时间暴力速成的效果。注意,本文不涉及技术细节,是用学习前端来讲学习方法,任何人都看得懂。

第一步:用旧事物理解新事物,快速建立心理表征

如何把全栈编程能力切成三块,以一个餐厅的空间关系来类比,任何人都能懂。想想这是一个肯德基餐厅的俯视图:

前:用餐区
中:服务台
后:后厨

用餐区的关键点是装潢漂亮,服务的关键点是准确无误地对接顾客和后厨的需求和供给,后厨的关键点是储存原材料并用它制作成食品,交给服务台,最后送到用餐区。

这能理解的话,那编程也是同样的——

前端用餐:你看到的网页。
中端服务:匹配你的需求和数据库的供给。
后端做菜:收集储藏数据,输出数据。

编程里一般说前端和后端,没说中端,但我这样的划分更有利于零基础的人理解。这样,才能建立起对新手来说极其重要的事(对老手已不值一提)——心理表征。

我就是通过这个模型去理解全栈编程的。在这个表征基础上,我就很清楚自己的每一步在整个作品能起什么作用。如果你没这个表征,跟教程一板一眼也能做出作品来,但是你的表征不够清晰分明,让你无法实现迁移。

利用空间隐喻建立心理表征,是人类进化遗留的优势。这适合学习任何新技能时,构建初步的心理表征。
这个认知学习玩法的原理讲起来太大了,在我的认知学习法中有深入讲。继续说编程。

把全栈这个概念切开后,头脑清晰了。接下来,我们来看一下前端用餐区这个版块,发现有三个语言:HTML、CSS、JavaScript。我根本不知道它们三位都是谁?它们之间,到底有什么苟且的关系?

疑问多就是好学嘛,所以你就会去查谷歌或者百度一下,那么必然会被糊一脸屎——

html是一种超级文本标记语言。
CSS层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
每个字都认识,但就是不知道在说什么。

这里就得问一下你哦,第一天学游泳时,你有没有跑去问,教练,水到底是什么?水为什么会这样?水有什么原理?

我倒是从没见过游泳教练会跟你讲什么是水,水的本质是什么。这是物理学家的事,关游泳教练啥事?

编程跟学游泳一样,你别去问HTML、CSS、JS都是什么鬼,你是来游泳的,不是来搞科研的,你只需要知道能用它做什么

所以,仅用以下类比就足以建立起基本的行动心理表征——

HTML是素描稿,CSS是水彩笔。
HTML是毛坯房,CSS是装潢样式。
而JS是干嘛的?让水彩画动起来。

虽然这样的类比很粗糙,但是so what?就像狗刨,跟游泳的正确姿势相比,这种类比粗糙到不行,但是你立马知道能做什么了,于是,你就暴力踹开了新技能的大门。

建立最基本的心理表征极其重要,哪怕与正确的标准相差十万八千里都没关系。

因为,接下来你要接触该技能中的新知识,你都能用“旧事物理解新事物。

第二步:完全彻底地模仿

有了基础的心理表征,接下来第一件事就是模仿。

模仿!
狠狠地模仿!
暴力自杀式地模仿!

前端就是你看到的网页,那么我要入门前端,直接去拷贝复制别人的网页就可以了。

模仿谁呢?——

你心中的TOP1!
既然都模仿了,就只模仿第一名,不要找一个简单的对象来模仿。

这就是所谓自杀式地模仿。什么是自杀?

打个比方,就像学游泳的第一天,有人去儿童区,有人去浅水区,有人去深水区,而你,因为住在长江旁,就直接往长江里跳。好在,编程上自杀式地做不会要你的命,最惨就是把项目彻底做烂了。

如果模仿的太简单,速成也许可以实现,但暴力速成则很难。

所以,我真实执行的路径如下:

1、找到要模仿的水彩画

自己想要做电影主题,找到我心中的TOP1漫威,打开他们的官网,看了一下界面,决定要做成风格。

2、找素描图

进入全栈营的官网,复制前端的HTML和CSS代码,只字不差地扔进自己的项目,这样就有了网页的素描框架。

3、对照着要模仿的水彩画着色

现在有了素描框架,有了要模仿的画,接下来就是要复制的网页上的颜色都给涂掉,重新涂色。

第三步:拆解要素,逐一更改

执行模仿路径时,我就开始观察代码与网页之前的对应关系。但是网页很复杂,一一去看,似乎费力不讨好,有没有方法归纳。

任何平面都能拆解成这三个要素:几何,颜色,位置。

所以,当我要模仿顶部导航栏时,就着重去找分别影响几何、颜色、排版的代码。而且,真的很好找。

在编译器中,搜索“color”,就有了所有有关color的代码,例如“color:#894141”,后面就是颜色值呗,改一改,看看网页怎么变。

例如“margin:30px”,margin是什么,不知道,改一改后面的值,看看网页怎么变。

这样调一调,看一看的对照流程,多走几遍,就能建立起清晰的CSS水彩画心理表征。

接下来的重点是:不要去背!不要去背!不要去背!

可能很多人是受科幻电影的影响,看到的程序员都是键子如飞,啪啪啪打完一串代码。然而,现实中完全不是这样的好吗?

背下来有什么意义呢?因为这些代码是什么,在google搜一下就有了,根本不需要背。类似于“唐太宗生于哪一年?”这样的陈述性知识,常常拿来做什么智力竞赛,背下来能默答,似乎就很聪明。可是,这就能比搜一下再答出来,更懂历史吗?

暴力入门,请关注该技能中的程序性知识。过去没有搜索引擎,没有陈述性知识你就无法行动。现在学习新技能,凡是陈述性知识,尽量外包给搜索,把自己有限的工作记忆留给程序性知识,例如逻辑、关联、因果。

所以,理解了HTML和CSS与网页的对应关系,就是学到。而且,我就仅仅敲了两个通宵,影响页面最主要的代码就已经形成肌肉记忆。

这事唯一的难点,就在于对应关系实在太多了,不过这也很好解决:每天看懂两三个对应关系。这不就跟背单词一样吗?

好了,CSS学完了。

对,在我的观念中,这就是学完。在这点上,我的定义和很多人不同——

学完就是把谜变成未知。
什么是谜?什么是未知?

未知的定义是,虽然我现在不知道它是什么,但是我知道掌握它的路径,通过努力一定可以完成它。

谜的定义是,我不知道它是什么,也不知道掌握它的路径是什么,即便有了路径,也并不确定能它是什么。
当一个事物从谜到未知时,就已经学完了。接下来,你的关注重点是持续地做,而不是在学了。做久了,就熟练了。熟练了,未知就变成了已知,就懂了。

这种谜之学完,定义不清楚,你就会找不到学习重点。例如背单词,不存在解谜,它是未知,所以只要持续地做,就一定变成已知。

很多错误的学习观念,就是把未知当作谜。学习中一旦遇到挫折,这就会导致一系列的归因错误——

解谜失败,我不够聪明,没有天赋。
反过来,如果这是未知,遇到障碍则是归因到——

我的执行和行动有待改善。
前者分分钟让你从入门到放弃,后者却让你更好地进阶。所以,这又应了那一句话:心念一闪,震动十方。

学习是把谜变成未知,做到是把未知变成已知。
用这个思路,把HTML也理了一遍。于是,前端达要到60分的谜变成了未知,接下来就简单了,去做!如果你看过《低水平勤奋怎么了?》,我就提到,60分之前,不要问为什么,只管做。

于是,就有了这次的《Galaxy Recruitment》。


以上,就是我本次暴力入门的心法。