Web開発者の時間を節約する67の便利なツール、ライブラリ、およびリソース


この記事では、React、Angular、Vueなどの大規模なWebフレームワークについては説明しません...最も人気のあるテキストエディターのリストはありません-Atom、VS Code、Sublime ...この記事では共有します私の意見では、Web開発者のワークフローをより簡単かつ迅速にするツールです。

一部のユーザーは、これらのツールのいくつかに既に精通している可能性があります。 それにもかかわらず、読者のいずれかが私の記事で自分自身にとって新しくて有用なものを見つけたら、とてもクールです。

以下は、利便性のためにグループに分けたさまざまなWebリソースです。


資源



Ghost -node.jsを使用して開発されたシンプルなブログプラットフォーム


実行するもの -最新のWebサイトを作成するために使用されるテクノロジーを学習するために設計されたChromeプラグイン



LiveEdu.tv-プログラマーとデザイナー向けのストリーミングサービス。実際のプロジェクトに焦点を当てています。 ここでは、ソフトウェア開発、人工知能、データサイエンス、ゲーム開発、設計、VR&AR開発、リアルタイムで開発プロセス中に実際のプロジェクトが開発される暗号通貨に関するトピックについて、何百ものチャネルを見つけることができます。ステップ。



何でも学ぶ -分野(物理学、化学など)を選択し、そのサブセクションを表示するための関係図

head cheatsheet -headタグに含めることができるすべてのリスト

JavaScriptライブラリとフレームワーク


Particles.js -Webページにフローティング要素を作成するための多くの興味深いものを見つけるライブラリ。

Three.js -Webページに3Dオブジェクトを作成し、3D視覚化するためのライブラリ

Fullpage.js-簡単に実装できるフルページスクロールプロパティのセット

Typed.js-ウェブサイトのタイプライター効果

Waypoints.js-ページをスクロールするときに関数を実行するサンプルコード

Highlight.js-ページの構文強調表示

Chart.js-純粋なJavaScriptで作成された美しい図のセット

Instantclick-ホバーでリソースを事前にロードしてサイトのロードを高速化するのに役立つライブラリ

Chartist-別のグラフ作成ライブラリ

Motio-スプライトグラフィックスを使用してアニメーションとパノラマを作成するためのライブラリ

Animstion -CSSを使用してページ遷移を作成するためのjQueryプラグイン

Barba.js-ページ上にフロー遷移を作成するためのリソース

TwentyTwenty-視覚的な違いを作成するためのツール

Vivus.js -SVGを使用して描画アニメーションを作成するためのライブラリ

Wow.js-ページをスクロールしながら画像を表示するツール

Scrolline.js-ページの最後までスクロールする必要がある量を追跡できるツール

Velocity.js-スムーズな移行で非常に高速なJavaScriptアニメーションを作成するためのツール

スクロールのアニメーション-ページをスクロールするときにアニメーションを作成する簡単な例

Handlebars.js -JavaScriptテンプレート開発

jInvertScroll-視差水平スクロール効果

1ページのスクロール -1ページ内でスクロール

Parallax.js-スマートデバイスの向きに応じたParallaxプロパティ

Typeahead.js-高度な検索とオートフィル

Dragdealer.js-アニメーションを移動するための多くのクールな効果を備えたライブラリ

Bounce.js -CSSアニメーションを作成するためのツール

Pagepiling.js-単一ページ内でのスクロール

Multiscroll.js -2つの垂直スクロール可能なセクションを作成するためのサンプルコード

Favico.js-ダイナミックファビコン

Midnight.js-ページのスクロール中に固定ヘッダーを変更するためのサンプルコード

Anime.js -JavaScript用のさまざまなアニメーションのライブラリ

キーコード -キーを押したときに数値を表示するJavaScriptコード

ソート可能 -アイテムをページにドラッグアンドドロップするためのコード例

Flexdatalist-自動入力検索のコード例

JQuerymy -jQueryによる双方向データバインディング

Cleave.js-入力中のコンテンツのフォーマット

ページ -単一ページアプリケーションのクライアント側ルーティング

Selectize.js-タグを追加するための混合選択フィールド

Nice select-美しい選択フィールドを作成するためのjQueryライブラリ

テザー -絶対ページ要素を効果的に添付

Shepherd.js-サイトのユーザー向けガイド

ツールチップ -名前はそれ自体を物語っています...

Select2 -jQueryを使用して選択ボックスをカスタマイズする

IziToast-実装が簡単なJS通知

IziModal-シンプルなJavaScriptを使用して実装されたポップアップ

CSSライブラリ/設計ツール


Animate.css-アニメーションライブラリ

フラットUI色 -シンプルで効果的な色のリスト

マテリアルデザインライト-Googleのマテリアルウェブデザインフレームワーク

Colorrrs-ランダムカラージェネレーター

セクション区切り-CSSを使用してさまざまなフォームの境界線を作成する

トップコート-Webアプリケーション開発フレームワーク

Ken Burnsエフェクトを作成する-Ken Burnsエフェクトを作成する

DynCSS -Webページに動的プロパティを追加するためのCSS機能の追加

魔法のアニメーション -まあ、名前は明確です...

CSSpin-サイトの仮想CSSスピナーのコレクション

羽のアイコン -アイコン

イオンアイコン -アイコン

素晴らしいフォント -アイコン

フォントジェネレーター - フォントの効果的な選択と組み合わせ

オン/オフスイッチ -CSSを使用したオン/オフスイッチの作成

UIキット -フレームワーク

ブートストラップ -フレームワーク

基盤 -フレームワーク

さて、ここで私は、私が日常業務で使用する最も効果的なツール、フレームワーク、およびライブラリのリストをもたらしました。

興味深いと思われる同様のリソースを見つけたら、コメントに残してください!

Source: https://habr.com/ru/post/J337768/


All Articles