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

CLI（コマンドラインインターフェース）を使えば、 Web開発ワークフローの合理化と自動化. それで、今回の記事では、ローカルコンピューターにインストールしたり、サーバー上で何かを実行したりするための、すばらしいCLIを多数用意しました。それに加えて、我々はまたいくつかを含めています PHPツール、ブラウザアドオン、およびJavaScriptライブラリ. チェックしてみましょう.

その他のリソースはこちら

推奨されるリソースの全コレクションと、利用可能な最高のWebデザインおよび開発ツールを見つけてください。.

ゲッツリ

Googleからの新しいエンコーダ 最大35％画像を圧縮することができます 品質を保ちながら初期サイズから。次のような同様のオープンソースエンコーダを考えれば、これはかなりの進歩です。 JPEGOptimとjpegtranは、平均で20％に制限されています. 私は、JPEGファイルを最適化するためにGuetzliを統合したCMSプラットフォーム用のアプリやプラグインがいくつもあることがわかります.

開発者ロードマップ

その名前が示すように、開発者ロードマップは Web開発者であることの旅のインフォグラフィック. フロントエンド、バックエンド、DevOpsの3つのコースがあります。これらのロードマップは、まさに地図のようなものです。そして参照するのに最適な参考資料です。 現在いる場所、逃した可能性がある場所、次に進む場所.

Netlify CMS

SmashingMagazineは最近、 溝に大胆な動きWordPress そしてNetlify CMSと呼ばれる新しいCMSで全く新しいことを試してみてください。これはReact.jsの上に構築された新しいCMSです。 Jekyll、Hugo、MiddleManなどの静的サイトジェネレータと統合.

BadSSL

それは SSL設定を確認するWebサイト. BadSSLはあなたのサイトにインストールされたSSLを介してデバッグやエラーを実行するための便利なツールです。.

アリックス

Alixは あなたのウェブサイトのアクセシビリティを監査することを可能にするChrome拡張. インストールして有効にすると、プラグインはページ上のいくつかの要素の上にオーバーレイボックスを追加します。 警告やエラーを引き起こす.

AR.js

AR.jsは 他とは異なるJavaScriptライブラリ. このライブラリによって、Webテクノロジを使用して拡張現実感を作成できます。 驚くべきことに携帯電話で本当に速く動きます.

反応トレンド

それは Unsplashのコンポーネントを反応させて、通常傾向を示すための素敵な折れ線グラフを作成します. コンポーネントは設定可能です。線の太さ、色、グラデーション、曲線の滑らかさを設定できます。あなたは単純にGUIを使用することができます コンポーネントコードを便利に生成する.

Gitee

A デスクトップからGithubのアクティビティを直接監視するmacOSアプリケーション, Giteeはステータスバーに新しいアイテムを追加し、星、フォロワー、および通知の数を示します。また、することができます あなたのプッシュのグラフを表示し、リポジトリとトレンドリポジトリでコミットします 現在の月と週に。一言で言えばデスクトップ上のGithubです。.

グープ

Goopsは プロジェクトディレクトリを解析する便利なCLI 追加するディレクトリとファイルを決定します。 .gitignore. CLIはNPMを介してインストールできます。インストールしたら、次のように入力します。 グープ そして終わった.

CSSをデバッグする

DebugCSSは ブラウザでCSS出力を分析および検証できるCSSドロップインユーティリティ. debugCSSスタイルシートをロードしたりブックマークレットを使用したりすると、Alixとまったく同じように機能します。 エラーや警告をもたらすページ上の要素を強調表示します。.

イーグルJS

EagleJSは プレゼンテーションを作成するためのJavaScriptライブラリ RevealJSに似ています。 EagleJSはいくつかの点で異なります。 JavaScript MVCフレームワークであるVue.jsを使って構築され、Pugを使います。 スライドを構築するためのテンプレートシステムとして.

BootstrapTour

A ブートストラップコンポーネントを使用してポップアップガイドを作成するためのJavaScriptライブラリ. ポップアップガイドは通常、新しいユーザがアプリケーションインタフェース、新機能、およびヒントを表示するためにガイドを案内するために表示されます。. あなたのサイトが同様にBootstrapで構築されているなら、それは完璧なライブラリです。.

レンガ

れんがは WebアプリケーションのUIを構築するために設計されたJavaScriptライブラリ. あなたは、バンドルされたコンポーネントの中でカレンダー、メニュー、そしてフォームのようないくつかの一般的なものを見つけることができます、それはまた付属しています "storage-indexeddb" あなたができるようにするコンポーネント IndexedDBを使用してクライアント側にデータを格納する.

オクトツリー

OctoTreeはIDEやコードエディタのようにツリー構造でGithub上のソースコードやファイルを閲覧することを可能にする素晴らしいユーティリティです。 Chrome、Safari、Firefox、およびOpera用のアドオンとして提供されており、公式のアドオンリポジトリから入手できます。 OctotreeはPrivateおよびEnterprise Githubリポジトリをサポートしています.

Githubの通知

Chrome用のもう1つの便利なGithubエクステンション。インストールが完了すると、現在Githubページにいなくても通知を受け取ることができます。リポジトリと一緒にいたい場合には素晴らしいプラグイン.

デプロイヤー

DeployerはあなたのPHPサイトをデプロイするためのツールです。 WordPress、Drupal、Magento、Laravel、CodeIgniterなど、一般的なフレームワークやプラットフォームの多くと連携します。このツールを使用すると、独自のレシピ、つまり展開中に実行するコマンドの一部を作成できます。付属しています ロールバック 障害発生時に以前のバージョンに戻ることができる機能.

PHPStan

ランタイムを実行せずにエラーを見つけるためにPHPファイルをスキャンするCLI。つまり、プロジェクトのPHPファイルをデバッグするためにフルスタックのPHP環境は必要ありません。.

NGINX定型句

バックエンドキャッシング、接続と要求のレート制限、およびサイトを高速化してトラフィックを急増させるための調整を行うためのその他のベストプラクティスを含む、一般的なNginx設定のコレクション.

陽気

Bubblyは、Let's Encryptを使用して証明書を生成、管理、および更新するためにサーバーにインストールできる素晴らしいコマンドラインです。 SSLを採用することは今とても簡単になっています.

ワッフルグリッド

それでも、Flexboxで構築された別のCSSグリッドフレームワークです。.