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

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

NativeScript ^[1]

^[1]
Открытый фреймворк для создания мобильных приложений под iOS, Android и Windows Phone основанный на NodeJS. И весь цимус в том, что это не очередная кроссплатформенная оболочка над WebView (аля PhoneGap), NativeScript со слов разработчиков обеспечивает на JavaScript такие же возможности, какие обеспечивают нативные Objective-C, Java или .NET.

Также хочу упомянуть о NW.js ^[2], который до появления IO.js назывался Node-Webkit. Проект по такому же принципу позволяет писать десктопные приложения под Windows, Mac и Linux с помощью веб-технологий. Более того микроконтроллеры, умные дома, интернет вещей, Oculus Rift, Nest выпускают API на JS. Вспоминая все эти новости, хочется сказать, что JavaScript все чаще и чаще представляется как унифицированное средство для кроссплатформенной разработки.

Doppker.js ^[3]

Вероятнее всего, на текущий момент проект не обладает никакой практической ценностью, но безусловно дико интересен как пример реализации эффекта Допплера с помощью Web Audio API. Суть заключается в том, что анализируя звуковые волны можно управлять интерфейсом. На демо страничке махом руки над микрофоном вы можете выполнять скролл.

Swiper.js ^[4]

^[4]
Превосходный слайдер заточенный строго для работы с мобильными сайтами или веб приложениями. Swiper обеспечивает аппаратное ускорение анимации на уровне нативного. Проект за несколько дней собрал более 3000 звезд на GitHub.

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

var mySwiper = app.swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

Slideout.js ^[5]

^[5]
Самый легкий способ сделать выпадающее боковое меню для мобильного сайта. Slideout не зависит от сторонних библиотек, просто в кастомизации и весит всего 4кб.

<nav id="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

<main id="panel">
  <header>
    <h2>Panel</h2>
  </header>
</main>

  var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });

SVGOMG ^[6] — SVGO GUI

^[6]

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

How to Create (Animated) Text Fills ^[7]
Things I've Learned About Sending Email, for Web Designers and Developers ^[8]
Introducing node-firefox ^[9]
Embracing Promises in JavaScript ^[10]
Improving the Performance of your HTML5 App ^[11]
Designers: Start Coding With uilang ^[12]
TimelineMax: A Primer ^[13]
Terrible JavaScript Mistakes To Avoid With A Static Code Analyzer ^[14]
Making the case for Progressive Javascript ^[15]
Making a Single Page App Without a Framework ^[16]
Using ServiceWorker in Chrome today ^[17]
Style Guide Generator Roundup ^[18]
60fps on the mobile web ^[19]
Printing Medium stories ^[20]
Design Last ^[21]

Говорят и показывают отечественные ИТ ресурсы:

«Принципы написания однородного HTML» ^[22]
«Используем requestAnimationFrame» ^[23] от Forwebdev.
«Производительность CSS-анимаций: нерассказанная история» ^[24] от CSS Live.
«Все, что вам нужно знать о CSS-свойстве will-change» ^[25] от Frontender.info.
«Если вы решили перейти с PHP на Python, то к чему следует подготовиться» ^[26] от gnomeby ^[27]
«Ресайз картинок в браузере. Все очень плохо» ^[28] от homm ^[29]
«30 чудных библиотек для PHP программистов» ^[30] от mnv ^[31]
«Делаем онлайн-кинотеатр для слепых (WCAG 2.0 AAA)» ^[32] от gsuvorov ^[33]
«Общение скриптов из разных вкладок браузера» ^[34] от SLY_G ^[35]
«Пишем плагин для October CMS» ^[36] от ivaaaan ^[37]
«Визуализируй это» ^[38] от karmatsky ^[39]
«Количественные CSS селекторы» ^[40] от alspaladin ^[41]
«Магия одного div. Мастеркласс от создателя a.singlediv.com» ^[42] от Irina_Ua ^[43]
«Верстка email рассылок от А до Я для чайников» ^[44] от Varhal ^[45]
«Введение в Apache Spark» ^[46] от akrot ^[47]
«Перезапуск демона на PHP без потери соединений к нему» ^[48] от youROCK ^[49]
«Как это работает: архитектура тайлового бэкенда карт «Спутника»» ^[50] от jonik ^[51]

Напоследок:

HTML/CSS
- Flexbox in 5 minutes ^[52]
- CSSNext ^[53] — конвертирует завтрашний CSS в сегодняшний.
- ai2html ^[54] — скрипт для конвертации Adobe Illustrator файлов в HTML.
- RIN ^[55] — еще один шаблон на основе Gulp, SASS с Live Reload и прочим.
JavaScript
- Крутой тест на знание JavaScript ^[56] от читателя bakhirev ^[57].
- Cheerio ^[58] — быстрая и гибкая реализация ядра jQuery для серверной части.
- underlineJS ^[59] — более изящный способ нижнего подчеркивания текста.
- Alasql.js ^[60] — клиентская SQL-подобная БД с поддержкой localStorage, IndexedDB и Excel.
- Yaspeller ^[61] — утилита для проверки опечаток в тексте на основе Яндекс.Спеллера.
- lz-string ^[62] — LZ-based compression algorithm.
- Msngr.js ^[63] — миниатюрная библиотека для разработки месенджеров.
- Stickshift ^[64] — простой и удобный интерфейс для работы с SQL.
PHP
- PHP Must Watch ^[65] — коллекция лучших видео с лекций и конференция по PHP.
- Mondrian ^[66] — инструмент для статического анализа кода, основанный на Graph Theory.
- Regexpbuilderphp ^[67] — human-readable regular expressions для PHP 5.3+.
Python
- Flashlight ^[68] — потрясающий проект, которые преображает Spotlight на вашем Mac. ^[68]
- Mkcast ^[69] — отличный инструмент для создания Gif скринкастов.
- Vim Hackernews ^[70] — читаем HN с помощью Vim.
Ruby
- Merit ^[71] – гем для системы репутации в Rails (бейджики, очки, достижения).
- Релиз Ruby 2.2.1 ^[72]
- Реализуем Энигму ^[73] (шифровальную машину времён второй мировой) на Ruby.
- Почему блоки тормозят методы на 439% ^[74].
- Пишем CLI приложения с помощью GLI ^[75].
- Об опасностях openuri ^[76].
Go
- Goaccess ^[77] — мощный реалтаймовый анализатор логов в виде консольного приложения с поддержкой генерации HTML, JSON, CSV.
- Gore ^[78] – красивый REPL для Go.
- Gosms ^[79] — ваш собственный локальный SMS шлюз.
- Termui ^[80] — библиотека для создания CL дашбордов.
- OS ^[81] — самый простой способ использования Docker в продакшене.
Разное
- oh-my-git ^[82] — улучшаем зрительное восприятие CL при работе с Git. ^[82]
- Релиз Passenger 5.0.1 ^[83] – теперь можно использовать в продакшене.
- GTA2-WebGL ^[84] — проект, цель которого портировать GTA2 в веб.

За помощь в подготовке материала выражаю огромную благодарность Александру Маслову drakmail ^[85].

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

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

Предыдущая подборка (Выпуск 39) ^[86]

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

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

Автор: ilusha_sergeevich

Источник ^[87]

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

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

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

[1] NativeScript: https://github.com/NativeScript/NativeScript

[2] NW.js: https://github.com/nwjs/nw.js

[3] Doppker.js: https://github.com/DanielRapp/doppler

[4] Swiper.js: https://github.com/nolimits4web/swiper/

[5] Slideout.js: https://github.com/Mango/slideout

[6] SVGOMG: https://github.com/jakearchibald/svgomg

[7] How to Create (Animated) Text Fills: http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/

[8] Things I've Learned About Sending Email, for Web Designers and Developers: http://www.leemunroe.com/sending-email-designers-developers/

[9] Introducing node-firefox: https://hacks.mozilla.org/2015/02/introducing-node-firefox/

[10] Embracing Promises in JavaScript: http://javascriptplayground.com/blog/2015/02/promises/

[11] Improving the Performance of your HTML5 App: http://www.html5rocks.com/en/tutorials/speed/html5/

[12] Designers: Start Coding With uilang: http://www.smashingmagazine.com/2015/02/11/designers-start-coding-with-uilang/

[13] TimelineMax: A Primer: http://webdesign.tutsplus.com/tutorials/timelinemax-a-primer--cms-23064

[14] Terrible JavaScript Mistakes To Avoid With A Static Code Analyzer: http://www.smashingmagazine.com/2015/02/18/avoid-javascript-mistakes-with-static-code-analyzer/

[15] Making the case for Progressive Javascript: https://medium.com/the-thinkmill/making-the-case-for-progressive-javascript-a98dfa82b9d7

[16] Making a Single Page App Without a Framework: http://tutorialzine.com/2015/02/single-page-app-without-a-framework/

[17] Using ServiceWorker in Chrome today: http://jakearchibald.com/2014/using-serviceworker-today/

[18] Style Guide Generator Roundup: http://alistapart.com/blog/post/style-guide-generator-roundup/

[19] 60fps on the mobile web: http://engineering.flipboard.com/2015/02/mobile-web/

[20] Printing Medium stories: https://medium.com/designing-medium/printing-medium-stories-89f381b903c9

[21] Design Last: http://www.smashingmagazine.com/2015/02/20/design-last/

[22] «Принципы написания однородного HTML»: http://forwebdev.ru/html/principles-for-writing-idiomatic-html/

[23] «Используем requestAnimationFrame»: http://forwebdev.ru/javascript/using-requestanimationframe/

[24] «Производительность CSS-анимаций: нерассказанная история»: http://css-live.ru/articles/proizvoditelnost-css-animacij-nerasskazannaya-istoriya-s-kommentariyami-pola-ajrisha.html

[25] «Все, что вам нужно знать о CSS-свойстве will-change»: http://frontender.info/css-will-change-property/

[26] «Если вы решили перейти с PHP на Python, то к чему следует подготовиться»: http://habrahabr.ru/company/wargaming/blog/221035/

[27] gnomeby: http://habrahabr.ru/users/gnomeby/

[28] «Ресайз картинок в браузере. Все очень плохо»: http://habrahabr.ru/post/252175/

[29] homm: http://habrahabr.ru/users/homm/

[30] «30 чудных библиотек для PHP программистов»: http://habrahabr.ru/post/252851/

[31] mnv: http://habrahabr.ru/users/mnv/

[32] «Делаем онлайн-кинотеатр для слепых (WCAG 2.0 AAA)»: http://habrahabr.ru/post/250539/

[33] gsuvorov: http://habrahabr.ru/users/gsuvorov/

[34] «Общение скриптов из разных вкладок браузера»: http://habrahabr.ru/post/250891/

[35] SLY_G: http://habrahabr.ru/users/sly_g/

[36] «Пишем плагин для October CMS»: http://habrahabr.ru/post/250415/

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

[38] «Визуализируй это»: http://habrahabr.ru/post/251755/

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

[40] «Количественные CSS селекторы»: http://habrahabr.ru/post/252181/

[41] alspaladin: http://habrahabr.ru/users/alspaladin/

[42] «Магия одного div. Мастеркласс от создателя a.singlediv.com»: http://habrahabr.ru/company/paysto/blog/251933/

[43] Irina_Ua: http://habrahabr.ru/users/irina_ua/

[44] «Верстка email рассылок от А до Я для чайников»: http://habrahabr.ru/post/252279/

[45] Varhal: http://habrahabr.ru/users/varhal/

[46] «Введение в Apache Spark»: http://habrahabr.ru/post/250811/

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

[48] «Перезапуск демона на PHP без потери соединений к нему»: http://habrahabr.ru/company/badoo/blog/252809/

[49] youROCK: http://habrahabr.ru/users/yourock/

[50] «Как это работает: архитектура тайлового бэкенда карт «Спутника»»: http://habrahabr.ru/company/rostelecom/blog/252921/

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

[52] Flexbox in 5 minutes: http://flexboxin5.com/

[53] CSSNext: https://github.com/cssnext/cssnext

[54] ai2html: https://github.com/newsdev/ai2html

[55] RIN: http://sanographix.github.io/rin/

[56] Крутой тест на знание JavaScript: http://bakhirev.biz/demo/fdconf/

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

[58] Cheerio: https://github.com/cheeriojs/cheerio

[59] underlineJS: https://github.com/wentin/underlineJS

[60] Alasql.js: https://github.com/agershun/alasql

[61] Yaspeller: https://github.com/hcodes/yaspeller

[62] lz-string: https://github.com/pieroxy/lz-string

[63] Msngr.js: https://github.com/KrisSiegel/msngr.js

[64] Stickshift: https://github.com/mapbox/stickshift

[65] PHP Must Watch: https://github.com/phptodayorg/php-must-watch

[66] Mondrian: https://github.com/Trismegiste/Mondrian

[67] Regexpbuilderphp: https://github.com/gherkins/regexpbuilderphp

[68] Flashlight: https://github.com/nate-parrott/Flashlight

[69] Mkcast: https://github.com/KeyboardFire/mkcast

[70] Vim Hackernews: https://github.com/ryanss/vim-hackernews

[71] Merit: https://github.com/tute/merit

[72] Релиз Ruby 2.2.1: https://www.ruby-lang.org/en/news/2015/03/03/ruby-2-2-1-released/

[73] Реализуем Энигму: http://red-badger.com/blog/2015/02/23/understanding-the-enigma-machine-with-30-lines-of-ruby-star-of-the-2014-film-the-imitation-game/

[74] Почему блоки тормозят методы на 439%: https://www.omniref.com/ruby/2.2.0/symbols/Proc/yield#annotation=4087638&line=711&hn=1

[75] Пишем CLI приложения с помощью GLI: http://blog.lunarlogic.io/2015/how-to-write-command-line-applications-in-ruby-with-gli/

[76] Об опасностях openuri: http://sakurity.com/blog/2015/02/28/openuri.html

[77] Goaccess: https://github.com/allinurl/goaccess

[78] Gore: https://github.com/motemen/gore

[79] Gosms: https://github.com/haxpax/gosms

[80] Termui: https://github.com/gizak/termui

[81] OS: https://github.com/rancherio/os

[82] oh-my-git: https://github.com/arialdomartini/oh-my-git

[83] Релиз Passenger 5.0.1: https://blog.phusion.nl/2015/03/04/phusion-passenger-5-0-1-released/

[84] GTA2-WebGL: https://github.com/Kajakklubben/gta2-webgl

[85] drakmail: http://habrahabr.ru/users/drakmail/

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

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

Нажмите здесь для печати.

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

NativeScript [1]

Doppker.js [3]

Swiper.js [4]

Slideout.js [5]

SVGOMG [6] — SVGO GUI