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

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

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

roBrowser

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


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

Несколько интересностей и полезностей для веб разработчика #28
Самый простой в эксплуатации слайдер, но с правильной 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

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

Accessible HTML5 Video Player

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

Специалисты 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 анимаций

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

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

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

Напоследок:

  • Вышла книга «Сюрреализм на JavaScript», в которой собранны различные советы о том, как создавать игры и другие сложные приложения на JavaScript.
    image
    Скачать в .PDF
  • Замечательные новости по iOS 8:
    Несколько интересностей и полезностей для веб разработчика #28
  • 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
    image

                                                         Предыдущая подборка (Выпуск 27)

Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.

Спасибо всем за внимание.

Автор: ilusha_sergeevich

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js