Ramjet

ramjet

Transform DOM elements into each another with smooth transitions

ramjet helps us to Morph DOM elements from one state to another with smooth transitions!

All it does is:

  • Clone the elements and all their children.

  • Transform the second element so that it completely overlaps with the first.

  • Animating the two elements together until the first element has exactly the same position and dimensions as the second element.

install it: npm install --save ramjet

sample usage:

1
2
3
4
5
6

<div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div>
<div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div>

<script>
  ramjet.transform( a, b );
</script>

GIF FTW

ramjet.js

Thanks to Rich Harris for ramjet (:

Fade

fade

Fade a HTML element using CSS transitions.

Yes, you read it right, this module helps you to fade a HTML element. "Do one thing and do it right!", looks like the moto behind this module, that lets us to fade.in, fade.out and fade an element to a specifie opacity, which also takes a callback as one of it's params and execute it after animation ends and works across browsers with vendor prefixes.

Install it: npm install --save fade # browserify it!

Usage:

1
2
3
4
5
6
7
8
9
10

var fade = require('fade');

var el = document.querySelector('#el');

fade.out(el); // fade el out in 1s
fade.in(el, 1500); // fade el in in 1.5s
fade(el, 0.3, 3000); // fade el to opacity 0.3 in 3s 
fade.out(el, function() {
  el.style.display = 'none'; // set display to none after fade out
});

GIF FTW!

fade.gif

Thanks to Julian Gruber for this sweet little module.

html.js

html.js

An intuitive, extensible way to work directly with the DOM.

html.js is a fork of voyeur.js that has made it more simpler to deal with DOM in a relatively new way.

It has a pretty extensive API and you could also create your own plugins HTML._.fn.name = function;

Get it: npm install --save html.js

Usage Example:

1
2
3
4
5
6
7
8
9
10

let HTML = require('html.js');

HTML.body.header; // returns header element.

HTML.query("#example").h1.em; // chain on, man.

if (!('each' in node)) {
  HTML.ify(node);
}
node.each(function(el){ console.log(el, ' is your friend!'); });

GIF FTW!

html.js

Thanks to Nathan Bubna for this module.

Browser-repl

browser-repl

Launch a repl on your command line to any browser in the cloud.

browser-repl is a uber cool module from automattic that helps us to get a particular OS/Browser combo (JS engine) to our CLI with some webdriver protocol, scoket.io and localtunnel magic ;)

Currently supported browsers:

  • ie

  • ie6

  • ie7

  • ie8

  • ie9

  • ie10

  • ie11

  • opera

  • safari

  • safari5

  • safari6

  • safari7

  • safari8

  • chrome

  • chromedev

  • firefox

  • firefoxdev

  • ipad

  • ipad4

  • ipad5

  • ipad5.1

  • ipad6

  • ipad6.1

  • iphone

  • iphone4

  • iphone5

  • iphone5.1

  • iphone6

  • iphone6.1

  • android

  • android4.4

  • android4.2

  • android4.1

Currently supported platforms:

  • winxp

  • win7

  • win8

  • win8.1

  • mac10.6

  • mac10.8

  • mac10.9

  • mac10.10

  • linux

  • android

Get it:

1

npm install -g browser-repl

Set up:

1
2
3

# In your *.rc file.
export SAUCE_USERNAME="your username"
export SAUCE_ACCESS_KEY="your key"

To get the SAUCE stuff, sign up for a free OSS account on SauceLabs.

Usage:

1
2
3
4
5
6
7

$ repl

usage: repl <browser>[version] [platform]

options:
 -h: this message
 -k: no remote `console` override

GIF FTW

browser-repl

Jscpd

jscpd

jscpd is a tool for detect copy/paste "design pattern" in programming source code.

Andrey Kucherenko's jscpd is a smart tool that helps use to detect copy paste code!

It supports the below langauges:

  • JavaScript
  • Java
  • CoffeeScript
  • TypeScript
  • C++
  • PHP
  • C#
  • Go
  • Python
  • Ruby
  • C
  • Less
  • CSS
  • SCSS
  • Mixed HTML

Install it: npm install -g jscpd

Usage:

1
2
3
4
5
6
7

jscpd --path my_project/ --languages javascript,coffee

jscpd -f **/*.js -e **/node_modules/**

jscpd --files **/*.js --exclude **/*.min.js --output report.xml

jscpd --files **/*.js --exclude **/*.min.js --reporter json --output report.json

If you have a .cpd.yml config file in the pwd jscpd command, you will check code for duplicates according the config.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#.cpd.yaml
path:
  - fixtures/
languages:
  - javascript
  - coffeescript
  - typescript
  - php
  - python
  - css
  - ruby
  - go
  - java
  - "c++src"    # c++ source
  - csrc        # c source
  - csharp      # c# source
  - htmlmixed   # html mixed source like knockout.js templates
exclude:
  - "**/*.min.js"
  - "**/*.mm.js"
reporter: json

GIF FTW!

jscpd-demo

Stream-generators

stream-generators

Pipe ES6 Generators through Node.js streams.

This is a cheeky module authored by @mimetent which takes in a ES6 generator function and returns a readable stream!

Install it: npm install --save stream-geerators

Sample usage:

1
2
3
4
5
6
7
8
9
10
11

var streamify = require('stream-generators'),
    os = require('os')
    gen = function*() {
        yield 'Hello ';
        yield 'ES6 ';
        yield 'Stream gen';
        yield os.EOL;
    };
;

streamify(gen).pipe(process.stdout);

This would output: Hello ES6 Stream gen

GIF FTW!

stream-generators

Enable

https://www.npmjs.com/package/enable

ES6 and ES7 feature detection.

A simple util that would help you to check if the a required ES6 or ES7 is enabled, both in the browser and in CLI.

Get it: npm install --save enable

Sample usage:

1
2
3
4
5
6
7
8
9
10
11

var enable = require('enable');

if (enable.<feature>) {
  console.log(<feature> is supported);
}

/* Example:
if (enable.generator) {
  console.log('supports generator: `function* a() {}`');
}
*/

_

Function-plot

function-plot

A simple 2d function plotter powered by d3

function-plot helps to render functions with little configuration think of it like a util that would help you to render something like what Google does. y = x * x

The library currently supports interactive line charts and scatterplots, whenever the graph scale is modified the function is evaluated again with the new bounds, result: infinite graphs!

Get it : npm install --save function-plot

Sample usage:

1
2
3

var d3 = window.d3
var functionPlot = require('function-plot');
functionPlot({ /*Pass in the options*/ });

Check out the options!

GIF FTW!

function-plot

Json-server

json-server

REST API with zero coding in less than 30 seconds.

This module by typicode helps front-end developers who need a quick back-end for prototyping and mocking!

Get it:

Either as a CLI app: npm install -g json-server

or as a dep for your script: npm install --save json-server

Sample usage:

Assume you have a json.db like:

1
2
3
4
5
6
7
8

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ]
}

If you are installed module globally, then do a :

1
2
3
4
5

$ json-server json.db

# or

$ json-server http://example.com/file.json

if not, include it in your script

1
2
3
4
5
6
7
8
9

var jsonServer = require('json-server');

var server = jsonServer.create(); // Returns an Express server
var router = jsonServer.router('db.json'); // Returns an Express router

server.use(jsonServer.defaults); // logger, static and cors middlewares
server.use(router); // Mount router on '/'

server.listen(3000);

After which the server must be up and running at: http://localhost:3000

Avaliable routes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

GET    /posts
GET    /posts/1
GET    /posts/1/comments
GET    /posts?title=json-server&author=typicode
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

# SLICE
GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30

# SORT
GET /posts?_sort=views&_order=DESC
GET /posts/1/comments?_sort=votes&_order=ASC

# Query
GET /posts?q=internet

# Get the entire DB!
GET /db

GET on / would look like:

json-server-screenshot

GIF FTW!

json-server

console.json

console.json

Adds console.json method that stringifies passed in objects and logs them.

This is a sweet little util function by Gleb Bahmutov that makes a life bit easier while debugging huge json data in the console. P.S: There is console.dir but console.json is kina appleaing expect for the color highlighting part of it.

Install it: npm install --save console.json

Sample usage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Just require it once and you shall have `console.json` method for convenience.

require('console.json');


var data = {
    "$schema": "http://json-schema.org/draft-04/schema#",
    "title": "Product",
    "description": "A product from Acme's catalog",
    "type": "object",
    "properties": {
        "id": {
            "description": "The unique identifier for a product",
            "type": "integer"
        },
        "name": {
            "description": "Name of the product",
            "type": "string"
        }
    },
    "required": ["id", "name"]
};

console.json(data);

GIF FTW!:

console.json