网罗前端各种工程(持续更新)

219 阅读8分钟

持续更新这些年搜录的各种前端常用、曾经见过需要用又找不到了以及划水时发现的各种有趣前端工程

懒得上图,我尽量说明写清楚

CSS

  1. tailwindcss 作为前端,这个库是css相关最基础、成熟且必要的库,很好的解决多人项目类名乱起,重复样式重复写等问题
  2. daisyui 配合楼上tailwindcss的组件库
  3. normalize.css 用来消除浏览器默认样式的 CSS 库
  4. core100个炫酷按钮合集
  5. icss 华丽花哨的css玩法,文章很细,没事划有营养的水的时候可以看看
  6. css-protips CSS 专业技巧。一个帮你提升 CSS 技巧的收藏集
  7. SpinKit纯 CSS 实现加载动画的项目
  8. css.gg 开源图标 UI 库。支持 CSS、SVG、Figma、NPM 等(其实本来不想放上来的,毕竟都有御用ui设计,随便放个ui库好了)
  9. papercss 手绘风格的 CSS 库
  10. weui微信开源的原生基础样式库
  11. css_tricks 常用 CSS 样式示例集合及常用css在线生成
  12. You-Dont-Need-JavaScript 看似需要 JavaScript 实现的效果,其实仅用到了 CSS 的示例集合
  13. 30diasDeCSS30 个用 HTML+CSS 构建的迷你项目
  14. css-only-chat 前端不用 JavaScript 只用 CSS 实现网络聊天的功能,一直没时间细看啥原理
  15. china_school_badge 全国高校图标库
  16. githubCSSGitHub团队的开源的设计系统组件库

javascript

  1. licia 综合性工具库,支持自定义库里只需要部分工具
  2. bignumber.js 前端乘除bug解决方案
  3. outils 业务代码工具库,小项目可以用常用的都有
  4. nanoid 随机 ID 的 JS 库, UUID库升级更小更快版本
  5. perfect-scrollbar 滚动条美化
  6. use-state-if-mounted内存泄漏某种情况的解决方案
  7. umi-plugin-icons 按antd 的方法 使用svg,ui设计出的svg如果异常可以尝试清除svg格式,最简单的就是传到iconfont再用,总的来说还挺好用这个扩展插件
  8. naive-ui 仅支持 Vue3 的组件库。拥有完善的 TypeScript 类型推导的 Vue3 组件库
  9. qier-progress 顶部进度条,nprogress重构升级版本,体积等更小
  10. sjcl JavaScript 加密库。用于 JS 的加密和解密,体积小且支持多种加密算法
  11. nzh 阿拉伯数字与中文数字相互转化的 JS 库
  12. cnchar 汉字处理 JS 库,支持简体字拼音、多音字、笔画数等功能
  13. EFQRCode qrcode的升级版,老板让你搞个二维码中间贴个logo就能难住了
  14. dicebear 免费随机生成头像的库,支持多种不同的风格,比如:像素、冒险家、标识等
  15. qier-player 一款基于 React 的轻量级在线视频播放器组件,界面简洁、操作流畅具有视频播放器的基础功能。界面还行
  16. video.js 开箱即用的视频播放器
  17. moovie.js 专注于电影的 HTML5 播放器。容易上手和使用,支持倍速播放、快捷键操作、字幕偏移即时调整等功能
  18. chart-race-react 一个简单易用的 Bar Chart Race(长条图赛跑动画) React 组件
  19. highlight.js 让网页上的代码实现高亮的 JS 库
  20. typical零依赖、仅 400 字节的输入动画库
  21. react-text-loop 实现文字循环展示的 React 组件
  22. rc-bullets基于 CSS3 Animation 使用 React 构建的弹幕组件
  23. fullpage 可创建全屏滚动网站,同时也可在网站中添加横向滚动条。适合快速搭建全屏滚动或者拥有视觉差的站点(当然前提是你不想用swiper)
  24. react-loadinggg 一款轻量、开箱即用并且支持按需加载的 React 动画组件库
  25. vue-monoplasty-slide-verify 基于 Vue2.0+ 的滑动验证码插件
  26. panolens 基于 WebGL 的全景查看库
  27. tesseract.js 支持多种语言的文字识别OCR的 JS 库, 虽然不常用,但是老板让你搞这种需求你也能说ok~
  28. ChatUI 对话领域的 UI 开源项目
  29. canvas-special Canvas 实例集合。包括五子棋、坦克大战、动态背景、动画粒子特效等
  30. spy-debugger 移动端调试工具
  31. arco.design arcod是字节跳动出品的,风格就是没有border的antd,如果有类似风格项目可以用 arco.design/
  32. S2 高性能多维交叉分析表格工具
  33. shepherd 引导用户浏览网站的 JavaScript 库
  34. ts-node 直接在 Node.js 上执行 TypeScript 代码的库
  35. svg-path-editor 在线 SVG 编辑器
  36. lax.js 用于滚动时创建平滑和好看动画的库
  37. chameleon一端所见即多端所见。适应不同环境的跨端整体解决方案,支持 Web、小程序、快应用 等平台
  38. WebGAL网页视觉小说引擎
  39. satori将 HTML 和 CSS 转换为 SVG 的库

编译器

  1. markdown-nice 能够自定义样式的 Markdown 编辑器。
  2. bytemd掘金社区开源的 Markdown 编辑器组件
  3. wangEditor 老牌富文本编辑器
  4. tui.image-editor 功能齐全的图片编辑器
  5. x-spreadsheet 轻量级 Execl 电子表格库,有详细的中文文档!!!
  6. fortune-sheet 类似 Excel 的电子表格组件。使用简单无需繁琐的配置,内置多种 Excel 常用功能,并且支持在线协同编辑
  7. x6 AntV 旗下的图编辑引擎
  8. drawio 流程图、序列图、网络拓扑图、甘特图、思维导图、模型图等,还能导出多种格式类型比如 png、svg、PDF、HTML 和 VSDX 格式(Microsoft Visio 图形格式)
  9. xterm.js 终端编辑器组件 10.LogicFlow 滴滴开源的流程图库,持实现脑图、ER 图、UML、工作流等各种场景 11.PPTist 一个基于 Vue3.x + TypeScript 的在线演示文稿(幻灯片)应用,还原了大部分 Office PowerPoint 常用功能

题外话

  1. 逃离北上广 如果你是一个正准备逃离北上广等一线城市却又找不到去处的IT人士,或许这个项目能给你点建议。
  2. code996根据 git 的提交时间推断工作强度的工具。通过分析 git 提交记录,得出是否加班、工作强度的可视化图表的工具
  3. Front-End-Interview-Notebook前端面试复习笔记,跳槽前最好看看
  4. JavaScript-Algorithms 该项目包含了前端的进阶算法、常见面试题、手写源码等
  5. fiora 一个功能丰富、支持多端的在线聊天室。它界面小清新,支持基本的聊天功能的同时还有好玩的消息朗读功能。项目上基于 TypeScript + React 16.9 代码逻辑清晰、注释较为完善,适合用来学习 node.js、 TypeScript、React 等技术
  6. Valine 一款快速、简洁且高效的无后端评论系统
  7. Learn-Vue-Source-Code 逐行剖析 Vue.js 源码
  8. game-programmer 游戏程序员的学习路径图
  9. DouZero_For_HappyDouDiZhu 基于快手开源的斗地主强化学习框架,实现的欢乐斗地主 AI 助手
  10. daytripper 摸鱼神器,物理外挂,就是忒贵
  11. one-html-page-challenge 单页面乱七八杂的挑战demo
  12. wechat-report 自制微信聊天年度报告
  13. live2d-widget网页的 Live2D 看板娘
  14. babel-handbook babel手册
  15. watching-youDOM跟随,搜录N年也没遇到使用场景
  16. 大学里没有的一课乱七八杂相关命令如GIT,vim等等

游戏

  1. star-battle 一个使用 JavaScript ES6、Canvas 开发的飞船射击类游戏
  2. css-sweeper 一个使用Html+css前端实现的扫雷,可在线试玩
  3. vue-idle-game 相对来说非常简单的挂机游戏,可用学习
  4. MazeBattles.com使用 Node.js 和 Socket.io 实现的在线迷宫游戏。入口在左上角出口在右下角,通过 [a][w][s][d] 按键移动位置。支持多人和单人两种模式,点击 “Show Solution” 可展示迷宫的解(BFS 算法实现)。在线试玩
  5. MarioHTML 马里奥网页游戏
  6. doomcaptcha毁灭战士射击游戏形式的验证码,放在这的原因是项目根本不敢用
  7. rubiks-cube Three.js 制作的 3D 魔方

自用

我觉得很好用的东东

  1. github520 通过修改 hosts 解决 GitHub 访问慢、图裂问题的项目。基于 GitHub Action 定时访问 ipaddress 自动获取、输出 GitHub 相关域名对应的最新 IP 保证长期有效
  2. Steam520 功能同上,steam解决方案
  3. Thief 划水神器
  4. GitHub-Chinese-Top-Charts 每周更新一次的 GitHub 中文项目排行榜,周一划水用
  5. BilibiliTask 哔哩哔哩定时自动完成任务项目
  6. showdoc 开源在线文档工具。支持:多端编辑查看、权限管理、文档导出、Markdown 语法等,且可安装docker
  7. regex-vis 在线可视化正则编辑器
  8. RevokeMsgPatcher Windows 系统下电脑版微信、QQ 的防撤回工具
  9. Stay iphone Safari上的油猴,懂得都懂
  10. WechatMomentScreenshot 朋友圈截图生成工具

其他

  1. MIME MIME参考手册
  2. tinypng 图片在线压缩工具
  3. tiny-image图片压缩同上
  4. fontface 字体下载
  5. cubic-bezier cubic-bezier生成器
  6. shapedivider 分割线生成器
  7. cron cron表达式生成器
  8. server酱 微信推送
  9. ddnsto 内网穿透