iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

3 Like 1 留言 2008 瀏覽

鐵人賽自我挑戰組 DAY 19

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 19 篇

技術 RWD 做一個左邊固定欄寬右邊自由縮放的版型吧

大家一定常常會看到像是這樣類型的版型，左邊是 menu 的選單，而右邊則是每一則網頁內容，而當我們縮放瀏覽器時，左邊的選單區塊不會有任何變動，縮放的是右邊的網頁...

Alec ‧ 2019-09-27

2 Like 3 留言 3445 瀏覽

鐵人賽 Modern Web DAY 25

讓 TypeScript 成為你全端開發的 ACE！系列第 25 篇

技術 Day 25. 機動藍圖・類別與介面 X 終極的組合 - Ultimate Combo of Class & Interface

閱讀本篇文章前，仔細想想看試描述類別（Class）的型別推論機制與註記機制。繼承過後的子類別，試描述其類別推論機制與註記機制。子類別跟父類別的推論與...

Maxwell Alexius ‧ 2019-10-05

1 Like 1 留言 3514 瀏覽

鐵人賽 Modern Web DAY 24

讓 TypeScript 成為你全端開發的 ACE！系列第 24 篇

技術 Day 24. 機動藍圖・類別推論 X 註記類別 - Class Type Inference & Annotation

閱讀本篇文章前，仔細想想看大致上已經了解類別的基本用法與性質了嗎？ TypeScript 針對物件方面的型別推論與註記機制為何？如果還沒理解完畢的話...

Maxwell Alexius ‧ 2019-10-04

2 Like 2 留言 2425 瀏覽

鐵人賽自我挑戰組 DAY 18

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 18 篇

技術 RWD 的三欄流體式網頁設計

在前面的章節我們已經介紹過了max-width or min-width以及百分比(%)單位對於 RWD 網站的重要性，現在我們要來設計一個三欄式的流體式網頁，...

Alec ‧ 2019-09-26

0 Like 0 留言 949 瀏覽

鐵人賽 Modern Web DAY 12

被 React react 的後端工程師系列第 12 篇

技術 [DAY 12] 司機我要下車之刪除清單中的服務之按得太久腰受不了

我想說的是預期結果：刪除清單中選定的服務使用 filter 對陣列做篩選，並且重新設定服務列表在我們的努力下，上一次練習中已經可以為所欲為的增加我們想要的...

Nanami Lemon ‧ 2019-09-26

2 Like 2 留言 4019 瀏覽

鐵人賽 Modern Web DAY 28

讓 TypeScript 成為你全端開發的 ACE！系列第 28 篇

技術 Day 28. 機動藍圖・抽象類別 X 藍圖基底 - TypeScript Abstract Class

閱讀本篇文章前，仔細想想看筆者列出到目前為止我們學到跟類別有關的名詞，可以回憶一下它們各自的定義以及實用的地方在哪裡～類別與物件的差別 Class v...

Maxwell Alexius ‧ 2019-10-08

0 Like 1 留言 1522 瀏覽

鐵人賽 Modern Web DAY 11

被 React react 的後端工程師系列第 11 篇

技術 [DAY 11] 煉金術就是分解構築之大哥哥來寫 JavaScript 之 ES6 真會玩

我想說的是解構賦值語法是 ES6 的新特性，可以將陣列或物件中的資料取出成獨立變數這篇來談煉金術的基礎不要瞎掰好嗎來說說「解構」，當初第一次看到真的...

Nanami Lemon ‧ 2019-09-25

1 Like 0 留言 1242 瀏覽

鐵人賽 Modern Web DAY 10

被 React react 的後端工程師系列第 10 篇

技術 [DAY 10] 地圖除了畫在床單上，程式裡要怎麼用 map 呢？

我想說的是map() 方法會建立一個新的陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。上一篇講了箭頭函數，這一篇來講講 map根據...

Nanami Lemon ‧ 2019-09-24

0 Like 0 留言 942 瀏覽

鐵人賽 Modern Web DAY 9

被 React react 的後端工程師系列第 9 篇

技術 [DAY09] 箭頭函數

我想說的是箭頭函數其實就是函式表達式(匿名函數)的簡化，是 ES6 中新增的功能建構式中不能用箭頭函數，會報錯箭頭函數是 ES6 中新增加的功能先看看在沒...

Nanami Lemon ‧ 2019-09-23

1 Like 0 留言 3303 瀏覽

鐵人賽 Modern Web DAY 22

讓 TypeScript 成為你全端開發的 ACE！系列第 22 篇

技術 Day 22. 機動藍圖・特殊成員 X 存取方法 - TypeScript Class Accessors

閱讀本篇文章前，仔細想想看類別的靜態成員（Static Members）是什麼？與普通成員差異在哪？什麼情況下會採用靜態成員的設計呢？如果還沒理解...

Maxwell Alexius ‧ 2019-10-02

0 Like 0 留言 1028 瀏覽

鐵人賽 Modern Web DAY 8

被 React react 的後端工程師系列第 8 篇

技術 [DAY08] 在按摩服務列表上為所欲為的增加服務

我想說的是把靜態的按摩服務列表改為動態的，並且可以由使用者自由新增服務建立一個可以自己新增的按摩服務列表預期結果如下先直接看完整程式碼，再來一段一段解說...

Nanami Lemon ‧ 2019-09-22

1 Like 0 留言 1182 瀏覽

鐵人賽 Modern Web DAY 7

被 React react 的後端工程師系列第 7 篇

技術 [DAY07] 介紹 State Hook

我想說的是介紹 useState hook，並且做一個計數器上一篇建立了一個靜態的純按摩店服務列表因為老闆今天找到一個身懷絕技的按摩師，他想在服務清單上加...

Nanami Lemon ‧ 2019-09-21

2 Like 1 留言 2458 瀏覽

鐵人賽自我挑戰組 DAY 15

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 15 篇

技術響應式網頁(RWD)環境與 Media Query

在智慧型手機橫空出世進入我們的世界以後，網頁工程師/設計師突然面臨到了一個很大的問題，過往的設計都是依照 desktop 的螢幕瀏覽器與比例去構想的，但當智慧...

Alec ‧ 2019-09-23

3 Like 1 留言 2824 瀏覽

鐵人賽自我挑戰組 DAY 14

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 14 篇

技術 CSS 的 border-radius、box-shadow 和 liner-gradient

關於 HTML 和 CSS 的學習筆記，快要告一個段落了，之後會開始進入到響應式網頁(RWD)的介紹，今天是 HTML 和 CSS 的最後一篇文章，我們來介紹...

Alec ‧ 2019-09-22

2 Like 2 留言 4234 瀏覽

鐵人賽 Modern Web DAY 21

讓 TypeScript 成為你全端開發的 ACE！系列第 21 篇

技術 Day 21. 機動藍圖・靜態成員 X 即刻操作 - Static Properties & Methods

閱讀本篇文章前，仔細想想看如何使用類別的繼承（Inheritance）？為何我們設計類別的成員時，會儘量以 private 模式為基準？什麼時候該開放...

Maxwell Alexius ‧ 2019-10-01

2 Like 1 留言 4007 瀏覽

鐵人賽 Modern Web DAY 20

讓 TypeScript 成為你全端開發的 ACE！系列第 20 篇

技術 Day 20. 機動藍圖・類別繼承 X 延用設計 - TypeScript Class Inheritance

閱讀本篇文章前，仔細想想看描述類別存取修飾子（Access Modifiers）的功能與意義。為何類別要實踐某介面時，介面裡的所有規格在類別裡會直接綁...

Maxwell Alexius ‧ 2019-09-30

1 Like 2 留言 6768 瀏覽

鐵人賽 Modern Web DAY 15

React.js 從【0】到【1】推坑計畫系列第 15 篇

技術【Day15 路由神器 - React-router 】

講到 SPA（single page application）與傳統網頁的差異，應該很多人會想到傳統網頁跳頁往往會有一段載入時間，導致畫面空白，讓使用者需要對著...

莫力全 Kyle Mo ‧ 2019-09-19

1 Like 1 留言 4208 瀏覽

鐵人賽 Modern Web DAY 19

讓 TypeScript 成為你全端開發的 ACE！系列第 19 篇

技術 Day 19. 機動藍圖・存取修飾 X 藍圖規劃 - TypeScript Class Access Modifiers

閱讀本篇文章前，仔細想想看 TypeScript 類別（Class）的意義是什麼？ TypeScript 類別跟介面（Interface）的最大差別在哪裡...

Maxwell Alexius ‧ 2019-09-29

2 Like 0 留言 5190 瀏覽

鐵人賽 Modern Web DAY 18

讓 TypeScript 成為你全端開發的 ACE！系列第 18 篇

技術 Day 18. 機動藍圖・類別宣告 X 藍圖設計 - TypeScript Class

閱讀本篇文章前，仔細想想看複合型別 union 與 intersection 的功能與意義代表為何？如果還沒理解完畢的話，可以先翻看前一篇文章喔！今...

Maxwell Alexius ‧ 2019-09-28

4 Like 1 留言 4425 瀏覽

鐵人賽自我挑戰組 DAY 13

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 13 篇

技術講完表格(table)今天來講表單(form)

上一篇我們講完了表格，今天我們來說說更廣泛運用的表單，還記得幾乎不管是甚麼網站大概都會有留言區，讓你可以留下自己的問題還有基本資料，最後有一個按鈕可以按送出，其...

Alec ‧ 2019-09-21

3 Like 1 留言 3056 瀏覽

鐵人賽自我挑戰組 DAY 12

破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師系列第 12 篇

技術如何在 HTML 上做表格再用 CSS 美化它

今天我們來說一說怎麼作表格，我就先說一個最簡單的結構，請看下方被包覆在<table>內的<tr><th><td&gt...

Alec ‧ 2019-09-20

1 Like 0 留言 7237 瀏覽

鐵人賽 Modern Web DAY 14

React.js 從【0】到【1】推坑計畫系列第 14 篇

技術【Day 14】Form in React

今天要來介紹在 React 中如何建構最基本的 form。重點可以歸納出這幾項：建立 state 變數，且與 input value 做綁定設定 onC...

莫力全 Kyle Mo ‧ 2019-09-18

2 Like 2 留言 6364 瀏覽

鐵人賽 Modern Web DAY 17

讓 TypeScript 成為你全端開發的 ACE！系列第 17 篇

技術 Day 17. 機動藍圖・複合型別 X 型別複合 - TypeScript Union & Intersection

閱讀本篇文章前，今天什麼都不用想！直接進入正文，快看下面！筆者就直接讓油門繼續摧下去～正文開始！筆者 O.S.：今天又是數學時間，要學好程式可真不...

Maxwell Alexius ‧ 2019-09-27

3 Like 0 留言 7689 瀏覽

鐵人賽 Modern Web DAY 16

讓 TypeScript 成為你全端開發的 ACE！系列第 16 篇

技術 Day 16. 機動藍圖・介面與型別 X 混用與比較 - TypeScript Interface V.S. Type

閱讀本篇文章前，仔細想想看 TypeScript 的型別系統與介面之間在語法上的差別與介面或型別的使用有何共通點呢？但意義上又會差在哪？如果還沒理解完畢的...

Maxwell Alexius ‧ 2019-09-26

0 Like 0 留言 3263 瀏覽

鐵人賽 Modern Web DAY 13

React.js 從【0】到【1】推坑計畫系列第 13 篇

技術【Day 13】Conditional Rendering

大家好，經過兩篇 style 的介紹，今天總算要回到處理邏輯的部分了。一般在開發應用時，常常會需要根據特定 condition 做邏輯判斷，除了一般我們熟知的...

莫力全 Kyle Mo ‧ 2019-09-17

0 Like 0 留言 975 瀏覽

鐵人賽 Modern Web DAY 6

被 React react 的後端工程師系列第 6 篇

技術 [DAY06] 終極蛇皮上班太認真之其實是半夜趴著滑手機之肩頸痠痛之做個按摩服務吧

我想說的是使用 JSX 建立一個跟 todoList 87分像的東西在思考用什麼做主題的過程中，覺得 todolist 跟 hello world 一樣了...

Nanami Lemon ‧ 2019-09-20

3 Like 1 留言 21481 瀏覽

鐵人賽 Modern Web DAY 12

React.js 從【0】到【1】推坑計畫系列第 12 篇

技術【Day 12】Styled-component

原本今天要介紹其他主題的，但後來想想既然昨天都介紹 inline-style 了，今天就介紹另一種 styling 的方式 - styled-component...

莫力全 Kyle Mo ‧ 2019-09-16

0 Like 0 留言 1029 瀏覽

鐵人賽 Modern Web DAY 5

被 React react 的後端工程師系列第 5 篇

技術 [DAY05] JSX 到底是多 X!

我想說的是： JSX 是一種語法糖 (Syntatic Sugar)，一種語法類似 XML 的 ECMAScript 語法擴充當遇到<，JSX 就當...

Nanami Lemon ‧ 2019-09-19

1 Like 0 留言 1220 瀏覽

鐵人賽 Modern Web DAY 4

被 React react 的後端工程師系列第 4 篇

技術 [DAY04] 你好世界

我想說的是：基礎 Hello World 建立和組件說明冷知識：於1972年，貝爾實驗室成員布萊恩·柯林漢撰寫的內部技術檔案《A Tutorial Int...

Nanami Lemon ‧ 2019-09-18

1 Like 1 留言 1595 瀏覽

鐵人賽 Modern Web DAY 3

被 React react 的後端工程師系列第 3 篇

技術 [DAY03] 上帝視角之路徑之熟門熟路老司機之資料夾說明

我想說的是：快速了解各個資料夾內資料的用處用框架的好習慣就是先搞清楚各個資料夾的用處就像是你今天出國去了國外的合法賭場，至少要先知道人家的規矩跟行情知道籌...

Nanami Lemon ‧ 2019-09-17