Slow Movement

Once upon a time, I was confused by the rapid development of network technology. It seems that new plug-ins, frameworks, technologies or language features are released every day. I firmly believe that in order to survive and to compete among freelancers, I have to learn everything else good at : Webpack, React, Angular, SVGs, Houdini, CSS Grid layout, ES6, and so on. Being active on Twitter and attending various meetings hasn't helped me with this problem because I'm constantly exposed to everything new .

Slow down

At some point, I gave up. I decided I couldn't keep up with the pace. From a career perspective, this has not changed anything about me, because in fact, no one expects me to know everything, and this feeling I had before was only in my personal perception. Slowing it down was a wise decision because it not only relieved my mental stress, it also helped me focus on what I really wanted to learn. I still read newsletters, blogs, and Twitter and still spend some time trying new things occasionally, but I don't put pressure on myself. I try to stay up to date, but I don't feel the need to master all the knowledge.

This is how I have been dealing with the development of network technology for the past few years, but recently, especially this year, I have learned something new. It is not a framework or language—it is an insight that in our desire for innovation and progress, we ignore the many features that leverage HTML, CSS and JavaScript today. In other words: if we look back at the past rather than looking into the future, we can learn a lot.

Don't chase the waterfall

I say this is ignoring because I believe there is a huge gap between the front-end language knowledge we think we know and the knowledge we should actually know.

HTML

Checking the website and evaluating its front-end quality is part of my job and hobby. I've looked at the underlying code for many websites and I can only confirm what web accessibility experts are promoting every day: Most HTML documents are in a bad state. If you don't believe me, look at these data:

• Of the top 1,000,000 homepages, 98.1% of the detectable WCAG 2 errors exist.
• Thousands of websites contain<h7></h7> and<h8></h8> element.
• After titles and metadata, div is the most popular element.
• On average, we only used about 30 of the 110+ available elements.

There is a huge difference between understanding HTML syntax and knowing how to use it correctly. We can all review some things when writing well-structured and semantic HTML documents. In 2020, I spent a lot of time learning HTML and I hope the users of the website I built will benefit from my insights.

Two of my favorite things about HTML I learned in 2020:

You can change the name of the downloadable file by defining a value in download property.

 <a download="report.pdf" href="https://www.php.cn/link/4bf2689c42aae35e6924a432e435e0b1">Download (2MB)</a>

You can use value attribute to change the number in the ordered list.

<ol>
<li value="3"> C</li>
  <li value="2">B</li>
  <li value="1">A</li>
</ol>

CSS

Almost every time I look up CSS properties on MDN or CSS-Tricks, I find something new. Try it yourself. Search for margin , list-style-type or color . I'm sure you'll learn something.

The list of content I learned about CSS in 2020 is long, here are two of my favorite points.

You can use url() function as (part of) the value of content property.

 div::before {
  content: url('marker-icon.png');
}

You can implement native smooth scrolling in CSS.

 /* Anime scrolling only if the user does not prefer reducing motion*/
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Add some spacing between the target and the top of the viewport*/
  :target {
    scroll-margin-top: 0.8em;
  }
}

JavaScript

I write JavaScript a lot, but it's not my core strength, so I've been learning new things about it. Here are two of my favorite points this year:

You can use the nomodule property to run JavaScript code only in browsers that do not support JavaScript modules.

 // nomodule.js
  console.log('This browser doesn't support JS Modules.');

// module.js
  console.log('This browser supports JS Modules.');

in conclusion

HTML is the backbone of every website; knowing how to write semanticized documents should be the top priority for every web developer. CSS is very complex to some extent, and in order to learn new concepts, we must understand their comparison with old technologies, and the problems they solve. JavaScript frameworks and libraries are emerging in an endless stream, but they all have one thing in common, that is, they are written in native JavaScript.

In 2020, I re-learned what I have forgotten and discovered new knowledge about established elements and attributes. If you only look for it, you will find a lot of hidden knowledge. I will expand on this topic further in 2021 because there is still a lot of great things to explore.

The above is the detailed content of Slow Movement. For more information, please follow other related articles on the PHP Chinese website!