最近重新以 Vue3 來建構自己的網站，雖然內容很簡單，也只有幾個頁面而已，但算是第一次從頭跑到尾。在以 VueJs 3 開發，並且部屬到 Github pages 上的過程中，才知道原來使用框架之後的部屬和以往傳統的部署，有很大的不同。原因是 VueJs 透過 Router 的設定，和 webpack 的編譯打包，有許多的細節設定要做，加上部屬到 Github pages 上，最上層的資料夾並不是路徑源頭，所以有時候出現問題會難找出原因(對我而言啦)。

部屬完成後，網頁跑得還蠻順的，每個連結也都很聽話的顯示，唯有在瀏覽器上頭的連結網址框裡按下 enter 鍵時，噹～噹～出現 404 ，也就是找不到這一頁，怎麼回事？

記得初學 JavaScript 的時候，曾經和 42 的同學討論過學程式遇到的一些「抽象」的名詞概念，因為抽象所以難懂，我總是想要以類比的方式來找出一個合理且容易記住的解釋。這位同學本科是唸哲學（發現哲學轉職工程師的還真不少），他的第一個實習就找到了法國頗有名的電商公司。我們討論著 this 但是似乎怎麼解釋也無法清楚的描繪出來，只聽他重複著說著 this 就是 this…。

有些事真的需要「時間」來幫助我們理解，就像有些新認識的朋友，真的沒有相處過不會知道對方的個性，this 也是，寫 code 一陣子或許就會慢慢的、更清晰的去描繪 this 是怎麼回事。

「this」就像英文原意，是個代名詞，但更貼切的說 this 比較像是地方(空間)代名詞，以程式的面向來說也可以說是「物件」的代名詞，或是「執行環境」、「創建環境」或是「呼叫環境」？到底是哪一個，就要看用的是傳統或箭頭函式的寫法，或是…「呼叫」的方式？

我們常會說 this 到底是「指向」誰？那個誰應該就是包圍 this 的那個環境吧？我試著想像，這好像是我們說身體上的「指頭」，如果說手的指頭，那就是手臂；如果說是腳的指頭，就表示腿，這樣說當然只是一個比喻，但小鳥腦的我只能先這樣記著。

這是在網路上無意發現的邏輯思維訓練課程，看時所做的筆記。

條件關係推理

充分條件：

如果 A，則一定 B；如果非 A，不一定非 B。

A 是導致 B 的原因，只要 A 出現 B 就一定會出現。這時 A 就是 B 的充分條件。只要滿足 A，B 就一定會出現。A 和 B 之監視一個必然的因果關係
但是如果這時是非 A，也就是 A 如果沒有出現，也不一定非 B，意思是說我們沒有辦法透過非 A 推理出非 B。道理也就是說產生 B 的原因可能會很多，不見得只有 A，可能還有其他。如果沒有 A 也還有其他的原因，而導致 B 的產生。因此當 A 不存在的時候我們不可以賭定說 B 也不會存在，因為產生 B 的原因有很多，A 只是一個原因，所以 A 是 B 的充分條件。

這是在網路上無意發現的邏輯思維訓練課程，看時所做的筆記。

類比只是邏輯思維的一部分，後續的邏輯推理似乎常會出現在徵探或推理小說的情節中，以前常看日本的推理小說，但總是隨著書中小說重要人物的推演，自己心裡雖然會猜測，但也大多是憑感覺，其實應該自己也有條理的推理，才真的能夠訓練自己的推理和邏輯能力啊！

矛盾關係推理

矛盾關係推理就是利用矛盾關係的形式，來找出正確的答案。兩者之間像是 A 命題和 B 命題不能同時成立，例如像是小狗睡著了 VS 小狗沒睡著，互相矛盾，怎可能小狗睡著，同時又沒睡著？
以上兩個是「對立」的存在，也就不可能同時存在兩者。所以會是「一真一假」或是「一對一錯」。

這是在網路上無意發現的邏輯思維訓練課程，看時所做的筆記。

一直以為自己的邏輯不好，其實這句話本身就很不合邏輯，因為我們怎麼知道我們的邏輯「是不好的」？如何去判定邏輯不好？邏輯是什麼？透過這幾支影片的理解、推敲，才知道原來邏輯是可以訓練的，也因為可以訓練，所以「以為自己的邏輯不好」也不是一定的或永久的，還是可以透過方法，把自己覺得不夠好的方式學習進步。

的確從學程式以來，發現自己想事情的方是有些改變，好像比較可以輕易的去推敲或理解一些事。

以下為筆記內容：

邏輯

邏輯是可以訓練的。
智商包含：記憶力、類比能力、想像力。
智商卓越的人表現在：記憶力、學習能力、分析能力。

有時候在設計網站的時候，如果多一些輕量小技巧，就可以增加網站的質感，此篇記錄有可能會用到的一些 CSS 小技巧，來幫忙點綴網頁。

網頁上文字選取時的反白顏色

一般網頁上的文字在選取時預設是淺藍色的底與白色的字，我們可已透過 CSS 的選擇器來設定和網站風格相搭配的顏色。如果要針對某個樣式來設定，也是可以的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

::selection {
background: #76b852;
color: #fff;
}
::-moz-selection {
background: #76b852;
color: #fff;
}
img::selection {
background: transparent;
}
img::-moz-selection {
background: transparent;
}

以此記錄，將來會陸續增加…。

RWD (responsive web design）中文為「響應式設計」簡單來說就是網頁會依照我們使用的載具(電腦、平版、手機)的螢幕大小與螢幕的像素密度不同，而顯示指定的圖片圖像。
而針對 RWD 中的網頁圖像的處理，我們稱為是響應式圖片(responsive image)，使用 JS 或是 CSS 都可以操控要顯示的圖像，但使用具有語義性的 HTML 方法與屬性，可以讓瀏覽器原生就支援這個功能。

如果只是把一張圖片以<img>包起來，如<img src="paris.png">，那麼在手機或是在桌上型電腦上瀏覽時都會出現「同一張」paris.png的圖片。使用同意張圖片，卻要給不同的載據顯示，可能造成的問題會是在大螢幕瀏覽這張圖時解析度可能不夠、在手機上瀏覽這張圖時，會因為過大而顯示很慢。這時依照載具的條件不同，來載入相對應的圖像就變得很重要。

HTML 提供了多個方法與屬性，讓我們可以在「響應式設計」上更彈性，以下是幾個常用的屬性。

title: HTML figure 標籤的用法
date: 2020-11-02 00:42:24
categories: ‘HTML’
tags: [‘HTML’]
—#

通常我們在處理許多條列式的內容時，常會使用 List 的方式去排列文字或圖形，但如果每一個 <li> 的內容太過繁瑣，就會顯的有些零散，尤其是含有圖片或是影片的內容列表，會包含圖片的標題、圖說、作者介紹等等零碎資訊，這個時候 <figure> 便可派上用場。

<figure> 是 HTML5 增加的語義化標籤。figure 的英文解釋可以是數字、人物、圖形甚至輪廓，但在 HTML 裡，個人偏向解釋為「含有資訊的區塊輪廓」，就像我們在美術館觀賞一幅畫作，旁邊總會有一個解說牌，說明畫作的標題、作者、尺寸、年份與媒材，我們可以把畫作和解說牌當成是一組的 figure，而解說牌的標題當成是 <figure> 的子元素 <figcaption> ，這也很像我們在閱讀雜誌時，圖片總是會有圖說，來更詳細的解說圖片。

網站載入的速度不只會影響使用者體驗，也會影響 SEO，因為網頁載入的速度也是 Google 搜尋排序的一個指標，進而影響排名，也因為載入速度同時影響網站的排名和使用者體驗，所以更不該忽視。

但怎麼知道我們的網站效能？這個有一個小小燈塔圖形的 Chrome 外掛工具，就是一個超好用的網站速度優化工具：SEO Lighthouse 它可以幫上我們！

Lighthouse 是什麼？有什麼用途？

燈塔工具(Lighthouse)是 Google Chrome 的擴充應用程式，是一個網路開發者(Web developer)的工具，主要功能是針對網頁的性能做詳細與全面的分析(包含網頁載入速度)，並產生分析報告，報告上會有詳細的分析結果與如何優化改善的建議，以及每個頁面的各種數據和指標的表現。

有時候在學習的時候，最怕就是遇到一個問題越解越混淆的狀況，原本只是一個小小的問題，卻越發不可收拾，努力了幾個小時決定上網問人，好險都能在好心人的幫助下，釐清自己的一些觀念。

今天試著接 API ，對於教學範例的 API 都是結構較於單純的 JSON ，自己上網找到想接的巴黎開放數據，資料結構卻很複雜，包了好幾層物件、陣列，在一一抓出來後在迴圈的使用上又有點生疏，然後在休息的時候找到一個範例，剛好講到處理 JSON 的一些方法，然後就照著範例丟到瀏覽器的開發工具，然後無限迴圈就開始了。

先來釐清幾件事：
MDN JSON.parse() 方法把會把一個 JSON 字串轉換成 JavaScript 的數值或是物件。

MDN JSON.stringify() 方法將一個 JavaScript 物件或值轉換為 JSON 字串