- PVSM.RU - https://www.pvsm.ru -

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

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

roBrowser [1]

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


Идеальный слайдер [2]

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

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 [4]

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

Accessible HTML5 Video Player [5]

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

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

  • Использовать последние технологии HTML5 в отношении встраивания видео, элементов управления и субтитров;
  • Минимизировать вес кода (5 kB CSS и 18 kB JS);
  • Обеспечить полное клавиатурное управление и доступность для программ невизуального экранного доступа;
  • Обеспечить поддержку субтитров (используется WebVTT).

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

iOS 8 Illustrator Vector UI Kit Update [8]

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

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

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

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

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

Напоследок:

  • Вышла книга «Сюрреализм на JavaScript» [64], в которой собранны различные советы о том, как создавать игры и другие сложные приложения на JavaScript.
    image [64]
    Скачать в .PDF [65]
  • Замечательные новости по iOS 8:
    Несколько интересностей и полезностей для веб разработчика #28
  • Colors [66] — улучшаем цвета заданные по умолчанию в браузерах.
  • Сross Storage [67] — кроссдоменное локальное хранилище с правами доступа.
  • Pioneer [68] — делает код понятными при интеграционном тестировании не только для разработчиков, но и для менеджеров.
  • Animsition [69] — простой jQuery плагин для CSS анимаций.
  • Rollerblade.js [70] — 360° «вращатель для изображений.
  • Paths.js [71] — генерирует SVG path для геометрических форм.
  • Lineman.js [72] — библиотека для работы с большими клиентскими приложениями.
  • Сomcastify.js [73] — искусственное замедление загрузки изображений.
  • Postscribe [74] — асинхронный JavaScript, даже для document.write.
  • Bleve [75] — продвинутое индексирование текста для Go.
  • Mailinabox [76] — превосходный mail сервер на Python.
  • Dejavu [77] — audio fingerprinting and recognition in Python.
  • Weave [78] — The Docker Network.
  • Volt [79] — Ruby web framework.
  • Toshi [80] — библиотека для работы с Bitcoin на Ruby.
  • Pup [81] — парсим HTML в терминале.
  • Drupal X-Ray [82] — небольшой сервис, который определяет установленные Drupal модули.
  • Минималистичный плагин менеджер для Vim
    image

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

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

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

Автор: ilusha_sergeevich

Источник [84]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/70025

Ссылки в тексте:

[1] roBrowser: https://github.com/vthibault/roBrowser/

[2] Идеальный слайдер: https://github.com/gilbitron/Ideal-Image-Slider

[3] Hello.js: https://github.com/MrSwitch/hello.js

[4] KaTeX: https://github.com/Khan/KaTeX

[5] Accessible HTML5 Video Player: https://github.com/paypal/accessible-html5-video-player/

[6] «Готовое решение доступного видеоплеера на HTML5»: http://habrahabr.ru/post/236641/

[7] Tseikovets: http://habrahabr.ru/users/tseikovets/

[8] iOS 8 Illustrator Vector UI Kit Update: http://mercury.io/blog/ios-8-illustrator-vector-ui-kit-update

[9] SVG Circus — инструмент для созданий SVG анимаций: http://svgcircus.com/

[10] If programming languages were weapons: http://bjorn.tipling.com/if-programming-languages-were-weapons

[11] Optimization killers: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments

[12] Hack the <p>: https://the-pastry-box-project.net/sorin-pintilie/2014-August-25

[13] Using SVG to shrink your PNGs: http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/?utm_content=bufferfde50&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

[14] Master Sass Syllabus: https://www.drawar.com/web/course/sass

[15] Used and Abused – CSS Inheritance and Our Misuse of the Cascade: http://www.phase2technology.com/blog/used-and-abused-css-inheritance-and-our-misuse-of-the-cascade/

[16] Symmetry, Size, Speed, and CSS Shapes: http://uxmag.com/articles/symmetry-size-speed-and-css-shapes

[17] Get Started Building Your Blog with Parse.js: http://code.tutsplus.com/tutorials/get-started-building-your-blog-with-parsejs--cms-21997

[18] Add Rules to Stylesheets with JavaScript: http://davidwalsh.name/add-rules-stylesheets

[19] Useful Tips for Building JavaScript APIs: http://www.onextrapixel.com/2014/08/28/useful-tips-for-building-javascript-apis/

[20] Black Box Driven Development in JavaScript: https://hacks.mozilla.org/2014/08/black-box-driven-development-in-javascript/

[21] Git & GitHub for Front-End Developers: http://blog.4digits.net/git-for-front-end-developers/

[22] 10 Ways to Earn Money from Your Site: http://www.sitepoint.com/10-ways-earn-money-from-your-site/?utm_content=buffera0f03&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

[23] How to Improve Page Performance with a Font Loader: http://www.sitepoint.com/improve-page-performance-font-loader/?utm_content=buffer618e0&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

[24] Selecting typefaces for body text: http://practice.typekit.com/lesson/selecting-typefaces-for-body-text/

[25] Internal Developer Training: Doing It Right: http://www.smashingmagazine.com/2014/09/05/internal-developer-training-doing-it-right/

[26] The Current State Of E-Commerce Search: http://www.smashingmagazine.com/2014/08/18/the-current-state-of-e-commerce-search/

[27] Re-designing busuu: https://medium.com/@whebdesign/re-designing-busuu-f130a1de6473

[28] Persona’s Machine-Learning App Lets People Follow Different Sides Of Your Twitter Identity: http://techcrunch.com/2014/09/07/prismatic-identity/

[29] Work Life Imbalance: http://alistapart.com/column/work-life-imbalance

[30] For the Copy and Paste Programmers: http://tommcfarlin.com/copy-and-paste-programmers/

[31] Improving Smashing Magazine’s Performance: A Case Study: http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/

[32] «Команда разработчиков графического языка Processing представила официальную JavaScript-библиотеку p5.js»: http://habrahabr.ru/company/nordavind/blog/236621/

[33] «Эффект неисправного монитора для текста, картинок и SVG»: http://habrahabr.ru/post/236263/

[34] ilya42: http://habrahabr.ru/users/ilya42/

[35] «Github, Reddit и StackExchange предложили стандартный синтаксис Markdown»: http://habrahabr.ru/post/235611/

[36] «Часы на кривых Безье»: http://habrahabr.ru/post/236455/

[37] alizar: http://habrahabr.ru/users/alizar/

[38] «Вы разрушили HTML»: http://habrahabr.ru/post/236045/

[39] bbmm: http://habrahabr.ru/users/bbmm/

[40] «30 полезных сервисов для веб-разработчиков и дизайнеров v2»: http://habrahabr.ru/post/236219/

[41] Scorpion97: http://habrahabr.ru/users/scorpion97/

[42] «Выбираем генератор статических сайтов»: http://habrahabr.ru/company/selectel/blog/236441/

[43] AndreiYemelianov: http://habrahabr.ru/users/andreiyemelianov/

[44] «WinJS + универсальные приложения. Изучаем FlipView»: http://habrahabr.ru/company/microsoft/blog/237333/

[45] a_bogdanova: http://habrahabr.ru/users/a_bogdanova/

[46] «Веб-компоненты в реализации Polymer от Google»: http://habrahabr.ru/post/237421/

[47] pofigizm: http://habrahabr.ru/users/pofigizm/

[48] «Centrifuge — я больше не буду обновлять страницу перед отправкой комментария»: http://habrahabr.ru/company/mailru/blog/237257/

[49] FZambia: http://habrahabr.ru/users/fzambia/

[50] «Анализ рендеринга через Skia Debugger: как можно найти самые дорогие для отрисовки элементы»: http://habrahabr.ru/company/mailru/blog/236021/

[51] burlakilia: http://habrahabr.ru/users/burlakilia/

[52] «CSS-препроцессоры против постпроцессоров»: http://habrahabr.ru/post/235929/

[53] Grawl: http://habrahabr.ru/users/grawl/

[54] «Я нашёл ошибку в браузере!»: http://habrahabr.ru/company/opera/blog/236239/

[55] pepelsbey: http://habrahabr.ru/users/pepelsbey/

[56] «Новости DerbyJS 09.2014»: http://habrahabr.ru/post/236529/

[57] vmakhaev: http://habrahabr.ru/users/vmakhaev/

[58] «Подборка занимательных CSS рецептов «Голые пятницы #2»»: http://habrahabr.ru/company/wargaming/blog/235889/

[59] Paul_King: http://habrahabr.ru/users/paul_king/

[60] "«Нет времени объяснять!» или Как реализовать трансляцию с IP камеры на сайт?": http://habrahabr.ru/post/236359/

[61] dnbdrive: http://habrahabr.ru/users/dnbdrive/

[62] «Странный глюк Git, чуть не стоивший 10 часов работы»: http://habrahabr.ru/post/236351/

[63] fetis26: http://habrahabr.ru/users/fetis26/

[64] «Сюрреализм на JavaScript»: http://bakhirev.biz/book/index.html

[65] Скачать в .PDF: http://bakhirev.biz/book/files/Surrealism_on_JavaScript.pdf.max.zip

[66] Colors: https://github.com/mrmrs/colors

[67] Сross Storage: https://github.com/zendesk/cross-storage

[68] Pioneer: https://github.com/mojotech/pioneer

[69] Animsition: http://git.blivesta.com/animsition/

[70] Rollerblade.js: http://www.iamapioneer.com/plugins/rollerblade/

[71] Paths.js: https://github.com/andreaferretti/paths-js

[72] Lineman.js: https://github.com/linemanjs/lineman/

[73] Сomcastify.js: https://github.com/theonion/comcastifyjs/

[74] Postscribe: https://github.com/krux/postscribe

[75] Bleve: https://github.com/blevesearch/bleve

[76] Mailinabox: https://github.com/mail-in-a-box/mailinabox

[77] Dejavu: https://github.com/worldveil/dejavu

[78] Weave: https://github.com/zettio/weave

[79] Volt: https://github.com/voltrb/volt

[80] Toshi: https://github.com/coinbase/toshi

[81] Pup: https://github.com/EricChiang/pup

[82] Drupal X-Ray: http://www.drupalxray.com/

[83] Предыдущая подборка (Выпуск 27): http://habrahabr.ru/post/235545/

[84] Источник: http://habrahabr.ru/post/236683/