Moved all my code to CodPen

Once again (and hopefully for the last time) I moved all my code snippets to Codepen. I think it better suits my needs since most of my code examples are front end related and Codepen has a tremendous advantage there, because it allows you to publish full HTML, CSS and JS solutions and see the final output instantly! The social features it provides are also impressive, you can fork a “pen”, play with it, republish it etc, and finally it looks really good (excellent choice of color palette) and it’s very customisable.

You can view my profile and play with my pens, don’t forget to follow me 😉 My gist list will remain and I’ll continue posting there as well, but mostly only server side code such as PHP scripts.

jQuery lights off effect

I’ve been working on a “lights off” effect for videos the other day. Here’s a demo page (with the appropriate code) that I might turn into a proper plugin if there is enough interest. Enjoy…

$(document).ready(function(){
	
		// Build the link
		$('.lightsoff').append('<div class="lightsoffbtn"><a href="#">Lights Off</a></div>');
		
		// Prepare the overlay
		$('body').append('<div class="lightsoff-ovelay off" style="position:relative; z-index:1; display:none;">close</div>');
		
		// Variables
		var $overlay = $('.lightsoff-ovelay'),
			$containers = $('.lightsoff'),
			$lightsoffTrigger = $('.lightsoffbtn a');
	
			
		// LightsOff events
		$lightsoffTrigger.each(function(){
		
			// Variables
			var $container = $(this).parent().parent();
	
			// Apply some CSS
			$container.css({ 'position': 'relative' });
	
			$(this).click(function(e){
	
				e.preventDefault();
					
				if ( $overlay.hasClass('off') ) {
	
					$container.css({
						'z-index': 4000
					});
	
					$overlay.css({
						'position': 'fixed',
						'display': 'block',
						'text-indent': -99999,
						'background-color' : '#000000',
						'width': '100%',
						'height': '100%',
						'top': 0,
						'left': 0,
						'z-index': 3000,
						'opacity': 0.7,
						'cursor': 'pointer'
					});
	
					$overlay.removeClass('off').addClass('on').fadeIn();
	
				} else if ( $overlay.hasClass('on') ) {
					e.preventDefault();
					$containers.css({ 'z-index': 0 });
					$overlay.removeClass('on').addClass('off').fadeOut();
				}
			
			});
		
		});
		
		$overlay.click(function(e){
			e.preventDefault();
			$containers.css({ 'z-index': 0 });
			$overlay.removeClass('on').addClass('off').fadeOut();
		});
	
	});Check out this Pen!

How to remove junk from your WordPress “head” section

The default WordPress installation has some messy code in it’s “head” section. There’s too much useless meta data and noise that can cause issues, and even lead to security vulnerabilities, like the “generator” tag that informs the world the Wordrpress version you are running. You can clean up the mess by removing the bellow actions (copy and paste the below code to your theme’s functions.php file).

For some reason WordPress’s theme reviewers didn’t allow me to include the above code on Ambrosia theme, so feel free to include it.

Organizing jQuery Code

Organizing jQuery code is not easy. Up to now, especially on small/medium scale projects, I used to have a huge jQuery ready function and place all my code there. Some times if I needed to run something on specific elements I was just doing a quick test to check if the element was on the document.

$(document).ready(function(){
	//jQuery code...
	if ( $('.someClass').length ) { // if element exists then run the below code
		// Do something
	}
});Check out this Pen!

The above technique is not too bad, it works just fine for a small or medium sized site, but what happens with a larger site that uses heavy javascript code? The answer came from a presentation I watched recently (Simple JavaScript & CSS Management With Rack by Mr. Avand Amiri – I strongly encourage you to watch it as well). The solution is really clean and pretty smart. Just create a javascript file (actually you can break it to as many files as you want) that will hold all your main objects. Below is a very basic “Greetings” object.

var Greetings = {
	alertFn: function () {
		alert('OK');
	},
 
	john: {
		sayHelloToJohn: function() {
			alert ('Hello John!');
		}
	}
// do something else, etc.
}Check out this Pen!

At the example above the object “Greetings” contains two methods (functions). As you can see, I could go further and create nested objects with their own methods. The idea is to organize my methods as well as I can.

Then I only have to call them into our usual jQuery ready function like this.

$(document).ready(function(){
  Greetings.alertFn();
});
// or
$(document).ready(function(){
	Greetings.john.sayHelloToJohn();
});Check out this Pen!

Keep in mind that this way I can follow any code structure/organization I need, so for example I can follow my application’s controllers structure and naming convention, or whatever makes more sense for my app. This way we get a simple, more robust, well-organised jQuery code, and not the classic document ready soup…