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

语言: CN / TW / HK

theme: fancy highlight: atom-one-light


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插件

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

🍏 写在最后

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

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