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

If the Ever Given ships were set up next to Salesforce, a skyscraper in San Francisco, they would look something like this. The data comparison between the two is as follows:

Salesforce Tower Length: 326.14m width: 50.95mCopy the code

📰 information

Next, js 10.1 release

Next. Js version 10.1 was released with these features:

  • Fastest triple refresh: Refresh up to 200ms faster in case of unnecessary changes
  • Improved installation dependency time: reduced installation size by 58% and reduced dependencies by 56%
  • next/imageOptimization: Support for Apple Silicon (M1), add more layout and Loader configuration items
  • Integrated e-commerceShopify: Provides a flexible data layer for composable e-business applications
  • The custom500Page: You can add your logo and trademark on the abnormal page
  • strictPostCSSConfiguration: UsingWebpack 5Caching improves performance
  • tsconfig.jsonFile supportextends: Provides extensible configuration files for large TypeScript applications
  • judgePreview modeWhether to enable: The customized content can be displayed in preview mode
  • Routing methods automatically scroll to the top: withnext/linkThe same,router.pushandrouter.replaceIt also scrolls the page to the top automatically
  • Optimized document: added migration, Docker deployment and other content

TypeScript 4.3 Beta release

TypeScript 4.3 Beta supports download, this time with separate GET /set types, the ‘override’ keyword, smarter template string types, class private elements, and editor performance improvements.

One feature is that Promise checks are always true. Then we will not ignore that the return value of async function is Promise

when we use async/await.

Sample code:

async function foo() :Promise<boolean> {
  return false;
}

async function bar() :Promise<string> {
  if (foo()) {
    / / ~ ~ ~ ~ ~
    // Error!
    // In this scenario, foo() is always true
    // Because 'Promise< Boolean >' represents a Promise instance, which is an object
    // Don't forget to use 'await'?
    return "true";
  }
  return "false";
}
Copy the code

Stack OverflowLimiting the number of times code can be copied on a website can no longer be enjoyableCopy/PasteThe code

This is an April Fool’s joke, because you’ll also see another Stack Overflow product: a copy-paste keyboard that looks like this.

This keyboard is not a joke. It’s real. Someone posted a video of the actual keyboard unpacking.

Making automaticallyREADME.mdFile creation directory

GitHub recently had a new feature update that automatically creates a directory and places it (sticky) at the top of the browser when viewing readme. md files in the repository.

Container QueryIt’s really coming

Front-end developers are no strangers to Media Query, which allows developers to split and combine CSS styles based on the device’s screen size, DPR, and so on. This is where responsive layouts come in.

The Container Query concept, which originated in the developer community, is very similar to Media Query, except that instead of judging the entire screen device, it judges an HTML tag. Here’s an example:

@container (min-width: 40em) {
  .card {
    display: flex;
    align-items: flex-start;
    gap: 1.5 rem;
    padding: 1.5 rem;
    max-width: unset;
  }

  .card h2 {
    font-size: 2.5 rem; }}Copy the code

The fastest browser vendor is Chrome, and we’ll see the first iteration in Chrome 91, and since There’s Chromium in Edge, there’s some support for Edge as well.

SvelteKit is currently in Beta

SvelteKit is the next generation framework of Svelte. Based on Svelte syntax, it has completed the code segmentation of SSR, routing, JS and CSS, and ADAPTS to different Serverless platforms.

After comparing Vite 2 with Snowpack, a more modern packaging tool, SvelteKit decided that some of Vite’s features (mainly SSR based design, CSS code splitting, etc.) better suited its needs and represented the new framework.

For early adopters, check out the Documentation for SvelteKit, which may be a dark horse for front-end frameworks in the next few years.

📖 articles

Start with a Promise interview question that keeps me up at night and dive into the Promise implementation details

Promise interview questions, which cover A lot of JavaScript event loops, not only show you how to implement A Promise that complies with the Promise A+ specification, but also help you sort out macro and micro tasks for asynchronous execution.

Although it conforms to the Promise A+ specification, the root cause is caused by A microtask, which is different from the implementation result of the original Promise.

This leads to a thought: specifications are not exhaustive and cannot cover all possible scenarios. What we can do is to be aware of the differences and avoid such problems.

Handling Text Over Images in CSS

If you want to display text on top of an image, displaying text directly will often make the text unreadable or unreadable, depending on the color of the image. In business development, stylist gives the design of the manuscript may use the specific color of text and images (e.g., dark text and white images), but the design draft is only a reference, the color of the real scene images of dynamic and changeable, while developers can’t distinguish the color of the picture, and timely change the color of the text.

If the designer is not aware of the problem, the developer needs to take the initiative to find it and communicate it to the designer. From a designer’s point of view, there are many solutions, and whether or not these solutions can be implemented in the front end technology requires the developer’s extra attention.

This paper mainly aims at the scene of “showing text on pictures”, and analyzes a variety of possible solutions in technology, such as: translucent text layer, gradual text layer, text background and text shadow.

9 Best JavaScript and TypeScript ORMs for 2021

First, what is ORM? ORM is the meaning of object relational mapping, usually used for database fields and programming languages in the class mapping, so that you do not need to directly write complex SQL statements, easy to add, delete, change, and search data. For example, Java middleware has ibatis, Hibernate and so on.

For developers of JavaScript ecosystem, ORM tools are also needed to improve development efficiency when developing back-end applications using Node.js. Nine ORM libraries are introduced in this paper:

  • SequelizeApplication: it is used inPostgres.MySQL.MariaDB.SQLiteandMicrosoft SQL Server
  • BookshelfApplication: it is used inPostgreSQL.MySQLandSQLite3
  • WaterlineApplication: it is used inLocal disk/memory.MySQL.MongoDBandPostgres
  • Objection.jsApplication: it is used inSQLite3.PostgresandMySQL
  • MongooseApplication: it is used inMongDB

Several ORM libraries support the TypeScript library:

  • TypegooseApplication: it is used inMongoDB
  • TypeORMApplication: it is used inMySQL.MariaDB.Postgres.CockroachDB.SQLite.Microsoft SQL Server.Oracle.SAP Hana.sql.jsandMongoDB
  • MikroORMApplication: it is used inMongoDB.MySQL.MariaDB.PostgreSQLandSQLite
  • PrismaApplication: it is used inPostgreSQL.MySQL.SQLite.SQL Server

How GitHub Actions renders large-scale logs

Usually there are thousands or tens of thousands of lines of information in a log file, and rendering the log information directly in a Web page can be a significant performance problem, resulting in page stalling, scrolling delays, and so on.

GitHub uses a similar “load on Demand” technology that displays content only in the visible areas of the user interface, uses blank blocks to hold space outside the view, and calculates height changes in and out of view areas in real time as the user scrolls through the page.

Usually, waterfall streaming image sites will also use this scheme for performance optimization, to ensure smooth scrolling and good page experience.

🛠 Tools and plug-ins

Speed up Web defensively by up to 5 times

Responaccelerators are designed for Web developers with one of their greatest benefits: improved performance. Responthunt, open source on GitHub, also earned ProductHunt best of the day at 2021-03-16.

It reduces the time developers spend debugging their pages by synchronizing devices of different sizes in the same window. The characteristics are summarized as follows:

  • Each device can interact with one device image in click, scroll, and navigation
  • Custom layout
  • A key to useInspectorSelect elements (useDevTools)
  • More than 30 built-in device information, covering mainstream devices, also can be customized device size
  • A key screenshots
  • Support hot loading

Wallace: command line tool for CSS analysis of websites

NPM or YARN global installation can be used:

npm install -g wallace-cli
# or
yarn global add wallace-cli
Copy the code

Then simply type Wallace on the command line, followed by a space, and enter the site links you want to analyze.

Take a look at tinyshare.cn and… There are still many problems to be found.

Aladino: Make your website appShader EffectsThe lightness of special effectsWebGLlibrary

AI technology: Generate images from text

I have to say, this is a very imaginative project. If this thing can be done, there will be no need for actors to shoot TV/movies in the future. Scriptwriters can write scripts to create a movie/TV with one click, and the leading actor can be “blown” out how handsome he is. 😂

Keep an eye on this project for a long time and look forward to the day when it “goes out of the loop”.

IHateRegex: Regular expression love/hate

How many are:

  • 100% knowledge of regular expressions
  • Love regular expressions

If your answer is no, you need this tool. Not only does it contain a lot of common data regex formats, it can also be found by keyword search. Each re has a visual data flow chart that is easier to understand, and at a glance, you may be invincible.

🥅 code snippet

useDocumentFragmentReduce page redrawing

A DocumentFragment is not part of a real DOM tree, but it has a Document-like API, and changes to it do not trigger redrawing of the DOM tree or affect performance.

Here is an example of how to use A DocumentFragment to reduce redrawing.

Typically, we create tags in a loop and add them to the parent node, each tag being added once, each time causing a redraw of the page.

const list = document.querySelector('#list');
const fruits = ['Apple'.'Orange'.'Banana'.'Melon'];

fruits.forEach(fruit= > {
  const li = document.createElement('li');
  li.innerHTML = fruit;
  list.appendChild(li);
});
Copy the code

We can add all elements to the DocumentFragment tag first, and then add the DocumentFragment tag to the parent node once, causing only one redraw.

const list = document.querySelector('#list');
const fruits = ['Apple'.'Orange'.'Banana'.'Melon'];

const fragment = document.createDocumentFragment();

fruits.forEach(fruit= > {
  const li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);
Copy the code

ES6 string search functionstartsWith.endsWithandincludes

In ES5, we often used indexOf to get the index position of a certain piece of text in a string, and in ES6 there are several simpler ways to do this.

// Check whether a text exists
// ES5
'hello'.indexOf('ello') = = =1;
// ES6
'hello'.startsWith('ello'.1);

// ES5
'hello'.indexOf('hell') = = = (4 - 'hello'.length);
// ES6
'hello'.endsWith('hell'.4);

// ES5
'hello'.indexOf('ell'.1)! = = -1;
// ES6
'hello'.includes('ell'.1);
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”,