Some interesting and useful things for web developer # 33

Good day, dear habravchane. Recently, I saw some interesting and useful tools / libraries / events that I want to share with Habr.

Walkway.js and Vivus.js

Have you seen this magnificent landing dedicated to the announcement of the Sony PlayStation 4? Pay attention to the animation of SVG objects consisting of contours. They seem to be drawn by the artist in real time. From now on, this effect can be easily repeated using Walkway and Vivus. Both libraries are as easy to use as possible and are applicable only to path elements, since the principle of their work is based on the interaction with the CSS property strokeDashoffset . Although the Walkway has significantly more stars on Github, but Vivus provides several drawing options: Delayed, Async and 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

Awesome library for working with pull-throw, resize and gestures. Mega cool is that Interact allows you to drag SVG and key points in SVG objects. It works in all modern browsers: Chrome, Firefox, Opera and Internet Explorer 8+ and supports mobile devices. Not dependent on supporter libraries. Powerful API and event model. Compact solution to replace bulk 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); }); 

Materialize and Material UI

Recently, I met two self-sufficient framework, where all the elements and effects inherit the stylist of the popular Google Material Design. Materialize is richer in various interface solutions, and Material UI is a set of React components.

450 lines language implementation

Do you remember the trend week of abnormal programming on Habré a year ago? Tiny Snake on JavaScript (30 lines of code) , Tiny Excel on pure JavaScript (30 lines of code) ( and even 5 lines from David Blaine ), Tetris , Arkanoid , Gonochka , Piano , Roguelike / RPG , Sokoban , Tower of Hanoi , Tic-tac-toe , Fifteen , Minesweeper ( 1 and 2 ), Color pipette on JS, 399 characters (not lines) , Labyrinth generation by Euler algorithm , Playing in 30 Assembler commands , Minecraft on C # (19 lines of code) , Drawing on Windows in C ++ (30+ lines code) and my favorite trick. Playing 0 lines of code on pure JS . An example of your own 450-line programming language is not a bad addition to this compilation.

Particles.js

A simple library for creating "living particles." It has a number of different options and will allow you to create a pleasant decoration for your background. I also want to share other libraries for generating various objects: Seen.js , Trianglify and 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 }); 

Firefox Developer Edition

Western thoughts or what would translate to Habré:

• Happy 10th, Firefox
• Overwhelmed by code
• Hacker's guide to Neural Networks
• Cleaning Your Coding Workflow Organized
• Responsive Images in Practice
• The $ PATH to Enlightenment
• Distributed On-The-Fly Image Processing at Vimeo
• Create interactive JavaScript video effects
• 5 Gotchas You're Gonna Face Getting Inline SVG Into Production
• SVG Animation and CSS Transforms: A Complicated Love Story
• Styling And Animating SVGs With CSS
• Native javascript data binding
• JavaScript Modules: Welcome to My Emo Hellscape
• Resizing and Cropping Images with Canvas
• Building single page apps using web components
• A golden age of design
• Framing Effective Messages To Motivate Your Users
• Enabling Multiscreen Tracking With Google Analytics
• Using linked SmartObjects in combination with Layercomps in Photoshop CC
• That Pixel Design is so Hot Right Now
• Publish What You Learn

They say and show domestic IT resources:

• “License for your open-source project” from marked-one
• "SVG Animations Guide (SMIL)" by CSS Live, original CSS Tricks
• “Entertainment with CSS counters” from CSS Live, original on Codersblock
• “Meteor. We develop TODO List " from movl
• “Calling to mobile phones from the browser with the recording of conversations” from sterx
• "WebGl: graphic effects and image filtering under steroids" from HTML5.by.
• "9 Basic Principles of Responsive Web Design" by andrew-r
• "A selection of interesting CSS recipes" Naked Fridays # 3 " by Paul_King
• "Isomorphic JavaScript Applications with Catberry.js" by pragmadash
• "JMeter as a relatively convenient and practical tool for testing API" from htc-cs
• "The work of a web project in an unstable connection" from Zav
• Louter's GamepadAPI or Browser Joystick
• "We invite to the conference on web development on November 29" from TeamMRG

Finally:

• Screeps is the first strategic MMO game for programmers.
  
  
  
  
• Twemoji is a collection of Unicode Emoji emoticons from Twitter.
• SQL.js - SQLite is now available in JavaScript.
• PGweb.js - PostgreSQL in the browser.
• Loki.js - embeddable / in-memory database.
• Dashboards - responsive dashboard templates on Bootstrap.
• Github Todos - converts your ToDo list to GitHub Issues
• Higgs - JavaScript Virtual Machine.
• Raven is a text editor with an emphasis on typography.
• jQuery Autotab - customize tabs for forms.
• Deliver - simple warm-up of screenshots, application dates and updates on the Ruby App Store.
• Delve - debugger for Go.
• Deis - Your PaaS. Your Rules.
• Cockroachdb - Scalable, Geo-Replicated, Transactional Datastore for Go.
• Home Assistant is a library for programming smart home in Python.
• Nogotofail - network security testing tool.
• Skype is now available in the browser.

Previous selection (Issue 32)



I apologize for any typos. If you notice a problem - please write in a personal.



Thank you all for your attention.