You start from a place (geolocation) and each new picture you select becomes your new location. New pictures are found from this new location. You can carry on as long as you want and see the path you’ve followed in a dynamic map.

Test the app here.

This little app was coded for the 10k Apart challenge and weighs only 9,999 bytes (jQuery is not included in the size).

I am using jQuery and the Yahoo! and Flickr API do dynamically pulls pictures and build maps around geo coordinates. Add to that keyboard navigation and CSS3 to make it an interesting exercise.

No better way to improve your skills than practicing right? Code to be released soon after the competition is finished.

The idea is simple, write the best html 5 / javascript web app you can in  max 10 kilobytes.

The results are quite incredible and I really recommend the app gallery on the event’s site, you’ll see things you’ll wonder how they fit on 10k.

I did give it a go as well, more for the fun than for the prizes, and produced FlickTrip. It’s a Flickr photo viewer with a geolocation twist.

Basically you choose between two pictures, which decide which path you are following. When you’ve seen a few pictures, have a look at the journey map and you’ll see the route you’ve followed by just clicking on nice pictures.

Not much html in this one but a lot of javascript. I’ve got some more ideas to expend like adding the possibility to save you previous journeys using html 5 local storage.

Typography is a very deep subject and I have always been fascinated by the power of type, how just changing the font used in a design can dramatically change its tone.

To my dismay, the magazine arrived damaged, likely after having been forced through my letter box. The right side and all the pages are bent slighly. This is very unfortunate, being a limited edition and all, but I guess what matters most is the content, not the shell. I only had time to read the introduction and the interview of Erik Spiekermann so far but I know it is going to be a great read all the way through.

Here are a few pictures of the unboxing:

Here is the breakdown of what happened.

Day one: intro, core plugins, scalability and WordHack

The first day started around 9.50 am when we had a quick talk about rules and house keeping stuff which then followed with everyone presenting themselves in a few words.

It was a bit long (around 150 attendees) but well worth it as you can see all the different backgrounds and skill sets in the room. A few round of spontaneous applause for people stating there where moving from Joomla! to WordPress.

The introduction was followed by a quick break and then the first talks started. I went in track 2 for a talk by Peter Westwood on core plugins.

Core plugins, Peter Westwood

Core plugins are essentially normal plugins, developed by the community but addressing specific popular functionalities. Those plugins would be closely watched by the core team to ensure they are secure, reliable and compatible with each new version of WordPress.

I see a lot of good things about core plugins. First, you take a feature out of the core, which allow developers to update it much more frequently because they wouldn’t have to wait for a new version of the core to be released. It could also open the door for non-core developers to work and help the core team in a different way. And of course you can take some not so used features out of WordPress, making it smaller (the size of the download has been discussed extensively with the release of 3.0).

How far can it go, Benjamins Ellis

That’s probably the talk I’ve enjoyed the most. How scalable is WordPress is a question that comes up more and more often these days. I’ve had some moderate experience with high traffic websites built it WordPress but nothing of the scale Ben described.

“Can you make it pop?”

The data first: 160k pages views/day in peak traffic, with 150k users registered, each uploading 5 pictures in posts. Impressive. Of course you could throw some serious hardware at that and make it work but not in this case. A single server with  a 8 cores proc and 4Gb of ram…and that’s it.

His experience of the thing is: plugins are the bottle neck. Most are not written with high traffic in mind or are not efficient enough to scale which means they had to re write a few.

Very funny presentation, loved the “can you make it pop?” reference.

WordHack

WordHack was a 3 hours session where developers get together and work on some project, with the idea of presenting the result at the end of the conference. Two projects where worked on: opendaid.org.uk and a calendar plugin based on custom post types. I worked on the second project but we did not get far enough to show anything unfortunately.

Day two: html5, WP e-commerce, BuddyPress and more

Accessibility and html5: Benjamin Ellis

Session on accessibility and why it is important for any site followed by an overview of what is coming in html5/CSS3.

WP e-commerce: Jeffry Ghazally

Next in track 2 was a presentation of WP e-commerce and the ways to extend it. The room was packed and some had to sit on the floor! This was very informative and the guys behind the plugin really know what they are talking about.

Development for BuddyPress: Paul Gibbs

After the introduction that took place in the morning, Paul Gibbs came back to talk about development and theming for BuddyPress.

I think BP is probably one of the most exciting project going on at the moment in the WordPress sphere. I can see loads of potential for it in the very near future.

WordPress in the enterprise: David Coveney

I have to admit, I did not really follow that one closely. I had a weird problem on with my apache server on my netbook and spent a good part of the talk figuring out what I was doing wrong. But I’ll certainly take a look at the slides because some point were interesting.

The controversy

After the WordHack presentation everyone was invited to put their ideas and suggestions forward to improve WordCamp. That’s when it slipped…

After a few suggestions from attendees, Jane Wells spoke quickly about how some people emailed her to say they wanted to organise WordCamp where they lived but felt that the WordCamp UK domination was preventing that. So to ensure fairness for all the wanna-be WordCamps in the UK, Automattic would not approve a WordCamp called “WordCamp UK” for next year.

It was probably not the right time, and said the wrong way but definitely sparked a few comments.

People are always very protective about what they do. What most heard was that WordCamp UK would be forced to stop, to split the community and start more local WordCamps. But most seemed to miss what Jane added afterwards, that the problem was just with the name.

Followed a long argumentation about how this wouldn’t make sense, only make smaller WordCamps with next no to attendees, or spawn a WordCamp London where everyone would go and hence rule out the use of the other smaller ones.

If some people have emailed saying they feel they can’t bring what they want to the main WordCamp in the UK then it is most likely a communication problem between the WordCampUK organisation and those people.

Secondly, not using the UK label on the biggest WordCamp will not change its importance to the eyes of the attendees. If we had called this year’s WordCamp “WordCamp Manchester” instead of UK it would have made sense no?

Lets try to think about what it could be next year:

All the big names are getting together to organise a WordCamp in…let’s say Bristol. It would be called WordCamp Bristol. Other people want to set other WordCamps up in different places. The community will probably mainly go for Bristol because that’s where things look more interesting. The ones who can’t make it, or don’t want to, will go the the nearest WordCamp.

This scenario would probably result in more people going to the various WordCamps in the UK as a whole -> success.

I am not sure if all this will make sense to anyone else than me but that’s how I felt went people started to argue without really listening to what was being said.

Anyway, this was my first WordCamp and it was awesome, thanks everyone.

The problem:

Just as a quick recap, to include a javascript file in your shop header you just need to add a line to your page.xml file (app>design>frontend>default>yourthemename>layout):

<action method="addJs"><script>../skin/frontend/default/platinumenv/js/functions.js</script></action>

But if you change the path above by something starting with http or https, Magento will not recognize it as being external and try to append the base js url to it. For example a line like this:

<action method="addJs"><script>http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js</script></action>

will outpout something like that in the header:

<script type="text/javascript" src="http://www.myshop.com/js/http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

You can of course hard code the script tag but 1) it will have to be before or after the files included by the xml, which might create some conflicts and 2) it’s not fun at all!

My idea of a solution

After digging into some of the core files responsible for the output of the js I started to have a better idea of how to resolve the issue. The good thing about Magento is that when a core file does not behave the way you want, you can “easily” override.

The file we want to change here is Mage/Page/Block/Html/Head.php. This is where Magento handles inclusions in the header as well as file merging for js and css, among other stuff.

I am going to override this class to change one of its function: &_prepareStaticAndSkinElements(). Here is the new code:

<?php
/**
 * Extjs
 * Override core class to provide a way to include external javascript files
 */
class Foo_Page_Block_Html_Head extends Mage_Page_Block_Html_Head
{
   

    /**
     * Same as core file exept first foreach loop where we look for http or https in the
     * url of the script
     */
    protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
    {
        $designPackage = Mage::getDesign();
        $baseJsUrl = Mage::getBaseUrl('js');
        $items = array();
        if ($mergeCallback && !is_callable($mergeCallback)) {
            $mergeCallback = null;
        }

        // get static files from the js folder, no need in lookups
        foreach ($staticItems as $params => $rows) {
            foreach ($rows as $name) {
                //if http or htttps, do not add baseurl, do not try to merge
                if(strstr($name, 'http://') || strstr($name, 'https://'))
                    $items[$params][] = $name;
                else
                    $items[$params][] = $mergeCallback ? Mage::getBaseDir() . DS . 'js' . DS . $name : $baseJsUrl . $name;
            }
        }

        // lookup each file basing on current theme configuration
        foreach ($skinItems as $params => $rows) {
            foreach ($rows as $name) {
                $items[$params][] = $mergeCallback ? $designPackage->getFilename($name, array('_type' => 'skin'))
                    : $designPackage->getSkinUrl($name, array());
            }
        }

        $html = '';
        foreach ($items as $params => $rows) {
            // attempt to merge
            $mergedUrl = false;
            if ($mergeCallback) {
                $mergedUrl = call_user_func($mergeCallback, $rows);
            }
            // render elements
            $params = trim($params);
            $params = $params ? ' ' . $params : '';
            if ($mergedUrl) {
                $html .= sprintf($format, $mergedUrl, $params);
            } else {
                foreach ($rows as $src) {
                    $html .= sprintf($format, $src, $params);
                }
            }
        }
        return $html;
    }
} 

Very simple, if the path has http:// or https:// then do not include the baseurl

You then need to declare the new class in etc/local.xml. Add those lines between the existing <global> tags:

<blocks>
      <page>
            <rewrite>
                  <html_head>Foo_Page_Block_Html_Head</html_head>
            </rewrite>
      </page>
</blocks> 

And that’s it. You can now enjoy adding external javascript files to your xml.

Skills used: PHP, XML, XHTML/CSS, jQuery, Photoshop

Caddiemaster.co.uk is an e-commerce website selling golf trolleys and accessories. The goals were to improve conversion by redesigning the client’s site as well providing him with a new platform to streamline order processing and customers management.

The design is quite minimalist and reflects on the simplicity of the products. The touch of bright green adds some colours as well as guiding the user to the key elements of each page.

Powered by Magento, the site is full of features and functionalities that make the shopping experience a breeze and the day to day management more enjoyable.

The newly introduced widget feature in Magento is used on the homepage to display featured products and categories using two widget I have created for the occasion (code to be released soon).

While I am very interested in the first two, the later is something I really like and I could see it being used on many websites. That sparked an idea, make a WordPress plugin to easily request the fonts from the API, with a nice backend page where a user could just tick the ones he wants to use.

GFontr is that, a very primitive yet working version of what I believe is the first Google WebFont plugin for WP. Beta version, so test at your own risks :p.

Ever wondered how professional manage to have a background with no angle? Have a look and try it for yourself

The post: http://photo.tutsplus.com/tutorials/hardware-tutorials/step-by-step-guide-for-building-a-seamless-white-backdrop/

Skills used: PHP, XHTML/CSS, jQuery, Photoshop

I was involved in this project from design until completion and was the only person on the project. The client objectives were to redesign the existing site for a more up to date look as well as improving conversions.

First site built using the second version of the theme framework I work with at the moment, this site is quite simple in appearance yet had some nice challenges to it that made very interesting to work on.

The main feature are the changing header pictures, which are posts in a special category on the homepage and attached pictures for the internal pages. The javascript effect is adapated from the the standard slider effect I have included in my framework.

“what could I do…” he thought. His hand is moving the computer mouse aimlessly. He’s looking for something but does not know for sure. There is this idea, about getting some programming excitement, the like he gets when a crazy idea pops up and he is thrown in the zone. Then suddenly “Oh god…” A few frenetic clicks later he is on his blog back end.

It’s one of those WordPress blogs. he’s got hundreds (more like 4) of them but that one has something special. The cursor fly hover the left hand side menu and he finally gets to the upgrade page. There lies two buttons: “Upgrade now” and “Download nightly build”.

Without thinking too much he chooses the first option. The page reload and the upgrade status starts to print on the page. “… upgrade successful”. He load the dashboard and there it is. He could only hope to see those words: “You are using WordPress 3.0-alpha.”

That’s it. Everything he has been waiting for is coming back in memory. “The menu builder!, I need to test the menu builder….”

So here we are. I have just upgraded this site to WordPress 3.0-alpha, using the Beta Tester plugin. I don’t know how long the 3.0 alpha has been out and I can’t believe I have not tried to do the upgrade before.

The most anticipated feature, for me anyway, is this new menu builder. It was first coded by the nice guys at WooThemes and then included in the core by the WordPress team. What I can say so far is that it is has good as it gets.

Here are a few screenshots of it in action:

The menu page with you menu in the middle and the link creators on the right. You can add pages, categories, custom and links. Once you’ve added an element to the menu it appears in the list in the middle of the screen. From there you can reorganise them by drag and drop, create nested menus, edit/delete stuff

Here is the edit box for a menu element.

Apart from the menu there a loads of other improvements. Here are a few:

New default theme

With it comes a new header selector. No gradient anymore but nice images =)

..and custom background image

And another small one: choose your admin password during install: