Web开发利器推荐(三)

看到一个很棒的系列,介绍了很多对web开发很有帮助的利器,解决了很多开发中遇到的繁琐事,翻译来分享一下:

Cloudconvert

出色的在线转换器,支持超过150种格式,支持音频、CAD、文档、电子书、图像、表格、演示文稿、视频文件。 与Dropbox和 Google Drive同步,适用于所有智能手机。 最棒的是,它提供功能强大但使用简单的API。

Munee

clipboard.png

Munee 是一个功能强大的PHP库,能编译 LESS、 SCSS、CoffeeScript,在云端处理图片,压缩CSS、JS,本地缓存和快速远程访问。 不需要改变你的模板资源。 可以通过ComposerPhar File 或从 GitHub下载安装。

Brunch

clipboard.png

基于Node.js的第一个项目汇编程序。 从优化的角度来看类似Munee( 刚才说过的PHP库,这样高能的工具在PHP界里不常见)。 Brunch 能用于很多流行的框架:Boilerplate、Bootstrap、Skeleton、Angular.js、 Backbone.js、Jade、 Phonegap等。

Favico.js

clipboard.png

一个小小的图标元素对适当的交互非常有用。 这个脚本可以让你轻易地操纵各种方法来显示项目的图标,甚至流媒体视频或摄像头的记录。 类似的还有 jQuery Notify Better ,但功能没这么强大。

Animo.js

clipboard.png

现在可以通过 Effeckt.cssAnimate.css 轻易的操作CSS动画。 Animo.js是个智能库(大小只有7KB),能方便的制作CSS动画 (animate+animo.css) ,还增加了跨浏览器的模糊效果。 配合 jQuery 2 能更好的使用。

语法很简单:

$('#demo-a').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
    $('#demo-n').animo({animation: "fadeOutUp", duration: 0.5, keep: true}, function() {
        $('#demo-i').animo({animation: "fadeOutDown", duration: 0.5, keep: true}, function() {
            $('#demo-m').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
                $('#demo-o').animo({animation: "fadeOutRight", duration: 0.5, keep: true}, doMagicIn()); // function to fade them back in
            });
        });
    });
});

Gridism

clipboard.png

如果你还没有使用过CSS框架(Bootstrap、Foundation 等),我推荐Gridism,我认为它是创建响应式网站最简单、最轻量级的框架。

Rework

clipboard.png

在Node.js 里进行 CSS 预处理的插件。 很好地结合了LESS、 SCSS 和 Stylus,因为它有很好的JavaScript功能,内置 Compass,能自由地操作前缀、透明等属性,优化在 retina 屏幕的显示等。

Basiliq

clipboard.png

Basiliq是拥有者大量UI元素的线框图工具,用于创建桌面或移动模型。 我个人非常喜欢“写意”的风格,看完产品介绍的视频后更喜欢了。 它是由 Samara 市的 CloudCastle 设计工作室开发的。 是个高质量、高品味的产品。

Cleaver

clipboard.png

《30-second Slideshows for Hackers》已经说完我想说的话了。

npm install -g cleaver
cleaver path/to/something.md

title: Basic Example
author:
  name: "Jordan Scales"
  twitter: "@jdan"
  url: "http://jordanscales.com"
output: basic.html
controls: true

--

# Cleaver 101
## A first look at quick HTML presentations

--

### A textual example

Content can be written in **Markdown!** New lines no longer need two angle brackets.

This will be in a separate paragraph

--

### A list of things

* Item 1
* Item B
* Item gamma

No need for multiple templates!

而最后我们会得到这样的介绍

最后

1.看看我的 Shade.less

2.最近我一直在寻找一个类似Kuler的工具来确定扁平化的配色,只发现这个调色板

3.有趣的CSS作品: the Client-side full-text search in CSS, Mona Lisa pure CSS


英文原文:Awesomeness & Usefulness for Web Developers #3

本文是我为 SegmentFault 所译


Web开发利器推荐(三)

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我吃个鸡腿吧