--- title: Talk slides template tags: Templates, Talk description: View the slide with "Slide Mode". --- # Wendy in Seattle 2020 ![](https://i.imgur.com/4OcnkSi.jpg) <!-- Put the link to this slide here so people can follow --> <!-- slide: https://hackmd.io/p/template-Talk-slide --> # :pushpin: - [ ] 派克市場 新鮮海鮮, 花等,除此之外,派克市場不僅是美食節目的取景之地,也是美國電影西雅圖夜未眠(Sleepless in Seattle)和美國影集Charlie’s Work的拍攝地點。 ![](https://i.imgur.com/GfT3Zow.png) ![](https://i.imgur.com/QUXpdyU.jpg) ![](https://i.imgur.com/QmiVER3.jpg) ![](https://i.imgur.com/OVvExbH.jpg) - [ ] 口香糖牆 1999年,西雅圖了解這面牆宛如加州聖比斯保郡知名的泡泡糖巷,決定任由他去,同年市場管理高層宣布口香糖牆正式成為「旅遊景點」。詹森說︰「自此,人們湧入這裡結婚,留下他們的口香糖,甚至用口香糖做小小的藝術創作,或傳達愛與和平的訊息。」在影星珍妮佛.安妮絲頓與亞倫.艾克哈特主演的好萊塢電影「愛上妳愛上我」中,這面牆甚至是場景之一。 ![](https://i.imgur.com/rHC3YNx.jpg) - [ ] 第一間星巴克 ![](https://i.imgur.com/87aI45R.jpg) - [ ] Amazon Go 第一間無人商店, 由零售業龍頭Amazon建立 ![](https://i.imgur.com/4zv6DgT.jpg) - [ ] 華盛頓大學 ![](https://i.imgur.com/IUIyjwi.png) ![](https://i.imgur.com/PSTGgr8.jpg) ![](https://i.imgur.com/oSRvTiv.png) - [ ] Space Needle 太空針塔是美國西北太平洋地區的一座主要地標。 因1962年世界博覽會在西雅图举办而兴建,建成初期每日有接近20,000人次乘電梯登塔参观,該屆博覽會共吸引约230萬參觀者 ![](https://i.imgur.com/zVHTZKK.jpg) - [ ] 凱瑞公園 ![](https://i.imgur.com/m2o36np.png) Kerry Park能拍到太空針塔和不眠的高樓大廈,遠方還有海邊港口,派克市場對面的摩天輪,視野很好。唯一的缺點是,西雅圖晚上班機很多,拍照飛機不時飛入觀景窗,讓畫面有一條飛機弧線QQ - [ ] Rainier山 **** 瑋昀: 我沒去過,但看起來很美 **** - [ ] 微軟總公司 **** 瑋昀: 不是必去, Wendy有興趣可以帶你走走瑋昀上班的地方 **** - [ ] Fremont Troll Fremont是西雅圖北邊的一個小城市,位於華盛頓湖的北岸。這個城市有典雅的吊橋、美麗河道也有怪異前衛的雕像作品,讓人充滿驚喜。還有巨魔雕像也在這。 ![](https://i.imgur.com/30IQN6k.png) ![](https://i.imgur.com/CR0LaWC.png) - [ ] # :meat_on_bone: - [ ]Pike Place Chowder - 美西最好喝巧達湯 # :calendar: 1/31 23:40 台灣起飛 2/1美國時間抵達 2/1 調時差, 來微軟走走閒晃閒晃一天就過了 2/2 Fremont Troll + UW 2/2 晚上 Amazon go 2/3 白天 PIKE Market + Gum Wall 2/3 晚上 Kerry Park 2/4 白天 OUTLET 2/4 晚上 PIKE Market 2/5 白天 藝術中心 2/5 晚上 茹絲魁 + Target 2/6 白天 2/6 晚上 Space Needle 2/7 白天 (看班機) 2/7 晚上 搭飛機 2/7 飛回台灣 2/8台灣時間抵達 <!-- - - Front-end developer - VSCode :heart: - I use tabs. :cat: --- ### 70% of our users are developers. Developers :heart: GitHub. --- {%youtube E8Nj7RwXf0s %} --- ### Usage flow --- ```graphviz digraph { compound=true rankdir=RL graph [ fontname="Source Sans Pro", fontsize=20 ]; node [ fontname="Source Sans Pro", fontsize=18]; edge [ fontname="Source Sans Pro", fontsize=12 ]; subgraph core { c [label="Hackmd-it \ncore"] [shape=box] } c -> sync [ltail=session lhead=session] subgraph cluster1 { concentrate=true a [label="Text source\nGithub, Gitlab, ..."] [shape=box] b [label="HackMD Editor"] [shape=box] sync [label="sync" shape=plaintext ] b -> sync [dir="both"] sync -> a [dir="both"] label="An edit session" } } ``` --- ### Architecture of extension --- ![](https://i.imgur.com/ij69tPh.png) --- ## Content script - Bind with each page - Manipulate DOM - Add event listeners - Isolated JavaScript environment - It doesn't break things --- # :fork_and_knife: --- <style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style> - <code class="orange">onMessage('event')</code>: Register event listener - <code class="blue">sendMessage('event')</code>: Trigger event --- # :bulb: --- - Dead simple API - Only cares about application logic --- ```typescript import * as Channeru from 'channeru' // setup channel in different page environment, once const channel = Channeru.create() ``` --- ```typescript // in background script const fakeLogin = async () => true channel.answer('isLogin', async () => { return await fakeLogin() }) ``` <br> ```typescript // in inject script const isLogin = await channel.callBackground('isLogin') console.log(isLogin) //-> true ``` --- # :100: :muscle: :tada: --- ### Wrap up - Cross envornment commnication - A small library to solve messaging pain - TypeScript Rocks :tada: --- ### Thank you! :sheep: You can find me on - GitHub - Twitter - or email me -->