常用 website

图片

tinypng
random image
Remove Image Background 移除背景图片
ps-uupoop
效果图
PS 在线图片编辑器是一个专业精简的在线 ps 图片照片制作处理软件工具，直接在浏览器打开就可用它修正，调整和美化图像。

相比同类软件，uupoop 支持的文件格式更多，包含 psd、xd、sketch、xcf、raw、pdf 及常见图片格式。

开发

地图数据
jsbin
stackblitz
在线库 CDN
caniuse

短链

三角形生成器
sandbox
logo 设计

Collect UI(需要科学上网)
Collect UI 画廊是一个免费的在线资源，用于每日 UI 设计灵感。
侧边栏中有包括 404 页面、登陆/登出、购物车、日历、视频播放器等分类。
可以在公司项目或者个人项目上寻求一些灵感.

Colordot
可以在网页区域内随意滑动鼠标，产生不同的色彩。确定一个色彩点击保存之后可以再随意滑动产生下一个色彩.

FontSpark

效果图
FontSpark 是一个帮助有字体选择困难症的用户打造的选择字体的网站.
使用时只需要输入所需要展示的文字即可获得网站推荐的字体，包括字体类型和大小。

The Noun Project

The Noun Project 专门提供高品质、可辨识性强的 icon,简约而不简单

csseffects

CSSeffectsSnippets 收录了大约 20 多种 CSS 动画，无论是加载读取中，或是将光标移动过去产生的动画，都能在网站上即时预览。
最让人喜出望外的是 点击某个效果之后 css 代码能够直接复制;

unDraw
unDraw 是由希腊设计师 Katerina Limpitsouni 开发的一套开源矢量插图库，在这个网站上有超过 1000 个扁平矢量插画供你下载使用。
能够给个人网站提供插画的灵感

DevDocs
DevDocs 汇集了最全的编程开发文档，又拥有极佳的阅读模式，可以快速的查询想要的命令

该网站不断的在更新一些优秀的教程和技巧，为前端社区做出了具大的贡献。我也一直在这上面学习，让我在 CSS 方面视野拓宽了很多。
cssreference
如果需要更新 CSS 知识或者查询不熟悉、不常用的属性，可以访问这个站点。
深入讲解了几乎每个 CSS 属性，并给出了详细的示例，便于理解和学习 Css 属性.

Majestic
Majestic 是一款好用的 Jest 运行测试 GUI 工具。
利用可视化的方式，能够更便捷的查看测试用例的输出日志.

画流程图

ProcessOn
效果图

ProcessOn 是一个在线作图工具的聚合平台，它可以在线画流程图、思维导图、UI 原型图、UML、网络拓扑图、组织结构图等等， 不管 Mac 还是 Windows，一个浏览器就可以随时随地的发挥创意，规划工作。缺点就是免费用户能创建 9 个图，不是无限的。
draw.io
draw.io 是一款免费的在线图表编辑工具, 可以用来编辑工作流, BPM, org charts, UML, ER 图, 网络拓朴图等，免费，创建的图表数量无限制;

效果图 支持 GitHub 授权登录，然后把自己创建的流程图等保存到 GitHub 仓库;

Excalidraw 是一款非常轻量的 在线白板 工具，可以直接在浏览器打开，轻松绘制具有 手绘风格 的图形。
效果图

asciiFlow

others

在线生成 Markdown 表格

loading 动画

icons illustrations photos music and design tools

Epic Spinners

二维码生成

30-seconds-of-code

https://www.30secondsofcode.org/js/p/1

33-js-concepts

https://github.com/leonardomso/33-js-concepts

javascript-questions

https://github.com/lydiahallie/javascript-questions

codewars

https://www.codewars.com/dashboard

javascript教程

https://wangdoc.com/javascript/

MDN文档

https://developer.mozilla.org/zh-CN/

clean-code-javascript

https://github.com/ryanmcdermott/clean-code-javascript

前端常用插件、工具类库汇总

https://juejin.cn/post/6844903683411410951

  • Collect UI 画廊是一个免费的在线资源，用于每日 UI 设计灵感。 目前，它有 6500 多个条目，并且持续保持更新最新内容。

在边栏中，有做分类。包括 404 页面、登陆/登出、购物车、日历、视频播放器等。如果你想在某方便需求灵感，然后用于你的公司项目或者个人项目，我想是会有很大的帮助的。
效果图

  • Colordot
    有时候我们想寻求一个自己喜欢的颜色（有点像起一个自己满意的昵称），却没有灵感，这时候我们就可以去 Colordot 网页区域内随意滑动鼠标，可以产生不同的色彩。确定一个色彩，再随意滑动产生下一个色彩，直到找到自己满意的配色。

    效果图

  • FontSpark
    FontSpark 是一个帮助有字体选择困难症的用户打造的选择字体的网站，用户只需要输入所需要展示的文字即可获得网站推荐的字体，包括字体类型和大小。 对于推荐的字体不是很满意的话，点击 Generate 按钮刷新即可。

    效果图

  • The Noun Project
    The Noun Project 网站专门提供高品质、可辨识性强的 icon，这些 icon 没有很炫酷的设计，通常只用单色来呈现，使用者却能很容易地辨别出它要传达的意思。
    目前 NounProject 提供超过 200 万的 icon 供使用者免费下载，且持续在更新中，如果你需要某种 icon，却一直没有找到合适的，不妨到这个网站来走走。

    效果图

  • unDraw
    是由希腊设计师 Katerina Limpitsouni 开发的一套开源矢量插图库，在这个网站上有超过 1000 个扁平矢量插画供你下载使用。 如果你在做个人网站，但对于插画没有灵感，或许你可以来看看。

    效果图

  • CSS Tricks
    CSS Tricks 是一个国外的优秀前端开发博客，主要分享使用 CSS 样式的技巧、经验和教程等。 该网站不断的在更新一些优秀的教程和技巧，为前端社区做出了具大的贡献。我也一直在这上面学习，让我在 CSS 方面视野拓宽了很多。

    效果图

  • iHateRegex
    对于开发人员来说，正则表达式是会被经常用到的，很多类型复杂的字符串都可以用它匹配出来，但唯一但缺点是编写起来很困难，不仅需要熟练掌握规则，还需要花时间编写、调试。
    iHateRegex 就是这样一个帮你解决书写正则表达式烦恼的神器。
    iHateRegex 是一个在线开源工具，可快速检索并匹配到合适的正则表达式，帮你完成如用户名、邮箱、日期、手机号码、密码等常见规则的验证。
    当然你也可以看到它内部的匹配过程，这有助于加深你的理解。

    效果图

  • Three.js
    Three 这个流行的库目前突破了 72K Star，是创建一个易于使用，轻量级，3D 库默认的 WebGL 渲染器。在示例中，该库还提供了画布 2D、SVG 和 CSS3D 渲染器。threejs 可以将它理解成 three + js，three 表示 3D 的意思，js 表示 javascript 的意思。那么合起来，three.js 就是使用 javascript 来写 3D 程序的意思。Three.js 是一个伟大的开源 WebGL 库,WebGL 允许 JavaScript 操作 GPU，在浏览器端实现真正意义的 3D。
    如果我们需要使用 Threejs 来绘图，只需要创建一个最小绘图环境即可。Threejs 在底层其实还是调用 html5 中的 canvas api 来实现绘图的。但和我们一般绘制 2D 图像不同，该库提供 canvas，svg，CSS3D 和 WebGL 渲染器，使我们能够在设备和浏览器之间创建丰富的交互式体验。Threejs 在顶层对 3D 绘图所需的各种元素（例如场景，摄影机，灯光，几何图像，材质等）进行了封装

  • Anime.js
    Anime 库目前已拥有 33K Star，Anime 是一个 JavaScript 动画库，可与 CSS 属性，单个 CSS 转换，SVG 或任何 DOM 属性以及 JavaScript 对象一起使用。 该库使您可以链接多个动画属性，将多个实例同步在一起，创建时间轴等等。

  • Mo.js 这个库达到 15K Star，是用于网络的运动图形工具带，具有简单的声明性 API，跨设备兼容性和超过 1500 个单元测试。 您可以在 DOME 或 SVG DOME 周围移动内容，或创建唯一的 mo.js 对象。 尽管文档很少，但示例很多，这是 CSS 技巧的介绍。
    Mo.js 有着良好的兼容性：
    Chrome 4+
    Firefox 4+
    Opera 11.5+
    Safari 4+
    IE 9+

  • Velocity
    Velocity 是一个快速的 Javascript 动画引擎，具有与 jQuery 的$.animate()相同的 API，目前已拥有 16K Star。它具有彩色动画、转换、循环、缩放、SVG 支持和滚动等功能。既然与 JQ 大法 API 基本一致，那对我们的小伙伴来说简直是开箱即用哇，根本都不用熟悉新的 API 直接一把梭了~

  • popmotion
    这个功能性动画库目前已有 17K Star，整个包大小却仅有 11KB，精简极致的一个动画库。 它允许开发人员根据动作创建动画和交互，这些动作是可以启动和停止的值流，并使用 CSS，SVG，React，Three.js 和任何接受数字作为输入的 API 进行创建。
    popmotion 官网提供了丰富和详尽的示例
    包括了 Vue\React 等样例展示,该动画库相对简介易入手，完成基本业务动效绰绰有余，建议刚入门的小伙伴可以去趟趟水

  • Typed.js
    Typed 是一个专注打字动画的库，目前拥有 9K Star。可以让您以选定的速度为字符串创建打字动画。 您还可以在页面上放置 HTML div 并读取它，以允许搜索引擎和禁用 JavaScript 的用户访问。它既受欢迎又出奇的有用。下面我们简单写了个样例

  • Animate(css)
    animate.css 是一个使用 CSS3 的 animation 制作的动画效果的 CSS 集合，里面预设了很多种常用的动画，且使用非常简单。目前已拥有 63K Star，是前端友人必不可少的前端 CSS 动画库之一，所有动效即时预览，拿来即用，非常方便。

  • Hover (css)
    Hover 是一个专门提供 CSS 的 hover 动效的库，目前已有 22K Star，悬停提供了 CSS3 支持的悬停效果的集合，可应用于链接、按钮、徽标、SVG、特色图像和更多，可用于 CSS、Sass 和更少。您可以复制和粘贴您想在自己的样式表中使用的效果，或者直接引用样式表。

  • 20 个免费精美图片站

  • 渐进色配色网站

  • 在线工具箱

  • 拷贝兔

  • 前端 css demo

  • navnav

  • cssdeck

娱乐

参考文献:
作者：前端森林
链接：https://juejin.cn/post/6854573221417582600
来源：掘金

作者：前端 Sneaker
链接：https://juejin.cn/post/6844904016292347918
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。