Seriously, today was way too much of an information overload, and I really have to just get this out. I’m afraid of what might happen if I don’t, and I don’t want to find out.

Sooo……

Woosaah. I needed to take a breather.

Now, the list of links, which I was more or less bombarded by Bombay bombers. All I wanted to do was a search for at the time was a simple, online color picking tool that I could just bookmark, and have quick access to at my fingertips when I need to make a different shade or tint of a color setting I’m using, or whatever other reason. Just a simple search for something I knew had to exist but never saw was a mistake. I had no idea how many of these tools there would be, and what a wide variety of different, cool, and worth sharing at least, bunch of color picking tools. The first is exactly what I was looking for.

This is a basic colorpicker that is similar but better than the one used in Photoshop. Both RGB and HEX codes are used by it and you can store a set of up to 10 different colors if you want. Plain and simple, just the essentials. Out of all the different ones I found below, I just wanted a simple HEX / RGB color picker, and will take the added bonus of saving the colors.

You need MORE!!

Color picking tools. Save time and if you just need to grab a couple colors really quick for something, and work in real-time.

Pick Color RGB and Hex Codes

There were many more, by the way just no time to re-gather them all or I’ll be here all night. The color pickers above half of what I managed to collect in about 3-4 minutes, no intention to do that (link junky?). I honestly didn’t know what the hell was going on, or why I all of a sudden felt like I went from living in a black and white world, to feeling as though colors were bleeding from my eyes. Maybe I became possessed and since don’t have any clue what went on during that time, I must have blacked or gone into epileptic shock or something. It was just so beautiful you wouldn’t be able to imagine.

That’s when I hit my breaking point and had to stop with the colors. Which brings me to what I found previously. A entirely different thing that I was again overloaded after finding it, some how or another most likely on Twitter, I came across a CSS and JavaScript tool that claimed you could drag and drop fonts into the page for testing in real-time, and this I had to see obviously since that’s cool shit if it were real. This is how I found theCSSninja.com and from there it happened, yet again. A handful of posts on that site, in combination with some 25 other random tabs I had opening and closing at any given time, it was just a matter of minutes before I had far more information than I needed, again. I tried to stay focused on the things from thecssninja site as could since it was new to me, but I’m unable to focus when there’s so much info swirling like a tornado around me. So that is why in the list below I focus more on cssninja posts. Yes, I am crazy. I know you’ve already concluded that by this point.

Font Dragr – Drag and Drop Font Tester

This is a page that you can just select, drag and drop a typeface, or font into the page, so could test how it would look in that page in the section which you can also edit in place if you wanted. Stuff like that is cool in itself.

CSS – JavaScript – Text

There were others but I can’t remember what they were. That’s ok though, they will be found again, and by larger numbers. That I have no doubt will be true. While I’m on this topic, I might as well rant on about it some more, because it was one of those days that you just say, damn there’s just too much.

There are so many new things in web technology. Things that have extremely cool, easy to use, and feature-filled, and these things include the W3 recently released and/or updated technologies HTML5, CSS3, Canvas, SVG, along with the less recent but still new and extremely powerful jQuery1.4.2, and the somewhat even less recently updated jQueryUI 1.8, which is the cherry on top this list of all that is possible from any one of them.

I would say it is easy to understand why someone who works with these things daily, as I do, becoming extremely overwhelmed by the rapidly increasing number of resources for any or a combination of these technologies. Which is noticeably advancing into the future at the speed of light. Every next thing I see, is yet even more amazing, and never could conceive as a possibility just a mere 3 months ago.

This is by no means a bad thing, and I am extremely happy to be able to be apart of the growing community of developers and designers, BUT, I mean come ON, take a chill pill. I know that asking an entire online community to chill out and take a rest is delusional, and I would never want it to stop, I love it to much! It would be nice to have that kind of power though, huh?

Anyways, I guess what I should do, but have a very hard time doing, is to take a step back with Jeff Star, since it would seem to be a good, no, Necessary* thing to do. Duh, obviously. I know but actually doing it and knowing it is good to do, are entirely different things. Just ask me, I am the king of knowing all the things I should or shouldn’t do or be doing. Do I do them though? I can do what you do? Voodoo, coming through your area, – Fugees. Despite having ability to do what you do, or doing what I should/shouldn’t do, I 90% of the time, do NOT DO them. I just do things the hard way, the way NOT TO DO them. Don’t do what I do, in case you were planning to, I know you were.

One last thing, all of that stuff above, also makes it very difficult to get anything at all done, and I have: a plugin update to release, a theme to finalize, as well as 2 half completed posts over at New2WP.com, one which is a continuance of the W3C HTML5/CSS3 meetup post which is the post-meetup review and overview of what was covered at it. Coming soon!

Anyways, ok I feel much better now that I got some of this stress of the web today out. Thanks for listening, if anyone does actually read this.

Okay go play with those links I posted, no more blabla mouth from me. Good day to you all.

What my plugin does is it utilizes your information from the WP dashboard on your profile. It makes better use of the fields by removing the Yahoo IM one and adding a Twitter field. Then it will pull the information from that and the URL and Bio of the post author, as well as display the Gravatar of the author by getting the authors email address. Then it adds a nice box in between the post and the comments.

I am extremely excited about this. I never thought I would ever be able to complete it, and get it working. I managed to create the functions and simulate it over at New2WP, but getting it to work in a plugin has been a bit more work. I am still working on cleaning it up and adding the finishing touches, and then I will submit it to WordPress.

You can see an example of it below, I am currently using it on this site, and I’d love to know what you think!

So what is this

I just wanted to quickly explain what $(this) is since it was so confusing to me while learning jQuery.

$(this) is easier to understand separately in 2 parts. $() is a function call plain and simple. $ is a reference to the jQuery function, so therefore, $() is a shorter more simple way to write jQuery().

If you use another JavaScript library that redefines $ then you would want to use either jQuery() instead of $(), or you could use jQuery.noCoflict().

What ‘this’ is can be more confusing since it’s used for many things. It is used in an object’s methods to refer to that object, itself. Sort of like talking in 3rd person or something.

$(this) may make you even more confused, so let me know if you have any questions.

And be sure to come check out more jQuery and WordPress tutorials at New2WP.com

That doesn’t have to be the case with jQuery though I’ve found, because it is a lot more simple, and even more simple than I think it is too. It’s still programming yes, but it’s more “normal” than what I consider Php to be. Though, despite all that, I have still found myself not sitting down and actually learning it. I’ve tried, but when I do, I tend to get distracted with all the millions of things on the internet that are there to distract me. Have you had this problem ever? It can be annoying at times.

Many times when I try to focus on stuff like this, I start by looking up sites and finding resources which I can use to help me learn. Well, that’s when the distraction starts. I then start finding more and more and more, until I find myself basically creating a resource roundup that I can make a new blog post with, for others trying to learn the same stuff, instead of using the resources to help myself learn.

I apologize if this is the cycle which you have found yourself in right now too. I did not intend to distract you, but providing you with a ton of resources which you want to learn about, but have yet to do so. On that note, here is the list.

How Do You Learn jQuery?

Here are 14 ways you can start learning it.

With the release of jQuery 1.4 today, I’ll start with:
14 Days of jQuery.

I have found the best and most useful of these to be the sites that have video tutorials showing you visually since that’s how I learn. That’s why jqueryfordesigners.com and jQuery for Absolute Beginners 15 Day Video Series were the most helpful for me in my quest to START learning jQuery, instead of gathering information about it, in hopes that someday I might actually learn something about it.

I think I was hoping that the more resources about it I found, I would somehow magically know how to do it without putting in the work and learning how to do it.

So how did you learn jQuery?

Leave a comment with any tips you might have.

This list has links to plugins, examples, tutorials, and more. Whether your trying to learn jQuery or if you are looking for a certain plugin, maybe even one you might not have known about, you can probably find it all here. But incase you can’t, then you can definitely find something here that you might like instead.

I am one that is all of the above. I’ve been trying to learn it and look for certain plugins that I can use. Why remake the wheel right. So, here’s a mix of new posts, and old from the year 2009, at least since I became interested in jQuery.

Sliders and Slideshows

If you liked this post why not bookmark it? Or at least subscribe to the RSS feed below. Feel free to add any links not listed in the comments below.

Now that I finally got it working, I am going to start working on making it a plugin for WordPress that I can release if I ever finish it, or can even manage to learn how to develop a WP plugin for that matter. I’m still rusty with Php and the development side of things, but I will do my best to create a plugin to release.

Since I had a hard time in finding information on how to do this, I wanted to share my code. What it does is dynamically display posts from the ‘Featured’ category, using the easySlider jQuery plugin. It’s easy to do, and adds a nice animated and dynamic feature to your site.

What you will learn:

• using the WordPress WP_Query() funtion
• retrieve posts from a specific category
• display post titles and excertps in jQuery slider

Getting started

For this you will need to download the jQuery easySlider plugin. You will also have to be able to edit the header.php template for your theme. Go here for some information about using WP_Query() function here.

For the latest example usage of easySlider with just static content you can download the files. I used the example from that, and just altered the CSS and made the list of content dynamic instead of static, so you may want to start from there since my CSS is different.

These are the arrow images I used for my slider. Feel Free to save them.

Here is the CSS styles I have.

Next you need to add this before the closing head tag in your header.php template, which inlcudes the external JavaScript files. Change the path to the files according to where you save them.

Now for the fun part.

This works in a similar way as the query_post() function does but that was conflicting with the WordPress loop and making all the posts on my site to ONLY display the posts in featured category. This creates a new instance of query_post(), and allows you to do various things while within The Loop.

First you need to open the div and unordered list.

Then you need to set up the query and get the number of posts from the category you want to get. Then create the loop.

In this example, showposts=5 will get 5 posts, and cat=7 is getting the posts from the category with the ID 7. If you can’s find the category ID, go to Categories in your WP admin, and hover over the category links. You will be able to see what the link is in your browser window, and the end of the URL will say &cat_ID=X.

Next, display the list of posts. This will show the post title with using the_permalink() and the_title() functions, and the_excerpt() to display a short summary of the post. You would have to make sure that all posts in the Featured category have a summary in the Excerpt field when you create new posts.

Close the loop. Add the closing list and div tags and that’s it!

If it were a perfect world, this would work for you on your own site just by copying and pasting, but if you have ever developed anything before, you know it’s never that simple. If you have any questions or issues with this let me know.

Here is the entire code.

If you want to see a demo of this, just look at the top of this site, I am using almost this exact code to display the featured post slider in my header. So it shouldn’t be too difficult to implement yourself. There’s always a bump in the road though.

Questions or comments? Post them below.

Open the Javascript tags, <script language=”JavaScript”></script>, and setting the variables/size of the images you are going to display:

I am just using a normal banner size but you can use whatever you want. The width and height dimensions will be recognize as pixels, so you don’t need to include px. The title variable is what will show up when you hover your mouse over the banner images.

Next we need to create separate arrays for each banner ad, which will store the site link and image source of the banner,

Now create a variable for the new array. In programming, 0 is the starting point for arrays and counters, etc. When you create a counter, it counts 0,1,2,3 etc. So here 0 is the first positions of the array.

Increment the array position by 1 for each additional link and image you decide to have, and YOU MUST make sure that the position in the array each of your images are matches up with the links position. By position I mean the numbers you set pic[1] goes with link[1], pic[0] with link[0], and so on. They be incorrectly linked if they don’t match up here.

Finally, we need to write the code which displays all the information for each banner.

This is gathering all the information from the array, and then goes down the array and echos the information out into the HTML code we embedded the javascript code in. Every time the page refreshes it will show a different banner image if you have more than one in the array.

Here is the entire code combined:

After I posted this, I quickly learned that it was going to be a pain to get the code snippets in the blockquotes to display since it is JavaScript. The browser was reading it as a script, and not as text on the page.

So if the code isn’t showing up, let me know. WordPress doesn’t help much either since it automatically re-writes certain pieces of code in the post editor.

There are countless ways to create a banner ad rotator script in several different coding languages. For making an ad rotator I’d prefer to do it with PHP like I have done below, but depending on where I wanted to display it, I might consider using jQuery because that is becoming one of my new favorite things and is growing more popular everyday. This is just a basic PHP ad rotating script with nothing fancy like what you could do with jQuery, but it is still useful and rather simple to write.

Open up a new text document in notepad or Dreamweaver, whatever it is you would use, and create a new file named adrotator.php. On the top 2 lines type this:

Then, you need to create a variable for your banner ad’s HTML code, and increase the banner counter variable depending on the number of banners you want to display or in otherwords number of $bannercode variables you create. You will see what I mean in a minute. Increase the counter via the bannercode variable like this:

So say you wanted to rotate 3 banner ads, you would rewrite this 3 times with each banners HTML code for the $bannercode variable. Be sure to make sure you get the quotation marks correct too.
I like to use singles ‘ ‘ for variables like $variable = ‘this’. That way any HTML you may have between them you can just use double guotes and not have to backslash escape all of them like .

This is how you would write the code for each banner.

Now we need to get the total number of ads, and randomly display them if there are more than one, otherwise just show one which can be good to specify just in case you remove other ads and only one is left.

That’s it for the rotator script. Save your adrotator.php file and upload it. Then where ever you want to have the banners show up just do an include of that file like this:

That’s all there is to it. If you have any problems getting this to work let me know and I can help you out. It’s not the most advanced script, but it does the trick quick and easily. I plan to do a follow up post to this with a Javascript or maybe jQuery tutorial if I’m in the mood.

So once again here is the entire script:

Then this is placed where you want it to show up, making sure to point to the adrotator.php file on your server.
[cc lang="php"]
include ('adrotator.php'); // adrotator.php script on your server
echo "

“;
?>

I will create a demo page shortly for this and the JavaScript banner rotator script.

Lately I’ve been modifying the design of Tweeaks.com, which involves doing CSS, and I quickly noticed how much I forgot. To freshen my memory up, and to make my life easier so I don’t go insane trying to do things I think are right but apparently aren’t because they don’t work as they should, I searched for some CSS articles. I found some really great things, some of which I listed here. These are invaluable resources, which have helped me solve the CSS issues I’ve had the past few weeks now. So I had to share them with other people who might need to refreshen their CSS skills, and anyone else who might be interested to learn CSS.

Mastering CSS Coding: Getting Started

Mastering CSS: Styling Design Elements

Mastering CSS: Advanced Techniques

With these three articles on Smashing Magazine, you should be able to learn enough to get by when making a website. There is so much more you can do with CSS. Lately, I have been using CSS in a lot of different ways because of some jQuery things I have been making. It is becoming the way to design websites today, and if you still use tables, like these, you are either a Coldfusion developer, or you are this guy. I personally prefer tableless design, over the use of tables just for the fact that the code is cleaner, more organized, and much more is possible when using div layers. I don’t care if it’s considered "cutting-edge web standards" that some people out there might call it. Plus I just really hate tables, which is why I am not a fan of Coldfusion, even though it is part of my job lol.

Hope you enjoyed this post. It has proven to be helpful to me, and I’m sure you will too.

Bonus!

Additional CSS Resources

• W3C Box Model
• HTML Dog: Beginner Tutorial
• HTML Dog: Intermediate Tutorial
• HTML Dog: Advanced Tutorial
• Cascading Style Sheet Level 2 Visual Cheat Sheet
• CSS-Tricks: All About Floats
• CSS Properties

Have you ever had a CSS issue, and went insane trying to fix it but was never able to?

They are also another way to improve search engine optimization and page ranking, by having several incoming links to your site from other notable websites. This is obviously very important for when people search for a keyword, the most relevant results that are returned are partly based on the PageRank of certain page. So the more links to your site from sites that aren’t considered spam, the better off you are all around.

However, I did not make this list for people interested in submitting their site to CSS Galleries, at least not entirely, because there are a very large number of these types of sites, and manually submitting yours to some or all them would take time, and you might want to consider your options here first before doing so. Outlaw Design Blog gives some insight to alternate ways to for getting your site listed on CSS Galeries.

Although the majority of these sites are listed as a “CSS Gallery” or “CSS Showcase” etc., many of them do display flash and html websites as well, as long as they are inspirational, well designed, and nice clean looking sites. So really the correct classification for sites like these should be “Web 2.0 Gallery” rather than “CSS Gallery”, but they are still referred to as the CSS Galleries.

So I have made a list of 50 CSS Galleries for your design inspiration, and by no means is this list every website gallery. There are many other sites like these, so if you run a CSS Gallery or know of one that should be listed here, please leave a comment with the link and I will add it up. I just chose these sites at random, and though I could have listed way more than 50, I would be writing this all night if I added more than this, and I am about to go out to a club to dance and be social. So enjoy!

1. FantastiCSS

2. TheWebBased

3. CSS Brigit

4. CSS Showcase

5. Design Bombs

6. RGB Land

7. CSS Deluxe

8. CSS Design Yorkshire

9. Mental Refugee

10. CSS Garden

11. Beautiful 2.0

12. CSS Illustrated

13. Best CSS Vault

14. Divine CSS

15. CSS Luxury

16. BestWebGallery

17. CSS Leak

18. CSS Fresh Blend

19. Website Gallery

20. The Best Designs

21. Unmatched Style

22. CSS 2.0

23. Pro CSS

24. CSS Style

25. We Love WordPress

26. CSS Orgy

27. Blog Design Heroes

28. CSS Burst

29. The Design Inspiration

30. 101 Best Websites

31. Fave Design

32. Blog Design Lap

33. For All To See

34. CSS Vote

35. CSS Line

36. CSSDsgn

37. Dzinemart

38. Styleboost

39. Type Inspire

40. CSS Creme

41. CSS Import

42. CSS Design

43. Dezinspiration

44. Colorgorize

45. Submit CSS

46. Creative and Link

47. CSS Cutie

48. The Fluffery

49. Design Fridge

50. CSS Fights

Other CSS gallery resources and collections:

• The Great Web Design Gallery Roundup – by CSS Tricks
• 50 Best Sites To Get Design Inspiration – Dzine Blog
• Ranking 80 of the Top CSS Galleries – Vandelay Design
• 101 CSS Galleries for Backlinks and Traffic – Caroline Middlebrook
• Most Useful CSS Galleries Sorted by Google PR – Webdesign Gallery Week