I’m sure most people have heard of John Gruber’s title-case perl script, and if not, you should check it out. Basically, it capitalises strings to be grammatically correct headlines. However, Gruber’s original is in perl, not php like wordpress.

Fear NOT! Mr Kroc Camen came to our rescue, with his version of titleCase, so, we open up functions.php of our theme file, add in his titleCase function to the top of the file, then add in the following line:

add_filter('the_category',  'titleCase');

This line tells wordpress to apply the titleCase function to the hook the_category. And That’s it — Automatically capitalised categories.

Yep, another shorty.

Another thing, was that YetToBeBranded is a company website, not a blog, so I’m using a custom frontpage, which complicates things just a little.

My permalink structure was to be simple: /articles/ is all my articles, it’d be based on title of the article. However, when I set my permalinks to be

/articles/%postname%/

I also had a page called ‘articles’, which was the default frontpage of a wordpress blog. I messed around for quite a while, trying to figure out why my pagination was bugging up in the custom permalinks, the answer:

Because I had a page called articles, and my articles where pointing to that page, instead of that post, there was conflict. The solution was to set my permalinks to:

/article/%postname%/

This worked. I’m not sure if this article will help anyone else, but this helped me, as i couldn’t find the solution to my problem in the codex or related resources.

What’s News?

Did I mention I got employment of sorts with NapalmRiot Inc? Well, yes, I work for NapalmRiot as a CSS / JavaScript Ninja, expect to see more awesome stuff from them soon. Not a Member? Signup Today!

What else… I’ve Started work back up on dAmnZilla, I’m totally revising it’s User Interface and recoding large portions of it, It’s getting some really cool features added in. Oh, yeah, It’s my birthday today, happy birthday to me. Woot.

Also, work on YetToBeBranded.net has ground to a stop for a while, for I’m working on some much bigger and cooler projects right now. I promise, actually, Is there such thing as birthday resultions? Okay, I make a birthday Resolution to get YetToBeBranded Live before my next birthday.

In Slightly other news.. Here’s some interesting Design Concepts:

• Brunch: Celebrating The Mundane
• Creative Navigation Designs: Look at that style?

Oh Well, That’s about it from this news room.

…You’re Listening to Micheil from YetToBeBranded ramble on about random news in october since the last news update… Oh Yeah, The Birds are Tweeting, and The Sky Is Blue — Music is in the Air.

A Common solution to this is to use CSS Indexing, where you set up a system of comments to be able to quickly find your way around your files. While this method of having Comment Headings for each section works, it still leaves you with a massive file size.

Another solution is to go the way of a Framework, where by you break each part in your css down to it’s core components. A list of the core components may look quite similar to the following:

reset.css

Yes, I use a reset stylesheet, simple because it makes it easier to develop styles consistently across browsers.

typography.css

This includes everything to do with type. From the Baseline and Line-height settings, right through to font-sizes and image alignment.

grid.css

A standard style grid systems. Typically including CSS for doing column layouts and table grids.

importer.css

One file to @import in all your CSS files, alternatively you can just link in each of your stylesheets using the <link> tag in HTML.

From that basic layout of files, I then use a I trick call “Body Identification”, this is simply the method of applying a unique ID to each type of page in your site. e.g. If your ‘about us’ page needs a red background, then I’d use this selector to apply the CSS rule.

With using a unique page ID, it’s probably a good practice to put all the CSS files named by their unique ID’s in a folder called ‘pages’ or ‘layouts’. You’re file structure is now looking much more like this:

• ./ grid.css
• ./ reset.css
• ./ typography.css
• ./ pages /
  • aboutus.css
  • frontpage.css
  • blog.css
• ./ importer.css

So there you have it, a simple way to manage your css, with the benefits of being in small chunked files, having an abstracted framework to work around — a Scaffold, if you will — and, you also have highly specific stylesheets targeting individual pages of your application.

You can Learn more about CSS Frameworks at:

• Alistapart: Issue #239: Framework For Designers
• Monday By Noon: Please Do Not Use CSS Frameworks
• Smashing Magazine: CSS Frameworks + CSS Reset: Design From Scratch
• Wikipedia: CSS Frameworks

What’s your own take on the Use of CSS Framworks and They’re Applications?

Painting Clouds In The Gimp

1. Create a new blank canvas any size you want, I used 1600×1200, set the canvas up with the following settings:
   

   Colour Space: RGB; Fill With: Transparency

2. Here comes a fun part: Take out the paintbrush tool (P), select a nice greyish blue colour – #6caad8 maybe? – and then paint on a few circular scribbles:
   

   Animation Of Painting: Quite simple to do, and also, quite fun if you make it.

3. Now, take out the Dodge/Burn tool ( Shift + D ), and start Dodging colour away from the inside out ­– I used a brush size of 15, a scale of 1, no pressure settings, mode of Midtones, and an exposure of 40.
   Note, This needs to be done in one mouse click
4. Now, still with the Dodge/Burn tool, Repeat the process of step 3. You should end up with something like:
   

   What I ended up with; After trial and error, you'll get something that looks about right.

5. Here’s another fun part: Take out the Smudge tool ( S ), and start smudging the colour from the light area to the transparent area.
   Note, I had to fill up the transparent areas that I’d left, simply by using the paintbrush and Selecting the colour I needed to patch up.)
6. Duplicate the first layer below itself, and add a Gaussian Blur (Filters -> Blur -> Gaussian Blur), and set the radius to around 60 (or whatever looks right to you).
7. Merge the two layers together. Add a Layer Mask to the resulting layer, we want to select “Black (full transparency)”. Switch to that layer mask – next to the layer preview, there should now be a black box with a white border. (You’re cloud will disappear, due to the layer mask)
8. Now, take out the gradient tool ( L ), select the shape of Radial and the colour to be white. Then, draw on to several gradients from the center of your cloud out. (As you do, you’re cloud will become visible again)
   

   I'll be the first to admit, that this is kind of cheating.

9. And now we’re pretty much done, you may want to add another layer select the cloud via “alpha to selection” and filling it with white, so you’re cloud isn’t a bright blue. But other then that we’re all done. Here’s the original tutorial, once again.

The Final Piece of Work, with a few additions

If you say that you live in Canterbury Fields, 10 High St, Apartment 44, then your telling the world that you live at that location, your not usually saying that to just a small audience, but rather a global audience. You can’t complain, if you have something happens, because, if you’ve broadcasted information that you wouldn’t normally tell someone you don’t know.

However, on the opposite side to that, if someone else posts information about you, then that I consider to be an online privacy problem.

Okay, so expect this blog to be moving there sometime in the next few months

1. Paper Sketches
2. xHTML + CSS

This is almost similar to the process I use, however I introduce another step; But before I get to that, I’ll explain traditional, and possibly most well known method. It goes something like this..

1. Brain Storming
2. Rough Paper Sketches
3. Refined Sketches
4. Photoshop mockup
5. Prototyping in HTML + CSS
6. Full blown development

This process has worked for different people for a number of reasons, for one, it’s well structured and gives plenty of time for thought. Two, It’s a way to collect and streamline thoughts before actually starting anything in hard code or pen on paper.

I can’t say i’ve found this method to ever work very well for me; I’ve tried to use it a few times, not because i suck at photoshop, but because i like to be too precise, there’s too much detail i can put into a drawing. A sketch on the other hand, i can easily change, modify and rearrange.

My Process goes something like this..

1. Research and Inspire
2. Rough paper sketches
3. Dimension sizes of things on using tracing paper.
4. Work from paper straight into xHTML + CSS templates
5. Add in server side code and javascript as required.

The reasons this works for me is because before i start anything, i make sure i have very clean, clear and good looking sketches, this means the the photoshop stage is pretty much in the sketch stage. Then I just take a step to the right, and go straight into the code, head first.

What are your thoughts on the process? Do you work similar to me, or how do you work?

In the past, Tane’s worked with various frameworks over the years, including Django, CakePHP and Facebook Application Library, having also been a contributor to the jQuery UI Project. His primary skills include:

• MySQL / SQLite3
• Apache / Lighttpd administration
• Debian Server Configuration and Administration
• PHP / Drupal / WordPress
• Python / Django
• JavaScript / jQuery / Ajax
• Familiar with concepts such as Ajax, Comet, Microformats, SEO, RDF.
• Facebook Applications

Reason for me pimping him? He’s a good friend, and colleague on occasions. If you would like to hire me, please contact info@digitalspaghetti.me.uk