FCAT

Appearance

常用工具网站 ​

一键配色生成根据任意颜色生成不同风格的配色方案
在线图片取色器上传图片在线点击取色
在线切图工具上传图片并在线压缩图片大小，用于减少服务器压力
EXCEL转HTML-div/table上传图片并在线压缩图片大小，用于减少服务器压力

字体/图标资源 ​

iconfont-阿里巴巴矢量图标库矢量图标库
iconpark图标库

静态站点生成器 ​

Docusaurus基于React的文档框架
VitePress基于Vite与Vuepress的文档框架，生肉
vuepressCNVue 驱动的静态网站生成器，中文网站
vuepressVue 驱动的静态网站生成器

CSS辅助网站 ​

CSS字体生成器手动生成需要的CSS字体代码
CSS布局生成器从几个布置好的Grid与flex中挑选想要的页面布局，生成代码
开箱即用CSS样式大全开箱即用的按钮、复选框、开关、卡片、加载、输入框和表单CSS代码
全局阴影效果深入探讨CSS全局阴影效果的文章
CSS布局样式tree/table/Tooltip/...
CSS3 Patterns Gallery背景渐变网站1
standardista使用 纯CSS 的方式画出多国国旗。
bennettfeely背景渐变网站3
Flags with CSS3 Gradients背景渐变网站4
Hero Patterns官方提供了几十款纹理，你可以根据自己的需求设置两种对比色和不透明度。 完成后会返回一段CSS代码给你，不过和前面几个网站有点不同的是，Hero Patterns 的背景图使用了 base64 的方式去实现的，而不是 CSS 背景渐变 的方式。
HUE.CSS背景渐变网站4
Flags with CSS3 Gradients使用 CSS 背景渐变 的方式做出的数十款高端大气的背景，网站上的所有案例都提供了代码。
Pure CSS Stripes Generator帮你生成 条纹背景 的代码。 你可以在网站上根据自己的需求设置条纹的颜色、大小、倾斜角度等属性。 最后会返回一段 css 代码给你。
Glass Morphism设置 毛玻璃背景 样式，你可以在上面手动调节毛玻璃的不透明度、模糊度、背景色等属性。 最后会返回 html 和 css 代码给你。
uiGradients提供了不同色系搭配的渐变代码。
Gradient Colors Collection Palette色卡，可以一键复制 css 代码
Fresh Background Gradients提供了即使个配色方案，有双色的，也有多色的。同样提供一键复制 css 代码。
Cool Backgrounds可以生成 5种类型 的背景图片，并且提供多套成熟的配色方案供你选择。 但该网站生成的是背景图片，不是代码。
Svg Wave生成波浪背景图，可以自定义波浪的幅度、颜色等属性。 支持 SVG 和 PNG 下载。
Subtle Patterns提供了几十种纹理图。
Stripe Generator可配置的条纹背景图片。
ZenBG在线设置纹理背景和渐变颜色，最后融合在一起生成一张好看的图片。 同时还提供 css 代码给你参考，告诉你如何更好的使用这张图片。
Patterninja帮你生成可平铺的背景图。
The Pattern Library提供几十款可平铺的好看背景。 注意：下载按钮在网页的左上角。

教程网站 ​

w3school 在线教程较为全面的前端技术栈教程，配合在线用例。比较权威的教程网站。
阮一峰Flex布局教程网友介绍的Flex教程网站
Flex布局说明网友介绍的Flex教程网站
深入理解现代JavaScript文档深入理解现代JavaScript文档
深入理解现代JavaScript脑图代码深入理解现代JavaScript脑图代码
阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版《ECMAScript 6入门》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新增的语法特性。

优质博客 ​

ChoDocsFront-end learning document collection. 一站式前端内容网站，包括学习路线、知识体系。
I Dont Know JSJS 一些诡异的行为的解释和花里胡哨的操作，有些看着没啥用，实则蕴含了 JS 底层的一些原理。也包含了平时写代码时的一些技巧。
茂茂物语推荐博客
CellToo推荐博客
神奇的程序员今天的努力只为未来
Lvzl Blog推荐博客
唐志远の博客推荐博客
BruceBlog一名前端er的学习笔记

VS Code 插件推荐 ​

  • Chinese (Simplified)::(简体中文) 适用于 VS Code 的中文（简体）语言包

Vue-Vue2开发 ​

  • Vetur : Vue.js开发插件，提供了语法高亮、错误提示、自动补全等功能。
  • Vue 2 Snippets : Vue.js 2代码段，可以快速生成常用的Vue.js代码。
  • ESLint : JavaScript语法检查工具，在Vue.js开发中可以帮助我们规范代码。
  • Prettier - Code formatter : 代码格式化工具，可以帮助我们自动格式化代码。 最流行的前端代码格式化利器
  • Auto Rename Tag : 自动重命名标签插件，可以帮助我们快速修改匹配的标签。
  • Path Intellisense : 路径自动补全插件，可以帮助我们快速输入文件路径。
  • Indent Rainbow : 缩进彩虹插件，可以帮助我们更清楚地看到代码的缩进层级。
  • Code Spell Checker : 拼写检查插件，可以帮助我们避免代码中的拼写错误。
  • Sass写sass/scss文件必装的插件

HTML+JS+CSS开发 ​

  • Image preview : 鼠标悬停可以预览图片，显示图片的大小和尺寸。不仅仅在css中，也可以在js、vue等文件中预览哦，可以打开对应的文件夹和项目文件为位置，
  • JavaScript (ES6) code snippets : es6等代码块，语法提示
  • CSS Peek : 支持通过点击HTML文件中的类名或ID快速定位到对应的CSS样式定义，极大地提高了CSS样式的查找和编辑效率。
  • HTML CSS Support : 增加了HTML文件中的CSS类名智能提示功能，并能实时预览颜色和字体图标，为HTML开发增添了更多可视化元素，使开发过程更为流畅。

其他功能性插件 ​

  • open in browser : 提供右键菜单选项，一键在浏览器打开html文件。
  • Live Server : 开启一个实时的本地服务器
  • GitLens : Git插件，可以帮助我们更方便地查看代码的提交历史、作者等信息。

前端书籍推荐 ​

  • JavaScript权威指南（犀牛书）
  • JavaScript高级程序设计（小红书）
  • JavaScript DOM编程艺术
  • 图解HTTP
  • 你不知道的JavaScript（小黄书）

可选书籍 ​

  • 深入潜出Node.js
  • JavaScript设计模式与开发实践

前端网站推荐导航 ​

  1. 页面设计检查清单：https://www.checklist.design/

当你没有UI设计师或者作为UI设计师，可以通过设计清单可以检查必要的设计要素或者容易忽略的设计元素。

  1. 背景色生成： https://webgradients.com/?ref=usniemvuilaptrinh

  2. 渐变背景色生成CSS Gradient：https://cssgradient.io/

通过颜色选择器和拖拽滑块的方式，生成各种线性的背景色

  1. 在线去除背景Upload Image：https://www.remove.bg/zh/upload

有时候你的电脑并不具备相关的软件或者技术，这个网站可以快速帮你去除图片中的背景

  1. logo，封面设计：Just a moment...：https://www.canva.cn/en/?display-com-option=true

  2. 生成浪花：https://getwaves.io/

越来越多的现代前台页面加上了浪花这种大幅形状的背景图，来分割页面相隔组件，突出这个组件，让整个页面的设计更加灵动了起来

  1. 生成水滴Blobmaker：https://www.blobmaker.app/

  2. 生成形状Shape Divider App：https://www.shapedivider.app/

Shape 可以作为组件的背景图，加上合适的文案和图片，放在页面的第一个Hero组件，效果很加分

  1. 动效生成Animista：https://animista.net/

  2. 投影生成Smooth Shadow：https://shadows.brumm.af/

  3. css 剪辑路径Clippy：https://bennettfeely.com/clippy/

对你的图片进行css剪辑

  1. 圆角生成Fancy Border Radius Generator：https://9elements.github.io/fancy-border-radius/

可用作页面组件的大背景

  1. 图片无损压缩TinyPNG：https://tinypng.com/

可批量上传，无损压缩，上传的图片、项目中的静态图片资源，无损压缩是一个很好的方案

  1. nginx 在线配置NGINXConfig | DigitalOcean ：https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN

  2. 形状各种生成：https://app.haikei.app/

让你的网站更加简洁且高大上

  1. Angular 干净代码检查清单:https://itnext.io/clean-code-checklist-in-angular-️-10d4db877f74

由于我主要是Angular前端开发，这篇文章有3.6k的赞，可以作为优化自己angular项目的检查清单。

  1. 16条前端UI设计原则：表歌：16条前端 UI 设计原则，上万点赞：https://zhuanlan.zhihu.com/p/648041457

  2. Json 格式化：JSON Formatter & Validator：https://jsonformatter.curiousconcept.com/#

有时候拿到的数据是js类型的数据对象，你又想粘贴到json格式里面，可以使用工具快速修复格式化

  1. TodoMVC：https://todomvc.com/

TodoMVC 做了一件事情，一样的TODO清单的需求，不同的前端框架去实现，可以让你快速对比了解不同框架之间对应实现同一个需求的区别，有时候你想不起来了，可以看看。

  1. Material 颜色调色版：https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

用调色版可以生成某个颜色下文本的显示效果，你的站点的主色应该在很多场景是的对比度是友好的，比如按钮，链接，卡片。

  1. Rxjs 弹珠动画演示图 Animated playground for Rx Observables：https://rxviz.com/

rxjs 是一个功能强大的响应式编程js库，任何事情都可以作为Observable，刚开始入门比较难以理解，可配合弹珠图动态演示数据流

  1. 在线文档转换 https://www.online-convert.com/

各种文档类型的转换，对于前端来讲，常用的比如image互转svg，pdf转image等等

  1. 免费动画图标：A micro-animations library：https://useanimations.com/

比如hover, click, check等等icon显示动画，在一些关键的action上显得生动形象

  1. 免费插画：https://www.glazestock.com/browse

免费版提供有限的尺寸，前端页面经常用到插画，简洁时尚

  1. 免费插画UI：Free illustrations - Free to use illustrations & vectors：https://themeisle.com/illustrations/

没什么限制，可下载png和svg格式

  1. 开源免费证书生成：https://github.com/acmesh-official/acme.sh

acme.sh实现了acme协议, 可以从 letsencrypt 生成免费的证书，兼容目前市面上主流的操作系统，60天到期后脚本也会自动更新

  1. 滚动条生成器Scrollbar：https://scrollbar.app/

  2. 条纹背景 Pure CSS Stripes Generator：https://stripesgenerator.com/

使用css生成条纹背景图

  1. Medium https://medium.com/

  1. 测试网站在全球的访问速度https://gtmetrix.com/

  2. 生成漂亮的代码 https://carbon.now.sh/

  3. css grid garden https://cssgridgarden.com/

最近项目上在使用css grid布局，这个网站像玩游戏一样通关的方式让你更好的熟悉熟悉的使用。

  1. flex box froggy https://flexboxfroggy.com/