记录着，叹息着，期盼着
建立缘由
我是个很普通的人，自然也会有偷懒，迷茫，恍惚的时光。写这份日记是为了记录自己，看着自己一天天，一点点向上攀爬的样子。希望多年后自己能成为很厉害的人，回首时一边看着自己的来时路，一边哑然失笑。
对看这份日记的人，一些想说的
如果您是个很厉害的，已经在半山腰或是临近山巅的成熟开发者，这只不过是个小萌新步履蹒跚的玩具日记罢了。但如果您也是个对计算机，对前端有些兴趣，但却患得患失，不知从何入手的普通人，或许它给您心中的困惑带来些答案。
老实说我是个很懒的人，也不喜欢写文档，写文章。我一直秉持着“不是同一个世界的人，再怎么接近，也终究无法重合”和观点。因此我其实对docs持悲观态度，这份日记也主要是为了我自己而已。
不过每个人都有自己的局限性，我也不例外。这份日记基本算我的备忘录和流水账日常，因此只是一份参考。同时屏幕对面的您要做好一个准备就是：您不一定能完全复刻我的道路。这不是对您的看轻，不屑或是歧视，而是字面意思上的陈述。我是个很平庸但比较幸运的孩子，在我的一路有很多对我影响深刻的人，或是前辈或是朋友也或是陌路，都对我帮助了很多很多。某种意义上，我是个百家理念的集成品（？ 可以说是拾人牙慧，也可以说是被“托举而上”的。同时我的专业技术虽然不怎么样，但我对软工SE的很多现代技术栈/架构/产品都有较明晰的大致认知，且我对计算机软工SE有较高的亲和度，从源头追溯可以到小学三四年级乃至幼儿园时期，不过对计算机科学CS尤其是理论层，比如DSA那种直指数学的东东就不怎么样也谈不上喜欢了。我喜欢code，喜欢engineering，但不大擅长scientific。
在当今社会环境下，我见过太多太多在大陆国行手机和低俗短视频平台下，失去对计算机基本理解和亲和的孩子了。傻瓜式的手机阻碍了基本的系统操作能力，无用的庞杂信息流妨碍了自主的探究思考，“民用”化的Windows遮掩了计算机的本质。
每个人都有各自的方向，烧菜的厨子不一定需要了解生火需要的热力学理论，也不一定需要学习如何生出更好用的火，但不能太离谱，至少TA得知道火是什么。您可以在 计算机科学/软件工程 基础上薄弱，但不能完全被蒙蔽双眼。
btw，我如今几乎所有工作环境都在mac和gnu/linux下完成，后者选个您顺眼的，(k)ubunttu就不错。我不喜欢Windows，原因有点罄竹难书，不过如果一路走下去的话，未来您自然会知道的。
WARNINGHowever，DONT USE Arch IF U ARE A COMPLETE NEWCOMER
环境介绍
我主要使用MacOS作为主要开发设备。使用iTerm2作为terminal，使用zsh和oh-my-zsh三件套插件为shell，我现在主要方向在web上，所以我使用vsc，同时样式环境是Vitesse Theme+Material Icon Theme, linter上我使用SonarQuobe。agent上我使用copilot(vsc)并多数情况下用Claude4sonnet, 但是我不喜欢vibe coding和大陆市场部推出的agent产品，在面对配置和样式设计时它是💩，您可以拿它来问，但我始终不建议您用它写完整的东西。
在Kubuntu上我比较懒，用的是kubuntu lts24，但这是有原因的，和我笔记本的联发科偏门网卡以及nvidia有关，这部分未来会在另一篇文章中详谈。WM上我使用x11，DE上我用kde plasma5，使用fish为shell，因为我懒。当然您大可用Debian 13什么的，喜欢啥distro都可以。我们是engineer，不是scientist或社区宗教信徒。
IMPORTANT我始终建议您使用Google，reddit，overflow，gpt/gemini model等，我个人拒绝使用且不建议您使用baidu,csdn,douyin,deepseek,doubao等玩意。我不喜欢大陆的软件生态。
WARNING不要在学习和练手时用vibe coding，那对教育意义是灾难性的。
补充：后来用 EndeavourOS(一个贴近arh原生的分支)去了，以及对vibe。。时代不同了，应该辩证的使用，后面会详谈
预期roadmap
我个人建议您使用OSX(MacOS)或任意发行版的gnu/linux去尝试参照我的路线，因为这可以帮助您触及很多本质上的东西。正如我上文所述，windows会遮掩本质，以及windows其实在很多地方很麻烦。
大致预期路线：
语言/框架
前端部分：
HTML -> CSS -> Tailwind css 写静态web -> JS -> 写手搓web -> npm(大致了解包管理即可) -> Vue -> TS -> 写现代webapp -> Nuxt -> React -> Next
Branch: Vue -> scss React -> css-in-js, css modules后端部分：
Nodejs -> 写CLI app -> PostgreSQL -> 写简单的CRUD app -> RESTful API -> JWT Auth -> Redis -> 写一个完整的app
DevOps部分；
未完待续…
工具链
Build tool: Vite Webpack, serving to bundle and optimize web applications.
Bundler: ESBuild
Deploy: Vercel, Netlify
Linter: ESlint, SonarQuote
流水账
2025-10-9 00:20
W3S tutorial, HTML
Now, Chapter : Forms Section : HTML Input Attributes
2025-10-9 09:00
W3S tutorial, HTML
Finish Forms chapter learning
Now, Chapter : Media
2025-10-10 02:18
W3S tutorial, CSS
Finish HTML part learning
预期学习概况：
必学：
- 选择器：基础（
#id,.class,tag），组合选择器，伪类（:hover,:focus），伪元素（::before,::after） - 盒模型：
margin,padding,border,width/height,box-sizing - 布局：
display（block, inline, inline-block, flex, grid），position（static, relative, absolute, fixed, sticky） - 字体与文本：
font-size,line-height,font-family,text-align - 背景与颜色：
background,color,opacity - 响应式：媒体查询（
@media） - 动画/过渡：
transition,transform,animation（了解即可，常用在按钮 hover 等场景）
初学阶段可以不学：
- CSS 自定义属性（
--var）→ 初学不常用 - CSS 函数（
calc(),clamp()等）→ 可后面补 - CSS 高级选择器（
nth-child,nth-of-type）→ 先不碰复杂情况 - CSS Grid 高级特性（自动布局区域命名）→ 学基础网格即可
- CSS 高级动画（关键帧复杂动画）→ React/Tailwind 常用库替代
2025-10-10 23:30
- 字体与文本：
font-size,line-height,font-family,text-align - 盒模型：
margin,padding,border,width/height,box-sizing
2025-10-11 8:30
看文档/视频是在获取知识，亲手写code是在训练技能。
IMPORTANT切记，减少陷入”知识幻觉”的情况！ Coding是一种技能，而不是纯粹的知识。如果您采取了先看完很长篇部分的文档(期间不动手)，然后再尝试写example，这时您的脑子往往会一片空白，反应不过来该怎么做。We are engineers , not scientists. 您应该在学到每个(几个)可以独立起效的概念时，尝试动手去进行 复现->改造->观察 这样的重复过程。这就是我的best practice。
这也是我一次次强调，避免在newcomer时用agent写东西的缘故之一，vibe写出的不是您自己的。
2025-10-12 23:45
今日休战，写了篇关于Linux安装历程和不喜欢windows原因的post
同时在纠结要不要写个用于页内bookmark跳转后暂时高亮
可能是我的问题太低端了吧，可是我也问不出什么更厉害的问题了呀，唉。。。
给校内的教授写了邮件，不知道我一个做软工SE的能不能被转专业，我不想干两三年的牛马活和写生化论文毕设。
今天是不太开心的一天。
2025-10-13 3:20
理解概念，梳理构造，分剥问题，书写实现，整合连结
工程的本质是一次又一次类似操作流程的完成，互相契合的齿轮互相带动，形成了完整的大厦。
这也是SE每天都在做的事情。我喜欢这样的重复，虽然它一眼望得到头hhh
2025-10-13 13:00
第一次给大大的repo Dify提 PR，被merged了，虽然没什么难度，但很开心。很感谢湊老师ww
2025-10-15 21:30
因为一些事，想起来之前被一位很厉害的朋友带去和一群很厉害的CS方向的人吃饭，被其他人问自己的学校和专业是什么时的情景了hhh
感觉自己所在的 “位置” 说出口都是一种，莫大的自卑和丢人。他们那才配称之为真正的“大学”，至于我嘛… ww，多说无益。
2025-10-16 01:36
看一篇某校的面向新人wiki有感，发觉自己犯了个很大的错误
我太多的用被一些厉害的人，潜移默化/耳濡目染下的，学CS的态度去学SE。 纠结没什么鸟用的css property rendering顺序等等类似的事情，每小时十几次问llm旁枝末节，这些都太冗余和拖慢进度了，应该是一切以“写”和“做”为导向才对。
我纠结太多没用的细节了，那种“先做了再说，细节回头补”的做法才是更合适的（ 这才是Software Engineer该有的、更合适的做法。
被湊老师喂饭+1 ：面对 gemini2.5p 需要调整temperature为 0 ，会得到更好用和专业的结果。湊老师说我需要看 这个 ，唉他昨天就发我了，结果昨天一整天都在不知道做什么，拖拖拉拉的没看。
我有好多好多要做的事情，永远也做不完、堆积如山的需要 看/学 的docs内容，却总是想着偷闲。真的好羡慕那些可以无虑过完“青春年华”的人生啊。。。或许我该进一步的减少和 室友/本校同学 以及这个无用学校的交互了，对正事毫无帮助。
2025-10-16 02:20
唉。。看到了 杭电HDU的wiki 越发觉得无力，我这种从一开始一无所有的人真的最后能在 SE 上成功吗…
“他们”无一不是有着庞大的校院优异资源，大量的社区支持，一代代难以数尽的先辈经验和支持，上位阶层兜底的初始认知高度etc…我有什么，我又能付出什么,,,现实中的全部吗？隔着屏幕能抱上大腿的数来数去也就那几位，方向还多数是不同的，现实里能帮到我的一个人也没有。
我没有项目/课题组/导师，我没有学校社区足以喂饭的wiki，我没有衣食无忧的阶层背景。我，，，除了计算机，早就什么都没有，也什么都不剩了hhh。没有人能帮我垫底，也没有人能在现实中的当下帮到我。
当下，一切只能靠我自己了。好在，SE对背景/资格的需求是最低的，不过与此同时，对个人的剥夺也是最大的www
果然，还是好羡慕，好羡慕啊…我真的能在最后胜出吗？即使能，为此我又会付出多大的现实呢…?
2025-10-17 21:30
终于配完软路由了。从十点半配到现在饭没吃屁股没挪过，坐牢。
写篇post
2025-10-18 14:50
学习源有问题，我想我应该修正下自己的学习工作流…
正在参考御守老师发的 https://wangdoc.com 和 杭电的 https://hdu-cs.wiki/
我之前居然把csdiy忘记了。。。好蠢（
太慢了，太慢了。我必须得更快点，必须得把现实压缩出更多的时间才行。。。
2025-10-19 14:55
来看了下学校的百团（社团聚集/招新 演艺活动）
嘛…有时看着这些出着各色服饰的coser，看着在社团和活动中洋溢青春笑容的人，我总是会不禁在想：
“这才是大学生活呀…与之相比，我仿佛是在大学上班一样”
哪怕想跨越的只是知识的阶层，所长之处和卑微的出身，也会成为壁垒，成为包裹自己的最大的隔阂
我该怎么做。我必须得做。想起了一句歌剧台词：
汝欲许下跨越常轨，跻身天穹的愿望？
那意味着要付出除愿望外的一切，
才能填补那浊沼与高天间的隔断
原本想着能不能通过给学校一个叫电医的社团提供对萌新/客户的 软件/环境 配置+水群+分享工作流/工具链，来借此获得在社团活动室的久居坐班权，看来不大行。排班已经满了。
我不算特别喜欢宿舍，或许没有什么特别的矛盾，但终究不是一个世界的人，没有交互性，也没有共同的语言。我需要更多的时间去做自己的事。无论是技术，还是生活。
不是一个世界的人，终究不会有交集的，哪怕看上去的关系再好也一样，毫无意义。
预计给一个学校动漫社web的立项，其中涉及到了数据存储问题，我在思考该和前人一样py+numpy操作csv表格，还是使用正统的方式去存储数据信息，比如SQLite或者postgreSQL，然后再单独设计个页面去用于数据库的CRUD。这是个很麻烦的问题，因为这其中的功能逻辑期望是不确定和易变的。
web上我预计会用 vue ，并使用Tailwind来处原子化样式，pnpm来对node包管理，vite构建，因为这在学习路线上。我听说过UnoCSS的引擎更佳，但我这个学期可能学不到。
后端上我预计会用Golang的Gin来做routing和后端逻辑，并对sqlite数据库进行CRUD，以此达到需求。
2025-10-20
出于人际关系和学业问题，终止立项。我对“社团”这样的组织很失望，并且也不打算再与自己本科学校的所有学生自发组织有任何交集。
这篇日记还是回到全栈开发的正题上好了
找到校内的某教授当背书毕导，开心。终于不用为了毕业担惊受怕了。不过我需要为课题组处理一些信息上的问题，这个小问题。
2025-10-22 20:30
在教授导师那边蹭到了一个课题组的工位，没想到困扰/期望了这么久的校内工作环境居然能以如此简单的方式解决。。。该说不愧是正教授/博导吗，恐怖如斯（）
早知道就不去掺合社团之类的没啥用学生组织了，现在想想自己当时好蠢，浪费时间精力。。。（
或许只有更高的地方才能发挥出我的价值。
2025-10-23 00:43
记录一段可能会影响余生的对话：
A1 : 说话卡哇伊的人,或许正忙着拉小团体/圈子背后嘲笑你
A2 : 重要吗 嘲笑你会让你亏钱吗
A1 : 上一分钟还在萌萌表情包,下一分钟地雷后开始嘲笑
A2 ：好事啊 说明这关系有问题，断掉就行 他们对我的意义都没有 llm 大，为什么我要期望他们。。。
A1 ：您的情感/对人的期望好像很淡ww. 如果是我的话可能要膈应个少说半个月往上 或许情感淡漠有时并不是坏事
A2 : llm 能放大我的能力，有几个人也能，一般路过的我哪有精力管
A1 : 您会有和人打自心底的分享烦恼/寻求情感帮助吗？
A2 : 有，不多 没有情感就不需要了 人是会分道扬镳的，习惯就好了
A1 ：这一周内经历了很多，很多。仿佛把“人走茶凉” “人情冷暖” “时过境迁”，一次性看了四五年的份一般。
A2 ：你会对着 llm 生气吗，他们连 llm 都不如（
A1 ：我感觉自己的热忱正在一年年的消退，漠然，沉默。对游戏的，对现实里“周边人”的认知的，对家庭的，对现实的朋友的，对隔着屏幕的“朋友们”的。
A2 ：好事
A1 ：向往，印象，记忆，认知高度。一切仿佛都成了莫大的隔阂，把自己隔阂在现实中的周围人之外，成了脑海中不断回荡的洪钟，无时无刻的催促自己向前，向上。
A2 ：我从来没在意过别人比我早学编程 也没在意过别人本科拿各种奖学金 现在他们在哪呢.jpg 既然不是一条路上的为啥要在意（
A1 ：比如一些人在很小时就能接触到coding并能继续维持下去，而我接触时间很早但那时只能写题和做题家
A2 ：你都只喜欢技术了，自己给技术多交点 pr 有啥嫉妒的。。你现在也可以 coding（
没有价值的交际圈不重要，不必理睬太多的辱殆，看清自己的前路就好。
我该继续向前了，谢谢您。
2025-11-10 17:55
久违
当了两周的科研牛马，发现这并不是我应该走的路，以及这条路对我这种大陆下层阶层的人来说是走不通的。既不是不够努力，也不是没有能力，而是很简单也很现实的…“你不行”。世界上有很多光辉的路，但那并不是给你我准备的，从出生开始，就没有走那些路的“资格”。
听到了室友昨天关于出国旅游的一些聊天www…出身终究是出身，投胎也是门技术。我出生到现在，似乎一次完整的旅游都没有过，唉。。。缩在小小的工位，睡着小小的床，抱着小小的电子设备。说的好听点，是计算机大佬，是明确己道。说的直白点，就是这辈子只配，也只能配活在数字构建的虚拟中，一辈子也没有离开的资格，唉。。。朋友终是狼藉散尽的宴席；亲人在高阶层时是“亲情”，低阶层时连交流的必要都没有；恋人…至少我或许没有资格吧。
我心眼很小，当我看到他人获得了自身“德不配位”的好东西时，脑海中总会忍不住的盘旋：“凭什么…？”。我敬仰羡慕那些凭借自己，达到自己应得成就的人，但极端畸形的嫉妒、怨憎那些得到不该有享受的人，明明我如今得到的很多东西也是“幸运”的一部分，但至少是真正的“幸运”。
想法发生了一些改变：
A1: 这些近乎于系统层和架构的东东，如果我不满足于仅仅只“照猫画虎，llm照着做”，而希望明白自己在这期间做了什么，对整个架构有什么意义，在其中发挥了什么作用，我该从哪里开始学起或者了解起（？
A1: 怎么说呢。。。有一种，这才是计算机和软件架构的本质的感觉，而不是那种web冗余的样式，和用框架去写一个又一个思路近乎一致的webapp
A1: ww，想法发生了些改变，不过似乎没有用，因为我的现实境况似乎只能从前端开始攒简历，没什么选择余地
A2: 有个叫 llm.c 的项目
ww，与同一个世界的人际交际毫无意义，与同世界不同阶层的人交际不是为了获利就是为了讨好，与同世界同阶层的人交际可遇不可求，往往碰上也只是提防和警惕。
「我思我想皆为过去所定，我行我为尽是未来所鸣」
啧，颈肌痉挛的问题对长坐的影响太大了，周三还得去做磁共振
家庭的漠视与无能，却要我自己的身体留下病根来弥补，到头来谁会关心我hh，只不过会嘲笑我缺乏运动和偷懒罢了，说的好像他们愿意交出自己幸福轻松的中学和温馨体贴的家庭似的，可笑。天宫上的天龙人，怕是这辈子都没见过什么是真正的“下水道”和无能为力吧。真想全部夺走啊。。那些遥不可及，每次噩梦中都羡慕的幸福。
HDU-CS-WIKI
Chapter: CSS basic
2025-11-13 22:05
哦天，让我一个大二直接速通毕设+论文吗（）
不知道该说感谢这位博导能记得我需要大三四跑路实习 还是该说他对我期望有点离谱了（x
git graph一下子空了好几周，有点难受
2025-11-17 21:56
时间过得好快（
每天不刷下git graph总感觉缺了点什么（）不过这几天学校琐碎事务太多，都没啥空好好耐下心来完整的看doc,唉。。。
感觉越来越缺“时间”了
2025-11-19 21:41
complete CSS at-rules in mdn
follow hdu-wiki frontend fast-completion tutorial
coding by hand is more important then reading, maybe i need try self-test project of roadmap.sh
2025-12-8 17:43
这两周经历了许多，感觉自己的一些见解也成长到了似乎前所未有的高度
从对一些新鲜花俏事物和急切于工作需求的小玩具/技术栈盲目求成，到转向于倾向更底层、更原理性的思考
直面了某最好朋友之一的离世后，深刻的明白了个道理。。。：珍惜该珍惜的 忽视没意义的。
不是所有人事都有交集的必要，沉默的旁观，把时间精力放在自己的日子上或许往往会是更好的选择。
「时间」，是我这几个月来体会最深的。
读完了一篇近七十岁活化石级别hacker的文章，与某些前辈交流，反思了很多自己不足的地方。我不得不承认的是，我此前的很多想法有些肤浅了，在 llm 高速发展的现状下，我或许不应该用那么多不必要的时间和精力去细究于使用各式各样花俏的框架，而应当去沉思「框架的如何去优化和底层如何实现某个功能」，「如何更好的编程」，「整套业务逻辑是由什么组成的」，只学原理，不背语法(syntax)/标准(spec)。
对于路线的一些变更
给初学者的建议：不要只学“语法”，要学“体系”
许多人对前后端 尤其前端感到的“失去意义”，是因为把前端理解为 UI切图 (Styling & Layout)。没错，写CSS、调布局、写简单的点击事件，这部分工作确实会被AI吞噬90%。
前端真正的未来在哪里：
- 向深处走： 钻研语言底层、浏览器原理、安全攻防。做那个能解决AI解决不了的Hardcore Bug的人。
- 向宽处走： 学习Node.js、数据库、部署。把自己变成一个能独立完成产品的工程师，而不仅仅是“写界面的”。
- 向高处走： 学习编译原理、工程化架构。搭建高效的开发环境。
AI看不懂混淆代码 -> 所以逆向工程依然值钱。
AI不会设计新的工具链 -> 所以造轮子依然值钱。
AI不懂业务怎么拆分微服务 -> 所以架构设计依然值钱。
AI写的代码性能一般 -> 所以底层优化依然值钱。
IMPORTANT如果你只学怎么“开车”（写代码语法），那自动驾驶来了你就失业了。但如果你学的是机械原理（底层/工具链）、交通规划（架构/全栈）或者特种驾驶（安全/逆向），那你永远是控制方向盘的那个人。
总结：
不要再去学怎么“手写一个导航栏”了，那是上个时代的技能。
现在的学习路径应该是：用AI帮你快速把页面搭起来，然后把节省下来的时间，全部投入到 JS运行机制、浏览器原理、网络协议、算法、以及复杂的业务架构设计中去。
LLM（尤其是Gemini3p、Claude4.1、GPT-codex等）并没有让前端消失，但它极其残忍地铲除了前端开发中那些“只靠记忆和体力”就能完成的领域。
对于初学者和就业者来说，以下这四个曾经可以用来谋生的领域，现在已经基本被摧毁了：
- “切图仔”模式 (The PSD-to-HTML Era is Over)
- 曾经的价值： 设计师给一张Figma/PSD图，开发者手写HTML/CSS把它还原出来，处理一下Margin、Padding、Flex布局。
- 现在的状况： 彻底毁灭。
- 工具如 v0.dev、Screenshot-to-Code 甚至直接把截图扔给 Claude/Gemini，它们能在几秒钟内生成完美的 Tailwind CSS 代码。
- 就业影响： 如果你的作品集里还在展示“我能完美还原一个静态网页”，这在面试官眼里约等于毫无价值。因为老板一个月花20美元订阅AI，干得比你快100倍。
- “API 搬运工” (CRUD Boilerplate)
- 曾经的价值： 写一个表单，验证一下手机号格式，调用一下后端API，把数据显示在列表里。这是过去初级前端80%的工作内容。
- 现在的状况： 极度贬值。
- 现在的IDE（如Cursor）可以直接根据注释生成整个 fetch 请求、Loading状态处理、错误捕捉。
- 就业影响： 公司不再愿意招一个初级员工来写这些“样板代码”。以前招初级是为了给高级打下手，写写简单的页面；现在高级工程师+AI，一个人就能把这些杂活干完。“初级工程师”这个岗位的坑位正在剧烈收缩。
- “文档背诵型”技能 (Syntax Memorization)
- 曾经的价值： 面试时问“CSS居中有几种写法？”“JS数组去重怎么写？”“Webpack怎么配置？”
- 现在的状况： 毫无意义。[4][6]
- 没人需要背这些了。以前你必须是个活字典，现在AI是全知全能的百科全书。哪怕你忘了怎么写 Reduce，敲两个字母AI就给你补全了。
- 就业影响： 面试考察重点从“你会写这个语法吗？”变成了“这段AI生成的代码为什么跑不通？”或者“这段代码有性能陷阱，你能看出来吗？”。
- 低端的外包与仿站 (Low-end Outsourcing)
- 曾经的价值： 接私活，帮小餐馆做一个点餐页，帮小公司做一个展示站。
- 现在的状况： 被SaaS和AI生成器吞噬。
- 以前需要找你花几千块钱做的事，现在用无代码平台+AI文案+AI配图，普通人一下午就能搞定。
对初学者的残酷真相：你需要跨越“新手村陷阱”
现在最可怕的不是AI能写代码，而是AI给初学者制造了一种“我会写代码”的幻觉。
新手村陷阱： 你用AI生成了一个看起来很酷的网站，你觉得你入门了。 现实： 一旦业务逻辑变得复杂（比如涉及到权限管理、复杂的并发处理、Canvas绘图），或者代码出了诡异的Bug，AI就开始“胡说八道”了。这时候如果你没有深厚的功底，你连改都不知道从哪改。
“跳过html/css”不等于“不学”，而是从“学习如何手写”转变为“学习如何原理性理解和调试”。
如果你完全跳过 HTML/CSS/Tailwind，直接去搞 JS/TS 和业务，你不会成为“架构师”，你会成为一个**“跛脚的盲人”**。因为 AI 生成的界面一旦稍微错位（比如 flex 布局挤压了，z-index 遮挡了），如果你不懂 CSS 盒子模型和层叠上下文，你连让 AI 怎么改都描述不清楚。
你要跳过的不是“知识本身”，而是“机械记忆的过程”。
1. HTML/CSS：从“手写”转为“审视/review”
- 以前的笨办法（要跳过）：
- 花费两周时间死记硬背
grid-template-areas的语法。 - 手写几千行 CSS 来练习如何实现一个复杂的导航栏动画。
- 背诵 Tailwind 的所有类名（比如
pt-4mx-auto）。
- 花费两周时间死记硬背
- 现在的加速法（必须学）：
- 核心概念必须懂： 什么是盒子模型 (Box Model)？什么是文档流 (Flow)？
flex和grid的布局逻辑是什么（主轴/交叉轴）？position: absolute/relative/fixed的参照物是谁？ - 学习方式： 让 AI 生成一个布局，然后打开 Chrome DevTools（开发者工具）。
- 去点选那个元素，看它的
Computed属性。 - 试着在控制台里开关那些 CSS 属性，看页面怎么崩坏，又怎么恢复。
- 去点选那个元素，看它的
- 目标： 你不需要能凭空写出完美的 CSS，但当 AI 生成的代码出现“文字溢出”、“元素无法对齐”时，你能一眼看出是因为漏了
flex-shrink: 0还是overflow: hidden。 - Tailwind： 了解它的设计哲学（原子化 CSS），至于具体类名？装个插件让 IDE 提示，或者让 AI 写，不用背。
- 核心概念必须懂： 什么是盒子模型 (Box Model)？什么是文档流 (Flow)？
2. JS/TS：这是核心，不能跳过
JS 是逻辑的载体，这部分不能跳过，反而要加倍学，但侧重点不同。
- 以前的笨办法（要跳过）：
- 背诵
Date对象的所有格式化方法（AI 会写）。 - 默写正则表达式来验证邮箱（AI 写得比你好）。
- 死磕怎么用原生 JS 操作 DOM（
document.getElementById），现在都用框架了。
- 背诵
- 现在的加速法（必须深挖）：
- 异步与事件循环 (Event Loop)： 这是 AI 最容易写出 Bug 的地方。如果你不懂
Promise、async/await、宏任务/微任务的执行顺序，你根本修不了“数据为什么没加载出来”的问题。 - 作用域与闭包 (Scope & Closure)： AI 经常会写出变量污染或者内存泄漏的代码，你不懂原理就查不出来。
- TypeScript 类型系统： 这是重中之重。 你现在不需要自己写复杂的逻辑，但你必须能定义清晰的
Interface和Type。TS 是你约束 AI 不乱写的契约。 如果你能写出完美的类型定义，AI 就能填充出完美的逻辑代码。
- 异步与事件循环 (Event Loop)： 这是 AI 最容易写出 Bug 的地方。如果你不懂
3. 浏览器原理与网络：
初学者往往忽视这部分，觉得“能跑就行”。但在 AI 时代，由于代码生成变得极其容易，性能优化和原理分析就成了稀缺能力。
- 必学内容：
- 渲染原理： 浏览器是怎么把 HTML 变成像素的？什么是重排 (Reflow) 和重绘 (Repaint)？（懂了这个，你才能看出 AI 生成的动画是否卡顿）。
- 网络协议： HTTP 缓存策略（强缓存/协商缓存）、跨域问题 (CORS)、WebSocket。当 AI 写的请求报错“CORS Error”时，你得知道这是服务器配置问题还是请求头问题，而不是只会傻傻地问 AI“为什么报错”。
4. 所谓的“业务”到底是什么？
你说“指向业务”，对于初学者来说，不要空谈“商业逻辑”，你应该关注的是**“应用架构逻辑”**。
- 实战训练法（Project-Based Learning 2.0）：
- 以前： 对着视频教程，从头敲一个“待办事项列表”。
- 现在：
- 让 AI 生成一个“待办事项列表”。
- 提出复杂需求刁难 AI：
- “我要支持本地存储，刷新不丢失。”
- “我要支持拖拽排序。”
- “如果网络请求慢了，怎么防止用户重复点击？”
- “如果有 10000 条待办事项，页面卡死了，怎么用虚拟滚动 (Virtual Scrolling) 优化？”
- 你的工作：把 AI 给出的零散代码，组装进你的项目中，处理它们之间的冲突，解决出现的 Bug。
总结：你的新身份
不要把自己当成搬砖工（从零堆砌代码）。
要把自己当成包工头（Code Reviewer & Architect）。
你需要跳过的是“搬砖的动作”，但你必须懂“砖头怎么砌才不会倒”。
- HTML/CSS： 懂原理，能读懂，能调试，不硬背。
- JS/TS： 精通异步、作用域、类型系统，这是你的内功。
- 工具/原理： 熟练使用 DevTools，理解浏览器和网络，这是你的透视眼。
当你看到 AI 生成的一段代码，心里想的不是“哇好神奇”，而是这里用 map 可能会有性能问题，建议改成 for 循环，而且这个样式在 Safari 上可能会错位，我得加个前缀——这时，你就走出了新手村陷阱。
不要因为名词多就害怕。前端其实就三块大石头：
- JS 语言本身（闭包、原型、异步）
- 浏览器环境（DOM、事件、渲染、存储）
- 网络协议（HTTP、跨域）
其他的（如虚拟滚动、Webpack、Axios）都只是基于这三块石头长出来的花草。先把石头摸透，花草随用随学。
关于CSS：
如果你完全不懂 CSS，AI 生成的代码一旦布局错乱（比如按钮被挡住了、手机上排版炸了），你连问题出在哪里都不知道，更别提让 AI 修复了。
你需要“大致看”的 20% 核心内容（能解决 80% 的问题）：
- 盒模型 (Box Model) —— 必看
- 搞懂：
margin（外边距）、padding（内边距）、border（边框）、content（内容）。 - 为什么： 这是网页布局的原子。不懂这个，你永远调不对元素的大小和间距。
- 搞懂：
- 布局 (Layout) —— 必看
- 搞懂：
Flexbox和Grid。 - 重点： 只要懂
justify-content(主轴对齐) 和align-items(交叉轴对齐) 以及flex-direction。 - 为什么： 现代网页 99% 的排版都是靠这两个实现的。AI 经常会把对齐搞反，你得能一眼看出来。
- 搞懂：
- 定位上下文 (Positioning) —— 选看
- 搞懂：
relative(相对) 和absolute(绝对) 的关系。 - 为什么： 当你要做“右上角的关闭按钮”或者“悬浮弹窗”时，不懂这个就会导致元素满屏幕乱飞。
- 搞懂：
- 单位 (Units) —— 扫一眼
- 内容：
px(像素)、rem(相对于根元素字体)、vh/vw(视口百分比)。 - 理由： 知道 100vh 就是“占满整个屏幕高度”就行。
- 内容：
- Tailwind CSS —— 推荐作为“默认语言”
- 怎么处理： 不需要刻意去学 CSS 原始语法，直接上手 Tailwind。
- 理由： Tailwind 本质上是把 CSS 变成了“语义化的类名”（比如
flexitems-centerp-4）。这非常适合 AI 生成，也适合人类阅读。你只需要让插件在编辑器里提示你就行，不用背。
坚决不需要看的内容（让 AI 做）：
- 复杂的 CSS 动画 (@keyframes)。
- 媒体查询的具体断点写法 (Media Queries)。
- 为了兼容 IE 浏览器的各种 Hack 写法。
- CSS 预处理器 (Sass/Less) 的复杂函数。
可以直接跳过（让 AI 做）：
- Grid 布局（初学者用 Flex够了，复杂的给 AI）。
- float 浮动（过时了，别看）。
- animation / transition 动画细节（AI 写得比你顺滑）。
- 复杂的选择器权重计算（碰到样式不生效再查）。
关于后端切入：
绝对不要在初学阶段并行学习 golang 或 jv。直接死磕 JS -> ES6 -> TS，然后用 Node.js 切入后端。
为什么不要并行学 Golang？
- 认知过载： JS 是基于原型的异步语言，Golang 是强类型的同步并发语言。两者的编程思维（Paradigm）完全不同。初学者同时学两套，会导致你“走火入魔”，最后两边都学不精。
- JS 的全栈红利： JavaScript 是目前唯一一门**既能写前端（浏览器），又能写后端（Node.js），还能写数据库脚本（MongoDB）**的语言。
- 效率最大化： 您现在的目标是“懂业务架构”。用 Node.js (NestJS/Express) 写后端，您可以复用你刚刚学会的 JS/TS 语法，把精力集中在“数据库设计、API 鉴权、微服务架构”这些核心业务逻辑上，而不是浪费在学习 Golang 的语法（如
if err != nil）上。 - 重原理，轻记忆： 语法（Syntax）可以通过 AI 生成，但运行机制（Runtime Mechanism）和内存模型必须通过人脑理解。不懂原理将无法调试 AI 产生的复杂 Bug。
- 工程化思维： 从学习的第一天起，就要以“构建系统”而非“编写脚本”的思维要求自己。
阶段一：JavaScript 核心机制（ES6+ 现代标准）
目标： 跳过过时语法，直接掌握现代写法，理解数据在内存中的表现。
- 变量与内存模型：
- 使用
let和const，彻底废弃var。 - 核心难点： 引用类型与堆栈内存。理解为什么修改一个对象的属性会导致引用的源对象也发生变化（浅拷贝与深拷贝的区别）。
- 使用
- 数据处理：
- 放弃低效的
for循环，熟练掌握数组的高阶方法：map(转换)、filter(筛选)、reduce(聚合)。这是数据驱动开发的核心。 - 解构赋值：熟练使用
const { data } = response提取数据。
- 放弃低效的
- 函数与作用域：
- 对比普通函数与箭头函数 (
=>)。 - 核心难点： 理解
this指针的动态绑定机制，以及闭包 (Closure) 产生的变量生命周期问题。
- 对比普通函数与箭头函数 (
阶段二：异步编程与事件循环（攻坚重点）
目标： 跨越新手与工程师的分水岭。这是 AI 最容易出错、最难调试的领域。
- 运行机制：
- 理解 JavaScript 的单线程特性与 Event Loop (事件循环)。
- 区分宏任务 (Macro-task) 与微任务 (Micro-task) 的执行顺序。
- 异步工具：
- Promise： 理解 Pending、Fulfilled、Rejected 三种状态流转。
- Async/Await： 必修课。学习如何用同步的代码结构编写异步逻辑，消除回调地狱。
- 实战场景：
- 使用
fetch进行网络请求，处理竞态问题（Race Condition）和错误捕获（Try/Catch）。
- 使用
阶段三：TypeScript 工程化（职业护城河）
目标： 给代码加上强类型约束。从这一刻起，停止编写脚本，开始构建工程。
-
类型系统基础： 掌握 string, number, boolean 等基本类型，尽量避免使用
any。 -
接口与类型别名：
- 使用
Interface描述数据结构（例如后端返回的 JSON 格式）。 - 利用 IDE 的智能提示减少拼写错误和逻辑漏洞。
- 使用
-
泛型 (Generics)： 理解
Array<T>和Promise<T>的含义，即“参数化的类型”。
阶段四：浏览器环境与运行时
目标： 理解代码运行的“容器”。
- DOM 与事件：
- 理解事件冒泡 (Bubbling) 与事件捕获 (Capturing) 机制，掌握事件委托 (Event Delegation)。
- 数据持久化：
- 区分
localStorage(持久)、sessionStorage(会话) 和Cookie的应用场景。
- 区分
阶段五：后端架构与全栈延伸（Node.js）
目标： 利用语言同构优势，切入后端业务架构。
- 技术栈迁移： 不学习新语言，直接使用 TypeScript 配合 NestJS 或 Koa 框架开发后端。
- 业务核心： 将精力集中在 HTTP 协议理解、数据库设计 (SQL/NoSQL)、API 鉴权 (JWT) 以及 Docker 容器化部署上。
- 架构思维： 学习如何设计高可用的微服务架构，而非纠结于简单的 CRUD 实现。
小巧思：
-
每一个概念（如闭包、原型链），先让 AI 举生活中的例子建立直观认知，然后立刻在浏览器控制台中编写代码验证，最后分析内存和执行栈的变化。
-
认知陷阱： 在未精通 JS/TS 体系前，切勿分心学习其他后端语言，以免造成思维混乱和效率降低。