Webmuch

Review Year 2011: Web Development & Webmuch

Jojo — Sat, 31 Dec 2011 12:20:53 +0000

2011 has been an insane year for web developers. Newer ideas and technologies have come to life everyday. I love web development, I live for it. I love waking up to feedly in anticipation of what the web has for me to learn today. This year has been such a information overload, new things coming out everyday. I realized soon enough, It is quite impossible to keep up with everything. Not that I’m complaining. But I decided I will learn newer technologies as and when I need them.

One thing I have discovered is that it is not always about knowing “how it is done?”, sometimes and most times in advanced web development cases: it is about “what this can be done with” (I guess that’s why consultants flourish so much).

This year I have researched way more than I have learnt. I know what most technologies are about. I know what framework, library, plugin can do what. How? I have no idea until I need it.

This year has been good to me, I have started my own web consulting and development firm named Webmuch Software, I have finished some good projects. The only thing I have failed at is blogging regularly. Here’s to hoping 2012 will change that for the good.

Below are a few things I think notable about web development industry in 2011.

Web Innovation: Unstoppable

2011 has definitely taught me one thing, the Web won’t slow down at innovating. The slur of libraries that came out in 2011 is huge. A JavaScript library for everything. Mobile frameworks coming out on a roll one after another. Then their were boilerplate frameworks bringing all that together. PHP 5.3 frameworks and what not.

Facebook gave the PHP community a boost with HipHop for PHP in early 2010 by open sourcing the technology. This year they further improved on that by making the HipHop Virtual Machine (HHVM).
More and more cloud platforms (PaaS) are coming into market everyday. EngineYard, PHPFog, Orchestra, etc. Exciting times ahead.

Javascript is the boss:

In 2011 I saw JavaScript flourish in a way I have never seen before (but to be honest, I wasn’t watching before). Developers are open sourcing libraries of anything and everything. JavaScript MVC Frameworks also took the their position in the limelight. I could be very wrong in thinking that all thiss happened this year. But this post is about what “I” learnt this year.

Node.js really intrigues me. I haven’t yet got a chance to play with it enough but the thought of having the same language for server and client side excites me. Also tells me that I should really master JavaScript. Ignorable no more!

Don’t Mess With The Internet (SAY NO TO SOPA)

Although late in the year. The proposal of SOPA has led to a internet revolution against SOPA supporters. SOPA (Stop Online Piracy Act) basically gives legal rights to ISPs to block websites if copyright infringing content is found published on it.

Instead of accepting it like powerless peasants. We, the internet really stood up to it. (BTW: Embedding widgets for saying no to SOPA also exists for your site). The power of the internet can mainly be seen by following what happened with GoDaddy. Such a PR Disaster.

They were one of the companies that openly supported SOPA and lost more than 70000 domains in less than a week. That showed me the power we possess as free thinking unfiltered internet users.

Always. SAY NO TO SOPA and I will leave GoDaddy as soon as I finish researching other services.

Web technologies I learn’t in 2011

2011 added Symfony2 to my arsenal of web technologies. I love it and having a routing system in YML is so nice to look at. Beautiful! Along with Symfony2 I learnt theming Joomla, no biggie I know, but I never got a chance to get to know Joomla up close. Completing a project in it gave the new skill I can flaunt. Also made a custom WordPress Framework we use at Webmuch for making WordPress sites for our clients.

2011 in all has been a great learning experience. With that I say goodbye to 2011 and welcome 2012 with open arms to more learning, much web @ Webmuch.

Top 5 Joomla! Pitfalls To Avoid (Tips & Tricks)

Jojo — Mon, 19 Dec 2011 12:15:33 +0000

When I landed my 1st major project for Webmuch I had no idea how I was gonna complete it. All I knew was that it had a lot to do with managing and searching users. I, in the haze of getting the project in hand just blurted out: “This can be done in Joomla!”. At that point I had no idea how to make Joomla! work, how to theme it, what extensions would I need.

Even though I had committed to make the site with Joomla! I ended up spending a lot of time deciding which CMS could be the best for the job. Of course there were only 3 I was hanging between: WordPress, Joomla! and Drupal. My concern was which one of these is most extendable. I ended up using Joomla! because it seemed easier than jumping into Drupal and more complex than the simplicity of WordPress.

In the long run of things somehow Joomla! along with the Community Builder extension just worked out for me. In the process though, I made a lot of mistakes. With this article I hope I can save you a few pitfalls. According to me these are the top 5 joomla pitfalls to avoid:

1. Read Read Read

Coming from a WordPress background, when I started working with Joomla I figured “how hard could this be”. As it turns out pretty hard if you don’t read the docs at all. I managed to install Joomla very easily. After all I am a PHP developer. At this point I had no idea what the difference between module, component and plug-in was. I wasted 5 days with trial and error methods failing to do most of what I wanted, after which I decided: I should really read the docs.

2. Template Overrides

After theming for WordPress for years it was very different to figure out a new method of theming. Joomla! does not have different files for different blocks of the site. In fact the Joomla! theme has only 1 layout file: index.php.

I knew that it couldn’t all just been in one file. After reading up a lot I finally figured out how to use template overrides. This was a completely new concept for me. When I 1st figured it out I said “that’s so clever”. It is.

What you do is: Find the template of whatever module, component or plugin you wanna theme and copy that folder into HTML folder of your theme wrapped within a folder with the same name as the module, component or plugin. Whatever changes you do to this template to reflect on the website without making any changes to the original file.

3. Modules, Components and Plug-ins

Before starting your work make sure you understand the main differences between modules, components and plug-ins.

Component: Official Joomla! docs explain components as mini applications that can create and delete content of different types.

Modules: Module are the extension type that can show data in different forms. They mainly work with page rendering.

Plugin: Plug-ins are event based extensions. They perform certain task when a certain event occurs. It is basically used for triggered programming.

4. Menu System

In Joomla! the menu system can be extremely confusing.

A menu is made using the menus component, but is displayed using the module position on the template. Simple enough!

countModules( 'mainMenu' )) : ?>

Apart from this the most dynamic block of your site where all the blog posts are displayed, or a single article is displayed is also a menu. Yeah I know, it is confusing. Whichever menu you set as default will be displayed on the main block of the template.

Main block of the template:

5. Content Creation Kits

I didn’t need multiple types of content for my project. That said, it would’ve been nice to know about K2 Content Extension. Maybe I would’ve done a few things differently. Joomla’s default content creation is a simple one. K2 helps make it more complete with different types of content. Image galleries, Media, etc. Not a requirement for every Joomla site, but a great option to know about none the less.

Bonus Tip

Akeeba backup is your friend. Nuff Said!

I hope this article has been a helpful read. Share your own tips in comments below.

Thanks for reading.

Top 10 Must Follow Web Blogs + 6 Web News Repositories

Webmuch Archive — Sat, 25 Jul 2009 23:03:23 +0000

Well I thought it was about time I published my comeback article. Exams are over and a percentage of performance down-fall of WebMuch is something I don’t want Google Analytics to show me anymore. So I thought why not do WebMuch’s first round-up article, with a list of top 10 Web Design & Development Blogs that I follow on a daily basis, plus 6 top web community news websites where most web bloggers publish their article links. I guess this will be enough for your daily appetite for web knowledge & inspiration. Go Gobble.

Web Design & Development Blogs

1. Nettuts

2. Smashing Magazine

3. Instant Shift

4. CSS-Tricks

5. Noupe

6. Smashing Apps

7. David Walsh Blog

8. Speckyboy

9. Six Revisions

10. Web Designer Depot

Web News Repositories

For a little self promotion: there’s always Webmuch you visit.

Image Flip Using jQuery

Webmuch Archive — Wed, 17 Jun 2009 00:11:42 +0000

Alright, first of all this is not a real image flip but sort of an illusion, the image does not flip itself in 3D since jQuery does not provide us with an image rotation or a distort feature for HTML elements. I know their are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery.

View Demo 1 View Demo 2 Download Source Code

Preview:

Note: Image flip with reflection is for demo purposes only, it’s done using the PHP GD Library and it’s source files are also included in the source code, so meddle with them if you like.

HTML Code:


Image Flip Illusion Using jQuery
 
 


CSS Code:
body{
	background-color:#000;
}
h1{
	color:#FFFFFF;
	font-family:Arial;
	font-size:24px;
	font-weight:bold;
}
#container{
	width:400px;
	margin:0px auto;
	height:380px;
	margin-top:50px}
#image1{
	position:absolute;
	cursor:pointer;
	width:300px;
	height:190px;
}
#image2{
	display:none;
	position:absolute;
	cursor:pointer;
}

As you can see in the above code, I’ve placed the two images in a division and given them absolute positioning to assign their positions in the division.
To achieve the Horizontal flip we are basically reducing the width of the first image to 0 pixels, increasing the left side margin from zero to half it’s width and as soon as we finish that, Increase the width of the second image from zero to it’s actual width and do the opposite for left side margin what we did for the first image i.e reduce it from half the width of the image to zero.
This process takes place when you click on the first image (#image1) and the same process also takes place when you click on second image (#image2) except for the obvious shuffle in their ids.
Just look at the jQuery code below and you will have a better idea of what’s happening:
jQuery:
$(document).ready(function(){
var margin =$("#image1").width()/2;
var width=$("#image1").width();
var height=$("#image1").height();

$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#reflection2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px'});

	$("#image1").click(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

	$("#image2").click(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

});

If you want to perform a Vertical flip the jQuery code for that too is included in the source code.
Feel free to leave comments if you appreciate the tutorial or if you have any queries. You can also criticize the work but don’t be rude.
Thanks for Reading!

Animated Navigation Bar Using jQuery

Webmuch Archive — Thu, 04 Jun 2009 05:37:58 +0000

View Demo Download Source Code

In this tutorial we will be making a navigation bar with animated background. To create this effect we will be using HTML, CSS and jQuery. I am assuming that the readers are well versed with CSS & HTML and have the basic understanding of jQuery.

Let’s jump right into it then:

HTML Code:

Home
News
Blog
Pictures
Videos
Gallery
About
Contact

CSS Code:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body{
background-color:#1f1f1f;
}
.container{
	width:960px;
	margin:0px auto;
	color:#FFFFFF;
	font-family:Arial,sans-serif;
	font-size:20px;
	font-weight:bold;
}
#navbar1{
	float:left;
	width:960px;
	height:36px;
	font-size:14px;
	margin:20px 0 0 0;
	background:url(images/navbar_bg.png);
}
#navbar1 ul{
	float:left;
	width:585px;
	height:36px;
	margin-left:188px;
	color:#000000;
}
#navbar1 ul{
	background: url(images/anim_3.png) no-repeat;
	background-position:1px 4px;
}
#navbar1 ul li{
	float:left;
	width:72px;
	margin:3px 0 0 0;
	height:22px;
	display: inline;
	text-align:center;
	padding:7px 0 0 0;
	border-left:1px solid #1f1f1f;
	cursor:pointer;
}

This technique is only effective when using a predefined width for each button or list item as shown in the above image, this can also be implemented on navigation bars using dynamic widths, but you might have to change the jQuery and the image sprite quite a bit to achieve any kind of consistency in your design. Well to give you a basic explanation as to how we will animate the navigation bar from here on in, we will take a background image equal to the size of the list item, which, on mouse-over positions itself to the left of each respective list item. So, as you can see in my HTML code I have named(id) my unordered list as ‘sprite’ with a backround image. I have also named(id) my list items b0,b1,b2,b3….b7, depending on the number of list items you wish to have in your navigation bar. I’ll explain why we are doing this in a bit, after you read through the jQuery code.

jQuery Code:

$(document).ready(function(){
	var selected=0; // Default background position
	var position=0;

	$("#sprite").css({backgroundPosition:''+selected+'px 4px'});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
	position=$(this).attr("id").slice(1,2)*($(this).outerWidth());
	/*width of your list item*/
	$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:200});
	});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
	$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:200});
	});
});

Step By Step Read Through:

In the first line, we define the default background position of the background image of #sprite (even though, we’ve already mentioned the default background position in the CSS file, we still have to declare the default background position in jQuery, because for some reason, Internet Explorer shows an error after repeated mouse-over states).
Now, on mouse-over of any of the list items, we simply calculate the background position of the image in the background of #sprite and using the animate method of jQuery we move it to its destined location. For example: On mouse-over of b0, in my case I moved it 0 * 73(width of my button) i.e. 0 pixels from the left of #sprite. On mouse-over of b1, I moved it 1 * 73 i.e. 73 pixels from the left of #sprite. On mouse-over of b2, I moved it 2 * 73 i.e. 146 pixels from the left of #sprite, so on and so forth. That is the very reason I named (id) my list items b0, b1, b2…, so that I can slice out the numerical values from it using slice(1,2).
Using the sliced numerical values we calculate the position of the background image, finally animate it and avoid a list of if else statements for each list item.
On mouse-out of any of the list items the background image comes back to its original position i.e. 0px (var selected;) from the left and 4px from the top.
Now, if you got any of the stuff I’ve explained there is one question popping in your head that do I have to manually give value to the variable “selected” for every page , well to avoid this you just have to edit the jQuery from the top to the one below.

$(document).ready(function(){
	var check;
	var i;
	for(i=0;i		if($(".a"+i+"").attr("id")){
		check=$(".a"+i+"").attr("id").slice(1,2);
		}
	}

	var selected=check*($("#b0").outerWidth());
	var position;

	$("#sprite").css({backgroundPosition:''+selected+'px 4px'});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
	position=$(this).attr("id").slice(1,2)*($("#b0").outerWidth());/*width of your list item*/
	$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:300});
	});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
	$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:300});
	});
});

Now we can easily name the class a0 or a1 or a2 or a4 of our list item (active list item) in our HTML to set the default background position of our background in #sprite and the script basically looks for the class with prefix “a” then slices out the next element i.e. 0 or 1 or 2 or 3, etc and multiplies it to the width of the element and gives it a default position from the left.

Feel free to leave comments if you appreciate the tutorial or if you have any problems implementing it.

Thanks for reading.

How & why you should use Google CDN

Webmuch Archive — Sat, 30 May 2009 20:17:37 +0000

What is Google’s CDN?

Google CDN stands for Google Content Distribution Network. It provides a loading architecture for the most popular, open source JavaScript libraries.

Why should I use Google’s CDN links?

Most of the websites I see, still host their JavaScript Library on their own server (Most, not all). Actually never have I ever seen any Web Development Blog hosting the library on their own server. They always use Google CDN, which is great because it has a number of advantages:

Google’s Content Distribution Network has libraries on their various servers across the world and if you use their CDN link, when a user’s browser resolves the URL, their browser will automatically download the file from the closest available server, which will be a much faster download than if you force a user to download the file from your host server in whichever country your website is hosted.
Google’s Content Distribution Network will save you a great deal of bandwidth if you have large traffic on your website and a limited bandwidth with your host.
There is a good chance that the Google hosted version of that library is already cached on the user’s browser cache, as lot of big websites and portals use Google’s CDN links including Google itself and Google’s servers instruct browsers to cache the file for one year if there are quite a few requests for the same hosted file.

How to use Google CDN?

Google’s CDN provides most of the popular, open source JavaScript Libraries with two ways of using each of them via the direct path in the

The Google AJAX Libraries API provides a simple and powerful google.load() method which accepts two arguments, the first argument to google.load is the name of a library. The second argument is the version of the library:

But to use this API, there is a different approach for the ready functions of all the libraries. For example, in the above code, we use google.setOnLoadCallback(function(){ }); instead of jQuery’s ready function. In-fact we use google.setOnLoadCallback(function(){ }); instead of all different library’s ready functions. This can be seen as a drawback or a good feature; I see it as a good feature as it gives me a single ready function for all libraries.

The second method to use Google’s CDN links is by the direct paths of the libraries in the

In the above code, we started a count from 1 as we will need to increase the value of background position with each click. But first we set the background position of the division with the id of “slideshow” to zeros. This is a good thing to do as we live in a world where Internet Explorer still survives. Then when the anchor (a.next) is clicked we initiate a function where we catch the count multiplied by 300 in a variable (x_position) and a minus sign for animating leftwards and then we animate the background-position with that value. Finally we increase the count by 1 for the next click, therefore, the first time we click the value of x_position is -300, the second time we click, it is -600 and so on.

Note: make sure to comment out or remove the console.log statement as it creates problems in all the browsers except Firefox.

Thanks for reading.

Image Stripe Using PHP GD Library

Webmuch Archive — Sat, 09 May 2009 10:01:50 +0000

What we are going to do today is quite simple. We will read a specific directory for all available images in it and merge them into a single image. Sounds simple, well it is.

Download Source Code

What We Need:

Create a project main folder and create two more folders in it, name them: “css” and “slides” respectively.
In the project main folder create two files, name them: “index.php” and “createImage.php” respectively.
In the slides folder put in some jpeg images with same width and height. In my case I used 300px width and 225px height.

index.php:






PHP GD Library Image Stripe











	PHP Image Stripe

In the above code the only new thing to you should be the source(src attribute) of the image tag, which is the link of our “createImage.php” file, this is because the file itself when executed outputs an image file. Hope that makes sense, it sure will after you read the excessively documented code of “createImage.php” below.

createImage.php:

Note: Remember, the height and width of the JPEG’s in the slides folder must be the same.
Note: imagecreatetruecolor() method does not support GIF images.

Links:

Thanks for reading!

Lightbox Effect Maintenance Page

Webmuch Archive — Sun, 19 Apr 2009 20:50:50 +0000

Preview:

Download Source Code

OK! Before starting let me warn you that this technique is totally based on HTML & CSS, so make sure you take care of all this on the server end as-well, which basically means that if the page in the background has a form, then it shouldn’t be active & things like that. So moving on: I have taken an old template I was working on to show the Lightbox overlay effect on it.

What We Need:

Make a 1px * 1px image in Photoshop and fill a new layer with black and reduce it’s opacity by 50% then hide the background layer and save the transparent image as a 24bit PNG in the images directory name it overlay.png
Make another image around 400px wide and make something you want to display on a page under maintenance and save it in the images directory name it maintain.png

Moving on: Once you have the page to be in the background open it in a text editor of your choice; As the body tag opens, place this code(even before the container).

It is the hierarchy we need to understand here. We want to display a dark transparent overlay on the whole page therefore we place the division with an id of overlay on the top and then we want to display a maintenance image on top of it and so we place the img tag with that image even on top of the overlay division.

Now make a new stylesheet in your CSS directory, call it technique.css, include it on the page and then place this code in it. (You can place this code in your master stylesheet as well).

#overlay{
width:100%;
height:1100px; /*about the height of the background page*/
background:url('../images/overlay.png') repeat; /*to include & repeat the image on the whole page*/
position:absolute; /*to place it anywhere on the page*/
top:0;/*start from the top*/
left:0;/*and start from the left*/
z-index:90; /*tells the browser that it should be displayed above the items with a “z-index” value less than 90*/
}
#maintain{
position:absolute;
left:50%; /*so the image starts after half of the page from the left */
top:50%; /*so the image starts after half of the page from the top */
margin: -140px 0 0 -200px; /*we bring up the image by half it’s height and bring it left by half it’s width*/
/*now the image should be in the center of the page.*/
z-index:100; /*tells the browser that it should be displayed above the items with a “z-index” value less than 100*/
}

IE6:

To make the transparent background image render transparent in IE6, download the DD_belatedPNG JavaScript. Place the .js file in the js directory of the page and if the IE browser version is less than 7 then include it in our page right before ending the body tag, then open another script tag and run the fix method, pass in the ID of the overlay division in it. To know more about the DD_belatedPNG read it’s documentation.

Thanks for reading!