A few interesting and useful things for a web developer (release 5)

Published on October 12, 2013

A few interesting and useful things for a web developer (release 5)

    Good day, dear Khabravchians. Recently, I saw several interesting and useful tools / libraries / events that I want to share with Habr.


    A masterpiece among Open Source editors! It is based on the Markdown library of PageDown, which is used by StackOverflow and other StackExchange projects. Stackedit synchronizes with Dropbox and Google Drive, and also saves all documents in local storage, so editing is possible both online and offline. Ability to import / export / convert Markdown and HTML. Publish to WordPress, Tubmlr, Blogger, Github, Gist and to any SHH server. Statistics, realtime work, support for various syntaxes (Prettify / Highlight.js), LaTeX, themes ... This is just a great product .

    App.io allows you to run iOS applications in a browser. This is a topic of mobile development, but recently I read an article about Sprinty Driverand drew attention to the fact that BeetlePlay are developing demos on Flash. I decided to share it. I also recommend the framework for creating animations in UIKit from IFTTT.

    In one of my digests, I gave a link to Webflow . Now I want to share another no less popular GUI for creating a responsive layout - IM Creator . The main difference is a wider selection of topics. Something reminiscent of WiX.
    Auto Prefix is a utility that allows you to forget about prefixes. She takes the latest data on browser prefixes and popularity with Can I Use. Available for Ruby, Compass, Rework, Node.js, Javascript, PHP, Sublime, and even Prepros .


    Best JavaScript solution for capturing events from the keyboard:
    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.");

    Many variations with combos
        "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


    A great script to create drag & drop file upload areas. Supported in Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 6+. Everything works extremely simply: We

    connect Dropzone.js (there is an AMD module for RequireJS):
    <script src="./path/to/dropzone.js"></script>

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

    It is also possible to create dropzone programmatically:
    // Dropzone class:
    var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
    // jQuery plugin
    $("div#myId").dropzone({ url: "/file/post" });


    For $ 10 you can work with Git in your Sublime

    • Yandex published materials from the past YaC 2013 (front-end in room 4, I recommend)
    • Odometr - a script for creating beautiful counters
    • Prerender - An Open Source Solution for Complete Search Indexing of Your JavaScript Applications
    • Source from Odnoklassniki - Front-end documentation engine
    • Odnoklassniki MCSS is a multi-layer CSS organization system based on OCSS and BEM
    • Inventiveness from CSS Tricks - Conical Gradients in CSS
    • CERN decided to demonstrate the primitive form of surfing the Internet and created Line Mode Browser
    • Very unusual Fontwalk site , "completely parallaxen"

                                 Next Collection (Issue 6)       Previous Collection (Issue 4)

    Only registered users can participate in the survey. Please come in.

    Do you like the selection?