Web開発者にとって興味深いいくつかの便利なこと（問題3）

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

Cloudconvert

アーカイブ、オーディオ、CAD、ドキュメント、電子ブック、画像、プレゼンテーション、スプレッドシート、ビデオの合計140の形式をサポートする優れたオンラインファイルコンバーター。 DropboxおよびGoogle Driveと同期されているため、すべてのスマートフォンで使用できます。 そして最良の部分は、このサービスには機能的でシンプルなAPIがあることです。

ムニー

多機能PHP5.3ライブラリ。プロジェクトを最適化するための優れたソリューションです。 その助けを借りて、LESS、SCSS、CofeeScriptファイルをその場でコンパイルし、画像のサイズ変更とトリミング、CSSとJSの縮小、1つのリクエストへの結合を行うことができます。 Muneeは、サーバー側とクライアント側の両方でリソースを正しくキャッシュする機能も提供します。 Githubプロジェクト

ブランチ

Node.jsの一流プロジェクトビルダー。 最適化の観点から見ると、Muneeに似ています（ PHPについては以前書いたのです。古いものは譲歩する必要があり、一般にそのような設備は「あまりない」ように見えます ）。 それ以外の場合、ボイラープレート、ブートストラップ、スケルトン、Angular.js、Backbone.js、Jade、Phonegapなどの多種多様なビルド設定

Favico.js

小さく、ほとんど知覚できないファビコンは、有能なインターフェースの非常に有用な要素になり得ます。 このスクリプトを使用すると、あらゆる種類の方法でプロジェクト内のファビコンを簡単に操作したり、任意のビデオをブロードキャストしたり、Webカメラから録画したりできます。 同様の機能を備えたjQuery Notify Betterもありますが、機能はそれほど広くありません。

Animo.js

現在、 Effeckt.cssまたはAnimate.cssを使用して、CSSのさまざまな方法で要素を美しく簡単にアニメーション化できます。 Animo.jsは、CSSアニメーション（animate + animo.css）を操作し、クロスブラウザーぼかし効果を追加できる小さなライブラリ（7kb）です。 jQuery 2以降で動作します。 構文は非常に簡単です。

$('#demo-a').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() { $('#demo-n').animo({animation: "fadeOutUp", duration: 0.5, keep: true}, function() { $('#demo-i').animo({animation: "fadeOutDown", duration: 0.5, keep: true}, function() { $('#demo-m').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() { $('#demo-o').animo({animation: "fadeOutRight", duration: 0.5, keep: true}, doMagicIn()); // function to fade them back in }); }); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グリッド

CSSフレームワーク（Bootstrap、Foundation、UIkitなど）を使用しない場合、レスポンシブグリッドを作成する最も簡単で最小の方法として、Gridismをお勧めします。

再加工

「Node.jsおよびブラウザ用のカスタムCSSプリプロセッサ。」 徹底的に試してみる時間があるまで。 しかし、通常、JavaScriptは通常の機能、組み込みのコンパス、プレフィックスの自由、さまざまな「微妙な」瞬間、透明なミックスインや組み込みの.at2xポリファイル（[ベンダー]）網膜ディスプレイ。

バジリク

Basilは、デスクトップおよびモバイルインターフェイスを作成するための膨大な数のUI要素を含むPSDファイルです。 個人的に、私は「フリーハンド」（手作り）のスタイルが本当に好きで、プロモーションビデオを見た後、それがさらに好きになります。 そして、それはすべて、品質と味覚に対する CloudCastle Respectの Samaraで行われています。

包丁

「ハッカー向けの30秒間のスライドショー。」

 npm install -g cleaver
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 cleaver path/to/something.md
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 title: Basic Example author: name: "Jordan Scales" twitter: "@jdan" url: "http://jordanscales.com" output: basic.html controls: true -- # Cleaver 101 ## A first look at quick HTML presentations -- ### A textual example Content can be written in **Markdown!** New lines no longer need two angle brackets. This will be in a separate paragraph -- ### A list of things * Item 1 * Item B * Item gamma No need for multiple templates!
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、最終的にはまさにそのようなプレゼンテーションを取得します

最後に：

たぶん誰かがShade.less / Shade.cssを見なかった。

最近、フラットカラーを定義するためのKulerに似たツールを探していましたが、 このパレットだけが見つかりました（コメントで必要なサービスへのリンクに感謝します）。

面白い CSSギミック：CSSでのクライアント側の全文検索 、純粋なCSS （ image2css ）でのモナリザ 、 カートマン 。



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



次のコレクション（問題4） 前のコレクション（問題2）