Design miss #1 - Limiting a list in PHP/Javascript/Ruby/other

In this series I will whine about other's design mistakes and bad interface choices, while boasting about my own and mimmin's superior solutions! And vice versa :-)

This first example is from the interface guru's at 37signals, and their product Basecamp. But it's quite the common problem actually; having a list that is capped, with a "show all"-button that only adds one more item.

In the above example, the list shows 5 elements of overdue milestones. Then there's a button telling you there are 6 elements, and you think to yourself: "with that button there are 6 elements on the screen, so why not skip the button and show me that last item?".

Below is the pseudocode for accomplishing this.

MAX_ITEMS = 5

if (number of items < MAX_ITEMS)
    output_length = number of items
else if (number of items == MAX_ITEMS)
    output_length = MAX_ITEMS
else
    output_length = MAX_ITEMS - 1

for (i = 0; i < output_length; i++)
    output items[i]

if (number of items > MAX_ITEMS)
    output show all message

Thanks for your time, hope this can help someone! Share your thoughts and experience →

Css: Fix floated divs that overflow the wrapping

It's a common problem. The floated sidebar (or whatever you've floated this time ;-) get's to much content, and suddenly it overflows the wrapping div. The code might look like something below.

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

Now if the sidebar is floated, and has longer content than #content, it will expand outside #wrapper. This problem is often solved by appending an extra element inside #wrapper, and apply CSS clear:both to it.

But this extra HTML doesn't look so nice. A friend of mine pointed me to a blog entry which had some different takes on the problem. One of these solutions was so elegant, I just had to write this notice about it!

The solution is to add the CSS attribute overflow and set it to auto. If you experience problems with scrollbars, try hidden instead. Note that this is yet to be tested by me, but the example seemed to work in the major browsers.

Php: Get colors from an image

After having been fascinated lately by what Google kan achieve with images, my inspiration has yet been awakened! For a long time I've enjoyed experimenting programmatically with images, to see what's possible. Facial recognition is one of the areas that fascinate me. But that's for another day.

What I am about to show you is just an early test, to see if this actual can work. It's a PHP script that selects some colors from an image. These colors should represent the coloring of the image. This can have some more or less practical applications, though I am not going to lock you mind on my ideas.

As you will see, this is a rather unpolished lab project, and no time has been invested on designing the page. My goal is to publish this as an Open Source project later. For now you can try it at labs.mimmin.com/php_colors!

Rock in Park 2009

With a band line-up of bands such as Korn, The Killers, Slipknot, Placebo und so weiter this is one of this years hottest music festival. And I'm going! Now, their site is another story. For starters it's mostly in german, and the band schedule is hard to get an overview of.

That's why i decided I needed to make an improved schedule, so I wouldn't miss any shows. The bands are ordered in the order they are playing, and you can highlight the bands you like. It's also printable! Check it out at labs.mimmin.com/rock-im-park!

jQuery Inline Edit

And then I released my first jQuery plugin. What jQuery is? Oh, it's just the greatest Javascript framework evah, it makes Javascript programming so much more fun!

The plugin, called Inline Edit, makes it a lot quicker to implement edit and remove functions. It can turn any dynamic data list into a click-and-edit list.

Try and download it at labs.mimmin.com/inlineedit!

If you have comments, missing features or bug reports: please add a comment!

Dev's CMS - an open-source and easy-to-use CMS

 Before my time at mimmin, I started developing a simple CMS to aid my creating of standard company pages. There are many many (many) content management systems out there, but as every other programmer I started making my own. The main reason for this was, that I didn't find any system that was unobtrusive enough, and for developers.

Some time ago I had to dust of this system. A friend of mine wanted some help: to make a design into an actual website. My code was quite crappy, so I rewrote it and added the gallery module. Today this site floats on Dev's CMS at www.bibelskolasthlm.se.

You can download Dev's CMS or try it at www.labs.mimmin.com/devscms/. As always, if you have any questions or comments, don't hesitate →

Convert dates to elapsed time with Javascript

At Mimmin we know that every tiny detail can matter, and we always strive to simplify things and remove the unnecessary. This might be things like graying out certain parts of text to make others more evident.

A while ago I made a Javascript library that could convert absolute time to relative. This proved to be useful in many projects. When I implemented it in one of our latest projects I had to make some improvements. These changes made it to a patch, and now the official build is updated to version 1.1. Because of this I thought it would be good to make a small tutorial and show one way of using library.

Enhancing the readability of a log

One of the most useful things with this library is to convert absolute times (like 2009-01-10) into relative ones (like 6 weeks ago). I will in an example show how to convert a log with dates into one with relative dates.

Above you can see the expected result of this tutorial. The original dates will be converted to time elapsed. I will be using the excellent Javascript framework jQuery, but this is not necessary since the Countdown Library is framework independent. 

The markup for the log list is a follows.

<ul id="log">
  <li class="added">
    <div>An item has been added</div>
    <div class="date">2009-01-19 13:58</div>
  </li>
  
  <li class="removed">
    <div>An item has been removed</div>
    <div class="date">2009-01-19 17:15</div>
  </li>
</ul>

We now want to, using Javascript, step through every div element with class "date" in the ul element "log". We will then replace the date value with a "time passed" value. But for those users that are looking for the absolute date, we are going to add it to the "title" attribute of the div. Code as follows.

$('#log div.date').each(function(){
  var date = $(this).text();
  $(this).
    html(
      remaining.getString(-remaining.getSeconds(date), null, true) + ' ago'
    ).attr('title', date);
});

First we save the date value. Then we replace it with the return value from remaining.getString. The return value from remaining.getSeconds(date) is inverted because the function calculates time remaining, and we want the time that has passed.

The second parameter to remaining.getString is an internationalization (i18n) object, which I didn't alter since the output should be in english.

The third parameter is a flag that controls if the output should be exact, or if it is enough with only the largest unit. Example output is "2 hours, 1 minute, 5 seconds" versus "2 hours".

At last we add the saved date to the attribute "title" of the div element. This is all that is needed folks! But don't forget to include the Countdown Library using the snippet below.

<script type="text/javascript" src="http://www.labs.mimmin.com/countdown/remaining.js"></script>

If you have any questions, please leave a comment →

Slipstreaming SL.se with Greasemonkey

Har du någonsin tyckt att det är lite för bökigt, med för många klick, att söka en resa på Storstockholms Lokaltrafiks hemsida? Jag tycker det i alla fall, och har nu gjort något åt det!

Till webbläsaren Firefox kan man installera tillägga för att utöka dess funktionalitet. Ett av dessa tillägg är Greasemonkey, som gör det möjligt för dig som användare att förbättra andras webbsidor med hjälp av skriptspråket Javascript. Så om du saknar funktioner eller tycker att något borde kunna göras bättre, finns det möjligheter för det.

Mitt Greasemonkey-skript har dessa funktioner

• Gör "Jag vill senast vara framme" till standard i rullgardinsmenyn.
• Om klockan är efter 22 väljs dagen efter (t.ex. om klockan är 22:05 på en lördag så väljs "i morgon söndag")
• Gör det snabbare att ändra i rullgardinsmenyerna.

Om du har några frågor är det bara att fråga på. För dig som vill skapa egna skript rekommenderar jag manualen för greasemonkey samt Google.

För att installera skriptet går du in på dess sida på userscripts.org och trycker på knappen Install. Detta kräver att du har Greasemonkey installerat.

Unable to javascript-submit a form using jQuery?

 Today we stumbled across the strangest error while making custom submit buttons. We are developing a site that won't depend on javascript for any functionality. This is the way you always should work to make a robust site, though it might sometimes get overlooked. The plan is to first make a functional version which we then extend using javascript. 

Our custom buttons are added by a script looping through all button and input elements with the class "button" applied. After these elements an image link is created. An event is hooked on this link, which in case of click, pushes the original button, or if it is a submit button, submits the form.

This all worked very well for all forms but one. After too long time spent Googling and debugging, I discovered the solution! Because the original submit button was named "submit" it wouldn't submit the form. So after renaming it, all was good again! I think it behaves this way because the submit element replaces the submit() function of the form.

Solution: Never ever name a form field "submit", it might just break any javascript!

<!-- BAD -->
<input type="submit" name="submit"     />

<!-- GOOD -->
<input type="submit" name="continueButton"     />

rynningsjo.se

Beautiful, right? My good friend Daniel finally released his own site, so the world can envy his photographic skills (might not be the real reason). I hope that he can manage to upload pictures more frequently than I do, which is to say more often than almost never ehe. So get your ass over there and get inspired! :D

www.rynningsjo.se

Ways to music

Starting today, I intend to write about some of things I use to make my computer exprience better. If you are using something I didn't write about, please share with the rest of the group!

Spotify

I don't believe Spotify has passed anyone unnoticed. Spotify is a music player like iTunes or Windows Media Player, with the difference that all music is stored remotly on Spotify's servers. This means that you can access all your music from any computer with the Spotify client software installed (free to download from their website). Every user has an account where all their playlists are stored, therefor accessible from any computer. By streaming all music from their servers, you don't need to have a local music library flooding your hard drive, and you can listen to your favourites at work.

Spotify is a great music application and a great concept, but it is currently held back by the music industry and some artists. Recently Spotify had to remove many artists and songs from the already quite limited music library. I really hope they're coming back.

If you can obtain an invitation, Spotify is free with ads. Otherwise there's a montly fee of about $10, or a day pass for a tenth of that cost. Spotify is available on both PC and Mac.

Another cool thing about Spotify is that you can share playlists. Collaborative playlists are cool too. You can share a playlist with your friends that everyone can update. A few sites have popped up because of the ability to share playlists. On these sites you can listen to other users compilations. Some of these sites are Spotify Friends, Spotifylists.com, Listiply, Spotylist and Your Spotify.

If you have Spotify, you can listen to my mixed list.

hypem.com

I can get pretty tired of the music I am listning to sometimes, and need something fresh. Ordinary radio channels doesn't usally play new music, so where to tune? Hypem.com collects the most popular music on the Internet by checking music blogs and such. You can see what's the latest, most popular or what other users or countries are listening to. Hypem.com provides a great variaty of music, and because of that not all music might suite you.

You can of course listen to all this music on the site. Or, if you prefer (like I do), there also is an Internet radio channel to listen to online, or with Windows Media Player, iTunes, Winamp etc.

Music heard on TV

Want to know what that song in that TV ad is called? If you happen to live in Sweden there is a good service for that - Reklammusik.se. If you don't live in Sweden I bet there are plenty similar services available to you. Ads in USA and UK

If you want to know a song from a movie or a TV-series episode, I'd use Tune Find. They keep track of many popular shows and movies. There are other sites also, like heard on tv.

Pandora

These days the Internet is becoming more and more regionally dependent. Since I don't live in the US, I can't access Pandora anymore. Sucks to be me. 

Update: There seem to be ways to get around the moats Pandora has dug around their national borders. The site globalpandora.com is dedicated to this. It also provides many alternatives, though I think they merely are free online music libraries. Thanks Emil for enlighting us!

Update: Anna found another Spotify playlist service; myspotify.com. Looks great!

PHP: Creating a singleton class

The singleton pattern has both pros and cons. You should only use it if the class never has to be instantiated, as often is the case with database, registry and debug classes. The advantage is never having to manage instances; the class is easily accessible from everywhere. Below is simple example of a singleton class.

class output
{
    private static $_instance;
    
    private function __construct() {}
    private function __clone() {}

    /**
    * @desc Get singleton instance
    * @return output
    */
    public static function &getInstance()
    {
        if (!isset(self::$_instance)) {
            self::$_instance = new self();
        }
        
        return self::$_instance;
    }

    public function println($text)
    {
        print "$text<br />";
    }
}

Let's dissect the code, shall we?
The function getInstance creates, if neccesary, an instance of the class and saves it to the static, private parameter $_instance. It then returns a reference to the saved instance, hence the ampersand.

If your IDE supports code suggestions, be sure to keep the function comment up-to-date, especially @return. This will tell your editor what it should expect to be returned from the function, and will then know what functions and parameters to suggest.

To prevent anyone from making more instances of our class, we declare the functions __construct and __clone as private.

Singleton is as simple as that! Now how do we use this class? Example below.

// Oneliner
output::getInstance()->println('print to the screen');

// We may borrow the instance, and since it is
// returned by reference, we always work on the 
// same instance
$output = output::getInstance();
$output->println('text text');
$output->println('more text');

That's it! If you have any question, don't hesitate →

Mimmin Love

A couple of weeks before christmas we launched a web application that you could use to create 3D christmas cards, and send them online. This was a service we provided free of charge, and it fast became very popular with over 70 000 hits in two weeks.

After the big success we felt the need to follow it up. We came up with the idea to make a valentine's card, and to reach a larger crowd, put it on Facebook too!

Last week the other team members of Mimmin introduced me to an idea. We were then in full development of the Facebook App and needed an example picture for the splash screen. To my surprise they asked me take a picture of myself. The picture was supposed to feel spontanious and "right-now", however I was supposed to archive that by myself :-P

This Sunday I asked my friend and boss Emil to assist me with the photo challenge. He took my camera and we started shooting. This was a lot of fun for me because I've never had a real photo challenge before, never done portraits before, and especially not of myself. I took the opportunity to play with lighting, but since I don't own any photographic lighting equipment we had to use what we had at hand.

Equipment used: Nikon D80, Sigma 18-50/2.8 HSM, Nikon 50/1.8, multi-colored decorative lamps, a floor lamp and reading lamp.

Share the love, try Mimmin Love at Facebook or standalone (coming soon).

Updated: Some pictures uploaded! Thanks Emil for taking the two photos of me :-)

New Year Memories

No seen, long time! I must excuse my not so frequent posting, I've been busy and lazee. But bare (bear) with me; I foresee a brighter future in the updating department!

This will be my first post in the development category. But don't stop reading here! You can expect more of this kind, since this is what I do. Most of the time. Developing that is.

I made this piece of code to a New Years party I was going to (yeah, I'm that cool). They asked me to make a countdown timer application, to be shown at a wall with a projector. I had done this exact thing before, using Vb.net. Since my primary plattform these days is the web, I made the decision to use Javascript. And this time it actually worked better than last, didn't even crash at midnight :-)

Now after New Year I thought I'd share this with the world. And the application itself of course! Though it's not really an application anymore, more like a library, with examples and documention. By using this you can get the remaining/elapsed time in various formats. Hope this will come to handy for someone out there! And if it does, please take the time to let me know!

labs.mimmin.com/countdown

Christmas cards to everyone!

In christmas times like these, it's heartwarming to see all the people who gives unselfishly. We from mimmin would like to help and spread the love. By giving away free christmas cards! These fellows are simple to use; just upload a photo/use your webcam, then decorate the picture with various christmas accessories. Write a joyful message and send away!

A tip. If you want to send cards to larger groups, say your big family, insert the link to the christmas card in an ordinary e-mail. Not as personal, but much faster!

All feedback is appreciated!

On a second note, vi har nu äntligen lagt upp vår nya sida. Vår förhoppning är att man ska få en klar bild av vad vi pysslar med, vad vi har gjort, samt hur man kommer i kontakt med oss. Den är fortfarande under konstruktion; vi ska bland annat lägga upp videoer till alla våra produkter samt uppdatera listan med kundprojekt. Kom gärna med kommentarer!

Photos!

I've just posted most of my flickr photos, some have been slightly modified, all are larger. So go and check them out :D
I will shortly post newer photos.

While I'm posting, I'd like to take the oppertunity to push for Hyrahyra's updated search (like version 2.5). Some of the updates in this version are:

"Where" searches are handled by Google Maps, which makes it possible to search for streets and all geographic locations.

Items that are located on the exact same spot, are exploded into nice circles.

Many minor fixes like improved performance.

Release party!

Kiddin'. Though I am very happy, to finally have launched this site, which I have been working on for a long time (all weekend!). Varför på engelska? I guess I'm naive enough to think non-swedish people will visit ;)

The site is far from finished, especially in the photography section. While you are waiting, you can visit me on flickr. Expect many updates in the next week!

Enjoy :D