推荐 12 个学习前端必备的神仙级工具类项目与网站

news/2024/5/9 7:35:50/文章来源:https://blog.csdn.net/BYGFJ/article/details/121898822

前言

我是一个常年混迹在 GitHub 上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。

今天给大家推荐的是平时学习前端时,经常用到的一些辅助工具类网站。

网址描述
unbug.github.io/codelf变量命名智能推荐(支持中文)
www.docschina.orgWeb 前端开发人员提供优质中文文档
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,也有装这个插件呢。

 网站: unbug.github.io/codelf/

2. docschina

印象中文,为 Web 前端开发人员提供优质中文文档。

 网站:www.docschina.org

3. regexr

RegExr 是一个基于 HTML/JS 开发的在线工具,用来创建、测试和学习正则表达式。

特性

  • 输入时,结果会实时更新
  • 支持 JavaScript 和 PHP/PCRE RegEx
  • 将匹配项或表达式移至详细信息
  • 保存并与他人共享表达式
  • 在编辑器中使用 cmd-Z/Y 撤消和重做

网站:regexr.com/

4. any-rule

any-rule 正则表达式

any-rule 维护了一个常用正则表达式合集,并且本身是一个支持 Web/VS Code/idea/Alfred Workflow 多平台的正则表达式工具。

网站:github.com/any86/any-r…

5. CSS Sprites Generato

在很多前端展示页面需要用到将小图标拼合为一整个图片,然后在使用的时候,自动裁剪为单一图片展示。

这个时候就需要一个便捷的工具,CSS Sprites Generator 就是这样一个便捷的CSS图像拼合工具。

比如多张图片生成雪碧图,还有国内的 CDN 库,赶紧去试一试吧。

网站:www.toptal.com/developers/…

6. tool.lu

众多工具集合,包括时间戳转换,进制转换等

网站:tool.lu/

7. bootcdn / baomitu

国内的CDN库,速度快

网站: www.bootcdn.cn/或cdn.baomitu.com/

8. jsdelivr

国外的 cdn 库,支持 github,npm,WordPress。

网站:www.jsdelivr.com

9. gitignore

根据选择会去生成 .gitignore 文件。

根据用户输入的语言类型或者平台类型,自动生成对应的 gitignore 文件。

例如,输入 Vue,React,点击 "Create" 即可。

网站:www.gitignore.io/

10. codesandbox

CodeSandbox 是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。

支持主流的前端相关文件的编辑:JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。

支持自动代码提示。

比如选择创建相关的项目

可以直接编辑代码运行

网站:codesandbox.io/

11. typora

实用的 Markdown 写作工具,所见即所得。

网站:www.typora.io

12. mdnice

MDNice 微信 Markdown 编辑器是一款 Markdown 微信编辑器,拥有良好的兼容性、海量主题样式、免费的图床、强大的技术团队,提供文章一键排版,同时支持知乎、掘金、微信。

使 markdown 语法更加美观,如果你有写博客,那这个非常合适你,强烈推荐。

这个工具是大鹏大佬开发的,超级猫一直有用这个工具,那个工具仓库 Star 还不到 200 的时候就给它点赞了,因为实在是好用,觉得肯定会火,现在的确是火了,几乎经常写博客的人都知道和用它。

超级猫还贡献了 2 种主题呢,里面的 绿意、科技蓝 的主题就是笔者贡献的,哈哈。

网站:github.com/mdnice/mark…

觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是对我最大的鼓励!

最后小编还会给大家分享一些前端大礼包【加君羊:581286372】帮助大家更好的学习!

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「颜值即正义」那些管UI的妹子要来的网站啦

今天小编要和大家分享一波硬核网站,作为一名前端工程师,不能总依靠UI小姐姐,工作上要为UI小姐姐能分担多少就分担多少,做事情不要设边界。生活上也是,多请她喝几杯奶茶,她也许就会告诉你下面这些网站。 0.…

前端10 个“哇塞”的 学习资源网站,收藏等于学会~

1. responsively responsively是干嘛吃的?一张图你就懂了: ​ 你可以在上面输入你的 web 网站,一次性查看它在各个设备下的响应式布局表现~ 并且支持自定义选择设备、导出为图片等;响应式布局,一个界面尽收眼底&…

还在为满意的渐变色发愁吗?10+个网站帮你解决烦恼

前言🎄 前端开发中,色彩的搭配非常重要,好的色彩设计会给网站增光添彩,让用户一看上去就感觉心情愉悦;坏的色彩~~~ 随着设计技术的进步,渐变颜色在色彩设计中越来越受欢迎,但想设计出满意的渐…

推荐 12 个学习前端必备的神仙级工具类项目与网站

1. codelf 有一种痛,不是程序员可能不懂,但如果是程序员一定懂,那就是给变量或函数命名。 随着项目越来越复杂,变量和函数数量越来越多,英语水平貌似也 hold 不住了。 虽然每个编程语言都有各种命名规范&#xff0c…

前端工程师必备九大网站

01 GitHub https://github.com/ 这个网站托管着很多优质的开源项目,像你可能听说过的 Linux,React,Vue,Webpack,JQuery等都在这个网站上开源。你可以轻松地获取源码并为相应的项目发送 pull request,然后…

比收费的还好用,7个自学python的网站

今天给大家分享几个自学python经常用到的网站,非常实用,建议收藏! 0.Crossin的编程教室 python666.cn 首先当然要自我推荐一下我自己的python学习网站。内容面向python入门学习者,通俗易懂,零基础也可以学习。课程内容…

比收费的还好用,7个自学python的网站

很多同学在学习编程之初,都苦于不知道上哪里寻找学习资料。其实网上免费的教程就有很多,足够我们入门学习。 今天给大家分享几个自学python经常用到的网站,非常实用,建议收藏! 0.Crossin的编程教室 python666.cn 首先…

贼适合初学者 这些练习 Python 的网站太好玩了

1. LeetCode LeetCode 是一个刷算法题的网站,里面有多种语言可选 ,题目分为简单、中等和困难三个级别,可以根据自己的水平进行选择,想进大厂的话,这可能是必不可少的一关。 网址:https://leetcode-cn.com/…

中国铁路 12306 网站全新改版升级:支持扫码登录

百度智能云 云生态狂欢季 热门云产品1折起>>> 中国铁路官方宣布,全新改版升级的中国铁路 12306 网站将于11月3日(即今天)正式上线运营,网站客运服务功能更趋完善,旅客购票将更加方便快捷。▲全新改版升级的…

web学习网站

23、vxe-table v3 22、web前端开发视频教程资料,免费领!-老汤博客 21、jQuery插件库-收集最全最新最好的jQuery插件 jquery插件库 20、ss免费账号 Alvin9999/new-pac Wiki GitHub 下载在客户端填充图一数据 19、 css样式查看网站 Can I use..…

【壹加壹SEO技术博客】SEO优化过程中排名下降的原因

【壹加壹SEO技术博客】SEO优化过程中排名下降的原因 1、网站上HTML标签的过度使用H1标签可以减少网站关键词排名的难度。但是很多网站管理员和朋友知道这种方法后,在自己的首页上无限制地添加H1标签,这不仅有不利于优化,还会导致网站过度优化…

yoast造成php内存,DUX主题与Yoast SEO插件导致网站重复出现网站标题和副标题

0x00 症状五天前,也就是6月23日,我的网站出现与本文标题相同的症状,那天下午,突然发现网站的标题与副标题重复出现,例如本站标题与副标题是“郁闷老鸟之家 | 一个关于技术与生活的家园”,但是当时的情况是“…

大型网站建设,一个项目几百上千,初中生都能上手的编程!

初学编程的小伙伴经常会遇到的问题,1.没资源 2.没人带 3.不知道从何开始 ,小编也是从新手期过来的,所以很能理解萌新的难处,现在整理一些以前自己学习的一些资料送给大家,希望对广大初学小伙伴有帮助! 这套…

web前端开发入门全套学习方法路径,兼职在家做网站也能月入上万!

前端学习路径 1.WEB前端快速入门 在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性。这个部分内容非常简单,而且非常容易掌握。相信你也更愿意学习这个部分,毕竟他可以让你最直观的感受到前端…

怎样在vc6.0语言里制表格_SEO未来会走向怎样的趋势?

1、语音搜索语音搜索技术为改变我们沟通和处理信息的方式提供了一个便利的方式。据悉谷歌20%的搜索已经来自语音查询,这改变了搜索市场,我们预计在2018年将会看到更大的语音搜索转向,特别是国内的百度,早已经在语音搜索投入了更多…

mysql5好还是8_西部数码使用指南:网站管理助手安装升级mysql5.6

版权归西部数码所有,原文链接:https://www.west.cn/faq/list.asp?unid1139说明:安装会将原mysql5.1版本服务停止,数据不会丢失,但需要提前备份导出原数据,以便安装升级以后再导入恢复原数据。安装前准备工…

txt文件怎么创建_刘连康:网站robots.txt文件怎么写?

网站robots.txt文件对于SEO来说是非常重要的,如果你参加过正规的SEO培训,你就会知道,当搜索引擎蜘蛛第一次来访问你网站时,它首先要做的第一件事情就是要看看你网站根目录里面有没有robots.txt文件。如果你的网站有robots.txt文件…

插入网站连接_选择射频连接器,必须考虑的因素

射频连接器就是射频传输系统中能够以小的损耗和反射传输射频信号,并提供快速和反复的连接的一种连接器件。主要由接触件、绝缘体、壳体、附件组成。射频连接器应选择接触可靠,有良好的导电绝缘性能,有足够的机械强度,插拔次数满足…

网站的数据库怎么上传到服务器,网站的数据库怎么上传到服务器

网站的数据库怎么上传到服务器 内容精选换一换本教程旨在演示使用GDS(Gauss Data Service)工具将远端服务器上的数据导入GaussDB(for openGauss)中的办法,帮助您学习如何通过GDS进行数据导入的方法。在本教程中,您将:生成本教程需要使用的CSV…

龙腾传世变态服务器网站,龙腾传世 变态版

开局一条狗,满级一群狗,见谁咬谁!《龙腾传世》变态版是一款传奇类手游,万人在线激情pk,各式装备全靠爆!进服送特戒散人必玩!永远的传世永远的兄弟!热血重燃激情不灭,再创…