Front-end Micro Weekly provides technology related news and articles for front-end developers.

Wechat follow ** “front micro blog” ** public account, timely access to the latest weekly.

📰 information

Tailwind CSS V2.1 released

Tailwind CSS has released its first release since V2.0 with multiple feature updates. The just-in-time engine released In March has been incorporated into the main package and can be configured with mode In tailwind.config.js: ‘Jit enabled this feature, with support for CSS filters, mix-blending-mode, Isolation, box-decoration-break, etc.

Here is a brief mention of just-in-time, a new feature that has attracted attention this Time. What benefits does just-in-time bring?

Benefiting from this real-time class analysis capability, both in development and production mode, styles can be packaged on demand, ensuring consistency between the development environment and the online environment. Previously, Tailwind was only able to do this on-demand style packaging in production environments, where the development experience wasn’t great due to the computationally heavy workload.

This ability, can also support user defined by means of similar serial styles, such as sm: focus: hover: active: the font – bold can be realized under hovering and selected font bold. Custom styles are also supported, such as BG -[# A0CDAE] which can customize the background color.

Tailwind is now mature enough to consider implementing it in your own project.

Chrome DevTools architecture tweaks: Integration into TypeScript

When DevTools decided to use a type checker in 2013, using the Closure Compiler, it was often asked: Have you considered moving to a new type checker?

After migrating to JavaScript modules, Closure Compiler can no longer detect some exceptions in JavaScript.

Since the TypeScript team uses DevTools for use case testing itself, the compatibility of the two has some advantages. After reviewing some performance metrics, we decided to use TypeScript.

📖 articles

Notion editor ¶

The whole notion can be divided into two layers, the data layer is responsible for storing data; The rendering layer is responsible for rendering data into an interface, receiving user events and turning them into OP operations for the data layer to execute.

100 underline/overlay animations

The article provides 100 kinds of animation methods through underline and overlay to realize the changeable mouse hover effect. It is suggested to collect after reading.

These animations use basic CSS properties, such as background and Transition, without SVG or JavaScript, and have only one HTML tag. You only need to define a style class to use.

How to Learn Complex Things Quickly: A Guide

This is a methodological statement: How to learn complex things?

Often when faced with complex things, the first reaction is to think of a lot of obstacles and difficulties, and then immediately discouraged. This article describes how to break down goals and achieve them step by step in a step-by-step way. It can be divided into the following steps:

  • Identify the target
  • Read the full table of contents, not in detail
  • Try to dig a little deeper
  • Don’t be afraid to ask for help
  • Sum up experience and review the problem

We all know the truth. Didn’t we? Go below the level of detail and you’ll get something.

Dark mode in 5 minutes, with inverted lightness variables

In order to achieve the dark mode of the website, there is no standard answer, each approach has its own advantages and disadvantages, in addition to the cost of the transformation of the old project, but also to consider the cost of continuous maintenance later. Therefore, we need a simple rules, easy to maintain the scheme.

This paper introduces a technical scheme of automatic generation of dark mode through the combination of CSS HSL function and CSS variable.

Sample code:

: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%; }}Copy the code

If you are not familiar with the HSL function, here are the key points. It receives three parameters, hue, saturation, and brightness. Saturation and brightness are easy to understand. What does hue mean?

Hue is a number on a scale from 0 to 360, representing the gradient from red to green to blue, where 0 and 360 represent red, 120 represent green, and 240 represent blue.

Discovering Observer Web APIs

In the browser environment, there are several apis that can be used to listen for page changes, such as:

  • MutationObserver(Monitor the change of adding, deleting, modifying and checking nodes in DOM tree)
  • ResizeObserver(Listen for tag boundary changes on HTML elements and SVG tags)
  • IntersectionObserver(Asynchronously monitors cross state changes between target tag elements and root nodes)

This article delves into how to use them to implement some of the functions required to monitor page changes.

🛠 Tools and plug-ins

Figma to React

Figma to React converts a page of content drawn by Figma into code for React Native and next.js frameworks.

Deno standard library

The Deno core team supports a standard set of high-quality code that all Deno projects can safely use. These modules have no additional dependencies. If you want to create projects in the Deno ecosystem, you can refer to the code of these modules.

Web Developer Checklist (Chrome plug-in)

This is a developer tool that analyzes SEO, usability, mobile Accessibility, Performance and other indicators of website Accessibility and provides data for developers to refer to.

Tagify

Tagify is a powerful input plug-in that displays content in an input as an interactive tag, supporting various custom configurations.

🥅 code snippet

Copy the content to add to the clipboard using JS

Copying content in the browser is as simple as selecting the content and CTRL + C to complete the copying. But this requires the user to select the content, and if you want to copy it with a single click, you’ll need to use some of the browser’s apis to do that.

Here are two methods:

ExecCommand execCommand execCommand execCommand execCommand execCommand execCommand execCommand execCommand exec

According to the MDN documentation, the API document.execCommand is no longer recommended, but it still works in textarea tags. If your page does not have a TextaREA tag, create a hidden Textarea, fill it with content, and then copy it. Example code for a copy operation is as follows:

function copyTextFromTextArea() {
  const area = document.querySelector('#text-area')
  area.select();
  document.execCommand('copy')}Copy the code

Method 2: Clipboard API

The Clipboard API is a more modern, promise-based implementation. Example code to implement a simple copy operation:

function copyTextFromParagraph() {
  const cb = navigator.clipboard;
  const paragraph = document.querySelector('p');
  cb.writeText(paragraph.innerText).then(() = > alert('Text copied'));
}
Copy the code

useIntersectionObserverListen for page element changes

The IntersectionObserver object is used to asynchronously monitor the intersecting status of page elements and their root elements. We can use this feature API to implement a “CSS animation triggered when the page scrolls” function:

const observer = new IntersectionObserver(entries= > {
  // Loop through all entries
  entries.forEach(entry= > {
    // If the element is visible
    if (entry.isIntersecting) {
      // Add animation class
      entry.target.classList.add('square-animation')}})}); observer.observe(document.querySelector('.square));
Copy the code

Used in JavaScriptMedia queries(Media Query)

In general, we use media queries in CSS for adaptive web page development, such as custom style configuration for min-width, max-width, DPR and other device conditions.

In fact, we can also achieve the function of media query through JavaScript. The window.matchMedia method takes a media query as an argument and returns a MediaQueryList object. Mediaquerylist. matches indicates whether the current document page matches the media query.

Here is a simple example (from MDN) :

var para = document.querySelector('p');
var mql = window.matchMedia('(max-width: 600px)');

function screenTest(e) {
  if (e.matches) {
    /* The viewPort width is less than or equal to 600px */
    para.textContent = 'This is a narrow screen -- less than 600px wide.';
    document.body.style.backgroundColor = 'red';
  } else {
    /* The viewPort width is greater than 600px */
    para.textContent = 'This is a wide screen -- more than 600px wide.';
    document.body.style.backgroundColor = 'blue'; }}// Listen for MQL changes
mql.addEventListener('change', screenTest);
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”,