Last active
March 11, 2018 16:39
-
-
Save c33k/3a6f98c1935ec412b7a0052efcb84ae6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# USEFOOL TOOLS | |
npm i -g browserify | |
npm i budo -g | |
npm i browser-run -g | |
#example: | |
browserify *.js > bundle.js | |
# BUDO - browserify your tests and run it in the browser, without the need for you to create a html do load a bundle.js, | |
# for example, generated by browserify | |
budo tests.js | |
if i want to pass options to browserify: | |
budo file.js -- -t coverify | |
# BROWSER-RUN - expects JavaScript payloads from stdin and wrap it in body, script-src and runs it in the browser. | |
# Everytime you use console.log, it will send it to stdout - connection via websocket or xhr | |
browserify *.js | browser-run -b chrome | |
### ABSTRACT SYNTAX TREE ### | |
modules: acorn, falafel | |
### CODE COVERAGE | |
#coverify | |
browserify -t coverify test/*.js --node | node | coverify | |
#in the browser | |
browserify -t coverify test/*.js --node | browser-run -b chrome | coverify | |
# NYC - test coverage | |
nyc npm test | |
nyc tape <test files path> | |
### CONTINUOUS INTEGRATION ### | |
- create a .travis.yml file containing something like this: | |
``` | |
language: node_js | |
node: | |
- "7" | |
- "6" | |
- "4" | |
``` | |
- Add a badge to your README.md: | |
[![build_status](https://travis-ci.org/substack/parse-messy-time.svg)](https://travis-ci.org/substack/parse-messy-time) | |
- travis-ci github webhook | |
https://travis-ci.org/$USER/$REPO | |
click in "activate repo" | |
### TEMPLATE STRINGS ### | |
#hyperx: create a tag for your template strings that are HTMLs | |
var hyperx = require('hyperx') | |
var html = hyperx(function (tagName, props, children) { | |
console.log(tagName, props, children) | |
return 'something' | |
}) | |
var n=5; | |
console.log(html` | |
<div class="cocoCLass" data="${n*1000}"> | |
</div> | |
`) | |
#yo-yo | |
com diffing with real DOM nodes | |
* faster in some cases than a virtual DOM | |
* interop with vanilla DOM modules | |
###ROUTES | |
var http = require('http') | |
var router = require('routes') | |
router.addRoute('GET /name/:name', function (req, res, m) { | |
res.end('name=' + m.params.name + \n'') | |
}) | |
var server = http.createServer(function(req, res) { | |
var m = router.match(req.method + ' ' + req.url) | |
if(m) m.fn(req, res, m) | |
else st(req, res) | |
}) | |
#ROUTING | |
in server and in the browser | |
* history.pushState - update the URL (state) without navigating to that URL | |
```js - this is a trick in case you do routing in the browser. | |
//attaching the event on the window, you can intercept every click and check if the user is navigating to an internal url | |
window.addEventListener('click', function(ev) { | |
var el = ev.target | |
if(el.tarName.toUpperCase() === 'A' | |
&& el.getAttribute('href')) { | |
//if the link can be handled by the router, | |
//call ev.prevendDefault() | |
} | |
}) | |
``` | |
###CHOO | |
minimal (4kb) modular redux architecture | |
https://choo.io | |
using: | |
*yo-yo/bel/hyperx | |
*sheetify | |
### BUILDING FOR PRODUCTION | |
browserify transforms for yo-yo/bel/choo dev: | |
*yo-yoify - transforms template strings into expressions (its good if you need support for older browsers) | |
ex.: browserify -t yo-yoify yo.js | |
*unassertify - libraries add a lot of asserts to test. Use this browserify transform to remove the asserts | |
*sheetify - transform that lets you do inline CSS | |
or bankai includes these by default with no config: | |
``` | |
$ bankai build main.js public/ | |
``` | |
### SPLIT2 - split a file in chunks that represent each line | |
#example: counting the number of lines in a file (same as wc -l < file.txt) | |
var split = require('split2') | |
var through = require('through2') | |
var count = 0 | |
process.stdin | |
.pipe(split()) | |
.pipe( through(write, end)) | |
.pipe(process.stdout) | |
function write(buf, enc, next) { | |
count++ | |
next() | |
} | |
function end() { | |
console.log(count) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment