fbpx

首先,非常感謝蝦皮的後端資深工程師 Dayo 蒞臨快樂學程式的主題小聚直播活動來和各位觀眾互動,更感謝有熱情的觀眾捧場,讓這次的直播能順利落幕。

 

現在閱讀此篇的讀者,如果不想錯過一年都不見得有一次的聯合直播活動,趕緊手刀報名 10/29 的最後一場機器學習講座👍  精彩內容不容錯過~

 

Dayo 的有趣 demo: 功能為「價格不合理之提醒」,假若價格折數過低則會跳出 “My supervisor Messenger ID” 警示

 

第一部分:重點摘要

  1. Overview 

基礎架構、manifest.json

  1. Content Script 

建立在 HTML/CSS 基礎之上, “matches” 表示瀏覽器所匹配的網域 (domain)

  1. Browser Action

default_title、default_popup 或 default_icon 等等

  1. Background Script

表面上無法看到 background script 的運作,但對於 extension 至關重要,它決定了特定指令的互動和 content script 的執行

  1. Chrome APIs

非同步寫法示範&實作範例

  1. Cross Script Communications

sendMessage、sendResponse 寫法和解釋&模擬範例

  1. Debugging

開發者模式除錯

 

Dayo 當天直播的簡報:https://docs.google.com/presentation/d/1OFXLqjVOA9FzH3Y1nVmtKIp4cHkyXBZhVV7pjoIabD0/edit#slide=id.g9d5ec28b15_0_70

 

第二部分:當天活動的 Q&A 延伸提問,大家歡迎來找找自己的提問在哪裡唷~

 

  1. 應該如何最快速、有效地在畫面上加入插件畫面呢?在 content script 上操作是可以的嗎?

Dayo 回答:就是在 Content Script 沒錯,另外請搜尋關鍵字 appendChild()

  1. 想知道 Dayo 的 debug 最高紀錄(最印象深刻的經驗)

Dayo 回答:大學時期每個期末專案,有一次全部專案時程卡在一起,讓我 36 個小時沒睡覺

  1. 會建議新手學 JS 就好了嗎? 因為 JS 能寫前端和後端,就方便性來說頗高

Dayo 回答:想要要快速掌握基礎的 fullstack 知識可以,但不要自我設限,多學多比較各語言的優劣,另外也要記得不要每個都沾一點皮毛就自滿,深度和廣度的平衡要拿捏好

  1. 想知道關於你們團隊 React 開發大概會做的事情

Dayo 回答:來面試就會知道了

  1. 在 Dayo 的團隊中的新手通常需要適應哪些問題? 有哪些是未來想當後端工程師需要知道的必備技能?

Dayo 回答:節奏快速,需要有一定獨立作業的能力,沒有獨立作業經驗有潛力也行,技能可以自己搜尋後端 skillset

  1. 可以簡單分享你的技能樹嗎? 就 Dayo 的經驗會越多語言對於應徵工作上會有多大的幫助?

Dayo 回答: 程式語言,關聯式/非關聯式資料庫,資料結構演算法,系統設計,DevOps/SRE…… 基本上工作會用到的我都不排斥學習,以上僅列出近期主力發展項目。學習程式語言這件事,在我個人經歷裡幾乎都不是我自己決定的,當然我還是有自己的偏好,我也不敢保證越多越好,深度和廣度很難拿捏,我自己也還在學習如何取得平衡,曾經有 headhunter 對我過去工作經歷換過多次程式語言提出質疑,我只能跟他說吾少也賤故能多鄙事,但絕對不是因為我選擇廣度而非深度,幫助我想在於,必須先掌握某個語言到一定深度後,才有辦法快速學會另外一個語言,我說的當然不只是語法,而是各家程式語言如何實作同一個功能,例如非同步,多工… 這在各家程式語言裡實作方式和底層原理就差很多

  1. 像是 Dayo 現在正在開發的 extension 專案大概平均都需要做多久(如果是相對大的 case)

Dayo 回答:Extension 這個 solution 當時是我想到就自己先做個 MVP 嘗試導入,約二週含測試,現在已經交給前端團隊維護

  1. 如果非本科系,又想加入你們團隊需要具備什麼能力呢

Dayo 回答:資工系基礎學科知識例如資料結構演算法,作業系統,計算機網路等等,好的心理素質,能快速解決問題,不害怕犯錯其他硬技能職缺資訊都有寫就不說了

  1. 可以請 Dayo 解釋 extension 中的同步非同步嗎,還是不太清楚

Dayo 回答:其實就跟很多在 js 裡牽涉到 IO 的非同步函式差不多的設計一樣,例如 fetch,非同步的函式都會搭配 callback, promise, async/await 使用

  1. 你在分享中有說到 storage 可以做價格設定,那如果自行設定資料庫,這樣和儲存至資料庫有什麼差別?

Dayo 回答:我不記得我有這樣說,然後我其實看不懂這個問題,這次 demo 範例 storage 是拿來存 convo list 跟 widget 在畫面上的座標,如果你是說產品價格的話,這次範例是後端一個簡單的 hardcoded response 你可以自己在 docker-compose 自行加上資料庫和後端 API 串接,而 Chrome 的 Storage 是儲存在瀏覽器(前端) 裡的

 

最後一部分:進入 Dayo 的閒聊回應部分~  用心💛如 Dayo ,每題回應觀眾歐 

 

  1. Dayo 辛苦了~ 多喝點飲料潤潤喉

Dayo’s reaction: 謝謝,希望可不可紅茶找我業配

  1. 很喜歡 dayo 的帽子 方便問哪裡買的嗎

Dayo’s reaction: Machismo

  1. 感謝 Dayo 的分享

Dayo’s reaction: 謝謝您的聆聽

  1. 很喜歡像這樣實作的分享! Dayo 會開課嗎

Dayo’s reaction: 技術交流可以,短期內倒是沒有開課的計畫,近期計畫是寫散文然後出版

  1. 不愧是蝦皮資深

Dayo’s reaction: 我也常讚嘆 ACM 選手 

  1. 喜歡今天的直播,真的很少看到講師全程分享乾貨的(難得

Dayo’s reaction: 我也不希望大家下班花時間參與技術交流活動卻聽我講一堆屁話,總之希望您有收穫

  1. Best coder 萬歲

Dayo’s reaction: 您報名參賽得獎我幫您喊這句

  1. 如果 Dayo 出來開課我衝第一

Dayo’s reaction: 我近期計畫是寫散文出版,希望您也願意衝第一

  1. Dayo 可以內推我嗎

Dayo’s reaction: 是我認識的人嗎?趕快私訊我啊

  1. 感謝讚嘆

Dayo’s reaction: 感謝我們互相,讚歎我還好:)

 

最後呼籲大家如果想收看更多精彩直播,歡迎加入下班後讀書會,每週二都會有固定直播唷!

另外,JS 新手好友歡迎加入 FB 小白社群一起討論切磋交流~ 😎

iris

iris

我是踏踏實實的程式小白🙆‍♀ 今年開始學習 JS 和 React~ 這邊專放我學習時的筆記和心得📒 如果喜歡我的文章不妨加入我一起學習💪 營造有趣學習程式大圈圈

Leave a Reply