Несколько интересностей и полезностей для веб-разработчика (выпуск 8)

в 2:52, , рубрики: css, html, javascript, Веб-разработка

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

Riot.js — The 1kb client-side MVP framework

Несколько интересностей и полезностей для веб разработчика (выпуск 8)
Немного статистической правды:

Самый маленький среди похожих популярных фреймворков
Несколько интересностей и полезностей для веб разработчика (выпуск 8)

Самый емкий код (в примере для Todo MVC приложения)

Несколько интересностей и полезностей для веб разработчика (выпуск 8)

Самый быстрый из существующих

Несколько интересностей и полезностей для веб разработчика (выпуск 8)

«Материнский» проект Moot тоже очень крутой и демонстрирует то, каким должен быть форум.

LNK — Responsive Email Framework

Несколько интересностей и полезностей для веб разработчика (выпуск 8)
Сразу хочется сказать о том, что это продукт от ZURB — от создателей Fundation. LNK больше напоминает Skeleton и в нем есть свой Boilerplate, а также несколько готовых лэйаутов и небольшой инструмент Inliner, который отправит вам вашу верстку на почту. На хабре есть ряд статей про верстку почтовых писем и я бы сравнил LNK с набором полезных техник/сниппетов из этих статей. В целом фреймворк очень полезный, а особенно для новичков.

Поддерживает следующие E-mail клиенты:

  • Apple Mail (5 and 6)
  • Microsoft Outlook (2000, 2002, 2003, 2007, 2010, 2011, 2013)
  • Mozilla Thunderbird (3, latest)
  • Android Native (2.3, 4)
  • iOS Native (6, 7)
  • AOL Mail
  • Gmail
  • Yahoo! Mail
  • Outlook.com

Sir Trevor

image
Удобный интерфейс редактора. Приятный минималистичный дизайн. Простота использования и широкий выбор настроек.

Установка:

Для работы sit-trevor.js потребуется jQuery, Underscore и Eventable.

 <form>
  <textarea class="js-st-instance"></textarea>
</form>

<script>
  new SirTrevor.Editor({ el: $('.js-st-instance') });
</script>

Результат:

{
  "data": [{
    "type": "text",
    "data": {
      "text": "Hello, my name is **Sir Trevor**"
    }
  }]
}

Snazzymaps — коллекция JS стилей для Google карт

Несколько интересностей и полезностей для веб разработчика (выпуск 8)

Bear CSS

Несколько интересностей и полезностей для веб разработчика (выпуск 8)
До жути простой, а весьма полезный инструмент. Bear CSS забирает все названия классов и идентификаторов с вашего HTML и генерирует CSS. На самом деле намного удобнее, даже правильнее, описывать стили по принципам OCSS и SMACSS, когда видишь перед собой структуру документа. Да, с препроцессорами тоже можно формировать некое дерево, но все равно придется мысленно отвлекаться на описание стилей. Плюс — не тратится время на великое множество копипастов. Советую попробовать. А был бы еще какой-нибудь плагин к Sublime...

BLOKK Font — удобное решение для быстрых мокапов.

Несколько интересностей и полезностей для веб разработчика (выпуск 8)

Напоследок:

2 очень удобных приложения для Mac

PixelPumper

Несколько интересностей и полезностей для веб разработчика (выпуск 8)
Великолепное приложение для постинга в WordPress. Замечательный интерфейс, удобство работы с Retina изображениями, настройка расписания публикаций статей и самое главное бесплатно в App Store.

Hummer

Несколько интересностей и полезностей для веб разработчика (выпуск 8)
Компилирует SASS (с Bourbon), CoffeeScript, HAML & Markdown не купил только из за отсутствия LESS. При публикации создает HTTP сервер, что позволяет тестировать проект на разных устройствах и обновлять страницу без перезагрузки. Но самое главное это набор специальных «хамеровских» тегов:

  • @stylesheet и @javascript, которые объединяют существующие стили и скрипты
  • @path — «умный путь» к подключаемым файлам, который работает одинаково в разных директориях
  • @include подобный в PHP
  • @placeholder для изображений и переменные с HTML внутри
  • @todo — комментарии в HTML, которые преобразуются в TODO лист

Бонусом будет ряд <a href="">бесплатных шаблонов. Забавным фактом является, то что продукт от студии Riot (заметить это можно только глядя на логотип), проектом которой также является riot.js, который я упомянул выше.

Алиса в стране чудес

Относительно недавно я писал про «Будущую революцию дизайна контента» и вот первые предпосылки к тому, как это будет выглядеть: GitHub (демо работает в последних сборках WebKit Nightly и Chrome Canarychrome://flags активируйте пункт Enable experimental WebKit features).

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

Автор: ilusha_sergeevich

Источник

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


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