How to avoid social lockers

As a bookmark: Unlocker

Today I was trying to view the content of a website without liking it, because it was one of those interesting titles but no real content.

After a few seconds of  console exploring I found that facebook has a method for triggering events. So i just opened the console and typed:'edge.create',window.location+'')


Touch based event mapping

From a response on StackOverflow

I’ve captured the touch events and then manually fired my own mouse events to match.

Touch to mouse is wrong.
Mouse to touch is good.

Because mouse it’s more simple than touch. How would you simulate multi-touch into mouse events? Sure there is a way but it’s awful and not lightweight. That’s why you should build for touch. Starting from now on.

Sure, there is no problem using touch to mouse plugins on active websites, but using them on new projects it is rather regressive and old.

Reasons why you should use this technique

  • Simulates events only in desktop browsers
  • Native touch events ( because mobile devices have less processing power )
  • You’re creating future-proof code

So the point here is that we shouldn’t make mobile devices behave as a we know( like a mouse ), but make the mouse behave as a finger.

Of course there are inconsistencies like mouseover, mouseout and rightclick which belong to desktop browsers ant can’t be simulated into touch events. And this frustrating bug.

jQuery plugin

I don’t think I’m the only one upset that jQuery doesn’t support touch events yet. Every code can be improved, so please contribute to this project on GitHub to keep it going.

The idea is to detect if the device supports touch events and from there on, to simulate or to use the default apis. Thanks to Modernizr for the touch events detection code.

See the example

( function( $ ){

	$( document ).ready(function(){

		var position = { top: 0, left: 0 }, doc = $( document ), elm = $( '#box' ), startpos = {};

		elm.on( 'touchstart',function( e ){

			// android bug, it will prevent links and buttons from working

			var touch = e.changedTouches[ 0 ];

			position = elm.position();
			startpos.x = position.left - touch.pageX;
			startpos.y = - touch.pageY;

			// add drag functionality
			doc.on( 'touchmove', function( e ){

				var touch = e.changedTouches[ 0 ];
					top: startpos.y + touch.pageY, 
					left: startpos.x + touch.pageX 

			}).on( 'touchend', function( e ){ 'touchmove touchend' );


		}).click( function(e){

			// don't follow the link in desktop browsers


		// multiple bindings
		elm.on( 'touchstart',function(){

			elm.css({background:'green' });

		}).on( 'touchend', function(){

			elm.css({background: 'red'});



})( jQuery );

Source code is very small, 3 kb unminified and 1.3 minified.

Font Awesome – Javascript get all the glyphs

I was searching the internet for a way to get all the icon characters in FontAwesome and display them in a list. A JSON list seemed like a pretty good solution, but it requires time to maintain. But what if we could render all the characters in the font range and choose the ones that are non-empty?

This is where it became complicated. There was no default way to know if a glyph existed or not and no index of an empty glyph. Browsers like Opera were making this even harder to do since they were overwriting the default font.

After some serious tweaking and testing, Firefox and Safari found all the glyphs, Chrome, Opera and IE( 7 and 8 ) found 247 of the 249 icons in the font. Looked like a pretty good result so why not sharing, in case everyone ever needs this.

To use paste the following code anywhere inside your body tag.

<div id='glypher' style="font-family:FontAwesome;overflow:hidden;width:1px;height:1px;line-height:1em;font-size:1000px">&#xefff;</div>

And include these into the page head along with jQuery and the Font Awesome css file:

<script src='jquery.pubsub.js'></script>
<script src='jquery.fontawesome.js'></script>

And then do something with the list:

$.iconGlyphs( function( list ){
	// Alert the list length
	alert( list.length );

	// or create a new icon
	var icon = document.createElement( 'div' );
	icon.className = 'icon-g';
	icon.innerHTML = String.fromCharCode( list[ 0 ] );

Like i did below:


Grab PubSub from here, download the script and you’re ready to go.