【Alibaba-TXD 前端小報】- 熱門前端技術快報，聚焦業界新視界；前端領域急速發展的節奏從未停歇，即將流逝的四月裏，Nodejs 發佈了 v12 版本，Chrome75 也將原生支持懶加載……也許是大潮將至，亦或是好事將近，總之，在下還能學！！！
歡迎 訂閱 & 投稿
本期小編：佐七
學習專欄
2019 前端工程師手冊（front-end-handbook-2019）
這個受歡迎的前端詳細指南於本年度再次迴歸。更新了大量有用的資源、學習資料和開發工具。內容非常全面，值得一看。
Css Layout Cookbook
MDN 官網爲前端開發者總結的一些常用佈局模塊的實現方案。包括麪包屑，分頁，導航欄等，值得參考。
11 個教程中不常被提及的 JavaScript 小技巧
本文作者選取了 11 個在我們工作中經常出現卻容易被忽略的 JavaScript 小技巧，可以幫助我們更高效的進行編碼。
45 個值得收藏的 CSS 形狀
本文列舉了一些我們日常會用到的一些 CSS 形狀，值得參考。此外，在Houdini 已經到來的當下，也許一句 --shape: 'triangle' ，即可使用，無需重複編寫這些 CSS 形狀。
新聞快報
第五屆 CSS 大會順利舉行
第五屆 CSS 大會於 2019 年 3 月 30 日在深圳舉辦，本次會議共邀請了 7 位演講嘉賓出席演講，其中有我們熟悉的大漠，張鑫旭，勾三股四等，爲我們分享了一些新時代下的 CSS 技術。
Chrome75 將原生支持懶加載
過去我們一直通過 js 來實現圖片的延遲加載，而 Chrome75 的到來將原生支持該功能。我們可以通過設置 loading 屬性來控制瀏覽器是否延遲加載屏幕外的圖像和 iframe。示例代碼如下：
<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>讓我們看一下效果：
微軟發佈基於 Chromium 的預覽版 Edge
2018 年 12 月，微軟宣佈 Edge 將採用 Chromium，這是由谷歌 Chrome 支持的開源項目，其中包含了不少值得我們期待的新特性像自定義元素和 shaodw dom，javascript 字體加載API等。目前預覽版現在已經可以在 Windows 上使用，很快就可以在 Mac 上使用。
jQuery 3.4.0 版本發佈
4月10 日，jQuery 官博發文宣告 jQuery 3.4.0 正式發佈。距離 2018 年 1 月發佈 v 3.3.0 版已有一年多了。jQuery 官方表示，這是 3.x 系列的最後一個版本，他們將全力準備 jQuery 4.0。本次更新重點放在一些bug的修理和性能的提升。
Nodejs 12發佈
時隔一年，Node.js 12 如約而至，正式發佈第一個 Current 版本。（按照當前的節奏一年兩更，2063 年我們就能迎來 Node v100 了……）
該版本帶來了諸如：
- V8 版本更新帶來好多不錯的特性；
- HTTP 解析速度提升；
- 啓動速度大幅提升；
- 更好的診斷報告和堆分析工具；
- ESM 模塊更新；
同時 Node v6 也即將停止維護。
第三屆 VueConf 將在上海舉辦
一年一度的 VueConf 又來啦！VueConf 2018 是在杭州舉辦的，Vue.js 作者尤雨溪採用了遠程參與的方式，給大家帶來了精彩了演講。這一次，VueConf 2019 上海來啦，會議將在 6 月 8 號上海徐家彙華山路舉辦，尤大將親臨現場，給大家帶來主題演講，趕快點擊鏈接搶票吧！
工具推薦
Shepherd: Guide Your Users Through a Tour of Your App
Shepherd是一款便於我們爲一款產品做新手指引的工具庫，通過一些簡單的api就可以實現該功能，目前對於Vue，React，Angular，Ember框架都有支持。
CloudConvert: 文件格式在線轉換平臺
CloudConvert 是一款強大全能格式在線轉換雲在線應用，支持跨平臺。 ... 支持輸入文件 URL、Dropbox、Google Drive 文件源或者直接從電腦上傳文件進行轉換，你只需要一個瀏覽器就可以使用它，非常方便。
Ink: 使用 React 編寫命令行界面
Ink 是一款使用 React 風格開發命令行界面應用 (CLI App) 的 Nodejs 工具，也就是說，我們可以使用像 React 那樣的方式來組織代碼，開發出運行在命令行的工具應用。Ink 2.0 可以無縫支持 React 的某些特性，比如 Hooks 或Context，還可以與 React 生態系統中的其他重要組件（比如 Redux ）發生交互。
官方文檔提供瞭如下的示例：
import React, {Component} from 'react';
import {render, Color} from 'ink';
class Counter extends Component {
constructor() {
super();
this.state = {
i: 0
};
}
render() {
return (
<Color green>
{this.state.i} tests passed
</Color>
);
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({
i: this.state.i + 1
});
}, 100);
}
componentWillUnmount() {
clearInterval(this.timer);
}
}
render(<Counter/>);
終端上的輸出：
熱門文章
我在阿里雲做前端
“抓住我們核心的競爭力，並同時發現業務中的問題，跨端推進解決，這是最好的出路。” 讓我們看看阿里巴巴高級前端技術專家城池大大講述他過去幾年在阿里雲的前端經驗。
Winter 眼中的前端十年：覺醒、全棧、包袱，未來無不可爲
爲什麼他能在前端圈如魚得水？爲什麼他總能拿到大公司的高薪 Offer？在他眼中：前端 Leader 都該焦慮什麼？爲什麼過去十年是前端覺醒的十年？在杭州家裏，本篇文章採訪了本期嘉賓 Winter，聽他講述前端行業十年的得與失。
使用 Typescript 兩年之後，它值得推薦嗎
Typescript 近兩年熱度不減，很多大公司都選擇去擁抱 TS，但它真的值得被推薦嗎？本篇文章站在比較客觀的角度從多方面講述 TS 的優點和缺點。
