“Ohbug Front-end Weekly” no. 18. This journal is open source (GitHub: ohbug-org/weekly).

⬆ ️ hot

Parcel 2

Parcel 2

Parcel 2 has been rewritten with SWC + Rust and has significantly improved performance:

  • 🔌 new plugin system
  • 🌳 Tree Shaking is enabled by default and supports ESM, CJS, Dynamic Import, and CSS Modules
  • 🚀 Performance improvement, JS Compiler of Rust, parallel architecture
  • 🖖 is automatically built with differentiation based on Native ES Modules and automatically reverts to compatibility with older browsers
  • ✂️ Automatic Code Splitting
  • 🖼 image size conversion, format conversion and optimization, support AVIF and WebP, JPG and PNG lossless compression
  • 💵 Improves cache reliability, machine independent, and automatically tracks configuration, plug-in, and dependency changes
  • 🔥 Supports Hot Reloading and React Fast Refresh
  • 🪆 supports Bundle inlining, which allows the compiled content of one Bundle to be embedded in another Bundle, such as the inline image as the data URL
  • 📚 supports component library packaging and outputs ESM, CJS, and TypeScript definitions
  • 🧘 Lazy development mode, which builds only the files requested by the browser, improves the cold startup speed of dev Server
  • 👷 Improved Web Worker support, support Native ESM Worker, Worklets, Server Worker Manifests, etc
  • 🚨 Better diagnostic information, code hints, and more elegant presentation of document links
  • 👀 more reliable File Watcher, written in C++ and integrated with low-level operating system apis, quickly invalidates the cache even when a Parcel is restarted
  • 🗺 Faster and accurate Source Maps, based on Rust, up to 20 times faster than Parcel 1

The front-end ecosystem at the top has started to use Rust refactoring, and it is expected that more frameworks using Rust will appear in the future. Looking forward to a hand

Rome plans to use Rust rewrite

Rome plans to use Rust rewrite

Chromium is developing support for importing CSS styles using imports

Chromium is developing support for importing CSS styles using imports

After this feature is supported, you can use CSS just like the ES module.

📝 articles

A complete guide to implementing Dark Mode on the Web

A complete guide to implementing Dark Mode on the Web

The Vue team has unveiled the lightning-fast new scaffolding tool create-Vue, a future replacement for VUe-CLI, with just over 300 lines of code. Learn it!

The Vue team has unveiled the lightning-fast new scaffolding tool create-Vue, a future replacement for VUe-CLI, with just over 300 lines of code. Learn it!

On the morning of October 7, 2021, THE Vue Contributor team and other major contributors held a Vue Contributor Days online conference. Create-vue, a new scaffold tool, was unveiled at the conference.

⌨ ️ code

vite-node: Vite as Node.js runtime

vite-node

  • Out of the box ESM & TypeScript support
  • Top-level await
  • Vite plug-in support
  • Respect vite.config.ts
  • Shims for dirname and filename in ESM
  • Access to native node modules like fs, path, etc.
  • Watch mode (like nodemon)

Xterm.js: component-based terminal component

Xterm.js

It is used in many projects such as VS Code, cPanel and Azure Cloud Shell

Mijin: Vue + Tailwind UI component library

mijin

No dependencies, built-in support for dark mode.

Tailwind CSS seems to be a good fit for building similar component libraries, and the way the UI library is built is worth learning from

Visual code execution

This site will take the code execution process, and turn it into visual graphics, showing how the code is executed step by step. Currently supports Python, Java, C, C++, JavaScript, and Ruby code

🕒 subscription

  • 🕒 Update every Monday (redefine Monday)
  • 👋 Github and its official account. Click read the article to go to the Github repository

You can subscribe by searching “Ohbug” on wechat or following the public account Ohbug.