But all that whining and complaining aside, WordPress is a good tool. Why be humble...WordPress is an excellent tool! That's why I'm creating another theme that'll soon be distributed all over the net.

It's a theme in which I make use of the wp_list_pages function. If you've used WordPress for a while, you'll know that this function outputs quite a few extra classes by the name of page-item. Well, I don't need them and don't want them in the code. To remove them, I've taken all my PHP know-how, ahem, cough... and timbered together a small function, more precisely, a WordPress filter which has the sole purpose of stripping the class attribute and its associated content. The ingredients with which the page-item class and the HTML class attribute get removed from the markup is as follows:

  
function remove_page_class($wp_list_pages) {
$pattern = '/\<li class="page_item[^>]*>/';
$replace_with = '<li>'
return preg_replace($pattern, $replace_with, $wp_list_pages);
}
add_filter('wp_list_pages', 'remove_page_class');
 

1. 1. Create function remove_page_class
2. 2. Define a variable $pattern and assign it a regex pattern that selects the li attribute class and its values
3. Define a variable with the code that you want to replace the above with
4. 3. I use preg_replace, a function that searches and replaces a regular expression. In this case, I'd like to modify the output of $wp_list_pages, thus my preg_replace searches in $wp_list_pages for the markup that matches the value I specified in my $pattern variable and replaces it with the value of my $replace_with variable

And that's pretty much it. If a PHP guru or— PHP Ninja, as an expert is referred to these days— and find there's a better, leaner method, do shout away. I've just started learning PHP and am grateful for all sorts of input.

Categories: Development

Tags: php, theme, wordpress

The grid is about 92% done, there are still some minor inconsistencies I need to iron out. I realise there are ready-made CSS grids out there, and I could have just slammed one of them on here. But ready-made CSS grids are like fast-food. You consume them because they're fast, easy, and convenient. And you haven't a clue what's what underneath. You just trust it does everything the way it is propagated. That's one reason I don't really like fast-food. Not that it's bad, but I prefer to cook my own meals if I can. And I prefer to code my own grids, even if it makes the whole process a bit slower. It just feels better. :D

Anyhow, I'm using the latest version of ExpressionEngine, EE2, and I'm having a blast! I found the admin interface to be slightly confusing at first — still find it a bit counter-intuitive in bits and pieces — but on the whole, it's refreshing to work with it. The Admin doesn't come off quite as well in Opera 10.60, my favourite browser, as it does in other browsers, but it's good enough for me.

That's all I have to write for now. I'm still working on getting the minor quirks and bugs ironed out, and complete my grid. Should you find any bugs or have critique, want to shout me down, please don't hesitate!

Categories: Update

Tags: redesign

Everything they touch seems to turn into gold, every web application they produce an instant success. Not just for this it stands to reason that they would write about and share with the rest of the world what made them so effective and, eventually, so successful.

What I particularly like about this book is that it’s bold. It’s bold, brisk and highly opinionated. And that’s a good thing in my book (no pun) because you sense the amount of passion and dedication Jason Fried, founder of 37signals, with every drop of ink this book has consumed.

What we get to learn about is their philosophy, their idea of what makes good work great, and the particular frame of mind it takes to do what they have done and continue to do.

What we don’t get to learn are in-depth explanations and thorough examinations on how to implement the ideas and methodologies the fine folk at 37signals applied to their way of working.

What to do when the conditions, such as deadlines, firm-specific work ethics, a boss, or any and all factors that need to be accounted for and that you have zero control over, overwhelmingly limit and restrict us in our day-to-day work and design process?

If you’re one of a hundred, have no veto and generally little influence over how you work, then you might as well leave this book on the shelves. Likewise, should you expect to be exposed to an in-depth view on interaction design or given technical instructions and guidance on how to apply the propagated methodologies within long established companies with little incentive to change how they work, then you’re out of luck.

However, should you be a small(ish) company, your team comprising no more than a handful of people, have good control over how things get done, can motivate and enthuse your team members to follow a certain dogma, then this book is more than apt and fitting.

In short; Getting Real is a 170 pages long comprehensive mantra on how to get things done.

Fried suggests that we focus on the big idea, that we build from macro to micro, having the big picture and working ourselves down and getting to the nitty gritty details at a much, much later time in the process.

While we’re at it, should you be one of those hopeless perfectionists... [I aggressively wave my arms in the air, nodding vehemently, and that’s a nose-bleeding heavy nod!] you might as well leave that unwanted characteristica at the door before going any further.

So how does ignoring perfectionism and other astronomic ideals set free the means and devices needed to aid us in our journey to becoming more efficient, more successful business people?

Short answer: By getting real (har, har), by not setting goals and expectations we can’t meet, because they’re either impractical or simply unrealistic.

Well, that’s the short answer. The slightly longer answer goes as follows:

Keeping it Small

The book gives us plenty examples that demonstrate the advantages of keeping things small. A small team can better manage tasks because there are less people to communicate with, less instances or pre-production cycles to overcome. Being small allows you to react to your site visitors, the people who use your product, faster. Being small makes you agile and permits changes, and bug fixes to be done instantly. Being small reduces the distance between yourself and your customers, service and support can be more personal. Many more advantages are explained in the book, so the ones depicted here are a select few.

Focusing on the Essentials and Learning to Say No

Focusing on the big idea does not imply that your product or service must be filled with more features than you can eat. It does not mean that you have to offer everything. It does not mean that you have to outperform your competition, be it in features or in price. Fried suggests that you outperform your competition by underperforming. While that thought might sound strange at first, the book offers sound reasoning why that makes perfect sense and additionally presents us with opinions of some popular voices in our industry.

He even goes as far as recommending that you upload your unfinished product or service. Why? Because you’ll never have it complete — that goes back to the perfectionism thing I touched on earlier — a design, a product, a service, everything is a process, a process of iteration. So why not get it out there, even if it still has a bug or two, needs some code optimization, and no more than barely the essentials?

What you get in return is the most precious thing any of us should value at this very early stage of production - namely the feedback of your customers. The sooner you get your product or service out to the people, the quicker you understand what works and what doesn’t. Those are first-hand reactions to your product. And since those are the people who’ll later be paying for your offerings, it makes good business sense to optimize it to reflect what your site visitors have communicated.

And finally, one more significant aspect of 37signals’ philosophy is that of negation. Saying no, and saying it often, allows your products to stay focused on what is essential, and do what it is supposed do well. By saying no to every feature you think of at the start of a project, you can quickly learn what you really need by simply leaving out everything else. In other words, the book strongly suggests that the competition isn’t mimicked, that we don’t fill our application with everything that we think we need just because someone else has it. We are encouraged to keep things simple, build on the essentials and add features responsibly and only if these really extend the effectiveness of using said product.

To summarise: Less in every shape or form is neither a deficit nor a hindrance to success. Having a small and smart product or service, one that was borne out of ones own needs and was later formed into a product based on what our customers have said, makes for a powerful, user-centric solution. Being small does not hurt either. It can facilitate more agility, allow us to communicate with our customers closely, react to their feedback quickly and submit our iteration fast and conveniently.

Categories: Books

Tags: books, reviews

1. <ul id="nav">
2. <li><a href="homepage.html">Home</a></li>
3. <li><a href="about.html">About</a></li>
4. <li class="last"> <a href="contact.html">Contact</a></li>
5. </ul>

I might also want to change the last class attribute for the third weblog entry because I've decided that I want my last column to not have any margins.

There are plenty of ways to go about altering the first, last, or odd item, but I've chosen to use one of the very simple means, namely using ExpressionEngine's built-in conditional global variables.

So, to be clear: What I want is to have three columns in a row. All three columns have the same class, in this case the class is column. I want the third column to have the additional CSS class last-item because I'd like to change the value of this item's margin. Yes, we could use CSS' ":last-child" or "nth-child" property, but that's for another day. Today, I'd just like to show you how you can manipulate small chunks of code - or large chunks for that matter - by simply using EE's conditionals and variables. You can apply this logic to pretty much any piece of code you'd like to modify.

Raw HTML code without ExpressionEngine tags:

1. <div class="column">
2. <h2>My title</h2>
3. <p>My excerpt</p>
4. </div>

But we want to take advantage of EE's tags and create dynamic content, so our code will now look like this:

1. {exp:weblog:entries weblog="blog" limit="3"}
2. <div class="column">
3. <h2>{title}</h2>
4. <p>{excerpt}</p>
5. </div>
6. {/exp:weblog:entries}

The third entry needs a second class appended to the HTML. I'm giving it a class name of "last-item".

1. {exp:weblog:entries weblog="blog" limit="3"}
2. <div class="column {_if count == 3}last-item{/_if}">
3. <h2>{title}</h2>
4. <p>{excerpt}</p>
5. </div>
6. {/exp:weblog:entries}

(remove the underscore before the opening and closing if)

What's changed? If you look at the class attribute of the div, you'll see that I've added a conditional global variable, namely the if conditional. In addition to that I've applied the single variable {count}. In plain English it reads as follows: "If the item is equal to 3 (the third item), then append the CSS class last-item to the HTML element."

And that's it. There are plenty of conditional global variables and single variables that allow for tons of flexibility without resorting to add-ons.

In closing it should be noted that this technique works for EE2 as well. Replace weblog with channel and you're good to go.

Categories: Development

Tags: expressionengine, tutorials

Yes, I'm alive!

My last blog post has been a while. I'd have loved to be able to say that I was so busy that every effort of stealing a fraction of a minute to quickly write together a post were all but a luckless effort. Or that my clients dragged me into a dark, scary, empty room, shut the door, and condemned me to keep the silence forevermore!

Alas, none of that happened.

I neglected to write anything for no other reason than not finding a reason to write. I concentrated on working on my clients' projects, successfully neglecting and blissfully ignoring everything else.

I am, of course, still working on my clients' projects. However, a designer's life comprises more than working for others, day in, day out. While a priority, I've realised that I tire much quicker when a day's ritual is entirely void of diversion and there's no room left to train the mind and explore ideas that are not bound to a deadline.

And I have ideas. I have plenty ideas. Even some good ones. And now is the time to no longer be my own worst critique, and just put myself out there and write, no matter how futile, horrible, or good.

I've evolved. I've been gradually and consistently honing my skills. I've garnered insights to complex matters that have altered - and dare I say bettered - my view on designing for the web.

These are exciting times to be in the industry. The tasks of a web designer are getting more convoluted, intricated by the day. And, at the same time, the web is getting quite a bit more flexible. It's the electrifying beauty of the insanely fast-paced progression that's prompted me to hop back onto the blogosphere - not that I've ever been part of it - and write about all the things that inspire, astound, irritate, and energize me, and - if I'm lucky - you too.

Categories: Update

Tags: updates

So, to highlight your current navigation item, you would create an embed variable.

This is the standard structure of an embed variable:

1. {embed="mytemplate" parameter name == "parameter value"}

Example:

1. {embed="navigation" sausage == "frankfurter"}

In plain text this means your embed variable consists of the parameter name of sausage with a parameter value of frankfurter.

For my navigation, I would then create a parameter value for each navigational element within each template which would look like the following for my portfolio index page:

Rinse and repeat for each page you link to in your navigation.

Next, you will want to create the embedded template. I use a separate template group for my embedded templates and have assigned it the name inc. My navigation template is called _navi, hence, in order for EE to understand that we want to highlight the current navigation item, we have to tell it to do so by implementing conditional variables, in this case the if statement.

Another really nifty way of having your current navigation item highlighted, is by using Solspace's Selected plugin. It's extremely easy to set up, and does not require any embedding or the use of conditionals for simple setups.

If, for example, you had a list of weblog entry links in your left column and the single entry in your right column and wanted to highlight the current item a user was on, then you would use something like this:

1. <ul>
2. {exp:weblog:entries weblog="{my_weblog}"}
3. {exp:selected item="{segment_2}" replace="class='selected'"}
4. <li {selected_{url_title}}><a href="{/comment_url_title_auto_path}" title="{title}">{title}</a></li>
5. {/exp:selected}
6. {/exp:weblog:entries}
7. </ul>

(remove the slash in the comment_url_title_auto_path variable. EE automatically turns it into a link in my entries).

You can also use a static menu:

1. <ul>
2. {exp:selected item="{segment_1}" replace="class='selected'"}
3. <li {selected_news}><a href="/news/" title="Latest News">Latest News</li>
4. <li {selected_about}><a href="/about/" title="About">About</li>
5. {/exp:selected}
6. </ul>

Here, the second part of the parameter is your actual value, in this case it is the first segment (segment_1) that is replaced, so if you want to highlight a segment, you'd give the second part of the paramter the exact url title. In my example, the exact url title is news and about respectively.

There are many more uses for the Solspace plugin, but here I've highlighted two possibilities of its use.

Categories: Development

Tags: development, expressionengine, tutorials

There has also been quite a good amount of spam that paved its way through my comments and thus affected my readers as they received those wonderfully precise and eloquent trash in their mailbox. I have done away with that by implementing a captcha feature. I despise captchas with a passion, but at the moment, this seems the quickest and easiest, if not entirely accessible way of preventing the agressive spam of lately. Should you know of a wiser solution, do share.

Meanwhile, I am not in the least prepared to neglect cleaning up the rest of the few remaining quirks and minor technical issues and will attend to these bit by bit, and sooner rather than later.

On the writing aspect of things, quite a few articles are in the pipeline and waiting to be released, so do stay tuned and I'll do my best to not disappoint.

Categories: Update

Tags: updates

If I do it with Books, why not do it with Websites?

What do your books look like? Are they neat and clean? I don’t mean coffee marks or other unnescessary stains or speckles of dirt; I mean clear signs that a book is heavily used. My books mdash; for the most part mdash; are a complete mess. Why? Because they’re tools. They’re the hammer and chisel I use, sometimes abuse, excessively amd exhaustively. I write extensive notes on the sides of a page, sometimes a hundred words or more. I underline paragraphs, add questions or exclamation marks when I feel something is either right on the mark or when I’m uncertain of the meaning of certain paragraphs. I use a yellow neon-marker to mark passages that contain a thesis, mark passages in neon-pink that illustrate possible anti-thesis/counter-arguments, and finally use a green marker to highlight the thesis’ conclusion. I place paper notes where adequate with bullet points to help me find the proper information I seek next time I need it. In short, my books look used, torn, and often have very little resemblance in apperance to when I originally bought them.

On the web, having a documentation habitus, is of even greater importance, unless you design solely for yourself.

Only recently, I’ve made it a habit to always document significant steps taken during the course of designing a web site for a client. While doing this may be considered a daunting and unnerving task, it can pay off in the end, and in more ways than one.

The Benefits are not Limited to the Designer

Firstly, I tend to experiment a lot when constructing and prototyping a new design. This is not only a fun task, but also a very challenging one many times. Designing layouts that contain stylistic touches that are not overly common, usually require for my CSS to be extravagant as well. There is no way at all, I will remember what I did to client x’s design four years ago. Not remembering means lots of searching and guesswork. Lots of searching means lots of time wasted. I can’t tell you how many times I’ve had to revisit my own techniques because I had failed to document exactly why and how I coded something, relying on my memory entirely, which is not a very wise thing to do.

Secondly, documenting code and explaining why I have written a piece of code in such way or another, also tells me that I understand exactly what I’m doing. If I don’t know the whys and hows, or have quickly looked up a technique from a book without having learned the methods applied thoroughly, I won’t be able to explain it, right? Right.Therefore, documenting properly can be a good mirror to my current level of expertise.

Thirdly, the most important benefit to documenting my code is to enable clients and developers to maintain the site independently from me, should they so choose, and doing it beautifully, without breaking the design, its aesthetics, and its accessible markup.

Well-documented Code is more than a Memory Crutch

What it really is, is a:

• Accessibility Enabler - I am able to explain why I used non-semantic containers such as the span element, and slightly more semantic mdash; but still fairly neutral mdash; such as the div element to construct my contact form instead of using a list or table.Because opinions on Best Practices in the Web Standards world differ quite significantly in many areas, having good arguments for doing what I do and being able to explain why I chose what I chose, allows for insight, discussion, and enhancements. I can replace certain elements based on newly won cognition on how to best present specific information.
• Usability Enforcer - When having performed a re-design for Jane Doe’s company, I’ll have documented why I’ve done away with the poorly executed drop-down menu and instead applied a one-level navigation, and placed sub-menu items on the right-hand side. Shall a designer/developer mdash; at any given time mdash; seek to make changes to the navigation architecture, he’ll know and understand the reasoning behind my design decision.
• Efficiency Maker - Obviously, having documented my code will help save time. I can come back to a design I’ve made years ago and can quickly access the information and logic of the code applied. I may just want to modify the colour scheme slightly. Perhaps I’d like to reduce the markup significantly, optimize, or enhance it to accomodate new browser-integrated CSS rules and the like. I can do this easily when I have my style-, and HTML documents well commented. It not only saves me a lot of time and headaches, and the client lots of money, but is simultaneously most beneficial to developers or teams who work on and maintain the same site.

So, making notes, writing good documentation is not a waste of time, not in the long run. I wish I had started out this way when creating websites and using the space I’m given in a HTML or style document, and mdash; for extensive documentation mdash; use separate documents to write down a table of contents, just like any good book does.

Categories: Development

Tags: development, workflow

Anyway, I have selected a few fonts (it is a good idea to read the license agreements for each of these releases) that I really like and have put on display below. At the very bottom of the article, you'll find the links to some of these foundries as they offer quite a few fluffy typefaces for free that I have not listed.

Stylish — by Stefan Hattenbach

Download Link | Distributed by MRF

FF Nuovo — by Xavier Dupré and Martin Majoor

Download Link | Distributed by FontFont

FF MT — by Erik Spiekermann

Download Link | Distributed by FontFont

Lido STF & Lido STF Condensed

Download Link | Distributed by Stormtype

Gentium

Download Link | Distributed by SIL

Teaspoon — by Haley Fiege

Download Link | Distributed by Font Bros

Sovereign

Download Link | Distributed by type.co.uk

And a few More

• exljbris
• Mac Rhino Fonts
• DerSven
Font Bros
• Manfred Klein
• Dieter Steffmann
• Stormtype
• FontFont

Categories: Design

Tags: fonts, foundries, type, typography

Smashing Magazine — a magazine I've grown to love and visit quite often — is releasing one of my themes today, so a big hurrah is in order and I'm quite thrilled and honoured, I must admit.

If you do like fun eyecandy with not too much graphic overhead, head on to Smashing Magazine and download the theme!

Categories: Freebies

Tags: freebies, themes, wordpress