Torn Elements

I’m likely the last person on the Net to discover this but I thought I would throw a post together on the topic anyway. If you aren’t a programmer, you might not see the humour in this. I for one, found it quite amusing.

I was upgrading a Mambo installation yesterday and found myself searching code snippets for a problem I was having. One of the search results led to a web site for an esoteric programming language called LOLCODE.

Did it have anything to do with what I was searching for? No. Did I click it? Yes!

There I sat chuckling while my client’s site remained broken. It was worth it as it relieved the mounting stress I was feeling during a failed upgrade. It cleared my head enough to finish the job at hand. (Hours later)

I think LOLCODE can pretty much explain itself…

HAI
CAN HAS STDIO?
PLZ OPEN FILE "LOLCATS.TXT"?
    AWSUM THX
        VISIBLE FILE
    O NOES
        INVISIBLE "ERROR!"
KTHXBYE

The above code initializes (HAI), opens a file for display (PLZ OPEN FILE) with error checking, then closes (KTHXBYE).

HAI
CAN HAS STDIO?
I HAS A VAR
IM IN YR LOOP
   UP VAR!!1
   IZ VAR BIGGER THAN 10? KTHX
   VISIBLE VAR
IM OUTTA YR LOOP
KTHXBYE

Don’t tell me you didn’t chuckle just a little bit while reading those!

[Pic from LOLCATS]

[Code snippets from Wikipedia]

Special thanks to Adam Lindsay – creator of LOLCODE. It made my day!

Odds N Ends Asides, Coding View Comments

No, that’s not a typo. It’s actually my dig at MicroSoft’s failed attempt at symbolism.

To the right you can see the picture of the fish which is proudly displayed in Windows 7 Beta. The fish is called a Betta (Beh-Ta) or Betta splendens to be accurate.

Earlier today someone in Twitter asked if the fish was related to PETA’s ‘Sea Kitten’ drive. Possibly, but I don’t think so.

The common mispronunciation is to call this fish a ‘Beta’.

I can’t say if MicroSoft was thinking the fish was indeed called a ‘Beta’, or if it was just a cool pic to ship with their Betta (ha!) version of Windows 7.

After all, they’re programmers, not nature enthusiasts.

Software Asides View Comments

When it comes to graphics, nothing can slow down your page load like high resolution photos. My goal here is to make the theme as light weight as possible. By keeping the theme itself light, we can allow more load time for content and sidebars.

After several days of wrestling with graphics I finally settled on a text effect header. (Click the pic) It’s nothing flashy, but it’s simple and reflects what I’m doing here. It’ll settle in better once I start working on the rest of the page. The stylized ‘E’ I’ve used is potentially going to be carried throughout the theme. (Just a vision at this point)

Because I’ve used graphics in the header instead of the default text and image background, we’ll handle things a bit differently from what was originally coded. Since this theme is not being developed for distribution there’s no need for flexible code.

For instance. The Blank Theme contained 58 lines of code to produce the header. Most of this was for providing flexibility for the masses. Since I’m the only one to use this theme we can ditch the overhead.

By direct use of images (not CSS backgrounds) for the header I’ve trimmed this down to 17 lines of code:

From ‘style.css’

#header {
    width: 100%; 
    }

#headerLogo { 
    height: 85px;
    width: 850px;
    padding: 0;
}
#headerRight { 
    float:right;
    margin: 0;
    padding-right: 18px;
}

From ‘header.php’

<div id="header">
    <div id="headerRight"><a href="<?php bloginfo(‘rss2_url’); ?>"><img src="http://static.tornelements.com/torn_images/rssIcon.jpg" alt="Torn Elements RSS Feed" /></a></div>
    <div id="headerLogo"><a href="<?php bloginfo(’siteurl’); ?>"><img src="http://static.tornelements.com/torn_images/tornHeader.jpg" alt="Torn Elements – Larry Monte regaining lost passion for design" /></a></div>
</div>

By using images and not CSS backgrounds I get to assign ‘alt’ tag information which is good for SEO. Since we aren’t using text for the header it’s good to give Search Engines a bit of information about the site via images.

Take note of the sub-domain source for the image files. As I mentioned previously I’m using another domain to store my theme images:

The second sub-domain will house the theme images. Most browsers can only load 2-4 images simultaneously from any single domain. By keeping theme images on a sub-domain and content images on the main domain, I can increase the load speed of the site dramatically by allowing an additional 2-4 images to be loaded at the same time. (A preliminary step in page optimization)

I like to use images in my posts. Since many will appear within the length of my homepage it’s good to have some kind of optimization going on.

Themes Coding, Themes, WordPress View Comments

After a huge falling out with FireFox over memory usage, I was once again in the market to try another browser. I’ve been around the net for some time now and have found that all the other major market share browsers have ticked me off in one way or another.

Be it page rendering problems, high memory usage, processor bog downs, or just PITA interfaces, they’ve all let me down.

I’d looked at Chrome briefly during it’s very short Beta period. As impressed as I was I simply dismissed it as too early for full time use.

Out of Beta now, it was time to give this browser another look.

It’s really very good! After 2 solid days of running Chrome, I don’t see any of the issues which always seem to plague me with other browsers. Normally by now I would have had to shut down and restart other browsers for one reason or another. It appears that when you close a tab in Chrome, you actually get ALL the memory it was using back. Amazing!

The only essential thing keeping me from switching to Chrome full time is it’s lack of developer tools. I’m talking about tools like FireBug for FireFox and the like. Until Chrome sees tools like this I will be forever tied to using FireFox for development. However, I’m hoping good things will come from Chrome V2 in regard to this.

I realize there’s a console in the Developer options of Chrome but it lacks FireBug’s ability to edit CSS and other elements on-the-fly. I rely on FireBug heavily as it’s fantastic for fine tuning layouts, styles or just quickly inspecting how other sites achieve effects. (Yeah, I’m a big ol’ snoop! )

Chrome seems to be light and efficient which is perfect for ol’ FrankenPuter here. Hopefully that will remain in version 2.

If you’re running a slower system like me, then definitely have a look at Google Chrome. Your computer will thank you.

Software Google, Web Browsers View Comments

Before anyone bitches, that’s indeed yesterday’s screen shot to the right. Most of the changes made were done ‘under the hood’ so not much changed to the look. (Plus I was too lazy to take a new screenshot )

The main thing I want to cover today is the topic of Source Ordering. By making a small change in page rendering we can ensure that our content gets displayed before all the sidebar crap.

For instance, our blank template did things in this order:
(From archive.php, index.php, page.php, single.php)

<?php get_header(); ?> /*Get header and top menu*/
<?php get_sidebar(); ?>/*Display all the distracting sidebar crap*/
Content items here
<?php get_footer(); ?>/*Display Footer*/

If you CLICK HERE and view the source from yesterday’s theme, you’ll see that all the sidebar items are listed BEFORE our content. If you run a heavy sidebar then your content is miles down that page.

So let’s change things around a bit:

<?php get_header(); ?>/*Get header and top menu*/
Content is now much higher up in the source code
<?php get_sidebar(); ?>/*NOW lets do the sidebar crap*/
<?php get_footer(); ?>/*Display footer*/

Now, if you CLICK HERE and view the source from today’s theme, you’ll see the content is MUCH higher on the page. Your content is now more accessible to Search Engines. They don’t have to crawl their way through all the ads and other things which usually populate sidebars.

Speaking of putting important things first, let’s have a quick look at how titles are handled.

(From header.php)

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

As you can see by the screen shot the site name is first and our important article title is second. (Third actually, after the useless ‘Blog Archive’ label)

We can fix that by replacing the above line with:

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Much better! Now our article title is first and mention of the site is second. I also removed the code which displayed ‘Blog Archive’ in the title for single pages. Not really necessary, I find. If I were to leave it in I would have put it after the title and not before as it had been originally coded.

Other than adding my name to the footer (for ego purposes) the theme appears exactly as it did yesterday. The only difference now is the information displayed has better accessibility.

Themes Coding, Themes, WordPress View Comments

I ditched my original idea of stripping down the default WordPress theme in favour of a pre-made blank theme. What can I say? Several hours of code ripping just didn’t appeal to me at all. I’m more interested in building than reverse engineering at this point.

I’d rather spend my time with graphics and layout than basic typography. With a blank theme you’re given all the required basics. A perfect starting point.

So I hit Google and came across Refueled.Net offering a few styles of blank themes. I’m a big fan of the right sidebar so I grabbed the appropriate layout.

Since I want to optimize for a 1024px layout I had to make a few changes. The theme and header image were optimized for 800px layout so I simply removed the image for now. We’ll put it back later.

Changes to style.css:

• Made some changes to optimize for 1024px width.
• Adjusted the width of the top menu as well as the sidebar to reflect the above change.
• Decreased the height of the header from 160px to 100px. Too big for what I have in mind.

Below are the code snippets of the changes:

#container {
    width: 970px; /*[Changed from 760px]*/
    margin: 0 auto;
    padding: 6px;
    background:#fff;
    color:#333;
    border: 1px solid #0B1224;
    }

#header {
    background: #DDD;
    width: 100%; /*[Changed from 760px]*/
    color: #fff;
    height: 100px; /*[Changed from 160px]*/
    }

#header h1{
    font-family: palatino linotype, georgia, arial, times;
    font-size: 16pt;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;   
    padding: 40px 0 0 16px;   /*[Changed from 120]*/
    }

#menu {
    background: #0B1224;
    font-family: verdana, arial, times, serif;
    font-size: 8pt;
    width:100%; /*[Changed from 760]*/
    height:25px;
    border-top: 1px solid #fff;
}

#content {
    float: left;
    width: 680px; /*[Changed from 72%]*/
    overflow: hidden;
    }   

#sidebar {
    font-family: verdana, arial, tahoma;
    font-size:8pt;
    width: 280px; /*[Changed from 200px]*/
    float:right;
    margin: 12px 0 24px 0;
    padding: 0;
    border-left: 1px dotted #A2A2A2;
    }

You can click the images to see both in action.

Now that I have my desired width and a general layout I can start envisioning some graphics. I’m not the best graphic artist in the world so it might be a few days before I post on this topic again. Remember, I also work for a living.

Themes Coding, Themes, WordPress View Comments

With three short lines of code in your theme’s header.php file, you can instantly have lightbox capabilities on your WordPress 2.7 Blog.

In case you haven’t poked around the backend since your upgrade to Wordpress 2.7, this version includes the ThickBox Script for previewing and selecting themes. (Or was this in 2.6 also? Can’t remember.) If the code to do this is already there, then why not use it on the front end too?

Here is all you need to do:

Go to your theme directory and load ‘header.php’ into your editor. Add the following three lines within the <head> </head> tags:

<script type="text/javascript" src="wp-includes/js/jquery/jquery.js"></script>

<script type="text/javascript" src="wp-includes/js/thickbox/thickbox.js">
</script>

<style type="text/css" media="all">
@import "wp-includes/js/thickbox/thickbox.css";</style>

Save/Upload the changes. That’s it! You’re now ready to use ThickBox on the front end.

You only need to add a couple extra parameters to your links to get it to work.

<a href="license.txt?height=600&width=800" title="WordPress – License.txt" class="thickbox">CLICK HERE FOR EXAMPLE</a>

In this example, I’m displaying a text document (the WordPress License) within a scrollable window. Appending ‘?height=600&width=800’ to the link defines the size of the lightbox. The class="thickbox” completes the job.

CLICK HERE FOR EXAMPLE (Note: May not work within all news readers – visit the site)

Works for images too! More options for using ThickBox, can be found here. Just ignore the download and install instructions as that’s already been done by WordPress.

I just stumbled onto this and thought I would share.

WordPress Coding, Themes, WordPress View Comments

As much as I adore the current theme I’m using, there’s one huge problem with it…

I didn’t create it!

The blog still feels like rented space to me and not the ‘home’ I’m ultimately seeking. So, let’s do something about that, shall we?

In my very first post here I discussed our options when selecting themes. The last option I mentioned was the Do-It-Yourself (DIY) route. We’re going to explore this more in the coming weeks as I start this series of posts on the topic.

Before I go any further I should point out that I am not an expert theme coder. I expect to make mistakes, blunders, and bone head moves (all in public, no less!) which I ultimately hope to be called to answer for via comments from my readers. I simply mean to come at this as an ‘intermediate’ because let’s face it, newbies and experts aside, a lot of us fall into this category of skill level.

Who knows. Maybe we’ll all learn something in the process.

Preparations:

I’ve setup two sub-domains to aid in the development of the new theme. The first sub-domain will house a default WordPress setup with a theme switcher plugin installed. This way, I’ll be able to post about my progress and provide a link to a working version of the theme on a post by post basis. That’s to say if someone a year down the road is reading the post, the link provided will demo where the work stood on that particular day. A visual timeline of sorts.

The second sub-domain will house the theme images. Most browsers can only load 2-4 images simultaneously from any single domain. By keeping theme images on a sub-domain and content images on the main domain, I can increase the load speed of the site dramatically by allowing an additional 2-4 images to be loaded at the same time. (A preliminary step in page optimization)

Today’s Link simply takes you to the default WordPress theme. Nothing special there.

In my next post we’ll be stripping that puppy down to basic code. From there we’ll start building our new theme based on what’s left. Ripping apart and rebuilding a default theme is a great learning technique, not only for WordPress, but other CMS’s as well.

Themes Coding, Optimization, Themes View Comments

One of the first things suggested to me in regard to blogging was to have my picture taken and start plastering that along side my name as my avatar. Branding… bla bla bla.

As good as this idea was I have an aversion to having my picture taken. I hate it! I’m much like my father in this way. In fact, the last time I had my picture taken (that I know of) was for my 20 year old driver’s license. We all know how ‘good’ those pictures can be.

My fake smile comes off as ‘creepy’ every time, in my opinion. So instead of creeping out the entire blogosphere, I’ve decided to go the mascot route.

Allow me to introduce you to Kaffy – The Kaffeinated Kitty. Kaffy’s been with me for a number of years now and we’ve been through thick and thin together. He’s appeared with such slogans as ‘Coffee Addict’, ‘More Coffee’ and ‘Juan Valdez is my buddy’ and currently sits beside several thousand forum posts across the web. He’s associated with my forum nickname of StarLab.

If you see Kaffy now, the first thing you should think is: ‘OMG! It’s Larry!’ The second thing you should think is: ‘I Need Coffee!’

My buddy Kaffy – Saving the Internet from my creepy smile. lol

Odds N Ends Asides, Social Media View Comments

I’m guessing the more experienced among us can go grab a smoke and coffee while I, once again, talk about starting up.

Too much information (TMI) and not enough time can be a harsh cocktail. If you’re like me then you have a real life job to work at too. So how do you manage your time effectively when dealing with all the information that flows on a daily basis?

On a previous venture into blogging I made the mistake of trying to follow everything. I’d obtained an exported OPML for my RSS reader containing hundreds of feeds and signed up to all the hot social sites. It was too much and I found myself turned away rather than inspired to continue. 

This time around I’m taking it slower. Instead of someone else’s OPML file I’m building my own RSS subscriptions in the areas that interest me alone. Much less clutter. I can follow a couple dozen blogs better than a couple hundred. Same thing with social sites. I’m following/friending fewer people this time also.

Don’t get me wrong. I doubt things will remain this light as I continue on. I may end up at those several hundred feeds and many friends at some point anyway, but at least it will be a silent progression rather than a cacophony hitting me all at once. Perhaps the future will allow more time to handle the load.

I guess the point here is ease yourself in. There’s nothing worse than sitting there at 4:30am with an unfinished post and having to work at 8am. Why did you stay up all night sidetracked from what you set out to do?

Stay focused. Less can actually mean more in the long run. (You are in this for the long run, right? )

Blog Startup Blog Startup, Social Media View Comments