“Front-end Micro Weekly” is updated once a week, finding foreign front-end technology related information and excellent tools and articles, providing you with a more cutting-edge perspective of front-end technology.

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

😬 Topic of the week

Development teams often conduct Code Review “assemblies”, where they are sure to encounter a lot of bizarre Code. This week, we’ll be talking about some of the “magic” code you’ve seen in the comments section

📰 information

Ghost 4.0 release

Ghost is a popular open source publishing tool (CMS) released with a major update to 4.0.

This release adds Dashboard, people features, integration tweaks, and neat front-end changes such as faster response times, lazy loading of all images, and significant performance improvements.

Socket. IO 4.0.0 release

Socket.IO 4.0 is a major release update with some major changes, mainly at the API level. Such as:

  • io.to()The present is immutable;
  • wsEngineConfiguration update is to solve the problem:Critical dependency: the request of a dependency is an expression
  • eventSupport for TypeScript type definitions
  • .

Storybook experimental support for WebPack 5

Storybook is a popular UI component workshop that allows you to parse components online and preview them easily.

In addition to supporting WebPack 5, the Storybook team has designed a pluggable Builder abstraction that can be used to explore next-generation Builders such as Snowpack, ESBuild, and Vite.

V8 (and Chrome) will have a faster release cycle

Google Chrome has accelerated its release cycle from six weeks to four weeks, so expect to see Chrome V100 released by the end of 2021. V8 has also adjusted its release cycle to accommodate this change.

📖 articles

What I think of Svelte

Svelte is a highly rated framework outside of the three front-end frameworks. It is similar to Vue in usage, but quite different in underlying principles. Svelte implements Reactivity at the compile level, while Vue implements Reactivity at the runtime.

This article tries to give readers who have only heard of Svelte a glimpse of what Svelte is and what differentiates it from other frameworks, from a superficial principle and design perspective, by telling them what Svelte does at compile time.

🔑 OAuth 2.0 flows explained in GIFs

Open Authorization (OAuth) enables third-party websites or apps to access user data without sharing their credentials. It is a set of rules that make authorized access possible, allowing users to authorize what resources the app can access and restrict access accordingly.

GIF diagrams are creatively used to demonstrate the overall data exchange process, so that readers can clearly understand the whole process and help understand the underlying principles and rules.

JavaScript: What is the meaning of this?

What does this mean? This is an old interview question, and it’s very basic. The article explains what this refers to by enumerating different scenarios. It is very clear and easy to understand, and I recommend reading it.

CSS-in-JS support in DevTools

Since Chrome 85, DevTools has supported CSS-in-JS. Existing CSS-in-JS frameworks use the CSSOM API to do the main dependency method in the development environment. This article details how Chrome DevTools implements this support.

🛠 Tools and plug-ins

npm diff: Create the version diff of the NPM package

In version 7.5.0 of NPM, a new command has been introduced: NPM diff. This command functions like Git diff and can compare files in different versions of distributed NPM packages.

Command example Operations:

# grammar
npm diff --diff=<spec-a> --diff=<spec-b>

# sampleNPM diff - diff = [email protected] - diff = [email protected]Copy the code

CSS Generators

The author has written a series of articles listing tools that are useful to developers and designers alike. This article describes the CSS Generator’s tools, from CSS shadow features to simple radial simplicity to CSS hierarchies and wiper.

AVIF converter

AVIF, short for AV1 Image File Format, stands for a new Image Format developed by AOMedia, an open source group that includes Netflix, Google, and Apple.

It compresses images much more than traditional image formats and can be parsed in JavaScript, so even if browsers don’t support the image format, you can support it by introducing Polyfill.

The above tool can easily compress PNG, JPG, Webp and GIF images into avif images with more than 90% compression.

transition.css: Easily get CSS animations

The site is a CSS animation related tool, a variety of animation effects, click to preview, one click copy of the animation CSS code.

🥅 code snippet

CSS Reset

CSS Reset means to Reset the default style. Most tag elements in HTML have a default attribute value when displayed in different browsers. To avoid redefining element styles and to ensure that page elements appear the same in different browsers, we usually need to reset the styles. You can do this using a CSS Reset library, such as Normalize, or you can use this simple version yourself:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
Copy the code

Optional Chaining

Optional Chaining is a Javascript feature that improves the robustness of lazy evaluation. It is in Stage 4 and has been implemented in many browsers for a long time. TypeScript also supports Optional Chaining as of V3.7 (2019.11). Here’s some sample code to help you understand it:

// This is a sample object
const person = {
  name: "Catalin Pit".socialMedia: {
    twitter: "@catalinmpit".instagram: "@catalinmpit".linkedin: "@catalinmpit",},experience: "Junior".employed: true
};

// Previously, if we wanted to access the 'Twitter' field, we had to do many layers of attribute judgment
if (person && person.socialMedia && person.socialMedia.twitter) {
  console.log(person.socialMedia.twitter);
}

// ---------------------------------
// With optional chaining, you can write this as optional chaining
if(person? .socialMedia? .twitter) {console.log(person.socialMedia.twitter); // outputs @catalinmpit
}

// You can also omit the if judgment by writing it like this
console.log(person? .socialMedia? .twitter);Copy the code

Major browsers already support this feature, and you can safely use it in your projects.

Splits a string into an array of characters

Normally, we want to split a string into individual characters by doing this:

const firstName = "Catalin";

const firstNameArr1 = firstName.split(' ');
console.log(firstNameArr1);
// ['C', 'a', 't', 'a', 'l', 'i', 'n']
Copy the code

In ES6+ syntax, we can easily implement this logic using the extended operator:

const firstName = "Catalin";

const firstNameArr2 = [...firstName];
console.log(firstNameArr2);
// ['C', 'a', 't', 'a', 'l', 'i', 'n']
Copy the code

Using CSS functionsattr()Create dynamictooltip

Tooltip is a small block that highlights a tip when the mouse is clicked or hovered over an element. Here’s a way to implement tooltip without using JavaScript:

<span
  class="tooltip"
  data-tooltip="Tooltip content"
>The mouse is suspended</span>
Copy the code
.tooltip:before {
  content: attr(data-tooltip);
}
Copy the code

Simple CSS to implement the wheel – cast graph

.container {
  scroll-snap-type: x mandatory;
}
.slide {
  scroll-snap-align: start;
}
Copy the code

💻 Front-end position

If there is a need for front-end positions in the near future, you can add them to the comment section. You can also contact me personally or by email at [email protected].