您的四月份前端補給包已到，請查收～

【阿里雲 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 支持的開源項目，其中包含了很多值得咱們期待的新特性像自定義元素和 shadow 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 的優勢和缺點。