我给自己搭建的前端导航网站,你们都别用🤪
💥 想法来源
前段时间在工作的时候,因为遇到了一些之前没了解过的知识,所以化身百度cv工程师,上网冲浪寻找灵感(找源码copy🐶)。但是网上有好多重复或者低质量的文章,严重影响了我的cv效率。
此时,一些埋藏了两年半的想法涌上心头🧐:
场景1: 平时在工作中要用到新知识的时候,需要上网找教程文档,但是看官方文档又比较费时间,常常是先找个网文教程跟着做,出了bug才会看官方文档寻找原因。
那么问题来了,一般我们寻找到优质的教程网文后,常常会收藏起来以后备用,但是以后真的会用吗?😅现实是很多情况下,因为收藏的文章太多,以后再用到这个技术时,常常会懒得去翻收藏夹找对应的文章,而是重新去百度搜索💩(优质网文:家人们谁懂啊,遇到个下头男,收藏了我却从来没宠幸过我🤡)
场景2: 对于一些类似于vite,typescript,eslint,.prettier
等这种需要配置一些配置项的工具,应该很少有人会背他们有哪些配置项吧🤭(我是个low low的前端崽😭反正我是从来没记忆过),配置项这东西是:想配置一个规则时,又不知道叫啥,搜索都无从下手,看官方API 文档又太费时间,又或者随便照抄别人都配置,却不知道每个配置项的作用,导致存在一些隐患。
那么问题来了,为什么官方的 API [ 更全面、更准确 ],我却不愿意看呢,因为[ 太分散,太深入 ]。现实是工作中需要配置这些规则时,常常也是百度搜索对应的配置详解,因为他们[ 更直观,更方便 ]。如下图,还是挺多人这么搜的😀
先来说明一下导航网站是做什么的:在导航网站上,你可以轻松发现非常多实用、或具有创意的资源,不用再去靠自己的实践积累这些资源。导航网站的资源常常有:实用的开发工具、优质的网站、优质的文章、各种框架的官网入口、优质的技术博客等。
场景3: 我之前也收藏了几个好用的导航网站,确实很好用🤓但是对于我来说,也发现很多不方便的地方。
- 比如大部分导航网站面向的用户群体都是程序员,而不是前端程序员,这样的网站上对于我们前端来说就会有很多“无用”的资源(当然肯定也有导航网站是面向前端的,只不过我没接触到🥺);
- 又比如很多导航网站逐步迭代了很多功能,已经不单单是一个导航网站,体量太大,用起来感觉不清爽;
- 再比如很多导航网站把所有资源都放在同一个页面,只是用菜单项区分开,我感觉也是有点混乱,技术类的,文档类的,休闲放松类的我觉得分开比较合适🧐
总结: 既然这样,那我就利用这个周末自己搭建个网站,提炼一些好的资源放上去,方便自己以后查阅 😀
💪 开整
闲言碎语不要讲,直接进入正题,我打算将我的导航网站分为五个模块: 工具、文档、游戏、摸鱼、案例
下面一个一个来介绍:
【工具】
工具菜单是收录一些实用、可以提高开发效率的工具。目前分为以下几种(我按可能用到的频率来排序):
- 常用工具:一些零散不好归类的,实用的工具;
- 图片处理:提供图片压缩,图片裁剪,生成精灵图,在线ps等处理图片等工具;
- css工具:在写样式的时候,一些精致的样式调试起来太费劲,这里提供一些工具在线调试css,比如在线生成网格布局等;
- UI灵感:没有设计,自己空想样式真的好难🤧
- 图标:一些免费的图标字体库;
- chrome插件:好用的chrome插件,谁用谁知道~
- vscode插件:前端必备vscode插件
【文档】
文档菜单主打的就是简洁(我寻思都来查文档了,应该知道这个东西是干什么的,没必要写那些繁琐的描述)。
除了没有描述之外,它与其他导航网站不同的特点是,每个库都提供了官方文档
和相关文档
两种(相关文档也就是网文教程),提供更多的查阅渠道,完美解决了上文情况1,2中的问题,奶丝🥳。
ps: 因为刚搭建好网站,大部分文档目前都是只提供了官方文档的入口😂,以后会陆续将以前收藏的网文链接或者精选一些好文挂上去~
【游戏】
游戏菜单不过多介绍,把游戏单独拆出来,不要影响我们查找有用的工具👻
【摸鱼】
摸鱼菜单收录了一些有趣的,有创意的网站,以后会陆续收录一些免费视频、音乐、或其他资源的网站。
【样例】
样例菜单目前还没开发,准备留着以后放置一些自己写的小demo,又或者是一些例如three.js的3d案例等。
🍎 成果
先贴上网站地址: 前端助手传送门
目前网站刚刚搭建,很多东西都不完善,但是也能将就用了,以后慢慢维护,如果大家有什么好的网站或文章可以在评论区告诉我或者在gitee上提issues 😘😘😘(ps: 本网站是部署在gitee pages上的,代码开源)
转载自:https://juejin.cn/post/7239516348434677818