其實學程式到現在，時不時都會聽到別人提到Framework、Library，
即便知道他中文的意思，但實際上各自代表著什麼？又有什麼差異？其實我根本莫宰羊ＸＤ
看到這張圖更是黑人問號？？？？
直到我深入(?)調查一番，才發現沒那麼困難啦！
接下來就讓我們一起來看看Framework(框架)和Library(函式庫)這兩個神奇的辭彙是什麼意思吧！
為了方便大家理解，我會用一個比較生活化的例子來向大家解釋～
用app來理解框架與函式庫不知道大家有沒有聽過Nüli這個app
(
有興趣可以點這看看，但這不是業配XD)
這是一個內含多種主題訓練課表的app
在這裡Nüli
這個app，就
等於程式世界的Framework裡面各式各樣的
主題訓練課表，就
等於程式世界的LibraryNüli
裡面包含著各式訓練課表，
意思也就是Library被包含在Framework裡面Framework和Library的呼叫關係再來我們用APP使用方式來看看呼叫的關係
當我們
使用這個app的時候，必須依照上面的使用方式來操作=>
所以你要聽Framework的決定(也就是Framework呼叫你)但是我們
可以自行決定今天要做什麼種類的重訓課表=>
所以Library要聽你的決定(也就是你呼叫Library)現在請大家再回過頭來看看最上面那張不知道是想表達什麼的圖～
是不是清楚多了呢？
如果要拿程式中常見的框架和函式庫來說的話！
Vue就是一種Framework(框架)，jQuery就是一種Library(函式庫)~文科少女寫程式 發表在 痞客邦 留言(0) 人氣(377)
這次的完成品在這裡
https://codepen.io/pinkymini/pen/bGpRrPj
你為何會選擇這個專案？
延續著課程內容，需要訓練sass，就進行了這個作業專案。
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(507)
因為自己對JavaScript還有很多還沒釐清的地方，
所以這次特別找了主題補強自己對Javascript的了解，
也嘗試自己查資料來內化成自己比較能理解的內容。
這次的第一個主題就來看看「this」這個東西。
(關於this想要挖深入一點的話，會非常深及困難，
所以這次我只嘗試敘述我理解的內容。)先講結論現在的this是哪位，取決於怎麼呼叫函式文科少女寫程式 發表在 痞客邦 留言(0) 人氣(58)
這次電商切版挑戰選擇的是中等難度的Umart
完成品在這裡
https://codepen.io/pinkymini/pen/BaKQEZM
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(1,607)
其實學期2-3的課程已經在上個禮拜就結束了
但因為有幾份作業有點卡關，所以有延誤到整體的時間
到了這週才總算把所有東西全部完成！
以我最愛的重訓來比喻我每週的心情的話，大概是以下這樣XD
如果有在重訓的人，應該可以體會我有多煎熬~
第一週 easy peasy的暖身，動作練習
第二週 前面空槓練習一組，直接正式蹲35kg五組
第三週 恢復空槓蹲三組
第四週 直接正式蹲50kg五組
這次直接來分享
為什麼讓我第四週感覺像在蹲50kg深蹲的其中一份作業吧！
「短網址產生器」
和考題的初次見面
老實說我第一眼看到這個考題時，我整個傻眼了！
因為我就是那種平常很愛用短網址產生器的人，
但我只會用，不會做啊！
愣了幾秒後，我開始思考這個東西的邏輯是什麼！
就這樣斷斷續續想了兩天！！！
沒錯！是兩天！
但結論是「沒想法」
腦子真的呈現空白狀態...
而且在這兩天我還經歷了下面這個過程...
雖然這份不是作業，是考題，所以無法觀摩其他同學的作業。
前幾天好像也還沒有人繳交...
不過小聰明的我就想到用關鍵字加github查詢，
果然被我查到了一兩位學長繳交的作業！
開心的我，想說打開來看，我就秒知道是什麼轉換邏輯了。
結果看了之後，換來的結果是我看不懂...
不管三七二十一直接寫下去
由於有分作業有批改限制的時間，所以我就先放下這個考題，
先處理其他的份作業和考題了。
就這樣拖到了禮拜四才總算正式開始...
如果還要搞懂學長寫的內容的話，我覺得太花時間了。
所以最後決定
直接先以自己想得到的內容寫下去吧！
按照慣例地做好前面安裝express、mongoose這些前置流程，
再把前端版面設定好。
我先從最簡單的部分開始做，就是把長網址改成縮成5個亂數的的短網址的部分。
這部分我參考前幾週產生密碼的那個內容下去修改成我要的5個亂數。
到這裡為止都不難，也順利可以產出我要的連結形式。
不過問題又來了！我還是沒有想通為什麼短連結可以被判定要連到哪？
我現在不就只有改外部的名字嗎？
其實現在回想起來，還是不知道當時的自己到底哪裡出了問題XD
就真的無法思考出要從哪確認這個短網址等於哪個原網址。
也許是我把背後的世界觀想得太龐大，我想成在茫茫網路中，
我要怎麼去改人家已經設定好的網址。
突然間地茅塞頓開
在思考到底短網址要怎麼確認是哪個原網址的過程中，
我還是有不斷地去觀摩之前學長寫的內容，
但不懂就真的還是不懂。
不過就在週四當天晚上，我突然想通了一些東西。
我想到我都已經把短網址和原網址存在mongodb上了
那就在裡面確認不就可以了嗎？
當天已經想到太晚就去休息了，
隔天早上馬上用我想的方式實作，
過程不算太順利，主要是卡在我還是不熟悉
find()、map()這些方法。
我用我原先想的方式去做，但是總是做不出我要的結果，
中間又不斷地去查詢理解這些陣列相關的操作方式，
不斷地console.log，直到最後才一步步做出我要的結果。
(真的console.log好多次...)
雖然這一天已經禮拜五了，
但是因為我想的方法真的成功可以轉到我要的原網址，
我就天真地以為後面的事情都可以這麼順利，
(我甚至還發臉書動態記錄這成功的一刻...)
禮拜五晚上就先處理其他份作業地收尾部分，
心想禮拜六應該就可以順利完成。
(因為我在嘗試方式是否可行地時候，
寫的程式碼參數取名都隨便取，
也想要加強整個流程地練習，
就又另外開了一份從頭寫起。)
無限鬼打牆的開始
禮拜六我滿心期待可以花三個小時完成所有重寫的過程，
結果卻莫名地在最後一刻卡關...
途中我有改了前端版面，也有改了一些參數名稱，
每改一個部分，基本上都還會在測試一次是否有改壞，
但是我卻忘記最重要的一部分，就是網址還能不能連到原網址。
就這樣到了最後一刻，我才發現我把我寫的東西搞壞了...
而且完全不知道是哪個步驟後才產生問題...
反覆地檢查都還是一樣的狀況，也開始思考是否有其他解法，
但還是一樣沒有解決問題，可是又覺得一定可以靠自己排除這些問題，
所以遲遲沒有到lighthouse詢問助教。
重複console.log檢查後，歸納出這幾個問題點。
1. 用findOne找的資料一直出現未定義
2. 使用短網址，後面params會接著長網址
於是就開始從這兩個問題點下去分析到底哪裡出錯。
這個鬼打牆的狀況，一直持續著。
想不透到底哪裡出問題的我突然想到用之前舊的版本再試試看是否正常，
得到的結果是舊版本沒有出現問題，
於是我就開始對照我新版寫的程式碼跟舊版有沒有不一樣，
但我發現短網址轉原網址的部分並沒有不一樣，
只是改了部分參數名稱，不至於會壞掉...
我甚至又重寫了一次(不過很多重複的地方我就直接複製貼上調整了)
重寫的這一天已經到了禮拜天...
可是即使重寫，歸納出的那兩個問題點還是沒有排除...
重見光明
禮拜天的晚上雖然已經抽絲剝繭，
也上網查資料，又重新去觀摩學長作業，
但還是沒有找出解決問題的方式...
眼看再這樣下去不行，最後還是上lighthouse提問了。
不過也還是一邊想辦法解決手上的問題，
我又打開舊的那份來測試功能，
最後發現我居然不能手動輸入www.開頭的網址，
才發現原來input欄位的類型我設定成URL了~
為了怕有些人不知道要輸入https
我就把input改成text type
這就是我重現光明的一刻!!!!!!!!!!!!!
因為這麼一改，舊的版本也出現一樣的狀況了。
那一刻我才明白，因為沒有加https，
才導致網址無法正常連過去，
所以我就開始著手修改這部分，把所有沒有輸入https的網址，
都加上https。
就這樣所有短網址都可以正常轉到長網址了！！
不過調整完也已經禮拜一了...
最後插曲
在本機上功能有正常呈現所有功能，
但到heroku上，卻又無法正常轉到原網址。
不過這個部分有跟助教求救，所以很快就排除問題。
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(120)
在製作網頁時，想要有漂亮、看起來舒適的版面，
就會需要透過CSS來調整網頁版面，
這個時候就可以利用Flexbox來進行版面的排版。
這次就讓我們來了解一下什麼是Flexbox吧！Flexbox系統是什麼？Flexbox的概念像是把想要排版的東西(區塊)用一個容器(container)裝起來後，
讓這些東西(區塊)變成可以在容器的空間中調整位置的item，
再進一步地調整這些東西(區塊)的位置。
以實際呈現的畫面來看的話，就會是下面這樣。
1個容器裝著3個東西
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(739)
又完成一個階段的學習了，
這次就讓我用特製版 ORID 架構來回顧這一個月的學習狀態吧！
OBJECTIVE
現在的我雖然對於演算思維還有一些不熟悉的地方，
但是因為學習及練習，還是有不少的改變。
像是對於某些解決問題的方式，比較能直覺性的想到解決方案，
並且在實際執行後，也真的就如同自己想的方式一樣，
確實可以順利解決。
在技術驗收時，也能更快速地透過之前學的內容，下去做更多的變化。
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(152)
大家在寫程式的時候，應該都會知道先寫的東西會先執行，
先寫出來要電腦印出來的東西，也理所當然會先印出來，
但是怪了？？以下這個狀況卻不一樣！！
「hello」明明寫在最後面，卻先印出來了？？
原來這都是因為JavaScript的事件迴圈(Event Loop)機制的原因！
在看了很多資料後，才終於稍微比較了解Event Loop是什麼樣的內容，
把它擬人化理解的話，Event Loop就是決定任務執行順序的管理者，
但是為什麼需要有個管理者來管理JavaScript的任務執行順序呢？ 文科少女寫程式 發表在 痞客邦 留言(0) 人氣(107)
前陣子狂被DOM這個難搞的東西摧殘~~
這次就來聊點簡單，但卻非常基礎的HTML網頁排版必懂的CSS概念吧！這個基礎的CSS概念就是「盒子模型(Box Model)」。
如果打開過瀏覽器的開發者工具，應該有看過下面這個好幾個方格的圖。
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(492)
上禮拜開始接觸到一個JavaScript的function，
在練習的時候，也出現了一些對於function的盲點，
所以這次特別紀錄解開函式使用盲點的方式。
文科少女寫程式 發表在 痞客邦 留言(0) 人氣(283)
打工仔人森 (3)