Web開發利器推薦（五）

StackEdit

它是一款很棒的 Markdown 編輯器。 基于 PageDown 開發而來，已經被 Stack Overflow 和其他 Stack Exchange 站點使用。

StackEdit 能實時預覽文檔，保存到云端或本地的local storage，導出 Markdown、HTML 或 PDF 格式，與GitHub、Gist、Google Drive、 Dropbox 或者任何 SSH 服務器。

還有其他功能： 支持 LaTeX 、所見即所得、在線/離線模式、 Prettify/Highlight.js 語法高亮、支持擴展。

App.io - 在瀏覽器中運行移動app

IM Creator

在之前的文章中介紹了 Webflow。 現在我想介紹另一個創建響應式網站的GUI工具。 主要的區別是它有更多的主題。

Autoprefixer

解析CSS和并根據 Can I Use 添加CSS廠商前綴。

這樣你寫CSS的時候就可以不用考慮CSS廠商前綴（完全忘記了它們吧）：

:fullscreen a {
    transition: transform 1s;
}

Autoprefixer 將根據當前瀏覽器的流行度和支持度提供合適的前綴。 來嘗試一下 Autoprefixer 的 演示 。

:-webkit-full-screen a {
    -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
}
:-moz-full-screen a {
    transition: transform 1s;
}
:-ms-fullscreen a {
    transition: transform 1s;
}
:fullscreen a {
    -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
}

Keypress.js

這是最佳的捕捉鍵盤輸入的解決方案：

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.js

這是個很好的拖拽上傳文件的腳本。 支持Chrome 7+、Firefox 4+、IE 10+、Opera 12+、 Safari 6+。它的使用很簡單：

插入腳本（還提供一個Requirejs AMD 模塊）：

<script src="./path/to/dropzone.js"></script>  
<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>  

這樣就好了。 真的！ 你也可以用JS代碼：

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

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

其他

花10美元你就可以在 Sublime 里用 Git ：

Odometr —— 創建優雅的計數器

PreRender —— 把JavaScript生成的頁面渲染為有更好SEO的HTML。

Source —— 前端文檔引擎。

CSS Tricks 的一個創新 —— Conical Gradients in CSS 。

歐洲核子研究中心展示了原始的上網浪形式，創建了 Line Mode Browser 。

一個不同尋常的網站 —— Fontwalk ，全站應用了視差效果。

原文：Awesomeness & Usefulness for Web Developers #5
由SegmentFault整理編譯