15 の興味深い JavaScript および CSS ライブラリの詳細

<p>

<p> 11 月のフロントエンド テクノロジー リストでは、新しい CSS フレームワーク、node.js パッケージ マネージャー、アイコンの実装、エフェクトの読み込み、プロンプト用の Pure CSS ソリューションを含む、いくつかの素晴らしい GitHub プロジェクトをまとめました。

<p>それでは、見てみましょう。楽しむ！

1. Wing

<p>

<p> Wing は、Web サイトを構築するための 12 列のレスポンシブなグリッドと基本的なスタイル コンポーネントを提供するマイクロ (圧縮後わずか 4KB) のレスポンシブ CSS フレームワークです。もちろん、このプロジェクトの優れた点は、追加のクラスを必要とせずに、HTML 要素の大部分が自動的にスタイル設定されることです。気に入っていただけると幸いです!

<p>こちら: Wing プロジェクトのアドレス

2. Shave

<p>

<p> Shave は、最大高さ設定の HTML 要素に適応するために複数行のテキストを切り詰めることができる、依存性のない軽量の JavaScript プラグインです。元のテキスト文字列を非表示の <span> 要素に保存して、テキストがページ上にそのまま残るようにします。 Shave はライブラリに依存せず、jQuery でプラグインのスタンドアロン バージョンを提供します。 Here：Shave Project Address3 t =""/><span>元素中，以便你的文本能够完整地保留在页面中。Shave 不依赖任何库，同时它在 jQuery 中提供了一个独立版本的插件。

<p>HERE：Shave 项目地址

3. Cerebral

<p>

<p>一个 JavaScript MVC 应用程序状态管理器，并且它有独立的调试器。在 Cerebral 中，应用程序的状态被存储在单个的树模型中，该模型管理着所有服务器端和客户端的状态。

<p>而调试器具有对模型、控制器以及视图的实时管理权限。

<p>HERE：Cerebral 项目地址

4. Wenk

<p>

<p>Wenk 是一个轻量级纯 CSS 写的文本工具提示库。虽然它的压缩版仅有700字节，但它依然能够管理并提供一些定制选项。诸如不同提示工具的大小、位置和文本对齐。

<p>HERE：Wenk 项目地址

5. CSS Loader

<p>

<p>CSS Loader 是一个非常有用加载器。它允许开发人员利用纯 CSS 文件，以及一个空<p>

独自のデバッガーを備えた JavaScript MVC アプリケーション状態マネージャー。 Cerebral では、アプリケーションの状態は単一のツリー モデルに保存され、サーバー側とクライアント側のすべての状態が管理されます。

<p>デバッガーには、モデル、コントローラー、ビューに対するリアルタイム管理権限があります。 Here：脳プロジェクトアドレス4 Wenk は、純粋な CSS で書かれた軽量のテキスト ツールチップ ライブラリです。圧縮バージョンはわずか 700 バイトですが、それでも管理しやすく、いくつかのカスタマイズ オプションが提供されます。さまざまなツールヒントのサイズ、位置、テキストの配置など。

こちら: Wenk プロジェクトのアドレス<p>

<p>5. CSS ローダー

<p>

CSS Loaderは非常に便利なローダーです。これにより、開発者は純粋な CSS ファイルと空の <p> 要素を使用して読み込みインジケーターを迅速に作成できます。 <p>

こちら: CSS Loader プロジェクトのアドレス

<p>6. Yarn

<p>

<p> Facebook が最近立ち上げたオープンソースの Node.js パッケージ マネージャーである Yarn については、誰もが聞いたことがあると思います。パッケージのインストール時間を大幅に短縮できる強力なキャッシュ システムを備えており、プロジェクトに参加しているすべてのユーザーに対して同じノード モジュール (node_modules) ディレクトリ構造を維持できるため、追跡が困難なバグを減らし、複数のマシンで複製することができます。

NPM とは背景が異なりますが、Yarn の使用は NPM の使用とほぼ同等であり、開発者はそれをより早く理解する必要があります。 <p>

こちら: Yarn プロジェクトのアドレス

<p>7. Canvas Gauges

<p>

<p>Canvas Gauges は、純粋な JavaScript と HTML5 Canvas (キャンバス) を使用して構築された完全にカスタマイズ可能なゲージで、次のようなタイプの測定機器を作成するために使用できます。自動車の速度計、温度計などとして。

コードサイズが小さく依存関係がないため、IoTデバイスにも適しています。ウェブサイトの例を見るとそれが理解できます。 <p>

こちら: Canvas Gauges プロジェクトのアドレス

<p>8. CSS Icon

<p>CSS Icon は、500 以上の純粋な CSS コード実装をまとめたアイコン セット Web サイトです。使い方も非常に簡単で、アイコンをクリックすると、そのアイコンに対応するHTMLとCSSコードが表示されると同時に、そのアイコンのどの部分がどの要素なのかを直感的に理解することができます。実装されました。

🎜とても素晴らしいプロジェクトですが、満点を与える必要がありますか?ぜひ楽しんでください！ 🎜🎜🎜🎜こちら: CSS Icon プロジェクトのアドレス🎜🎜🎜🎜9. CurrencyFormatter.jsCurrencyFormatter.js は、シンプルで実用的な純粋な JS 形式の通貨ライブラリです。 155 か国の通貨形式と 700 以上の言語のローカリゼーション設定をサポートしています。 🎜🎜さらに、いくつかの未使用の通貨形式も処理でき、非常に強力です。 🎜🎜🎜🎜こちら: CurrencyFormatter.js プロジェクトのアドレス🎜🎜

10. KUTE.js

<p>

<p>高性能ネイティブ JavaScript アニメーション エンジン: KUTE.js。そのコア ライブラリはすべての基本的なアニメーション メソッドを提供し、KUTE の機能を強化するために多くのプラグインを追加できます。同時に、jQuery、SVG、CSS プロパティなどを同時に操作できる個別の拡張機能もあります。

<p>こちら: KUTE.js プロジェクトのアドレス

11. Vue マテリアル

<p>

<p>Vue マテリアルは、マテリアル デザイン仕様に従って構築された軽量の Vue.js フレームワークです。 Vue2.0 を通じて最新の Web ブラウザをサポートしてアプリケーションを構築するための、再利用可能な高品質コンポーネントのセットと一連の UI 要素を提供することを目的としています。

<p>このライブラリは実装も簡単で、Vue.js 以外には依存関係がありません。

<p>こちら: Vue マテリアル プロジェクトのアドレス

12. Test Cafe

<p>

<p>Test Cafe は、純粋な Node.js で書かれた Web アプリケーションをテストするためのエンドツーエンドのソリューションです。これは Node.js に基づいており、NPM パッケージ以外のものをインストールする必要はなく、ブラウザーのプラグインやコンパイラーも必要ありません。

<p> テストを作成したら、Test Cafe を実行すると、ブラウザー テストが実行され、結果が収集され、レポートが作成されます。

<p>こちら: Test Cafe プロジェクトのアドレス

13. Core.css

<p>

<p>Core.css は、レスポンシブ Web サイトを構築するための軽量フレームワークです。圧縮されたサイズはわずか 1.3 kb で、プリセット要素や組み込みアニメーションはありません。したがって、あらゆる小規模な Web プロジェクトの構築に適しています。

<p>こちら: Core.css プロジェクトのアドレス

14. Flv.js

<p>

<p> B ステーションについては誰もがよく知っていると思いますが、Flv.js は、によってオープンソース化された HTML5 Flash ビデオ (FLV) です。 bilibili Web サイト プレーヤーは純粋にネイティブ JavaScript (ECMAScript 6 で記述) で開発されており、Flash は使用されていません。

<p> その動作原理は、Flv.js が JavaScript で flv ファイル ストリームを解析し、それをリアルタイムで fmp4 にカプセル化し、メディア ソース拡張機能を介してブラウザーにフィードすることで、FLV 形式のビデオの再生を実現します。

<p>こちら: Flv.js プロジェクトのアドレス

15. Next.js

<p>

<p>Next.js は、React に基づくユニバーサル JavaScript フレームワークです。新しい JavaScript Web アプリケーションを作成するための便利な方法を提供します。開発者は、Webpack または Babel 構成のセットアップに多大な時間を費やす必要がなくなりました。

<p>こちら: Next.js プロジェクトのアドレス

<p>翻訳者注: Next.js の詳細な紹介については、こちらをご覧ください。

<p>上記はすべてこの記事で共有されており、あなたのプロジェクトに適したフロントエンド ライブラリが見つかることを願っています。

<p> 上記は 15 の興味深い JavaScript および CSS ライブラリの詳細な内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

<p>