fregante

/**
 * Add a delay at the end of the timeline (or at any label)
 * @param {number} delay    Seconds to wait
 * @param {string} position Label name where to start the delay
 * 
 * Usage: tl.addDelay(4); //easy!
 */
TimelineLite.prototype.addDelay = function (delay, position) {
	var delayAttr;
	if(typeof delay === 'undefined' || isNaN(delay)){

fregante

var elementStyle = document.querySelector('SELECTOR HERE').style;
document.addEventListener('mousemove', function (e) {
	var transform = 'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)';
	elementStyle.webkitTransform = transform;
	elementStyle.transform = transform;
}, false);

fregante

Sometimes we overcomplicate things unnecessarily. I realized it after I wrote this plugin.
Twenty-nine lines to be able to write this:

TweenLite.disperseTo(elements, 1, {x:100}, {x:5}); //this means: animate elements.x to 100±5

instead of this:

for(var i = 0, l = elements.length; i < l; i++){
  TweenLite.to(elements[i], 1, {x: 100 - 5 + 10*Math.random() });
}

fregante

{
	"disable_tab_abbreviations_for_regexp": "source\\.s?css"
}

fregante

<?php /*screenshot: http://i.imgur.com/6HRvuWx.png */

/*visibile anche sul front end, se ha effettuato l'accesso*/
add_action( 'wp_before_admin_bar_render', 'add_invoice_to_admin_bar' );
function add_invoice_to_admin_bar() {
  global $wp_admin_bar;
  $wp_admin_bar->add_menu( array(
      'id' => 'pay_invoice',
      'title' => '<span style="background: red;color:white;display:block;">Il pagamento della fattura 19 è in attesa da Novembre. Paga <strong style="font-weight:bold">oggi</strong> con PayPal o tramite bonifico.</span>',
      'href' => '{Link per pagamento tramite paypal}'

fregante

# https://gist.github.com/bfred-it/9690041
(* Duck iTunes' volume (lower volume and then raise it again) *)

(* Instructions:
 - Create a service with Automator
 - Add the "Run AppleScript" action
 - Paste this in
 - Save
 - Open System Preferences > Keyboard > Shortcuts > Services
 - Find what you just created

fregante

Frame tracker

This code will mark each frame and it will make it easier to pin down console.logs being called in the same frame—intended as in frames per second, not html frames.

Example

Consider this code:

    setTimeout(function hello() { console.log('Logging "Hello"'); }, 10);

setTimeout(function world() { console.log('Logging "World"'); }, 20);

fregante

This snippet will help you define the clip values in order:

• top
• left
• height
• width

If you're using SASS (or maybe LESS) that's it. Otherwise you will have to do some easy math in place:

• height+top
• width+left

fregante

$images-count: 4;
$slideshow-duration: 6;
$slideshow-percentage-per-slide: 100/$images-count;
$slideshow-slides-overlap: $slideshow-duration/($images-count+1)+1;
.slideshow {
	overflow: hidden;
	position: relative;
	height: 400px;
	z-index: 0;
	background-color: $color-golden;

fregante

Connection monitor

Note: if you need a simple connection icon, check out BitBar and its internet checker plugin.

This program notifies you when Internet goes down and when it comes back up.

It pings Google's DNS every 4 seconds; when a ping fails it quickly tries a few more times and switches to downtime mode. When Internet is available again, the cycle restarts.

Tools used