この記事では、最近使用したWeb開発者向けのヒントとコツを集めました.コンテンツが初心者に向けられているにも関わらず、より高度な開発者にとって良いリマインダーになることを願っています.

1 .現在のタイムスタンプを取得する

これはちょっとの速さですが、特におもしろいことがわかりました.

const ts = + new Date(); // Same as (new Date()).getTime()

console.log(ts);
// 1576178666126

デモ:https://codepen.io/armelpingault/pen/eYmBzEG
によるとdocumentation :

The valueOf() method returns the primitive value of the specified object. The shorthand notation is prefixing the variable with a plus sign.

そして、場合には正確に何かについてのアラームが必要ですprimitive value :

In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are 7 primitive data types: string, number, bigint, boolean, null, undefined, and symbol.

ロングプレスの検出

私は、ユーザーインタラクションに応じて2つの異なった行動を引き起こすべきボタンを持っています:通常のクリックの上の1つの行動とボタンの上の長いプレスのもう一つの行動

const btn = document.querySelector('button');
let timer;

btn.addEventListener('mousedown', (e) => {
  timer = + new Date();
});

btn.addEventListener('mouseup', (e) => {
  if (+ new Date() - timer < 500) {
    console.log('click');
  } else {
    console.log('long press');
  };
});

デモ:https://codepen.io/armelpingault/pen/rNaLpLE

3 .オブジェクトの配列をソートする

これは古典的です、我々はしばしばオブジェクトの1つの特性の値に従ってオブジェクトの配列をソートする必要があります.

const arr = [
  {name: 'Jacques', age: 32},
  {name: 'Paul', age: 45},
  {name: 'Pierre', age: 20}
];

arr.sort((firstEl, secondEl) => firstEl.age - secondEl.age);
// [{name: 'Pierre', age: 20}, {name: 'Jacques', age: 32}, {name: 'Paul', age: 45}]

// And if you want to sort in descending order:

arr.sort((firstEl, secondEl) => secondEl.age - firstEl.age);
// [{name: 'Paul', age: 45}, {name: 'Jacques', age: 32}, {name: 'Paul', age: 20}]

デモ:https://codepen.io/armelpingault/pen/zYxoBPW
また、sort() 関数は、配列を適切にソートし、コピーを行わない.

コンポーネント間通信

私のJavaScriptのコンポーネントの2つが互いに通信する必要があるとき、私はCustom Event :

const el = document.createElement('div');
const btn = document.querySelector('button');

const event = new CustomEvent('sort', {
  detail: {
    by: 'name'
  }
});

btn.addEventListener('click', () => {
  el.dispatchEvent(event);
});

el.addEventListener('sort', (e) => {
  console.log('Sort by', e.detail.by);
});

デモ:https://codepen.io/armelpingault/pen/gObLazb

オブジェクトの配列の深さと浅いコピー

このトピックでは、記事全体に値する、あなたはそれをカバーする記事の何千もを見つけるでしょうが、私は私が私の同僚のいずれかと数日前に議論の後、ここで別のリマインダーを置くと思いました.
オブジェクトの配列のコピーを作成する必要があるとき、それは魅力的です
です

const arr1 = [{a: 1, b: 2}, {c: 3, d: 4}];
const arr2 = arr1;

しかし、これは元のオブジェクトへのリファレンスをコピーし、変更するとarr1 , then arr2 も変更されます.

const arr1 = [{a: 1, b: 2}, {c: 3, d: 4}];
const arr2 = arr1;
arr1[1].c = 9;

console.log(arr2);
// [{a: 1, b: 2}, {c: 9, d: 4}];

デモ:https://codepen.io/armelpingault/pen/OJPbXEy
使用spread operator 配列の浅いコピーを作成するのに役立ちます.これは新しい配列を作成しますが、配列内のオブジェクトへの参照を保持します.

const arr1 = [{a: 1, b: 2}, {c: 3, d: 4}];
const arr2 = [...arr1];

arr1.push({e: 5, f: 6});
arr1[0].a = 8;

console.log(arr2);
// [{a: 8, b: 2}, {c: 3, d: 4}];

デモ:https://codepen.io/armelpingault/pen/GRgNqBg
ご覧の通り、新しい要素をarr1 変化しないarr2 . しかし、私が中でオブジェクトを修正するならばarr1 , それから、我々は内部の変化も見ますarr2 .
もしアレイの深いコピーを作りたいなら、次のようにします.

const arr1 = [{a: 1, b: 2}, {c: 3, d: 4}];
const arr2 = JSON.parse(JSON.stringify(arr1));
arr[1].d = 6;

console.log(arr1);
// [{a: 1, b: 2}, {c: 3, d: 6}];

console.log(arr2);
// [{a: 1, b: 2}, {c: 3, d: 4}];

デモ:https://codepen.io/armelpingault/pen/BayQzOK
この場合、私が何を変えてもarr1 , それは何の影響もありませんarr2 .
注意JSON.stringify , オブジェクトインスタンス(マップ、set、弱マップ、弱集合)は、列挙可能なプロパティのみをシリアル化します.

クリップボードにコピーする

これは、私がaの内容をコピーするのに使用する少しの断片です<textarea> クリップボードに

const textarea = document.querySelector('textarea');

const copy = () => {
  textarea.select();
  document.execCommand('copy');
  alert('Content popied to clipboard!');
};

textarea.addEventListener('click', copy);

デモ:https://codepen.io/armelpingault/pen/jOEVrQw
また、Clipboard API それはクリップボードを操作するためのより多くのオプションを提供しています.しかし、それはまだ実験的な機能とbrowser support is still pretty low .

7 .それらすべてを支配する1つのNPMコマンド

展開コマンドが1つの単純なラインであるプロジェクトの非常に大きいファンです.
最近プロジェクトに取り組んでいる間、私たちは開発環境をスタートさせるために2つのコマンドを必要としていました.サーバーフォルダとクライアントフォルダからの1つです.さて、これらの2つのコマンドをrootフォルダから実行できるコマンドにする必要がありました.

Projects
|
|-- client
|      package.json
|
|-- server
|      package.json
|
package.json

NPMパッケージのおかげでconcurrently これにより、いくつかのNPMコマンドを同時に実行することができます.

// After installing the npm package
npm install --save-dev concurrently

// You should now see it in your package.json
"devDependencies": {
  "concurrently": "^5.0.0"
}

// Then add the "master" command to the root package.json
"scripts": {
    "start": "concurrently \"npm start --prefix ./client\" \"npm start --prefix ./server\"",
}

The --prefix オプションは、あなたの選択のサブフォルダ内の任意のNPMコマンドを実行します.

npm run build --prefix ./client

SVGファイルの最適化

我々は日常的にSVGのアイコンと多くの作業、およびそれらのアイコンは、通常WebデザインエージェンシーまたはクライアントのWebデザイン部門によって提供されます.
それらの多くは実際に作成され、Adobe Illustratorのようなソフトウェアで生成されます.彼らはグラフィックデザインを作成するための素晴らしいツールですが、彼らは残念ながらまた、あなたのエクスポート設定に注意を払っていない場合、あなたのSVGファイルに余分な無駄なマークアップを作成します.
私のSVGファイルを最適化するためにSVG Optimizer , プロジェクトでの統合はとても簡単です.

// Install SVGO globally
npm install -g svgo

// Optimize all SVG file from -f "folder" to -o "folder"
svgo -f assets/src/svg -o assets/dist/svg

前回、私はそれを実行した、私はすべてのファイルのサイズの約〜30 %の平均利得を測定することができました.悪くない!

ChromeでのWebSocketメッセージの検査

この記事の最後のヒントのために、私は再投稿ですan answer I wrote on StackOverflow 私はリアルタイムのWebアプリケーションの開発に取り組んで必要なこと.

オープンクローム開発ツール.

タブをクリックします.

フィルタWSをクリックします.

ページを再読み込みすると、名前の列で接続を確認できます.

メッセージをクリックします.

今、あなたは3つの列であなたのWebSocketsですべてのコミュニケーションを見るべきです:データ、長さと時間.

コミュニティと共有したい他のウェブ開発のヒントやコツは、コメント欄に追加してください.