Главная

Несколько интересностей и полезностей для веб-разработчика #28

2014-09-21 в 19:20, admin, рубрики: css, html, javascript, веб-дизайн, Веб-разработка

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

roBrowser

roBrowser — open source клон достаточно популярной MMORPG игры Ragnarok Online в браузере. Проект разрабатывается по последним стандартам W3C — WebGL, HTML5, File API, Javascript, Threads… Небольшой ролик с демонастрацией игры:

Идеальный слайдер

Самый простой в эксплуатации слайдер, но с правильной HTML5 семантикой (даже есть поддержка W3C ARIA), дружелюбием к SEO, CSS3 анимациями, адаптивной версткой и реакцией на трогательные события. А еще есть API с событиями, методами и опциями.

<html>
<head>
    <link rel="stylesheet" href="ideal-image-slider.css">
    <link rel="stylesheet" href="themes/default/default.css">
</head>
<body>
    <div id="slider">
        <img src="" alt="">
        <img data-src="img/2.jpg" src="" alt="">
        <img data-src="img/3.jpg" src="" alt="">
    </div>
    <script src="ideal-image-slider.js"></script>
    <script>
    new IdealImageSlider.Slider('#slider');
    </script>
</body>
</html>

Hello.js

Javascript RESTFUL API для аутентификации с OAuth2/OAuth1 сервисами, такими как Google+ API, Facebook Graph, Windows Live Connect. На странице проекта есть много демок, которые позволяет вам сэкономить время на знакомство с библиотекой. А репозиторий собрал уже более 2000 звезд на GitHub.

hello.on('auth.login', function(r){
// Get Profile
   hello( r.network ).api( '/me' ).then( function(p){
      var label = document.getElementById(r.network)
      label.innerHTML = "<img src='' width=24/>Connected to "+ r.network+" as " + p.name;
   });
});


hello.init({
   google : CLIENT_IDS.google,
   windows : CLIENT_IDS.windows,
   facebook : CLIENT_IDS.facebook
},{
   redirect_uri:'../redirect.html'
});

KaTeX

JavaScript библиотека для отрисовки математических формул в вебе от команды разработчиков платформы для онлайн образования Khan Academy. KaTeX на данный момент уступает по функционалу своему известному аналогу MathJax, но в десятки раз опережает его по производительности. Работает во всех последних браузерах Chrome, Safari, Firefox, Opera, и IE 8 — IE 11.

Accessible HTML5 Video Player

Специалисты PayPal, которые уже раньше отметились таким продуктом как Bootstrap Accessibility Plugin, решили на этот раз взяться за решение проблемы доступности видеоконтента и решить её исключительно в рамках HTML5 без каких-либо дополнительных зависимостей или сторонних плагинов. Перед проектом были поставлены следующие цели:

Использовать последние технологии HTML5 в отношении встраивания видео, элементов управления и субтитров;

Минимизировать вес кода (5 kB CSS и 18 kB JS);

Обеспечить полное клавиатурное управление и доступность для программ невизуального экранного доступа;

Обеспечить поддержку субтитров (используется WebVTT).

«Готовое решение доступного видеоплеера на HTML5» Tseikovets

iOS 8 Illustrator Vector UI Kit Update

Несколько интересностей и полезностей для веб разработчика #28
Прямая ссылка на архив.

SVG Circus — инструмент для созданий SVG анимаций

Западные мысли или что стоило бы перевести на Хабре:

Говорит и показывает Хабр:

Напоследок:

Вышла книга «Сюрреализм на JavaScript», в которой собранны различные советы о том, как создавать игры и другие сложные приложения на JavaScript.

Скачать в .PDF
Замечательные новости по iOS 8:
Colors — улучшаем цвета заданные по умолчанию в браузерах.
Сross Storage — кроссдоменное локальное хранилище с правами доступа.
Pioneer — делает код понятными при интеграционном тестировании не только для разработчиков, но и для менеджеров.
Animsition — простой jQuery плагин для CSS анимаций.
Rollerblade.js — 360° «вращатель для изображений.
Paths.js — генерирует SVG path для геометрических форм.
Lineman.js — библиотека для работы с большими клиентскими приложениями.
Сomcastify.js — искусственное замедление загрузки изображений.
Postscribe — асинхронный JavaScript, даже для document.write.
Bleve — продвинутое индексирование текста для Go.
Mailinabox — превосходный mail сервер на Python.
Dejavu — audio fingerprinting and recognition in Python.
Weave — The Docker Network.
Volt — Ruby web framework.
Toshi — библиотека для работы с Bitcoin на Ruby.
Pup — парсим HTML в терминале.
Drupal X-Ray — небольшой сервис, который определяет установленные Drupal модули.
Минималистичный плагин менеджер для Vim