Tri Vuong trivektor

Animation

Tooltip

https://github.com/stevenbenner/jquery-powertip

Keyboard

Avoid jQuery When Possible

jQuery does good jobs when you're dealing with browser compatibility. But we're living in an age that fewer and fewer people use old-school browsers such as IE <= 7. With the growing of DOM APIs in modern browsers (including IE 8), most functions that jQuery provides are built-in natively.

When targeting only modern browsers, it is better to avoid using jQuery's backward-compatible features. Instead, use the native DOM API, which will make your web page run much faster than you might think (native C / C++ implementaion v.s. JavaScript).

If you're making a web page for iOS (e.g. UIWebView), you should use native DOM APIs because mobile Safari is not that old-school web browser; it supports lots of native DOM APIs.

If you're making a Chrome Extension, you should always use native APIs, not only because Chrome has almost the latest DOM APIs available, but this can also avoid performance issue and unnecessary memory occupation (each jQuery-driven extension needs a separate

Using Obj-C with MacRuby/Rubymotion

This little post aims to help you to translate Objective-C Blocks into Ruby blocks. Let's start by taking a look at few examples of iOS API call where blocks are used for animations and enumeration

Ruby Lambda Syntaxes:

Im Rubymotion and MacRuby you can use all the Ruby Lambda syntaxes that are:

block = lambda { |param|  ... }

	icon-glass
	icon-music
	icon-search
	icon-envelope-alt
	icon-heart
	icon-star
	icon-star-empty
	icon-user
	icon-film
	icon-th-large

	http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/<html>
	<head>
	<meta name="viewport" content="initial-scale = 1.0, user-scalable = no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<style>
	body {margin: 0; padding: 0;}
	#width {width: 100%;}
	#content {position: absolute; top: 50px; left: 0; right: 0; bottom: 50px; overflow: scroll; -webkit-overflow-scrolling: touch;}
	p {margin-bottom: 20px;}
	#header {background: #000; color: #fff; height: 50px; position: fixed; top: 0; width: 100%;}

	Drop in replace functions for setTimeout() & setInterval() that
	make use of requestAnimationFrame() for performance where available
	http://www.joelambert.co.uk

	Copyright 2011, Joe Lambert.
	Free to use under the MIT license.
	http://www.opensource.org/licenses/mit-license.php

	border-bottom: 1px solid transparent;
	background-image:
	-webkit-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)),
	-webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.8) 50%, rgba(255,255,255,0)),
	-webkit-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
	background-image:
	-moz-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)),
	-moz-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.8) 50%, rgba(255,255,255,0)),
	-moz-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
	background-image:

	/**
	* Slanted tabs with CSS 3D transforms
	* See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
	*/

	body { padding: 50px; }

	nav {
	position: relative;
	z-index: 1;

	/*
	* Adapted from: http://code.google.com/p/gaequery/source/browse/trunk/src/static/scripts/jquery.autogrow-textarea.js
	*
	* Works nicely with the following styles:
	* textarea {
	* resize: none;
	* word-wrap: break-word;
	* transition: 0.05s;
	* -moz-transition: 0.05s;
	* -webkit-transition: 0.05s;

	// Inject a service into a controller (source: http://stackoverflow.com/a/14418384/477697)

	function MyCtrl($scope, $injector) {
	$scope.doSomething = function(someService) {
	var service = $injector.get(someService) // someService contains the name of a service
	service.value += 10
	}

	// Define a service (source: http://stackoverflow.com/a/15904939/477697)