Webデザイナーおよび開発者向けの新しいリソース(2017年7月)
今月の記事では、WordPressでGraphQLを有効にするためのプラグイン、CSVデータをレンダリングするためのデスクトップアプリケーション、およびいくつかのWebサイトのようなすばらしいJavaScriptライブラリの配列をいくつか紹介します。フレームワークチェックしてみましょう.
ヒーローパターン
のコレクション SVGで作られた繰り返しパターン あなたがあなたのウェブサイトの背景として使うことができるということ。サイトには便利な設定が装備されています パターンの色と不透明度をカスタマイズする CSSに追加するコードをコピーして貼り付けるだけです。.

TestCafe
TestCafeは エンドツーエンド(e2e)テストツール それはあなたが実際のユーザーによって使用されているかのようにあなたのウェブサイトやウェブアプリをテストすることを可能にします。それはテストを実行するときいくつかのことを自動化します。 ブラウザの起動、指定されたテストユニットの実行、レポートの生成, スクリーンショットとエラーを簡単に解決するためのソースマップ.

SugarJS
SugarJSはJavaScriptライブラリです。 オブジェクト、配列、日付を操作する より読みやすく、より読みやすい構文です。ライブラリには、いくつかのユーティリティ関数も付属しています。, .escapeHTML()
どちらでしょう HTML要素をそれらのEntityフォーマットに変換する.

ミズ
に便利なJavaScriptライブラリ 時間、数、通常の文字列をミリ秒に変換する. ミリ秒(2日)
, 例えば、に変換されます 172800000
.

payy
役立つツールの素晴らしいコレクション あなたのウェブサイトのアクセシビリティを向上させる そしてウェブアプリ。 pa11yは、アクセシビリティの問題についてWebページをテストするためのCLIで構成されています。 生成されたエラーおよび警告のレポートを表示するためのダッシュボード, CodeshipやTravisなどのCIツール用に特別に設計されたCLI.

羽のアイコン
A モダンな雰囲気を持つアイコンのコレクション. これらのアイコンは、あらゆるプラットフォーム(iOS、Windows、またはUbuntu)用に設計されたWebサイトおよびアプリケーションに最適です。アイコンが入ってくる SVGならびにReactおよびAngularコンポーネント.

リアクトフライト
へのReactモジュール アプリケーションでアニメーションコンポジションを構築する. このライブラリは、Principle for Sketchからインスピレーションを受けています。 UIコンポーネントに対話機能を追加する 迅速かつ簡単に.

BounceJS
ライブラリ バウンス効果のあるアニメーションを作成する. アニメーションはCSS3とプリセットアニメーションの数によって供給されています。 JavaScriptライブラリは、npm、bower、または CSSアニメーションをコピーするだけです ウェブサイトで生成された.

Bojler
Bojlerは HTMLコードを書くためのガイドラインを含む電子メールフレームワーク これは、最も人気のあるEメールクライアントでは正しくレンダリングされます。あなたは私たちの以前の記事でより多くの電子メールフレームワークを見つけることができます.

デビコン
のコレクション プログラミング言語、設計、および開発ツールのアイコン. アイコンはSVGとフォントフォーマットで利用可能です。いくつかの特定の Firefox、AWS、HTML 5などのアイコンにも詳細なバリエーションが付いています. かなりかっこいい?

今UIキット
Bootstrap 4に基づいたコレクションレスポンシブインタフェース 50の要素と3つのカスタムテンプレートを備えています. HTML版の他に、UIもPSDおよびSketchフォーマットで提供されています。.

Tスクロール
T-Scrollは アニメーションを適用するためのJavaScriptライブラリ 要素がビューポートに表示されているとき。いくつかのオプションとプリセットアニメーションが装備されています.

Ory Editor
ORYは、Web上で最新のよりアクセスしやすいWebエディタです。 ORYエディタは React and Fluxの上に構築されています. ユーザーがコンテンツを編集して結果をすぐに確認できるようにすることで、編集を容易にします。 HTMLやMarkdownのような特別な構文を知らなくても.

TadViewer
TadViewerは便利です CSVを表示するためのデスクトップアプリ そしてそれは大規模なデータとファイルで動作します。アプリはmacOS、Windows、およびLinuxで利用可能です.

スムーズスクロールポリフィル
スムーズスクロールは、より快適なユーザーエクスペリエンスを提供することが証明されています。現在はW3Cで正式に提案され、起草されています。現時点では、Chrome、Firefox、およびOperaでしか動作しません。このライブラリを使って Internet ExplorerとSafariのスムーズなスクロール動作をエミュレートする.

わからない
JavaScriptライブラリ 通知を表示するための, Notyを使用すると、Alart、成功、エラー、警告、情報、またはダイアログメッセージを簡単に表示できます。 mo.jsやbounce.jsのようなアニメーションライブラリと一緒に使うことができます。 通知を適切にスライドさせる.

ホップスコッチ
石蹴りは LinkedInによってインスタンス化されたオープンソースプロジェクト. 開発者が製品ツアーを簡単に追加できるようにするためのフレームワークです。実例とAPIのデモをチェックしてください。.

SurveyJS
SurveyJSは別の素晴らしいJavaScriptライブラリです。その名前が示すように、 調査入力を作成するように設計されています. それは調査の答えを記入するために様々な入力タイプを備えています いくつかの人気のあるJavaScriptフレームワークにも移植されています AngularJS、VueJS、およびReactを含む.

WP GraphQL
GraphQLは増加傾向にあり、 RESTアーキテクチャに代わる強力な候補 それはほとんどすべてのWeb APIを動かします。これはあなたを可能にするプラグインです GraphQLを使ってWordPressのコンテンツを取得する. RESTとGraphQLがどのように互いに異なっているかについての素晴らしいリファレンスです。.

モナコ編集者
モナコエディターはそのエディターです ビジュアルコードエディタ. これはMicrosoftによって構築されており、HTML、CSS、LESS、CoffeeScript、PHPなど、いくつかの言語に対応しています。 あなたがより速くコードを書くのを助けるインテリセンス.
