山月週刊第七期: 使用 Emmet 提升開發效率

前端愛好者週刊 (Github: shfshanyue/weekly)，每週記錄關於前端的開源工具、優秀文章、重大庫版本發佈記錄等等。每週一發布，訂閱平臺以下，歡迎訂閱。

• 訂閱網站: https://weekly.shanyue.tech
• 訂閱Github: shfshanyue/weekly

封面

貴州盤州發現2.44億年前一種大型肉食性基幹新鰭魚類的化石，命名爲盤州暴魚

一句話

• 在 VSCode 中，經過快捷鍵 <Ctrl + K + Z> 可快速進入禪模式 (View: Toggle Zen Mode)
• 貴州盤州發現2.44億年前一種大型肉食性基幹新鰭魚類的化石，命名爲盤州暴魚
• 截至2021年3月末，我國外匯儲備規模爲31700億美圓，較2月末降低350億美圓，降幅爲1.09%

開發利器

1、 Emmet: Web 開發者的利器

高效的前端開發利器，可在 Vue/React 中快速書寫修改 HTML/CSS，並支持多種編輯器，如流行的 VSCode。

它最大的功能就是把 CSS 樣式的縮寫 轉化爲 HTML，如輸入 #page>(#header>ul#nav>li*4>a)+(#content>h1{Hello world}+p)+#footer，並按下 Tab 鍵，自動生成如下 HTML

<div id="page">
  <div id="header">
    <ul id="nav">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
  <div id="content">
    <h1>Hello world</h1>
    <p></p>
  </div>
  <div id="footer"></div>
</div>

以上擴展縮寫的功能被稱爲 Expand Abbreviation。除此以外，它還有更多細緻的功能，這些功能在 Emmet 中被稱爲 Action

1. 去除最外層標籤
2. 包裹選中的標籤
3. ...

• repo: emmetio/emmet
• npm: emmet

2、 Web Developer 瀏覽器插件

一款服務於 Web 開發者的瀏覽器插件，能夠針對該網站作更深刻的操做，如

1. 禁止 Javascript
2. 禁止 CSS
3. 顯示頁面全部圖片
4. ...

文章推薦

1、 純 Javascript 代碼片斷大全

這篇文章總結了幾個收集關於 vanilla javascript 代碼片斷的網站，很是好用，包含如下幾個網站

1. 30 Seconds Of Code
2. How to manage HTML DOM with vanilla JavaScript only?
3. Cheat sheet for moving from jQuery to vanilla JavaScript
4. microjs
5. Single line of code

2、 Dark mode in 5 minutes, with inverted lightness variables

本文使用 HSL 函數與 CSS 變量自動生成網站暗黑模式

:root {
  --primary-hs: 250 30%;
}

h1 {
  color: hsl(var(--primary-hs) 30%);
}

article {
  background: hsl(var(--primary-hs) 90%);
}

article h2 {
  background: hsl(var(--primary-hs) 40%);
  color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-hs: 320 30%;
  }
}

HSL 函數如同 RGB 函數同樣，可做爲 color 的屬性值，他接受三個參數：色相(Hue)、飽和度(Saturation)和亮度(Lightness)

• H (hue) 色相，單位是角度， 其中 red=0deg(=360deg), green=120deg, blue=240deg
• S (Saturation) 飽和度，單位是百分比，爲0時表明全灰
• L (Lightness) 亮度，單位是百分比，100% 是白色，0% 是黑色

代碼片斷

1、 使用可選鏈操做符替代 lodash.get

const object = { a: [{ b: { c: 3 } }] }
const result = object?.a?.[0]?.b?.c ?? 1
console.log(result)
//=> 3

開源與庫

1、 charts.css

數據可視化通常用 Canvas 完成，或者使用 SVG 完成，它居然還能使用 CSS 完成，聽起來是不有點意思？

charts.css 經過 CSS 來進行數據可視化，在 charts.css 中畫圖，通常經過 table、css variables 與 class 控制圖表

<table class="charts-css column" id="my-chart">
  ...
</table>

• repo: ChartsCSS/charts.css
• npm: charts.css

版本發佈

1、 Tailwind CSS v2.1

Tailwind CSS v2.1 在四月六日發佈，咱們來看看它更新了哪些地方

JIT engine in core

在 Tailwind CSS 的生產模式中能夠經過 purgecss 去除無用的 CSS 代碼，可是在開發環境下依然有很大的代碼體積，形成極高時間與極差的開發體驗。在接下來的 2.1 版本能夠啓用 mode: jit 特性在開發者環境中開啓。

// tailwind.config.js
  module.exports = {
+   mode: 'jit',
    purge: [
      // ...
    ],
    theme: {
      // ...
    }
    // ...
  }

同時支持一些更靈活的寫法

<!-- Colors -->
<button class="bg-[#1da1f1]">Share on Twitter</button>

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

<input class="disabled:opacity-75">

另外也有一些其餘特性的更新

• Composable CSS filters API
• New blending mode utilities
• New isolation utilities