Кілька цікавинок і корисностей для веб-розробника #37

Доброго часу доби, шановні хабравчане. За останній час я побачив кілька цікавих і корисних інструментів/бібліотек/подій, якими хочу поділитися з Хабром.

Buzz.js


Останнім часом в інтернеті все частіше і частіше зустрічаються проекти, де різні інтерфейсні елементи супроводжуються певними звуками. Я б навіть сказав, що UX/UI в вебі переходить на новий щабель еволюції. А Buzz.js одним з перших готовий допомогти вам в озвучці вашого інтерфейсу. Це бібліотека для роботи з HTML5 Audio API з низкою відповідних обробників подій.

var mySound = new buzz.sound( "/sounds/myfile", {
formats: [ "ogg", "mp3", "aac" ]
});

mySound.play()
.fadeIn()
.loop()
.bind( "timeupdate", function() {
var timer = buzz.toTimer( this.getTime() );
document.getElementById( "timer" ).innerHTML = timer;
});



Snabbt.js


Snabbt.js — крихітна (всього в 4кб gzip) і дуже швидка (60FPS) бібліотека бібліотека для обробки CSS анімацій. Дозволяє взаємодіяти з властивостями translate, rotate, scale, skew і resize. Працює у всіх сучасних браузерах.
snabbt(element, {
position: [100, 0, 0],
easing: 'ease'
}).then({
fromRotation: [0, 0, -2*Math.PI],
easing: 'spring',
springConstant: 0.2,
springDeaccelaration: 0.95,
});


Cachet


Система статусних повідомлень, перший з подібних відкритих і безкоштовних проектів. Бувають випадки коли ваш сайт не працює через сторонніх сервісів. Щоб не відлякати відвідувача, потрібно правильно поінформувати його, а саме в режимі реального часу показати йому повідомлення про помилки. Cahet стежить за використовуваними вами сервісами (компонентами) і виводить статусні повідомлення, у випадку яких-небудь несправностей. Написаний на PHP з Laravel, має RESTful API, модульний і простий у кастомізації.

PageKit CMS



Blessed Contrib

image
Мозговзрывающая JavaScript бібліотека для дашбордов в терміналі з використанням ascii/ansi символів. В основі лежати Blessed і Drawille.

var blessed = require('blessed')
, contrib = require('blessed-contrib')
, screen = blessed.screen()
, line = contrib.line(
{ style: 
{ line: "yellow"
, text: "green"
, baseline: "black"}
, xLabelPadding: 3
, xPadding: 5
, label: 'Title'})
, data = {
x: ['t1', 't2', 't3', 't4'],
y: [5, 1, 7, 5]
}
screen.append(line) //must append before setting data
line.setData(data.x, data.y)

screen.key(['escape', 'q', 'C-c'], function(ch, key) {
return process.exit(0);
});

screen.render()


Також хочу ще залишити ссилочку на cli-dashboard для візуалізації логів graylog.

Minimap.js


jQuery плагін, який дозволяє відображати міні карту поточної сторінки поруч зі скроллбаром. Ймовірно, це рішення знайоме багатьом завдяки Sublime Text. Поки не можу уявити явного прикладу, де необхідне застосування цього плагіна, але реалізація явно заслуговує місця в цій добірці за свою неординарність.

Slate

Гарний статичний документатор вашого коду, з підтримкою більше 60 мов програмування і чуйними шаблонами на виході.
image

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



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



Наостанок:

  • HTML/CSS
    • Hover.css — дивовижна колекція анімацій.
    • Sass Guidelines
    • Vanilla Bootstrap — Bootstrap фреймворк для Vanilla форумів.
    • HTML Now — генератор базового HTML шаблону.
  • JavaScript
    • Autopolyfiller — використовуйте останні можливості ECMAScript і не турбуйтеся про сумісність.
    • Riot.js 2.0 — друга версія реактив-подібного MV* фремворка вагою 2.5 кб, який вже згадувався в моїх добірках.
    • Gitlet — Git реалізація в JavaScript.
    • Videogular — відео плеєр для Angular.js.
    • Insignia — jQuery плагін для кастомізація инпута з відмітками/позначками.
    • Lovefield — кросбраузерність SQL-подібний двигун від Google, заснований на IndexedDB.
    • GifW00t — pure javascript web recorder .
    • Vegas — jQuery плагін для створення фонових слайдерів.
    • PSI — CL утиліта для PageSpeed Insights від Google.
  • PHP
    • Openbay — вихідні самого The Pirate Bay.
    • clearPHP — керівництво з написання коду.
    • iDict — iCloud Apple iD BruteForcer.
  • Python
    • Hamms — malformed servers to test your HTTP client.
    • Dataquest.io — вивчення data science в браузері.
    • Notejam — The easy way to learn web frameworks.
  • Ruby
    • Pundit — авторизація без магії, на базі plain ruby об'єктів («вбивця» cancan/cancancan).
    • Ginatra — швидкий і простий у розгортанні веб-переглядач git репозиторіїв.
    • Formatador — кольори, таблиці і прогрес-бари для форматування тексту у терміналі.
    • Spyke — робота з REST сервісами в стилі ActiveRecord.
  • Go
    • SSH Tron — сервер для гри Tron по SSH.
    • Fanout — зручна бібліотека для простого розпаралелювання завдань.
    • vim-go — багатофункціональний і активно розвивається vim плагін для роботи з Go.
  • Різне
    • Joe — швидке і просте створення .gitignore з консолі.
      image
    • country-list — перелік всіх країн у відповідності зі стандартом SO 3166-1 для всіх мов і форматів даних.
    • Chartspree.io — дуже зручний сервіс генерації графіків як src для картинки
    • Elevatorsaga — затягує гра про програмування ліфтів.
    • Всім стартапам стартап — фото з великими цифрами від PornHub.


За допомогу в підготовці матеріалу висловлюю величезну подяку Олександру Маслову drakmail.

Друзі бэкендеры! Я думаю всім відомо, що свої збірки я роблю повністю на альтруїзмі. Я завжди прошаривал купу сайтів, щоб мені завжди було зручно працювати. А в один момент я вирішив ділитися знайденим матеріалом. З часом збірки здобули певну популярність і значно розширилися в плані змісту. Відтепер я буду чітко структурувати блок «Наостанок», щоб людям не доводилося шукати потрібне. Для того щоб розділи не були голими і завжди наповнювалися актуальною інформацією, мені потрібна ваша допомога. І проблема не тільки в часі, але і в компетенції. У плані бекенду я швидше теоретик, ніж практик.

Пхпшник, рубист, питонист, гоущик, якщо ти вже моніториш GitHub Trending, Reddit, HackerNews або Twitter в пошуках цікавостей і корисностей по своїй темі, якщо знайдене безумовно має цінність, але не заслуговує на увагу цілого посту, якщо тобі не важко раз на тиждень/два тижні в залежності від матеріалу ділитися парою кілобайт посилальної маси, то напиши мені в лічку або будь-яку соц. мережа з профілю. Писанина в основний розділ за бажанням. Ім'я або контакти волонтерів у кожному посту обов'язково будуть вказані.

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

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

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

Сподобалася Вам добірка?

/>
/>


<input type=«radio» id=«vv64813»
class=«radio js-field-data»
name=«variant[]»
value=«64813» />
Так
<input type=«radio» id=«vv64815»
class=«radio js-field-data»
name=«variant[]»
value=«64815» />
Немає

Проголосувало 3 людини. Утрималися немає.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


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

0 коментарів

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