# 前端...摻再一起做撒尿牛丸

:::info
整理再一起好了,好像比較好找
:::

再進入這個關於前端哈囉是借以前,也不妨了解一下他的[黑歷史1](https://medium.com/hulis-blog/frontend-engineer-guide-297821512f4e) (by Huli blog), [黑歷史2](https://kuro.tw/posts/2019/07/31/%E8%AB%87%E8%AB%87%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/) (by Kuro blog)

## Javascript

### Js-套件
[interact](https://interactjs.io/) - 拖曳與縮放效果
[AOS](https://michalsnik.github.io/aos/) - box move in 特效
[axios](https://github.com/axios/axios) - ajax封裝套件
[D3](https://d3js.org/) - ==手動==繪圖, 畫那些你覺得非一般的統計圖, 相關[D3 API](https://github.com/d3/d3/blob/master/API.md)參考
[Draggable](https://shopify.github.io/draggable/examples/) - 效果很有趣的拖曳套件

## Css

### Css-入門
[煮晚餐](https://flukeout.github.io/) - 練習CSS選取 :+1:
[青蛙跳](https://flexboxfroggy.com/) - 練習flexbox排版

### Css-進階
免費的初始樣板 (昂貴的部分是....你要會套)
[boostrap範例](https://bootstrapmade.com/)

### Css-標籤

// @media, 條件吻合時變換不同的 css 判斷
@media (min-width: 500px) {
   table td {
     50px; 
   }
}

@media (min-width: 1000px) {
   table td {
     100px; 
   }
}


// clac 計算方法
.width_calculate {
  width: clac(100% - 5px)
}

.width_var {
  -width1: 50;
  width: clac(var(width1) - 50px)
}

## 值得推薦的文章

[重新認識Javascript](https://ithelp.ithome.com.tw/articles/10190633) (iT邦幫忙)

[糙 Code](https://ithelp.ithome.com.tw/articles/10209818) (iT邦幫忙) - 重點是==不要害怕動手寫糙Code==阿

[重構](https://medium.com/%E5%BE%8C%E7%AB%AF%E6%96%B0%E6%89%8B%E6%9D%91/%E7%AD%86%E8%A8%98-%E9%87%8D%E6%A7%8B-chapter-1-2-%E7%AC%AC%E4%B8%80%E5%80%8B%E7%AF%84%E4%BE%8B-%E9%87%8D%E6%A7%8B%E5%8E%9F%E5%89%87-ca57a6d40f42) (by YH.yu blog)

[阮一峰的網路日志](http://www.ruanyifeng.com/blog/)

###### tags: `javascript`