前端学习资源

前端相关资源、插件

status 站点状态页

http://status.openai.com/

https://status.github.com/
https://www.githubstatus.com/

https://status.npmjs.org/

https://status.grafana.com/

https://status.postman.com/

https://b4u.qzz.io/

状态页合集，开源status，公共status页面
https://github.com/ivbeg/awesome-status-pages

Apache HertzBeat 监控/告警/状态页一体

https://hertzbeat.apache.org/zh-cn/

PostHog 用户行为记录/分析

https://posthog.com/
https://github.com/PostHog/posthog

PostHog 是一款功能强大的开源产品分析平台，它帮助团队收集用户在产品中的行为数据，并进行分析以优化产品体验、驱动增长

事件自动捕获与自定义：PostHog 可以自动捕获常见的用户交互事件（如点击、输入、页面浏览），无需手动埋点。同时也支持为特定业务需求自定义事件
会话回放（Session Replay）：此功能允许你像回放录像一样，观看真实用户在网站上的完整操作过程，包括鼠标移动、点击、滚动和输入（内容自动脱敏），这对于复现用户遇到的bug、理解用户体验瓶颈至关重要

Nerd Fonts 字体图标

https://www.nerdfonts.com/

ryanoasis / nerd-fonts
https://github.com/ryanoasis/nerd-fonts

Nerd Fonts 是一个开源项目，专为开发者设计，旨在通过将流行图标集（如 Font Awesome、Material Design Icons、Octicons 等）与编程字体合并，创建兼具功能性与美观性的字体。目前支持 67 款以上预修补字体，整合超过 10,000 个字形/图标，覆盖终端、代码编辑器、IDE 等开发环境的需求

特性：

将 3600+ 图标从 11+ 个主流图标集（如 Font Awesome、Devicons、Weather Icons 等）嵌入到编程字体中，无需额外插件即可在编辑器中显示图标
支持单宽度（等宽）和双宽度（非等宽）字形，确保图标在不同场景下的对齐一致性
提供常规、斜体、粗体等变体，覆盖不同设计需求
新增字体支持（如 Adwaita Mono、Atkinson Hyperlegible Mono），并持续更新主流字体（如 Cascadia Code、JetBrains Mono、Iosevka 等）至最新版本
支持 Windows、macOS、Linux 系统，提供多种安装方式（如 Homebrew、Chocolatey、Arch 仓库）
提供 Font Patcher 工具（基于 Python），允许用户为任意字体添加图标，满足个性化需求

Mac HomeBrew 安装 hack 和 meslo-lg 字体族

brew install font-hack-nerd-font
brew install font-meslo-lg-nerd-font

终端字体配置：

iTerm2 配置字体：Preferences - Profiles - Default - Text - Font 选择 MesloLGS Nerd Font Mono
PyCharm/IDEA 配置终端字体：Preferences - Editor - Color Scheme - Console Font - 勾选 Use console font instead of the default - Font 选择 MesloLGS Nerd Font Mono
VSCode/Cursor 终端字体配置：Ctrl + , 打开配置 - 搜索 terminal.integrated.fontFamily - 输入 MesloLGS Nerd Font Mono

MesloLGS Nerd Font Mono
Hack Nerd Font Mono

Viser 数据可视化

前端数据可视化工具包，支持 Reac, Vue, AngularJS
https://viserjs.github.io/
https://github.com/viserjs/viser

Viser api 文档
https://www.yuque.com/rs385i/yzbt72/kt3iq2

前端分片上传组件 WebUploader

https://github.com/fex-team/webuploader

CSS 精灵图/雪碧图

CSS 精灵(CSS sprites)，又称雪碧图，是一种网页图片应用处理技术。

一个网页中往往会应用很小的背景图作为修饰，当网页上的图像过多时，服务器就会频繁的接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的速度。因此为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 css 精灵技术（也称css sprites、css雪碧）

精灵技术主要针对于背景图片使用，把多个小背景图片整合到一张大图片中，这个大图片也称为 sprites 精灵图或者雪碧图。然后利用 CSS 的 background-image, background-repeat, background-position 的组合在背景大图中定位到某个小图，background-position 可以用数字精确地定位出背景图片的位置。

vuepress 博客

团队博客
博客采用 vuepress 搭建。所有文档编写采用 markdown 语法。项目共两个分支 dev，和 master。dev 是源文件，master 分支是 vuepress 生成的静态 html，githubpage 会读取 master 的静态文件。

510team/510team.github.io
https://github.com/510team/510team.github.io

Canvas

前端小项目：使用canvas绘画哆啦A梦
https://zhuanlan.zhihu.com/p/28013131?utm_medium=social&utm_source=ZHShareTargetIDMore

TensorFlow.js

作为深度学习界的当红炸子鸡——TensorFlow 开源组织终于在 2018 年 3 月推出了首个 JavaScript 版本。TensorFlow.js 可以在浏览器端完成模型训练、执行和再训练等基本任务，并且借助 WebGL 技术，可以和 Python、C++ 版本一样能够通过 GPU 硬件加速完成计算过程。

前端人工智能？TensorFlow.js 学会游戏通关
https://zhuanlan.zhihu.com/p/35451395

Bootstrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
http://www.bootcss.com/

当前位置 : 首页 » 文章分类 : 开发 » 前端学习资源