随记体验 · 2024年4月17日

踏上全栈征程:15个晚上,从0手撸一个网站

引子

技术的发展速度之快,总是在我们不经意间,悄然改变着我们所熟悉的世界,曾经眼花缭乱的JS、数据库、API,正在因为全栈框架的出现而变得“黯然失色”,真就应了网上那句话“大人,睁开眼看看吧,时代变了!”

今天不讲安全故事,讲讲最近骨哥的一次自学之旅,话说半个月前,无意中在国外网站上看到关于Next.js的相关介绍,骨哥便对它产生了浓厚的学习兴趣,于是凭借着我那点三脚猫的编程底子,决定尝试用Next.js开发一个前后端的全栈网站,经过15个夜晚的边学边写,终于在昨晚完成这个网站的开发与上线。

网站地址:https://ctftool.com (注:由于国内网站备案问题,微信无法直接跳转查看,只能浏览器打开)

首页效果:

image-20240417090759402

Tools页面:

image-20240417092439452

功能页面:

image-20240417092731012

移动端自适应:

image-20240417093733896

深色模式:

image-20240417092522300

心得体会

国内Next.js的中文教程真是少的可怜,B站上的大部分教程也是从YouTube上搬运而来,翻译质量更是参差不齐,虽然给自学带来了些许困扰,但这也从侧面反映出,目前国内跟进的开发者并不多,正是学习这项”新“技术的好时机。

既然中文学习资料不多,那只能边学边写了,俗话说“想百遍不如做一遍”,说干就干,本着“哪里不会解哪里”的原则,我的全栈自学之路自此开始。

首先是优秀的视频教程,有中文的优先看中文,没中文的,配合字幕插件与AI翻译可以达到同样效果,与看书相比,看视频学习的最大优势是能够在短时间内更加快速的获得技能增长。

其次是查阅官方文档,有时候网上一些博客文章、视频教学是基于一些特定版本的,当你在使用不同版本时,可能会出现各种各样的问题,此时查阅官方文档就是最有效的解决方案了,骨哥就曾遇到过好几次因为一个问题各种Google不得要领,最终在官方文档的指导下,瞬间排错的尴尬场面。

再有就是在编写代码时,为了获得更快速的效果呈现,可以借助目前AI的强大辅助能力,将问题“抛给”AI,你能在更短的时间内解决问题。最后就是对于一些重要知识点,做好记录,方便随时随地查阅。

以上种种,骨哥的学习方法归纳总结如下:

  • 寻找优质的教学视频,基本1.5倍速快速观看学习,对于重点内容,再进行二次正常速度的学习
  • 查看官方文档(这是一本永远值得信赖的“指导手册”)
  • 无论是写代码,还是某些功能的实现,借助强大的AI辅助能力,分分钟可以让你事半功倍,但是前提是你要擅长写出较好的Prompt
  • 养成记笔记的好习惯(良好的笔记能够帮助我更好地回顾和巩固所学)

结语

也许在前端、全栈开发工程师看来,骨哥的这个网站可能分分钟就能快速实现,但对于骨哥而言,却是一次从零开始的自我挑战和成长的历程,每一个报错的解决、每一个功能的实现,这些背后都是个人对技术的热爱和持之以恒的努力,就像你历经多日,终于发现一个RCE漏洞的那种兴奋感,可能只有亲身经历的人才能“深有体会”。

今天的分享不仅仅是关于如何自学新技术的分享,更多的是在面对挑战、实现目标过程中不断学习和成长的心得体会,希望我的分享能够带给你一些启示,正如 Linux 的创始人 Linus 所言,“Talk is cheap,Show me the code.”,希望我们在属于这绚烂的技术世界中,找到属于自己的价值和可能。:)