☁️ ♌️ 🍍 Web開発者のためのいくつかの興味深い有用なこと＃33 👩‍👩‍👧‍👦 ♣️ 🙆

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

Walkway.jsおよびVivus.js

Sony PlayStation 4の発表専用のこの素晴らしいランディングページを見たことがありますか？アウトラインで構成されるSVGオブジェクトのアニメーションに注意してください。それらはアーティストによってリアルタイムで描かれているようです。今後、この効果はWalkwayとVivusを使用して簡単に繰り返すことができます。どちらのライブラリも非常に使いやすく、パス要素にのみ適用できます。それらの操作の原理はCSSプロパティstrokeDashoffsetとの相互作用に基づいているためです。 WalkwayのGithubにはかなり多くの星がありますが、Vivusにはいくつかのレンダリングオプションがあります：Delayed、Async、OneByOne。

//Walkway var svg = new Walkway('#test'); svg.draw(function() { console.log('Animation finished'); }); //Vivus new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);

Interact.js
素晴らしいドラッグアンドドロップ、サイズ変更、ジェスチャーライブラリ。メガクールは、Interactを使用してSVGオブジェクトとSVGオブジェクトのキーポイントをドラッグできることです。 Chrome、Firefox、Opera、Internet Explorer 8以降のすべての最新ブラウザーで動作し、モバイルデバイスをサポートします。図書館の支持者に依存しません。強力なAPIおよびイベントモデル。バルクjQuery + jQuery UIを置き換えるコンパクトなソリューション。

 var // x and y to keep the position that's been dragged to x = 0, y = 0, // vendor prefixes (prefices?) transformProp = 'transform' in document.body.style? 'transform': 'webkitTransform' in document.body.style? 'webkitTransform': 'mozTransform' in document.body.style? 'mozTransform': 'oTransform' in document.body.style? 'oTransform': 'msTransform'; // make an Interactable of the document body element interact(document.body) // make a draggable of the Interactable .draggable({ // on(drag)move // could also have done interact(document.body).draggable(true).ondragmove = function... onmove: function (event) { x += event.dx; y += event.dy; // translate the document body by the change in pointer position document.body.style[transformProp] = 'translate(' + x + 'px, ' + y + 'px)'; } }) // you should really add listeners like this if you want to add multiple listeners .on('dragend', function (event) { console.log('dragged a distance of ' + Math.sqrt(event.dx*event.dx + event.dy*event.dy) + ' pixels to ' + event.pageX + ', ' + event.pageY); }) // allow inertia throwing .inertia({ resistance: 15, zeroResumeDelta: true }); // snap to the corners of the specified grid .snap({ mode: 'grid', grid: { x: 100, y: 5 }, gridOffset: { x: 20, y: 10 }, range: Infinity // can also use -1 which gets changed to Infinity }); // you can also listen to InteractEvents for every Interactable interact.on('dragstart', function (event) { console.log('starting drag from ' + event.x0 + ', ' + event.y0); });

マテリアライズとマテリアルUI

私は最近、すべての要素と効果が人気のあるGoogleマテリアルデザインのスタイリングを継承する2つの自己完結型フレームワークに出会いました。マテリアライズはさまざまなフロントエンドソリューションで豊富であり、マテリアルUIはReactコンポーネントのセットです。

450行の言語実装

1年前のHabréでの異常なプログラミングのトレンドウィークを覚えていますか？ JavaScriptの小さなヘビ（30行のコード）、純粋なJavaScriptの小さなExcel（30行のコード）（およびDavid Blaineから5行さえ）、テトリス、アルカノイド、ゴノッカ、ピアノ、ローグライク/ RPG 、倉庫番、ハノイの塔、チックタックトー、 15 、マインスイーパ（ 1および2 ）、 JSのカラーピペット、399文字（行ではない）、オイラーアルゴリズムによる迷路の生成、30個のアセンブラーコマンドのゲーム、 Minecraft in C＃（19行のコード）、 C ++でのWindowsの描画（30行以上）コード）と純粋なJSのコードの0行の私のお気に入りのトリックゲーム。 450行のプログラミング言語の例は、このコレクションへの追加としては悪くありません。

Particles.js

「生きている粒子」を作成するためのシンプルなライブラリ。さまざまなオプションがあり、背景に素敵な装飾を作成できます。また、さまざまなオブジェクトを生成するためのSeen.js 、 TrianglifyおよびTrianglesのライブラリも共有したいと思います。

 particlesJS('particles-js', { particles: { color: '#fff', shape: 'circle', // "circle", "edge" or "triangle" opacity: 1, size: 4, size_random: true, nb: 150, line_linked: { enable_auto: true, distance: 100, color: '#fff', opacity: 1, width: 1, condensed_mode: { enable: false, rotateX: 600, rotateY: 600 } }, anim: { enable: true, speed: 1 } }, interactivity: { enable: true, mouse: { distance: 250 }, detect_on: 'canvas', // "canvas" or "window" mode: 'grab', line_linked: { opacity: .5 }, events: { onclick: { enable: true, mode: 'push', // "push" or "remove" (particles) nb: 4 } } }, /* Retina Display Support */ retina_detect: true });