【好物分享】分享给前端开发的28个资源(网站、软件、插件),简直是提高效率必备

简介: 对于开发来说,尤其是前端开发,有一个好的开发环境真的很提升工作效率,这里我整理了28个顶级资源,包括但不限于网站、软件和插件(浏览器插件、VScode插件)
Hi~,我是 一碗周,一个在舒适区垂死挣扎的前端,如果写的文章有幸可以得到你的青睐,万分有幸~

🍇 写在前面

对于开发来说,尤其是前端开发,有一个好的开发环境真的很提升工作效率,这里我整理了28个顶级资源,包括但不限于网站、软件和插件(浏览器插件、VScode插件),可以点赞收藏保留一下,万一在什么时候需要的

🍈 网站分享

🍉 学习类

做前端的都一直有一个感觉,就是卷不动了,这里整理了几个学习网站,除此之外,每个技术的官方文档是学习它的最简单的方式

MDN Web Docs

说道学习网站,首先第一个推荐的肯定是MDN啊,这个我就不多解释了

01.png

W3Cchools

同MDN类似,也是一个老牌的前端学习网站

02.png

现代 JavaScript 教程

以最新的 JavaScript 标准为基准。通过简单但足够详细的内容,为你讲解从基础到高阶的JavaScript相关知识。

03.png

Learn Git Branching(学习Git分支)

Learn Git Branching在网站提供的沙盒中学习Git中的分支操作,从简入难渐进学习,非常的有趣。

04.png

力扣(刷算法必备)

这个我就不多哔哔了,刷算法必备。

05.png

CSSBattle(通关式学习CSS)

该网站内置了很多关卡,使用CSS复原每个关卡中内容,可以逐步的精进我们的CSS技术。

06.png

VisuAlgo(数据结构和算法动态可视化)

这个网站提供了很多数据结构和算法的可视化,通过该网站学习数据结构和算法时会方便很多。

07.png

🍊 工具类

Can I Use

查看HTML标签、CSS属性和各种API的兼容器非它莫属,前端必备。

08.png

Readme.so(用最简单的方式创建README)

有写过README的同学都知道这个东西写起很麻烦,这个网站提供了一个编辑器以及一些模板,编写非常的方便和快捷。

09.png

Carbon(代码片段转图片)

Carbon是一个用于将源代码转换成图片的一个网站,支持多种语言以及多种主题。

10.png

Responsively(预览神器)

如果你在开发一个响应式的Web程序,还在为了切换不同的屏幕分辨率而苦恼时,这个网站帮你解决了这个问题,可以让你在一个窗口画面中观看各个屏幕尺寸下的画面状态。

11.png

图片压缩工具(Picdiet、TinyPNG)

12.png

13.png

convertio(文件格式转换器)

一个在线的文件格式转换器

14.png

Excalidraw(画图神器)

这个网站可以画一些流程图之类的图片,很多jy都在用。

15.png

🍋 CSS相关

Animista(CSS动画参考)

这个网站中提供了很多CSS的动画参考,如果动画不会写了,可以来这个网站找一些参考。

16.png

Neumorphism.io(可视化阴影调整)

这个网站给你提供了一些配置项,可以可视化的调整CSS中的阴影。

17.png

Clippy-CSS

通过CSS中的clip-path属性来裁剪出各种奇形怪状的图形。

18.png

FANCY-BORDER-RADIUS(异形边框)

通过broder-radius属性制作异性边框。

19.png

cubic-bezier(动画曲线可视化)

该网站提供了可以用于设置贝塞尔曲线的可视化页面,以及用于动画的效果对比。

20.png

CSS Gradient(渐变可视化)

提供一个可视化页面设置线性渐变以及径向渐变,还提供了对应的CSS代码。

21.png

CSS Grid Generator

一个Grid布局生成器。

22.png

🍌 软件分享

这里笔者是Windows,只能给你分享一些Windows的软件,像VSCode这种就不推荐了,前端人都知道的软件不会推荐。

Windows Terminal

win11的默认终端,在win10中我强烈推荐安装。

23.png

draw.io

一个画图软件,我文章中的所有图几乎全部都出自这个软件。

24.png

这个软件有Vscode插件版以及网页版

PowerToys

微软自己做的一款小工具,内部包括很多实用的小插件,用微软的话说就是优化Windows体验,提供工作效率。

25.png

uTools

新一代效率工具平台,用过之后真的离不开了,真的挺良心的一款国产软件。

26.png

🍍 插件分享

插件分享在掘金中到处都是,这里我就分享几个我觉得比较不错的,太常见的我就不占文章篇幅了。

🥭 浏览器插件

Global Speed: 视频速度控制

视频学习(追剧)必备,统一所有网站的视频倍速,不用打开一个视频开一次二倍速。

27.png

iGuge

懂得都懂吧,这里不介绍了。

28.png

🍎 VScode插件

暂时没啥推荐的,感觉我用的插件大家都在用,后面有了新鲜的在更新吧~

🍏 写在最后

到这文章就结束了,这篇文章将会持续更新,有好的资源将会在文章中进行更新,赶紧收藏一波吧。

各位看官如果有好的资源可以在评论区进行评论,会增加到文章中的呦\~

目录
相关文章
|
1天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
50 29
|
1天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
10 4
|
1天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
9 3
|
1天前
|
搜索推荐 前端开发 UED
惊!这些前端技巧竟然能让你的网站在搜索引擎中获得更高排名!
【10月更文挑战第30天】在数字化时代,网站的搜索引擎排名直接影响流量和品牌知名度。本文通过四个真实案例,揭秘前端技巧如何提升搜索引擎排名:1. 关键词优化与布局;2. 高质量内容与多媒体优化;3. 网站结构优化与URL优化;4. 提升页面加载速度。这些技巧不仅提高排名,还能增强用户体验,助力业务发展。
11 3
|
1天前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
8 2
|
10天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
19天前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
166 8
|
18天前
|
自然语言处理 前端开发 JavaScript
推荐 10 个前端开发会用到的工具网站
本文介绍了多个前端开发工具,包括 Web Design Museum、Landing Page、Google Fonts、Lorem Ipsum、Animista、Blobmaker、Spline、CodeToGo、UnusedCSS 和 Responsively,帮助开发者提高效率和项目质量。这些工具涵盖了设计、动画、代码片段管理、响应式测试等多个方面。
52 0
推荐 10 个前端开发会用到的工具网站
|
25天前
|
前端开发 JavaScript 数据可视化
前端实用网站
【10月更文挑战第3天】
14 1
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
46 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)