30个前端开发人员必备的顶级工具

Chase620
• 阅读 1119

在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。

30个前端开发人员必备的顶级工具

目录

CSS代码生成器

CSS3 Generator

终极CSS Generator

CSS Grid布局生成器

静态站点生成器

Next.js

Gatsby

SVG 优化器

SVGOMG

SVG Optimizers

动画库

Animate.css

GreenSock (GSAP)

Anime.js

跨浏览器测试

Caniuse

Am I Responsive?

Responsive Web Design Checker

BrowserStack

代码协作和游乐场

GitHub

CodePen

JSFiddle

SoloLearn

jsrun.net

CSS代码生成器

你是否曾经尝试记住如何声明渐变,文本阴影,Flexbox或Grid的CSS属性,仅举几例?不容易。除非你一再使用某些CSS功能及其属性,否则很难记住所有这些功能。但是,即使是精通CSS的人有时也需要对某些属性进行复习,尤其是如果他们有一段时间没有使用它们了。

如果你需要一些最新和最伟大的CSS的快速帮助,这里有CSS生成器来拯救。输入数值,预览结果,抓取生成的代码并运行。

CSS3 Generator

30个前端开发人员必备的顶级工具

CSS3 Generator是一款免费的在线应用,它可以让你快速编写一些现代CSS功能的代码,如Flexbox、渐变、过渡和变换等。

输入所需的CSS值,实时预览结果,复制并粘贴生成的代码。此外,此应用程序还会显示支持CSS代码的浏览器及其版本的列表。

终极CSS Generator

30个前端开发人员必备的顶级工具

CSS Generator是一个免费的在线应用程序,可让您生成CSS动画,背景,渐变,边框,滤镜等的代码。

界面友好,你感兴趣的CSS功能的浏览器支持信息清晰易发现,生成的代码干净准确。

CSS Grid布局生成器

30个前端开发人员必备的顶级工具

CSS Grid非常棒,用代码创建网格可以让你完全控制最终的结果。然而,在你编码的时候,有一个可视化的网格表示是很有帮助的。虽然一些主要的浏览器已经实现了很好的工具来让你可视化你的网格,但一些开发人员可以做一些额外的帮助。这是CSS Grid生成器可能派上用场的地方。

Dmitrii Bykov编写的CSS Grid Layout Generator是免费的,可以在线访问,并且非常灵活。我试了一下,发现它在网格容器级别和网格项目级别上为我提供了很多控制,同时为我提供了不错的预览功能和简洁的代码。

如果你需要帮助,请单击“如何使用(How to Use)”按钮,然后观看应用作者提供的演示视频。

静态站点生成器

静态网站生成器代表

…在使用手动编码的静态网站和完整的CMS之间进行折衷, 同时保留两者的好处。本质上,会生成一个 静态的纯HTML网站,使用类似CMS的概念(例如模板)。可以从数据库中提取内容,但是更典型地, 使用Markdown文件。

这是StaticGen网站上列出的前两个静态网站生成器。

Next.js

30个前端开发人员必备的顶级工具

Next.js是一个免费的开源框架,用于静态导出的React应用。其特点包括:

预渲染(Next支持服务器端渲染)

零配置

可扩展性

CSS-in-JS

很棒的文档

和更多。

Gatsby

30个前端开发人员必备的顶级工具

Gatsby是基于React的免费开源框架,可帮助 开发人员建立快速的网站和应用程序。

Gatsby 提供了大量功能,例如:

React,webpack,现代JavaScript和CSS的强大功能

丰富的数据插件生态系统

渐进式Web应用程序生成

超级简单的部署

为不同的用例定制的预先打包的Gatsby站点

和更多。

SVG 优化器

网络上的性能至关重要:访问者在等待内容加载时会不耐烦,搜索引擎往往会惩罚速度缓慢的网站。

优化图形是构建快速网站和应用程序的必要步骤,SVG图形也不例外。为确保SVG代码干净整洁,使用SVG优化器已成为前端开发人员工作流程中必不可少的步骤。

以下是两个出色的SVG优化器,它们被专业开发人员广泛使用。

SVGOMG

30个前端开发人员必备的顶级工具

SVGOMG是一个免费的在线应用程序,可让你将许多优化选项应用于SVG代码并预览最终结果。易于使用,也可以离线使用。

SVG Optimizers

30个前端开发人员必备的顶级工具

这是另一个很棒的免费在线SVG优化工具,可用于修剪SVG代码,它直观易用。

动画库

动画在网络上随处可见,无论是微妙的微效果,还是大块内容在屏幕上逐渐展开的故事性运动,都是动画的存在。

虽然现代的CSS和JavaScript包含了你创建一些酷炫的网页动画所需的功能,但下面列出的库肯定能让你更快地完成工作,并获得一些惊人的效果。

Animate.css

30个前端开发人员必备的顶级工具

Animate.css是一个可在你的Web项目中使用的即用型跨浏览器动画库。非常适合强调,首页,滑块和引导注意的提示。

顾名思义,这个库是纯CSS的。在预包装的效果中,你会发现:像弹跳和闪烁效果、后方入口和出口、淡入和淡出等引人注意的效果,以及其他大量的效果。

功能包括:

使用npm,Yarn或CDN快速安装

使用方便简单

使用CSS自定义属性(CSS变量)自定义动画持续时间,延迟和交互的选项

用于延迟、速度变化和重复的实用类。

GreenSock (GSAP)

30个前端开发人员必备的顶级工具

GSAP(GreenSock动画平台)提供“针对现代网络的超高性能,专业级动画”。

其高度直观的JavaScript驱动的语法使你可以立即构建出色的动画。从DOM元素和JavaScript对象到SVG,Canvas和WebGL身临其境的体验,可以使用GSAP进行动画制作的对象没有任何限制。此外,GSAP是跨浏览器的,并且向后兼容,并提供了出色的文档和支持社区。

Anime.js

30个前端开发人员必备的顶级工具

Anime.js 是一个轻量级的JavaScript动画库,具有简单而强大的API。它与CSS属性,SVG,DOM属性和JavaScript对象一起使用。

完全开源,凭借其直观的语法和出色的文档,你可以立即使用Anime.js并开始运行。

跨浏览器测试

开发人员无法控制要从哪种设备访问其网站或应用程序。在2019年,超过一半的网络流量来自移动设备。从整体上看,屏幕尺寸从台式机、平板电脑到智能手机和可穿戴技术都有所不同。

作为前端开发人员,确保网页在任何屏幕尺寸下都可以使用是我们工作的核心组成部分。虽然没有什么比得上直接在不同的浏览器和平台上测试网站和应用程序,但以这种方式覆盖所有基础不是我们大多数人的选择。下面列出的服务和应用程序可以提供帮助。

Caniuse

30个前端开发人员必备的顶级工具

我不知道你是怎么想的,但当我需要了解浏览器对任何HTML、CSS、SVG和JavaScript功能支持的最新信息时--无论这些功能是多么新奇或晦涩难懂——caniuse是我的首选网站。

你将获得全球和特定国家/地区级别的最新统计结果,以及有关特定问题,资源等的信息。

Am I Responsive?

30个前端开发人员必备的顶级工具

这是一个免费的在线应用程序,可让您快速检查网站在不同屏幕尺寸下的外观。

以下是功能列表:

你可以通过在文本框中输入要测试的站点的URL,或从任何地方使用浏览器上的“Am I RWD”书签来从该应用程序的网站中使用该应用程序。

http://localhost/works。

可以在显示你网站的每个设备上单击并滚动以进行测试。

Responsive Web Design Checker

30个前端开发人员必备的顶级工具

Responsive Web Design Checker,即响应式网页设计检查器,是另一个免费的在线应用,可以测试你的网站不仅在不同的屏幕尺寸上,而且在各种设备上的外观。其中包括各种台式机和笔记本电脑,Apple iPad Retina和Amazon Kindle Fire等平板电脑,以及Apple iPhone 6/7 Plus,三星Galaxy等智能手机。

BrowserStack

30个前端开发人员必备的顶级工具

BrowserStack是一项受欢迎的付费服务,可让你在2000多种真实设备和浏览器上测试你的网站或应用程序。它开箱即用,完全安全。

代码协作和游乐场

以下是一些很棒的工具,可让您快速共享代码,原型和测试项目构想。

GitHub

这个无需多言

CodePen

30个前端开发人员必备的顶级工具

CodePen已经存在了很多年,并且受到前端开发人员社区的喜爱和广泛使用,它非常适合尝试概念,原型设计,学习编码和代码共享。由其团队定义如下:

CodePen是一个社交化的开发环境。从本质上讲,它允许你在浏览器中编写代码,并在构建时查看其结果。对于任何技能的开发人员来说,这是一个有用的和自由的在线代码编辑器,特别是对于学习代码的人来说,这是一个赋能。我们主要专注于前端语言,例如HTML,CSS,JavaScript和可转化为这些内容的预处理语法。

JSFiddle

30个前端开发人员必备的顶级工具

我目前是在职前端开发,如果你现在也想学习前端开发技术,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我的前端学习交流3000人裙:前面:851 中间:231 最后:348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册,前端面试题,前端开发工具,PDF文档书籍教程,需要的话都可以自行来获取下载。

JSFiddle 是一个在线IDE服务和在线社区,用于测试和展示用户创建和协作的HTML、CSS和JavaScript代码片段,即 "fiddles"。它允许模拟AJAX调用。2019年,JSFiddle根据编程语言(PYPL)人气指数的搜索次数,在全球和美国排名第二,直接排在Cloud9 IDE之后,成为最受欢迎的在线IDE。

SoloLearn

30个前端开发人员必备的顶级工具

SoloLearn是一个很棒的在线游乐场,可让你测试HTML,CSS和JavaScript代码。它还免费提供基本的编码课程,以及供开发人员和学习者使用的论坛。

jsrun.net

30个前端开发人员必备的顶级工具

这是一个国内版的CodePen,强力推荐!Codepen、JSFiddle虽好,但是由于服务器在国外,四度非常慢。而jsrun.net速度非常快

最后

如果这篇文章对你有帮助

本文转自 https://www.jianshu.com/p/b44dfb5ae09e,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Stella981 Stella981
1年前
Angular material mat
IconIconNamematiconcode_add\_comment_addcommenticon<maticonadd\_comment</maticon_attach\_file_attachfileicon<maticonattach\_file</maticon_attach\
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
helloworld_34035044 helloworld_34035044
6个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为