我给自己搭建的前端导航网站,你们都别用

news2025/4/18 10:22:35

欢迎关注我🥰🥰🥰 主页传送门,持续产出有思考的文档~


💥 想法来源

前段时间在工作的时候,因为遇到了一些之前没了解过的知识,所以化身百度cv工程师,上网冲浪寻找灵感(找源码copy🐶)。但是网上有好多重复或者低质量的文章,严重影响了我的cv效率。

此时,一些埋藏了两年半的想法涌上心头🧐:

场景1: 平时在工作中要用到新知识的时候,需要上网找教程文档,但是看官方文档又比较费时间,常常是先找个网文教程跟着做,出了bug才会看官方文档寻找原因。

那么问题来了,一般我们寻找到优质的教程网文后,常常会收藏起来以后备用,但是以后真的会用吗?😅现实是很多情况下,因为收藏的文章太多,以后再用到这个技术时,常常会懒得去翻收藏夹找对应的文章,而是重新去百度搜索💩(优质网文:家人们谁懂啊,遇到个下头男,收藏了我却从来没宠幸过我🤡)

image.png

场景2: 对于一些类似于vite,typescript,eslint,.prettier等这种需要配置一些配置项的工具,应该很少有人会背他们有哪些配置项吧🤭(我是个low low的前端崽😭反正我是从来没记忆过),配置项这东西是:想配置一个规则时,又不知道叫啥,搜索都无从下手,看官方API 文档又太费时间,又或者随便照抄别人都配置,却不知道每个配置项的作用,导致存在一些隐患。

那么问题来了,为什么官方的 API [ 更全面、更准确 ],我却不愿意看呢,因为[ 太分散,太深入 ]。现实是工作中需要配置这些规则时,常常也是百度搜索对应的配置详解,因为他们[ 更直观,更方便 ]。如下图,还是挺多人这么搜的😀

截屏2023-05-31 上午10.18.52.png

先来说明一下导航网站是做什么的:在导航网站上,你可以轻松发现非常多实用、或具有创意的资源,不用再去靠自己的实践积累这些资源。导航网站的资源常常有:实用的开发工具、优质的网站、优质的文章、各种框架的官网入口、优质的技术博客等。

场景3: 我之前也收藏了几个好用的导航网站,确实很好用🤓但是对于我来说,也发现很多不方便的地方。

  • 比如大部分导航网站面向的用户群体都是程序员,而不是前端程序员,这样的网站上对于我们前端来说就会有很多“无用”的资源(当然肯定也有导航网站是面向前端的,只不过我没接触到🥺);
  • 又比如很多导航网站逐步迭代了很多功能,已经不单单是一个导航网站,体量太大,用起来感觉不清爽;
  • 再比如很多导航网站把所有资源都放在同一个页面,只是用菜单项区分开,我感觉也是有点混乱,技术类的,文档类的,休闲放松类的我觉得分开比较合适🧐
image.png

总结: 既然这样,那我就利用这个周末自己搭建个网站,提炼一些好的资源放上去,方便自己以后查阅 😀

💪 开整

闲言碎语不要讲,直接进入正题,我打算将我的导航网站分为五个模块:
工具、文档、游戏、摸鱼、案例

下面一个一个来介绍:

【工具】

工具菜单是收录一些实用、可以提高开发效率的工具。目前分为以下几种(我按可能用到的频率来排序):

  • 常用工具:一些零散不好归类的,实用的工具;
  • 图片处理:提供图片压缩,图片裁剪,生成精灵图,在线ps等处理图片等工具;
  • css工具:在写样式的时候,一些精致的样式调试起来太费劲,这里提供一些工具在线调试css,比如在线生成网格布局等;
  • UI灵感:没有设计,自己空想样式真的好难🤧
  • 图标:一些免费的图标字体库;
  • chrome插件:好用的chrome插件,谁用谁知道~
  • vscode插件:前端必备vscode插件

image.png

【文档】

文档菜单主打的就是简洁(我寻思都来查文档了,应该知道这个东西是干什么的,没必要写那些繁琐的描述)。

除了没有描述之外,它与其他导航网站不同的特点是,每个库都提供了官方文档相关文档两种(相关文档也就是网文教程),提供更多的查阅渠道,完美解决了上文情况1,2中的问题,奶丝🥳。

ps: 因为刚搭建好网站,大部分文档目前都是只提供了官方文档的入口😂,以后会陆续将以前收藏的网文链接或者精选一些好文挂上去~

image.png image.png

【游戏】

游戏菜单不过多介绍,把游戏单独拆出来,不要影响我们查找有用的工具👻 image.png

【摸鱼】

摸鱼菜单收录了一些有趣的,有创意的网站,以后会陆续收录一些免费视频、音乐、或其他资源的网站。

image.png

【样例】

样例菜单目前还没开发,准备留着以后放置一些自己写的小demo,又或者是一些例如three.js的3d案例等。

🍎 成果

先贴上网站地址: 前端助手传送门

目前网站刚刚搭建,很多东西都不完善,但是也能将就用了,以后慢慢维护,如果大家有什么好的网站或文章可以在评论区告诉我或者在gitee上提issues 😘😘😘(ps: 本网站是部署在gitee pages上的,代码开源)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/597499.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第六十一天学习记录:C语言进阶:C语言预处理1

程序的翻译环境和执行环境 在ANSI C的任何一种实现中,存在两个不同的环境。 第一种是翻译环境,在这个环境中源代码被转换为可执行的机器指令。第2种是执行环境,它用于实际执行代码。 详解编译链接 翻译环境 ![在这里插入图片描述](https:/…

实战:单点登录的两种实现方式,附源码

最近工作有点忙,好久没更新文章了,正好这两天在整理单点登陆相关的文档,今天趁着小孩睡着了🤫,赶紧码一篇实战文交差。 概念 单点登录(Single Sign-On,SSO)是一种身份验证服务&…

机器学习常识 13: PCA

摘要: 主成分分析 (principal component analysis, PCA) 是一种有理论依据的无监督特征提取的线性方法. 1. 特征选择与特征提取 特征选择是指从已有的特征里面选择出一个子集. 例如: 身高、体重、性别、年龄、体温、血相等等, 如果要一个人是否患流感,身高、体重等…

OpenMMLab-AI实战营第二期——1. 计算机视觉与OpenMMLab概述

文章目录 1. 课程内容概述1.1 Openmmlab框架1.2 课程其他说明 2. mmcv安装2.1 正确步骤2.2 debug2.3 错误探索 1. 课程内容概述 个人更关注语义分割和3D方面的内容,所以这里重点记录这两点相关的。 1.1 Openmmlab框架 具体的模块,详见:http…

wy的leetcode刷题记录_Day67

wy的leetcode刷题记录_Day67 声明 本文章的所有题目信息都来源于leetcode 如有侵权请联系我删掉! 时间:2023-6-1 前言 目录 wy的leetcode刷题记录_Day67声明前言1019. 链表中的下一个更大节点题目介绍思路代码收获 1019. 链表中的下一个更大节点 222. 完全二叉树…

UUOffice 工具箱,一款功能强大的 Excel 办公插件,好用推荐 ~

简介 UUOffice 工具箱,是一款功能强大的Office插件,功能强大,有着各种的单元格及文本的处理工具,自定义扩展函数,批注管理,图片导入导出,工作表汇总,联想输入等等超多实用工具,对日…

奇葩算法——猴子排序

🏆今日学习目标: 🍀猴子排序 ✅创作者:林在闪闪发光 ⏰预计时间:30分钟 🎉个人主页:林在闪闪发光的个人主页 🍁林在闪闪发光的个人社区,欢迎你的加入: 林在闪闪发光的社区…

Docker下载遇到的报错以及解决记录

目录 一、docker介绍 1. Docker引擎 2. Docker镜像 3. Docker容器 4. Docker仓库 5. Docker网络 二、docker下载 1.首先再官方下载好docker 2.在我打开时出现了下面的错误: 然后我下载了一个wsl 然后就可以正常打开了 (2)如果自己的电…

「学习IT技术和编写高质量代码的经验和建议」

一、你在编写代码时,会特别注意哪些流程? 在编写代码的过程中,我通常会特别注意以下流程: 输入验证:确保输入的参数满足预期,防止出现非法输入导致的安全问题或异常错误。 异常处理:在代码中添…

迅为全国产ATX3A5000_7A2000主板-龙芯平台安装 开源loongnix系统

Loongnix下载 Loongnix桌面版镜像:有基于mate主题的版本和基于cartoon主题的版本。本章节的安装 步骤以cartoon主题的安装方式为例,mate主题的ISO安装步骤与cartoon主题的安装方式类 似。 1.1 引导和开始安装 主机启动后,BIOS从U盘引导启动系统,出现…

Vue组件化、通过自定义指令子组件向父组件传递、$nextTick

1.如何安装Vue脚手架? 第一步(仅第一次执行):全局安装vue/clinpm install -g vue/cli 第二步:切换到你要创建项目的目录,然后使用命令创建项目vue create xxxx 第三步:启动项目npm run serve 2…

chatgpt赋能python:Python中的或且非

Python中的或且非 Python语言中的逻辑运算符包括:或、与、非,分别用 “|”、“&”、"~"符号表示。 或运算符(|) 当两个操作数中有一个为True时,结果为True。 例如: a 1 b 2 c 3 if a…

Qt概述和项目文件介绍

注意:学习本专栏的内容需要了解C相关知识,会涉及到C基础语法和相关特性,可以参考我的另一个专栏 c从零开始_小梁今天敲代码了吗的博客-CSDN博客 目录 一.什么是Qt 二.Qt的案例 三.项目文件介绍 一.什么是Qt 是一个跨平台的 C 应用程序…

YOLOV5 + PYQT5双目测距(二)

YOLOV5 PYQT5双目测距 1. 测距源码2. 测距原理3. PYQT环境配置4. 实验4.1 下载源码14.2 复制源码2文件夹4.3 创建py文件4.4 实验结果 1. 测距源码 详见文章 YOLOV5 双目测距(python) 2. 测距原理 如果想了解双目测距原理,请移步该文章 双…

chatgpt赋能python:Python中的行与列:从入门到精通

Python中的行与列:从入门到精通 Python是一种高级编程语言,广泛用于计算机编程领域。在Python中,行和列是编程过程中不可或缺的元素,因为它们代表着代码中最基本的构建块。本文将介绍Python中的行和列,并探讨它们在程…

【python】之loguru库,好用的日志管理库!

在 Python 中用到日志记录,那就不可避免地会用到内置的 logging标准库 。虽然logging 库采用的是模块化设计,你可以设置不同的 handler 来进行组合,但是在配置上通常较为繁琐;而且如果不是特别处理,在一些多线程或多进…

linux进程间通信(信号量)

信号量是一个特殊的变量,程序对其访问都是原子操作,且只允许对它进行等待(即 P(信号变量))和发 送(即 V(信号变量))信息操作。最简单的信号量是只能取 0 和 1 的变量,这也是信号量最常见的一种形式, 叫做二…

由于找不到iutils.dll而造成的错误,要怎么去解决?

在使用电脑或运行某些软件时,有时会遇到“找不到iutils.dll”的错误提示。这个错误通常表示缺少iutils.dll文件或者该文件已经损坏。如果你遇到了这个问题,不要担心,因为有很多方法可以解决这个问题。下面我们一起来看看找不到iutils.dll的问…

在spring容器启动后监听事件ApplicationReadyEvent

概述 经常会在业务中遇到需要在项目启动后刷新/预热一些数据的要求。 常见可以监听ApplicationReadyEvent和ContextRefreshedEvent. 但是因为常见的springboot项目都依赖的springmvc,所以实际上有2个容器,spring的ioc容器是springmvc的父容器。 而且C…

电脑上怎么录屏?2个好用的电脑录屏方法分享!

案例:怎么在电脑上录屏? 【我想分享我电脑上的操作、游戏画面给我的朋友,但是我不知道如何录制电脑屏幕。有没有详细的电脑录屏方法,在线蹲一个!】 你是否曾经遇到这样的情况:需要录制电脑屏幕上的一些操…