フロントエンド開発者に欠かせない生産性ツール

紹介

オープンソースの生産性向上ツールは、開発効率を大幅に向上させることができます。

今日は、私が使っているツールの中から、より香りの良いものを紹介します。ドキュメント、ビジュアライゼーション・ツール、分析ツール、コード・スニペット、デバッグ・ツールなどです。

Collect UI

Collect UIGalleryは、UIデザインのインスピレーションを毎日得られる無料のオンラインリソースです。 現在6500以上のエントリーがあり、常に最新のコンテンツに更新されています。

サイドバーにはカテゴリがあります。404ページ、ログイン/ログアウト、ショッピングカート、カレンダー、ビデオプレーヤーなどを含みます。あなたがいくつかの便利な需要のインスピレーションになりたい場合は、その後、あなたの会社のプロジェクトや個人的なプロジェクトで使用され、私はそれが非常に役立つと思います。

Taskade

ToDoリストがたくさんある仕事など、普段の生活ではやらなければならないことがたくさんありますが、忘れてしまいがちなこともあります。 そんなときは、ToDoリスト付きのクロームプラグイン、taskade必要です。 Taskadeはシンプルですっきりとしており、リラックスできるテーマと背景で美しくデザインされています。Taskadeを使って思考を整理し、今やっていることに集中しましょう。

Colordot

好きな色を探したいけど、インスピレーションがない......そんなときは、こちら。 ウェブエリア内でマウスをランダムにスライドさせると、さまざまな色が生成されます。色を決めて、マウスをスライドさせると次の色が出ます。

FontSpark（フォントスパーク

FontSparkは、フォント選びに困っている人のためのフォント選択サイトです。 ユーザーは表示したいテキストを入力するだけで、フォントの種類やサイズなど、サイトが推奨するフォントを取得できます。推奨されたフォントに満足できない場合は、Generateボタンをクリックして更新してください。

名詞プロジェクト ←クリック

Noun Projectのウェブサイトは、派手なデザインではなく、通常はモノクロで表示されますが、高品質でユーザーが認識しやすいアイコンを提供することに専念しています。

現在、NounProjectは200万以上のアイコンを無料でダウンロード提供しており、常に更新しています。

csseffects の影響

CSSeffectsSnippetsには約20のCSSアニメーションが含まれており、サイト上で読み込んで即座にプレビューしたり、カーソルを移動させてアニメーションさせたりすることができます。

そして、これはその最大のハイライトではありませんが、最も推奨されるのは、すべての効果がすぐに直接開発者が自分のウェブサイトやブログに適用できるように、関連するコードをクリックした後にコピーすることができるということです、もちろん、まだ微調整を通過する必要があるかもしれませんが、ゼロから始める必要はありませんし、ネット上でこれらのアニメーションコードを探す必要はありません、非常に便利で時間節約。

アンドロー。

unDrawは 、ギリシャのデザイナーKaterina Limpitsouniによって開発されたオープンソースのベクターイラストライブラリです。 このサイトには1,000以上のフラットベクターイラストがあり、ダウンロードして使用することができます。もしあなたが個人的なウェブサイトを制作しているけれど、イラストに触発されていないのであれば、チェックしてみてはいかがでしょうか。

DevDocs 。

このウェブアプリケーションは様々なプロジェクトのドキュメントをまとめ、オフラインでの使用もサポートしています。DevDocsは、最も完全なプログラミングと開発ドキュメントをまとめ、しかも欲しいコマンドをすぐに調べられる優れたリーディングモードを持ち、ブラウザの拡張機能もサポートしているのでとても便利です。

CSSのトリック ．

cssreference 。

CSSの知識を更新したり、あまり使われていないプロパティを調べたりする必要がある場合は、このサイトをご覧ください。CSSの各プロパティについて、わかりやすい例とともに詳しく説明されているので、プロパティを理解し、自分のプロジェクトに応用するのが簡単になります。

使えますか？

フロントエンドの開発は、随時ブラウザの互換性を確認する必要があるため、ここでは、フロントエンドの開発者のためにカスタマイズされたクエリCSS、サイトの特性や互換性で人気のあるブラウザの様々なJsは、Webページのブラウザの互換性を確保することは非常に良いことができますお勧めします。このツールを使用すると、すぐに様々なブラウザでのコードの影響を理解することができます。

灯台 （ライトハウス

LighthouseはGoogleのオープンソース自動化ツールで、ウェブアプリケーションの品質向上に重点を置いています。現在のテスト項目は、ページパフォーマンス、PWA、アクセシビリティ、ベストプラクティス、SEOなどです。

Lighthouseは、各テスト項目の結果をスコアリングし、最適化の推奨を行います。 これらのスコアリング基準と最適化の推奨は、Googleのウェブのベストプラクティスとみなすことができます。

威風堂々。

Majesticは、Jest でテストを実行するための優れた GUI ツールです。可視化を利用し、テストケースの出力ログをより簡単に見ることができます。

ワッパライザー。

Wappalyzerはクロームウェブサイト技術分析プラグインで、プラットフォームアーキテクチャ、ウェブサイト環境、サーバー構成環境、ジャバスクリプトフレームワーク、プログラミング言語、およびターゲットウェブサイトで使用されるその他のパラメータを分析することができます。

iHateRegex 。

開発者のために、正規表現が頻繁に使用され、複雑な文字列の多くの種類を一致させるために使用することができますが、唯一のしかし、欠点は、それが書くことが困難であるということです、だけでなく、ルールを習得する必要がありますが、また、デバッグ、書き込み時間を費やす必要があります。

iHateRegexは、正規表現の記述の悩みを解決してくれる素晴らしいツールです。iHateRegexは、ユーザー名、電子メール、日付、携帯電話番号、パスワードなどの一般的なルールの検証を完了するために、適切な正規表現をすばやく検索してマッチングするオンラインのオープンソースツールです。

もちろん、その中でマッチングのプロセスを見ることができるので、理解を深めることができます。

愛の三文芝居

1.この記事、悪くないと思ったら、三連単で、より多くの人に～も見てもらえるように。

2.公共番号を懸念し、定期的に新鮮な乾燥した良い記事をプッシュするためにあなたのために。

3.特別なステージでは、個人保護のためにマスクを着用してください。