一、”杀手级“备忘录（CheatSheet）
CheatSheet 有啥用就不用多说了吧，平时容易记不住或者不熟悉的 API，每次都要 google 一下，还不一定找到自己想要的，下面这几个能很好地解决你的问题，而且把很多语言和框架都集中组织在一起，使用体验拉满。
1、devdocs
网址：devdocs
DevDocs 在一个快速、有组织和可搜索的界面中结合了多个语言的API文档，目前最好用的一个~
2、Rico's cheatsheets
Rico's cheatsheets 是一个前端开发的汇总 Cheatsheet，如 React, Vue, ES6, Vim, Kotlin ... 你还可以找到代码编辑器的常用键盘快捷键，如 VS Code, Atom, Sublime Text ... 真实不要太方便！
3、HTML CheatSheet
HTML CheatSheet 综合了网页开发中常用的代码片段和工具，帮助我们快速找到那些”没必要记“的日常代码片段，比如选择颜色、创建链接、创建图像、创建表格......，可以大大减少网页开发中不必要的时间和精力耗费。它也囊括了其他工具，如 CSS、Javascript、Jquery、SEO...... 还有更多信息，可以去网站探索。
有这网站了，你还去看啥 ”W3C“、”菜鸟教程“ 啊，一个页面帮你搞定！
4、HTML5 Element Index
HTML5 Element Index 汇总了 HTML5 中新的或重新定义的对象。每一个 HTML5对象，都有充分描述其特性的内容，并提供与该对象相关的其他文章，以帮助你更好地理解。同时，当你点击代码时，会显示与我们选择的对象相对应的示例代码片段。
5、HTML5 Canvas Cheat Sheet
HTML5 Canvas Cheat Sheet 是一个 HTML5 Canvas 的备忘录，经常写 Canvas 的同学不要错过~
6、CSS3 Animation Cheat Sheet
CSS3 Animation Cheat Sheet 是一个 CSS3动画 的备忘录。你只需要加载 animations.css 文件并在HTML中为对象调用你想要的效果类。它提供了完整而详细的例子，帮助你快速实现想要的动画~
7、CSS Grid Cheat Sheet
CSS Grid Cheat Sheet 是一个帮助你使用 CSS3 为网页轻松创建网格系统的网站。它的工具支持完整的功能，如定义 grid-template-columns, grid-template-rows, grid-column-gap...你只需要为这些属性输入信息，网页就会自动显示网格系统。它给你一个更直观的外观，使你更容易确定这个网格系统是否适合你的网站。
一个字：强大！
还有一个很好的：Grid
也很强大！
8、Easing functions
帮助你写出更好的动画效果，主要是辅助写运行轨迹函数的。
9、OverAPI.com
网站：OverAPI.com
OverAPI.com 是一个了许多主流的编程语言的小抄，如 Javascript、NodeJS、PHP、Python、CSS ...
- 比较好的一点是，包罗了很多主流的语言
- 不好的一点是，它是帮助你跳转到 MDN ，其实跟我们自己搜没啥区别
10、Awesome-Cheatsheets
Awesome-Cheatsheets 也是一个主流的编程语言备忘录集合，前端主要有 The HTML5 Cheatsheet, Vue.js Cheatsheet, React.js Cheatsheet ...
- 优点是：前后端都有，比较全
- 缺点是：好像很久没更新了，react和vue都比较旧
11、Git CheatSheet
网址：gitsheet
GitSheet 是一个聚合了你经常使用的 Git 命令的工具。对于每个语句，它都描述了详细的用法。你只需要选择命令并按下复制按钮，它就会自动为你复制该命令。
老板再也不担心我 ”连 Git 都不会了“ ~
二、”杀手级“网站
1、carbon - 代码美化
网址：carbon
这个不用多说吧，你经常在别人的文章里面看到的，创建逼格很高的源代码图片。
2、ray.so - 代码美化
网址：ray.so
你可能觉得 Carbon 做出的图片已经很好看了，但你再看看 ray.so ！这个网站还有一个黑暗模式和一些预置的不同编程语言的主题。你还可以使用它的VS代码扩展。
3、Poet.so - 社交网站图片
网址：Poet.so
这个网站将你的推文转化为漂亮和可编辑的图片，前提是你有 Twitter、LinkedIn、Shopify 😭。。。
4、roadmap.sh - 学习路线
网址：roadmap.sh
这个网站提供了路线图、指南，以帮助开发者选择学习路线。它对一个初学者以及需要指导的学习者都很有帮助。
5、smalldev - 开发小工具集合
网址：smalldev
一个开发小工具集合，包含各种 formatter，decoder，generator...，可以说包罗万象，而且质量都很高，关键是没有广告！比如：
- 代码共享
- 生成/扫描QR码
- 编码/解码base64字符串
- 编码/解码JSON
- 生成随机文本
还有一个：tiny-helpers
6、type-scale - 字体预览
网址：type-scale
可视化地让你理解不同字体大小的区别，rem 与 em 值。实时检查预览，还能在 codepen 中查看完整代码。
7、remove - 在线抠图
网址：remove
这就不用说了，在线抠图，懂的都知道~
8、Unscreen - gif & 视频 抠图
网址：Unscreen
就像remove.bg，但用于gif和视频。
9、readme.so - 创建MD
网址：readme.so
快速创建 README 文件的最简单方法。
10、webpagetest - 网站性能
网址: webpagetest.org
网站的性能一直是一个热门话题。网页测试工具将帮助你了解你可以在哪里优化你的网站：
11、Lorem Picsum - 生成随机图片
网址：Lorem Picsum
生成随机图片，可以自定义大小。
12、badgen - 徽章生成
网址：badgen.net/
快速生成徽章的服务。
13、shields - 徽章生成
网址：shields
Shields.io 提供SVG和光栅格式的简洁、一致、可读的徽章的服务，可以很容易地包含在GitHub readmes或任何其他网页中。该服务支持数十种持续集成服务、软件包注册、发行、应用商店、社交网络、代码覆盖服务和代码分析服务。每个月它提供超过8.7亿张图片，并被一些世界上最受欢迎的开源项目所使用，VS Code、Vue.js和Bootstrap就是其中的几个例子。
三、开发辅助
1、bundlephobia - 计算 bundle size
网址：bundlephobia
计算将一个npm包添加到你的包中的成本。
2、transform - 代码转换
只需点击几下就可以转换你的代码。我最常使用这个工具来转换 JSON 到 TypeScript 接口。
3、svgomg - svg GUI
网址：svgomg
SVGOMG 提供了一个用于优化你的SVG文件的GUI。在为你的网站处理SVG时，这一点极为重要。
4、jsoneditoronline - JSON 工具
线上查看，编辑，比较和格式化 JSON 的工具
5、Squoosh - 图像压缩器
网址：Squoosh
6、Epoch Convert - 在线Unix时间戳转换器
在线Unix时间戳转换器
7、copychar - 特殊字符
网址：copychar
复制特殊字符到你的剪贴板
8、shadows - box-shadow 生成器
网址：shadows
9、Key - JS的键盘事件
网址：Key.js
JavaScript键盘事件键代码和键标识符，按任何一个键都可以得到JavaScript的keydown、keypress和keyup键，代码，其中，keyCode和其他属性。
10、globster - 文件路径
网址：globster
11、px-rem-em - px转换工具
四、赋能开发
1、JavaScript.info - JS 知识
网址: JavaScript.info
JavaScript.info 是一个提供有关 JavaScript 信息的网站，包括教程、练习和参考资料。前端开发者会很欣赏这个网站上的资源，因为它提供了关于JavaScript的初级和高级主题的信息。
2、Codewars - 代码挑战
网址：Codewars
Codewars是一个为用户提供从头开始学习编码技能机会的网站。它包含各种适合初学者的编程挑战。
在这个网站上，每种语言都有编码挑战，如编码卡塔斯。为了更熟练地掌握一门特定的语言，通过向创造这些挑战的编码员学习，掌握一门语言。
3、devchallenges - 开发挑战
在这个网站上，你将得到网页开发资源和一个社区，可以帮助你通过开展项目和练习技术获得网页设计的专业知识。
4、CSSBattle - css 挑战
网址: cssbattle
CSSBattle 是一个在线游戏，玩家在游戏中竞争创建尽可能小的CSS代码。玩家试图设定不同的 "目标"，并在竞争中取得先机。
5、Askyourcode - 寻找代码
网址：Askyourcode
如果你没有遇到过从一个更大的代码库中寻找一个特定的代码片段而感到困惑的问题，askyourcode可以成为一个宝贵的资源。在GitHub中寻找特定的代码片段以用于项目，是很浪费时间的。
有了这个网站，你不一定需要知道如何从确切的软件包或代码库中搜索。像 "how to implement context state in react" 这样的查询会给你一系列关于如何实现的代码片段。你可以根据你对代码的理解来选择使用。
6、learngitbranching - Git 学习
对于一个新手来说，使用git可能是一个挑战，仅仅了解理论是没有用的，这个网址可以帮你可视化学习 Git。
7、Majestic - 测试
网址：Majestic
Majestic是一个用于 Jest 的零配置UI，它使人们更容易看到测试日志输出，而不是纯粹使用终端。它可以全局安装，也可以在任何版本库中使用 npx majestic 打开。
8、TailwindComponents - Tailwind 组件
Tailwind 最近非常流行，像这样的网站表明了原因。TailwindComponents有数百个使用tailwind.css的社区构建的组件。其中一些具有很高的质量，所以一定要去看看
9、Tailblocks - Tailwind 组件
网址：Tailblocks
Tailblocks具有更多高质量的Tailwind组件。然而，它们提供了与bootstrap类似的体验，所以你可以用这些来创建整个网站。绝对是加速开发的必备工具。
10、Pattern.css - css 模式
网址：Pattern.css
喜欢在你的设计中使用图案？那么你会喜欢这个。它是一个CSS库，为你提供了不同的类，为你的网站创造了令人敬畏的模式。
11、CSSeffectsSnippets - CSS动画
为你的网站提供漂亮的CSS动画。
12、98.css - Windows 怀旧风格 css
网址：98.css
98.css让你的怀旧幻想成真。如果你需要建立一个具有Windows 98风格的网站或电子应用程序，那么98.css将大大帮助你。
13、Regex101 - 正则工具
网址: regex101
有了它，你可以不用再为正则困扰了！
14、regulex - 正则工具
网址: regulex
这个网站可能比 Regex101 更好！
15、ihateregex - 正则工具
网址：ihateregex
如果你讨厌正则表达式，那么你一定不能错过这个网站。可以帮助我们非常直观的表达正则表达式的原理。
16、Animista - CSS 动画
网址: animista
CSS 动画是大家平时比较难记住的知识，通过animista，我们能够实时地测试动画。你只需要如下四步：
- 选择所需的效果：放大、缩小、旋转、旋转90°、翻转...
- 选择所建议的效果的一个变体
- 配置所有的动画属性：时间功能、步骤、迭代次数，...
- 复制生成的CSS
17、anime - css动画
网址：animejs
Anime.js 是一个轻量级的JavaScript动画库，拥有简单而强大的API。它与CSS属性、SVG、DOM属性和JavaScript对象一起工作。
18、keyframes - css 动画
网址：keyframes
它不仅可以帮助你通过实验学习CSS动画的属性和实时可视化，而且还可以帮助你生成最适合你的设计的很酷的动画和阴影。
19、cssfx - css 效果
网址：cssfx
一个精心设计的集合，重点在于流畅性、简单性和易用性。由CSS提供动力，标记最少。完全开放源代码和MIT许可。
五、设计 & 插图
1、Storytale - 免费切图
网址：storytale
让你不用再 ”低三下四“ 求UI给你切图了！可用于 web端 和移动端项目的高级插图。免费，且可用于商业和个人目的。
DevDocs将众多的API文档集中在一个可搜索的界面。你可以在一个地方找到与各种编程语言、技术相关的文档。
2、undraw - 免费、精美图片
网站：undraw
它提供免费的精美图片。此外，你可以自定义颜色。
3、error404 - 免费的 404 插图
网址：error404
你是否曾经为如何设计网站的 404 页面而苦恼？本站提供了大量适合404页面的精美样式。
4、Blush
网址：Blush
Blush 允许你免费下载他们所有的插图，供商业和个人使用。它是惊人的，因为它具有许多插图风格，可以组成新的插图。此外，他们有一个Figma插件，所以你可以立即在你的设计中使用它们。
5、Smash Illustrations
Smash Illustrations 以时尚的人物和简单的插图为特色，可免费用于商业和个人使用。它有250多个对象和角色，以及20多个独特的场景，因此你可以随心所欲地编排它们。
6、Control
网址：Control
Control 的特点是免费提供高质量的实体和线性风格的插图。它们可以免费用于商业和个人用途，但它们是.png格式的。如果你需要SVG，那么你将需要支付38美元，这对于这种质量的插图来说并不坏。
7、DrawKit
网址：DrawKit
DrawKit有220多个免费使用的插图。它们都是SVG格式的，所以你可以创造出令人敬畏的构图!此外，他们还提供了使用 lottie 的动画插图，这对于酷和时尚的网站开发来说是非常巨大的。
8、Open Doodles
网址：Open Doodles
如果你是一个素描插画的粉丝，那么你会喜欢 Open Doodles。所有插图和免费下载的SVG或PNG格式。此外，他们还有一个构图路线和生成器，所以你可以得到你需要的涂鸦!
9、Free Illustrations
免费插图的特点是有许多插图背景，非常适合着陆页开发。
10、Mixkit
网址：Mixkit
Mixkit 是插图的 Unsplash，或者说这就是他们的目标。它有许多插图类别，还有库存视频和音乐，都是免费的。
11、Delesign
网址：Delesign
Delesign为你免费提供许多干净的插图。他们的主要强项是其多样性。
12、Dribbble - 设计创意
网址：dribbble
Dribbble 是寻找和展示创意作品的主要目的地，也是世界上最优秀的设计专业人士的家园。你可以从这里找到网页设计的灵感。
13、Behance - 设计创意
网址：behance
提到 UI设计创意，除了 Dribble，就不能不提 Behance。
14、Colorhunt - 调色板工具
网址：Color Hunt
Colorhunt 是一个调色板的网站。前端再也不用烦恼页面色了！
15、SchemeColor - 配色工具
网址: schemecolor
SchemeColor 工具可以帮助你选择正确的主题，它可以帮助我们可视化并为我们的网站选择合适的一组颜色。
16、Shape Divider - 画曲线
网址：Shape Divider
Shape Divider 允许你在飞行中为你的网站生成光滑的分隔线。与其他网站相比，它的用户界面很酷，而且效果非常好。
17、FontSpark - 字体
网址：FontSpark
FontSpark允许你通过生成不同的字体来发现你下一个喜欢的字体，直到你喜欢它为止。
18、colors.lol - 调色板
网址：colors.lol
需要描述性过强的调色板？Colors.lol是寻找这些的正确地方。他们有10多个这样的调色板，可以使你的设计更有活力。
19、ColorMind
网址：ColorMind
Colormind使用深度学习生成颜色方案。你可以锁定颜色，并获得与该颜色互补的其他颜色。
20、Ucraft Logo Maker - logo 制作
每当我为一个副业需要一个快速的 logo 时，这是我的首选。他们有成千上万的图标，可以帮助你创建许多标志组合。对于免费的商业和个人使用，他们让你下载一个PNG版本的标志。
21、AppMockUp - App 模拟图
网址：AppMockUp
AppMockUp让你不费吹灰之力就能生成Android和iPhone的模拟图。如果你是一个移动开发者，一定要看看这个软件。
22、Webframe - 网站设计灵感
网址：Webframe
Webframe有成千上万的基于真实网站的设计灵感。
六、Icons 图标
1、react-icons
网址：react-icons
用react-icons在你的React项目中轻松包括流行的图标，它利用ES6导入，允许你只包括你的项目正在使用的图标。
2、iconsvg
网址：iconsvg
为你的项目快速定制的图标。
3、feathericons
网址：feathericons
专门为React配套的库：react-feather
简单漂亮的开源图标。
4、systemuicons
网址：systemuicons
专门为系统和产品设计的简单而一致的图标的集合不断增加。你想怎么用就怎么用，免费开源。
5、svgporn - 矢量图标
网址：svgporn
矢量标识，可用于：
- 开发
- 设计师
- 极客
- 团队
- 博主
- DevOps
6、iconmoon
网址：iconmoon.io
完美像素图标解决方案。
7、evil-icons
网址：evil-icons
简单干净的SVG图标包，代码支持Rails、Sprokets、Node.js、Gulp、Grunt和CDN
8、simpleicons
网址：simpleicons
2449个流行品牌的免费SVG图标。
9、fontawesome
网址：fontawesome
在你的网站上获得图标的最简单的方法是使用一个工具包。这是你自己的自定义版本的Font Awesome，所有捆绑在一起的只有你需要的图标、工具和设置。
10、icons.holasvg
网址：holasvg
11、iconscout
网址：iconscout
7,000多种图标字体、SVG、3D和动画图标与Unicons合作。为任何设计项目寻找任何图标字体、SVG、3D或动画图标。通过简单的拖放，或使用React或Vue，可直接从您喜爱的设计工具中访问Unicons。有六种不同的图标风格可供选择：直线、单色、实体、细线、动画和三维视图。
12、fontastic
网址：fontastic
在几秒钟内创建你的图标字体。让你的网站更快。超过9,000个图标可用。你可以将你的图标作为SVG Sprites发布。
13、3dicons
网址：3dicons
- 超过4000个3D图标和3D人物
- 4K分辨率的正面和透视视图
- 包括Figma文件以定制颜色
- 五种不同的颜色调色板
- 在真实的3D模型和软件中设计
- 精心设计的细节
- 每周都有新的图标加入
14、favicons.beaubus
网址：favicons
一组110多个免费的跨浏览器 favicons，供你在你的项目中使用。
15、iconic
网址：iconic
免费的、"随心所欲 "的像素完美的图标，每周都有新的图标加入。
16、svgrepo
网址：svgrepo
500.000多个开放许可的SVG矢量和图标，使用种类繁多的矢量库，为您的项目搜索、探索和编辑最合适的免费图标或矢量。下载免费的SVG矢量和图标供商业使用。
17、tabler-icons - 适用 react、vue 等
网址：tabler-icons
超过4100个用于网页设计的像素完美的图标，免费和开源的图标，旨在使你的网站或应用程序具有吸引力，视觉上一致，简单美观。
18、css.gg
网址：css.gg
开源的CSS、SVG和Figma UI图标，有SVG Sprite、styled-components、NPM和API版本。
19、fontastic
网址：fontastic
20、remixicon
网址：remixicon
为设计师和开发者精心制作的开源中性风格的系统符号。所有的图标都可以免费用于个人和商业用途。
21、lineicons
网址：lineicons
手工制作的线条图标，适用于现代用户界面的网络、移动和桌面应用程序设计和开发项目。Lineicons是一个巨大而全面的专业设计的图标包，有所有矢量格式，易于在网络、设计、编码和其他方面使用。
22、boxicons
网址：boxicons
高质量的web图标，为设计师和开发者精心设计的简单开源图标。
23、heroicons - Tailwind 风
网址：heroicons
美丽的手工制作的SVG图标，由Tailwind CSS的制作者制作
24、iconmonstr
网址：iconmonstr
发现316个集合中的4784+免费图标。
25、google fonts
网址：fonts.google
Material Icons有五种风格，有一系列可下载的尺寸和密度。这些图标是基于Material Design的核心原则和指标。
26、iconfinder
网址：iconfinder
为您的设计项目提供数百万个图形。由独立设计师创建。
七、开源的 mock data API
如果你是一个纯前端或者只是想测试一些新技术，但是又不想写一个后端服务，那接下来的这 12 个免费的 mock API 网站肯定就是你想要的了！
1、fakerjs
网址：fakerjs
可以在测试和开发的时候，生成大量 mock 数据，很好用，首选。
2、dummyjson
网址：dummyjson
生成 JSON 格式的 mock 数据，在开发或测试中作为占位符使用
3、jsonplaceholder
这个也很好用，生成的是一些类似下面数据结构的 mock 数据：
{ id: 1, title: '...', body: '...', userId: 1 }
4、dog.ceo
网址：dog.ceo
喜欢“修狗狗”的 FEers 可以用这个。
5、fakestoreapi
网址：fakestoreapi
生成一些类似超市产品的 mock 数据，特定场景下很有用。
6、pokeapi
网址：pokeapi
通过现代RESTful API轻松访问所有你需要的口袋妖怪数据。
7、randomuser
网址：randomuser
一个用于生成随机用户数据的免费、开源的API。
8、punkapi
网址：punkapi
带图片的免费 mock apis，主要是关于啤酒的。。。
9、Random Data API
生成随机的 mock 数据并填充到你的应用程序中，以方便开发和测试。
10、REST Countries
返回的是世界上所有国家的数据。
11、Open Weather Map
生成的是关于城市天气的 mock 数据。
12、IP API
网址：IP API
一个用于查找 "IP地址、时间区域、城市、国家、邮政编码、经度/纬度" 信息的免费API。
