前端工程师一般都喜欢去哪些网站逛？

每天8个必刷的网站...供参考

1.

2.

3.

4.

5.

6.

7.

8.

本人平时项目使用的是 Angular，传统项目使用的是 jQuery，小程序使用的是 Taro vue3，工欲善其事，必先利其器：

1. 页面设计检查清单：Checklist Design - A collection of the best design practices.

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

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

3. 渐变背景色生成：CSS Gradient — Generator, Maker, and Background

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

4. 在线去除背景：Upload Image – remove.bg

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

5. logo，封面设计：Just a moment...

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

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

7. 生成水滴：Blobmaker - Make organic SVG shapes for your next design

8. 生成形状：Shape Divider App

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

9. 动效生成：Animista - On-Demand CSS Animations Library

10. 投影生成：Smooth Shadow

11. css 剪辑路径：Clippy - CSS clip-path maker

12. 圆角生成：Fancy Border Radius Generator

13. 图片无损压缩：TinyPNG – Compress WebP, PNG and JPEG images intelligently

作为前端开发，有时候就需要把事情做到极致，上传的图片、项目中的静态图片资源，无损压缩是一个很好的方案

14. nginx 在线配置：NGINXConfig | DigitalOcean

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

16. Angular 干净代码检查清单:https://itnext.io/clean-code-checklist-in-angular-%EF%B8%8F-10d4db877f74

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

17. 16条前端UI设计原则：表歌：16条前端 UI 设计原则，上万点赞

这是我整理国外上万点赞的UI设计原则，虽然你不是UI设计师，但是你的前端价值往往是你的软实力

18. Json 格式化：JSON Formatter & Validator

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

19. TodoMVC: TodoMVC

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

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

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

21. Rxjs 弹珠动画演示图 Animated playground for Rx Observables

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

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

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

23. 免费动画图标：A micro-animations library

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

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

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

25. 免费插画【推荐】：Free illustrations - Free to use illustrations & vectors

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

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

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

27. Scrollbar: Scrollbar.app

滚动条生成器

28. 条纹背景 Pure CSS Stripes Generator

使用css生成条纹背景图

29. Medium https://medium.com/

斯以为近年我前端技术综合水平的提示和灵感来源得益于这个网站，续费了会员，每天早上七点半准时收看邮箱已成为习惯，每天花半个小时的时间未来给你带来更高的收益，把感兴趣的文章保存到TODO List，有空再细读和整理。

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

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

以上都是经常使用的工具箱，也会不断的完善更新，我开源的Angular低代码前端UI框架：

信使 UI 是基于 Material 的 Angular 前端框架， 丰富的组件库可提供优秀的数字创新体验，使用 Web Builder 可以通过拖拽快速构建响应式、多主题的 Web 页面。

大部分都用这些工具来生成主题色板、图片、形状，欢迎交流 Star:

在线体验：

前端不是复制粘贴，前端应该是有趣的、有创造性的，连通用户的桥梁。

推荐前端其他阅读清单：