If you want to read more about the Responsive Web Design approach I suggest a couple of articles from Smashing Magazine and Design Modo.

Twitter Bootstrap gives you a fluid grid layout (the default grid system is a 940px-wide, 12-column grid but you can customize it here) and many css components to create a responsive design in few minutes. It means that you create your design using the Twitter Bootstrap grid and components then the toolkit modifies and resizes columns width, headings, texts and images according to the user device resolution.

For this post I created a simple “marketing design” starting from the marketing design given with the library. I added a dropdown in the toolbar and a carousel (useful for example to show few screenshots).

Download the complete code example

I think that the Twitter Bootstrap toolkit (as also my example) can be a really useful starting point to create your own design, mainly to create a Minimum Viable Product. After that you can add your personal style avoiding to create an other Twitter clone

Then I thought…but my photos are already online…I usually drag my photos into a dropbox folder shared with my girlfriend and my family!

So Phox is born…from the need to share my photos avoiding to use an upload form (one or many upload forms considering that I could share my pictures on different platforms).

I needed a tool able to copy my photos from dropbox on Flickr. The idea fascinated me and I created Phox with the idea that people need just to drag their photos into a dropbox folder (the Phox folder) and Phox will share that photos online.

I released Phox in beta. At the moment it uploads your photos on Flickr and/or Facebook. My idea is to find few early adopters to get a feedback. Then I am going to add other features.

Personally I find it really useful…the first time that I used it I couldn’t believe that it was loading my photos on Flickr while I was walking on the beach with my laptop switched off!

This is what I mean when I say that we must bring technology to people in the most elegant and transparent way…you copy your photos into a folder and them are online (thanks to dropbox for the huge help)!

If you want to try Phox subscribe here to receive an activation code.

If you want give your feedback or suggest new features you can do that here.

Help me creating something of useful

“Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.”

As usual I am going to show you the code using Mootools or jQuery.
The html code that you need to add at your page is the same in both cases:

<div class="topbar" id="topbar">
    <div class="fill">
        <div class="container">
            <a class="brand" href="#">Project name</a>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <ul class="nav secondary-nav">
                <li class="menu">
                    <a href="#" class="menu">mconventi</a>
                    <ul class="menu-dropdown">
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Help</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

You need to add the stylesheet given by Bootstrap (you can start from it then you can download the uncompressed file to customize it).

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

If you want to use jQuery all you need is to add jQuery, bootstrap-dropdown.js and call the dropdown function on the topbar:

<script src="<your_path_here>/jquery-1.7.1.min.js"></script>
<script src="<your_path_here>/bootstrap-dropdown.js"></script>
<script>
    $(window).load(function(){
        $('#topbar').dropdown();
    });
</script>

If you prefer Mootools you need to add the core library, the element shortcuts and the classes Bootstrap and Bootstrap.Dropdown:

<script src="<your_path_here>/mootools-core-1.4.2.js"></script>
<script src="<your_path_here>/mootools-element.shortcuts-1.4.0.1.js"></script>
<script src="<your_path_here>/Bootstrap.js"></script>
<script src="<your_path_here>/Bootstrap.Dropdown.js"></script>
<script>
    window.addEvent('domready', function(){
        new Bootstrap.Dropdown($('topbar'));
    });
</script>

Here a demo of what you get

Download the complete code

Thanks to Twitter to have released the Bootstrap toolkit and to Aaron Newton for the “MooTools for Bootstrap” library.

Personally I think that the Bootstrap toolkit can be really useful, it contains other interesting features that I hope to show you soon. Let me know what do you think about this post, thanks

Some months ago I worked on an experimental interface (I’d like to publish a post regarding it soon). I had a problem acting with javascript on a big number of dom elements. To solve that problem I used Clumpy.

“Clumpy emulates for, for…in, while, do…while, continue, and break. These can be labeled, nested, chained, and interspersed with non-loop operations. Execution can be paused and resumed in various ways.

It creates a managed chain of timeouts, promising to perform all the iterations in the proper order. The number of iterations performed in each single “clump” of execution is adjusted transparently to suit the speed of the computer executing the code.”

I found it really useful and interesting so I created two simple examples to show why it could be useful also for your projects.

In this case we want to append a text to an element 2000 times. Here you can see (and explore thanks to JSFiddle) my code in a standard loop. If you run it you’ll see that the code blocks your page.

Here there is the same code (adapted to use Clumpy). Run it to see the difference.

Thanks to JSFiddle you can interact with my code, try to change the number of iterations in both examples and see what happens.

To read more about Clumpy visit the usage guide and let me know.
Enjoy

To do that you can use the setTimeout function at the domready event.
For example we want to show the alert ‘Hello setTimeout World’ after 1000 ms from the domready event.

Using Mootools:

window.addEvent('domready', initHandler);

var g_initial_timeout = null;
var initHandler = function() {
    initial_timeout = setTimeout(function() {
        alert('Hello setTimeout World');
    }, 1000);
};

Using jQuery:

$(window).load(initHandler);

var g_initial_timeout = null;
var initHandler = function() {
    initial_timeout = setTimeout(function() {
        alert('Hello setTimeout World');
    }, 1000);
};

Now, if we want to avoid to show the alert if, at the page loading, the mouse is over a particular dom element, we can clear our timeout.

Using Mootools:

$('your-element-id').addEvent('mouseover', function(){
    if (g_initial_timeout) {
        clearTimeout(g_initial_timeout);
    }
});

Using jQuery:

$('#your-element-id').hover(function(){
    if (g_initial_timeout) {
        clearTimeout(g_initial_timeout);
    }
});

What do you think about this solution? Let me know

Using javascript to change the contents in your pages could create big problems with the back button …I know, it’s always it

Image if your user:
- opens a section loaded using an AJAX call (but also only to show/hide contents)
- then shows an other section
- then clicks on the back button

…ouch…your user’s browser doesn’t remember her actions!

See the following example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <style>
        .hidden {display:none;}
    </style>
    <script type="text/javascript">
        var showSection = function(p_section_id){
            var section = document.getElementById(p_section_id);

            if (hasClass(section, 'hidden')) {
                hideOpenSections();
                removeClass(section, 'hidden');
            }

            return false;
        }
        // Hides all the open sections
        var hideOpenSections = function(){
            var sections = document.getElementsByTagName("p");

            for(var i=0; i < sections.length; i++) {
              if (hasClass(sections[i], 'section') && !hasClass(sections[i], 'hidden')) {
                  addClass(sections[i], 'hidden');
              }
            }
        }
        // Uses a regular expression to check if an element has a class
        var hasClass = function(p_element, p_class_name){
            return new RegExp('\\b'+p_class_name+'\\b').test(p_element.className)
        }
        // Removes a class from an element
        var removeClass = function(p_element, p_class_name){
            var rep=p_element.className.match(' '+p_class_name)?' '+p_class_name:p_class_name;
            p_element.className=p_element.className.replace(rep,'');
        }
        // Adds a class to an element
        var addClass = function(p_element, p_class_name){
            p_element.className += ' ' + p_class_name;
        }
    </script>
  </head>
  <body>
    <div>
        <h2><a href="." onclick="return showSection('section_a');">Section A</a></h2>
        <p id="section_a" class="section">
            This is the content for the section A
        </p>
    </div>
    <div>
        <h2><a href="." onclick="return showSection('section_b');">Section B</a></h2>
        <p id="section_b" class="section hidden">
            This is the content for the section B
        </p>
    </div>
    <div>
        <h2><a href="." onclick="return showSection('section_c');">Section C</a></h2>
        <p id="section_c" class="section hidden">
            This is the content for the section C
        </p>
    </div>
  </body>
</html>

(note, I didn't use js libraries to give you a simple generic example but I am sure you can use your favorite js library

Now we are going to see how Anchors can help us.
See this new example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <style>
        .hidden {display:none;}
    </style>
    <script type="text/javascript">
        var init = function(){
            setInterval("checkSection()", 400);
        }

        // Every 400ms checks if the section currently showed is the right one
        var checkSection = function(p_section_id){
            current_anchor = document.location.hash.substring(1);

            var section = document.getElementById(current_anchor);
            if (section && hasClass(section, 'hidden')) {
                hideOpenSections();
                removeClass(section, 'hidden');
            }
        }
        // Hides all the open sections
        var hideOpenSections = function(){
            var sections = document.getElementsByTagName("p");

            for(var i=0; i < sections.length; i++) {
              if (hasClass(sections[i], 'section') && !hasClass(sections[i], 'hidden')) {
                  addClass(sections[i], 'hidden');
              }
            }
        }
        // Uses a regular expression to check if an element has a class
        var hasClass = function(p_element, p_class_name){
            return new RegExp('\\b'+p_class_name+'\\b').test(p_element.className)
        }
        // Removes a class from an element
        var removeClass = function(p_element, p_class_name){
            var rep=p_element.className.match(' '+p_class_name)?' '+p_class_name:p_class_name;
            p_element.className=p_element.className.replace(rep,'');
        }
        // Adds a class to an element
        var addClass = function(p_element, p_class_name){
            p_element.className += ' ' + p_class_name;
        }
    </script>
  </head>
  <body onload="init()">
    <div>
        <h2><a href="#section_a">Section A</a></h2>
        <p id="section_a" class="section">
            This is the content for the section A
        </p>
    </div>
    <div>
        <h2><a href="#section_b">Section B</a></h2>
        <p id="section_b" class="section hidden">
            This is the content for the section B
        </p>
    </div>
    <div>
        <h2><a href="#section_c">Section C</a></h2>
        <p id="section_c" class="section hidden">
            This is the content for the section C
        </p>
    </div>
  </body>
</html>

What's the difference?
This last example uses a function that checks the anchor every 400ms. In this case we don't have a function called at the onclick event. The periodic function checks if the anchor is coherent with the currently opened section and in case opens the correct one.

Advantages: if you click on the back/forward button you'll have a coherent behavior. There is also a second advantage, we don't have js code in the html (also if you can obtain this last advantage even in other ways).

Naturally, suggestions  and comments are welcomed

Django Snippets Logo

Recently, working with Django, I needed a simple template filter with which highlight a string in a block of text.

I found this snippet (thank you at the author to shared his work) but I modified it because I needed a case insensitive filter. I used it to highlight the filter string in the text resulting of a search.

The filter is really simple but I want post it in order to help someone else who needs something similar.

Here my filter:

from django import template
from django.utils.safestring import mark_safe
register = template.Library()
import re
@register.filter(name='highlight')
def highlight(text, filter):
pattern = re.compile(r"(?P<filter>%s)" % filter, re.IGNORECASE)
return mark_safe(re.sub(pattern, r"<span class='highlight'>\g<filter></span>", text))

To use it in a template you have to define the filter search in this way: {{text_block|highlight:filter_string}}.
After that you need only set the style for the span.highlight in your css file.
Use it

Independent groups of friends

Paul Adams, a researcher for ‘Social’ at Facebook (previously at Google), in “The Real Life Social Network” writes about differences between social interactions online, and offline.

I found really interesting his work so I want reassume some useful Paul’s considerations that designers can follow (I suggest to read his work).

There are some important differences between the social interactions that people create online (with social networks) and offline (in the all days life). This creates many problems, and few opportunities.

People don’t have one group of friends but they tend to have independent group of people with which they shared life stages and experiences.
Not only do we not have one group of friends but, also in the same group, we are closer to some than others. On social networks (or in our mobile phones) all our contacts appear alphabetically without considering there differences. Yes, we can group them but they appear to us in the same way.

Also if people use to have hundreds of friends, the majority of them interact regularly with few of them. Usually the people with which we interact are also the people that influence us in purchase decisions.
There are hundreds of people that you know, but you can’t consider all as friends. The way we communicate with our friends’ friends or people we met recently is completely different from the way we interact with our close friends. Now with the social network we tend to maintain that connections. We don’t do that in the offline life.

People don’t have only one “identity”. People appear differently to different audiences and usually we care deeply about how we look to others. People act one way with their family, they act another way in work, and they act another way with their best friends.
In the online life, it is hard to set things up so that one group to see you one way, and another group to see you a different way.  People have workarounds to manage this, including multiple email accounts, multiple Twitter or Facebook accounts.

Furthermore, what people “say” online can be read and searched by all and remains there for long time. People need to understand the consequences of their actions online.

What designers can do:
- Design for multiple groups. Allow people to create groups (and rename a group if it changes over time) and allow people to create conversation threads with only few people (Google Wave followed that idea).
- Design for different relationships. Don’t try to design something for all types of relationships. You’ll simply end up with a compromised solution for everyone.
- Design tools to support how people look to others. Help people do understand what are the consequences of their actions, and make these things clear.

How can I avoid the sorting of a column (the request is not exactly this but it can solve the issue ) ?

When you need to create or modify features for moodgets I suggest to create a new plugin (see this post ) and, if possible to start from an existing one.

Now we are going to cover this last case.
We can start our plugin by the SortableGridPlugin.js. The idea is to copy and past the source file renaming it to “MySortarbleGridPlugin.js”. Then you need to modify the name and id of your new file:


var MySortableGridPlugin = new Class({

Extends: GridPlugin,

id: 'MySortableGridPlugin',
…
…
…

At this point we can make our changes at our new plugin, in this case we are going to check if into the column model there is a flag “sortable:false” (to default we can leave every column sortable). If you read the source code of the function “onNewHeaderCellHandler” you can find the following lines of code:

p_headerCell.store('sort', p_columnModel.sort);
p_headerCell.addEvent('click', this.onHeaderClickHandler.bind(this));
p_headerCell.addEvent('mouseout', this.onHeaderOutHandler.bind(this));
p_headerCell.addEvent('mouseover', this.onHeaderOverHandler.bind(this));


That lines add the events listeners to a new column header. Our idea is to avoid to attach the listeners if we have the flag “sortable:false” in the column model (the column model object is passed as parameter to the “onNewHeaderCellHandler” function).

Our code becomes:

if (!$defined(p_columnModel.sortable) || p_columnModel.sortable == true){
p_headerCell.store('sort', p_columnModel.sort);
p_headerCell.addEvent('click', this.onHeaderClickHandler.bind(this));
p_headerCell.addEvent('mouseout', this.onHeaderOutHandler.bind(this));
p_headerCell.addEvent('mouseover', this.onHeaderOverHandler.bind(this));
}

Now we can use our new plugin when we define a grid. For example if we want that the “title” column can’t be sorted we can define our column model in this way:

var demo_columnModel = [{
header: "ID",
dataIndex: 'id',
dataType:'number',
width:50
},{
header: "Name",
dataIndex: 'first_name',
dataType:'string',
width:105,
sortable: false,
validator: 'required validate-alpha maxLength:30',
isEditable: true
}]


then we define the grid using our new plugin:

var g_grid = new Grid($('grid'), {
dataStore: new RemoteDataStore({requestOptions:{url: ...}}),
columnModel: new ColumnModel(demo_columnModel),
gridPlugins: [
new MySortableGridPlugin()
]
});


If you want you can download the MySortableGridPlugin source file .

For example, if you need to hide a DOM element using javascript you can use the hard coded approach:

document.getElementById(“myElementID”).style.display = "none";

or you can just use a css class:

document.getElementById(“myElementID”).className += “ hidden”;

where hidden is a css class:

.hidden {
   display: none;
}

NOTE: you can use also “display:none !important”; but be careful to use the “!important” property in your css elements, it can be really useful but it becomes without effects if you abuse.

Ok, now, first of all, I strongly suggest you to use javascript libraries like jQuery, Mootools, etc…the are different advantages to use them and it can be alone a subject for one or more posts.

Often I use Mootools in my projects (I developed Moodgets on Mootools) so we can write the previous code with it. If you use the hard coded approach the first example becomes

$(“myElementID”).setStyle(“display”, “none”);

following the approach which I prefer the first example becomes:

$(“myElementID”).addClass(“hidden”);

where:

.hidden {
   display: none;
}

Why I prefer to use the second approach:
it is more elegant and clear because you split the interaction layer (javascript code) by the graphic layer (style attributes). In this way you can change the style attributes without modify the javascript code.
It allows you to create better programs. Consider the case in which you need to show and hide a DOM element when the user clicks on a link (Note: I’m using the Mootools library for this example).

With the first approach you need to create something like that:

function onClickHandler(){
   var my_element = $(“myElementID”);
   if (my_element.getStyle(“display”) == “none”){
      my_element.setStyle(“display”, “block”);
   }else{
      my_element.setStyle(“display”, “none”);
   }
}

Using the style which I prefer you can write:

function onClickHandler(){
   $(“myElementID”).toggleClass(“hidden”);
}

Isn’t it better?!

Naturally, this approach is strongly suggested even when you are writing style for html tags but I’m sure that you knew!

Do you have comments about my post? Do you prefer the first or the second approach when you develop with javascript? Let me know, write a comment