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

1 Like 0 留言 1518 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

rehome ‧ 2019-10-02

2 Like 0 留言 2734 瀏覽

鐵人賽自我挑戰組 DAY 23

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

技術 Sass 的變數功能 Variable

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

Alec ‧ 2019-10-01

1 Like 0 留言 2010 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

rehome ‧ 2019-10-01

1 Like 0 留言 1567 瀏覽

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

鐵人賽 Modern Web DAY 15

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

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

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

rehome ‧ 2019-09-29

1 Like 0 留言 1808 瀏覽

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

鐵人賽 Modern Web DAY 13

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

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

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

rehome ‧ 2019-09-27

2 Like 0 留言 3609 瀏覽

鐵人賽自我挑戰組 DAY 22

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

技術 CSS 的預處理器 Sass

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

Alec ‧ 2019-09-30

2 Like 1 留言 1567 瀏覽

鐵人賽自我挑戰組 DAY 21

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

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

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

Alec ‧ 2019-09-29

0 Like 0 留言 4332 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 Day 26 FB Login/Logout

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

阿瑜 ‧ 2019-09-27

1 Like 0 留言 2247 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

rehome ‧ 2019-09-26

1 Like 0 留言 1332 瀏覽

鐵人賽 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

2 Like 0 留言 1483 瀏覽

鐵人賽自我挑戰組 DAY 20

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

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

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

Alec ‧ 2019-09-28

1 Like 0 留言 1896 瀏覽

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

鐵人賽 Modern Web DAY 10

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

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

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

rehome ‧ 2019-09-24

1 Like 1 留言 4884 瀏覽

鐵人賽自我挑戰組 DAY 17

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

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

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

Alec ‧ 2019-09-25

3 Like 1 留言 2671 瀏覽

鐵人賽自我挑戰組 DAY 16

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

技術 RWD 不可顯示 X 軸法則

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

Alec ‧ 2019-09-24

3 Like 1 留言 2244 瀏覽

鐵人賽自我挑戰組 DAY 19

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

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

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

Alec ‧ 2019-09-27

2 Like 2 留言 2658 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

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

Alec ‧ 2019-09-26

1 Like 0 留言 2506 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

rehome ‧ 2019-09-23

1 Like 0 留言 3691 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

rehome ‧ 2019-09-22

3 Like 0 留言 7105 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

rehome ‧ 2019-09-21

2 Like 1 留言 2837 瀏覽

鐵人賽自我挑戰組 DAY 15

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

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

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

Alec ‧ 2019-09-23

3 Like 1 留言 3164 瀏覽

鐵人賽自我挑戰組 DAY 14

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

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

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

Alec ‧ 2019-09-22

1 Like 0 留言 4316 瀏覽

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

鐵人賽 Modern Web DAY 5

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

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

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

rehome ‧ 2019-09-19

3 Like 1 留言 3324 瀏覽

鐵人賽自我挑戰組 DAY 12

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

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

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

Alec ‧ 2019-09-20

3 Like 0 留言 19749 瀏覽

鐵人賽 Modern Web DAY 4

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

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

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

rehome ‧ 2019-09-18

0 Like 0 留言 3541 瀏覽

鐵人賽 Modern Web DAY 13

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

技術【Day 13】Conditional Rendering

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

莫力全 Kyle Mo ‧ 2019-09-17

2 Like 0 留言 7916 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 [Day03] 再探Web App Manifest

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

rehome ‧ 2019-09-17