好用的网站，库，工具

Tailwind CSS

传统情况下，当您需要在网页上设置样式时，都需要编写 CSS。

.chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

使用后

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

在上面的示例中，我们使用了：

• 使用 Tailwind 的 flexbox 和 padding 功能类 (flex, flex-shrink-0, 和 p-6) 来控制整体的卡片布局
• 使用 max-width 和 margin 功能类 (max-w-sm 和 mx-auto) 来设置卡片的宽度和水平居中
• 使用 background color, border radius, 和 box-shadow 功能类 (bg-white, rounded-xl, 和 shadow-md) 设置卡片的外观样式
• 使用 width 和 height 功能类 (w-12 and h-12) 来设置 logo 图片的大小
• 使用 space-between 功能类 (space-x-4) 来处理 logo 和文本之间的间距
• 使用 font size，text color，和 font-weight 功能类 (text-xl，text-black，font-medium 等等) 给卡片文字设置样式

简阅

一个chrome插件。简单用就是个网页的阅读模式。进阶玩法比较多，可以自行了解。

Vue.js挑战

这个项目意在帮助你更好地了解Vue.js，编写你自己的实用程序，或只是单纯的享受挑战的乐趣。

masscode

代码片段管理软件，有vscode的配套插件

sayhello

一个代码搜索引擎 hello，输入想实现的功能就能得到相关代码结果

unplugin-auto-import 和 unplugin-vue-components

这两个库可以自动导入自己设置的通用模块。页面能少写很多import语句。

数据可视化

数据可视化 AntV 的设计原则是基于 Ant Design 设计体系衍生的，具有数据可视化特性的指导原则。它在遵循 Ant Design 设计价值观的同时，对数据可视化领域的进一步解读，如色板、字体的指引。 AntV 经过大量的项目实战经验，总结了四条核心原则：准确、清晰、有效、美，这四条原则按重要等级先后排序，相辅相成且呈递进关系。

JavaScript设计模式与开发实践

非常非常Good