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

2 Like 3 留言 5378 瀏覽

鐵人賽自我挑戰組

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

技術 JavaScript 的 if 條件

運算子要來正式介紹 if 條件式之前，必須要先來介紹運算子，因為 if 條件式內的條件會由運算子來進行比較與運算。比較運算子 == 與 != 僅單純比...

Alec ‧ 2019-12-05

3 Like 2 留言 4999 瀏覽

鐵人賽自我挑戰組

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

技術 JavaScript 的陣列 (Array) 與物件 (Object)

之前曾經介紹過宣告變數，開頭用 var 後接數字 (Number) 或是字串 (String)，而今天我們要介紹另一種變數型態，就是陣列 (Array) 與物...

Alec ‧ 2019-11-22

3 Like 2 留言 4234 瀏覽

鐵人賽自我挑戰組

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

技術 JavaScript 的 function 功能 (函式介紹)

★首先這篇文章適合以下背景的人閱讀熟悉 HTML、CSS 正要開始一腳踏進 JavaScript 的初學者號稱全世界最懶的一群人(軟體工程師)，能坐就...

Alec ‧ 2019-11-15

5 Like 1 留言 15635 瀏覽

鐵人賽自我挑戰組

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

技術初探前端三劍客之一 - JavaScript 大神(變數、console.log() 與 textContent)

★首先這篇文章適合以下背景的人閱讀：熟悉 HTML、CSS 正要開始一腳踏進 JavaScript 的初學者今天我們要開始進入 JavaScript...

Alec ‧ 2019-11-11

2 Like 0 留言 2436 瀏覽

鐵人賽自我挑戰組

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

技術關於購物車頁面的 RWD 移動概念

鐵人賽結束了，但說過了寫文章是 to be continued 的，今天就要先來記錄一下這個購物車頁面的 RWD 移動概念。回歸正常學習進度，檢視了一下作業與...

Alec ‧ 2019-10-18

1 Like 0 留言 1891 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 29 篇

技術 [Day29] 自動化管理Service Worker(Part2)

繼續昨天「針對不同的URL來路由(Routing)到對應的cache策略」，這裡我要將兩種不同的URL分別存入獨立的sub-cache中。第一個為materia...

rehome ‧ 2019-10-14

1 Like 0 留言 2836 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 28 篇

技術 [Day28] 自動化管理Service Worker(Part1)

之前在service worker中寫了這麼多cache strategies、background sync等等的程式碼，但是隨著我們開發的專案越來越大、檔案...

rehome ‧ 2019-10-14

1 Like 0 留言 1328 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 27 篇

技術 [Day27] 了解Media API和Geolocation API(Part3)

終於要開始實作「獲取用戶地理位置」的功能了要獲取地理位置必須使用「Geolocation API」這個Web API。先來看一下這個API的瀏覽器支援程度：整...

rehome ‧ 2019-10-12

1 Like 0 留言 1276 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 26 篇

技術 [Day26] 了解Media API和Geolocation API(Part2)

昨天已經將video stream添加到video元素中，今天要來繼續實作當用戶按下「拍照鈕」後，會將最新的「video stream snapshot」傳送到...

rehome ‧ 2019-10-10

1 Like 1 留言 1506 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 25 篇

技術 [Day25] 了解Media API和Geolocation API(Part1)

終於要來開始實作存取「裝置的媒體」和「地理位置」的功能。當用戶要發佈貼文時，應該要開啟裝置的攝像鏡頭並將畫面顯示在PWA的表單中，當用戶按下拍照鍵時即完成影像...

rehome ‧ 2019-10-09

1 Like 0 留言 3554 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 24 篇

技術 [Day24] 實作PWA推播通知(Part3)

VAPID Library是使用「非對稱式加密的方式」確保傳送推播訊息到瀏覽器供應商的push server是「來自我自己的server」。也就是說它會產生一...

rehome ‧ 2019-10-09

3 Like 3 留言 1980 瀏覽

鐵人賽自我挑戰組 DAY 30

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

技術 To be continued

Note：2020 年的鐵人賽我也有報名喔，我即將於 2020/09/16 開賽，主題為『破釜沉舟的轉職路 - 去年說要成為軟體工程師的我，今年 38 歲了，...

Alec ‧ 2019-10-08

2 Like 0 留言 1247 瀏覽

鐵人賽自我挑戰組 DAY 29

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

技術將之前的 RWD 版型範例全面改寫成 Sass 的 SCSS 碼吧

之前我有一篇文章在說明 RWD 版型在瀏覽器縮放時進行的變化，那時候的 CSS 是直接用原生 CSS 撰寫的，這幾天我們花了一點時間說明了 CSS 預處理器 S...

Alec ‧ 2019-10-07

1 Like 0 留言 3167 瀏覽

鐵人賽 Modern Web DAY 23

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 23 篇

技術 [Day23] 實作PWA推播通知(Part2)

昨天在實作「顯示通知」時，除了設定body這個option之外，其實還有很多其他選項可以設定 (不過這裡要先說這些額外的設定不一定每個browser都有支援QQ...

rehome ‧ 2019-10-07

3 Like 0 留言 10112 瀏覽

鐵人賽 Modern Web DAY 22

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 22 篇

技術 [Day22] 實作PWA推播通知(Part1)

為何PWA需要推播通知(Push Notifications) 首先，只要用戶允許我們推播，當有新的貼文資訊時，我們就可以主動通知用戶。即使今天用戶關閉網頁或是...

rehome ‧ 2019-10-06

3 Like 1 留言 1242 瀏覽

鐵人賽自我挑戰組 DAY 28

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

技術什麼東西是 Sass Maps？

Sass Map 是 Sass 的地圖嗎？當然不是囉，但既然它取名為 Maps，姑且我們可以暫時以地圖的按圖索驥的精神來想像它。過往，我們提到了 Sass 的...

Alec ‧ 2019-10-06

1 Like 0 留言 1863 瀏覽

鐵人賽 Modern Web DAY 21

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 21 篇

技術 [Day21] 了解PWA中的背景同步(Part3)

目前我的整個漸進式網站(PWA)是使用「http-server」這個node package來運行的，不過這也僅在開發階段可行而已。之後為了讓其他用戶也能使用，...

rehome ‧ 2019-10-05

3 Like 1 留言 1907 瀏覽

鐵人賽自我挑戰組 DAY 27

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

技術 Sass 居然也有 @for 迴圈

For 迴圈，在程式設計這個世界鼎鼎大名，多少人戰死在這裡，我就曾經在這裡跌倒，然後萬劫不復，請詳我之前的故事，這一切是怎麼開始的，我怎麼跑去學了Python。...

Alec ‧ 2019-10-05

1 Like 0 留言 1232 瀏覽

鐵人賽 Modern Web DAY 20

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 20 篇

技術 [Day20] 了解PWA中的背景同步(Part2)

從昨天的流程圖可以發現，我們還必須將用戶要發佈的貼文資訊儲存到indexedDB中才行R。那我就接續昨天在feed.js中增加的code： if('servic...

rehome ‧ 2019-10-04

1 Like 0 留言 1569 瀏覽

鐵人賽 Modern Web DAY 19

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 19 篇

技術 [Day19] 了解PWA中的背景同步(Part1)

什麼是背景同步(Background Sync) 簡單來說，就是當用戶沒有網路連線時，背景同步就會將數據發送到server。這裡有一點非常重要，在servi...

rehome ‧ 2019-10-03

2 Like 0 留言 3118 瀏覽

鐵人賽自我挑戰組 DAY 26

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

技術如何利用 Sass 的 @mixin 功能，讓撰寫 RWD 網站變的輕而易舉

在我們介紹 RWD 時，知道撰寫一個 RWD 網站必須要在撰寫 CSS 的時候加入 Media query，但是常會很困擾的是，到底要把 Media query...

Alec ‧ 2019-10-04

2 Like 1 留言 1429 瀏覽

鐵人賽自我挑戰組 DAY 25

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

技術 Sass的 @mixin 功能，如何將複雜的語法簡單化

我們前面聊完了@import，知道了原來最終的編譯檔 scss 是可以透過好幾個分門別類各自分開的 scss 用@import導入，來讓版面都乾乾淨淨的，之前我...

Alec ‧ 2019-10-03

2 Like 0 留言 1445 瀏覽

鐵人賽自我挑戰組 DAY 24

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

技術 Sass 的 @import 功能，如何讓scss檔分門別類的管理

過往一支 CSS 檔打天下，從頭寫到尾，動則上千上萬條程式碼，維護不易，之前我們介紹了 scss 的變數功能，讓一些關鍵的設定可以透過變數的型式撰寫。如今，為...

Alec ‧ 2019-10-02

1 Like 0 留言 1215 瀏覽

鐵人賽 Modern Web DAY 18

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 18 篇

技術 [Day18] PWA中不可或缺的響應式網頁設計(Part2)

繼續昨天的響應式網頁設計(RWD)，今天我要來將首頁中最大的那張圖片改成responsive。當我用電腦瀏覽頁面時，圖片旁邊會有空白的地方，但是我希望圖片的大...

rehome ‧ 2019-10-02

2 Like 0 留言 2331 瀏覽

鐵人賽自我挑戰組 DAY 23

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

技術 Sass 的變數功能 Variable

今天要來介紹的是 Sass 的變數功能，只要利用變數的功能，我們會比較好的去管理一個網站的其他設定值，而不用欲修改時要一行一行的檢視原生 CSS 碼。 $tit...

Alec ‧ 2019-10-01

1 Like 0 留言 1660 瀏覽

鐵人賽 Modern Web DAY 17

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 17 篇

技術 [Day17] PWA中不可或缺的響應式網頁設計(Part1)

漸進式網頁(PWA)的其中一個目標就是讓網頁「感覺起來」像是手機原生的APP。所以在網頁的設計上必須得適應不同的手機裝置，這種設計方式我們就把它稱之為「響應式網...

rehome ‧ 2019-10-01

1 Like 0 留言 1308 瀏覽

鐵人賽 Modern Web DAY 16

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 16 篇

技術 [Day16] 使用IndexedDB暫存Dynamic Data(Part3)

昨天已經成功地將firebase裡的dynamic data儲存至indexedDB了，接下來因為我目前使用的cache strategies是「cache t...

rehome ‧ 2019-09-30

1 Like 0 留言 2746 瀏覽

鐵人賽 Modern Web DAY 15

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 15 篇

技術 [Day15] 使用indexedDB暫存Dynamic Data(Part2)

什麼是 IndexedDB ? 前面已經有提到indexedDB是一個在browser運行的Database，這裡我列出幾項主要的特性： IndexedDB儲...

rehome ‧ 2019-09-29

1 Like 0 留言 1488 瀏覽

鐵人賽 Modern Web DAY 14

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 14 篇

技術 [Day14] 使用indexedDB暫存Dynamic Data(Part1)

先來為我的PWA建立一個後台資料庫吧我目前對於用戶的貼文，是先去request一個假的Restful API Endpoint，再用createCard()...

rehome ‧ 2019-09-28

1 Like 0 留言 1502 瀏覽

鐵人賽 Modern Web DAY 13

你應該要知道的新一代Web技術---漸進式網頁(PWA) 系列第 13 篇

技術 [Day13] Service Worker進階Caching實作(Part3)

回顧一下昨天，我根據不同的request類型而使用不同的cache strategies： "https://httpbin.org/get&quo...

rehome ‧ 2019-09-27

技術 JavaScript 的 if 條件

技術 JavaScript 的陣列 (Array) 與物件 (Object)

技術 JavaScript 的 function 功能 (函式介紹)

技術 初探前端三劍客之一 - JavaScript 大神(變數、console.log() 與 textContent)

技術 關於購物車頁面的 RWD 移動概念

技術 [Day29] 自動化管理Service Worker(Part2)

技術 [Day28] 自動化管理Service Worker(Part1)

技術 [Day27] 了解Media API和Geolocation API(Part3)

技術 [Day26] 了解Media API和Geolocation API(Part2)

技術 [Day25] 了解Media API和Geolocation API(Part1)

技術 [Day24] 實作PWA推播通知(Part3)

技術 To be continued

技術 將之前的 RWD 版型範例全面改寫成 Sass 的 SCSS 碼吧

技術 [Day23] 實作PWA推播通知(Part2)

技術 [Day22] 實作PWA推播通知(Part1)

技術 什麼東西是 Sass Maps？

技術 [Day21] 了解PWA中的背景同步(Part3)

技術 Sass 居然也有 @for 迴圈

技術 [Day20] 了解PWA中的背景同步(Part2)

技術 [Day19] 了解PWA中的背景同步(Part1)

技術 如何利用 Sass 的 @mixin 功能，讓撰寫 RWD 網站變的輕而易舉

技術 Sass的 @mixin 功能，如何將複雜的語法簡單化

技術 Sass 的 @import 功能，如何讓scss檔分門別類的管理

技術 [Day18] PWA中不可或缺的響應式網頁設計(Part2)

技術 Sass 的變數功能 Variable

技術 [Day17] PWA中不可或缺的響應式網頁設計(Part1)

技術 [Day16] 使用IndexedDB暫存Dynamic Data(Part3)

技術 [Day15] 使用indexedDB暫存Dynamic Data(Part2)

技術 [Day14] 使用indexedDB暫存Dynamic Data(Part1)

技術 [Day13] Service Worker進階Caching實作(Part3)

標記使用者

技術初探前端三劍客之一 - JavaScript 大神(變數、console.log() 與 textContent)

技術關於購物車頁面的 RWD 移動概念

技術將之前的 RWD 版型範例全面改寫成 Sass 的 SCSS 碼吧

技術什麼東西是 Sass Maps？

技術如何利用 Sass 的 @mixin 功能，讓撰寫 RWD 網站變的輕而易舉