# 實用工具

###### tags: `資源` `切切切`

## 規範
### - 無障礙 -
1. [無障礙網頁規範2.0](http://u00.hyweb.com.tw/accessibility/guides.html)
### - 社群icon規範 -
1. [Line](https://line.me/en/logo)**：line規定不可以改**
2. [facebook](https://en.facebookbrand.com/assets/f-logo/)**：白色 or 藍色 ONLY！**
3. [youtube](https://www.youtube.com/intl/en-GB/yt/about/brand-resources/#logos-icons-colors)**：紅色 or 黑色 ONLY！**
4. [twitter](https://about.twitter.com/content/dam/about-twitter/company/brand-resources/en_us/Twitter_Brand_Guidelines_V2_0.pdf)**：白色 or 藍色 ONLY！**
5. [plurk](https://www.plurk.com/brandInfo) **：沒有限定色彩**
6. [Instagram](https://en.instagram-brand.com/assets/icons) **：彩色 or 白色 or 黑色 ONLY！**

## 生產力工具
### - 教學文件 -
1. [CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
2. [Chrome DevTools 教學](https://developer.chrome.com/docs/devtools/overview/)
### - 教學頻道 -
1. [Google Chrome Developers](https://www.youtube.com/@ChromeDevs)
2. [Figma@Mizko](https://www.youtube.com/@Mizko)
3. [Figma@designtipstoday](https://www.youtube.com/@designtipstoday)
4. [UX@chunbuns](https://www.youtube.com/@chunbuns)
5. [前端@MikeCheng](https://www.youtube.com/@MikeCheng)
6. [我啊罵都會@GrandmaCan](https://www.youtube.com/@GrandmaCan)
7. [Amos@CSScoke](https://www.youtube.com/@CSScoke)
8. [NetNinja](https://www.youtube.com/@NetNinja)
9. [DesignCourse ](https://www.youtube.com/@DesignCourse)

### - 代碼速查、擴充 -
1. [caniuse](https://caniuse.com) **：CSS標籤瀏覽器支援度速查**
2. [Google Hosted Libraries](https://developers.google.com/speed/libraries/?hl=zh-tw) **：google 代碼託管**
3. [CdnJs](https://cdnjs.com/) **：使用 JavaScript CDN 來加速網站載入速度** [文章說明](https://free.com.tw/cdnjs/)
4. [Device Metrics](https://material.io/tools/devices/)**：瀏覽器尺寸表**
5. [table合併工具](https://divtable.com/generator/)**：table merge 輔助工具**
6. [TabNine](https://buzzorange.com/techorange/2019/08/02/nice-coding-tool/)**：支援 23 種程式語言，依照 Coding 習慣給出建議**
7. [Microsoft Windows字型列表](https://zh.wikipedia.org/wiki/Microsoft_Windows%E5%AD%97%E5%9E%8B%E5%88%97%E8%A1%A8)**：微軟各國語言字型支援度查詢**
8. [macOS字體列表](https://zh.wikipedia.org/wiki/MacOS%E5%AD%97%E4%BD%93%E5%88%97%E8%A1%A8)**：mac各國語言字型支援度查詢**
9. [BRAND PALETTES](https://brandpalettes.com/)**：品牌 logo 標準色碼**
10. [SVG animate](https://www.svgator.com/)

### - 產生器 -
1. [CSS3 產生器](https://webcode.tools/css-generator)
2. [CSS 三角形產生器](https://www.cssportal.com/css-triangle-generator/)
3. [花俏的圓角產生器](https://9elements.github.io/fancy-border-radius/)
4. [box-shadow 產生器](https://www.cssmatic.com/box-shadow)
5. [Beautiful CSS box-shadow examples](https://getcssscan.com/css-box-shadow-examples?ref=techmoon)**：box-shadow 範例**
6. [Sass快速選取顏色](https://sassme.jim-nielsen.com/)**：可立即看到數值調整後的色彩變化**
7. [css動畫代碼產生器](http://animista.net/)
8. [漸層產生器 css Gradient](https://cssgradient.io/)
9. [漸層產生器 blend](http://www.colinkeany.com/blend/)
10. [視差滾動 外掛](https://dixonandmoe.com/rellax/)
11. [AI生成工具](https://www.recraft.ai/)：**最後圖檔可以存成svg檔案**
12. [px to em產生器](https://pxtoem.com.au/)
13. [CSS產生器](https://webcode.tools/css-generator)
14. [CSS color filter產生器](https://angel-rs.github.io/css-color-filter-generator/)

### - 動態 -
> 完整解析 CSS 動畫 ( CSS Animation ) [前往連結](https://www.oxxostudio.tw/articles/201803/css-animation.html)
1. [animate.css](https://daneden.github.io/animate.css/)**：在html塞動態的className，run一次**
2. [Wow.js](http://mynameismatthieu.com/WOW/index.html)**：與 animate.css 搭配使用**
3. [文字動畫套件](https://textillate.js.org/)
4. [彈跳動畫套件](http://bouncejs.com)
5. [magic animations 動畫套件](https://minimamente.com/example/magic_animations/)
6. [css loader](http://www.raphaelfabeni.com.br/css-loader/)**：用css做load圖像，替代img**
* [How To Make a Loader](https://www.w3schools.com/howto/howto_css_loader.asp)
8. [aos 動畫套件](https://michalsnik.github.io/aos/)**：貌似可因滑鼠滾動而重複hide & show**
9. [animejs 動畫套件](https://animejs.com/)**:多種動畫效果 類似ＧSAP**

### - gif 動畫 -
1. [lottiefiles](https://lottiefiles.com/)**：文件極小的gif動畫**

### - 無障礙色彩對比 -
1. [顏色對比查詢 1](https://contrast-ratio.com/)
2. [顏色對比查詢 2](https://marijohannessen.github.io/color-contrast-checker/)
3. [無障礙色彩交叉對比工具](https://contrast-grid.eightshapes.com/?background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&es-color-form__tile-size=compact)**：常用**

### - 字級相關 -
1. [GridOver](https://gridlover.net/try)**：測試文字編排的行距有沒有美觀**

### - 配色平台 -
1. [palettable](https://www.palettable.io/2FD3A5)

### - 測試工具 -
1. [PageSpeed ](https://developers.google.com/speed/pagespeed/insights/?hl=zh-TW)**：網頁載入速度測試工具**

### - 圖片處理 -
1. [tinypng](https://tinypng.com/)**：圖片壓縮工具**
1. [iloveimg](https://www.iloveimg.com/zh-tw/compress-image)**：圖片壓縮工具，目前壓縮一組17mb大小的gif檔沒有被拒絕**
1. [前往連結](https://cybercats.com.tw/6-free-online-image-compressor-seo-tool/)**：圖片壓縮工具列表**
1. [imgix](https://sandbox.imgix.com/view?url=https%3A%2F%2Fassets.imgix.net%2Funsplash%2Ftransport.jpg%3Fw%3D600%26h%3D1200)**：佔位圖片1**
1. [placemat](https://placem.at/)**：佔位圖片2**

### - 協作分享平台 -
1. [webmaker](https://webmaker.app/)**：本機 coding test 工具**
1. [HackMd](https://hackmd.io/)**：線上協作筆記**

## 套件
1. [pigno](https://www.pigno.se/barn/PIGNOSE-Calendar/)**：豬鼻子月曆**
2. [lazyload any](https://github.com/emn178/jquery-lazyload-any)**：圖片延遲載入**
3. [Highchart 中文教學](http://www.runoob.com/highcharts/highcharts-tutorial.html)**：數據、甘特圖**
4. [Echart](https://echarts.apache.org/examples/en/index.html)**：數據、甘特圖**
5. [flourish](https://flourish.studio/)**：數據、甘特圖**
6. [masonry 卡牌](https://masonry.desandro.com/)**：網格佈局庫**
7. [lightbox lity](https://sorgalla.com/lity/)**：燈箱**
8. [overlay scrollbar](https://kingsora.github.io/OverlayScrollbars/#!overview)**：多種scrollbar**

## 字型
1. [書法字型 1](http://www.akuziti.com/mb/)
2. [書法字型 2](http://fonts.top/)
3. [方正字庫](http://www.foundertype.com/)
4. [王漢宗注音](https://zh.wikipedia.org/zh-tw/%E7%8E%8B%E6%BC%A2%E5%AE%97%E8%87%AA%E7%94%B1%E5%AD%97%E5%9E%8B)注音字型目前除了王漢宗注音的中明注音體可免費使用外，其餘的要注意是否侵權
https://www.pkstep.com/archives/68398
5. [ButTaiwan](https://github.com/ButTaiwan/bpmfvs/releases)提供的多種免費注音字體下載
> 開源自由字型
以常見開放原始碼條款釋出的字型。原則上都可商用、再散佈，並且可以自行改造，不過改造後的字型通常需以相同授權條款釋出。

## 免費資源
### - 影片 -
1. [coverr](https://coverr.co/)
2. [pexels](https://www.pexels.com/videos/)
3. [videvo](https://www.videvo.net/)
4. [mazwai](https://mazwai.com/)
5. [15 個免費影片素材網站](https://steachs.com/archives/29462)
### - 圖庫 -
1. [無版權圖庫 ccsearch](https://search.creativecommons.org/)
2. [無版權圖庫 unsplash](https://unsplash.com/)
3. [unDraw](https://www.playpcesor.com/2019/08/undraw-800.html?fbclid=IwAR25ypfHl4rha0-KcaG4OFV1HKm5qSIXXS23SWxxidXEKelWOs2FD_10Oxw)**：免費可商用向量插圖圖庫**
4. [photoAC 免費圖庫](https://photo-ac.com/tw/)
### - icon -
1. [實用icon](https://thenounproject.com/)
2. [TW icon Fonts](https://www.twicon.page/index.html)
### - 線上前端開發軟體 -
1. [CodePen](https://codepen.io/)
2. [Dabblet](https://dabblet.com/)
3. [JSFiddle](https://jsfiddle.net/)
4. [CSSDesk](http://www.cssdesk.com/)
5. [JS Bin](https://jsbin.com/?html,output)
6. [Codeanywhere](https://codeanywhere.com/#revisions)
7. [Liveweave](https://liveweave.com/)
### - 微互動 -
1. [UI movement](https://uimovement.com/)