Less is more – the smaller, the better

While prototyping the front-end architecture for one project I am working on, I am starting to consider that I should design the pages considering 800px as maximum resolution (so, the page width, will be around 760 px, to be sure that scrollbars and border lines will be included).

Why 800px and not 1024px? Why not fixed layout? Here are my reasons:

• The layout is going to be minimalistic. The page is not going to contain a lot of text and boxes. Less is more, as always
• No fixed layout, otherwise the information on the page would be too spread out and would be too difficult to focus the user attention if the screen is pretty wide
• 800px is becoming the standard resolutions in many mobile browser. Even the ones that support larger resolutions have a better user experience when the width of the page is contained. Twitter has a 800 pixels fixed layout as well, and I think this has been a key factor of its success.

There is nothing bad in having larger blank vertical stripes on the side of the page, as long as now we can easily focus the user attention on what we want

Twitter style suggestion and validation boxes for jQuery

Few minutes ago I just deployed a new JQuery plugin: TwitterSuggestion: twitter style suggestion and validation boxes (> link)

Basically it reproduces the suggestion and validation effects anybody can see on www.twitter.com/signup

Here is a screenshot:

And here is a demo.

Let me know what you think

My mom on Google Street View – WTF?

Few days ago, when trying out Google Street View in my hometown, I discovered that my mom was caught by Google cameras:

As first impression, it was really funny. Then, I realized that this wouldn’t be great when thinking about privacy. Not a big deal, as well as anybody can just drive in that street and see same or more things, but still is a kind of strange to know that those images now are available worldwide.

Getting Not Safe For Work content (NSFW) at work without getting noticed

At www.ihaswork.com you can set a front Safe For Work page and a hidden Not Safe For Work one that will be displayed only when the user keeps the mouse pointer over the content of the browser.

It’s a pretty simple service. All of it resides in one page. It’s just based on HTML, CSS and JavaScript. Anybody is free to take the code and to use it anywhere. Although, keeping references to the author (myself) would be much appreciated. Is is released to the public under MIT license.

Why did I do that?

I am pretty tired to see companies that instead of trusting employees, start to block websites like Facebook, LOLCatz, Skype and Messenger protocols, etc…

I strongly think that not trusting your employees is discouraging them significantly, demolishing their enthusiasm  to work and to get noticed and recognized for their productivity.

As a team leader I am the one that often sends to the whole team LOLCatz photos, interesting OT articles, EPIC FAIL videos, etc…

And they so the same.

But not because we are unproductive. Just the opposite.

We are very busy everyday, with short timelines and a huge amount of work to do. Spending 5 minutes every hour or two just having a laugh with some NotSafeForWork website is getting rid of (part) of our stress and making us much more productive the moments after.

And, all my team members are adult and mature enough to understand when is time to work and when is time to relax.

In conclusion, I wish all the oppressed employees to get some relaxing time and, indirectly to their employer to get some more productivity out of them – even if maybe they shouldn’t deserve it

Any ideas for further development? Any constructive criticism?

Just let me know, post a comment, I would be really glad to help

www.ihaswork.com

Enrico Foschi

How to check with Javascript if a Firefox Add-on / Extension is installed

Agglom was used to display an invitation to download the Firefox Add-on Agglomerator in the main pages to all the users.

Unfortunately, the invitation was displayed by users that already installed the Add-on too. The challenge was to check with JS if the user already had the add-on installed and, if he had it, to hide the invitation.

Surfing the web I stumbled upon this page:
http://ha.ckers.org/weird/firefox-extentions.html

Thanks to ha.ckers.org, the feature has been pretty easy to develop. What we did was to include the invitation inside a DIV with a specified id (firefoxExtension). Right after the closing tag of the DIV we appended this image:

<img src=”chrome://agglomerator/skin/icon24.png”
class=”displayNone”
onload=”if(document.getElementById(’firefoxExtension’))
document.getElementById(’firefoxExtension’).style.display=’none’;” />

The IMG tag loads an image that is included in Agglomerator (the icon displayed in the toolbar to save and share the current browser session). If the extension has been installed correctly, the icon will be loaded and the onload event will be fired. This is then hiding the DIV with id=firefoxExtension. If the extension is not installed, the onload event won’t be fired.

This is a quick and dirty method and should work with all almost any add-on.

Hope it helps.

Saving your Web searches in Firefox is easier than ever

…and you can even access them wherever you are and share them with anybody.

Is just a few clicks operation with Agglomerator, the Firefox add-on from Agglom.com.

This is a web search that I just organized in less than 1 minute:

http://www.agglom.com/agglom/323/Best_cars_drawn_in_MS_Paint

This extension will add one button on the toolbar that, when clicked, will open a new window in Agglom.com with a list of all the URLs of the current opened tabs. You will be able to choose which ones you would like save and how to share them (you may share them with everybody, with your friends, keep them private or protect them with a password).

Once you save them, you’ll be able to view all the saved web contents (links, videos, images, wikipedia pages, etc…) in just one page and to share it with a Permalink.

Here is a useful video tutorial to get started with it:

Here is the link of the Firefox Extension:

• From Agglom: http://www.agglom.com/extension.aspx
• From Firefox Add-on (requires registration):
  https://addons.mozilla.org/it/firefox/addon/7935

CSS Rounded box container with Sprites – No hacks, IE6, IE7, Firefox 2, Firefox 3 (and others) compatible

Dear all,

while working to the great beta 2 of www.agglom.com, finally I found my way on the code for a CSS Rounded box container that:

• doesn’t uses <img> tags
• uses sprite in corners
• is W3C compliant

In a quick search, I couldn’t find any on the web (particularly, when dealing with Sprites). So, here’s my own:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rounded boxes test</title>
    <style type="text/css">
        .BC
        {
            position: relative;
        }
        .BCC
        {
         background:#0f0;
        }
        .BCT, .BCB
        {
            display: block;
            height: 5px;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
        .BCTL, .BCTR, .BCBL, .BCBR
        {
            width: 5px;
            height: 5px;
        }
        .BCTL
        {
         /* Insert top left corner here */
         background:#0ff;
            float: left;
        }
        .BCTR
        {
         /* Insert top right corner here */
         background:#00f;
            float: right;
        }
        .BCBL
        {
         /* Insert bottom left corner here */
         background:#fa0;
            float: left;
        }
        .BCBR
        {
         /* Insert bottom right corner here */
         background:#ff0;
            float: right;
        }
        .BCTC, .BCBC
        {
            padding: 0 5px;
            position: relative;
        }
        .BCTM, .BCBM
        {
            background: #f0f;
        }
    </style>
</head>
<body style="padding: 20px;">
    <div class="BC">
        <div class="BCT">
            <div style="position: absolute;">
                <div class="BCTL">
                </div>
                <div class="BCTR">
                </div>
            </div>
            <div class="BCTC">
                <div class="BCTM">
                    &nbsp;</div>
            </div>
        </div>
        <div class="BCC">DIV CONTENT</div>
        <div class="BCB">
            <div style="position: absolute;">
                <div class="BCBL">
                </div>
                <div class="BCBR">
                </div>
            </div>
            <div class="BCBC">
                <div class="BCBM">
                    &nbsp;</div>
            </div>
        </div>
    </div>
</body>
</html>

Any comment would be much appreciated
Enrico Foschi

Bruno Bozzetto on Agglom

On Agglom there should be a page dedicated to Bruno Bozzetto, one of my heroes. He designed and directed some of the best humoristic cartoons ever!

The page, with his video (you can see them all in fullscreen in sequence) is here:

http://www.agglom.com/agglom/37

My portable ebook reader

I’m used to buy about 3 / 4 IT books a month, each one usually has more than 600 pages. As well as I like travelling and I would occupy all the space of a room just for my books, I need them in electronic format (an SD card could help me save some space here in Ireland, with so high house prices).

As well as I care about my eyes, I couldn’t read all the ebook on my laptop LCD monitor. I need some e-Ink enabled devices (electronic paper, not translucent). And I would like to read them while I’m in bed, in the bathroom or everywhere else.

After studying a lot the available devices, I decided to buy the Sony PRS-505 and I’ve to say that I’m so proud of it!

The screen refresh in about 1 secs, but it’s not a problem (and it’s like that on all e-Ink devices). I have no hurry usually when reading and I could waste 1 second while switching pages .

Well, it is easy go get used to these devices. 7 inches display is enough if you want to read books without images and other kind of non-textual content, but probably it is not enough if you have to read magazine or IT books.

But no worries! Some really nice guys have developed very useful tools for converting content from almost everything (even web pages or rss feed) to the sony .lrf format. Some of these useful softwares services are:

• libprs500
• pdf2lrf
• web2book
• www.feedbooks.com (oh, absolutely love this!!!)

I’m reading at the moment a Microsoft certification exams book on my PRS, standard A4 pdf format converted to lrf (I got double of the pages, but at a larger and viewable size). And it look awesome!

The bookmark feature is very useful and I like so much the way I can store almost everything using an SD card and a MMC card too.

It’s very thin (0.8 mm) and very lightweight. I absolutely love it. It worth all the 299 euros I paid on eBay.

Probably I would buy another one for my girlfriend too.

Ireland… what a wonderful land

Well, I’m here since last September and probably a tourist that has been here has visited more Ireland than me. So I decided to start, every week-end, to go somewhere. Here some of the previouses places I was (try to guess where):