Untitled

确定项目

  1. 罗列想要开发的全部内容,从多个项目中挑选出一个最合适的作为月度任务
  2. 基于几个维度去判定要选择哪个项目作为开发的项目
    1. 是否1个月内可完成
    2. 是否有熟悉的朋友可以咨询相关的内容
    3. 是否自己(感兴趣|能用的上)

综上所得,我确定的任务和目标是:快速学习前端知识并在一个月内开发上线一款figma插件

学习路径

Learn to develop a Figma plugin By using svlete

Learn React

Learn HTML + CSS + JS

在 Figma 教程中发现几个不错的教程,不是长篇大论完全覆盖,而是以大纲为主,点到为止。考虑到自己的核心目标并不是成为一名专业的前端开发人员,仅仅是为了掌握这个能力来完成一些简单的项目,对里面的内容进行简单的学习,不像之前那样深入学习所有内容模块。

这个思想转变很关键,以前不是先明确要达成的结果,而是先学,大而全的学,但最后没有实际结果,学了和没学差不太多。毕竟大部分的知识不会重复使用,而只要不是重复使用的内容,就会被忘记。

在学习过程中,有一个很关键的点是在本地跑起来。这在后面的项目开发中也是,框架很多,可以用各种各样的方式跑起来,但哪个能最简单不出错就真的纯看运气了。

  1. 在开始学习前,找熟悉的开发朋友推荐了教程,最后选定为https://www.theodinproject.com/paths/foundations/courses/foundations,这个教程非常的棒,由浅入深,不仅仅有HTML+CSS+JS的内容,还含有如何使用Chrome进行调试,Github版本控制这些知识点

  2. 由于之前学过一段时间的HTML+CSS,所以很快上手,就没有细读这一部分的内容,简单的看完就过了,主要的时间都花在布局和JS上了

  3. 过程中极力使得当前的学习有用化,所以在学完HTML+CSS后,就开始跟着Figma官方的视频教程开始搭建页面https://www.youtube.com/watch?v=p-z566ILvxc&list=PLXDU_eVOJTx5YBAszyuOTyxlgIxkQVyii&index=5

  4. 中途遇到了不少的问题,包括无法引入https://github.com/thomas-lowry/figma-plugin-ds,花了不少的时间找答案,最后在视频的下面看到了官方的回复

    <aside> 💡 一个小技巧,在哪里遇到问题就在哪里找答案,毒蛇出没之处,七步之内必有解药!

    </aside>

  5. 在使用HTML+CSS搭建完页面后,发现有些状态无法快速获得,又想换成基于React的这款开源库https://yuanqing.github.io/create-figma-plugin/

  6. 看了官方教程https://react.dev/的案例,跟着试了一下,然后发现需要花费很长的时间才能很好的掌握,这与我的初衷不同,在咨询了朋友以后,毅然选择放弃,但也起码花了1天的时间学习里面的各种语法