Front-end Micro Weekly is updated every Friday with technology-related news and articles for front-end developers

Wechat search and subscribe to the “front micro blog” public account

πŸ–Ό on

Run macOS in a browser

@puruvjdev uses React (now Preact), TypeScript, and Vite (originally Snowpack) to create this macOS simulation page without using any UI libraries, and the display is extremely high.

πŸ“° information

VueConf US 2021: Share moreState of Vuenion 2021

This year’s VueConf US Conference, especially on Vue Ecology in this year some changes, such as:

  • Devtools43% install increase (1.1 million -> 1.58 million)
  • NPMInstallations up 51.6% (6.2 million -> 9.4 million)
  • Vue Router4.0 andVuex4.0 is stably supportedVue 3
  • New build tools:ViteAnd new static web site generation toolsVitePress
  • <script setup> 及 <style> ηš„varinjection
  • betterTypeScriptandIDEsupport
  • Vue 3Ready to abandonIE11
  • In the second quarter of 2021Vue 3Will be installed as NPMVueThe default version of apply tag:latest

Deno 1.9 release

Deno released version 1.9, bringing a lot of new features, performance improvements, and Bugfixs. New features include:

  • The nativeHTTP/2The web server
  • inRustandserde_v8Faster calls in
  • supportBlob URL& tofetchThe promotion of
  • LSPIn the completeimport
  • Interactive permission hints
  • inTLSServer supportALPN
  • .

Chrome on the new 90

Chrome 90 has been released with a number of new features, including:

  • overflowAdded a new feature:clip. The properties andhiddenThe effect is very similar, but the part beyond the boundary is hidden, and cannot scroll. withhiddenThe difference is,clipNor can a program (e.gel.scrollTop = 10). There’s also a new propertyoverflow-clip-marginCan expand the label shear range; 
    .overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
Copy the code
  • Feature PolicyrenamePermissions Policy.Feature Policy APIfromChrome 74Introduced features that allow you to be selectiveTo enable the,disableandModify theInterested in the behavior of specific API and browser features can be obtained fromMDN document for feature-policyFor more details. If you want to use this feature on your website, go to πŸ‘‰Introduce Feature Policy.
  • Declarative Shadow DOMSupport.Shadow DOMisWeb ComponentPart of the standard, it provides a kind of isolationDOMThe son of the treeCSSStyle and so on. Before you do that, useShadow DOM, need to useJavaScriptTo build ashadow root. 
    const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;
Copy the code

    However, this only works for client side rendering, not server side rendering. fromChrome 90theDeclarative Shadow DOM, you can use onlyHTMLYou can createshadow root.

    <host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>
Copy the code

Tailwind UI now supports React and Vue

Tailwind UI is a set of component libraries based on Tailwind CSS and provides over 400 sample web pages that are designed to be responsive and can be thrown directly into your Tailwind CSS project at a very low cost. These components now support React and Vue 3, making it much easier to use Tailwind UI in projects with these frameworks.

As you can see from the Tailwind UI website, it offers a fee to view more sample templates, from which you can learn a commercialized approach to a technical tool and framework. If you have a good open source tool or framework, you can also use this approach to provide an UPPER-layer API, component or function for commercialization purposes.

πŸ“– articles

The Complete Guide to Full Stack Ethereum Development

This paper introduces in detail how to do the full stack ethereum development, involving the content is more comprehensive. The main technical architectures used are:

  • Front-end framework – React
  • Ethereum development Environment – Hardhat
  • Ethereum Web side class library – ethers.js
  • API Layer – Graph Protocal

This article is an end-to-end guide on how to use the latest resources, libraries, and tools to build a full-stack Ethereum application, including:

  • How to create, deploy, and test Ethereum smart contracts to local, test, and main networks
  • How do I switch between local, test, and production environments/networks
  • How do I connect and interact with contracts using an environment like React, Vue, Svelte, or Angular

Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript

More and more front-end developers are using TypeScript as their primary development language, and many developers who were previously resistant to TypeScript are also experiencing the “law of smell.”

The Sentry site’s front-end team took a detailed look at the process of migrating their site from javascript 100% to TypeScript, sharing the pace, techniques, challenges, and lessons learned.

The overall pace is slow and steady, with a team of more than 12 people, 1,100 files, and 95,000 lines of code.

The whole migration strategy can be roughly divided into three stages:

  • Education and training. At this stage, all developers on the team need to knowTypeScriptComing and providing useful resources to help them “get on the bus”;
  • The new code uses TypeScript. At this stage, you need to change the development mode toTypeScript;
  • conversion. At this stage, all new jobs are transferredTypeScript.

If you also have older projects that you want to migrate to TypeScript, read the article in detail, and the use of staged task splitting and analysis tools will help.

πŸ›  Tools and plug-ins

WMR

WMR is a lightweight one-stop development tool for modern Web application development. The entire NPM package is installed in 2MB size and has no dependencies.

Features required for modern Web application development, from development to production environments, include but are not limited to:

  • πŸ”¨ No entry points or pages to configure-just HTML files with<script type=module>
  • 🦦 Safely import “packages” from npm without installation
  • πŸ“¦ Smart bundling and caching for npm dependencies
  • ↻ Hot reloading for modules, Preact components and CSS
  • ⚑️ Lightning-fast JSX support that you can debug in the browser
  • πŸ’„ Import CSS files and CSS Modules (*.module.css)
  • πŸ”© Out-of-the-box support for TypeScript
  • πŸ“‚ Static file serving with hot reloading of CSS and images
  • πŸ—œ Highly optimized Rollup-based production output (wmr build)
  • πŸ“‘ Crawls and pre-renders your app’s pages to static HTML at build time
  • 🏎 built-in HTTP2 in dev and prod (WMR Serve — HTTP2)
  • πŸ”§ Supports Rollup plugins, even in development where Rollup isn’t used

React Spring Physical animation library: React spring

React-spring is a spring-physics-based animation library that meets most uI-related animation needs and provides flexible enough tools to bring your creative ideas to life.

Dracula UI

Dracula is a color theme, featuring dark color theme, supporting a variety of commonly used ides. This set of UI components, based on the original color system, provides a set of dark color priority front-end components and response to the design template.

I have to say, it’s pretty.

Drawit

The site offers an extensive resource of hand-drawn vector illustrations and ICONS, most of which are free.

In recent years, illustrations have become the standard of most websites. Hand-drawn illustrations can bring new visual experience to the web page, and add more vivid descriptions to the boring copywriting description of the web page.

πŸ₯… code snippet

How to inNode.jsThe use ofES6In theimportgrammar

There are several ways to use the import syntax in Node.js. Here are two simple ways to do this:

  1. inpackage.jsonAdd a field to"type": "module"

This is a simple way to add a type identifier:

{
  "type": "module"
}
Copy the code

One prerequisite for this approach is that node.js must be at least 14.x.x. If you want to use import in node.js versions younger than 14, you can convert import syntax to CommonJS syntax using Babel’s pre-release conversion capabilities. Installation-related dependencies:

npm i -D @babel/core @babel/preset-env @babel/node
Copy the code

Create the configuration file babel.config.json in the project root directory:

{
  "presets": ["@babel/preset-env"]}Copy the code

Finally use Nodemon to start the service:

{
  "scripts": {
    "dev": "nodemon --exec babel-node server.js"}}Copy the code

useuseReducerImplement state switching

In business development, it is often necessary to switch between two states. Here is an example of how to use the React. UseReducer to create a state switcher:

const useToggle = (initialValue = false) = > {
  return React.useReducer(
    (previousValue) = >! previousValue}, initialValue ) }Copy the code

To use this state switch, use useToggle in your business code:

const [value, toggleValue] = useToggle();

<button onClick={toggleValue}>
  Click me
</button>
Copy the code

pseudo-classes:out-of-range ε’Œ :in-range

You can set a range of pseudo-classes for the input field, setting some special styles. Such as:

<input type="number" min=10 max=15 />
Copy the code

Style:

:in-range {
  background: green;
}

:out-of-range {
  background: red;
}

input {
  font-size: 15rem;
  color: white;
}
Copy the code

The article was first published on the official wechat account front-end Wezhi.

For the first time to receive the article push, more front-end forward-looking technology sharing, please search wechat to follow the “front-end weizhi”,