---
# System prepended metadata

title: 實用網站、工具

---

實用網站、工具
==

## JavaScript
### 網站
1. [JSONPlaceholder](https://jsonplaceholder.typicode.com) - 免費的假REST API，方便前端開發時，有模擬資料來進行測試
    - [what is API?](https://www.dottedsign.com/zh-tw/blog/product/api)
2. [Whimsical](https://whimsical.com) - 繪製流程圖、心智圖



### 工具
1. [Postman](https://www.postman.com) - 進行API測試工具
2. JSONView (Chrome 的擴充套件) - json格式排版美化


## CSS
### 網站

1. [CSS clip-path maker](https://bennettfeely.com/clippy) - 利用clip-path屬性，繪製各種形狀
2. [FontAwesome](https://fontawesome.com/) - 免費小icon
```html
可直接用CDN免下載，位置放在HTML中style.css上面
<script src="https://kit.fontawesome.com/9cb8fe1d61.js" crossorigin="anonymous"></script>
```
3. [cubic-bezier](https://cubic-bezier.com/#.17,.67,.83,.67) - 控制動畫效果的速度曲線

### 工具
1. [tailwind](https://tailwindcss.com/docs/installation) - CSS框架，預先設好各種class，拆分很細，可以直接加在HTML上快速編寫CSS樣式
   - 缺點是HTML的class name會變很長
2. [Bootstrap](https://getbootstrap.com/) - CSS框架
