あなたが知っておくべき15以上のフロントエンドツール:2020年の私のお気に入りの発見

あなたが知っておくべき15以上のフロントエンドツール:2020年の私のお気に入りの発見

あなたが知っておくべき15以上のフロントエンドツール:2020年の私のお気に入りの発見
СОДЕРЖАНИЕ
02 июня 2020

もう1年が経過しました。業界の多くのWeb開発者と同じように、ワークフローに組み込むことを検討している多数の新しいフロントエンドツールを発見したことでしょう。私は同じ船に乗っています。特に、何が新しいのかを定期的に調査することに深く関わっています。 ツールの風景.


この投稿では, いくつかのスクリーンショットとデモを使用して、2020年に役立つと思われる最も興味深いフロントエンドツールのいくつかをまとめます。. これらは必ずしも最も人気のあるツールや最もホットなツールであるとは限りませんが、私はそれらのそれぞれがそのユースケースでユニークであり、もう少し注目に値すると思います。これらは本質的に私です フロントエンドツールで今年のお気に入りの検索結果.

最高のフロントエンドツール

ホットキー

フロントエンドツール:ホットキー

JavaScriptを使用したキーストロークの検出は、それほど複雑な作業ではありませんが、GitHubのチームによるこの小さなユーティリティにより、非常に簡単になります.

それを使用すると、キーボードショートカットで要素のアクションをトリガーできます.

ショートカットの種類には、キー、キーコンボ、さらにはキーシーケンスが含まれます。 1つのアクションに複数のショートカットを設定することもできます.

JavaScriptは、インポートとともに1つの宣言にすぎません。

‘./hotkey.js’から{install}をインポートします。

for(const el of document.querySelectorAll( ‘[data-hotkey]’)){
インストール(el)
}

そのコードが配置されると、主な作業はHTMLで行われます。使用したショートカットに応じてコンテンツを表示するために作成したリンクのリストは次のとおりです。

各リンクに追加されたdata-hotkey属性に注意してください。これらは、ターゲットアクションのホットキーを有効にするものです(この場合、CSSを介して:targetセレクターをトリガーします)。複数のホットキーはカンマで区切ります。キーの組み合わせはプラス記号で区切られています。キーシーケンスはスペースで区切られています.

こちらがライブデモです。

それぞれのショートカットを試してみると、JavaScriptパネルのコードは最小限に抑えられています。モジュールがインポートされると、セットアップは非常に簡単です。そして、ここでの補足として、モーダルウィンドウに表示する複数のショートカットキーを備えたアプリがある場合(Twitter、GitHubなどで行われるように)、チェックアウトすることをお勧めします。 QuestionMark.js, 私の古いプロジェクト.

もちろん、キーボードショートカットを使用する場合は、アクセシビリティの問題に注意する必要があります。詳細については、リポジトリのREADMEを確認してください。.

Freezeframe.js

フロントエンドツール:Freezeframe.js

Webページに短いビデオを埋め込むことは、行われているアクションを示すために一般的です。アニメーションGIFも適切な場合があります。ただし、GIFはコンテンツを自動的に再生するため、気が散る傾向があります.

この小さなユーティリティを使用すると、HTMLに埋め込まれたアニメーションGIFにビデオのような機能を追加できます.

Freezeframe.jsソースをページに含めたら、必要なJavaScript宣言は1つだけです。

新しいFreezeframe( ‘。freezeframe’、{
トリガー:「ホバー」,
オーバーレイ:false
});

2番目の引数を省略した場合(例:new Freezeframe( ‘。freezeframe’))、デフォルトでは再生ボタンはなく、ホバー時にアニメーションがトリガーされます。これの唯一の欠点は、これはアニメーションGIFであるため、技術的には "一時停止" それ、できるのは "やめる" それ(最初からやり直すことを意味します)。しかし、通常はGIFの場合、これは大した問題ではありません.

これは、3つの異なる例のデモです。

ただし、このツールを単独で使用しても、完全なGIFがバックグラウンドで読み込まれているように見えるため、パフォーマンスが低下しない場合があります。ただし、ページの読み込み時にGIFが画面外にある場合は、遅延ロードライブラリと一緒に使用できると想定しています。.

ARCツールキット

フロントエンドツール:ARCツールキット

主要なフロントエンドツールには、多くのアクセシビリティオプションを含める必要があります。.

これは、WCAG 2.1レベルAおよびAAガイドラインに関連するアクセシビリティエラーと警告を見つけるのに役立つタブを開発者ツールに追加するChrome拡張機能です.

このツールが非常に優れている2つの理由:

  • 開発ツール内の既存のテスト/デバッグワークフローと統合します
  • アクセシビリティに関する洞察で開発者コミュニティでよく知られているThe Paciello Groupによって作成されました

ARCツールキットの機能

拡張機能がインストールされたら、開発者ツールのタブを選択して、 "テストを実行する". 最初の出力は、前のスクリーンショットに表示されているものと似ています。次のスクリーンショットに示すように、そこからドリルダウンして、特定の機能に関連する潜在的なアクセシビリティの問題を表示できます。

ARCツールキットの機能のドリルダウン

に注意してください "リンク集" 左側のオプションの横にチェックマークがあります。これは、今回の調査で選択したものです。これにより、ライブページの開発者ツールの上に表示されるように、選択したすべてのオブジェクトの場所を示すオーバーレイがページに追加されます.

Scene.js

フロントエンドツール:Scene.js

毎年、フロントエンドツールの状況に新しい種類のアニメーションライブラリがあるようです.

今年の私の選んだのはScene.jsです.

これは、これまでに紹介された他のアプリのように、数分で簡単に操作できるものではありません。.

APIに慣れるには、次のような学習曲線があります。

let scene = new Scene({
".検索ボックス":{
"0%" : "幅:50px",
"70%": "幅:300px",
},
".ライン":{
"30%" : "幅:0%",
"100%": "幅:100%",
}
}、{
期間:1,
イージング:Scene.EASE_IN_OUT,
セレクター:true,
})。exportCSS();

scene.setTime(0);
let toggle = false;

document.querySelector(".参加する").addEventListener("クリック", 関数() {
toggle =!toggle;
scene.setDirection(toggle ? "正常" : "逆行する");
scene.play();
});

それはのいずれかのコードです ホームページで。シンプルでアニメーション化された検索ボックスです。これがCodePenのデモです。

繰り返しになりますが、これはすぐに学ぶのは簡単なツールではありませんが、かなり単純なAPIのように見える新しいアニメーションライブラリを試すことに興味がある場合は、これは良いオプションとなるでしょう。.

Commento

フロントエンドツール:Commento

現在のプライバシーを意識したオンライン環境では、このようなツールをさらに使用する可能性があります。私はWordPressのWebサイトでコメントシステムを改善するためのオプションをしばらく検討してきましたが、Commentoは堅調に見えます.

Disqusのような機能(賛成票/反対票、トップコメントなど)が好きですが、 膨らみすぎ.

WordPressのコメントがデフォルトでセルフホストされていることも気に入っていますが、Disqusの追加機能がありません。 Commentoはこれらの問題を修正するための正しい方向への一歩だと思います.

既存のコメントプラットフォームからCommentoへの切り替えを検討している場合は、 かなりの仕事 私が読んだことから、それは大きな欠点です.

また、CommentoではDisqusからインポートできますが、インポートすることはできません。 "投票" Disqusからの古いコメントまたはコメントを投稿したユーザーからのアバター.

最初にDisqusにエクスポートしてからDisqusからCommentoにインポートしない限り、古いWordPressコメントをCommentoにインポートする方法もありません(CommentoにサインアップするときにDisqusインポートツールを使用して実行できます)。.

最後の欠点は、コメントをセルフホストしない限り、Commentoは無料ではないということです。しかし、Disqusの肥大化とプライバシーの問題を考えると、少額の月額料金は価値があります.

Gitの歴史

フロントエンドツール:Gitの履歴

これはフロントエンドツールのカテゴリだけではありませんが、シンプルでありながら機能が斬新であるため、このリストで私のお気に入りの1つです。.

Git履歴を使用すると、パブリックGitリポジトリ(GitHub、GitLab、またはBitbucket)内のファイルの履歴を表示できます.

たとえば、変更の履歴を表示するとします。 ソースファイル ために Normalize.css. ファイルは次の場所にあります。

https://github.com/necolas/normalize.css/blob/master/normalize.css

その履歴を表示するには、URLのgithub.comをgithub.githistory.xyzに置き換えます。

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

新しいURLでの出力は、時間の経過に伴うファイルの変更を表示するためのきちんとしたインタラクティブな方法で読み込まれます。履歴ポイントを選択するたびにいくつかのクールなアニメーションがトリガーされ、行われた変更とコミットしたユーザーを確認できます.

CSS機能の切り替え

フロントエンドツール:CSS機能の切り替え

レガシーブラウザのテストを行う必要がある環境で作業している場合、これはテストツールボックスに追加するのに最適な小さなChrome拡張機能である可能性があります.

上記のARC Toolkitと同様に、CSS機能の切り替えにより、ブラウザーの開発者ツールに新しいタブが追加されます.

タブには、最新のCSS機能のリストが表示されます。.

切り替え可能なCSS機能

これらを切り替えて、特定の機能をサポートしていないブラウザでユーザーがページにアクセスしたときのページの外観を即座に確認できます。これは、古い環境でレイアウトがどのように劣化するのかをすばやく概観するのに最適な方法です.

さまざまな機能を選択すると、ページが自動的に更新され、変更が表示されます。たとえば、Flexboxで構築されたサイトは、新しいブラウザで徐々に強化しながら、レイアウトを正常に保つためにいくつかの古いCSSの恩恵を受けるでしょう.

アプリを作成

フロントエンドツール:アプリの作成

間違いなく、フロントエンドツールのワークフローには、ビルドのための多くのオプションが含まれています。このWebサイトは、人気のあるアセットバンドルであるWebpackまたはParcelを使用している(または使用方法を学びたい)開発者向けの学習サイトとプロジェクト生成ツールの組み合わせです。.

左側のカテゴリにドリルダウンして、ビルドに必要なオプションを選択します。必要なファイルと構成オプションがメインウィンドウに表示されます。.

アプリ構成オプションの作成

ページは完全にインタラクティブなので、任意の仮想ファイルをクリックしてその内容を表示したり、選択したオプションにカーソルを合わせて、そのオプションに関連するビルドの強調表示された部分とともに説明を表示したりできます.

学習と新しいプロジェクトの作成の両方に非常に役立ちます!

CSSJanus

フロントエンドツール:CSS Janus

国際化の分野では、これはスタイルシートを左から右に、右から左に、またはその逆に変換できるオンラインツールです。.

これにより、アラビア語やヘブライ語などの右から左(rtl)の言語のスタイルシートを簡単に作成できます。.

次にCSSの例を示します。

.例{
float:左;
text-align:左;
パディング:1px 2px 3px 4px;
margin-left:1em;
background-position:5%100px;
カーソル:ne-resize;
border-radius:1px 2px;
}

上記は次のように変換されます:

.例{
float:右;
text-align:右;
パディング:1px 4px 3px 2px;
margin-right:1em;
background-position:95%100px;
カーソル:nw-resize;
border-radius:2px 1px;
}

違いには、float:leftやtext-align:leftなどの行だけでなく、水平方向のパディング宣言やbackground-position値などの行も含まれることに注意してください。.

また、ツールでスタイルブロックまたは単一の宣言を無視する場合は、@ noflipディレクティブを使用すると便利です。

/ * @noflip * / .ignored {
float:左;
}

.無視されない{
float:左;
/ * @noflip * /背景:#fff(poster-ltr.png);
}

色泥棒

フロントエンドツール:Color Thief

色泥棒は本当にすっきりしていて、かなり簡単に使用できますが、その使用例は非常に特殊です。.

基本的に、このユーティリティを使用すると、JavaScriptを使用して、特定の画像に基づいて2〜20色のカラーパレットを取得できます。.

これはすべてのウェブサイトやアプリで使用するものではありませんが、良いアイデアであり、しばらく前からあり、この1年間で更新されたようです.

シンプルなAPIを使用すると、画像から1行でパレットを取得できます。

let myPalette = colorThief.getPalette(img、10);

そこからは、返される配列を操作するだけです。以下に示すCodePenで作成したデモは、表示された画像からユーザーが入力した色数を取得しています。配列で使用しているコードは次のとおりです。

myPalette.forEach(
要素=> colors.innerHTML + = ""
);

要素とインラインスタイルを使用してパレットを作成しています。色はRGB値として返されます.

CodePenデモでは、CodePenで発生したクロスオリジンの問題を回避するために回避策を使用していますが、通常、これらの行は通常の環境では必要ありません(コメント).

RegexGuide

フロントエンドツール:RegexGuide

毎年、正規表現の作成に役立つフロントエンドツールのコレクションに追加するクールなインタラクティブアプリを見つけたようです。そのため、ここに今年のエントリを紹介します。そして、あなたが私のような人なら、あなたはこれらを構築するためにできるすべての助けを借りるでしょう.

これはウィザードのように1つずつ手順を実行するため、最初に頭を動かすのは少し奇妙です.

完了し、すべての条件が整っている場合、指定された条件を満たすためにさまざまな値を試すことができ、ページにはインタラクティブに機能するものが示されます.

これらの種類のツールは、いつも退屈なコードを作成する方法として機能するだけでなく、構文の学習にも役立つため、常に私のお気に入りの一部です。.

フロントエンドツール:名誉ある言及

ですから、私の意見では、これらは私が見つけたより興味深い興味深いフロントエンドツールの一部であり、私はこの1年間十分に注目されていなかったと思います。あなたはあなた自身のそのような発見を持っていると確信していますので、以下のコメントにそれらを自由にドロップしてください。それまでの間、メインリストを作成しなかったものの最終的なリストを次に示しますが、言及する価値があると思いました。

  • wehatecaptchas –画像や文字/数字を解読しないキャプチャ代替、さらにチェックボックスも "私がロボットではないことを確認してください"
  • simpleParallax – JavaScriptで視差効果を実行する簡単な方法.
  • ライトYouTube埋め込み –従来の埋め込みコードよりも明らかに224倍高速.
  • ブラウザのデフォルトスタイル –任意のHTML要素を入力すると、このツールはその要素に対する各ブラウザのデフォルトCSSを通知します.
  • 誰が使用できるか – 2色の組み合わせを入力すると、このツールは、視覚障害のあるユーザーがテキスト/背景にその組み合わせを使用できるかどうかを通知します.

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Karol Kによるレイアウトとプレゼンテーション.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    2020年のReactJSに最適な20の無料ブートストラップテンプレート सफल ब्लॉग कैसे शुरू करें
    0 комментариев
    
    2020 में एक सफल ब्लॉग कैसे शुरू करें सफल ब्लॉग कैसे शुरू करें
    0 комментариев
    
    次のWebサイトに最適なWeb​​flowテンプレートおよびテーマの15 सफल ब्लॉग कैसे शुरू करें
    0 комментариев
    
    独自のポートフォリオを作成する前に確認できる20以上の素晴らしいデザインポートフォリオ सफल ब्लॉग कैसे शुरू करें
    0 комментариев
    Adblock
    detector