【好物分享】分享给前端开发的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插件

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

🍏 写在最后

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

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

目录
相关文章
|
12天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
83 29
|
5天前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
14 3
|
5天前
|
前端开发 JavaScript UED
惊呆了!这些前端技巧竟然能让你的网站秒变高大上,赶快学起来!
前端技术是网页设计的核心,能够显著提升用户体验和网站竞争力。本文介绍了三种实用的前端技巧:动态背景效果、微交互设计和响应式设计。通过CSS动画和JavaScript,可以实现视觉吸引的动态背景;微交互设计如按钮点击效果能增强用户参与感;响应式设计则确保网站在不同设备上呈现良好效果。这些技巧简单易学,效果显著,值得尝试。
17 3
|
5天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
15 3
|
11天前
|
前端开发 JavaScript API
惊呆了!这些前端技巧竟然能让你的网站支持AR/VR体验!
【10月更文挑战第31天】在数字化时代,用户对网页交互体验的要求日益提高,传统二维网页已难以满足需求。本文介绍如何利用前端技术,特别是Three.js,实现AR/VR体验,提升用户满意度和网站价值。通过示例代码,展示如何创建简单的3D场景,并探讨AR/VR技术的基本原理和常用工具,帮助开发者打造沉浸式体验。
25 6
|
11天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
24 3
|
12天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
43 4
|
12天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
28 3
|
12天前
|
搜索推荐 前端开发 UED
惊!这些前端技巧竟然能让你的网站在搜索引擎中获得更高排名!
【10月更文挑战第30天】在数字化时代,网站的搜索引擎排名直接影响流量和品牌知名度。本文通过四个真实案例,揭秘前端技巧如何提升搜索引擎排名:1. 关键词优化与布局;2. 高质量内容与多媒体优化;3. 网站结构优化与URL优化;4. 提升页面加载速度。这些技巧不仅提高排名,还能增强用户体验,助力业务发展。
30 3
|
12天前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
24 2