Webデザイナーおよび開発者向けの新鮮なリソース（2019年3月）

Web開発の世界では、ここ数カ月間にたくさんのことが起こりました。まず、新しい ブロックベースのエディタ、コードネームGutenberg, ついにWordPress 5.0にマージされました。それは、WordPressが将来発展するための新しい基盤を設定し、開発者がWordPressの機能をどのように拡張するかを変えることになるので、開始以来、本当に大きな変化です。.

第二に、私たちの仲間の開発者の何人かはそれを可能にするもののようないくつかの本当に役に立つツールを作りました ターミナルでJSONを見る そしてWebデザインや開発プロジェクトで大きな助けになることを証明することができるいくつかのReactライブラリ.

そして最後に、最も効果的なもの リソース、参照、およびプラグイン 新しいトレンドに合わせてプロジェクトを更新するのに役立つように開始されました.

新鮮なWeb開発リソースの最も包括的なリストを入手しましょう.

グーテンベルクハンドブック

デザインの参考文献を調べることができる公式のWordPressハンドブック, ブロックを作成するためのコード例 他の人やプロジェクトに貢献するためのガイド。それはグーテンベルクで開発するためのあなたの最初の参照です.

ブロック足場

ブロックベースのエディタでは、WP-CLIは今から始めるための便利な方法を提供します。 新しいCLIコマンドでGutenberg Blockを作成する, WP足場ブロック. あなたはそれを作成してあなたの既存のプラグインとテーマに含めることができます.

CGB

グーテンベルクブロックを簡単に起動するもう1つの方法は、グーテンブロックを作成する（CGB）ツールです。 定型文を生成する グーテンベルクブロックを開発する。 React.js、Webpack、ESLint、Babelなどの最新のツールで構成されています。 これらのツールを設定する必要はありません だからあなたは単にあなたのコードを書くことに集中することができる.

グーテンベルクのエレメンターブロック

あなたを可能にするWordPressのプラグイン 任意のElementorテンプレートを挿入する エディタ内でプレビューします。プラグインには、他にも多数の互換性があります。 シームレス編集体験 エレメンターとグーテンベルクの間。このビデオをチェックして、実際の動作を確認してください。.

原子ブロック

グーテンベルクブロックのセットは、コレクションの数が増えています。これを書いている時点では、 “ポストグリッドブロック” あなたがすることができます サイトの投稿のリストをグリッドレイアウトで追加する. またあります “お客様の声” 名前が示すとおり、ページ内に紹介文を挿入します。このページのブロックの完全なプレビューをチェックしてください.

ブロックギャラリー

あなたのイメージギャラリーを挿入するための人目を引くブロック、ブロックギャラリーはあなたの投稿に画像を追加するためのシームレスな体験を提供します。画像をドロップするだけで、ギャラリーの表示スタイル（石積みスタイル、カルーセル、またはフルスクリーン）を設定するだけで、すべて設定できます。現時点では、WordPressにとっては最高のGallery Blockです。.

コブロック

上記のブロックギャラリーを開発したのと同じ作者からのブロックのスイート、CoBlocksはあなたのサイトのコンテンツを以下のように強化するいくつかのブロックで構成されています。 アコーディオン、価格表、GIF、Click-to-Tweet, そして追加されるより多くのブロック.

StagBlocks

グーテンベルクブロックの別のスイート。プラグインはあなたの多くが感謝するであろう面白いブロックをたくさんもたらします。それはあなたがあなたの投稿やページ内の統計をカスタマイズすることを可能にするStat Blockを含みます。ウェブサイトカードブロック ウェブサイトを豪華なカードスタイルでプレビューする. 強調色でコードをレンダリングするコードブロック.

カワウソブロック

また、のようなグーテンベルクブロックのコレクション “Googleマップブロック” 地図を挿入する, “私達のサービスブロック” に グリッドビューにボタンでサービスのリストを挿入する, そして “お客様の声エリアブロック” 紹介文のリストを挿入する。 Otter Blockは、企業やテーマ開発者が評価するGutenberg Blocksのコレクションです。.

アドバンストグーテンベルクブロック

このプラグインは一握りが付属しています コンテンツを充実させる高度なブロック 自動生成された目次など, “Giphyブロック” Giphy.comからのGIF画像を含める方法, “アンスプラッシュブロック” Unsplash.comから画像を挿入する方法, “バナー広告ブロック”, WooCommerce “カートに入れるボタンブロック”, そしてもっとたくさん.

ブロックラボ

Block Labを使用すると、開発者はGutenberg Blockを簡単に作成できます。プラグインはあなたをすることができます ユーザーフレンドリーなGUIで新しいブロックを登録する とPHPのテンプレート。あなたもReact.jsを学ぶ必要はありません.

EDDブロック

グーテンベルクエディタでEasy Digital Downloads製品をレンダリングすることを可能にするプラグイン。ショートコードを使用するのとは異なり、このブロックには製品ビューが表示されます。.

テストグーテンベルク

Gutenbergプラグインをインストールしたり、あなたのサイトをWordPress 5.0に更新する準備ができていませんか？簡単にできます このサイトをロードして新しいエディタを試す.

グーテンベルククラウド

グーテンベルクブロックのAppStoreのようです。あなたが得ることができる中心的な場所 WordPressとDrupalで使えるグーテンベルクブロック. はい、Drupalも彼らの編集者にグーテンベルク編集者を採用する予定です。.

グーテンベルクの例

Gutenberg Blocksを作成するためのコードサンプルのGithubリポジトリ。ここであなたは見つけることができます 最も複雑な例への最も単純なブロック, 作成するものなど “レシピブロック” ユーザーが追加するテンプレートをエディタに設定します。 レシピ コンテンツ。教科書よりも実例から学ぶことを好む人のための良い参考資料.

グーテンベルクJS

グーテンベルクのJavaScript専用バージョン。これはNPMパッケージとして入手可能です。これにより、Gutenbergを任意のJavaScriptアプリケーションに統合することができます。.

グーテンベルクを無効にする

グーテンベルクはWordPressに新しい可能性をもたらしますが、誰もがそれに対応できるわけではありません。既存のサイトがグーテンベルクでうまく動作しない場合は、このプラグインをインストールすることができます。それはあなたがすることができます グーテンベルクエディタを無効にする 特定の投稿、投稿の種類、ユーザーの役割、テーマ、およびフロントエンドでGutenbergスタイルシートを無効にする.

クラシックエディタ

あるいは、このプラグインをインストールして、古いクラシックエディタを使い続けながらWordPress 5.0にアップデートし続けることができます。このプラグインは2022年までサポートされます.

クラシックプレス

もう1つの方法は、WordPressフォーク、ClassicPressに切り替えることです。 ClassicPressがフォーカスしている ビジネス、安定性とセキュリティ. これはWordPressプラグインと互換性があり、将来のリリースで新しいおもしろい機能を追加する予定です。私たちの投稿をチェックしてください：ClassicPress：GutenbergとReact.jsを使わないでWordPressの代わりに

スピードアップWordPress

WordPressが大きくなったので。単なるブログプラットフォームではありません。特にグーテンベルクはあなたのサイトを遅くするかもしれないあなたのサイトにいくつかの追加ロード、コード、ファイルを追加しました。これは、あなたがあなたのサイトの問題点を特定し、それを業界で最も最近のベストプラクティスに取り組むのを助けるためにあなたが参照することができる詳細です.

Visual Studioコードブラウザプレビュー

Chrome Headlessを搭載した実際のブラウザをVisual Studio Code内に追加するVisual Codeエディタ。これにより、 作品をリアルタイムでプレビューする コードエディタ内にあり、エディタ内デバッグなどの機能を有効にします。.

バンドルサイズ

Bundlesizeは、 JavaScriptファイルを保管する 同梱 サイズチェック. あなたはあなたのバンドルされたファイルのそれぞれの最大サイズを定義することができます、そしてそれはそれが約または定義された最大サイズを超えたときあなたに警告するでしょう。 BundlesizeをTravisCIやCircleCIなどのCIサービスと統合して、プロジェクトにワークフローをシームレスに展開できます。.

WPエマージュ

現代の MVCパターンに基づくWordPressテーマフレームワーク. LaravelやSlimのようなPHPフレームワークを使い慣れていれば、きっとこのフレームワークに感謝するでしょう。あなたはRouter and Controller、DI Container、およびMiddlerwareのようなものを使うことができます.

灯台ボット

Dockerを使用してCIサービスでLighthouseを実行できるようにするユーティリティツール。それは素晴らしいツールです ウェブサイトのパフォーマンスチェックを自動化する あなたがあなたのウェブサイトコードに新しい変更をプッシュするたびに.

Reactアプリを学ぶ

学ぶReactアプリはReact.jsを学ぶためのリソースです。しかし、他のリソースとは異なり、これは コンピュータにローカルにインストールされている. それは学習教材を含むだけでなく、それはコードと対話型のサンプルも含みます。最良の部分はそれがインストールされたらあなたがオフラインでそれを行うことができるということです.

WPの受け入れ

WP Acceptanceは、受け入れテストを実行できる新しいツールです。簡単に言えば、受け入れテストは一連のものです。 ユーザーの行動をエミュレートするテスト. この種のテストを実行するためのフレームワークは数多くあります。.

ただし、主にWordPressを使用している場合は、このツールが設計され、WordPressプロジェクトが必要とする典型的なニーズに合わせて調整されているので、使いやすさの点でこのツールを評価するでしょう。.

ピカピカ

JavaScriptライブラリ モバイルデバイスで表示したときにあなたのウェブサイトの照明反射をエミュレートする. あなたはhttps://pqina.nl/shiny/でデモを見ることができます。モバイルデバイスでしか利用できない特定のAPIに依存しているため、モバイルデバイスでしか機能しないことは注目に値します。.

リアクト・ルシード

ReactLucidはあなたを助けるためのツールです。 ReactおよびGraphQLアプリケーションのデバッグ よりインタラクティブな方法で。それはあなたがリアルタイムであなたのReactアプリケーションの中でコンポーネント階層、状態/小道具の変化だけでなくGraphQLスキーマ、問い合わせ、そして突然変異を見ることを可能にします.

CSS機能の切り替え

あなたを可能にするChromeの拡張機能 Chromeで特定のCSS機能を無効にする. これにより、特定の機能が存在しない場合にWebサイトがどのようにレンダリングおよび動作するのかを確認できます。すべてのブラウザに実装されていない可能性がある新しいCSS機能を実装するのに役立ちます。.

ブレンディ

あなたを助けることができるツール 画像とCSS背景ブレンドモードをカスタマイズする. ブレンドモードのプレビュー、色の変更、グラデーションの適用ができます。 Unsplashの画像を使用することも、コンピュータからアップロードすることもできます。.

React Elemental

箱から出してすぐに使えるReact要素のコレクション。 Webpackに追加する構成をインポートまたはカスタマイズするための外部CSSはありません。 Button、Checkbox、SelectList、Tabs、Tooltipなどの重要なコンポーネントが付属しています。.

FX

JSONフォーマットをよく扱っている場合は、このツールをお勧めします. fx です ターミナルでJSONデータを視覚化できるコマンドラインツール 対話モードで。データを拡大または縮小できるようにする. fx NPMまたは自作を介してインストールすることができます.

モニカ

モニカはかなり独自のカテゴリーに属しています。それは一種のCRM（Customer Relationship Manager）ですが、あなたの顧客のためではなく、あなたの家族や友人のようなあなたの愛する人のためのものです。.

CRMのように、それはあなたが彼らと一緒にあなたの活動のようなことを追跡することを可能にします、そしてあなたがそれらを最後に呼んだときなど。さらに、それはあなたがしばらく話していない誰かに電話することを思い出させるように設定できます。彼らはそれをPRM（Personal Relationship Manager）と呼んでいます。.

イオンフレームワーク

イオンフレームワークは実際にはしばらく前から出回っています。しかし最近、それはその機能性においてかなり大きな飛躍を遂げました。今では高速であるだけでなく、イオンも 2つの新星フレームワークと互換性があります：React.jsとVue.js.

これは、イオンが フレームワーク不可知論ツール. そのため、特定のフレームワークに対して機能するだけでなく、将来的にはフロントエンド開発が進化するにつれて、新しいフレームワークに対しても機能する可能性があります。.

注目すべき

注目すべきは、注目を集めるデスクトップアプリケーションです。他の同様のアプリとは異なり、それは独自のフォーマット、WYSIWYG、または他の典型的な鐘と笛が付属していません。の アプリエディタは主にGithub風のMarkdownを搭載しています. メモはフラットファイルに保存されます .md 添付ファイルと同様にファイル。それだけで動作し、シンプルです.

TipTap

TipTapはVue.jsとProseMirrorの上に構築されたWYSIWYGエディタです。素晴らしいMarkdown構文サポートなど、ProseMirrorからすぐに使用可能な多数の機能を継承する以外に、TipTapには、テキストを強調表示するときに書式設定メニューが表示されるMenu Bubble、タグ付けや言及ができるSuggestion機能など、いくつかの最新機能があります。コンテンツ内の人物 JSONフォーマットでコンテンツをエクスポートする機能.

平地

RestplainはWordPressプラグインで、サイト上のカスタムエンドポイントを含むWordPress REST APIエンドポイントのドキュメントを簡単に生成できます。 ドキュメント内からAPIを呼び出す. 注意する点は、ドキュメントの生成はエンドポイントスキーマに依存しているため、カスタムエンドポイントに適切なスキーマを追加したことを確認することです。.

リアクトコンテンツローダー

リアクトコンテンツローダー 実際のコンテンツがロードされている間にコンテンツプレースホルダを表示することを可能にするReactカスタムコンポーネントです。それはあなたがFacebookやInstagramで見るローダーのタイプに似ています .

神話

Mythicは、Dependency Injection、Views、Controllersなどの最新のベストプラクティス、およびなどの最新のツールを使用したWordPress初心者向けテーマです。 Webpack、Sass、Linting、PHP7 最小要件、およびBEM。テーマ開発者としてのスキルをレベルアップするのは素晴らしいテーマです。.

洗練されたGithub

Githubを使用するときのあなたの経験を洗練するためのブラウザ拡張。それはいくつかの便利なホットキーを追加し、いくつかのレイアウトとUIを改良し、自動的にissueとPRへのリンクを追加し、そしてもっとたくさんの.

オープントイレ

Open WCは、カスタムWebコンポーネントを作成するための一連のツールです。 Webコンポーネントを作成するためのメインライブラリ、迅速に生成するためのYeomanジェネレータが含まれています。 “オープントイレ” テスト用の足場を含むプロジェクト, リンティング, そして統合を続ける.

あなたがしたい場合はオープントイレが良い代替手段になることができます ネイティブのWeb機能で実装することを好む Vue.jsやReact.jsのようなフレームワークを使うのではなく.

Gridsome

Gridsomeは Vue.jsとGraphQLを使用して静的WebサイトとWebアプリケーションを構築するためのツール. WordPressやDrupalなどのCMS、MarkdownやYamlなどのローカルファイル、AirTableやContentfulなどの外部APIなど、複数のデータストリームを処理できます。特にReact.jsよりVue.jsを好む場合、これはGatsby.jsの本当に素晴らしい代替手段です。.

ブラウザ

これは、World Wide Webの発明者であるTim Berners-Leeによって構想されているブラウザです。それは HTMLをレンダリングするためのシンプルなブラウザ 最近のブラウザのようにアドレスバーは表示されませんが、に移動して表示できます。 ドキュメント>完全なドキュメントリファレンスから開く URLを貼り付けてクリック 開いた. そして、そこにあなたのサイトが元のブラウザでどのようにレンダリングされるかがわかります。.

ラスター

ラスターは、CSSグリッド、CSSカスタムプロパティ（変数）、およびカスタム要素などの最新のHTMLおよびCSS仕様で構築された最新のグリッドフレームワークです。縁に住みたい人のための完璧なフレームワーク.

フーパー

カルーセルまたはスライダーを追加するためのVue.jsコンポーネント。それはタッチ、キーボード、マウスホイール、そして他の補助的なナビゲーションを通してアクセス可能で使いやすいです、それはRTLと垂直方向、拡張可能、そしてもちろん応答をサポートします.