Here is a quick code snippet for displaying any given number of articles, related first by tags and optionally from the same category. This is by no means definitive solution, but might come in handy as a quick start.

Drop this inside the loop in single.php template, I suggest right behind the the_content() call. See it in action on the live site.

Use it as a base for more advanced features, or simply c/p. It’ll work :)

Continue reading »

HTML5 is the buzzword this season. Leading people in the industry are using appropriate class names for what will hopefully once become fully supported structural elements. Fully supported = fully supported by browsers.

In getting ready for HTML5 instead of element header:

<header>Site Name</header>

you’d write

<div class="header">Site Name</div>

For the inclined readers, here’s the HTML5 working draft. Quick overview of the element list will help you catch the train.

Definition lists, rediscovered

Definition list is a personal favorite HTML pattern for marking-up 2 or more related content elements. I found it especially useful when nested in list-items on search results pages and various tag/category listings. This raised a lots of controversy in the past and is still raising today, but I won’t go down that route now. Here’s just a quick example, just in case you don’t have a clue what I’m talking about:

<ul>
    <li><dl>
        <dt>Title</dt>
        <dd class="thumbnail"><img src="image.jpg" alt="" /></dd>
        <dd class="abstract">Lorem ipsum dolor sit amet...</dd>
    </dl></li>
</ul>

The all new rediscovered use of definition lists is with comments or dialogs, for instance Twitter conversation. It has always been it’s intended for this, but now with the dawn of HTML5 (or launch-break for many) it regains the popularity.

HTML4 specs say:

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

And here it is:

<dl class="dialog">
    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>Oh, it looks beautiful with shortcuts.</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>What? But we have full sentences over there!</dd>  

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>Huh?... but it breaks my grid?!
        F*ckin user generated content.</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>Another solution is: we don’t let users post anything.</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>No, we can’t do that neither.
        How about we ask
            <a href="http://twitter.com/programmer">@programmer</a>
            to shorten strings?</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>Clever idea! Go ask him!</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>I came with the idea, <em>you</em> ask him!</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>On second thought, I’ll tell
        <a href="http://twitter.com/cssdeveloper">@cssdeveloper</a>
        to think of something.</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>See? Problem solved!</dd>
</dl>

Is this making any sense? Or should we just stick with ordered/unordered lists and cite + blockquote pairs?

So here we are — Alen Grakalić of CSS Globe fame and yours truly — preparing for our first very own web design workshop in Zagreb, Croatia. It’s all new to both of us and really, really exciting — even though the first one is just a case study, an experiment — to see if we (and the market) are up-to the task.

How we decided about holding web design workshops?

We found that there is a huge gap between top guns in the industry in this part of Europe and beginner-level CSS coders. At the moment it’s quite difficult to find at least an intermediate level client-side recruit. It’s even harder to hire a CSS rock star.

Various courses don’t provide web standards training at all, and only a few colleges in Croatia — by the share enthusiasm of the individual professors — barely introduced web standards through brief presentations and seminars.

Quite obviously, what’s current on the Internet now, will be outdated by the time it gets approved by the ministries responsible for the scholarship programs. And the materials will be even more obsolete when those students leave their schools and colleges in search for a job.

Why focusing on a single segment?

We decided to go with single topics, because we feel this is the best value for the money. We have been visiting conferences in the past, with broader range of presentations: from strategy, to branding, to user experience, to design, to CSS, to JavaScript, to server-side programing, to server management — all in one.

Not everyone is interested in everything. It’s rare that a web professional is intimate with all of the planes, so we are focusing on a single topic one workshop at the time.

Are you on your own?

Luckily not. We still have client work to do, so for the sanity, we formed some awesome partnerships:

• Plus hosting covered operational costs and as a result provided lower registration fees.
• Ivan Brezak Brkan is handling all the administrative/promotional tasks.

Misc F.A.Q.

• Q: Do you plan to hold workshops other than about Web Standards, HTML and CSS?

  A: Yes, we do — some of the next workshops will introduce you to Design for Web, User Experience, Usability and Accessibility, Typography for Web, DOM and jQuery, WordPress Themes, Content Strategy and Production, Small Business Management, Client Relationship Management etc.

• Q: Do you plan to visit other cities than Zagreb?

  A: Yes, we do — please DM @webradionice and we’ll consider bringing the show somewhere near you.

• Q: Are you giving a certificate?

  A: No we don’t — we don’t test participants at the end of the workshop, hence there’s no certificate. We are never meant to be the judges or appraisers, we are aiming to educate people in a way we’d like to be educated — telling a real stories from the trenches.

• Q: Alright, but what do I get then?

  A: You get the experience, tips and best practice advice from the experienced professionals.

Mini Seedcamp Ljubljana aims to connect the startup communities in Albania, Bosnia & Herzegovina, Bulgaria, Croatia, Greece, Macedonia, Montenegro, Serbia, Slovenia and beyond!

Overheard: Seedcamp is a competition for prospective IT and web entrepreneurs. Each of first five teams gets an investment of 50K Euro — plus: three months of training and business development lectures in London, UK — held by expert consultants from Google, Microsoft, Mozilla and Facebook.

Official site: Seedcamp Ljubljana 2009.

Internet Explorer 8 is released last week. The IE team promised the browser will be more standards aware, similar to it’s major competition Firefox, Opera and Safari.

The trouble is — designers and developers don’t settle for current minimum, we are always into something new. So, by the time a giant vendor locks the feature list, a more flexible and agile competition goes miles away.

In the era of rounded corners/borders and transparency made possible purely with CSS, IE team missed to implement both, or at least in the form that wouldn’t require separate style-sheets files to conform to W3C guidelines.

I checked a few dozens of CSS-based web sites, and I’m not even sure anymore if everything works because developers payed special attention to IE 6 and IE 7, or is it because IE 8 is mature enough to render CSS layouts properly.

What works, what isn’t working

PNGs work without hacking. Rounded corners with CSS not. Text shadow — no. Alpha transparency is still possible only with proprietary filter property, for instance filter: alpha(opacity=10);.

Naturally, if you want your CSS to validate — this rule has to be extracted in separate file, preferably with conditional comments.

The old typeface order bug is still present, and easy font embedding with @font-face doesn’t work either, so if you prefer this method, read how to do it in IE.

A last minute announcement, but that is quite typical considering the ad-hoc nature of BarCamp Zagreb. This year’s event is taking place at the same venue, the Faculty of Electrical Engineering and Computing in Zagreb, Croatia at 23 JAN 2009.

BarCamp is a free event, there is no entry fee, but the attendees are encouraged to participate with questions and open discussion. Take a look at the schedule, consider submitting with your own presentation/panel and don’t forget to grab your seat!

Backup2Mail is automatic MySQL database backup web application. It is now upgraded and supports different host names. Download v.0.16.

Media Temple and some other hosting providers are using internal naming conventions for their database hosts (i.e. other than ‘localhost’). This upgrade enables backing up databases on such hosting setups.

Any feedback is appreciated!

In the previous episodes we’ve created a creative/technical brief, mocked-up design in Photoshop and decided on proper markup for the category cloud. Finally, we turn our design into web page element with some nifty CSS.

For those of you who better understand from live examples, here’s a little treat for you. If you’re beginner in CSS, read on. Continue reading »