iT邦幫忙

modern web相關文章
共有 69 則文章

技術 JavaScript 的 if 條件

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

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

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 自我挑戰組 DAY 30

技術 To be continued

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

鐵人賽 自我挑戰組 DAY 29

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 自我挑戰組 DAY 28

技術 什麼東西是 Sass Maps?

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 自我挑戰組 DAY 27

技術 Sass 居然也有 @for 迴圈

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 自我挑戰組 DAY 26

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 自我挑戰組 DAY 25

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

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

鐵人賽 自我挑戰組 DAY 24

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 自我挑戰組 DAY 23

技術 Sass 的變數功能 Variable

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

鐵人賽 自我挑戰組 DAY 22

技術 CSS 的預處理器 Sass

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 自我挑戰組 DAY 21

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

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