推荐 12 个学习前端必备的神仙级工具类项目与网站
大家好,我是你们的 猫哥,一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~
前言
猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。
公众号:前端GitHub,专注于挖掘 GitHub 上优秀的前端开源项目,并以专题的形式推荐,每专题大概 10 个好项目,每周会有一到三篇精华文章推送,与时俱进版前端资源教程。
已经推荐了 面试项目
、css 奇技淫巧项目
、代码规范项目
、数据结构与算法项目
、JavaScript 奇技淫巧项目
、前端必备在线工具
等专题的近 100 个优秀项目了。
平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目
以下为【前端GitHub】的第 14 期精华内容。
今天给大家推荐的是平时学习前端时,经常用到的一些辅助工具类网站。
网址 | 描述 |
---|---|
unbug.github.io/codelf | 变量命名智能推荐(支持中文) |
www.docschina.org | Web 前端开发人员提供优质中文文档 |
regexr.com | 正则表达式验证匹配 |
any-rule | 正则表达式库,非常全,使用起来很方便 |
www.toptal.com/developers | 多张图片合成雪碧图,并生成对应 css |
tool.lu | 众多工具集合,包括时间戳转换,进制转换等 |
www.bootcdn.cn 或 cdn.baomitu.com | 国内的CDN库,速度快 |
www.jsdelivr.com | 国外的 cdn 库,支持 github,npm,WordPress |
www.gitignore.io | 根据选择会去生成 .gitignore 文件 |
codesandbox.io | 在线编辑代码 |
www.typora.io | 实用的 Markdown 写作工具,所见即所得 |
mdnice.com | 使 markdown 语法更加美观,如果你有写博客,那这个非常合适你 |
1. codelf
有一种痛,不是程序员可能不懂,但如果是程序员一定懂,那就是给变量或函数命名。
随着项目越来越复杂,变量和函数数量越来越多,英语水平貌似也 hold 不住了。
虽然每个编程语言都有各种命名规范,但是也不能解决所有的问题。
每个程序员或多或少都在写代码的时候为变量和函数命名苦恼过!
也可以在自己用的编辑器里安装插件,支持 VS Code、Atom、Sublime Text 和 Chrome。
超级猫就是用 VS Code,也有装这个插件呢。
https://unbug.github.io/codelf/
2. docschina
印象中文,为 Web 前端开发人员提供优质中文文档。
https://www.docschina.org
3. regexr
RegExr 是一个基于 HTML/JS 开发的在线工具,用来创建、测试和学习正则表达式。
特性
输入时,结果会实时更新
支持 JavaScript 和 PHP/PCRE RegEx
将匹配项或表达式移至详细信息
保存并与他人共享表达式
在编辑器中使用 cmd-Z/Y 撤消和重做
https://regexr.com/
4. any-rule
any-rule 正则表达式
any-rule 维护了一个常用正则表达式合集,并且本身是一个支持 Web/VS Code/idea/Alfred Workflow 多平台的正则表达式工具。
https://github.com/any86/any-rule
5. CSS Sprites Generato
在很多前端展示页面需要用到将小图标拼合为一整个图片,然后在使用的时候,自动裁剪为单一图片展示。
这个时候就需要一个便捷的工具,CSS Sprites Generator 就是这样一个便捷的CSS图像拼合工具。
比如多张图片生成雪碧图,还有国内的 CDN 库,赶紧去试一试吧。
https://www.toptal.com/developers/css/sprite-generator
6. tool.lu
众多工具集合,包括时间戳转换,进制转换等
https://tool.lu/
7. bootcdn / baomitu
国内的CDN库,速度快
https://www.bootcdn.cn/ 或 https://cdn.baomitu.com/
8. jsdelivr
国外的 cdn 库,支持 github,npm,WordPress。
https://www.jsdelivr.com
9. gitignore
根据选择会去生成 .gitignore 文件。
根据用户输入的语言类型或者平台类型,自动生成对应的 gitignore 文件。
例如,输入 Vue,React,点击 "Create" 即可。
https://www.gitignore.io/
10. codesandbox
CodeSandbox 是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。
支持主流的前端相关文件的编辑:JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。
支持自动代码提示。
比如选择创建相关的项目
可以直接编辑代码运行
https://codesandbox.io/
11. typora
实用的 Markdown 写作工具,所见即所得。
https://www.typora.io
12. mdnice
MDNice 微信 Markdown 编辑器是一款 Markdown 微信编辑器,拥有良好的兼容性、海量主题样式、免费的图床、强大的技术团队,提供文章一键排版,同时支持知乎、掘金、微信。
使 markdown 语法更加美观,如果你有写博客,那这个非常合适你。
这个工具是大鹏大佬开发的,超级猫一直有用这个工具,那个工具仓库 Star 还不到 200 的时候就给它点赞了,因为实在是好用,觉得肯定会火,现在的确是火了,几乎经常写博客的人都知道和用它。
超级猫还贡献了 2 种主题呢,里面的 绿意、科技蓝 的主题就是笔者贡献的,哈哈。
https://github.com/mdnice/markdown-nice
最后
不知不觉,已经写到第 14 期了呢,已经分享超过 100 个好的前端项目了呢,往期精文请看下方宝藏仓库,点击很危险,请慎入!
[前端GitHub]:https://github.com/FrontEndGitHub/FrontEndGitHub
平时如何发现好的开源项目,可以看看这篇文章:如何在 GitHub 上发现优秀开源项目 和 如何使用 GitHub 进行精准搜索的神仙技巧。
觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是超级猫最大的鼓励!
可以加超级猫的 wx:CB834301747 ,一起闲聊前端。
微信搜 “前端GitHub”,回复 “电子书” 即可以获得 160 本前端精华书籍哦。
往期精文
10 个 GitHub 上超火的前端面试项目,打造自己的加薪宝库!
12 个 GitHub 上超火的 JavaScript 奇技淫巧项目
10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!
11 个超火的前端必备在线工具,终于有时间上班摸鱼了
11 个超火的大厂前端代码规范,你也能写出诗一样的代码!
推荐 12 个学习前端必备的神仙级工具类项目与网站相关推荐
- 这10 个很“哇塞”的Web资源,前端必备的神仙级网站
毋庸置疑,善用工具可以加速开发,拉满开发效率,减少996的频率,提高我们的生活质量. 在此,为前端工友们分享10个我压箱底的Web资源,收藏≠学会,赶紧用起来吧! 1.Github (github.c ...
- 前端常用的 59 个工具类【持续更新】
#前端常用的 59 个工具类[持续更新] 前言 前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理; 这个时候就非常有必要将一些常用的工具类封装起来; 本文根据常用的一些工具类封装了 ...
- 推荐 7 个学习 TypeScript 的宝库,2021 是时候给自己加薪了!
大家好,新年快乐,我是你们的 猫哥,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 前言 猫哥是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目.常用技巧,在此分享给大家. 公众号: ...
- 前端简洁并实用的工具类 (推荐收藏)
原文链接:https://segmentfault.com/a/1190000013438501 前言 本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数 ...
- 12个写论文必备的神经网络可视化工具
https://wemp.app/posts/9ee70a73-e840-49e0-909b-bed7ab020628 https://tianchi.aliyun.com/forum/postDet ...
- Java基础学习总结(49)——Excel导入导出工具类
在项目的pom文件中引入 <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <artifac ...
- 自学前端不用慌张!零基础自学前端必备手册,学成月薪12K
随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上流传甚广的一张前端学习思维导图,很多初学者 ...
- 产品经理必备的5大工具
入行5年,可以说阅遍无数效率工具,但对产品经理来说,真正高效的办公软件并不多,以下工具是我5年经验的良心推荐,工作效率提升100%. 1.交互工具-墨刀 吐血推荐!!我用过很多交互制作软件,包括老牌的 ...
- 书单推荐 | 12本前端必备书籍(上)
学习的最好途径就是看书. 开篇想给大家两点关于读书的建议: · 经典书籍需要不断被重读--每一次重读都会有新的体会: · 书籍并非读的越多越好--大多数书籍只是经典书籍中的概念延伸(有时甚至是照搬) ...
最新文章
- cc.tween 的call()不执行
- 蓝桥杯Java历年真题与答案_蓝桥杯大赛java历年真题及答案整理(闭关一个月呕心沥血整理出来的)...
- Esay ui数据加载等待提示
- java静态方法声明_方法本地类中的Java最终静态声明
- wxWidgets:wxToolBar类用法
- php 集合安装,centos7安装php5.6报错集合
- 《程序设计与数据结构》第6周学习总结
- 利用营销工具,这家企业从按经验办事的老中医,变为数据化中西医
- 神经网络用作分类器(附代码matlab)
- JS 屏蔽按键效果和改变按键效果
- 《英雄联盟》“被手游”背后,是移动电竞的成长期“烦恼”
- 贝叶斯(五)贝叶斯决策
- Markdown中设置图片尺寸及添加图注
- 一个使用kindle近3年的菜鸟的几点建议
- 主题目录检索是什么举例子_文献检索复习
- ODM操作MongoDB
- 动态规划算法——2020美团校招合并金币算法
- 数通 | 静态路由表的配置(含负载分担、路由备份)
- 15元钱一杯咖啡,喝完后两个空杯换一杯,问:你有100元钱,最多可以喝到几杯咖啡
- 制作一个简单的轮播图(详解新手教学)
热门文章
- 微型计算机温度控制系统课程设计,微机原理及其应用 微型计算机温度控制系统设计课程设计报告.doc...
- html文字字号不改变,如何在不改变div大小的情况下更改HTML / css中的字体大小?...
- Python中Pyaudio安装失败的解决办法
- 【学术相关】毕业论文速成指南来了!
- 深度学习初学者必备资料整理
- 【推荐系统】推荐系统主流召回方法综述
- AAAI2020录用论文汇总(二)
- CVPR 2022|从原理和代码详解FAIR的惊艳之作:全新的纯卷积模型ConvNeXt
- Transformer又又又升级了?
- 资讯|WebRTC M97 更新