Hi~,我是 一碗周,一个在舒适区垂死挣扎的前端,如果写的文章有幸可以得到你的青睐,万分有幸~
🍇 写在前面
对于开发来说,尤其是前端开发,有一个好的开发环境真的很提升工作效率,这里我整理了28个顶级资源,包括但不限于网站、软件和插件(浏览器插件、VScode插件),可以点赞收藏保留一下,万一在什么时候需要的;
🍈 网站分享
🍉 学习类
做前端的都一直有一个感觉,就是卷不动了,这里整理了几个学习网站,除此之外,每个技术的官方文档是学习它的最简单的方式。
MDN Web Docs
说道学习网站,首先第一个推荐的肯定是MDN啊,这个我就不多解释了
W3Cchools
同MDN类似,也是一个老牌的前端学习网站
现代 JavaScript 教程
以最新的 JavaScript 标准为基准。通过简单但足够详细的内容,为你讲解从基础到高阶的JavaScript相关知识。
Learn Git Branching(学习Git分支)
Learn Git Branching在网站提供的沙盒中学习Git中的分支操作,从简入难渐进学习,非常的有趣。
力扣(刷算法必备)
这个我就不多哔哔了,刷算法必备。
CSSBattle(通关式学习CSS)
该网站内置了很多关卡,使用CSS复原每个关卡中内容,可以逐步的精进我们的CSS技术。
VisuAlgo(数据结构和算法动态可视化)
这个网站提供了很多数据结构和算法的可视化,通过该网站学习数据结构和算法时会方便很多。
🍊 工具类
Can I Use
查看HTML标签、CSS属性和各种API的兼容器非它莫属,前端必备。
Readme.so(用最简单的方式创建README)
有写过README的同学都知道这个东西写起很麻烦,这个网站提供了一个编辑器以及一些模板,编写非常的方便和快捷。
Carbon(代码片段转图片)
Carbon是一个用于将源代码转换成图片的一个网站,支持多种语言以及多种主题。
Responsively(预览神器)
如果你在开发一个响应式的Web程序,还在为了切换不同的屏幕分辨率而苦恼时,这个网站帮你解决了这个问题,可以让你在一个窗口画面中观看各个屏幕尺寸下的画面状态。
图片压缩工具(Picdiet、TinyPNG)
convertio(文件格式转换器)
一个在线的文件格式转换器
Excalidraw(画图神器)
这个网站可以画一些流程图之类的图片,很多jy都在用。
🍋 CSS相关
Animista(CSS动画参考)
这个网站中提供了很多CSS的动画参考,如果动画不会写了,可以来这个网站找一些参考。
Neumorphism.io(可视化阴影调整)
这个网站给你提供了一些配置项,可以可视化的调整CSS中的阴影。
Clippy-CSS
通过CSS中的clip-path
属性来裁剪出各种奇形怪状的图形。
FANCY-BORDER-RADIUS(异形边框)
通过broder-radius
属性制作异性边框。
cubic-bezier(动画曲线可视化)
该网站提供了可以用于设置贝塞尔曲线的可视化页面,以及用于动画的效果对比。
CSS Gradient(渐变可视化)
提供一个可视化页面设置线性渐变以及径向渐变,还提供了对应的CSS代码。
CSS Grid Generator
一个Grid布局生成器。
🍌 软件分享
这里笔者是Windows,只能给你分享一些Windows的软件,像VSCode这种就不推荐了,前端人都知道的软件不会推荐。
Windows Terminal
win11的默认终端,在win10中我强烈推荐安装。
draw.io
一个画图软件,我文章中的所有图几乎全部都出自这个软件。
这个软件有Vscode插件版以及网页版
PowerToys
微软自己做的一款小工具,内部包括很多实用的小插件,用微软的话说就是优化Windows体验,提供工作效率。
uTools
新一代效率工具平台,用过之后真的离不开了,真的挺良心的一款国产软件。
🍍 插件分享
插件分享在掘金中到处都是,这里我就分享几个我觉得比较不错的,太常见的我就不占文章篇幅了。
🥭 浏览器插件
Global Speed: 视频速度控制
视频学习(追剧)必备,统一所有网站的视频倍速,不用打开一个视频开一次二倍速。
iGuge
懂得都懂吧,这里不介绍了。
🍎 VScode插件
暂时没啥推荐的,感觉我用的插件大家都在用,后面有了新鲜的在更新吧~
🍏 写在最后
到这文章就结束了,这篇文章将会持续更新,有好的资源将会在文章中进行更新,赶紧收藏一波吧。
各位看官如果有好的资源可以在评论区进行评论,会增加到文章中的呦\~