Because its quick

I am jumping around in topics lately from CSS, to jQuery, to WordPress, to blogging, and now onto Photoshop. This is good though. Something different every day. Yesterday I had the pleasure of helping out someone who wants to learn how to create a websites. After the the short lesson I gave him, he said “Wow…I have a lot to learn.” To which I replied with a simple yes. He had coded a page, and then had me look at it. At which point I broke him of some nasty habits. This bit of teaching had me thinking though. What are some things I see some people do that makes me shake my head, when I know there is an easier way.

The first thing that popped into my brain was watching someone use the eraser tool in Photoshop to take away the background around an image of a person. That is just plain crazy. But there was a second item I thought about just after that nonsense. Slicing up a Photoshop PSD file to be used as a web page. I know people who do things differently, like using guides and then cropping the images necessary. That takes a while, even though I know one guy who is pretty damn quick at it. For me though, slicing is the way to go. It’s quick, easy, and if you need to make a change, there is no cropping involved – just a re-save.

Let’s cut some stuff up!

First, let’s start out with a template I am building for a personal project of mine. You can see what it will look like with some content thrown in. Standard stuff…logo, header, nav, left column for content, sidebar for some links, and a footer.

Before you do any slicing though, you need to hide all the content crap, because you don’t want that being part of the image. After you have hidden all that stuff, you will want to save the file but with a different name, or like I do and put _sliced at the end of it. Once you have done all that, you need to grab the slice tool, which you can see highlighted in the image to the right (looks like an exacto knife). If you don’t see it in your tool bar, it is hidden behind the crop tool.

Now for the actual slicing. Imagine you took a pair of scissors and cut the sections out that you needed. Piece of cake! Click on the slice tool, and start dragging across the psd file. In the image below, I started from the top left corner, and dragged down to the beginning of the the navigation section on the far right. I left go of the mouse button, clicked immediately, and dragged to the left side to the top of the content section. Then I repeated doing that until I had what you see below (in order to save this as a single image this does not show the actual slice lines- just red lines where they would be).

That’s great…but what do I do with it now?

I’ll explain the numbers in a bit, and then I’ll show you what the html would look like. But first, you have to save it for the web. I am going to assume you at least know how to do that, because it would take a silly amount of time to explain. With a sliced image, when you Save for Web, you select the type you want, jpg in this case, and then browse to where your images folder is, but don’t select it. You don’t actually want to be in the images folder otherwise it will create another images folder within it. When you save a sliced image like this, it is going to save multiple images. You then choose a name that you want to save them as (I usually choose a name like ‘index’ because I can remember what image goes where that way). This is what makes slicing so fast and easy.

The beauty is, if you have to go back and make a change to the psd file, you go and do it, and resave as the name you chose. In my example here, I would have 6 images after I saved – index_01.jpg, index_02.jpg…all the way to 06.

The HTML

Before I explain the numbers, lets take a look at what the HTML might look like:

<div id="container">
<div id="header">
<div id="logo"><!--logo html goes here --></div>
<h1>Your Heading Goes Here</h1>
</div>
<div id="navigation"><!--nav html goes here --></div>
<div id="contentRepeat">
<div id="contentBottom">
<div id="contentTop">
<!-- content html goes here - main content, and sidebar divs -->
</div>
</div>
</div>
<div id="footer"><!--footer html goes here --></div>
</div>

NOW let’s talk about the numbers

So I now have 6 images and the basic HTML. Now what? Now the fun part. All of the CSS, which I won’t go through, but give you the gist of it. It would be a very long post if I types all that out, and the point of this isn’t the actual CSS, but how to do the slicing, and what to do with it.

Your basic CSS for the divs would be:

• header: background image using #1 (index_01.jpg),and no-repeat
• navigation: background image using #2(index_02.jpg), and no-repeat
• contentRpeat: background image using #4 (index_04.jpg), and repeat-y
• contentBottom: background image using #5 (index_05.jpg), no-repeat and a position of left bottom
• contentTop: background image using #3 (index_03.jpg), no-repeat and a position of left top, with a min height value of what ever the height is of index_03.jpg

The #6 image (index_06) is never used since it is just a solid color, so you can toss it in the trash.

Any final words?

Slices are awesome in that it is easy to make a change to the PSD file, and re-save, without having to re-crop everything. You can cut the image up into as many pieces as you want, just be sure to zoom in and double check all of your slice lines are touching…not overlapping or too short by a pixel. Otherwise you will end up with an additional image and things will look messed up when you lay it out. Once you get the hang of slicing, going from Photoshop to web page becomes a breeze.

Do you use slicing already? Or are you a guide and crop type person? Maybe you have a completely other method I am not familiar with? Comment and let me know!

Coupon Code: webmachine

Yes I am freakin’ excited. Please check out my article at onextrapixel.com, called ‘The Real World Development vs The Optimum Way‘ and let me know what you think! There or here, I don’t care!

Oh ya, and I hit 200 subscribers!

Border-radius on IE? That is just crazy!

It’s funny how many things from my job come up as posts. Well, I guess not funny, because I end up working on things that I am not familiar with and have to fix. Which is the case tonight. I’m not sure if you have read any articles, but there are plenty, about getting the CSS3 property border-radius to work in IE. It is actually rather easy, so let’s get to it, and I’ll show you how!
Actually, I’ll tell you how. And then I’ll tell you some of the troubles I ran into.

Wait, that’s it?

So getting your rounded corners is pretty damn easy. There are three things you have to do:

1) Go here and download the htc file.
2) Place the downloaded file in your images folder
3) In your CSS file, on the style that you want the rounded corners you add something like this:

.roundedClass {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(images/border-radius.htc);
}

This being the important part:

behavior:url(images/border-radius.htc);

Where ever you are using the border-radius properties, you want the behavior added as well. Note that this does not work at all on anything in a form. So inputs, buttons, whatever…if it is in a form, I could not get this damn thing to work. Also, make the path in the behavior line relative to the document NOT the CSS file. Got it? If for instance, the .htc file is in the images folder and you are dealing with a root level document, then it would be images/border-radius.htc. If you have any questions about this, post a question in the comments section.

IE8 is not very nice – pay attention here!

I learned something while doing this. IE8.0.6 and IE8.0.76 handle this differently. First, the element with this property on it should be positioned to relative. If you have text on top of it, then that will have to be wrapped in something and also positioned relative. Example:

<div class="roundedClass"><p class="textClass">This is the text that goes on top of the rounded corners div</p></div>

If you did this:

<div class="roundedClass">This is the text that goes on top of the rounded corners div</div>

Then IE8.0.76 doesn’t play nice. IE8.06 however will work fine. I have NO idea why, but that is how it is.

To conclude

Have two wrappers (elements)…both positioned relative, the outer has the behavior and border-radius properties. Piece of cake. This works in IE6-8, and once I figured out the two wrappers and position relative thing, everything worked beautifully. Again, if you are still confused, ask away!

I will leave you with a quick tip. If you have multiple tabs open in IE8, press ctrl+q. It will show all the tabs you have open in one window, which you can then pick the one you want to view. Works kind of like Apple’s Expose. I wish I had known that a while back. It is actually a feature that they should have been promoting more. Especially considering that FF4 will have this feature now as well.

Coupon Code: webmachine

$('#wrapper').detach('ul');

Brilliant idea…I wish I thought of it

Today, while commenting on the blog Do It By Hand, I clicked on another commenter’s link. It was mainly out of curiosity, but what it brought me to, and I can only believe that it is the actual commenter’s upcoming business, made my jaw drop. What could be so damn surprising that you were actually stunned by seeing it, you ask? Take a look at this, and then think for a minute before reading on.

If you build it, they will come

Right now you are probably thinking something along the lines of what I was. That is incredibly stupid. Who would pay a company to have people go to your blog and comment on it? Think really hard about that, because I have experience in seeing people pay for some incredibly stupid stuff, like setting up social media accounts. Why would they pay for that? They don’t have time, they don’t understand how or what it really is but they know they want it, or maybe they are not internet savy enough. Who knows, but the point is people do.

Now think about this service that CommentFlock is offering. Say you are a new blogger, and you don’t have the patience it takes to build a readership following. You want people to come to your blog and think you are writing something terribly important. “This blog must be awesome, look at all the comments each post has!” That is what you would want anyone visiting your blog to think. How do you do this quickly? You pay these guys, who pays other people to go and comment on your blog. They say on that page that up to 20 different commenters will come to your blog and post something up, and interact with the conversation taking place with the ‘real’ visitors.

As much as I hate the idea of what this guy/company is going to be doing, I see the potential because I know people will pay for it. All they need to think is that it will drive people to their site, and they will fork over the cash. It’s brilliant. Of course this made me think of something else.

Could there be a Social Media crash?

All of the above was just to get you thinking about what I’m going to write about next. Could this kind of thing lead to a Social Media crash? Not as drastic as the .com, but still influential. Think of all the social media sites that keep popping up out of no where. I swear I read about a new one every day. Then think of all the other sites that might try to cash in on the success of them. Advertisers, CommentFlock type companies, whatever. Think of all the tweets you get that are just retweets of other tweets. Some new article comes out on one of the major design/developer blogs, I get about 5 tweets from different people about it, and I am not following more than like 20 people. Then you go to a blog that is crammed full of robot like comments sent from CommentFlock. More companies start doing the same thing, and soon you might have robot comments actually talking to other non-real comments. Soon, you can’t tell what comment is pure crap, and which is real.

I know you are thinking that is all far fectched, but all the automatic stuff being sent by twitter, be it advertising, retweets, or randomly generated stuff, then these fluff comments, and who the hell knows what else could be coming, will all start to add up to a TON of useless info. I am beginning to wonder if there is a threshold for the amount of crap data being sent by all of these different social media sites that people are willing to take.

Just asking you to think about it

My point isn’t really about the comment company. It’s about all the useless stuff being sent through it. I love twitter, but I wish I could filter out tweets that are duplicates. I love reading blog comments (I like getting them too!). What if though, companies start taking advantage of social media in a way that it becomes so annoying. Will people drop off those services because they are getting more crap than good out of it? What about the companies that rely on the actual social media services themselves to make money if people did say screw it? Obviously there is no danger right now of something like that happening, but what about 5 years down the road when social media isn’t so new?

Just something I pondered today. Thoughts?

Coupon Code: webmachine

Set out to learn something…and I did. Now its your turn

I wanted to create images that I could use for each post showing that it belonged to a certain type of category. You look at the image, and without reading the title, you would say “Oh, this post relates to Wordpress.” Same with jQuery, Blogging in general, or whatever category I come up with. Something my readers would come to recognize over time. I also wanted to be able to do it without having to stick it in manually in the post like I do with the other images I stick in articles. If you are on the home page you will already see this. That is the one I came up with for articles relating to Wordpress.

Now, I can’t take credit for what I am about to show you. I learned how to do this fromJustin Tadlock’s blog, but I wanted to spread the love. This was the best tutorial I found on the subject.

Just 10 Easy Steps!

Here is my quick and dirty paraphrasing of it. Meaning, do EXACTLY AS IT SAYS BELOW.

1) Create awesome post.
2) Scroll down in post editor, under Custom Fields, create a Key named “Thumbnail.”
3) The Value should be the url to the image: (Example: wp-content/themes/yourThemeName/images/imageName.jpg)

NOTE: It took me a while to understand where it was pulling the images from – images folder in your theme. I was trying to get it to load from somewhere outside the theme. I’m sure you can, but this was easier.

4) Click Add Custom Field. Ya! Part 1 is done.
5) Add another, by clicking Enter New. This time make the Key be Thumbnail Class
6) Make the Value thumbnail-class
7) Open the template you want the image to show on (index.php, single.php, category.php, archive.php, etc.)
8- Find this code:

if(have_posts()) : while(have_posts()) : the_post();

Post the following code directly AFTER it:

$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);
$thumb_class = get_post_meta($post->ID, 'Thumbnail Class', $single = true);
$thumb_alt = get_post_meta($post->ID, 'Thumbnail Alt', $single = true);

9) Find this code:

<?php the_content();  ?>
//OR THIS CODE, EITHER ONE
<?php the_excerpt();  ?>

And add this code BEFORE it:

<?php // if there's a thumbnail
if($thumb !== '') { ?>
	<img src="<?php echo $thumb; ?>"
	class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>"
	alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>"
	/>
<?php } // end if statement
// if there's not a thumbnail
else { echo ''; } ?>

NOTE ADDED 7/30/10: If you read this post previously, I wrote a note here originally that was pretty much me being stupid.

10) Open your CSS file and add this class:

.thumbnail-class {
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 15px 0 0;
	}

Done. Of course, you still have to create the images though. Note the size of the image is actually controlled through the CSS. Meaning, even if the image you created is 300 by 300, whatever you put in the css is what it will display at. You can also call the class, and Key names whatever you wish, just be sure to change them in the php code as well.

For a more detailed explanation, you will want to read the article I linked to above. I searched for quite a while before I found his tutorial and it rocks. I just had to read more to accomplish it. He also gives hints on what else you can do with it. Very good read though.

Compass’ inline image function

I am not recommending you do this, I am just showing you how. Let’s say you have a bunch of sprites, they are all small, and you don’t want the extra http requests on your website. Pretty understandable, which is why I use minify on my main site for the css and javascript files. Compass has a built in function that lets you actually embed an image into the CSS file. “Holy HELL! That’s insane!” That is what your head is screaming at the screen, right? That is what I said too when I saw it. I wish I could remember where, but I forgot to paste the url in my Evernote…just the code.

In your .sass file (yes Sass…I highly recommend it),you make a style like so:

.mySprite
  background-image: inline-image("images/mySprite.png") /* ! */
  height: 35px
  width: 35px

Compass then embeds the image into the CSS file. You can obviously think ahead on why this could be bad if you do this a lot. You are adding weight to the actual CSS file. Which of course this is why you would only do it with some small file size sprites. I can see this being good for small sites, but probably not anything of substantial size. Just use your head before you actually use this.

NOTE ABOUT THIS TRICK: IE6 and 7 do NOT support this. You will have to include the style the normal way for those browsers, if you are supporting them.

Last thoughts

Hope you learned something! I know I did today, which is what I strive for every day. If you are using Custom Fields for WordPress, I would love to know about how you are using them, and the code for doing it! Share the love people!

Coupon Code: webmachine

$('.myClass').after('<p>Even more content to read!</p>');

It’s not just publish and you’re done

Tonight I thought I would take you through what it actually takes to blog. I mean the day to day crap. If you think it’s just write a post, publish and done, then you are seriously mistaken. There is a ton of other things involved that go on to keep a blog going. I’m proud of what I have accomplished so far, but there is a lot that goes on behind the scenes here at The Web Machine, and I’m sure almost any other blog that has effort behind it. Besides the writing, there is the constant tinkering, rearranging, testing, security, moderating…the list goes on and on.

So if you are thinking about starting your own web development blog, read on, and then see if you are up to it.

Beware the spam

The Web Machine is powered by WordPress, a great blogging/CMS platform. I use it for both, but for now let’s worry about the blogging side of it. This is not the most popular blog by far, but I still get spammed with an amazing amount of crap. From junk comments trying to get linked here, to flat out spam filled with links to who knows what. Luckily, Akismet and WP Spam Free takes care of the latter, but the other I actually see. Stuff like “I liked your post. I thought about writing something similar, but it seems you were faster.”

That kind of stuff is very common, and they are all worded differently, but with enough thought behind it that you might actually think it was a genuine comment. You can tell its garbage by looking at the link they filled in. So every night, i get to read through about 5-10 of those to make sure some real comment didn’t get accidentally tagged as spam, and then delete them. Even if you are just starting out, you are going to have to go through this. If you are not moderating and letting anything through, then you will have a TON of posted comments linking out to some dysfunctional product you don’t want to advertise.

Security

Getting hacked is one of my greatest fears. If you think it isn’t a serious problem, go read about the fun Chris Coyier has been having at his Digging Into WordPress blog. He has been nicely hacked a couple times, the link above goes to his article about one I hadn’t heard about, but he also got the Pharma hack. That one is a pain in the ass because you won’t know it unless you do a Google search and you see the nice pharmaceutical stuff in the results. Not fun to get rid of. My point? You have to do constant reading on how to protect your blog, constantly making sure you are doing what you can to keep your security nice and tight.

Ok…I lied. The actual being hacked isn’t my greatest fear. Its getting hacked and possibly losing all of my content. Which is why I back my database up constantly. You don’t want to see all of your hard work evaporated in an instant. So, add that step into your schedule.

Constant updating and then more…well…stuff

I change The Web Machine almost every other night, be it style changes, moving things around, adding things…it NEVER ends. Just tonight I changed my social icons to the right, because I didn’t like the ones I had. Then I added the number of feed subscribers bit so I don’t have to log in just to see if there were more. What else…oh ya, found a style conflict I had to take care of, ditched the archives, changed the font size limit on the tag cloud (which I’m not sure anyone uses, so that might eventually go), and added onextrapixel.com to the blog roll.

Just when you think your blog is perfect, you will find something else to add or change. You are dead wrong if you think there is ever a state of being done with the design of a blog.

But what about the writing?

Ohhhh ya, that. Obviously that is the most time consuming. Last night’s article? I put a lot of effort into that. 7 Google searches, 2 books to reference, building the demo, writing the code, then writing the post. That took me 3 hours to write. Now do that often enough to keep people coming back to your blog. And you thought the writing would be easy. It’s the hardest part!

Oh, I have plenty to write about, you say. Bull. You might think you do, but wait till you are a couple weeks in. That is when the real test comes. I spend a ton of time reading tweets, rss feeds, random clicking and what not researching and getting ideas, or just plain getting inspired. Coming up with something to write about is probably the most difficult thing you have to do. Get ready to read, read, read, and……..ya….read. Writing about just anything is easy. Writing something that you and others actually care about though…well I think you get the idea.

Get it out there

So you wrote your post. Good for you! How are you getting people to notice your blog? Well, when you are done, I’m assuming you have your blog hooked up to twitter. No? Go do that over at twitterfeed.com. I told you hitting publish was the least of your worries. After you do that, your blog will post a little tweet letting all your followers know you just wrote some crap. “Hey F#$@ers! Come read my crazy!”

Theeeeen…sign up for accounts at a ton of other article posting sites, which takes more time than even I thought. Once you have all those made (i have only 3 at the moment), submit the links and pray people click on the “This rocks, blend it, float it, bump it!”

Once you have all that set up…log into them after every awesome post you write. It will get easier after the first couple, but this still takes time.

Let’s call it a night…I’m pooped

While it might not seem like it would take a lot to write this post, I did more than just that. I spent an hour changing the images, an hour writing this, couple minutes worth of deleting spam, couple minutes tweeting, 10 minutes posting articles to places like The Web Blend, Design Bump and other sites like it. All in all, just tonight, I spent roughly 2 hours for you to spend 5 minutes here.

Anything else I missed? Let me know, cause its hard to think of what else I have to do. Thank God I love doing it, otherwise it would seem like work, but I love that, too. Getting 1 cool comment makes it all worth the effort. I promise.

Coupon Code: webmachine

$('.myInput').change(function() {
alert('Are you sure you want to change that?');
});

The problem

Today at work I was given the task of using jQuery to create a very specific effect. I have an unordered list with three list items. When the user rolls over one of them, the item gets a class which sets the background to a new color, while any other item that has that class, has it removed. On top of that, if the container the list is in loses focus (meaning the cursor leaves the container), the last list item hovered on should retain the background changing class. On top of THAT, whenever one of those said list items is hovered over, one of three content divs below it should go from hidden to visible. Oh, and I have to have the second item started off as looking like the hover state. This one took me a while to figure out. I could get the normal rollover, but the keeping the class thing when the list item lost focus through me for a loop.

Click here to take a look at the final working jQuery. You’ll see what I was trying to do if you roll over and out and what not.

Code Red

The html is simple enough, but if you want to follow along with what I did, here you go:

<div id="container">
	<ul id="buttons">
    	<li>Box 1</li>
        <li>Box 2</li>
        <li>Box 3</li>
    </ul>
</div>
<div id="content">
	<div id="cont1">Content 1 box</div>
    <div id="cont2">Content 2 box</div>
    <div id="cont3">Content 3 box</div>
</div>

The CSS is irrelevant other than the ‘over’ class (which just changes the list item background color to purple), so I won’t list it, but here is the jQuery:

$('#cont1, #cont3').hide();
	$('#cont2').show();
	$('#buttons li:nth(1)').addClass('over');
	var cont1 = $('#cont1');
	var cont2 = $('#cont2');
	var cont3 = $('#cont3');
	var button = $('#buttons li').focus();
 
	$('#buttons li').hover(function() {	
			var target = button.index(this);
			$('#buttons li').removeClass('over');
			$(this).addClass('over');
 
			if(target == 0) {
				cont1.show()
				cont2.hide();
				cont3.hide();
			} else if (target == 1){
				cont1.hide()
				cont2.show();
				cont3.hide();
			} else {
				cont1.hide()
				cont2.hide();
				cont3.show();
			};
 
	}, function () {
			$(this).removeClass('over');
			if($('#buttons').blur()) {
				$(this).addClass('over');
			} else {
				$(this).removeClass('over');	
			}
	});

The Solution

Let me first say that there is probably a more efficient way to do this, and I’ll post updates as I shave some of the code down. This works though, so if you are ever in need of doing something like this, or parts of it, here goes the explanation.

The first two lines are to get the second content div to show, while the other two are hidden. The third line (shown below) is to get the second list item the over class, which is the rollover state (purple color).

$('#buttons li:nth(1)').addClass('over');

After that, I am setting three variables that I will use later in the if/else state. The last line in that section is to set a variable (button) to whatever list item has focus:

var button = $('#buttons li').focus();

The fun part!

Onto the actual hover! Obviously I am setting the hover onto the ‘li’, and right after that, I have another variable called target. This is equal to the index value of whatever list item has focus. Directly after that I am removing the class ‘over’ from all of the list items (kind of like a reset), and then re-adding the ‘over’ class to the hovered over li. This takes care of the color switch while rolling over any of the list items while staying within the ul element.

if(target == 0) {
				cont1.show()
				cont2.hide();
				cont3.hide();
			} else if (target == 1){
				cont1.hide()
				cont2.show();
				cont3.hide();
			} else {
				cont1.hide()
				cont2.hide();
				cont3.show();
			};

What is all that crap? That is to show and hide the content divs. This is where my code can probably be a lot better, but I’m under a time crunch, and I worked on it at home. If the index value of the list items (which is what target is set to) is equal to 0, show the first content div (cont1), and hide the other two. The else if shows the middle, and the else shows the third. That takes care of the hover. Now onto the…well, un-hover.

What happens when I move my mouse away from that garbage?

}, function () {
			if($('#buttons').blur()) {
				$(this).addClass('over');
			} else {
				$(this).removeClass('over');	
			}
	});

When the user rolls off of the list item, it checks to see: did they leave the unordered list? If they did, add the class back to the list item they were on last, otherwise remove the class ‘over’, because it means they are rolling over a different list item.

*NOTE – blur() is the opposite of focus(). The blur event is sent to an element when it loses focus.

Conclusion

This was one of those times where it really hit home to think about what you need things to do before just jumping into writing the code. I did it in small chuncks, starting with what needs to start hidden/shown. Then broke it down into the hover section, and the un-hover chunck. Is this the perfect solution? No, I know I can trim this down. Maybe with a case switch? Or better variables for the content divs? Delegate? If you see something I can improve, let me know. I’ll personally keep working on refining it, and I’ll let you know when I come up with something better. I think that, since this post dealt with jQuery, I’ll leave off the jQuery junkBox section tonight. I don’t want to overload your mind.

As always, let me know if you have any questions.

Coupon Code: webmachine

Get organized

Let’s start with Paprika. I know in my post “Creating your own web dev tool kit – Part III: Apps that help” I told you about todotweet.com. It is still a great little twitter app, but I have found that Paprika suits me better. It is just another little note taker type thing that lets me create projects with to do lists in them.

As you can see from this little screen I have a project name of The Web Machine, an h1 tag that is the Things to do…, 3 tags (Design, Coding, and Articles), and something to do under each. Paprika is so easy to use, and along with the base amount of features that I want, I’ve made it my new to do list app. You do have to create an account, which is also stupid easy (like 4 fields to enter), after which they give you your own url. Login, and you are off.

You want to create a tag called Awesome? Type #Awesome. Thats it! Want to create a check box to do list? For each item you type in put a dash in front of it, followed by a space. The calander icon pops up when you type in a date. Want something bold, surround it with *.

Now a lot of you are probably saying “But what about that other app rememberthemilk.com?” Ya, I know you can have crap emailed, IM’d, tweeted and facebooked or whatever it does, and I did try it. Guess what I found out? I don’t need any of that crap. It’s over complicated, at least for me. I just need a basic list app with the exact features Paprika offers, so I stop wasting paper, which I can’t remember where I put half the time. Check it out, and get organized.

MicroData – it’s data that is…micro?

I’m not going to claim that I know anything about MicroData. There is just to little information in the way of clear explanations on what it does. I mean in layman’s terms, not technical jargon crap. The closest I came to actually understanding it, came from Nettuts’ article HTML5 Microdata: Welcome to the Machine. I’ll quote John Cox, the author of that article:

“…Microdata is a subset of making a document have meaning to machines, just as it has meaning to a reader of the document.” and “We can now provide context from our HTML to give better search results.”

All you really do is add attributes to an element (like a div or a span) that holds the relevant information. I added some to my footer last night, so I’ll give you an example of what I’m talking about:

<div itemscope itemtype="http://data-vocabulary.org/Person">
<span itemprop="name">Jeremy Carlson</span> - <span itemprop="title">Web Designer/Developer</span>
</div>

As you can see all I’m adding are these new attributes. It shows up the same in the browser, which you can see in my footer below, but apparently gives more context for searching. Now, I don’t know if this actually helps in a regular Google search or not, but I am going to guess that it does. Once you have your Microdata added, you can then check the results here. This is what my results looked like:

If you want to read more about Microdata, check the link above to the Nettuts article, and go here.

Enough crap…give me something I can use already!

Small rant now, so feel free to disregard this. It’s really about several things. I used to not care about list articles. Some I thought were useful, but it seems lately that it is getting close to absurd. Enough of the 30 Best Designed Websites in Poland crap. I really don’t have time to care about articles like these. I want you to actually teach or show me something I didn’t know. I’m not what you call an “elite” blog, but I do try to show you guys something new or how to solve a problem with every post. I feel that in the past month, the quality of articles posted on the major design/developer blogs we all go to has diminished. You want to actually inpsire me? Write some awesome new tutorials on getting started with Ruby, cool jQuery that is NOT about a plugin, CSS that doesn’t just work in webkit browsers, and things relevant to actual development.

Second part of rant coming…..oooohhh, now! FREE icons, background images, fonts….whatever resource the blog of the day is handing out. Free to me means I can do whatever the hell I want with what you are giving away. How many of you actually look at the license that those fonts or especially those icons we all love? I’m guessing very few of you. Most of those awesome icons, say from SmashingMagazine.com, are ONLY for personal use, and on top of that, you MUST provide an attribution link to the person who created it! Screw that! Do you know how many links we would all have on our pages? That is why I generally create my own, or find ones that are actually…what’s the word…oh ya…FREE!

If I have to attribute the creator, it is not free to me. They are letting me borrow it. It is like renting a car that has a bumper sticker from the company renting the car to you. I don’t want that crap all over my sites. PLUS…I can’t use it for ANY of my freelance sites, or for work for that matter, because they aren’t personal sites! COMPLETELY USESLESS ICONS AND FONTS!

Whew…I’m glad I got that off my chest. I know I feel better, how about you?

Coupon Code: webmachine

$('#container a').replaceWith('<a href="/pageOne.html">Page One</a>');

What the hell is Ext?

That is what you are asking yourself, right? It’s another javacsript library, which I have gotten into many an argument over why one would use it over another library. Personally, I find it to be more like writing straight javacsript (which I suck at). My point isn’t to get you to use it, because I don’t care. I love jQuery, and that is that. I’ll show you the difference in this post/article between how jQuery would do something versus how Ext would do it, because I HAD to do it in Ext. On to what I had to accomplish.

The Problem

Here is the set up: I have a hard-coded div with two links in it, I am not allowed to touch the actual HTML page itself (meaning the myPage.html), but I do have to change the href of the first link, and the text that displays in it.

For you jQuery newbies, I’m going to be using first() and replaceWith() to do this, and you will be amazed by the simplicity of it. Because I am not all that familiar with Ext Core javascript library, I actually had to write this in jQuery first and then translate it over. This though is much easier than when I tried doing that with my slider.

Here is the HTML to begin with:

<div id="container">
<a href="/feature.html">FEATURE</a>
<a href="/pageTwo.html">Page Two</a>
</div>

And here is the jQuery:

$('#container a').first().replaceWith('<a href="/pageOne.html">Page One</a>');

Easy as pie: find the ‘a’ tags in the div with an ‘id’ of container, get the first one, and replace it with what I am giving it. Now lets compare that to how to do it in Ext.

Ext.get('container').first().replaceWith({tag: 'a', href: '/pageOne.html', html: 'Page One' });

These are fairly different. In Ext, the first() is getting the first sibling, where as in jQuery the first() is getting the first of the matched elements. The replaceWith() in Ext is saying what kind of tag, attribute and the html to replace the sibling with. In jQuery, I’m just giving it the entire chunk of html.

It is differences like these that make Ext a pain in the ass, for me anyways to deal with. Another difference which isn’t illustrated here, and I should have looked at the documentation faster, is how you actually get elements/classes/ids. For instance, there are two ways to get an id in Ext. The first is simply using ‘get’. The second is ‘fly’. If you need to reference the ‘id’ later, you would use ‘get’, but if its a one line I need this done, and I’m not going to do anything else, you would use ‘fly’. If though, you want to target an element by class, you would use ’select’ instead. That part was frustrating because it took me a while to figure out. I kept trying it the jQuery way by just using ‘get’ and the ‘.className’, which didn’t work.

Just another reason why I like jQuery

Personally, I prefer jQuery because of its quickness to the point. Takes less, and for me makes more sense. The argument I have had repeatedly is that Ext actually reads better – ie. I’m ‘getting’ something, and here is what I’m doing to it. My opponent in this discussion says that if you have a bunch of code, jQuery is harder for someone else to come in and know what is going on because of how abstracted it is. Its that abstraction which makes it awesome to me though. My side is, if you are commenting on what you are doing, then everything is fine. People without any knowledge of jQuery are not going to understand it anyway, and even more so with Ext. Anyone working on it is going to have some knowledge of libraries, and I think the syntax of jQuery is easier…just look at the parameters you have to type in the example above in the replaceWith().

The point of this was to show you a real example of something I had to do, and do a slight comparison between two libraries doing the same thing. Have you had to work between two different javascript libraries? If so, let me know which, and the reasons you have for liking one over the other.

Coupon Code: webmachine

$('.myList li').first();

Finally, something not so outrageous using CSS3 that we can all understand

I got a link through twitter about a raindrop done using CSS (don’t bother looking at this in Safari or Chrome, because he write the additional CSS for that). Normally this is the kind of thing that I will look at and say cool, but waste of time. This one caught my eye though because it is actually pretty simple. I’m not going to recreate the damn thing, but all it is, is a bunch of divs and a surprisingly small amount of CSS. I was actually impressed with this one, and I think it could have been done with just an ul and list items. Now, I would still use an image in a real life situation, but I picked this piece because I did not really know how to use the new gradients. This guy obviously does.

Learnin’

That led me to do some small bit of research and tests, and found it is not all that hard, just slightly confusing to get a grasp of what the numbers do. On top of that, the CSS Safari uses to do radial gradients is pretty different.

Some things to note about Safari while doing my demo. I could not get it to recognize percentages for the values in the border radius, so I had to do pixels. I’m not sure it can or not, and I didn’t find anything about it. Safari 5 does not need -webkit- in front of border-radius – it will still use it, so I would include it anyway to support the older versions.

If you look at the demo, you can see a div with a basic radial gradient, with rounded corners set to 100% in FF, and 300px in Safari. This should appear as a circle with red in the middle, then orange fading out to yellow. The second, is just to show you something easy to do with it. It is a png with the word GRADIENT cut out of it, and a drop shadow layer style put on. It then has a div behind it with a radial gradient, which if you ever wanted to change the colors, you wouldn’t have to use photoshop to do it. Just change the CSS!

Click here for demo.

So how do you do it already?

It took me a while to understand what all of the numbers meant, and how to move the gradient around. Using the image below, I’ll explain what each does in plain English. After reading it, the best way to really get a grasp of it is to mess with it in Firebug, adjusting the numbers.

Firefox:
A: This number, as it goes down, moves the center of the gradient left/right, while shrinking/increasing the amount of the center color displayed.
B: Same as A, only top/bottom
C: Adjusts the angle of the gradient, but in circle shape, this doesn’t do anything
D: Shape of the gradient – This can be circle or ellipse
E: Size of the gradient. This is like PS, where you can start and end your gradient at any point. This can be set to: closest-side, closest-corner, farthest-side, farthest-corner, contain (same as closest-side), and cover(same as farthest-corner)
F: This is the center color of the gradient
G: The color stop position – can be from 0 – 100%

Safari:
A: This sets what type of gradient: linear or radial
B: Moves the gradient left/right and top/bottom while keeping the center of the gradient in the middle (will look like a cone if you move the numbers far enough
C: How much you are fading in or out the center color
D: Moves the center of the gradient left/right and top/bottom while keeping the gradient in the middle
E: How much of the center color that is solid (not faded out) – mess with this and you will see some cool stuff!
F: The outer color
G: The center color
H: Think of this as the color between the outer and inner colors, and its percentage to show. Note you can do a very smooth gradient without F & G, and only use a bunch of color-stops.

Here is the CSS I used for the circle:

#container {
	-moz-border-radius: 100%;
	border-radius: 300px;
	width: 300px;
	height: 300px;
	margin: 50px auto;
	background: 
		-moz-radial-gradient(150px 150px 0deg, circle closest-side, #ff0000 0%, orange 50%, yellow 100%);
	background: 
		-webkit-gradient(radial, 150 150, 100, 150 150, 40, from(yellow), to(red), color-stop(.4,orange));
}

Take a look at the demo, copy the HTML and CSS, and start messing around. Once you start fiddling with it, everything will start to make sense. Hopefully my image and little lists helped you to understand CSS3 radial gradients better, and you get a clearer picture on controlling them. Now you can go and do some experimenting and come up with more raindrops.

Coupon Code: webmachine

$('.touchThis').live('click', function() {
alert('You totally just touched that!');
}