Web開発者にとって興味深く有用なもの（問題4）

良い一日、親愛なるハブラフチアン。 最近、私はHabrと共有したいいくつかの興味深い有用なツール/ライブラリ/イベントを見ました。



Pace.jsは、プログレスバーをプロジェクトに追加する最も簡単な方法です（ こちらのドキュメント ）。 Paceには、CSSでのみ説明されているトピックがいくつかあります。 Hubspotから、GitHubにはさらに2つの普遍的なプロジェクトがあります。VexとMessenger-それぞれ「21世紀の対話」と「21世紀の警告」です。 お勧めです。



フラットUI無料2.1

人気のある情報リソースであるDesignmodoは、 GitHubでトレンディなフラットデザインスタイルのインターフェイス要素の広範なセットを公開しています。 これについては、3月にhabrayuzer ilya42が 書きました 。 そして今週、プロジェクトはバージョン2.1に更新されました。 現在、フラットUIはBootstrap 3をサポートしており、多くの新しい要素、アイコン、およびフォントが更新されています。 老人の数はすでに5000人を超えています。



フレーマー

開発者Koen Bokによる素晴らしい発明。 Framerは、インタラクティブでアニメーション化されたインターフェイスをプロトタイピングするための無料のツールです。 アプリケーションはPhotoshopと同期し、レイアウトレイヤーを.pngにスライスします（もちろん、レイアウトでは手で少しカットする必要がありますが、レイアウトに対するデザイナーのペダントリーにすべて依存します）。 また、デザイナーはこの単純な構文を使用して、ブラウザでインタラクティブ機能とアニメーションを追加します（残念ながらChromeのみ）。 PSD.Logo、PSD.OverviewButtonはPNGファイル名です。 開発者Framerについて言えば、彼のプロジェクトCactus -Djangoテンプレートを使用したPythonの統計サイトのジェネレーターについても言及したいと思います。

Blendme.in

先日、Photoshopの非常に便利な拡張機能が1つ登場しました-Blendme.in。 彼のおかげで、最も人気のあるアイコンセットはすべてPhotoshopウィンドウで直接利用できます。 画像ファイルは、Creative Commons Attribution 3.0 Unported Licenseの下で配布されます。



Photoshop CS6の Photoshop CC バージョンのバージョン

Editr.js

Editrを使用すると、HTML、CSS、JavaScriptを操作するためにサーバープレイグラウンドで整理できます。 高品質で美しいプロジェクト：ACE Editor、Emmet、Base64、LESSおよびCofeeScriptのサポート、JSおよびCSS検証、多くのトピックに基づいています。

責任ある要素

シンプルでありながら非常に使いやすいjQueryプラグイン。 要素をレスポンシブにするために、 data-respond属性を追加し、メディアクエリのmin-widthとmax-widthに似た適切なサイズでCSSの.gtクラスと.ltクラスを規定します。

.quote.lt500 {background: blue} .quote.gt150.lt300 {background: red} /* min-width: 150, max-width: 300 */
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Trunk.js

レスポンシブメニューを作成するための使用可能なjQueryプラグイン。 非常に美しいデモページでは、この笑顔スクリプトに無関心ではありません。 ネイティブJSには同様の、おそらくさらに機能的なスクリプトがあります-Responsive-nav

コンポジット

「対話型プロトタイピング」のツールについてはすでに説明しました。 Compositeは次のようなものです。現時点では、これはiOS専用のアプリケーションであり 、Photoshopにリモートで接続し、デザイナーがインタラクティブなプロトタイプを作成できるようにします。 もう1つの違いは、支払いが行われ、おそらくより安定していることです。

ブレース

「ブレースはウェブサイトをホストする新しい方法です。」 これは実際、単純なサイトをホストする興味深い方法です。 XMLベースのCMSで何かをすることもできます。 しかし今のところ、これは「興味深い」だけであり、おそらく、一部の人にとっては、クライアントにレイアウトをデモンストレーションするのに便利なサービスです。

最後に：

• Polymerは非常に野心的なプロジェクトです。 これは、 Webコンポーネントに基づくWeb用の新しいタイプのライブラリであり、最新のブラウザーでWebプラットフォームの最新の要素を操作するように設計されています。 大まかに言うと、これはブラウザの最新の標準とクロスブラウザの互換性のサポートを作成するためのポリファイルの巨大なセットです。
• Fireshell-これは、Grunt、SCSS / SASS、および既存のH5BPよりも優れた、より完全なボイラープレートです
• SVG.jsに関する私の投稿を誰かが見なかったかもしれません
• BrowserswarmはBrowserstackに似ていますが、JSをテストするためのものです
• CLNDR.jsは、JSで最も高品質で機能的なカレンダーの1つです。
• 焼きたての2つの美しいフォント： FirefoxOS用のMozillaのFira（ GitHub ）とKickstarterのおかげで登場したThe Exo
• Simperiumはリアルタイムサービスであり、 Pusherの優れたライバルです。 より多くのクロスプラットフォームで安価です。 Automattic（Wordpress、Gravatarなど）によって開発されました
• LearnyounodeはNode.jsの別のチュートリアルですが、 コンソールのチュートリアルです。

ご清聴ありがとうございました。



次のコレクション（第5号） 前のコレクション（第3号）