在 Alpha Camp 擔任實習助教的一個好處，是可以參加大約每兩週舉辦一次的 Meetup — 不僅可以聽到他人分享獨特的專案和技術，有時也能給自己一些機會去挑戰和探索自己未知的領域。
一個多月前，公佈了隔一次的主題是「製作 Google Chome 套件」，且開放有興趣的與會者自己摸索和製作，最後再與大家分享。當時內心馬上冒出了兩種心情和想法：
老實說，內心雀躍的心情馬上壓過所有的情緒，因此我很快就做出了決定。但馬上面臨的是主題挑選 — 在向朋友們收集可能的需求，但沒有找到合適的主題後，我開始思考著：「我在開發網路應用程式的過程中，是什麼行為不時吃掉了我很多時間？」 這可能就是我的需求，也可能會是其他開發著的需求 — 一個 Side Proeject 因此誕生。
前端切版時，我自己常見的需求有兩個：「依照設計規格產生並放置 Placeholder 圖片」及「找尋可以免費使用或商用的圖片置入」，這兩個需求都不是會花費我很多時間的行為，但每次在找尋網站、連結、閱讀使用文件的一點小時間，累積起來卻會顯得很沒有效率，因此這次的 Chrome 套件分為三大功能，並分別透過以下幾個使用者故事來簡述功能：
產生 Placeholder 圖片
免費圖片快搜器
產生圖片尺寸連結報表
Chrome 套件是設計用來增加瀏覽器使用體驗的軟體，而當初套件系統被設計時有一個很重要的目標：開發 Chrome 套件應該要像開發網頁一樣簡單 — 因此現在可以透過熟悉的 HTML、CSS、JavaScript 來開發這些套件。
在製作套件以前，需要先認識一個套件的組成元素和架構，大致包含了：
一個 JSON 格式的檔案 — 名為 manifest.json — 包含了套件資訊：例如版本、名稱、介紹、提供的檔案，及相關權限的設定。
建立 Manifest 檔案
在 manifest.json 檔案中做基本設定
👉manifest_version: 目前 manifest 檔案使用的格式版本（目前官方最新版為 2）
👉version: 此套件的版本資訊（初次完成的版本可設定為 1）
👉name: 套件名稱
👉description: 套件簡短介紹
👉icons: 提供套件將使用到的各尺寸圖像檔
👉permission: 設定套件會使用到的 Chrome API 和網頁權限
（此處有程式碼無法顯示，請由文末連結回到原文查看，謝謝）
在背景中監聽「瀏覽器的事件」，並在監聽到特定的事件後，執行相對應的行為和程序 — 類似 Controller 的角色 — 事件類型很多種，例如：套件第一次被安裝完成、開啟或關閉了分頁等。
設定 Background Scripts
在 manifest.json 檔案中設定 background 屬性和其相關設定
👉scripts: 設定使用哪個背景腳本檔案（在此用 background.js）
👉persistent: 設定背景腳本是否持續運行（官方建議 false: 根據事件開啟和關閉）
（此處有程式碼無法顯示，請由文末連結回到原文查看，謝謝）
在 manifest 做好設定後，就能在 background.js 檔案中，初始化並設定事件監聽器，以此專案為例子，在檔案中監聽兩個事件：
（此處有程式碼無法顯示，請由文末連結回到原文查看，謝謝）
套件的使用者介面有許多種選擇，常見的 UI 包含：
設定 Browser Action
在 manifest.json 檔案中設定 browser_action 屬性和其相關設定
👉default_popup: 設定 Popup 的 HTML 檔案
👉default_icon: 設各尺寸的 icon 圖片檔案（Chrome 會自動採用最適合的尺寸）
（此處有程式碼無法顯示，請由文末連結回到原文查看，謝謝）
可以設定右鍵選單項目，並附加某項目被點擊的事件監聽器。
設定 Context Menus
在 manifest.json 檔案中
👉permission 屬性裡要求取得 context menus 的使用權限
👉icons 屬性設定顯示在選單項目上的 16x16 圖檔
（此處有程式碼無法顯示，請由文末連結回到原文查看，謝謝）
在專案 background.js 檔案中，透過 chrome.contextMenus 上：
create()方法建立一個新的選單項目onClicked 事件監聽任意選單項目被點擊🧙♂️有趣的 ContextType
👉創建選單項目時，可在「contexts」屬性指定只在特定情況下點擊右鍵才顯示該清單項目
👉在此設定「image」代表只有在圖片上點擊右鍵才符合條件
👉其他可以設定的條件：「link 連結、video 影片、all 所有條件」等
（此處有程式碼無法顯示，請由文末連結回到原文查看，謝謝）
Content Scripts 是一個 JavaScript 檔案，其藉由讀取和操作網頁中的 DOM（Document Object Model）來與該網頁互動，也能監聽該網頁的事件。兩點注意事項：
設定 Content Scripts 在 manifest.json 檔案中 👉permission 屬性裡要求取得 activeTab 權限：套件被觸發時，獲取當下頁面的權限 👉設定 content_scripts 屬性和其相關設定： - js：要使用和執行的 JavaScript 檔案 - matches：指定在到訪特定連結的頁面才執行 content scripts❗️在此先不設定 CSS 檔案原因：只想在監聽到使用者「想產生圖片連結報表（點擊右鍵選單列 ShowImageURL）」時，才套用給報表用的 CSS 檔案。詳請見 background.js
在專案中 content.js 檔案裡，我們發揮了 content script 的功能：
開發 Chrome 套件有趣之處在於，套件除了能透過 Web API 和網頁互動外，也可以透過 Chrome APIs 與 Chrome 瀏覽器有不同目的性的互動 — 這讓套件能發揮的空間更廣、更多元：
📍在前面專案的介紹中，其實已經用到不少 Chrome API
📍其他有趣或實用的 Chrome API
❗️注意事項
👉API 就像是應用程式的介面，透過 API 能接處和使用到應用程式的功能
👉因此在套件中每使用一個 API，就需要先在 manifest 檔案裡請求使用該 API 的權限
👉在 manifest.json 中請求權限：於 permissions 屬性上的陣列中加入 API 名稱 🤠成功載入套件：
在開發網路應用程式時，很常會使用 DevTools 來 Debug 程式碼，在開發 Chrome 套件時，一樣也能使用 DevTools 來檢查 Popup— 只是開啟的位置和方式不同：
就像在開發網路應用程式時，須注意跨瀏覽器支援的狀況，使用 Chome APIs 和其相關功能、屬性等時，也需要留意「Chrome 瀏覽器版本」支援的情況 — 可以透過官方文件查閱：
完成作品後，如果有興趣開放給大家免費或付費使用，可以上架到「Chrome Web Store 線上應用程式商店」 — 由於每個套件性質和內容不同，建議參考官方提供的👉上架流程指南。在此分享這次上架大致走過的流程：
1. 前往 Chrome Developer Dashboard
選擇「Add new item」開始新增一個套件
2. 上傳套件
上傳的格式只接受 ZIP 檔案，須先行將套件資料夾壓縮
3. 填寫和提供上架商店所需資訊
提供上架商店所需的套件介紹、Icon、宣傳圖、類型、上架國家、收費與否、語言等資訊。若為公司所上架的官方套件，也需要在「Websites」欄位提供公司的網站或相關連結以供驗證。
4. 帳戶驗證：一次性費用
初次上架需付一筆一次性的註冊（驗證帳戶）費用：
👉 一次性費用：5 美金
👉 付費後可上架：20 個套件
5. 上架成功*
資料填妥且付款成功後，回到 Chrome Developer Dashboard 就能確認套件是否已經上架成功：
套件成功上架商店了👉點我進商店
Google 在 2018 年 10 月宣布將提高 Chrome Web Store 套件的審查標準，因此套件在正式被發佈到商店前，可能需要經過一系列的審查— 詳細報導請參考這篇。簡單來說，一切都回到設計套件的初衷：提升使用者在使用 Chrome 瀏覽器的體驗 — 包含提升透明度與使用者擁有的控制。為加快審查速度，兩個我覺得文章中有提到很重要的點：
若是開發更大型的專案，則建議要額外參考 Content Policies 及 Page Performance 相關文件。
😃本次上架等待的審查時間約 3 天 GitHub 程式碼與介紹 👇
Chrome 線上應用程式商店 👇
在正式開發套件以前，先參考了許多教學影片，包含 Udemy 上的免費課程和 YouTube 實作影片等，跟著教學影片實作的確能在短時間內製作出簡單的成品。然而，畢竟每個人的套件功能和複雜性都不同，且這套系統有特殊的架構關係，因此在開發自己的專案初期，時常碰壁：「不知道預期的功能該怎麼做，甚至在成功找到方法並運用後，卻沒有任何效果或反應 🤨」只好停下腳步，深呼吸，喝著咖啡，思考著問題的癥結點：
「太快地想做出成品，但對於套件的架構和基本運作方式卻還不夠了解」
了解到問題根本的原因後，我一方面重新打開 Chrome 開發者文件，從套件的介紹、架構和功能的說明重新認識起，也透過文件中的影片，去理解運作和設計的原理；另一方面，也和另一位實習助教 Danny 討論開發的心得，彼此交換遇到的問題和解決方式 — 讓我在接下來的開發更有方向和頭緒。
在後續的開發路上，陸陸續續還是有遇到不少實作上問題，但好在自己開始對於官方文件和查找資料的方向有多一些的瞭解，且腦中有比較清楚的架構，因此在解決問題上就更有效率了。
說到面對問題，即使在 Meetup 分享完作品後，還是發現了一些預期外的 Bug，例如：「每當瀏覽的網站上有出現表格時，都自動帶有如下圖 URL 報表的樣式！」當時還一度以為自己專案看太久，眼睛花了 🤩 硬是睡了一覺，確定還在，才打開程式碼和官方文件來 Debug 😂
從學期一到現在剛好五個月的時間，Alpha Camp 學期三的課程也告一個段落了，時間真的很快。一路從當初對於網頁開發懵懵懂懂，學期二學習前端開發，到👇學期三學習後端和更深入的知識與概念，很開心自己走到了這一步：
學期三的大主題 👉Node.js / Express / MongoDB / MySQL / Git / 網站佈署/ 同步與非同步學期三的實作 👉餐廳清單 / Todo List / 幹畫產生器 / 家庭記帳本（MongoDB|MySQL）/ 縮網址學期三額外實作 Side Project 👉查詢天氣：認識同步與非同步 / Chrome 套件 / 台灣天氣概況：串接中央氣象局 API
我必須承認，在這個學期的學習過程中，內心充滿著很複雜的情緒，許多片段就像在製作 Chrome 套件的過程 — 面對學習和轉職道路上的困難和挑戰，有興奮感、成就感、想要追求更好的使命，但也不時面對挫折。有一兩次正一邊優化前端切版來達到自己的要求時，眼匡卻不知道為何冒著淚水。為了不想被咖啡店員工發現，還趕緊把淚水吸回去 （開玩笑的 😅）
或許不是所有身旁的親戚和朋友都能理解這感受，即使他們試著想要關心，也很難訴說出這些心情，但很開心在 AC 遇到了同儕，彼此打氣、激勵、切磋，遇到挑戰和難題，就停下腳步，思考方向，拍拍彼此的肩膀，再出發 — 抱著「相信自己終究能做到的信念」繼續往前邁進！學期四 I’m coming
好文轉自MikeHuang–[筆記]從零開始製作chrome套件到上架商店
如果你喜歡他的文章，歡迎回到他的Medium【麥克的半路出家筆記】看更多
疫情之下，原本實體活動全都改成線上，活動分享全都在網路上很容易錯過，這邊整理了幾個跟數位教學相關的活動資訊給大家參考，分享順序為活動時間⏰ 1. Google Workspace技術整合術 Google Workspace for Education (原 G Suite 教育版) 能透過 Gmail、Google Drive、Google Calender、Google Meet 和 Classroom 等通訊與協作應用程式創造輕鬆與順暢的學習環境，並促進協同合作以提升數位學習與教學成效，而且還會為學校資料提供雲端安全性防護…
實體的教室變成一格一格的畫面，原本吵雜的下課時間也變成掛斷通話的系統聲。原本在班級中的歸屬感慢慢消失了，久而久之，孩子的對於學習，不再有群體的感覺，只是孤軍一人學習、複習、考試，甚至是畢業典禮都少了一份臨場感。因此，今天要和大家介紹一款現在在教育界還很少被提到的軟體-Gather。 Gather 如果你還不知道Gather，或是直覺的把Gather與虛擬會議室連結在一起，不妨先看看Gather裡的特色： 介面是像素型RPG 每個人自由創建一個角色 上下左右輕易控制角色 走道其他角色旁邊能互相討論 小遊戲battle 光是這五點特色，就足以推派它成為遠距教學的工具，除了打造不同空間的地圖外，最特別的是Gahter打造前所未有的臨場感，人與人之間只有靠近到一定距離，才能聽到彼此說話聲音，而相對應的，離開後聲音就會漸漸聽不到，就連白噪音的設計也是如此，非常的逼真。 不知道老師們會不會因為搭建地圖覺得麻煩，或是看到2D介面怕學生當遊戲在玩而不考慮這款軟體，換個角度思考，藉由不同地區的老師們集思廣益，打造出最適合學生學習的環境，像是不同學科的教室、戶外自然生態區、操場、籃球場等等....都可以更貼近真實校園，而像素的介面正好提高學生的學習意願，老師們擔心學生過於沉迷時，也能用全體廣播放上課鐘聲，或是讓學生們聚集在同一區，鏡頭站起來動一動 (另外推薦Active Arcade -> 趣味運動的APP )，就像早操一樣很真實。 線上教學缺乏臨場感，Gather可以創造了讓大家「一起在一個遊戲世界」的凝聚力。縱使Google Meet、Teams 雖然也可以進行討論，但若要每堂課要穿梭在不同會議間，節奏不流暢，使用Gather可以讓學生更自由地移動，相對應的老師也可以神出鬼沒地到處「旁聽」。 教孩子用科技解決問題，如果老師們也努力著示範給孩子看，創造出獨一無二的學習空間，相信對於孩子學習的歷程中，有莫大收穫。但到底怎麼開始使用？別擔心，這次快樂學程式邀請到Gahter界的大神 阿岳，要來和大家分享Gather的6大應用技巧，限名額唷~…
HTML入門&基本觀念介紹！ 構成一個網頁，最重要的就是他的結構，而HTML就像是他的骨架，而CSS就是像是我們身體上的肌肉一般，而JS則像是人體的神經、血管般調整著我們身體、傳遞訊息，那麼HTML究竟是指哪些語法呢？ 什麼是HTML? HTML全文又稱為HyperText Markup language ，也就是所謂的超文本標記語言，是網頁構成的基本要素，換言之，網頁就是由一堆html所構成，透過瀏覽器，顯示文字、圖片、以及其他相關我們可以在網頁上看見的基本元素。而對於剛學程式的朋友來說，HTML有以下幾個重點： HTML的基本架構： HTML的基本觀念與優點1.容易學習-HTML的文檔製作非常簡單易懂﹐功能強大之餘還支持不同格式的文件鑲入。2.製作門檻低-HTML是文本﹐它需要瀏覽器的解釋。只要你學會了HTML﹐你就可以直接在Windows的記事本或寫字版上進行製作和編輯﹐當然你也可以用WPS來編寫﹐只要注意在存檔的時候用.htm或.html來做檔名就可以了3.有利於搜尋引擎理解你的內容，透過HTML所構成的頁面被稱作所謂的”靜態頁面”﹐而Google爬蟲會優先收錄靜態網頁﹐所以HTML對於Google來說就像是鯊魚聞到血腥味一樣﹐有利於吸引Google爬蟲。4.加快瀏覽速度-因為靜態網頁無需連接數據庫﹐因此比打開動態網頁的速度較快﹐對於消費者體驗來說有所幫助。5.網站更安全-因為HTML頁面不會受Asp相關漏洞所影響。 HTML的缺點與限制 1.太簡單﹐不能適應現在越來越發達的網路世界和應用的需要﹐比如手機﹑PDA﹑信息家電等都不能直接顯示HTML2.太龐大﹐由於HTML代碼不規范﹑臃腫﹐瀏覽器需要足夠智能和龐大才能夠正確顯示HTML。顯然在你的PDA上裝一個IE6是不可能的。空間不夠﹐運算也跟不上3.數據與表現混雜。這樣你的頁面要改變顯示﹐就必須重新制作HTML。對不同的網路設備顯示同樣的數據都需要制作不同的HTML4.只能對文本進行排版﹐而且HTML樣式使用標準文本標識﹐不能創建一些特殊效果 所以我該如何學習HTML? 有什麼比較快的方法嗎？ 答案是沒有的﹐學習程式語言就像是學習廚藝一樣﹐只有透過不停的嘗試﹑嘗試和嘗試才能讓自己有所成長﹐並且慢慢強大。過程中你會一直遇上困難和失敗﹐但你在不斷解決困難的過程中能夠不斷發掘新的知識﹐從失敗中發才能不停的成長。無論你是學習那一種程式語言﹐都需要經歷困難和失敗才能讓自己更加強大﹐正所謂:不經一番寒徹骨，怎得梅花撲鼻香呢?對吧﹐我們能做的不是要找捷徑﹐而是透過不同的媒介和平台去不斷學習﹐那麼下面快樂學程式會為大家介紹一些很棒的程式教學網站﹐讓大家可以不斷提升自己。 1.w3schools.com- 語法練習的好地方這個網站是目前全球訪問量最大的網頁開發教程網站﹐網站裡有多種程式語言的教學﹐而且每種程式語言由淺到深的解說﹐從語言的介紹到不同的功能和方法都會分章節說明。所以無論你是從零開始學的白紙﹐還是已經在學習但遇到困難的新手都可以在這個網站上找到相關資訊﹐是個非常不錯的網站。那麼網址我們當然要雙手奉上﹐請慢用https://www.w3schools.com/ 2.CodeAcademy- 免費的教學網站這是全球其中一個最受歡迎的免費coding教學網站﹐已經有超過2400萬人透過這個網站學習到了如何去coding。這個網站是非常適合新手入門的同學去學習的﹐網站會一步一步仔細的教導而且還有實作﹐所以學習起來非常的快速! 3.StackOverflow- 實際案例與疑難雜症的解決處 這個網站比較適合一些已經有在嘗試動手實作的同學﹐當你在coding的時候遇上困難了﹐那麼你可以在這個可以解決超過80種程式語言問題的網站上找到答案﹐讓你的coding之路更加順暢。 如果你覺得爬網站麻煩又費時，不妨直接點擊快樂學程式的網頁前端課程，老師直接手把手帶你入門HTML ！完整的基礎入門課程省下你獨自摸索花費的時間！ 課程上架Udemy ! 準備一個輕鬆的週末，只要一天的時間，帶你建置靜態網頁。從實作中打開靜態網頁的大門，讓你的研究之路不是只有自己，有我們跟你一起努力！課程中你可以瞭解網站建置的世界觀與網站版型掌握HTML5的使用方式掌握 CSS3的使用方式使用Bootstrap處理前端UI框架現在開始上課！如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。快樂學程式
什麼是HTML? HTML全名是HyperText Markup Language，是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，是編寫網頁的基本語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。 HTML介紹與基本語法整理 不管你是小時候從撰寫無名小站為了要修改你的樣式，而開始瞭解HTML和CSS為何物，或是長大因為介面設計或前端工程開始踏入網頁的世界。HTML和CSS對於網站的重要性經過多年依然歷久不衰。在本篇會對HTML進行基礎的介紹並幫你整理出基本語法提供你在寫網頁時的快速參考！ 編寫基本的HTML： 先讓大家看一下一個基本的HTML文件格式為： <HTML> <HEAD> <TITLE>網頁主題</TITLE> <Meta> </HEAD> <BODY>…
PHP是什麼?3分鐘PHP基本介紹！ 大家安安﹐快樂學程式這一次要跟大家分享PHP這種程式語言。希望幫助對於PHP有興趣的新手們可以透過我們的文章對這種語言有初步認識。一如以往﹐我們會分享以下幾項有關PHP的知識。 PHP是什麼? PHP語言的全名是(PHP: Hypertext Preprocessor)，和ASP、JSP等都是動態網頁開發語言，不過，PHP擁有跨平台的能力，無論是在Linux(最適合)、Unix、 Windows都可以執行運作，不像微軟 的ASP只能在Windows平台上執行，而且PHP是免費的，並可結合多種資料庫伺服器，如:MySQL、PostgreSQL、dBase、mSQL、Informix、ODBC、Oracle等。 PHP語言是伺服器端(Server)執行的網頁，不像一般HTML網頁，只要單機下開啟檔案就可以檢視網頁，PHP必須先在伺服器端執行完後，再將結果傳至使用者端(Client)的瀏覽器中檢視結果，所以必須使用網站伺 服器，且伺服器要支援PHP。 如何學好PHP? 要學好PHP，要有目的，要有一個想寫的東西，寫個學校網站，寫個校友系統，寫個簡單的新聞區或相簿...等，都可以，盡可能的和工作和生活結合，利用程式來簡化繁瑣的人工步驟，或者提昇工作效率，有目標，才會有動力，才會有想法。 學PHP不需要背，背不完的，只要懂就好了。像函數就不用背，常用的打久了你就背起來了，不常用的，等到要用時，知道去哪裡找就好。換言之，函數懂越多，功力越高強。 程式碼可以複製貼上，但一定要知道為什麼要這麼寫，不要傻傻的照著打，可以的話，自己打一遍最好，最上乘就是可以說出每一行程式碼的作用和前因後果。或者，故意打錯，看看會怎樣。錯誤訊息看久了，功力也就提昇了。 PHP程式碼執行方式 透過 Web Server 方式:例如利用 Apache…
Sildenafil citrate oral jelly Combiné avec les données de départs 2, on leur a demandé de type 5 de tadalafil…