動きが遅い

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

減速する

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

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

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

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

HTML

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

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

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

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

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

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

value属性を使用して、順序付けられたリストの数値を変更できます。

<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を検索します。私はあなたが何かを学ぶと確信しています。

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

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

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

CSSにネイティブの滑らかなスクロールを実装できます。

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

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

JavaScript

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

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

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

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

結論は

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

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

以上が動きが遅いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。