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

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

Stackedit ^[1]

^[1]
Шедевр среди Open Source редакторов! Основан на библиотеке разметки (Markdown) PageDown, которая используется в StackOverflow и других проектах StackExchange. Stackedit синхронизируется с Dropbox и Google Drive, а также сохраняет все документы в local storage, благодаря чему редактирование возможно и в онлайне и в оффлайне. Возможность импорта/экспорта/конвертация Markdown и HTML. Публикация в WordPress, Tubmlr, Blogger, Github, Gist и на любой SHH сервер. Статистика, работа в режиме realtime, поддержка различных синтаксисов (Prettify/Highlight.js), LaTeX, темы… Это просто великолепный продукт ^[2].

App.io ^[3] позволяет запускать iOS приложения в браузере. Это уже тема мобильной разработки, но недавно я читал статью про Sprinty Driver ^[4] и обратил внимание на то, что BeetlePlay разрабатывают демо-версии на Flash. Решил поделиться. Также советую фреймворк ^[5] для создания анимаций в UIKit от IFTTT.

В одном из своих дайджестов я дал ссылку на Webflow ^[6]. Сейчас хочу поделить еще одним не менее популярным GUI для создания отзывчивой верстки — IM Creator ^[7]. Главным отличием является более широкий выбор тем. Чем-то напоминает WiX.
 
 
 
Автопрефиксер — утилита, которая позволит вам забыть про префиксы. Она берёт последние данные о префиксах и популярности браузеров с Can I Use. Доступно для Ruby, Compass, Rework, Node.js, Javascript, PHP, Sublime и даже Prepros ^[8].
 
 
 

Keypress ^[9]

^[9]
Лучшее решение на JavaScript для захвата событий с клавиатуры:

keypress.combo("shift s", function() {
    console.log("You pressed shift and s");
});

// There are also a few other shortcut methods:

// If we want to register a counting combo
keypress.counting_combo("tab space", function(e, count) {
    console.log("You've pressed this " + count + " times.");
});

keypress.register_combo({
    "keys"              : null,
    "on_keydown"        : null,
    "on_keyup"          : null,
    "on_release"        : null,
    "this"              : window,
    "prevent_default"   : false,
    "prevent_repeat"    : false,
    "is_ordered"        : false,
    "is_counting"       : false,
    "is_sequence"       : false,
    "is_exclusive"      : false
    "is_solitary"       : false
});

Dropzone ^[10]

^[10]
Прекрасный скрипт для создания drag&drop области загрузки файлов. Поддерживается в Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 6+. Работает все предельно просто:

Подключаем Dropzone.js (есть AMD модуль для RequireJS):

<script src="./path/to/dropzone.js"></script>

Cоздаем форму:

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

Также имеется возможность создавать dropzone програмно:

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});


// jQuery plugin
$("div#myId").dropzone({ url: "/file/post" });

Напоследок:

За $10 вы сможете работать с Git в вашем Sublime ^[11]

• Яндекс опубликовал материалы ^[12] с прошедшего YaC 2013 (front-end в 4 зале, рекомендую)
• Odometr ^[13] — скрипт для создания красивых счетчиков
• Prerender ^[14] — Open Source решение для полноценной поисковой индексации ваших JavaScript приложений
• Source ^[15] от Одноклассников — Front-end documentation engine
• MCSS ^[16] от Одноклассников — многослойная система организации CSS основанная на OCSS и БЭМ
• Изобретательность от CSS Tricks — Conical Gradients in CSS ^[17]
• В CERN решили продемонстрировать первобытный вид серфинга в интернете и создали Line Mode Browser ^[18]
• Очень необычный сайт Fontwalk ^[19], «запаралаксен полностью»

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

Автор: ilusha_sergeevich

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