If you want to reload a page without trigger a message to the user asking if they want to send data again, you can use this:

window.location = window.location;

instead of:

window.location.reload();

Clone your Heroku App GIT repo to a local server directory:

$ git clone git@heroku.com:yourapp-name-xxxx.git

Enable CURL extension in php.ini:

#Win env:
extension=php_curl.dll

Clone Facebook PHP SDK into sdk/ folder. It’s included as a submodule, so do only:

git submodule init
git submodule update

Alter AppInfo.php to return your App ID and App Secret:

/**
* @return the appID for this app
*/
public static function appID() {
//return getenv('FACEBOOK_APP_ID');
return 'YOUR_APP_ID_HERE';
}

/**
* @return the appSecret for this app
*/
public static function appSecret() {
//return getenv('FACEBOOK_SECRET');
return 'YOUR_SECRET_HERE';
}
Add lines to .gitignore:
AppInfo.php
sdk/src/**/*

After watching Paul Irish‘s Tooling – JSConf slideshow, I decided to extract his rolling links CSS definition and examinate it.

Here it is:

HTML

​<div id="reveal">
	<a href="http://zsitro.com/" class=" roll">
		<span data-title="H5BP build script">H5BP build script</span>
	</a>
</div>

CSS

/*********************************************
 * ROLLING LINKS
 *********************************************/

#reveal .roll {
    display: inline-block; /* give it a layout */
    overflow: hidden;
    vertical-align: top; /* just to be sure */

    /*
     * The smaller the number the closer you look at this  element
    */
    -webkit-perspective: 400px;
       -moz-perspective: 400px;
        -ms-perspective: 400px;
            perspective: 400px;

    /*
     * Relative position of the POV
     * Default is 50% 50% so not necessary
    */
    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;    

}
    #reveal .roll:hover {
        background: none;
        text-shadow: none;
    }

#reveal .roll span {
    display: block; /* give it a layout */
    position: relative;
    padding: 0 2px;

    pointer-events: none;

    /* duration */
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%; /* posx posy */
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
    /*
    * CSS3 transform-style explained here:
    * http://www.webkit.org/blog-files/3d-transforms/transform-style.html
    */
}
    #reveal .roll:hover span {
        background: rgba(0,0,0,0.5);

        -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
            -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
                transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
    }

/* ======================= */
/* = Face after rotation = */
/* ======================= */
#reveal .roll span:after {
    content: attr(data-title);
    display: block; /* maybe its not necessary */
    position: absolute; /* position over  */
    left: 0;
    top: 0;
    padding: 0 2px; /* nothing functional, just right, left space */

    color: #fff;
    background: hsl(185, 60%, 35%);

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    /*
    * translate3d => move up element to the top
    *     rotateX => rotate till hidden
    */
    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
            transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

​

When I was on to make a default share photo for this site, I have made a research on the appropriate dimension for it.
I came across this:

// https://s-static.ak.fbcdn.net/rsrc.php/v2/yZ/r/7mFDR3G4sU9.css @ line: 967
.uiStreamBoulderThemeAgg
.uiStreamAttachments .external img {
	max-height: 100px;
	max-width: 120px;
}

It is totally okay to use & in HTML5 code without &amp;.

DEMO

HTML5: http://goo.gl/vpfte
XHTML 1.0 Transitional: http://goo.gl/oEkQl

Vincent! We happy?

Your LESS shortcut declaration won’t appear in the compiled CSS file as long as you attach a “declaration-variable” to it.

// This will be in the CSS output, but I use it only inside other declarations. That's wrong.
.removeMP{
padding:0;margin:0;
}

// This wont show up in the output, but provides the same functionality.
.removeMP(@foo:''){
padding:0;margin:0;
}

Recently I did a pull request into less.js, but the project owner (cloudhead) have already got 80+other requests so I publish here one solution for an issue in this framework:

When you call less.watch() in production environment or with the hash mark -> it just does not work. Feature or bug dunno. But:

Many people trying to do this:

<script type="text/javascript" src="less-1.2.2.js"></script>
<script type="text/javascript">
	// <![CDATA[
		less.env = "development";
		less.watch();
	// ]]>
</script>

but they do not realize that less.env line is ignored (because less.js loaded itself right before that line), and that variable is auto set up based on your URL (localhost/127.0.0.1,file:///,etc). Which is not always useful.

For example I work on localhost with a http://projects.local/... host name so there the less.watch() wont work.

I added a bit code to the browser.js.
https://github.com/zsitro/less.js/commit/696c9ec034b373c63e7e734d7ebb9b0be04e8ca0

EFFECT: less.watch() can be called from hash or from script tag even in production env.

Now this will function as follows:

<script type="text/javascript" src="less-1.2.2.js"></script>
<script type="text/javascript">
	// <![CDATA[
		//less.env = "development"; ITS JUST DUMB
		less.watch();
	// ]]>
</script>

Also fixed: missing clearInterval @ less.unwatch(). Its weird that less.js does not kill the timer, but check the less.watchMode true/false in the loop :D
Hope you guys like it.

Anyway, after using less.js I switched to lessPHP. Its much faster and reliable, than the javascript compiler. I will write about it later.

It was a headache to find out the reason for a parse error on my computer after pasting it to my editor while it was perfectly functional on the senders machine.

These circles were hidden in every editor except for Word.

Only quick solution was manual delete white spaces in the editor.

Youtube Seppuku

You can remove or change the <ul> container that you get by default with wp_nav_menu (codex) through parameters, but you can’t remove the <li> elements that wrap each menu item. This is how you can actually remove them:

$menuParameters = array( 
	'container' => false,
	'echo' => false,
	'items_wrap' => '%3$s',
	'depth' => 0
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );

UPDATE: Chris Coyier made a repost here:

http://css-tricks.com/snippets/wordpress/remove-li-elements-from-output-of-wp_nav_menu/