緣起 一直以來不管是寫 react 或是 vue 的 side project ，都是用官網基本的 cli 來建置專案，幾乎沒有機會自己利用 webpack 來建立開發環境，剛好也接觸了一陣子的 typescript 跟 react，剛好找個機會來從零開始實作一趟並做個紀錄。 Start with config init npm, git, gitignore. install and set the things below. babel: What is babel? npm install @babel/cli @babel/core @babel/preset-env @babel/preset-react 在與 package.json 同層的資料夾下建立 .babelrc // .babelrc { "presets": [ "@babel/env", "@babel/preset-react" ] } webpack: What is webpack? npm install webpack webpack-cli webpack-dev-server npm install babel-loader css-loader style-loader source-map-loader npm install html-webpack-plugin mini-css-extract-plugin webpack-node-externals 在與 package.

緣起 7/2 時剛好講了一場 Nuxt 的 AppWorks School 線上分享會，準備了兩三天的內容，只用來線上分享一個小時太可惜了，一定要寫下來記錄一下才對。 但 7/1 才進新公司， TypeScript、react、redux 和一堆沒用過的 library ，加上 8 月決定要搬家所以要來賣一些不想帶走的家具，實在是有點過忙。趁著這個月的分享會到來(剛好分享 react hook)，趕稿一下。 Get Start 這次入門講座以完成一個小專案為目標，並由四個部分組成: Create project npx 安裝: npx create-nuxt-app <project-name>，安裝選項參考: 官網安裝說明: Nuxt install Directory Structure: 會在接下來的段落一一說明。 安裝完的目錄參考: Vuetify (Optional): Vue 的 UI 框架，但與 Nuxt 沒有必需的相依關係。 To be continue — Directory Structure: Layout 不同的 page 可以有不同的頁面布局，Side bar 的有無，Key Visaul 的呈現等等。 要建立一個新的 layout ，只需要在 layout 資料夾中，建立一個 .vue 檔案，並且在 <template> tag 裡面設計自己喜歡的樣板，最後只要注意記得放入 <nuxt /> 來預留空間給每個 page 的內容就完成了。

好吃的荷包蛋 早餐是 buffet，其實菜色種類很一般，可是半熟的荷包蛋好吃到值得為他開一個段落。 目標: 阿 leeeeee 山 走去火車站等公車的路上買了撒隆巴斯，前一天的長時間步行看起來是給雙腿雙腳造成了一些負擔，貼上後的確有舒緩了緊緊的痠痛感。 才下了火車站的天橋，就目送了半小時一班的台灣好行離開候車站，如果在旅館時少拉一條屎就不會錯過了。 在公車站等車時，一位帶著墨鏡的大叔靠了過來 「你們要去哪啊?」 「阿里山。」 「喔喔十分鐘後有一班車會開喔。」 「嗯嗯我們就是在等那班。」 「阿怎麼沒想說要去奮起湖?」 「其實我們去哪都可以拉，因為都沒去過」 Step 1. 了解需求、卸下戒心 ☑ 「阿你們這樣搭公車兩百多塊，搭計程車也兩百多塊，要不要考慮啊？」 「計程車也兩百多塊?」 「黑阿，還包車咧又舒服!現在馬上發車不用等十分鐘!也不用跟公車一樣在那邊繞站牌!」 Step 2. 列出優勢 ☑ 「好啊。」 Step 3. 成交 ☑ 也當過業務員的我，覺得眼前這個司機大哥，比以前所見到的一般司機，更懂得銷售自己，我想是接遊客的老江湖了吧。當然也可以說我們是第一次來到這的遊客特別好騙 XD，因為我們的確在他迅雷不及掩耳的推銷之下，忘記了連假的台灣好行是有五折的。但就事後的搭車體驗來說，真的是快又舒適，司機大哥還會沿路介紹一些嘉義故事。 次日-真 ● 目標: 奮 77777777 湖 我甚至不知道奮起湖沒有湖，什麼功課都沒做直接出來玩，感覺真是年輕。 奮起湖車庫，我超喜歡這類型的造景模型 撒隆巴斯與我 帥挺挺的我 老街中正在傳飼料費的咪咪 離開老街往下走發現的帆布，但其實底下也有一間賣甜甜圈的店，而且排隊人潮更長… 星空小屋內部與臭臉女主人 被長裙遮住的撒隆巴斯與妹子 其實階梯水池滿可愛的，可是拍起來可愛的變成是我們兩個 不知道十年後回來看這張照片還會不會覺得有聲音 驟雨前最後幾分藍天 原本以為奮起湖是來看景的，進來後發現逛老街的成分比較多，加上滿長的林間步道，其實整體來說是一段走路的行程。有這樣的機會可以不看螢幕而是呼吸芬多精，其實對都市人來說真的滿好的。 我們隨意在老街中挑了一間遠近馳名的奮起湖便當，雖然有多了幾分古早味，但著實沒有特別吸引我。 漫步、放空、閒晃，如此愜意，夫復何求? 樂極生悲 如果說這兩天有個情緒難以用文字形容，我想就是在這兩個小時內發生的事情了。 為了預防下山人潮過多，我們特意在買完滿滿兩手的伴手禮後，提前半小時去等台灣好行(因為公車路線會經過預定地民宿，所以沒有考慮搭火車)。在詢問過奮起湖火車的站務人員要去哪裡等台灣好行後，我們便按照他說地往第一停車場出發。 14:35 p.m. 抵達第一停車場，看見寫著「候車亭」的小亭子，旁邊也有一張看板寫著，還沒有人在裡面排隊，我們便輕鬆的在亭子底下坐著開始等車。 距離表定公車抵達時間: 35 分鐘 14:40 p.m. 來了一家六口，跟我們一起坐在涼亭下，我們心裡想:終於有同伴了，這麼擁擠的景點如果沒有人要跟我們一起搭車下山也太誇張了。 距離表定公車抵達時間: 25 分鐘 14:45 p.

起心動念 前一次出去玩過夜是 2019 年 10 月了，這次趁著連假+離職前剩下的特休(後來發現並沒有剩下，因此還被扣了一堆薪水ㄏㄏ)，決定出一趟門。東部跟嘉義這兩者間最後選擇了有地陪當導遊的嘉義。 訂民宿 這次不免俗的還是從打開 shopback 開始，選了當時現金回饋最高的 booking.com 開始找雙人房，我們計畫第一天 6/26 租機車在市區繞繞，第二天搭公車或著台灣好行去阿里山，最後一天回到車站附近買紀念品然後回家。大概計畫好路線後，分別選擇了一晚 $3,480 的香緹時尚旅館，跟一晚 $3,280 的這里民宿，然後靠著 shopback 分別拿到了 $208 跟 $196 的現金回饋。 首日-歡迎光臨嘉(ㄉ一 ˋ)義(ㄩ ˋ) 中午十二點半，搭了兩個多小時的台鐵終於從台北抵達嘉義，第一件事就是在火車站附近租一輛機車，但在接下來的二十分鐘內，我們不斷地看見三個令人感到絕望的字。 「沒-車-了 。」 我們甚至不必開口，嘉義火車站附近十幾間的租車行，每間門口都貼著這三個字。雖然是大白天但世界彷彿沒了光亮，34 度以上的氣溫，破表的紫外線，數個相距數公里的景點，我們甚至得走 0.8 公里去吃原本計畫吃的午餐。 很想說是計畫趕不上變化，但事實上是自己沒做好計畫…就這樣開始了我們第一天的旅程。 苦行…人? 苦行僧必須忍受常人認為是痛苦的事情，是印度盛行的修練方式，原本很想這樣形容在烈日下行走數公里的我們，但想到我們是出來玩而不是來修練的，而且租不到機車其實也是自己的鍋，還是摸摸鼻子享受苦行之旅吧。 問完最後一間在後站的租車行後我們決定用雙腿走出回憶，於是把第一個目標地設在源興御香屋，第二站劉里長火雞肉飯，看好 google map 之後就踏上了滾燙的嘉義之路。 沙漠綠洲 雖然當時沒有拿出手機看看天氣，但那異常悶熱的空氣和豔陽剛照的柏油路旁，我想體感溫度可能也是有 36 度左右，走了兩百公尺真的不行了，看見旁邊有一間「有冷氣」的彩券行，想都沒想就衝進去拿錢做公益。樂捐幾百塊之後感覺生命值有稍微回復一些，便繼續前進。 又走了兩百公尺再度感到生命垂危。看見路旁的三色線商店，我的雙腿像是踩在電扶梯上一樣，全自動的把我往 7-11 裡面送，不愧是全國最大的連鎖便利商店，總是知道客人需要的是什麼，這麼涼的冷氣，不消費一下不好意思。 計畫趕不上…盛夏 御香屋? 我看是御香夜市吧?! 這個擁擠的排隊人潮是發生了什麼事? 五十個以上的人在 30 幾度的熱天底下排飲料店，是買飲料送 covid-19 的疫苗嗎?排隊的地方甚至不是騎樓底下，旁邊也沒有噴水霧的設備。在這個外國進來需要居家隔離十四天的時期，我想排隊的人大概都是台灣人了吧，韌性真的可見一斑。 我倆真的無法，炎日的摧殘讓我們只想找個地方喝點冰涼的東西坐著休息，喝舒服了再繼續前進午餐。沒喝到飲料，而且這裡距離劉里長雞肉飯還有五百公尺……不行了…真的不行了… 滿血復活 出來玩幹嘛 在家吹冷氣不是很好嗎 太陽好熱腳好痠 只是想吃午餐還要再走好遠 我在這裡幹嘛 下午也要這麼累嗎 想吃一個東西有這麼困難? 嘉義什麼鬼地方 假日來受苦受難的嗎 好熱好累，只剩下怨天尤人的念頭，我要生氣了，不走了，吃品田牧場。 ☑ 冷氣

緣起 想在網頁中做一個形狀特殊一點的按鈕，圓的方的太單調不符需求，剛好久聞 svg 這個元件，感覺上可以使用這個能夠自由畫出圖案的「向量圖形」來解決我的問題。 Get Start 要在 html 中使用 svg，就必須使用 <svg> 這個 tag，並且在裡面放入要畫的圖形。 由於這次只是做個入門，因此就只會做以下幾種標籤的基礎用法: 線段: <line> 圓形/橢圓形: <ellipse> 矩形: <rect> 文字: <text> 群組: <g> 多邊形: <polygon> 路徑: <path> 首先先在 html 中建立一個寬度跟高度 500px，並有著 5px 粗線黑框的 svg 區塊。 <svg width="500" height="500" style="border: 5px solid #000000;"></svg> 線段(line) 基礎用法: <line x1="起點 x 座標" y1="起點 y 座標" x2="終點 x 座標" y2="終點 y 座標"></line> 範例(使用了 stroke 來設定筆畫顏色): <svg width="500" height="500" style="border: 5px solid #000000;"> <line x1="0" y1="50" x2="500" y2="50" stroke="gray"></line> </svg> 接著為了後面的練習，我們用 50px 的間隔給這張圖多加上幾條線。

0610 出發 214 搭公車去松山機場比捷運更快 託運完睏死 松山機場超小只有一條檢查手提行李的走道，出關到登機口大概就三分鐘路程 廁所看出去的機場景倒是很開闊 平穩順順起飛 後座嬰兒超吵，想睡沒得睡，日航的空姐笑容極巨 飛機餐很好吃 巴黎深淵應該叫鯊魚滅巴黎，演員花式送頭 降落棒己咧鳩大力 早起吃義式早餐，很期待，但很普，只有主餐的炒蛋水準在線，也可能是我吃不慣歐洲食物吧。服務員把帳單遞上來發現要一萬多日幣，有夠傻眼 出發東京車站，從四季的地下道開始走，左彎右拐五十幾次，上下電扶梯二十幾次