Clever Geek Handbook

Web開発者のためのいくつかの興味深い有用なこと＃30

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



Cloudtunes





Cloudtunesはそうしたプロジェクトの1つであり、開発者がパブリックドメインにそのような開発を投稿する動機を理解していないことを考えています。 私を純粋に商業的な性格だとは思わないでください。しかし、このプロジェクトはおおよそクラウドのiTunesのクローンであり、素晴らしいサービスです。 Cloudtunesは、Dropbox、Youtube、Lastfmなどの間でデータを同期することにより、音楽ライブラリに単一のインターフェースを提供します。 サーバー側はPython（Tornado、Celery、Mongo DB、MongoEngine、Redis）で記述され、クライアント側はCoffeeScript（Backbone.js、SocketIO、Handlebars、Compass、SoundManager）で記述されています。







SweetAlert



画像

素晴らしいダイアログ。 最も使いやすい。 古典的な魅力のないアラートとpromtsの良い代替品。 ウィンドウの必要なイベントシーケンスを簡単に調整できる多くの追加オプション。 



//A basic message swal("Here's a message!") //A warning message, with a function attached to the "Confirm"-button swal({ title: "Are you sure?", text: "Your will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", closeOnConfirm: false }, function(){ swal("Deleted!", "Your imaginary file has been deleted.", "success); });




Googleマテリアルデザインのスタイルのブートストラップテーマ







Timing.js



ライブラリは、 Navigation Timing APIのメトリックを追加します 。 これで、ページの読み込みに関するすべてがわかります。 Timing.getTimes（）の出力から取得する結果： 

 firstPaint: 1411307463455.813 // New firstPaintTime: 685.0390625 // New appcacheTime: 2 connectEnd: 1411307463185 connectStart: 1411307463080 connectTime: 105 // New domComplete: 1411307463437 domContentLoadedEventEnd: 1411307463391 domContentLoadedEventStart: 1411307463391 domInteractive: 1411307463391 domLoading: 1411307463365 domReadyTime: 46 // New domainLookupEnd: 1411307463080 domainLookupStart: 1411307463032 fetchStart: 1411307463030 initDomTreeTime: 56 // New loadEventEnd: 1411307463445 loadEventStart: 1411307463437 loadEventTime: 8 // New loadTime: 558 // New lookupDomainTime: 48 navigationStart: 1411307462887 readyStart: 143 // New redirectEnd: 0 redirectStart: 0 redirectTime: 0 // New requestStart: 1411307463185 requestTime: 150 // New responseEnd: 1411307463335 responseStart: 1411307463333 secureConnectionStart: 1411307463130 unloadEventEnd: 0 unloadEventStart: 0 unloadEventTime: 0 // New




Horizo​​nonal.js





GitHubでのひどく魅力的でない着陸と不適切な少数の星。 ただし、このスクリプトを使用すると、さまざまなアニメーションバリエーションを持つコンテンツで非常に美しい効果を作成できます。 

 horizonal.init({ onPageTransition: function(type, page, animator) { // Use whatever JavaScript you like to transform the node } onNodeTransition: function(type, node, animator) { // Use whatever JavaScript you like to transform the node } });




Melchior.js-モジュラーチェーン定義（CMD）



画像 

 // create module melchiorjs.module('yourModule') // define dependencies .require('dependencyUno') .require('dependencyDuo', 'duo') // define module body .body(function () { // `dependencyUno` is available here! dependencyUno.doSomething(); // aliased `dependencyDuo` is available as `duo`! duo.doSomething(); // return methods for other modules return { method: function () { ... }, anotherMethod: function () { ... } }; });




Hook.js





Hook.jsは、Web上のUXモバイルデバイスに典型的な「更新するプル」シナリオを実装します：プルダウン時にコンテンツをロード/更新します。 非常に使いやすく、非同期プロジェクトの多くに役立ちます。



西洋の考え、またはそれがアブレに翻訳する価値があるもの：







本







有益なビデオとプレゼンテーション







Habrの発言と表示：







最後に：







前のコレクション（問題29）



タイプミスをおforびします。 あなたが問題に気づいた場合-個人的に書いてください。



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





More articles:


All Articles