###### tags: `2017` `想知道嗎` `分享` `聚會`

# 想知道嗎？2017

## 已分享 :100:

|日期| 主題| 主講人|
|-|-|-|
|4/11|Flex 補完計劃 :page_with_curl:[^cssflex] <br />`css` `css-flex`|Chris
|4/18|css 選擇器：擇你所愛 :heart:[^cssSelector]、[^cssSelectorNote]<br />`css` `selector`|Joseph
|4/25| [連豆芽:heart_eyes_cat:都會的CSS元件化](https://docs.google.com/presentation/d/1Fj_wR7CsYigFUIOK4tp4rmtT645r8BNPyfJQDu2zNRY/edit#slide=id.p)<br />`css` `sass` `css-component`|curt|
|5/2|[Transitions-鍊成陣](https://hackmd.io/CwTmHYAYEYGZoLQFNbAKwOJcAjBAOAM2EITUOgGNLhphKBDSJIA=):high_brightness:<br />`css` `transition`|Wesley|
|5/9|[Git-時間旅行](https://hackmd.io/p/r1DmNh61Z):clock930:+<i class="fa fa-github"></i> Github 作品集應用 <br />`git` `github`|Chris|
|5/16|[Animate.css 召喚術:fire:](https://hackmd.io/MYVgZiCmBsxgtARjMY8AsBmdj4CMB2AJk3iIA5MBOTABkXXMiPSA?view)<br />`css` `animate` `animate套件` <br>*[幻術捲軸！！:cyclone: 視差滾動~初探！](https://hackmd.io/p/BykQydeJb)*<br />`css` `parallax`|iris<br />Chris|
|5/24|[Javascript 偵探團](https://hackmd.io/p/BJzOOmVkW):mag:(1~5 宣告變數型態、scop、Hosting)<br />`javascript`<br />Javascript和Browser對話!! bubbling和capture[^bubbling&capturing]<br />`javascript` `js event`|Chris<br />
|5/31|[(公開活動)Learn Webpack, and Sleep at Night 🛌🏼](https://docs.google.com/presentation/d/1GaSVxZM5mmZXkPn8FnEXDZijF85zRH2tMzjwFIknmno/edit#slide=id.g22aa202c2f_0_0)<br />`webpack`|Alex|
|6/7|[Javascript (function,array)](https://docs.google.com/presentation/d/11gseIIfaQX3c1uWm8Qww78PEvYvcachiYGLx1fv_EnU/edit#slide=id.g22958715ef_0_143)<br />`javascript` |Joseph|
|6/7|[Javascript 你是誰我是誰誰是誰<br />(call by value、reference)](https://medium.com/@bebebobohaha/javascript-call-by-value-or-call-by-reference-f53cd1af6226)<br />`javascript`|PG|
|6/12|[(閃電加開)把hackmd變成hexo的「所見即所得」](https://dwatow.github.io/2017/06-18-re-equip-hexo1/)`hexo` `open source`|Chris|
|6/15|[手把手利用權仗與FB、後端溝通(第一次promise就上手)](https://docs.google.com/presentation/d/1SJBiM5jprXy33ulaEy9MQZ6G1L7iBebbfIQGEFgUZOg/edit#slide=id.g35f391192_00)`javascript` `ansync` `facebook`|curt|
|6/??|(閃電加開) shell script活動 參加心得分享 <br />`shell script`|Alex|
|8/9|水循!!:ocean:瀑布流之術![^masonry][^waterflow-note]<br />`css` `masonry套件` `masonry`|Chris|
|8/16|Chrome看圖的近視眼[^image-rendering-mdn]<br />`css` `image-ranging`|Chris
|8/16|[內建PM的工程師本能](https://hackmd.io/EYTgZgJgrADAhmAtCOBmEiAsBTFjgzADGiAbDFHAIwwTbBghRA==?both)<br />`工作流程`|Chris
|8/16|[與設計師溝通的經驗分享](https://dwatow.github.io/categories/%E7%B5%A6%E5%B9%B3%E9%9D%A2%E8%A8%AD%E8%A8%88%E5%B8%AB%E7%9A%84/)<br />`溝通`|Chris
|8/23|[手把手 一起擁抱Google Form吧](https://github.com/TengLee888/googleForm)<br />`Google Form`|Teng|
|8/23|伸縮自在的愛～自適應Box[^自適應Box][^clearfix][^BFC-MDN]<br />`css` `css進階` `RWD` `BFC`|Clover|
|8/23|初期切版的心得分享<br />`web layout`|Kyle|
|8/30|[有好多好多:gift:在這裡之SASS迴圈又來了](https://hackmd.io/KwExuBTBGBaSDMAjAnLALAQwMadigNnQAZZsEUUAOBYAJmyISA==)[^gift-codepen]<br />`css` `sass` `css進階`|Jim|
|8/30|黑魔法！CSS-Grid！ [^cssgrid-demo1][^cssgrid-demo2][^cssgrid-game][^cssgrid-note]<br />`css` `css-grid`|Mido|
|8/30|[另一頁在右邊呀!!滑動頁面用在選單/頁面切換](https://codepen.io/dwatow/pen/oWRWYE?editors=1001)<br />`css`|Chris
|8/30|github flow<br />`github`<br />[那一次，給hexo的pull request](https://github.com/hexojs/hexo/pull/2612)<br /> `github` `hexo`| Alex<br /> Chris|
|9/6|在Google表單之前:dog:、流程分享<br />`工作流程` `prototype` `google`|Iris
|9/6|You Shell Not Pass<br />`shell`|Alex
|9/6|基礎ER圖<br />`E-R Model` `設計文件`|dustfan
|9/6|(閃電加開)前端自動化測試？先從玩這個開始「1 to 50」（[遊戲點我](http://zzzscore.com/1to50/en/)）,[Code點我](https://gist.github.com/slamdon/16e18b2e9f126d4ae8888156c5761d31)<br />`javascript` `jQuery` `自動化測試` |Don|
|9/13|[HTML＆CSS基礎入門](https://docs.google.com/presentation/d/1Yffom9lkYoLzlYQTtiEOjt2wBlj1JxjIPtGlOkNawRc/edit?usp=sharing)<br />`html` `css` `weblayout`|Clover&Mido
|9/13|[你有 Promise Style 嗎？](https://docs.google.com/presentation/d/1eTeloBSxHa5a9RJat9YjZ2wzQ5kpKXg13EoAWNlmc1E/edit?usp=sharing)<br /> `javascript` `ansync`| LeeBoy
|9/13|[Vue+Firebase開發甲冰拉小幫手](https://paper.dropbox.com/doc/vuefirebase-llAprao9Pux25O2gOlCVU)<br />`vue` `firebase`|Yuly|
|9/19|(閃電加開)[信息安全基礎之密碼技術](https://web.devdon.com/archives/47)|Don
|9/21|[:sparkles:金玉其外敗絮其中:sparkles:的background-image](https://hackmd.io/IYDgxgLAzA7ADCAtAMwKYCMBsiLOAE0XQEZxEAmEEAVjHxmvzGTCA===)<br>[- Code pen Demo -](https://codepen.io/irisLife/pen/XaGgqP?editors=1100)<br />`background-image` `css` `background`|Iris
|9/21|[backend 入門篇-什麼是API?](https://docs.google.com/presentation/d/1m_mWuAew0ODY_19wLanVxYkvayZcTdeZTCMOdeZjsfU/edit#slide=id.p)<br />`api`|PenguinRun|
|9/21|(閃電加開)[vue基本招: 用vue改dom節點](https://www.slideshare.net/dwatow/vuedom)<br />`vue` `javascript`|Chris|
|9/21|(閃電加開)GA、GTM、Pixel 網站追縱<br />`seo` `ga` `gtm`|俊堯|
|9/26|(閃電加開)電話撥號安全性<br />`資訊安全` `音頻分析`|Don|
|9/28|Javascript 十個單字<br />^(Chris、Curt、Iris、Jim、Andy、Teng)^|Howard|
|9/28|webpack由淺入淺 **戰 Alex**<br />`webpack`|curt|
|10/5|[Chrome Developer Tools](https://docs.google.com/presentation/d/1Uog2VUbZcScrbsoEkzdnZc14-2IfNY0uGa_yiLI87AM/edit?usp=sharing)|LeeBoy|
|10/5|聊聊MVC/MVVM/MVP|oliver
|10/5|Solving sudoku with OpenCV|es
|10/12|好的 PM 帶你上天堂|Howard
|10/12|學會寫程式，便有了參加 Party 的門票（競賽資訊分享）|Don|
|10/19|[CSS動起來 @keysframe ft. animation](https://hackmd.io/p/r1N8yPQTZ#/)|Jim|
|10/19|[Web Server 與 Client 的愛情限時批](https://hackmd.io/p/SJ6A8WBTZ#/)|Wanting|
|10/26|[來吧！比大小！我比你大，他比我大](https://hackmd.io/p/SknAza0aZ#/) `css權重` |Iris
|10/26|[淺談oauth - 以Facebook為例](https://docs.google.com/presentation/d/1CaTstbU87PZx6xwuhfNHSVL_6oZ9BMIQpwa9E5oIUrc/edit#slide=id.p)|PenguinRun
|10/26|排版-變動寬度＆固定寬度 [codePen](https://codepen.io/TengLee/pen/OxKvxV?editors=1100)|Teng|
|11/2|用SVG畫個圖吧|Yuly
|11/2|[就決定是你了!!「vue的computed和watch」](https://dwatow.github.io/2017/08-28-vue-computed-watch/)|Chris
|11/2|[學習如何學習](https://hackmd.io/p/BkgW2n0aW#/) –大腦使用說明書[^HowToL][^HowToL2] -Part 1|Clover
|11/9|[用演算法教你整理櫃子](https://hackmd.io/p/SkW8Gp00Z#/)|Teng|
|11/9|[接API的五種方式](https://codepen.io/JimHu1492/pen/JOPNYX)|Jim|
|11/9|[淺談crawler-以7-11店家資料為例](https://medium.com/@justinlee_78563/%E9%97%9C%E6%96%BCcrawler-%E4%BB%A57-11%E5%BA%97%E5%AE%B6%E8%B3%87%E6%96%99%E7%82%BA%E4%BE%8B-f5893e4707a5)|PenguinRun|
|11/16|[幫助自己也關懷別人的class整理法！](https://drive.google.com/file/d/1AY_PhiHByGXXAqRd_bJqIvMOxBvoz2P1/view?usp=sharing)|Mido|
|11/16|[弄蛇術](https://zh.wikipedia.org/wiki/%E5%BC%84%E8%9B%87%E8%A1%93)3 的[七種hello world的](https://hackmd.io/p/BkQJopcTW#/)<br /> ^放心不會講^[^這個^](https://darkblack02.blogspot.tw/2016/01/python-call-c-api-by-boost.html) |Chris|
|11/16|[正規表示式](https://hackmd.io/p/Sy1cFLd1M#/6)|Andy|
|11/23|[Docker for Beginner.](https://docs.google.com/presentation/d/1H8f5mn0sXqQkM14JPwVHZWRg0yE--w3Adv8QaiVMHhk/edit#slide=id.p)|curt|
|11/23|[[導讀] 七種浪費電的方式](https://hackmd.io/p/HkOVxGjib#/)|Chris|
|11/23|[Bootstrap其實沒這麼可怕！BS學習心得分享！](https://codepen.io/midorin6497/pen/VrxQev?editors=1100)|Mido|
|11/23|Functional Programming Intro|Alex
|11/30|內向心理學|kingman|
|11/30|[淺談NodeJS - 打造你的第一個API](https://docs.google.com/presentation/d/1lRNVPHHB60HPzyIrqz5qu8arvMKRmD3CFvJzbsD3fzc/edit#slide=id.p)|PenguinRun|
|11/30| [Arrow Functions](https://hackmd.io/p/rkfl4W_gM#/) | X |
|11/30|[[動手做] Chrome extension 小試](https://docs.google.com/presentation/d/1m1YmkXMC2P1FBXNgGskQKqvlWUkPoWvKMVakUOwEfbU/edit#slide=id.g32d4d8315f_0_45)|Howard|
|12/7|[_.Lodash_______.Lodash](https://hackmd.io/p/HyODH-UWz#/)|Jim|
|12/7|[Clean Code-有意義的命名](https://hackmd.io/p/ryXeMiMZG#/)| Kevin|
|12/7|[有雷想知道] 為什麼function不能用？ hoisting問題分享 |Kyle|
|12/7|[如何把程式碼寫好](https://www.slideshare.net/dwatow/ss-44330931)(function篇)|Chris|
|12/14|[Vue Wrapper Component](https://hackmd.io/p/ByKeLdoZG#/) |Arel|
|12/14|[令人喜愛的~~松子~~Vue的一生](https://hackmd.io/BwQwzAxhLBC0YwFNhwCwFYBMa6wCYCMcSGARgGbAYAMISIhSQA==?view)<br>^Vue的生命週期^|Teng|
|12/14|[CSS好好玩，一起來畫圖吧！](https://codepen.io/midorin6497/pen/YYzmvQ)|Mido|
|12/14|[this 在arrow function裡有什麼不同](https://hackmd.io/p/B1Gg828-M#/)|Teng|
|12/21|[用 aglio 製作 RESTful API 文件](https://dwatow.github.io/2017/11-14-api-blueprint-note/)|Chris|
|12/21|淺談API doc - 後端角度| PenguinRun|
|12/21|[連豆芽都學得會的Promise](https://hackmd.io/KwFgjA7AZgHBAMBaApsZzEngNjIgRgCbJSYhQDGF2ATBRAIb41A=?both)| Jim|
|12/21|[生活中的演算法大小事](https://hackmd.io/p/ByBn3eSWG#/)|Andy|
|12/28|[後段第一哩路 - 使用Firebase(~~火雞~~ 火基)串接資料庫](https://hackmd.io/p/SyiuTCTMG#/)|Kyle|
|12/28|淺談資料庫正規化|Ken|
|12/28|洧杰的「前端工程師養成手冊」反饋|Howard||
|12/28|Functional Programming 101：高階函数|LeeBoy|

# 補充資料們!!

[^cssflex]: [深入理解css3中的flex-grow、flex-shrink、flex-basis](http://zhoon.github.io/css3/2014/08/23/flex.html)

[^cssSelector]: [使用CSS3 :nth-child(n) 選取器教學 - CSS可樂](https://goo.gl/Qard5O)

[^cssSelectorNote]: [CSS Selector筆記](https://hackmd.io/IwBghgHAJgzArANgLQGMBMAjESAsURpIRo45ICcAZjORuQnHCnAKZA==)

[^image-rendering-mdn]: [image-rendering | MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/image-rendering)

[^bubbling&capturing]: [Bubbling and capturing](https://javascript.info/bubbling-and-capturing)

[^masonry]: [瀑布流套件:masonry](https://masonry.desandro.com/)

[^waterflow-note]: [瀑布流筆記](https://hackmd.io/KwQwjAJsAMBsIFoAcBmCYEBYBm2DsCARgEwDGBsYeSApodMZktMEA===)

[^自適應Box]: [纯 CSS 实现自适应正方形](https://idiotwu.me/css-responsive-square/)

[^clearfix]: [詳說清除浮動與BFC](http://kayosite.com/remove-floating-style-in-detail.html)
[^BFC-MDN]: [BFC指南 \| MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)

[^cssgrid-note]: [cssgrid 小筆記](https://hackmd.io/s/Sk0ErPNt-)

[^gift-codepen]: [:gift:的codepen](https://codepen.io/JimHu1492/pen/yoROKq?editors=1100)

[^cssgrid-demo1]: [cssgrid demo1](https://codepen.io/midorin6497/pen/brQWee)

[^cssgrid-demo2]: [cssgrid demo2](https://codepen.io/midorin6497/pen/Mvzvaw)

[^cssgrid-game]: [css grid 種田小遊戲](http://cssgridgarden.com/)

[^HowToL]: [大腦喜歡這樣學](http://www.books.com.tw/products/0010764994)

[^HowToL2]: [Learning How to Learn](https://www.coursera.org/learn/ruhe-xuexi)