2010 June | Programmers.biz

Archive for June, 2010

5 Simple Tips for Using Your Joomla Site

June 30th, 2010

There are many webmasters that need assistance with their Joomla site. Most problems webmasters have to deal with will be avoided by following these 5 simple guidelines for using a Joomla site:

1…

Posted in Programming Articles | Comments (0)

The Right Web Development Company

June 30th, 2010

There are a number of reasons why web development has become an important point to consider for most businesses. A web development company can offer your business the strength it requires to be more stable, easier to manage, and also grow steadily with time.

Posted in Programming Articles | Comments (0)

Ask Nettuts #1: Callbacks, LESS, and Floats

June 30th, 2010

Today marks the first entry in a new “Ask Nettuts” series. I’m often emailed concerning various web development related questions. Though some are more specific than others, many of these, I’m sure, would appeal to all of our readers. As such, each week or so, we’ll post a new batch of question and answers from the community, in both article and video form, for your convenience.

This week, we discuss JavaScript callback functions, a LESS compiler, and those tricky CSS floats.

Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?

1. JavaScript Callback Functions?

“Hi Nettuts: is there an easy way to create callback functions with regular JavaScript, similar to what we can do with jQuery?”

Of course. This is any easy one. For example, let’s create a generic function.

function doSomething(name) {
   alert('Hello, ' + name);
}

doSomething("John and Kate Plus 8");

When called, as expected, the browser will alert “Hello, John and Kate Plus 8.” Now, if we want to pass a callback function as well, as the second parameter of the “doSomething” function, we can simply pass an anonymous function.

function doSomething(name, cb) {
   alert('Hello, ' + name);
}

doSomething("John and Kate Plus 8", function() {
   alert('this callback function will only run after doSomething has');
});

Notice how we’ve added a second argument to the doSomething() function: “cb.” You’re free to label this how you wish, though it’s common to keep it as “cb,” which refers to “callback.” Now, that anonymous function will be represented via this variable.

The last step is to simply call it at the bottom of the function.

function doSomething(name, cb) {
   alert('Hello, ' + name);
  cb(); // now run the callback function
}

doSomething("John and Kate Plus 8", function() {
   alert('this callback function will only run after doSomething has');
});

2. LESS Compiler for Coda?

Dear Nettuts: I loved your LESS.js video, but don’t want to use it for production. Is there an app for Coda that will automatically compile my code instead?

Sure thing. The best solution I was able to find is called LESS.app.

After you download it (free), you simply drag your project folder into the app, which instructs it to watch all .LESS files. At this point, you can continue working on your project, per usual. Every time you save, the compiler will run, which generates/updates an automatically created style.css file. When you’re finished developing your app, you only need to change your stylesheet references from style.less to style.css, accordingly. Easy! Now there’s no reason not to take advantage of LESS — unless you’re using a different solution, like Sass.

3. Where’s my Background?

“Hey Nettuts: So I have a navigation menu with a list of horizontal links; but when I set a background color to the menu, nothing shows up? How come? Here’s my code:”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Menu Problem</title>
	<style type="text/css">
		#nav {
			background: black; /* why doesn't this show up? */
		}

		#nav li {
			float: left;
			padding-right: 10px;
			list-style: none;
		}
	</style>	

</head>

<body>
    <ul id="nav">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</body>
</html>

Okay, this is a common confusion. The reason why the background of “black” isn’t showing up is because you’ve floated all the list items to the left. When you do, it causes the parent element (#nav) to collapse. There are two solutions:

1. Set “overflow: hidden;”

“Overflow:hidden” is a nifty little trick that was only discovered in the last several years, around 2005. By applying a value of “hidden” or “auto” to the “overflow” property, it seems to remind the parent element that it’s supposed to be wrapping its children! The logic is a bit odd, I admit; however, none the less, it works.

#nav {
	background: black;
	overflow: hidden; /* ta da! */
}

2. Clearfix

Setting “overflow” works 80% of the time, though, there might be times when we need to overlap the boundaries of the parent element, in which case “overflow: hidden;” will chop the image/element off. The second solution is to use the popular “clearfix” method. You’ll use this one often, so I recommend that you go ahead and save the code to your favorite snippet management tool, like TextExpander, Texter, or Snippets.

First, return to your mark-up, and apply a class of “clearfix” to the parent element.

<ul id="nav" class="clearfix">

Next, let’s add the appropriate styling for this class. The general functionality is that we use the “after” psuedo class on the parent element to apply content, and then subsequently clear that content — which essentially mimics adding <div style=”clear:both;”></div> to the bottom of your mark-up. However, this method is smarter, and doesn’t ruin our beautiful, semantic mark-up.

.clearfix {
	*zoom: 1; /* triggers has haslayout in older versions of iE
}
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	visibility: hidden;
	font-size: 0;
	height: 0;
}

“hasLayout is important because it forces the element to have a rectangular shape.”

As you can see, we use “:after” to add a blank space after all of the floated content. We then set the display to block, and clear it, which forces the parent to wrap the floated children. Lastly, we set some general visibility, font-size, and height rules to ensure that this code doesn’t affect our layout in some browsers.

Worth noting is the “*zoom: 1″ declaration at the top. The “zoom” property allows us to trigger IE’s proprietary “hasLayout” property. hasLayout is important because it forces the element to have a rectangular shape. This means that the content of the element cannot flow around other boxes, which will often cause major layout issues with your website. When Microsoft’s proprietary property “hasLayout” is equal to true, the element “has layout.” Luckily, we can trigger this by adding specific properties to our selectors, including “zoom.” Other hasLayout triggers, to name only a handful, are:

float: left/right
display: inline-block
position: absolute
height: any value (not auto)

Conclusion

That’ll do it for this flagship “Ask Nettuts” entry. If you have a “not-too-complicated” web development question for us, you can:

Email net@tutsplus.com, and write “Ask Nettuts” as the subject of the email.
Tweet us @nettuts, and hash “#askNettuts”.
Leave a comment under any “Ask Nettuts” posting with your new question.

Thanks for reading and watching!

Posted in Programming | Comments (0)

Migration and Porting

June 28th, 2010

Migration and Porting

Business demands and technology challenges sometimes create the need for migration of applications or databases from one environment to another, either to im…

Posted in Programming Articles | Comments (0)

Flash - For Interactive and Entertaining Websites

June 26th, 2010

Flash is a multimedia platform which is used to add animations and videos to websites. It also makes the web pages highly interactive. Flash software is used to develop advertisement and games. Web…

Posted in Programming Articles | Comments (0)

Five Ways to Make Any Usability Test More Credible

June 26th, 2010

Usability testing is an important part of successful websites and applications. These five tips will help get your insights more credibility by making the usability issues quantifiable and actionable. The tips work for sample sizes from 2 to 2000.

Posted in Programming Articles | Comments (0)

How to Build a Beautiful Calendar Widget: New Premium Tutorial

June 26th, 2010

In today’s premium tutorial and screencast, I’m going to show you how to build a slick calendar widget. We’ll using CSS3 to give it a shiny look and feel, and then add some pretty neat functionality with JavaScript. Become a Premium member today to see this and many other tutorials!

Posted in Programming | Comments (0)

Web Development: The India Advantage is Waiting for You

June 24th, 2010

Web development has now turned into a very lucrative IT segment wherein many established and emerging professional services agencies have plunged into. Just by walking down the streets of your city…

Posted in Programming Articles | Comments (0)

Revealed! The Secrets of Creating a Truly Bad Website

June 24th, 2010

This is a tongue in the cheek look at what should not be done if you would like your website to survive in the big bad cyber world so to speak; lets look at how things can be done the wrong way so that you can avoid these traps and create a site that does not irritate our visitors. On the contrary, if you have a sadistic streak in you and if you have been desperately trying to rattle the nerve of your visitors or bore them into running for dear life away from your site these tips may prove quite handy.

Posted in Programming Articles | Comments (0)

Bringing the Magazine to the Web

June 24th, 2010

The rise of blogs on the web has brought a quick and easy way for anyone to publish their thoughts online without having to get down and dirty with HTML. Just write your content, hit ‘Publish,’ and your thoughts are instantly available for the masses to read.

For all the good that blogs have done, they’ve made the internet look predictable when compared to articles printed in a magazine which look completely unique, each with their own art style and layout. As Greg Storey pointed out in a blog post from 2006, “before there were blogs we had websites. Beautiful, random websites that felt more like a zine – one page looking nothing like the one before or after it”.

Most larger blogs may have a unique theme, but each blog post looks the same. Most posts we read everyday share the same common layout:

In breaking this trend, several bloggers have begun giving each post a unique layout, colour scheme and art style. Their posts look more akin to a magazine article than the typical blog post. The posts stand out from the crowd, like a zebra amongst a field of horses.

“Before there were blogs we had websites. Beautiful, random websites that felt more like a zine – one page looking nothing like the one before or after it” – Greg Storey

Below is a round-up of forty beautiful looking blog posts from fourteen sites which break out of the mentality that every page on a website should look the same.