Barry YU

進行中的專案:

初學開發者碰到文字排版總是非常頭疼 ,

這關係到RWD , 看起來是不是乾淨 .簡潔 , 舒服 , 大小適當

通常都習慣用 px 作為尺寸設定 . 可是當網頁面及文字非常多的時候, 需要微調會非常麻煩. 尺寸比例不是改一個數值就好. 要整體都看起來有平衡感.

所以我會推薦使用 rem .

因為rem 和 % 很像都是相對參照Root 去改變大小 . 當文字微調時只要改變Root 就可以了 .

名稱為 : Root + em => 1 em 當父(上一層)沒有設定大小的預設是16px

文字排版

文字大小通常建議設定在0.8 rem .

行距間隔 建議設定在 1 rem

--

--

看似簡單 …..其實不容易.

但按照下面的步驟去暸解. 一切煩惱都沒了

最容易犯的錯誤就是~~路徑 :非檔案路徑的

C:\1 \2 \ 3.png — →ERRR

C: /1 /2 /3.png — → OK

Thanks give !!!

Now in the index.html.en file you'll want to put the following markup

index.html 的位置去根據每個檔案的插入圖片後的路徑

<span>src="/check_mark.png"</span>
<img src="/check_mark.png" />
<span>I'm green because I'm referenced from the ROOT directory</span>
</p>

<p>
<span>src="subfolder/check_mark.png"</span>
<img src="subfolder/check_mark.png" />
<span>I'm yellow because I'm referenced from the child of this current directory</span>
</p>

<p>
<span>src="/subfolder/check_mark.png"</span>
<img src="/subfolder/check_mark.png" />
<span>I'm orange because I'm referenced from the child of the ROOT directory</span>
</p>

<p>
<span>src="../subfolder/check_mark.png"</span>
<img src="../subfolder/check_mark.png" />
<span>I'm purple because I'm referenced from the parent of this current directory</span>
</p>

<p>
<span>src="subfolder/subfolder/check_mark.png"</span>
<img src="subfolder/subfolder/check_mark.png" />
<span>I'm [broken] because there is no subfolder two children down from this current directory</span>
</p>

<p>
<span>src="/subfolder/subfolder/check_mark.png"</span>
<img src="/subfolder/subfolder/check_mark.png" />
<span>I'm purple because I'm referenced two children down from the ROOT directory</span>
</p>

--

--

將下列對應使用陣列 Index 去比對位置

用 TS 去達成 : 陣列 1 =物件 1= true

單純Javascript 寫法 : 字串比較

Javascrip 和 DOM 的方式

進階 Typerscript 寫法

step 1. 參數設定type類型 :特殊用法 Array<string>

function checkInventory(inventory : Arrar<srring> , item: string) { }

--

--

介紹 JS和TS差別 :

JS:輕量 , 撰寫程式語言

TS: 重視類型物件的定位確認 , 用編譯器寫語法, 提供適當的版本.

類型 _自動分類 :

可以避免類別或物件(Class & Object)的性質與方法(Property & Method)格式錯誤。

--

--

React _ 學習歷程

React.js

組件排版的方式. 頁面看起來容易讀簡潔.

如果讓不懂程式的也能讀懂內容.

Wonderful !!

2021年展望前端開發趨勢:
Javascript 有轉變為 Typescript 趨勢
react.js 依然是美國核心技術前端語言Redux

特色:
採用funcation 組件

優點:
更簡潔-編碼環境

https://github.com/DoungBarry/facebook-clone-react.jsgitHub
https://cool-remote.firebaseapp.com
臉書留言(已完成)

https://github.com/DoungBarry/amazon_challenage-BarryYu.git
亞馬遜購物車仿造(未完成)

https://www.loom.com/share/5e8b53a29c0d4478877723cf1fe5f7ea
錄製 react map() 迴圈:用數字轉換陣列 -有本人camara

https://www.loom.com/share/3b741c3dfbf34101af55b063ab20b8bd
錄製 : Redux function component .

https://www.loom.com/share/f870d10e560a4875a185cf12f3054d8e
錄製: currency-format

https://www.loom.com/share/6a7ab31da69c43038ef19a982ed5df84
錄製:套件 : react-router-dom 頁面路由使用方式

https://www.loom.com/share/a328b81c23ca42a6bac90a45a140b2d8
錄製:SASS預設處理器 :變數

--

--