Доброго времени суток, уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
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
Западные мысли или что стоило бы перевести на Хабре:
- Happy 10th, Firefox
- Overwhelmed by Code
- Hacker's guide to Neural Networks
- Cleaning Up The Mess: How To Keep Your Coding Workflow Organized
- Responsive Images in Practice
- The $PATH to Enlightenment
- Distributed On-the-Fly Image Processing and Open Source 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
Говорят и показывают отечественные ИТ ресурсы:
- «Лицензия для вашего open-source проекта» от marked-one
- «Руководство по SVG-анимациям (SMIL)» от CSS Live, оригинал на CSS Tricks
- «Meteor. Разрабатываем TODO List» от movl
- «Звоним на мобильные телефоны из браузера с записью разговоров» от sterx
- «WebGl: графические эффекты и фильтрация изображений под стероидами» от HTML5.by.
- «9 основных принципов отзывчивого веб-дизайна» от andrew-r
- «Подборка интересных CSS рецептов «Голые пятницы #3»» от Paul_King
- «Изоморфные JavaScript-приложения с Catberry.js» от pragmadash
- «JMeter как относительно удобное и практичное средство для тестирования API» от htc-cs
- «Работа веб-проекта в условиях нестабильного подключения» от Zav
- «GamepadAPI или джойстик в браузере» от Louter
- «Приглашаем на конференцию по web-разработке 29 ноября» от TeamMRG
Напоследок:
- Screeps — первая стратегической MMO-игра для программистов.
- 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)
Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.
Спасибо всем за внимание.
Автор: ilusha_sergeevich
