HTML5.2 new TAB dialog

The new version of HTMl5.2 has an interesting tag, that is, the dialog window or window, also known as dialog, its basic usage is as follows:

<dialog open>
    //soming...
</dialog>
Copy the code

The open property indicates that the window is displayed by default and that the user can interact with it. Close (): close the dialog box. Optionally, pass in a parameter of type {domxref(“DOMString”)}} to update the returnValue of the dialog box. 2. Open (): Displays the dialog box non-stylized, that is, after opening the dialog box, you can still interact with other content. Optionally pass in an argument of type Element or MouseEvent to define where the dialog will be displayed. 3. ShowModal (): Displays this dialog in a pattern and will be on top of all other dialogs (blocking interaction with the other dialogs). Optionally pass in an argument of type Element or MouseEvent to define where the dialog will be displayed. There is a difference between show() and showModal(), which just shows dialog, and showMadal(), which blocks the other pop-up layers. To turn off dialog, press ESC. Dialog needs to be restyled, since CSS itself is the default style. Here is a demo code:

<! -- create a dialog --> <dialog> <h1> This is the title of the dialog </h1> <div> This is the content of the dialog </div> <button id="close_dialog"</button> </button id="open_dialog"> Open </button> <! - js code - > < script > var dialog = document. The getElementsByTagName ("dialog")[0],
        openDialog = document.getElementById("open_dialog"),
        closeDialog = document.getElementById("close_dialog");
    openDialog.onclick = function(){
        dialog.showModal();
    };
    closeDialog.onclick = function(){
        dialog.close();
    };
</script>
Copy the code

Grid layout a new CSS website layout

The CSS Grid layout consists of two core components: Wrappers (parent elements) and Items (child elements). The Wrapper is the actual Grid and the items are the contents of the Grid. Here is a wrapper element containing six items:

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
Copy the code

To turn the wrapper element into a Grid, simply set its display property to grid:

.wrapper{
    display:grid;
}
Copy the code

To make it a two-dimensional grid container, we need to define columns and rows. Let’s create 3 columns and 2 rows. We will use the grid-template-row and grid-template-column properties.

.wrapper{
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:50px 50px;
}
Copy the code

As you can see, we wrote three values for grid-template-columns, so we get three columns. We want to get two rows, so we specify two values for grid-template-rows. These values determine how wide we want our columns to be (100px) and how high we want the number of rows to be (50px). The results are as follows:

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
Copy the code

Now let’s create a 3×3 grid:

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
Copy the code

You get the following layout:

To locate and resize items(child elements), we use the grid-column and grid-Row properties:

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}
Copy the code

So what we’re going to do here, we want item1 to occupy from the first grid line to the fourth grid line. In other words, it occupies the whole row by itself. Here’s what appears on the screen:

.item1 {
    grid-column: 1 / 4;
}
Copy the code

To make sure you understand this concept correctly, let’s rearrange the other items(child elements).

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}
Copy the code

Here’s how the layout looks on the page:

Parcel: Super fast Web application wrapper

While WebPack brings a lot of configurability, it also brings complexity. Parcel brings simplicity. Officials call the Parcel “zero configuration”.

As mentioned above — Parcel has an out-of-the-box development server built in. The development server will automatically rebuild your application when you change files and support hot replacement of modules for rapid development. Parcel has something to offer? 1. Quick Packaging — Parcel is faster than Webpack, Rollup, and Browserify. Parcel supports JS, CSS, HTML, resource files, and more — no plugins — to make it more user-friendly. 3. Zero configuration. Out of the box code splitting, module hot replacement, CSS preprocessor, development server, cache, etc. 4. More friendly error logs. When should we use Parcel, Webpack, or Rollup? It’s entirely up to you, but I personally use each of these packers in the following situations: Parcel: small to medium projects (lines of code less than 15K) Webpack: large and enterprise projects. Rollup: for NPM packages. Let’s give Parcel a chance. Parcel website address: *parceljs.org/

4. Can PWA bring a new round of big front-end technology reshuffle?

Progressive Web Apps, better known as PWA. Since 2015, the technology around PWA has continued to evolve and optimize, providing a great solution in both user experience and retention. PWA can combine the strengths of the Web and apps: incremental, responsive, offline, app-like interaction, instant updates, security, searchable, pushable, installable, and linkable. A PWA is not a single technology, but a Web App that uses multiple technologies. Its core technologies include App Manifest, Service Worker, Web Push, Credential Management API, and so on. Its core goal is to improve the performance of Web apps and improve the user experience of Web apps. Let’s take a closer look at whether these core technologies really make up for the Web’s weaknesses.

  1. Web App Manifest

The Web App Manifest was created to solve the problem of user retention. It is an external linked JSON file in which metadata such as the name, address, icon and so on of the site are exposed by the browser. By introducing the JSON file in your browser, the browser to recognize the existence of this file, can according to your own mechanism determines whether the pop-up is added to the desktop dialog box, and generating an application icon on the desktop, by clicking on the icon into the desktop application with immersive experience, full screen, not the browser address bar, It also automatically adds an app splash screen.

  1. Service Worker

The Service Worker is a special Web Worker that runs independently of the main page thread. It can intercept and process network requests. With the Cache Storage API, the developer can freely manage the HTTP requests sent by the page. This is why Service workers can take Web sites offline.

  1. Push Notification

Push Notification is actually a combination of two apis, the Notification API and the Push API. The Notification API provides the ability for developers to send notifications to users, including requesting permission to display notifications, initiating notifications, and customizing the types of notifications. The Push API, on the other hand, allows the server to send offline messages to the user, even if the user is not currently open to your page or even the browser.

Browser vendors started supporting PWA in 2017, apple quietly launched a Service Worker a few months ago, and iOS will support PWA. The major sites have practice, with PWA has become a trend.