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

1 Like 0 留言 1459 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

rehome ‧ 2019-09-28

2 Like 0 留言 1297 瀏覽

鐵人賽自我挑戰組 DAY 20

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

技術在 media query 內使用 float:none 清除浮動效果

float的使用，我們常會用在 desktop 的排版上，不管是要將區塊並排顯示，或是要將選單橫列，常常都會使用到{float:left;}。今天我們要提到的是...

Alec ‧ 2019-09-28

1 Like 0 留言 1483 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

rehome ‧ 2019-09-27

3 Like 1 留言 1709 瀏覽

鐵人賽自我挑戰組 DAY 19

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

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

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

Alec ‧ 2019-09-27

0 Like 0 留言 3759 瀏覽

鐵人賽 Modern Web DAY 26

ML X 友廷等公車系列第 26 篇

技術 Day 26 FB Login/Logout

前言想做個加入我的最愛路線，首先需要辨別身份(唯一key,id)，對照資料庫有無紀錄(是否為會員/有無最愛清單...)，這時候，就需要登入來幫忙，而登入登...

阿瑜 ‧ 2019-09-27

1 Like 0 留言 1707 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 [Day12] Service Worker進階Caching實作(Part2)

Cache then Network Strategies 這個策略算是目前應用場景最為廣泛的。主要目的就是能「從cache中盡快的獲得用戶所需要的資源」，並且...

rehome ‧ 2019-09-26

2 Like 2 留言 2188 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

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

Alec ‧ 2019-09-26

1 Like 0 留言 990 瀏覽

鐵人賽 Modern Web DAY 25

ML X 友廷等公車系列第 25 篇

技術 Day 25 Turn On All Routes in Taichung

Prototype 開發過程 (站上一篇文站下三天刻) day 1 : 研究相關 search bar關鍵字 Leaflet search bar網路上的範...

阿瑜 ‧ 2019-09-26

1 Like 1 留言 4070 瀏覽

鐵人賽自我挑戰組 DAY 17

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

技術改用百分比(%)為單位，讓你的 RWD 網頁縮放自如

過往我們不管是設width寬、height高時，或是在做margin或padding，比較習慣的單位都是用px，現在我們要改用%百分比，但在改用百分比前我們先...

Alec ‧ 2019-09-25

1 Like 0 留言 1573 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 [Day11] Service Worker進階Caching實作(Part1)

如果今天用戶沒有拜訪過某個頁面(舉例來說我的PWA中help.html)，那麼在網路離線時，我們之前所做的dynamic caching是無法fetch到這個資...

rehome ‧ 2019-09-25

1 Like 0 留言 1840 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 [Day10] 在Service Worker中實作Caching(Part3)

來開始實作Dynamic Caching吧到目前為止，我們已經在在install階段中實現了pre-cache靜態資源，現在讓我們也來實作Dynamic C...

rehome ‧ 2019-09-24

3 Like 1 留言 2221 瀏覽

鐵人賽自我挑戰組 DAY 16

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

技術 RWD 不可顯示 X 軸法則

使用行動設備上網時不管是手機或是平板，不同於使用電腦會有滑鼠，而是使用我們的手指滑動銀幕，以使用習慣來說，通常是以上下滑動的方式來進行內容瀏覽，而不像是使用電腦...

Alec ‧ 2019-09-24

2 Like 1 留言 2212 瀏覽

鐵人賽自我挑戰組 DAY 15

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

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

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

Alec ‧ 2019-09-23

1 Like 0 留言 2102 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 [Day09] 在Service Worker中實作Caching(Part2)

接續昨天的進度，我們已經pre-cache app.js這個檔案了，但是我們監聽fetch event時還時直接回應從網路fetch回來的結果，沒有從cache...

rehome ‧ 2019-09-23

3 Like 1 留言 2456 瀏覽

鐵人賽自我挑戰組 DAY 14

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

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

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

Alec ‧ 2019-09-22

1 Like 0 留言 3193 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 [Day08] 在Service Worker中實作Caching(Part1)

為什麼我們的PWA需要Caching？這邊我舉幾個實際可能發生的例子：想一想如果今天我們的網站有大量用戶湧入時。用戶可能會在「網路連線不良」的情形下，仍然...

rehome ‧ 2019-09-22

3 Like 0 留言 6424 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 [Day07] 複習一下Jacvascript中的 Promise 和 Fetch(Part2)

Fetch API是目前較新版本的瀏覽器都有支援的javascript function，它允許我們透過HTTP Request來獲取外部資源，這其實跟Ajax...

rehome ‧ 2019-09-21

3 Like 1 留言 2799 瀏覽

鐵人賽自我挑戰組 DAY 12

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

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

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

Alec ‧ 2019-09-20

1 Like 0 留言 3557 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 [Day06] 複習一下Jacvascript中的 Promise 和 Fetch(Part1)

在Service Woker中會用到大量的promise和Fetch API，所以這邊先來好好複習一下 JavaScript程式語言在設計時，需考量非同步、單...

rehome ‧ 2019-09-20

2 Like 0 留言 4789 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 [Day05] Service Worker の基礎介紹(Part2)

來看看Service Worker怎麼監聽事件我們可以在sw.js file裡，開始監聽一些比較基本的事件。 // 當service worker在「安裝階段...

rehome ‧ 2019-09-19

2 Like 1 留言 6434 瀏覽

鐵人賽自我挑戰組 DAY 11

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

技術 CSS 的 LOGO 圖片隱藏標題與選單並排

之前我們都在講關於排版的東西，現在我們要開始講網站的內容囉，由上至下，我們先從.header開始講起，不管甚麼類型的網站，尤其是商業網站，一定都會有一個 lo...

Alec ‧ 2019-09-19

2 Like 0 留言 8164 瀏覽

鐵人賽自我挑戰組 DAY 10

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

技術 CSS 的絕對定位與相對定位

嗨~大家今天過得好嗎？(揮手) 上一篇我們好不容易說明完了用float及clear的排版方式了，所以我們現在知道了可以用 CSS RESET 來去除瀏覽器默認...

Alec ‧ 2019-09-18

3 Like 0 留言 16776 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 [Day04] Service Worker の基礎介紹(Part1)

什麼是Service Worker？從一般普通的Javascript開始說，Javascript是在single thread上運行。這意味著，如果我們訪問一...

rehome ‧ 2019-09-18

0 Like 0 留言 3024 瀏覽

鐵人賽 Modern Web DAY 13

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

技術【Day 13】Conditional Rendering

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

莫力全 Kyle Mo ‧ 2019-09-17

1 Like 0 留言 20748 瀏覽

鐵人賽自我挑戰組 DAY 9

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

技術今天我們用 CSS 來排版吧

在正式開始之前，要先說兩件很重要的事，CSS RESET 和 {margin: 0 auto}。 CSS RESET 我們先來講關於 CSS RESET，目前...

Alec ‧ 2019-09-17

2 Like 0 留言 6871 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 [Day03] 再探Web App Manifest

現在我們可以在android模擬器上的chrome瀏覽器測試一下我們的網站，記得按下Add to home screen加入到手機螢幕上，可以發現我們在Mani...

rehome ‧ 2019-09-17

3 Like 0 留言 3402 瀏覽

鐵人賽自我挑戰組 DAY 8

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

技術今天我來說說什麼是Box-Model

上一篇文章我們已經簡單說明了如何在 HTML 文件加上 CSS 內容，也說明了如何用選擇器方式選擇了對的 HTML 標籤，還記得我們在 Day.6 提到的&l...

Alec ‧ 2019-09-16

1 Like 0 留言 4723 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 [Day02] 初探Web App Manifest

什麼是Web App Manifest？ Web App Manifest就是一個json文件，當browser載入文件後，可以幫助我們安裝Web到手機的螢幕上...

rehome ‧ 2019-09-16

1 Like 0 留言 11039 瀏覽

鐵人賽 Modern Web DAY 1

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

達標好文技術 [Day01] 什麼是漸進式網頁應用(Progressive Web Application)

那個..到底什麼是漸進式網頁(PWA)？或許你可能已經有聽過這個名詞，但是很難去說出它真正的含意 QQ 其實我們一般會認為漸進式網頁應(PWA)只是一個術語，...

rehome ‧ 2019-09-15

3 Like 0 留言 4321 瀏覽

鐵人賽自我挑戰組 DAY 7

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

技術如何添加 CSS 內容及選擇器

網頁三要素( HTML、CSS、JavaScript )，HTML 是網站的內容 & 架構，CSS 則是網頁的樣式而 JavaScript 是網頁的特...

Alec ‧ 2019-09-15