Несколько интересностей и полезностей для веб-разработчика #33
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.Walkway.js и Vivus.js
Вы видели этот великолепный лэндинг посвященный анонсу Sony PlayStation 4? Обратите внимание на анимацию SVG объектов состоящих из контуров. Они словно рисуются художником в режиме реального времени. Отныне этот эффект можно легко повторить с помощью Walkway и Vivus. Обе библиотеки максимально просты в использовании и применимы только для path элементов, поскольку принцип их работы основывается на взаимодействии с CSS свойством strokeDashoffset. Хоть и у Walkway значительно больше звезд на Гитхабе, зато 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);
});
Materialize и Material UI
Недавно мне повстречались два самодостаточных фреймворка, где все элементы и эффекты наследуют стилистку популярного Google Material Design. Materialize более богат различными интерфейсными решениями, а Material UI представляет из себя набор React компонентов. 450 lines language implementation
Вы помните трендовую неделю ненормального программирования на Хабре год назад? Крошечная змейка на JavaScript (30 строк кода), Крошечный Excel на чистом JavaScript (30 строк кода) (и даже 5 строк от Дэвида Блейна), Tetris, Арканоид, Гоночка, Пианино, Roguelike/RPG, Сокобан, Ханойская башня, Крестики нолики, Пятнашки, Сапер (1 и 2), Цветовая пипетка на JS, 399 символов (не строк), Генерация лабиринтов алгоритмом Эйлера, Игра в 30 команд Ассемблера, Minecraft на C# (19 строк кода), Рисовалка под Windows на C++ (30+ строк кода) и моя любимая хитрость Игра в 0 строк кода на чистом JS. Пример своего языка программирования за 450 строк не плохое дополнение к этой подборке в этой подборке.Particles.js
Простая библиотека для создания «живых частиц». Имеет целый ряд различных опций и позволит вам сотворить приятное украшение для вашего фона.
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
Западные мысли или что стоило бы перевести на Хабре:
Говорят и показывают отечественные ИТ ресурсы:
Напоследок:
Screeps — первая стратегической MMO-игра для программистов.[embedded content]
Twemoji — коллекция Unicode Emoji смайликов от Twitter.
SQL.js — SQLite теперь доступен в JavaScript.
PGweb.js — PostgreSQL в браузере.
Loki.js — embeddable / in-memory database.
Dashboards — отзывчивые шаблоны «приборных панелей» на Bootstrap.
Github Todos — конвертирует ваш ToDo список в GitHub Issues
Higgs — JavaScript Virtual Machine.
Raven — текстовый редактор с акцентом на типографику.
jQuery Autotab — настраиваем табуляцию для форм.
Deliver — простой деплой скриншотов, даты приложений и обновлений в App Store на Ruby.
Delve — дебаггер для Go.
Deis — Your PaaS. Your Rules.
Cockroachdb — Scalable, Geo-Replicated, Transactional Datastore для Go.
Home Assistant — библиотека для программирования умного дома на Python.
Nogotofail — network security testing tool.
Skype теперь доступен в браузере
Предыдущая подборка (Выпуск 32)
Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.
Спасибо всем за внимание.
