“Front-end micro weekly” is updated every Friday, bringing you a different front-end weekly new experience

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

🖼 on

📰 information

Vite hit 100,000 downloads per week on NPM and GitHub stars hit 25,000

Latest news, Vite is currently reaching a milestone stage.

  • NPM was downloaded 100,000 times a week
  • GitHub Star hits 25,000
  • 249 code contributors
  • Discord has more than 2,500 members

Stack Overflow found that a quarter of visitors liked itctrl+c

On April Fool’s Day this year, Stack Overflow made a joke of charging users for every time they copy code (check out issue 7 of the front End micro Weekly, if you don’t know).

In fact, Stack Overflow did something stealthily on the page, listening for users to press CTRL + C on the page, analyzing user data from March 26 to April 9, and finding some interesting things:

  • 7,305,042 articles and comments generated 40,623,987 copy operations
  • For every 10 copies from the question, there are 35 copies in the comments
  • The number of copies of the rejected answer is greater than the number of copies of the accepted answer
  • About 80% of the replication comes from users who are not logged in or who have zero credits
  • The tag with the highest number of copies ishtml/css, followed byjavascript
  • The answer with code block is How to iterate over rows in a DataFrame in Pandas
  • TypeError: this.getOptions is not a function [closed] TypeError: this.getOptions is not a function [closed]
  • The most copied question with code blocks is How to create an HTML button that acts like a link?
  • The most copied text question is Updates were rejected because the tip of your current branch is behind its remote counterpart

Vue Devtools v6 Beta8 released

Vue Devtools has released the eighth beta version of V6, bringing new features and changes to the Firefox browser.

  • supportVue 2, while supportingvue-routerandvuex
  • Plug-in permission ability, you can configure whether different permissions are enabled in the plug-in details page
  • When the page is refreshed, the selected state of the element checked is preserved
  • In the inspector, Copy Path can be selected to Copy the path of the property
  • You can edit setters that evaluate properties
  • .

Major browsers already support the Flexbox attribute: Gap

With Apple’s Safari supporting the Gap attribute flexbox in the latest versions of macOS and iOS, it is now available in all major browsers.

The GAP attribute in CSS applies to elements in the Flexbox layout and creates a gap between Flex items (similar to margin). Unlike Margin, the gap only exists between Flex items, not necessarily in each direction. Example code:

<div class="flex-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<style>
.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>
Copy the code

The above example code looks like this:

📖 articles

Why We Switched From Webpack To Vite

The Replit team found that projects built by React and Webpack had become increasingly complex and inefficient, and development environments were being built more slowly. Over the past few weeks, they’ve been slowly switching to Vite to build a development environment and getting a taste of what it means to be fast.

A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors

The CSS working Group’s draft for Selector Level 4 contains some pseudo-class selectors that are already supported in most modern browsers. The rules and effects of these pseudo-class selectors are described in detail in this paper.

  • :any-link
  • :focus-visible
  • :focus-within
  • :is()
  • :where()
  • The enhanced:not()
  • :has()
  • Level 3 of the:empty

Incomplete List of Mistakes in the Design of CSS

This is an incomplete list of CSS design errors, such as:

  • white-space: nowrapIt should bewhite-space: no-wrap
  • vertical-align: middleIt should betext-middleorx-middle“Because it’s not really Middle
  • Box-sizingShould be the defaultborder-box
  • border-radiusShould callcorner-radius
  • .

There are a lot of article, read carefully, feel very reasonable, worth a look.

The Making (and Potential Benefits) of a CSS Font

This is a way to render text without using fonts, instead using CSS fonts to render text content.

The authors took the creative step of drawing letters in SVG and then combining those letters into text as a way to render text without using font files.

Overall, it is a good exploration, and the article also gives the advantages and disadvantages of font files and CSS fonts, if you are interested, you can read the text in detail.

🛠 Tools and plug-ins

Mighty: cloud browser

You’ve heard of “cloud gaming”? Cloud the operation principle of the game is in the cloud, there is a machine to run the game and the page will be returned to the user by means of video streaming holdings of equipment (computers, tablets and mobile phones), so that the user’s local devices do not need to play a large amount of calculation work, just like watching video to play games, also ensure the different on the gaming experience. Of course, cloud games will be relatively high requirements for the network.

Mighty’s “cloud Browser” concept is similar to “Cloud Gaming” in that it streams browser content from the cloud back to the user’s handheld device so that users can access multiple tabs without running out of memory or experiencing fan rage. After all, many of today’s React/Vue/Angular front-end applications are getting bigger and bigger, and they’re taking up more and more browser memory. Like “cloud gaming,” it has network speed requirements, otherwise your text typing and mouse movement will lag significantly.

Mighty is currently in private beta. You can fill in the questionnaire to obtain the qualification for private beta. It will be maintained on a paid subscription basis in the later stage. Friends who want to try fresh food can apply for it by filling out a questionnaire on the official website.

Inspx: Page style debugger

This is an interesting plugin that allows you to view elements without enabling DevTools, as shown in the image above.

It is also very convenient to use, roughly divided into several steps:

  • Install dependenciesnpm install inspx --save-dev
  • Let it wrap around your React app 
    import Inspect from 'inspx';

<Inspect>
  <App />
</Inspect>
Copy the code
  • To start the project, hover over the page element and install simultaneouslyoptionKey (In Windows, the value isaltKey)

SVG Background: Generates an SVG Background image

SVG Background is a simple, easy-to-use tool that can generate SVG Background images in one click. It currently supports a variety of Background styles.

🥅 code snippet

Draw water droplets with CSS

.drop {
  position: relative;
  height: 200px;
  width: 200px;
  background: #54ABFB;
  border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
  opacity: 0.8;
  border: 2px solid #3D93FF;
}
.drop::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: #318CFE;
  border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
  box-shadow: -20px 30px 16px #1B6CFB,
              -40px 60px 32px #1B6CFB,
              inset -6px 6px 10px #1B6CFB,
              inset 2px 6px 10px #1A74E5;
              inset 20px -20px 22px white,
              inset 40px -40px 44px #A8CEFF;
}
.drop::after {
  content: "";
  position: absolute;
  left: 130px;
  top: 40px;
  height: 40px;
  width: 40px;
  background: #E6FDFB;
  border-radius: 44% 56% 46% 54% / 36% 50% 50% 64%;
  box-shadow: 16px 40px 0 -10px white;
  opacity: 0.8;
}
Copy the code

letfocusThe effect becomes more interesting

Here is an example of code to enable the Focus animation effect for a user who has not set animation attenuation:

@media (prefers-reduced-motion: no-preference) {
  :focus {
    transition: outline-offset .25s ease;
    outline-offset: 5px; }}Copy the code

window.showOpenFilePicker: allows you to read and write local files

Window. The showOpenFilePicker is at present is still in Working Draft stage of a standard, at present has been Chrome and Edge browser support. Note that this API can only be used in a secure context (HTTPS).

The magic is that it opens the browser to read and write local files, displays a file selection window (similar to what happens when “File input” is clicked), retrits file content via the API and saves it to a file (you need to select the file before you can save it to the file).

You can go to the window above. ShowOpenFilePicker sample page to read and write files manually once the operation of the open and save the file (using the Chrome/Edge 86 + version of the browser).

Part of the sample code in the figure above is as follows (the full sample code for showOpenFilePicker) :

const textarea = document.querySelector('textarea')

// Handle [cmd]+[s] and [cmd]+[o] shortcuts
window.addEventListener('keydown'.event= > {
  if (event.key === 'o' && event.metaKey) {
    event.preventDefault()
    highlight('cmd+o')
    openFile()
  }

  if (event.key === 's' && event.metaKey) {
    event.preventDefault()
    highlight('cmd+s')
    saveFile()
  }
})

let fileHandle;

async function openFile() {
  const [handle] = await window.showOpenFilePicker()
  fileHandle = handle

  const file = await handle.getFile()
  const text = await file.text()

  textarea.value = text
}

async function saveFile() {
  const writable = await fileHandle.createWritable()
  await writable.write(textarea.value)
  await writable.close()
}
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 micro blog”