新しい月は到着しました、そして、若干の新しいJavaScriptライブラリをチェックする時間です!🔥
畝

エディタ.js

Editor.jsリッチメディアストーリーのためのブロックスタイルのエディタです.
ブロックスタイルは、各要素(段落、見出し、画像、リスト、引用)がcontenteditableとして独立して扱われることを意味します.これは、単一のメインcontenteditableワークスペースは、すべてのHTMLコンテンツをラップする他の典型的なソリューションと区別します.しかし、このアプローチは、スタイルの過負荷と他の迷惑な副作用をもたらすことができます.
エディタ.JSでインライン編集メニューを作成できます

またはブロックの設定メニューで、スコープ全体が編集可能なブロックであり、選択したテキストだけではありません.

弊社のWebアプリケーションで使用するには-ベースeditorjsをインポートした後-我々は、個々のプラグインとして利用可能なツールを追加することができます.
このモジュール性はデザインによってもたらされ、必要な機能だけをインポートできます.

import EditorJS from '@editorjs/editorjs'; 
import Header from '@editorjs/header'; 
import List from '@editorjs/list'; 

const editor = new EditorJS({ 
  /** 
   * Id of Element that should contain the Editor 
   */ 
  holderId: 'codex-editor', 

  /** 
   * Available Tools list. 
   * Pass Tool's class or Settings object for each Tool you want to use 
   */ 
  tools: { 
    // Here we can include the tools we want
    header: Header, 
    list: List 
  }, 
})

もう一つの良い面は、出力がJSONであるということです.
媒体プラットフォームの出力の例を以下に示します.

<section name="0ed1" class="section section--body section--first">
   <div class="section-divider">
      <hr class="section-divider">
   </div>
   <div class="section-content">
      <div class="section-inner sectionLayout--insetColumn">
         <h3 name="f8e8" class="graf graf--h3 graf--leading graf--title">
            <br>
         </h3>
         <p name="982b" class="graf graf--p graf-after--h3">
            The example of text that was written in 
            <strong class="markup--strong markup--p-strong">one of 
            popular</strong> text editors.
         </p>
         <h3 name="c2ad" class="graf graf--h3 graf-after--p">
            With the header of course
         </h3>
         <p name="83d3" class="graf graf--p graf-after--h3">
            So what do we have?
         </p>
      </div>
   </div>
</section>
<section name="d1d2" class="section section--body">
  ...
</section>

と同じコンテンツエディタで生成された.js

{
    "time" : 1550476186479,
    "blocks" : [
        {
            "type" : "paragraph",
            "data" : {
                "text" : "The example of text that was written in 
                          <b>one of popular</b> text editors."
            }
        },
        {
            "type" : "header",
            "data" : {
                "text" : "With the header of course",
                "level" : 2
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "So what do we have?"
            }
        }
    ],
    "version" : "2.8.1"
}

私たちは明らかに編集者を見ることができます.js出力は冗長である.
畝

ハウラー.js

このJavaScript audio libraryは、ウェブサイト、ストリームウェブラジオにサウンドエフェクトを追加するか、サウンドトラックの高度なサウンドコントロールを提供することができます.

それは光( 7 kB gzip )で、外部の依存関係なしです.
また、それは箱から最適化を提供します.既にロードされた音が自動的にキャッシュされ、再使用して、その後の呼び出しに使用されます.
使い方はシンプルで直感的です.

import {Howl, Howler} from 'howler';

// Setup the new Howl.
const sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// Play the sound.
sound.play();

// Change global volume.
Howler.volume(0.5);

Demo examples
畝

ビット

Bitは、UIのコンポーネント(ボタン、チャート、カレンダー、…)のコレクションを提供するプラットフォームです.Semantic-UI-Reactと同様.

誰もが個人的なコンポーネントを公開し、それらを自由にコミュニティのために利用できるようにすることができます.
プライベートハブ-署名されたメンバーだけがアクセスしている-も利用可能であり、彼らは非常に便利なことができます.
プロジェクトを別のチーム間にまたがる作業に想像してください.我々の同僚とコンポーネントを共有することができることは大いにチームの生産性を高めることができます.これは簡単に一般的な自動補完入力フィールドを2つの異なるチームで2回実装されている古典的なシナリオを防ぐことができます!
よく聞こえますか.🤦‍♂️
畝

フリック

Flickingは、最も人気のあるJSフレームワーク(反応、vus . js、角度)と簡単に統合する柔軟な回転木馬です.
これは無限スクロール、無料スクロール、複数のパネルなどの機能を提供しています:

さらに、基本機能を拡張するプラグインもあります.

試してみてください(以下の例では角を使います).
畝

スウィートアラート

JavaScriptのポップアップをカスタマイズし、それらをよりスマートにする必要がある場合は、それのための全体のデザインフレームワークを使用したくない場合は、SweetAlert2はあなたのために右です.それはゼロの依存関係を持っており、角度との統合と反応することができます.
プレーンポップアップをアップグレードできます.

もっとキャッチーなものに

我々は、通知タイプ(成功、情報、エラー…)を選択することができますそして、ポップアップコンテンツの異なる入力型を定義します.

Swal.fire({
  title: 'How old are you?',
  type: 'question',
  input: 'range',
  inputAttributes: {
    min: 8,
    max: 120,
    step: 1
  },
  inputValue: 25
})

前のスニペットは範囲選択ポップアップを生成します:

ユーザーが1つのボタンをクリックすると、警告が閉じられ、swal.fire()は約束を返します.我々は、ユーザーの答えを検出する約束を解決する必要があります.シンプルで迅速!
このライブラリはまた、ユーザーがポップアップを却下したかどうかを検出する方法を提供します.この場合swal.fire ()は、解雇の理由でオブジェクトESCを返します.
私はSweetAlert 2のようなものは、そのシンプルさが、まだ良いカスタム通知を作成する可能性です.
他のいくつかの使用法examplesウェブサイトで利用可能です.
畝
🎉 今月はこれです🎉
発見の完全な新しい記事のために9月に再び来てください!
畝

畝