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

2 Like 2 留言 1046 瀏覽

鐵人賽自我挑戰組

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

技術 JavaScript 的 if 條件

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

Alec ‧ 2019-12-05

3 Like 1 留言 1294 瀏覽

鐵人賽自我挑戰組

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

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

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

Alec ‧ 2019-11-22

3 Like 1 留言 1547 瀏覽

鐵人賽自我挑戰組

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

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

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

Alec ‧ 2019-11-15

5 Like 1 留言 1985 瀏覽

鐵人賽自我挑戰組

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

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

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

Alec ‧ 2019-11-11

2 Like 0 留言 565 瀏覽

鐵人賽自我挑戰組

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

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

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

Alec ‧ 2019-10-18

1 Like 0 留言 109 瀏覽

鐵人賽 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 留言 202 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

rehome ‧ 2019-10-14

1 Like 0 留言 73 瀏覽

鐵人賽 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 留言 96 瀏覽

鐵人賽 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 留言 152 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

rehome ‧ 2019-10-09

1 Like 0 留言 179 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

rehome ‧ 2019-10-09

2 Like 2 留言 453 瀏覽

鐵人賽自我挑戰組 DAY 30

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

技術 To be continued

沒想到 30 天就這麼樣的過去了，記得鐵人賽開始前，網路上逛阿逛的就已經知道了這個一年一度的盛事，真的也不知哪一根筋不對，當時就躍躍欲試，還調好了鬧鐘，開始報...

Alec ‧ 2019-10-08

2 Like 0 留言 169 瀏覽

鐵人賽自我挑戰組 DAY 29

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

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

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

Alec ‧ 2019-10-07

1 Like 0 留言 130 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

rehome ‧ 2019-10-07

1 Like 0 留言 137 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

rehome ‧ 2019-10-06

3 Like 1 留言 213 瀏覽

鐵人賽自我挑戰組 DAY 28

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

技術什麼東西是 Sass Maps？

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

Alec ‧ 2019-10-06

1 Like 0 留言 100 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

rehome ‧ 2019-10-05

3 Like 1 留言 192 瀏覽

鐵人賽自我挑戰組 DAY 27

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

技術 Sass 居然也有 @for 迴圈

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

Alec ‧ 2019-10-05

1 Like 0 留言 126 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

rehome ‧ 2019-10-04

2 Like 0 留言 191 瀏覽

鐵人賽自我挑戰組 DAY 26

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

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

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

Alec ‧ 2019-10-04

1 Like 0 留言 107 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

rehome ‧ 2019-10-03

2 Like 1 留言 160 瀏覽

鐵人賽自我挑戰組 DAY 25

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

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

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

Alec ‧ 2019-10-03

2 Like 0 留言 159 瀏覽

鐵人賽自我挑戰組 DAY 24

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

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

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

Alec ‧ 2019-10-02

1 Like 0 留言 111 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

rehome ‧ 2019-10-02

1 Like 0 留言 118 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

rehome ‧ 2019-10-01

2 Like 0 留言 171 瀏覽

鐵人賽自我挑戰組 DAY 23

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

技術 Sass 的變數功能 Variable

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

Alec ‧ 2019-10-01

2 Like 0 留言 310 瀏覽

鐵人賽自我挑戰組 DAY 22

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

技術 CSS 的預處理器 Sass

連續的從 HTML 到 CSS 然後到 RWD，現在我們要來到了 Sass了，Sass 是 CSS 的預處理器，顧名思義它的功能就是可以「預先處理」CSS，讓...

Alec ‧ 2019-09-30

1 Like 0 留言 113 瀏覽

鐵人賽 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 留言 80 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

rehome ‧ 2019-09-29

2 Like 1 留言 201 瀏覽

鐵人賽自我挑戰組 DAY 21

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

技術介紹了好多天的 RWD，今天來排一個完整一點的版型

我們花了好多天的時間來介紹 RWD 的設計概念，但是每一個概念都比較片斷與零散一點，今天我們來把所有的概念整合一下，變成一個完整的 RWD 網頁吧，來看一下我...

Alec ‧ 2019-09-29

技術 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)

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

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

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

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

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

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

技術 Sass 的變數功能 Variable

技術 CSS 的預處理器 Sass

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

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

技術 介紹了好多天的 RWD，今天來排一個完整一點的版型

At

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

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

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

技術什麼東西是 Sass Maps？

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

技術介紹了好多天的 RWD，今天來排一個完整一點的版型