viernes, 27 de diciembre de 2013

HTML Parser with Javascript

parse5

parse5 (GitHub: inikulin / parse5, License: MIT, npm: parse5) by Ivan Nikulin is a new HTML5 parser, based on the WhatWG HTML5 standard. It was built for a commercial project called TestCafé, when the authors found other HTML5 parsers to be too slow or inaccurate.

It’s used like this:

var Parser = require('parse5').Parser;
var parser = new Parser();
var document = parser.parse('<!DOCTYPE html><html><head></head><body>Hi there!</body></html>')
var fragment = parser.parseFragment('<title>Parse5 is &#102;&#117;&#99;&#107;ing awesome!</title><h1>42</h1>');

I had a look at the source, and it doesn’t look like it was made with a parser generator. It has a preprocessor, tokenizer, and special UTF-8 handling. There are no dependencies, other than nodeunit for testing. The tests were derived from html5lib, and include over 8000 test cases.
If you wanted to use it, you’ll probably need to write a “tree adapter”. Ivan has included an example tree adapter, which reminds me of writing SAX parser callbacks.
Ivan also sent in mods, which is a module system designed to need less boilerplate than AMD-style libraries.

Redis Time Series

Tony Sokhon sent in redis-timeseries (GitHub: tonyskn / node-redis-timeseries, License: MIT, npm: redis-timeseries), a project for managing time series data. I’ve used Redis a few times as a data sink for projects that need realtime statistics, and I always found it worked well for the modest amounts of data my projects generated. This project gives things a bit more structure – you can create instances of time series and then record hits, then query them later.
A time series has a granularity, so you can store statistics at whatever resolution you require: ts.getHits('your_stats_key', '1second', ts.minutes(3), callback). This module is used by Tony’s dashboard project, which can be used to make a realtime dashboard.

request-as-curl

request-as-curl (GitHub: azproduction / node-request-as-curl, License: BSD, npm: request-as-curl) by Mikhail Davydov serialises options for http.ClientRequest into an equivalent curl command. It also works for Express.

// http.ClientRequest:
var req = request('http://google.com/', {method: 'POST', json: data}, function (error, response, expected) {
  curlify(req.req, data);
  // curl 'http://google.com' -H 'accept: application/json' -H 'content-type: application/json' -H 'connection: keep-alive' --data '{"data":"data"}' --compressed
});

// Express:

app.get('/', function (req) {
  curlify(req);
  // curl 'http://localhost/pewpew' -H 'x-real-ip: 127.0.0.1' -H etc...
});

I imagine Mikhail has been using this so he can replicate requests based on logs to aid in debugging.

Thanks to: http://dailyjs.com/2013/12/11/node-roundup/

jueves, 26 de diciembre de 2013

ionic - HTML5 native app Framework

Ionic is a powerful HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS, and Javascript. Ionic is focused mainly on the look and feel, and UI interaction of your app.

Ionic is free and open source, built with Sass and optimized for AngularJS. It is modeled off of popular native mobile development SDKs, making it easy to understand for anyone that has built a native app for iOS or Android. Just drop it in your code to get going, and push through PhoneGap when it’s ready. Develop once, deploy everywhere.

Requirements: -
Demo: http://ionicframework.com/
License: MIT License

Effeckt.css - HTML Page Transitions

Designing and developing UIs for the mobile web is tricky, but it’s extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

Effeckt.css is a collection of fantastic experiments and demos exploring CSS-based transitions. It provides very little UI of its own. It’s only hooks for transitions / animations. There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap equivalent.

Requirements: JavaScript Framework
Demo: http://h5bp.github.io/Effeckt.css/dist/
License: MIT License

Create 3D with jQuery

Incredible plugin for rotating images in 3D with javascript only.
http://www.thepetedesign.com/demos/interactive_3d.html

Appear.in - Group hat (sign-up free)

When working as a distributed team or meeting remotely with clients, video chat is used frequently.
Appear.in is a free and web-based app that provides group video chat for up to 8 people.
The application doesn’t require sign-up, a room with a unique link can be created instantly and shared with others.

It is built with native web technologies, no download is needed and works on all browsers except IE.
There is also an API which may simplify integrating it to the project management cycle with ease.

http://www.webresourcesdepot.com/free-group-video-chats-appear-in/

Marvel - Create prototypes for your apps

Marvel is a free, web-based tool for creating prototypes for any device: desktop, tablet, mobile and more.
The app works by synchronizing with your Dropbox account which simplifies updates (as local file updates are instantly reflected to the Marvel-powered prototypes).
It accepts both images + PSDs and prototypes can be shared with unique URLs, SMS or QR codes.

Summernote - A simple WYSIWYG

Summernote is a simple, clean and flexible WYSIWYG Editor that is built on top of jQuery and Bootstrap.
It supports Bootstrap’s both active versions (2 and 3) and has keyboard shortcuts for all major tasks.

There is a powerful API which provides lots of customization options in means of design (width, height, active items..) and functionality.
The project also has integration samples for major scripting languages or frameworks (PHP, Ruby, Django, Nodejs).

UIKit - Create web content with CSS

UIKit

UIKit 2.0 (GitHub: uikit / uikit, License: MIT) is a frontend framework that provides components for layout, navigation, and more complex UI widgets like dropdown replacements. It uses jQuery and FontAwesome. Version 2 has just been released, which has some new features including a Markdown editor that supports syntax highlighting and an extensible toolbar.

There’s extensive documentation and a theme tool, so you can have a look at the main features quite easily

HTML Game for the Weekend

Just for playing, I did a small game in pure HTML. But not using the usual <canvas> from HTML5. I used only pure old Javascrip and a couple of HTML tags.

All goes inside index.html
You first create a simple HTML file with the following:

<body onLoad="doWork()">
<div id="canvas"></div>
</body>

Make a reference to mousetrap.min.js to handle the keyboard events (Google the library, it's pretty cool)

For the <style>, this is what I did (pretty basic)

<style>

.tile {

border : 1px dotted #ccc;

width: 10px;

height: 10px;

position: fixed;

}

.marked {

background-color: #ccc;

}

</style>

The fun part is the Javascript code.

// TILES

var totalCols = 100;

var totalRows = 50;

// TILES POSITION AND SIZE

var grid_x = 0;

var grid_y = 0;

var grid_w = 10;

var grid_h = 10;

// SPEED FOR MOVING ACTORS

var speed_w = grid_w * 1;

var speed_h = grid_h * 1;

// MARKED TILES ARE OBSTACLES FOR ACTORS

var totalMarkedTiles = 0;

var markedTilesLeft = new Object();

var markedTilesTop = new Object();

// FRAMES LEFT

var framesLeftKid = new Object();

framesLeftKid['0'] = 'i/kid/frame_000.gif';

framesLeftKid['w'] = grid_w * 6;

framesLeftKid['h'] = grid_h * 10;

// FRAMES RIGHT

var framesRightKid = new Object();

framesRightKid['0'] = 'i/kid-right/frame_000.gif';

framesRightKid['w'] = grid_w * 6;

framesRightKid['h'] = grid_h * 10;

// ACTORS

var actorKid1 = new Object();

actorKid1['name'] = 'kid1';

actorKid1['framesLeft'] = framesLeftKid;

actorKid1['framesRight'] = framesRightKid;

actorKid1['currentTop'] = 20;

actorKid1['currentLeft'] = 20;

actorKid1['currentFrame'] = 0;

// ACTORS ADDED TO THE MAIN ARRAY

var actors = new Object();

actors[0] = actorKid1;

function loadMap() {

var top = grid_y;

var left = grid_x;

var str = "";

for ( var row=0; row < totalRows; row++ ) {

for ( var col=0; col < totalCols; col++ ) {

// all the bottom is blocked

if ( col >= 0 && row == totalRows - 1 && col <= totalCols - 1 ) {

markedTilesLeft[totalMarkedTiles] = col;