About Me - Front-End Side

25
About me 林林林 YAN TING LIN

Transcript of About Me - Front-End Side

Page 1: About Me - Front-End Side

About me林彥廷

YAN TING LIN

Page 2: About Me - Front-End Side

為什麼主題是 About me因為我剛來很菜,不知道要講什麼主題?

不知道聽眾背景如何,該選什麼主題?絕對不會講錯、題材一定新鮮,也不怕跑錯棚。

Page 3: About Me - Front-End Side

亻二 宣告• The License• 以下投影片,部分文字、一張圖片從維基百科引用。• 其餘本人所製圖片、文字、程式碼可不經本人同意自由散佈、修改、引用、販售。• 所有再製原則必須不妨害社會秩序及善良風俗。• 再製所衍生其他的法律責任請自行承受。

Page 4: About Me - Front-End Side

我的背景• 目前是一個很忙、不務正業的 CS 碩士生 ( 後學士 ) 。• 曾經在台灣最大軟體上市公司打打工。• 曾經在台灣最大部落格當實習小弟。• 曾經在廣告公司身兼 Full Stack 開發者、硬體維修專家、系統重灌專家、唯一程式猿、香蕉愛好者、報表產生器… 族繁不及備載。• 現在遊戲公司專職作菜鳥前端。

Page 5: About Me - Front-End Side

一些可以找到我的地方• Githubhttps://github.com/duraraxbaccano• Facebookhttps://www.facebook.com/accelerater• Mediumhttps://medium.com/@duraraxbaccano• PIXNEThttp://leonxlin.pixnet.net/blog

Microsoft Office 使用者
Page 6: About Me - Front-End Side

以學術風格來講 Introduction YAN TING LIN is a post-baccalaureate student at computer science of University of Taipei and belongs to Network & Video Image Processing Laboratory. His research interests include computer network, web technologies, data visualization, web commerce, and probability theory. 我知道得我盡力回答,不知道有空會幫你找資料。

Page 7: About Me - Front-End Side

Recent Work• 接續在 Introduction 後就是 Related Work ,因為主題是 About

me ,所以就是 Recent Work 。• 這裏只會提到我自己寫得 Open Source 專案、最近私人時間在幹嘛、一些想法、學術分享,不會有任何商業機密。• 當初原本想分享 Git ,可是 Git 對很多人是常識 ; 想分享自己

TypeScript 的心得 太忙來不及做投影片 ; D3.js 對很多前端的人來說跟 Git 一樣是常識 ; WebGL ? Node ? Browser Plugins ? IDE Tools ? 難道以後來程式人社群只能講數學嗎 ? ( 因為數學對大部份人來說都是天書 ) XD

Page 8: About Me - Front-End Side

第一部分 文獻區我是唯一一個逃出來向你報信的人 << 聖經 約伯記 >>

Page 9: About Me - Front-End Side

在提到我最近看得一堆紙之前關鍵字 : IEEE 、 Internet of Things 、 Smart Life 、 802.11 、 WiFi 、Machine to Machine 、 Wireless Protocol 、 Energy Efficiency 、 Spatial Reuse 、 Clear Channel Assessment 、 Carrier Sense Threshold 、CSMA / CA 、 Temporal Efficiency 、 Spectrum Sharing 、 Multiple Antennas …看起來跟克林貢語有九成像?沒關係,如果大家有興趣,我再回來講就是了,這裏其實不是很重要。

Page 10: About Me - Front-End Side

先推薦跟資訊無關的兩本好書

Page 11: About Me - Front-End Side

再推薦一本 Y Combinator 也推薦的神書• 應該有人開始懷疑我是書商派來打廣告的。• 不是啦,只是我喜歡看好書而已。• 馬上講點跟資訊有關的事情吧。

Page 12: About Me - Front-End Side

如果真得對我剛剛提得有一絲興趣與好奇

我的臉書連結

Page 13: About Me - Front-End Side

第二部分 前端區“每 18至 24 個月,前端技術的難度會增加一倍以上。”

- 前端的摩爾定律 @ COSCUP 2015

Page 14: About Me - Front-End Side

第一次寫 SVG 就上手篇 – 向量• Scalable Vector Graphics 的縮寫• 基於 XML 語法 的 向量圖形 檔案格式,主要應用於平面領域。•網頁標準發展早 (W3C since 1999) ,已經普及很久的技術。• 有名的開源專案 : Raphael.js , D3.js•除錯簡單、用瀏覽器的開發者工具即可。• SVG 1.1 specification 功能 :基本形狀、路徑、文字、字型、遮罩、填色、漸層、互動性、濾鏡、程式控制、動畫 (平移、旋轉、縮放 ) 、超連結、 Metadata(索引、搜尋 )

Page 15: About Me - Front-End Side

範例一

http://localhost:8001/#/6

Page 16: About Me - Front-End Side

範例二 - 以 D3.js 為例• 本機投影片連結 ( 這部分整理好才會公開 ):• http://localhost:8001/#/6• D3.js 開發流程 :

1. 準備資料2. 選擇區域3. 決定 資料 跟 視覺的對映關係 (長度、顏色、分佈 )4. 其他細節、補足需求

Page 17: About Me - Front-End Side

第一次寫 Canvas 就上手篇 – 點陣• 原生系統 2D API 的瀏覽器移植。• 以像素為單位在螢幕上產生畫面、繪畫的低階 API 。•除了平面之外,搭配 WebGL API 可以應用在 3D 的領域。• 大部份網頁遊戲首選,因為是低階 API ,只提供必要的繪圖功能。•功能實作、除錯較為複雜。要注意繪圖尺寸的問題。

Page 18: About Me - Front-End Side

範例三 – 一些碎形

程式碼 我的 Github:https://github.com/duraraxbaccano/gistDemo:http://duraraxbaccano.github.io/gist/triangle/index.html

Page 19: About Me - Front-End Side

What is next ?• SVG vs Canvas • Vector vs Raster• SVG 與 Canvas:如何選擇• https://msdn.microsoft.com/zh-tw/library/gg193983(v=vs.85).aspx• WebGL ?• WebGL 、 Canvas 或 SVG ?選擇正確的 API• https://msdn.microsoft.com/zh-tw/library/dn265058(v=vs.85).aspx

Page 20: About Me - Front-End Side

最近發現一些好用的工具• Morbi lorem a nisl adipiscing dignissim metus dictumst. Etiam massa

vehicula class eu neque in. Porta velit. Nulla proin nonummy ante parturient fringilla nunc sed. Purus vitae a auctor vitae. Nulla ipsum dis urna platea praesent volutpat at ligula eni tempus faucibus duis nascetur torquent iaculis integer. Augue dolor. Ipsum proin pretium aliquam. Magna lacus. Risus massa proin luctus nostra velit eu. Porta dolor. Netus metus condimentum sagittis orci semper. Netus proin hymenaeos etiam ut tincidunt id. Nulla vitae. Donec velit nisi et sollicitudin iaculis cras velit morbi. Porta class quam lacinia gravida nullam. Neque nulla. Augue purus luctus et praesent.

Page 22: About Me - Front-End Side

第三部分 自幹區天空為什麼是藍色的 ? -瑞利散射

天空是所有男人的夢想 – 我

Page 23: About Me - Front-End Side

DIY QuadCopter using Ardupilot Framework

Page 24: About Me - Front-End Side

第四部分 數學區

- Srinivasa Ramanujan

Page 25: About Me - Front-End Side

Q & A