Кілька цікавинок і корисностей для веб-розробника #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 to dragged
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" або "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" або "window"
mode: 'grab',
line_linked: {
opacity: .5
},
events: {
onclick: {
enable: true,
mode: 'push', // "push" або "remove" (particles)
nb: 4
}
}
},
/* Retina Display Support */
retina_detect: true
});


Firefox Developer Edition



Західні думки або що варто було б перевести на Хабре:



Говорять і показують вітчизняні ІТ ресурси:



Наостанок:

  • 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.
  • Assistant Home — бібліотека для програмування розумного будинку на Python.
  • Nogotofail — network security testing tool.
  • Skype тепер доступний в браузері


                                                         Попередня добірка (Випуск 32)

Приношу вибачення за можливі помилки. Якщо ви помітили проблему — напишіть, будь ласка, в приват.

Спасибі всім за увагу.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.