むかしむかし、私はネットワークテクノロジーの急速な発展に混亂していました。新しいプラグイン、フレームワーク、テクノロジー、または言語機能は毎日リリースされているようです。私は、フリーランサーの間で生き殘り、競爭するためには、Webpack、React、Angular、SVGS、Houdini、CSSグリッドレイアウト、ES6など、他のすべてを?qū)Wばなければならないと固く信じています。 Twitterでアクティブになり、さまざまな會議に出席していることは、この問題に役立っていません。なぜなら、私は常に新しいすべてにさらされているからです。

減速する

ある時點で、私はあきらめました。私はペースに追いつくことができないと決めました。キャリアの観點から見ると、これは私について何も変えていません。実際、誰も私がすべてを知ることを期待していないため、私が以前に持っていたこの感情は私の個人的な認識だけでした。それを遅くすることは賢明な決定でした。なぜなら、それは私の精神的ストレスを和らげただけでなく、私が本當に學びたいことに集中するのに役立ちました。私はまだニュースレター、ブログ、Twitterを読んでいますが、時々新しいことを試してみるのに時間を費やしていますが、自分にプレッシャーをかけません。私は最新の狀態(tài)を維持しようとしていますが、すべての知識を習得する必要性は感じません。

これが私が過去數(shù)年間ネットワークテクノロジーの開発に対処してきた方法ですが、最近、特に今年、私は何か新しいことを?qū)Wびました。それはフレームワークや言語ではありません。革新と進歩を望んでいることで、HTML、CSS、JavaScriptを活用する多くの機能を無視しているという洞察です。言い換えれば、未來を見るのではなく、過去を振り返ると、多くのことを?qū)Wぶことができます。

滝を追いかけないでください

私はこれを無視していると言います。なぜなら、私たちが知っていると思うフロントエンドの言語知識と実際に知っておくべき知識の間には大きなギャップがあると信じているからです。

HTML

ウェブサイトをチェックし、そのフロントエンドの品質(zhì)を評価することは、私の仕事と趣味の一部です。私は多くのウェブサイトの基礎(chǔ)となるコードを見てきましたが、Webアクセシビリティの専門家が毎日宣伝していることのみを確認することしかできません。ほとんどのHTMLドキュメントは悪い狀態(tài)にあります。あなたが私を信じていないなら、これらのデータを見てください：

• 上位1,000,000のホームページのうち、検出可能なWCAG 2エラーの98.1％が存在します。
• 何千ものウェブサイトに含まれています<h7></h7>そして<h8></h8>要素。
• タイトルとメタデータの後、Divは最も人気のある要素です。
• 平均して、利用可能な110以上の要素のうち約30しか使用しませんでした。

HTML構(gòu)文を理解することと、それを正しく使用する方法を知ることには大きな違いがあります。十分に構(gòu)造化されたセマンティックのHTMLドキュメントを作成する際に、私たちは皆、いくつかのことを確認できます。 2020年、私はHTMLを?qū)Wぶのに多くの時間を費やしました。私が構(gòu)築したウェブサイトのユーザーが私の洞察から利益を得ることを願っています。

2020年に學んだHTMLについての私のお気に入りの2つ：

downloadプロパティの値を定義することにより、ダウンロード可能なファイルの名前を変更できます。

<a download="report.pdf" href="http://m.miracleart.cn/link/4bf2689c42aae35e6924a432e435e0b1">ダウンロード（2MB）</a>

value屬性を使用して、順序付けられたリストの數(shù)値を変更できます。

<ol>
<li value="3"> c</li>
  <li value="2">b</li>
  <li value="1">a</li>
</ol>

CSS

MDNまたはCSS-TricksでCSSプロパティを検索するたびに、何か新しいものが見つかります。自分で試してみてください。 margin 、 list-style-type 、またはcolorを検索します。私はあなたが何かを?qū)Wぶと確信しています。

2020年にCSSについて學んだコンテンツのリストは長いです。ここに私のお気に入りの2つのポイントがあります。

url()関數(shù)は、 contentプロパティの値として（一部として）使用できます。

 div :: before {
  コンテンツ：url（ 'marker-icon.png'）;
}

CSSにネイティブの滑らかなスクロールを?qū)g裝できます。

 /*ユーザーが動きの削減を好まない場合にのみアニメスクロール*/
@media（redurecured-motion：no-preference）{
  html {
    スクロールビハビオール：滑らか;
  }

  /*ターゲットとビューポートの上部に間隔を追加する*/
  ：ターゲット{
    スクロールマージントップ：0.8em;
  }
}

JavaScript

私はJavaScriptをたくさん書きますが、それは私の核となる強さではないので、私はそれについて新しいことを?qū)Wんでいます。今年の私のお気に入りの2つのポイントは次のとおりです。

nomoduleプロパティを使用して、JavaScriptモジュールをサポートしていないブラウザでJavaScriptコードのみを?qū)g行できます。

 // nomodule.js
  console.log（ 'このブラウザーはJSモジュールをサポートしていません。'）;

// module.js
  console.log（ 'このブラウザはJSモジュールをサポートしています。'）;

結(jié)論は

HTMLは、すべてのWebサイトのバックボーンです。セマンティック化されたドキュメントの作成方法を知ることは、すべてのWeb開発者にとって最優(yōu)先事項である必要があります。 CSSはある程度非常に複雑であり、新しい概念を?qū)Wぶためには、古いテクノロジーとの比較とそれらが解決する問題を理解する必要があります。 JavaScriptフレームワークとライブラリは無限のストリームに出現(xiàn)していますが、それらはすべて共通點が1つあります。つまり、ネイティブJavaScriptで書かれています。

2020年、私は忘れてしまったことを再學習し、確立された要素と屬性に関する新しい知識を発見しました。あなたがそれを探しているだけなら、あなたは多くの隠された知識を見つけるでしょう。私は2021年にこのトピックをさらに拡張します。なぜなら、まだ探求すべき素晴らしいことがたくさんあるからです。

以上が動きが遅いの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。