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

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

    Stackedit



    Шедевр среди 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, темы… Это просто великолепный продукт.


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


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

    Keypress



    Лучшее решение на 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



    Прекрасный скрипт для создания 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

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


                                 Следующая подборка (Выпуск 6)      Предыдущая подборка (Выпуск 4)

    Only registered users can participate in poll. Log in, please.

    Понравилась ли Вам подборка?

    • 83.1%Да791
    • 16.9%Нет161
    Support the author
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 22

      +7
      Stackedit великолепен!
        0
        Ага. Сохраняю в избранное и буду использовать в своих проектах!
          +1
          А задержка при прокрутке так и задумана?
            0
            Думаю, да. Но лично мне это не мешает. Даже наоборот: очень нравится.
              0
              Кстати, есть такой движок — Showdown (от автора highlight.js), отображающий превью в реальном времени без задержек. Только прокрутка исходника не привязана к превью, но, кажется, это несложно реализовать.
                0
                Showdown написал не Сигалаев.
                  0
                  Прошу прощения. Думал, все, что на softwaremaniacs.org — его рук дело. Ну, за исключением контрибуторов, конечно. Вы обратили мое внимание, теперь заметил копирайт.
                    0
                    Есть вот такой вот проект, делающий тоже что вы описали и использующий как раз highlight.js, но другую либу для парсинга markdown.
            • UFO just landed and posted this here
            +3
            А включить ссылочку Автопрефиксер в статью?
            +2
            Основан на библиотеке разметки (Markdown) PageDown, которая используется в StackOverflow и других проектах StackExchange.


            Интересно, мне одному не нравится эта разметка. Каждый раз, когда задаю вопрос на SO, иду в справку и чатаю, как что-то сделать. Как мне кажется, html или bb-codes интереснее будут.
            • UFO just landed and posted this here
                +1
                «Синдром утёнка» это давать ссылки на лурку.

                А вообще, в чём суть ответа. Можете пояснить?
                  0
                  Там прям жирным выделено во втором абзаце:
                  Суть: утята считают лучшим первое, что увидели.
                  Вам стоило всего лишь открыть ссылку.
                    0
                    Рукою припираю я лицо.

                    Как импринтинг связан c Markdown? Textile, Wiki, BBcode — вариантов разметок полно. Первой встречают Markdown лишь единицы.

                    Повторю: в чём суть ответа?
                    • UFO just landed and posted this here
                        –5
                        *** возомнивший себя троллем в 40 лет это… это печальное зрелище.
                0
                Это разметка не для одноразового использования.
                Если будете ее использовать часто, то она вам покажется удобной — гораздо нагляднее тегов в треугольных или квадратных скобках.
                +8
                Относительно Git и Sublime Text. Их можно научить совместной работе и бесплатно. Имеется в Package Control под названием «Git».
                  +1
                  Спасибо за Dropzone. Очень понравилось!

                  Only users with full accounts can post comments. Log in, please.