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

0 Like 0 留言 1141 瀏覽

鐵人賽 Modern Web DAY 17

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 17 篇

技術 [Day 17] - 主題 Theme

今天我們要來學習如何使用主題，先前我們辛辛苦苦安裝了很多套件、調整了很多設定、寫了不少組件，才做出一個較為基礎的部落格版型，而如果我們套用主題，可能在短短一小時...

chasel1020 ‧ 2020-10-02

1 Like 0 留言 911 瀏覽

鐵人賽 Modern Web DAY 24

實作經典 JavaScript 30 系列第 24 篇

技術 Day24: Sort Without Articles

WES BOS系列影片Alex快速導讀系列影片今天要結合正規表達式跟sort()來做排序的功能作者這邊假設了一個情境就是我們拿到了一串樂團的清單，希望可以用樂...

喬依司 ‧ 2020-10-02 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1253 瀏覽

鐵人賽 Modern Web DAY 16

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 16 篇

技術 [Day 16] - 部署 Gatsby 到網路上

經由前面幾個章節，我們學會了創建一個 Gatsby 的專案建立頁面與元件為元件增加樣式為專案增加套件使用 GraphQL 來查詢資料如何動態的建立...

chasel1020 ‧ 2020-10-01

0 Like 0 留言 882 瀏覽

鐵人賽 Modern Web DAY 15

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 15 篇

技術 [Day 15] - 建置第一個 Blog - 文章內頁 ( 下 )

在前一章節的尾聲，我們成功地在文章節點中加入 Slug ，今天我們要來用這些資訊建立一個共用的頁面，根據點擊的文章 Slug 來帶入對應的內容，那就讓我們開始吧...

chasel1020 ‧ 2020-09-30

3 Like 0 留言 1008 瀏覽

鐵人賽 Modern Web DAY 23

實作經典 JavaScript 30 系列第 23 篇

技術 Day23: Mouse Move Shadow

WES BOS系列影片Alex快速導讀系列影片今天的練習重點是抓取DOM容器的座標與mousemove事件我們要做一個文字陰影與滑鼠互動的效果要做出這個效果，...

喬依司 ‧ 2020-10-01 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 872 瀏覽

鐵人賽 Modern Web DAY 22

實作經典 JavaScript 30 系列第 22 篇

技術 Day22: LocalStorage(二)

我們就必須使用LocalStorage來讓瀏覽器記住剛才輸入的資料紀錄完成後，同時將表單的回復成未輸入的狀態 localStorage.setItem('ite...

喬依司 ‧ 2020-09-30 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 932 瀏覽

鐵人賽 Modern Web DAY 14

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 14 篇

技術 [Day 14] - 建置第一個 Blog - 文章內頁 ( 上 )

[Day 14] - 建置第一個 Blog - 文章內頁在前一篇文章中，我們建立了一個還不錯的列表頁，但我們絕對不滿足於此，今天，我們要用更聰明的方式來建立頁...

chasel1020 ‧ 2020-09-29

2 Like 0 留言 1043 瀏覽

鐵人賽 Modern Web DAY 21

實作經典 JavaScript 30 系列第 21 篇

技術 Day21: LocalStorage(ㄧ)

WES BOS系列影片Alex快速導讀系列影片今天要來認識LocalStorage看不太懂的話，這裡也有一篇我覺得寫得很好理解的筆記可以參考localStor...

喬依司 ‧ 2020-09-29 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1023 瀏覽

鐵人賽 Modern Web DAY 13

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 13 篇

技術 [Day 13] - 建置第一個 Blog - 文章列表

昨天藉由 gatsby-source-filesystem 這套外掛，我們能看到在 Folder底下諸多 File 的詳細資料，也藉這些資料製作了簡單的畫面，今...

chasel1020 ‧ 2020-09-28

0 Like 0 留言 718 瀏覽

鐵人賽自我挑戰組 DAY 15

溫故知新 JavaScript 系列第 15 篇

技術 Day15- 控制判斷-比較運算子

在我們使用網頁的時候有沒有遇過一種情境當你輸入帳號與密碼時，有時候輸入錯誤或是格式不符，電腦就會跳出通知告訴你資料有誤唷，這個地方就能用控制判斷去達成，我們要讓...

AWEI ‧ 2020-09-28

0 Like 0 留言 1439 瀏覽

鐵人賽 Modern Web DAY 12

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 12 篇

技術 [Day 12] - GraphiQL 與 Filesystem

前兩天我們都在提如何撈取資料到站點內，就有細心的讀者會問，但我不太會寫 GraphQL 啊，有沒有相關的輔助工具能幫忙我開發呢？嘿，沒錯，那就是今天的主題 G...

chasel1020 ‧ 2020-09-27

2 Like 0 留言 811 瀏覽

鐵人賽 Modern Web DAY 20

實作經典 JavaScript 30 系列第 20 篇

技術 Day20: JS中引用與複製的差異(二)

今天針對物件來看引用與複製的差異先創造一個簡單的物件 const person = { name: 'Wes Bos', age: 80 }; 再製作...

喬依司 ‧ 2020-09-28 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 908 瀏覽

鐵人賽 Modern Web DAY 19

實作經典 JavaScript 30 系列第 19 篇

技術 Day19: JS中引用與複製的差異(一)

WES BOS系列影片Alex快速導讀系列影片最一開始可以先試試看這兩段程式碼 let age = 100; let age2 = age; console....

喬依司 ‧ 2020-09-27 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1094 瀏覽

鐵人賽 Modern Web DAY 11

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 11 篇

技術 [Day 11] - 靜態查詢 ( Static Query )

[Day 11] - 靜態查詢 ( Static Query ) 今天我們要來談談有別於頁面查詢的另一種方法，叫做靜態查詢 ( Static Query )，至...

chasel1020 ‧ 2020-09-26

1 Like 0 留言 2099 瀏覽

鐵人賽 Modern Web DAY 18

實作經典 JavaScript 30 系列第 18 篇

技術 Day 18 : 為網頁增加圖片動畫效果

WES BOS系列影片Alex快速導讀系列影片今天要為靜態的文章，添加一些圖片進場的動畫效果練習抓取螢幕與圖片的長度，進而控制圖片的進場時間。 1.先抓出需要...

喬依司 ‧ 2020-09-26 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 982 瀏覽

鐵人賽 Modern Web DAY 10

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 10 篇

技術 [Day 10] - 頁面查詢 ( Page Query )

昨天我們介紹了如何在 Gatsby 使用 GraphQL 來進行撈取資料，但在 Gatsby 中其實對於撈資料的方式是有區分的唷，我們昨天使用的叫做頁面查詢...

chasel1020 ‧ 2020-09-25

0 Like 0 留言 1017 瀏覽

鐵人賽 Modern Web DAY 9

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 9 篇

技術 [Day 09] - GraphQL 參上

昨天我們完成了第一個簡易版網站，但是，沒有資料的網站，就沒有靈魂！！！所以我們要來介紹 Gatsby 關於資料的部分啦，就如第一天所言， Gatsby 有一個...

chasel1020 ‧ 2020-09-24

1 Like 1 留言 1705 瀏覽

鐵人賽 Modern Web DAY 17

實作經典 JavaScript 30 系列第 17 篇

技術 Day17: 為網站設計一個彩蛋

WES BOS系列影片Alex快速導讀系列影片今天的實例用到了cornify.js這個套件，功能類似打電動時要放大絕招前，一定要輸入一段指令串。例如:上上下下...

喬依司 ‧ 2020-09-25 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 1289 瀏覽

鐵人賽 Modern Web DAY 16

實作經典 JavaScript 30 系列第 16 篇

技術 Day16: 自製的影片撥放器(二)

今天首先要控制音量大小與調整播放速度 1.先設定會使用到的函式名稱 function handleRangeUpdate() { console.log(t...

喬依司 ‧ 2020-09-24 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1040 瀏覽

鐵人賽 Modern Web DAY 8

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 8 篇

技術 [Day 08] - 初探 Gatsby 之創建第一個網站 ( 下 )

昨天我們套用 typography 這個 Plugin 來為我們的網站做全局的基礎樣式處理，並創建了 contact & about 兩個頁面，但樣式上...

chasel1020 ‧ 2020-09-23

1 Like 0 留言 2318 瀏覽

鐵人賽 Modern Web DAY 15

實作經典 JavaScript 30 系列第 15 篇

技術 Day15: 自製的影片撥放器(一)

WES BOS系列影片Alex快速導讀系列影片今天要來製作自己的影片撥放器，覺得原始的控制套件很醜?那就自己做一個，不過作者已經幫我們做好樣式了。我們還是注重...

喬依司 ‧ 2020-09-23 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 2108 瀏覽

鐵人賽自我挑戰組 DAY 10

溫故知新 JavaScript 系列第 10 篇

技術 Day10- 來做一個簡易計算機吧 -上集

Hello，我們前面知道了怎麼透過 JS 去更換網頁的內容，也知道變數與函式的用途，學了這麼多零碎的知識是不是還感覺不到這些概念的使用時機，以及如何透過這些方法...

AWEI ‧ 2020-09-23

0 Like 0 留言 1288 瀏覽

鐵人賽 Modern Web DAY 7

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 7 篇

技術 [Day 07] - 初探 Gatsby 之創建第一個網站 ( 上 )

今天我們將融會貫通，利用前兩章所學，建立一個擁有三個頁面的簡易網站，並導入一個外掛作為這樣網站的基礎樣式，話不多說，就讓我們開始吧！建立環境並導入外掛根據...

chasel1020 ‧ 2020-09-22

1 Like 0 留言 2444 瀏覽

鐵人賽 Modern Web DAY 14

實作經典 JavaScript 30 系列第 14 篇

技術 Day14: 一次選取想要選取的checkbox

WES BOS系列影片Alex快速導讀系列影片今天要嘗試做一個todo-list的小功能，按下shift鍵時，可以一次勾選代辦事項。 1.首先抓出所有chec...

喬依司 ‧ 2020-09-22 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1022 瀏覽

鐵人賽 Modern Web DAY 6

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 6 篇

技術 [Day 06] - 初探 Gatsby 之建立元件

昨天介紹了如何在 React 中設定樣式，今天我們就來講講 Component 吧！對於這部分較為陌生的讀者可能會有這樣一個疑問，為什麼要建構元件？建構元...

chasel1020 ‧ 2020-09-21

1 Like 0 留言 1205 瀏覽

鐵人賽 Modern Web DAY 13

實作經典 JavaScript 30 系列第 13 篇

技術 Day13: 認識console

WES BOS系列影片Alex快速導讀系列影片今天比較輕鬆，作者帶我們深入了解console的一些使用方法，記錄下來，也許那天突然就會用到也不一定。作者有準...

喬依司 ‧ 2020-09-21 ‧團隊自討苦吃三十天#像極了愛情

3 Like 1 留言 17925 瀏覽

鐵人賽 Modern Web DAY 5

JavaScript基本功修煉系列第 5 篇

技術 JavaScript基本功修練：Day5 - 宣告變數 - let、const、var

ES6開始就引入了let、const替代var去宣告變數。今天就來整理一下自己學習let和const時碰到的概念。 let、const解決了var的什麼問題？...

Alysa Chan ‧ 2020-09-20 ‧團隊十萬伏bug打字團

0 Like 0 留言 1539 瀏覽

鐵人賽 Modern Web DAY 5

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 5 篇

技術 [Day 05] - 初探 Gatsby 之樣式調整大全

今天我們會在 React 方面多著墨，會講解如何在 React 專案中調整樣式，還有有哪些方式能去調整，同時也會講解如果在 Gatsby 專案中，該怎麼使用這些...

chasel1020 ‧ 2020-09-20

2 Like 0 留言 1352 瀏覽