一、HTML5.2新標籤dialog
HTMl5.2新的版本出現了一個有意思的標籤，那就是對話窗或視窗，也就是dialog,其基本用法如下：
<dialog open>
//soming...
</dialog>
複製程式碼
open屬性表明該視窗是預設顯示的，使用者可與之互動。 相關js方法有： 1.close():關閉對話方塊，可選傳入型別為{domxref("DOMString")}}的引數，用來更新對話方塊的returnValue。 2.open():非模式化的顯示這個對話方塊, 即：開啟這個對話方塊之後依然可以和其他內容進行互動。 可選傳入型別為Element或者MouseEvent的引數，用來定義對話方塊的顯示位置。 3.showModal():模式化的顯示這個對話方塊， 並且將會至於所有其他對話方塊的頂層（遮蔽其他對話方塊的互動）。 可選傳入型別為Element或者MouseEvent的引數， 用來定義對話方塊的顯示位置。show()和showModal()是有區別的，show只是顯示dialog,而showMadal()是會遮蔽其他的彈出層。 按ESC可以關閉dialog，dialog需要重新定義css樣式，畢竟本身css是預設的樣式。 下面是一個demo程式碼：
<!-- 建立一個dialog -->
<dialog>
<h1>這是dialog的標題</h1>
<div>這是dialog的內容</div>
<button id="close_dialog">關閉</button>
</dialog>
<button id="open_dialog">開啟</button>
<!-- js程式碼 -->
<script>
var dialog = document.getElementsByTagName("dialog")[0],
openDialog = document.getElementById("open_dialog"),
closeDialog = document.getElementById("close_dialog");
openDialog.onclick = function(){
dialog.showModal();
};
closeDialog.onclick = function(){
dialog.close();
};
</script>
複製程式碼二、Grid佈局全新的css網站佈局
CSS Grid 佈局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。下面是一個 wrapper 元素，內部包含6個 items ：
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
複製程式碼要把 wrapper 元素變成一個grid(網格)，只要簡單地把其 display 屬性設定為grid即可：
.wrapper{
display:grid;
}
複製程式碼為了使其成為二維的網格容器，我們需要定義列和行。讓我們建立3列和2行。我們將使用grid-template-row和grid-template-column屬性。
.wrapper{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:50px 50px;
}
複製程式碼正如你所看到的，我們為grid-template-columns寫入了 3 個值，這樣我們就會得到 3 列。 我們想要得到 2 行，因此我們為 grid-template-rows指定了2個值。
這些值決定了我們希望我們的列有多寬（ 100px ），以及我們希望行數是多高（ 50px ）,結果如下：
<div class="wrapper">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
複製程式碼現在，我們來建立一個 3×3 的 grid(網格)：
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
複製程式碼將得到以下佈局：
要定位和調整 items(子元素) 大小，我們將使用grid-column和 grid-row屬性來設定：
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
複製程式碼我們在這裡要做的是，我們希望 item1 佔據從第一條網格線開始，到第四條網格線結束。換句話說，它將獨立佔據整行。 以下是在螢幕上顯示的內容：
.item1 {
grid-column: 1 / 4;
}
複製程式碼為了確保你已經正確理解了這個概念，我們重新排列其他的 items(子元素) 。
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
複製程式碼以下是頁面上的佈局效果：
三、Parcel：超快的Web應用打包器
雖然 webpack 帶來了許多可配置性，同事也造就了它的複雜性。 而 Parcel 帶來簡單性。 官方號稱 Parcel 為 “零配置” ，開箱即用。
正如上面所說的 – Parcel 內建了一個開箱即用的開發伺服器。 開發伺服器將在你更改檔案時自動重新構建你的應用程式，並支援模組熱替換以實現快速開發。
Parcel 有什麼好處？
1.快速打包 – Parcel 比 Webpack，Rollup 和 Browserify 更快。
2.Parcel 支援 JS、CSS、HTML、資原始檔等等 – 無需外掛 – 更加便於使用者使用。
3.零配置。開箱即用的程式碼拆分，模組熱替換，CSS 前處理器，開發伺服器，快取等等；
4.更加友好的錯誤日誌。
我們應該什麼時候使用 Parcel ， Webpack 或 Rollup 呢？
這完全取決於你，但我個人會在以下情況下使用每個打包器：
Parcel：中小型專案（程式碼行小於 15k）
Webpack：大型以及企業級專案。
Rollup：用於 NPM 包。
讓我們給 Parcel 一個機會 。
Parcel官網地址：*parceljs.org/
四、PWA是否能帶來新一輪大前端技術洗牌？
漸進式網路應用 ( Progressive Web Apps )，即我們所熟知的 PWA。 自 2015 年以來，PWA 相關的技術不斷升級優化，在使用者體驗和使用者留存兩方面都提供了非常好的解決方案。PWA 可以將 Web 和 App 各自的優勢融合在一起：漸進式、可響應、可離線、實現類似 App 的互動、即時更新、安全、可以被搜尋引擎檢索、可推送、可安裝、可連結。 PWA 不是特指某一項技術，而是應用了多項技術的 Web App。其核心技術包括 App Manifest、Service Worker、Web Push、Credential Management API ，等等。其核心目標就是提升 Web App 的效能，改善 Web App 的使用者體驗。 下面我們詳細地看一下這些核心技術，是否能夠真正彌補 Web 劣勢。
- Web App Manifest
Web App Manifest 是為了解決使用者留存問題而誕生的，它是一個外鏈的 JSON 檔案，在這個檔案中，像瀏覽器暴露了站點的名稱，地址，圖示等等後設資料。在瀏覽器中通過 引入這個 JSON 檔案，瀏覽器識別到這個檔案的存在，會根據自己的機制決定是否彈出新增到桌面對話方塊，並在桌面上生成一個應用的圖示，通過點選桌面圖示進入應用具有沉浸式的體驗，全屏顯示，沒有瀏覽器位址列，並且還會自動新增應用啟動畫面。
- Service Worker
Service Worker 是一個特殊的 Web Worker，獨立於頁面主執行緒執行，它能夠攔截和處理網路請求，並且配合 Cache Storage API，開發者可以自由的對頁面傳送的 HTTP 請求進行管理，這就是為什麼 Service Worker 能讓 Web 站點離線的原因。
- Push Notification
Push Notification 其實是兩個 API 的結合， Notification API 和 Push API 。 Notification API 提供了開發者可以給使用者傳送通知的能力，包括申請顯示通知許可權，發起通知，以及定製通知的型別等等。 Push API，則是讓伺服器能夠向使用者傳送離線訊息，即使使用者當前並沒有開啟你的頁面，甚至沒有開啟瀏覽器。
各家瀏覽器廠商在 2017 年開始大力支援 PWA,連蘋果都已經在幾個月前悄悄的進行了 Service Worker 的開發了，iOS 也將支援 PWA。各大站點紛紛實踐，用 PWA 已成趨勢。