Archive for the ‘design’ Category

Three-way CSS-only selector

Thursday, February 11th, 2016

I was at the Slovenian CSS Meetup yesterday where I did a short talk on Quantity Queries. That’s a name given to a technique where you use pseudo class selectors to discern how many elements are inside a certain element – for example :first-child:nth-last-child(4) {} will only select the first child if there are exactly 4 elements. If you group that with the general sibling selector ~, you can also get all the other elements.

The idea of quantity queries has been around for a year or so and even though at first glance you might say “We’ve got flexbox for that now”, you’d only be right in certain cases. The thing that quantity queries bring to the table is the idea of being able to change the styling depending on the number of elements, which I guess people currently solve either on the backend or with javascript.

But that’s not the main reason I’m writing this – it’s the last talk of the night where a three-way selector solution was presented by Gorazd. He created a CSS version but had problems with the smoothness of the animation as he didn’t know where the selector was before the selection to move it to the selected position after a user interaction. He resorted to using javascript that basically only did some class switching. This immediately gave me an idea that a sibling selector could be used for that if the indicator had the same parent as the inputs and was positioned after them in the code. And today I made a proof-of-concept solution I’m calling “the three-way CSS-only selector”.

It uses three radio buttons, so the form is perfectly submittable, the labels also select properly, it animates properly and does not use javascript. It’s only been tested on the browsers I have on my Mac, so I can easily see it breaking in IE or mobile browsers – if anyone wants to fix that please go ahead and ping me to add your solution to this post. You can also check the solution on JSBin.

Form protection

Friday, August 5th, 2011

I’ve seen a discussion recently on how to protect your forms from spammers/bots that come and fill the forms to either fill your database with crap data or fill your page with porn links. When I read the answers I figured out that none of the people read the amazing article I did years ago, so I decided to try to remember what it said. So, a big fat disclaimer: I read this in an article somewhere and I don’t remember where. If you know the original article please post it in the comments, I’d love to link to it, I bet it has way more info than this one.

The problem

Almost all websites now have some forms on them, some of them are contact / registration forms, others use the data submitted and display it on the site itself (comment forms). But letting others submit data to your site/database opens you to all sorts of attacks. If you actually show the content of the submitted form, you’ll get a bunch of spammers posting comments with lots of links. If you only store data and not show it anywhere you’re still at risk – if you don’t notice your disk can fill up, your database may grow beyond its limits,… So what we want to do is to prevent bogus form posting.

Spammer approach

If you think about writing a spam-bot that will try to spam as many sites you possibly can you have two basic approaches.

Record / replay

This is a very simple approach – you use a person to submit the form, preferably with something that looks like real input and record the request made. Then you hand that data off to the bot, it changes some content and tries to resubmit it.

Automation based on heuristics

I wanted to say AI, but it really isn’t. What it is is a set of simple rules and randomized values that the bot thinks might trick your site into accepting the submit. Let’s say you have three fields, two are inputs with field names “name” and “email” and the third field is “comment”. A simple script can fill these with “valid” data and try to submit it.

Human entry

By far the simplest, but also most costly for spammers. Go on Amazon Turk or whatever other service, send a link to a Google Spreadsheet and have people manually enter the stuff into your forms. This is the source of “Sorry, this is my job” endings to spam comments.

Popular solutions

Turing test

Add a field to the form that the user must fill with something that humans can do easily, but machines can’t. The biggest group here are Captchas (display an image with distorted characters, possibly an audio link that reads out the same characters, and have the user somehow figure it out and write the solution), but there have been others, like a “Human?” checkbox, or “3 + 4 =” fields, “Is this a kitten?” with a pic next to it.

2-step process

Supposedly by far the easiest way to do this is by introducing a 2-step process. After the initial submit, you get back a preview of the submitted data, possibly with a checkbox that says “Is this correct?” and another submit button. Robots are usually not good at following through and thus don’t actually submit the content.

Both solutions have an impact on user experience. With Captchas it’s sometimes really hard to see what they are and even if they have a “different image” link, it just seems like the owner of the site wants to make your life hell before you can submit your data. The other challenges might be easier on the user, but also easier to figure out if you’re being targeted by bots. The 2-step process works great for comments, that usually don’t have an edit link, so it might actually be good for user experience if done right (not Wikipedia style), but are less appropriate on other types of forms.

Protect yourself differently

These are the techniques that should prevent most bogus form entries from random passing bots, except “Human entry” – no protection for that, even though Captchas try hard. There is not much you can do when you’re targeted…

Honeypot field

Use this field to trick autoguessing bots to submit something in a field you know should be empty.

  • Add an input field to your form with a regular name (state, maiden-name,…) that does not appear on your form otherwise.
  • Use a label that will clearly communicate that it needs to be empty.
  • Hide it with CSS, preferably not by adding class=”hidden”.

If the form post includes content in this field discard it and redirect back to the form. The trick is to make sure the bots don’t figure out this is a honeypot, so use valid looking but nonsensical classes…

Date field

Use it to prevent resubmit of data too far from the creation date. Allow users a few hours to post the form.

To prevent manual modification you can use either proper encryption (symetric or asymetric) that will allow you to decode it on form post or use this date in combination with the onetime token.

Onetime token

Use this field to prevent replay of request data. If you can, save it into the database.It is a good idea to make this token in a form that it cannot be faked (say one character changed ad you have a valid one). This can be done with hashing data or encryption.

This one can be as tricky as you want. What I usually do (disclaimer: I don’t know much about encryption so this might be crap advice) is use a plain datetime field with the onetime token generated from IP address, UserAgent and the date field with HMAC. There is no need for this token to be reversible – I can recreate the same thing with the data from the form post and check if it matches.

When using these techniques make sure you take care of the user experience. If you detect a problem on what might be valid user input (“timeout” on the date field with a non used onetime token, wrong onetime token from an ip change by the service provider), you might want to display a second step from the “2-step process”. Whatever you do, don’t call your users spammers or bots – be nice, bots don’t read the text anyway.

Did I miss anything?

I know of no plugin that uses all of these techniques, but I haven’t really looked for it. What I do know is that I don’t want to ever use a Captcha, cause it often keeps me out, and the 2-step process in just too weird sometimes. Hope this helps. And again – if you find the original article (must be some 5 years old now at least if not more) or have any other solutions you use or endorse, do leave a comment.

An Event Apart Seattle review – day 1

Wednesday, June 2nd, 2010
An Event Apart Seattle
Image by Heather L via Flickr

“This is your pilot speaking. We’ve been notified that the passenger bridge has a flat tire.” were the first few words after landing in Chicago, the third airport of the day. I left Ljubljana at 7:15 CEST towards Amsterdam, switched planes and continued towards Chicago. Fortunately the issue with the gates was small enough not to endanger my connection for the last leg – to Seattle, where I landed around 16:15 PST (around 18 hours after taking off from Ljubljana).

I came to Seattle to attend An Event Apart, a conference I wanted to attend since it was first announced. Meeting people like Jeffrey Zeldman and Eric Meyer and learning from them is just amazing. But first I needed to get to the hotel in downtown Seattle and get some sleep.

After a really long day the light rail ride from the Sea-Tac airport to downtown Seattle was really amazing. Going through the suburbs, enjoying the displays of American culture – the highways, the trucks, the architecture, the people. There were only a few of us on the train at the first stop, but at the next stop loads of people got on wearing bright green shirts, scarfs and even a few kids with their faces painted green/blue – fans of Seattle Sounders FC. I thought to myself – nah, it can’t be soccer.

As I arrived a day early I had a day to spare to see the city. I woke up late and then visited The Space Needle – amazing views even in cloudy weather. I didn’t take the old-school monorail built for the world fair in 1962 thinking I’ll do that some other day. After registering at the wonderful Bell Conference Center (thanks to Marci for resolving the issues and sorry I woke you up Gašper) I walked through town to the Pike Place Market and to the high street stores – and wandered into a huge Anime convention (Sakura-Con) and a bunch of kids (not even teenagers?) wearing totally inappropriate clothes.

The day ended with a karaoke meet-up set up by Jeff Croft. I met Mike Davidson of the Newsvine fame (thanks for the beer!) and I heard Andy Clarke and Jeremy Keith sing Ace of Spades together.

The conference started on Monday with breakfast – a really good one. And then two days of talks and an additional day of workshops. I’ll review them in different depth.

Jeffrey Zeldman – Put Your Worst Foot Forward

I wanted to see Jeffrey talk for some time now. I also got to meet him just before the conference started which made me want to see this even more as he’s a really friendly guy with years of experience to share. And the talk proved to be all that and more. Explaining his mistakes from the past and the ways he is solving them – teaching what to do with anti-patterns (to quote Jeremy Keith) was really effective and I think we were all nodding as it seems we all do the same mistakes.

The checklist

  1. Know before you go.
  2. Keep expectations on track and in sync.
  3. Constantly course-correct.
  4. Tell the TRUTH.
  5. Phrase it from the client’s/boss’s point of view.
  6. Report bad news before the client/boss notices it.
  7. Have a recovery plan.
  8. Apologize-but never denigrate yourself or your team.
  9. Have an exit strategy.
  10. Know when to quit.


Working with clients is a long distance relationship – away from sight, away from heart. You need to put more energy into syncing and you need to make sure you see things with their eyes. And as in any relationship – you need to know when to leave.

Nicole Sullivan – Object Oriented CSS

Nicole used to work for Yahoo! and recently helped Facebook optimize their stylesheets, so you might say she has some experience in building and maintaining CSS systems. But unfortunately it also means that a lot of us cannot relate to some stuff she is saying. One of the first thoughts I had was that she might be a good person to write the “CSS – The Good Parts” – she even quoted Douglas Crockford in her presentation.


There were a few points that I couldn’t agree with when she said them and decided that I will think about them later. I’m not saying they’re bad practice, I just don’t think they’re good advice for most of us.

  1. Don’t use specificity was one of the things that seem like throwing away a really powerful tool because some people can’t handle the power. I could probably agree with this in big systems, but it sounds like one of the reasons to adopt Java – it’s easy for beginners to start doing productive stuff and hard for them to screw things up.
  2. Don’t use .class1.class2 as that causes all sorts of cross-browser issues. I would classify this as good stuff but it seems only IE6 is affected. So I couldn’t care less…
  3. Hacks shouldn’t change specificity as you’re not using specificity at all. That means that Modernizr and all other tools that add a class to the HTML/body elements are out of the question. The solution – using _property:value; – was something I don’t feel good about – using such invalid hacks just seems wrong.
  4. To define headers use h1, .h1 {} and in HTML use <h2 class=”h1″>…</h2> if necessary. That just seems wrong even though I agree that reusing styles is important.
  5. Avoid specifying location when targeting elements. When you do that moving an element into a different context loses the styles.

Good stuff

This list is what I think can mostly be used today for most of the people writing CSS. It is not a set of rules to abide in every case, but it should be your main modus operandi.

  1. Reuse code as much as possible. If you’re copy pasting, you’re doing it wrong. One of the ways to do this is by following the second rule.
  2. Don’t use ids, inline styles and !important to write easily applicable code. You should not write location specific code. Don’t use .sidebar ul, but rather add a class (eg. sidenav) to that ul and use .sidenav for the rule. Smaller CSS yes, but it will also get you bigger HTML (and classitis?).
  3. Think in modules and provide styles that are easily reusable by just using a class name in HTML. Only elements that are strictly bound to modules should have location specific selectors (but with .class, not #id).
  4. Put defaults into .class and use elm.class to apply specifics. Many elements can have .error – and all errors should have a similar look, whether they’re divs, lists or paragraphs.


  1. Variables are something a lot of people want. What I want is for them to be simple enough that people can’t abuse them to make CSS a programming language. The proposed syntax:
    • To set the variable: @variables hex {myblue:#006;}
    • To access the variable a {color:hex.myblue;}
  2. Prototypes are a really good way of providing defaults to a lot of elements at once and gets rid of rules that have many comma-delimited selectors. The proposed syntax:
    • Set a prototype with allowed child nodes: @prototype .box {margin:10px;children:b,.inner;}
    • Add styles to child nodes: .box .inner {position:relative;}
    • Use a prototype: .weatherBox {;}
    • Under the hood this translates to: @prototype .box, .weatherBox {…} .box .inner, .weatherBox .inner {…} .weatherBox {…}
    • Also allows checking code: .leftCol .inner {color:red;} is invalid as .inner is part of .box prototype and .leftCol does not extend it
  3. Mix-ins were skipped in the presentation as she was running out of time. You can think of them as small pieces of repeatable code that is only set in one place and used in others. Syntax:
    • Set a mixin: @mixin .clearfix {zoom:1}
    • Any selector that matches the mixin selector modifies it: .clearfix:after {content:”.”;display:block;height:0;clear:both;visibility:hidden;}
    • Include a mixin: .line {include:.clearfix;}
  4. Prototype sub-nodes were also skipped. They seem to allow calculations based on values defined in different sub-nodes of prototypes – they’re not meant to access computed style:
    • Use calculations: .box .bottom {height:5px;} .box .bl {height:10px;;}

Some of these changes will require us to write code for new and old browsers independently or to write a “compiler” that will compile code for older browsers. Is there one already written?


Building a CSS system means thinking about the selectors (and not the properties) and Nicole probably knows more than anyone else on that subject (to make you feel more comfortable, Jeremy Keith of Clearleft said they arrived to the same conclusion independently). Another, probably even more important takeaway is that you should think about flexible modules – sometimes stuff is more similar that it might seem at first. If you write CSS for a module that supports variations you’ll write less code that will apply faster and your visitors will be happy. If you want to look into an Object oriented CSS framework – check Nicole’s project OOCSS project at GitHub.

Dan Cederholm – The CSS3 Experience

Dan told us that we can and should use CSS3 now in non-critical areas such as experience, visual rewards, feedback and movement for users with the latest & greatest browsers. Not so much progressive enhancement as progressive enrichment.

Some ideas for use of CSS3:

  • Hover on items with RGBa background, a text-shadow and a border-radius with a transition (Sam Brown style).
  • Hover with opacity change. Create a single image, make it transparent normally and less transparent on hover. With a transition of course.
  • Multiple backgrounds to achieve a Silverback parallax effect.
  • Enriching form elements with a background gradient and border radius.
  • Making form buttons prettier with text-shadow, border-radius, box-shadow and a background gradient. Animate the focus styles.
  • Use scale transform with box-shadow and a transition for hover on images in gallery.
  • Rotation on hover for a single degree with a transition.


You can use CSS3 today, but know what others are missing so they don’t miss critical visual cues. Be subtle with these things or we’ll end back at using transitions to make stuff blink.

Luke Wroblewski – Mobile First!

Web products should be designed for mobile first. (Even if no mobile version is planned.)

Mobile is a big opportunity for growth, but you need to think about different things than when you’re doing web development like:

  • Multiple screen sizes and densities
  • Performance optimization
  • Touch targets, gestures, and actions
  • Location systems
  • Device capabilities

Designing for a smaller screen size will make you focus on core actions. To do that you’ll need to know your users. You should focus on iPhone, not (only) because of its popularity but also because it sets the design expectations very high. It also doesn’t allow any hidden features that hide in menus pressed by buttons – everything needs to be on the interface. When designing you should define device groups, create a default reference design and define rules for content and design adaptation – opt for web standards and a flexible layout. Technically you need to take care that you reduce requests and file size. You should take advantage of HTML5 that allows you to cache things locally and gives you the canvas tag that might sometimes be smarter than loading images. Think outside your web box – less cross browser issues means some new tricks come into play (like data URLs).

The context of using mobile applications is different. It’s not a long time sitting in front of a computer but rather quick bursts of attention everywhere, using mostly just one hand.

Mobile is innovating fast and you should think about the new capabilities to innovate yourself. Touch interfaces mean no hovers, thinking about bigger touch targets and a bunch of gestures that differ from platform to platform. Location information (from GPS, WiFi, cell towers or IP) is almost ubiquitous and can be used for positioning and filtering, but you should not forget other innovations that are less obvious like orientation information, audio & video input and output, compass, push notifications, Bluetooth connections, proximity sensors, ambient light detectors,…


You need to think about mobile because it’s an opportunity for growth, the constraints will give you the focus you need to make a great product and the capabilities will drive innovation in your product. But don’t forget that the design considerations are different.

Aarron Walter – Learning To Love Humans—Emotional Interface Design

There’s a lot of talk about usability of web pages, but is this enough? Usable is just edible. Would you say you go to the restaurant because their food is edible? We have a few options on how to trigger an emotional response to our designs – one of them is giving our sites personality. It’s a platform for emotional response as we like to empathize and personality invites empathy.

People will forgive shortcomings, follow your lead and sing your praises if you reward them with positive emotion.

You can use treats to give users something more. Let users discover new things. It’s the little positive surprises that make us happy.


Usability is not enough, we need to think about designing pleasurable experiences. We need to create an emotional response from our users and make them want to come back.

Jared Spool – Anatomy of a Design Decision

How do we make design decisions and what kind of designs exist? There are a few decision styles:

  1. Unintentional design – when users will put up with whatever we give them and we don’t care about support costs and frustration (think airlines & hotels).
  2. Self design – works great when users are like us and we are our own users (think 37signals).
  3. Genius design – when we have domain knowledge that informs our decisions and we’re solving same design problems repeatedly.
  4. Activity focused design – when we can identify users and record their activities to go beyond our previous experiences.
  5. Experience focused design – when we want to improve our users’ complete experiences, in between specific activities.

There are ways of moving up the chain:

  • “Eat your own dog food” to get from unintentional to self design.
  • Do usability testing to get from self design to genius design.
  • Field studies get you from genius design to activity focused design.
  • Personas & patterns help you get to experience focused design.

There are two fundamentally opposite ways we can make decisions:

  1. Rule-based decisions are based on design books, brand identities and other rules. They don’t allow exceptions and ignore the knowledge of the person deciding.
  2. Informed decisions are based on design patterns and put the person deciding behind the wheel. They are good for handling exceptions.

With this in mind we can look into what is needed to do one or the other:

  1. Dogma
  2. Methodologies
  3. Process
  4. Techniques
  5. Tricks

The first two are typical for rule-based decision making as they rely on a set of rules and don’t require a lot of knowledge from the person deciding. Techniques and tricks on the other hand come with experience and a lot of domain knowledge.


You need to know which decision style you’re using and encourage informed decisions, avoiding rule-based decision making. Techniques and tricks are more effective than methodologies and dogma even though/because they’re harder to come by.

Pete LePage – Help Us Kill IE6

A sponsored talk that didn’t really turn out as bad as some I’ve seen at other conferences (eg. FOWD). Pete presented the history and some IE9 features. He also suggested that we let IE6 users know that they might want to upgrade their browser as Facebook does.

MediaTemple Party

The party was nice – being fashionably late meant that it wasn’t too crowded and that most of the snacks had already gone. I had a brief chat about designing Drupal 7 with Mark Boulton, met Aarron Walter and Petra Gregorová formerly from Slovakia and a police man from Denmark that does web development in spare time. And I grabbed a (mt) beer and a coaster as a souvenir.

Enhanced by Zemanta

Speaking about the web of data

Wednesday, February 25th, 2009

Today at 19:00 CET I’ll be speaking at a local web meet-up about the web of data. There’ll be a live feed of the talk available and since I’ll be speaking in English you can tune it. This is a quick translation of the abstract posted on Slovenian sites:

Numerous services are emerging on the web that provide data in a computer friendly form through APIs, microformats, feeds,… Even your blog is actually a database as it syndicates its content via feeds and new posts trigger a ping you can subscribe to.

This fact opens new ways of collaboration – so called mash-ups, but this isn’t really a new concept. What’s new about it is the fact that we don’t use this word anymore as all the new services are some sort of a mash-up leveraging existing services. But accessing data is not the only way to leveraging these services – it’s becoming increasingly easy to create an application that lives in other applications without their approval through browser extensions and bookmarklets.

Marko Mrdjenovič from Zemanta will talk about what you can do to make your site more mash-up friendly and why that’s becoming increasingly important. As a developer I’ll also present what options you have and give a few tips on what to do and what to avoid when developing these kind of apps.

If you have any questions during the talk use twitter to tell me and I’ll try to answer them. Or put them in the comments.

Update: The video is now online. It’s in English so go watch it and tell me what you think.

Reblog this post [with Zemanta]

Getting into the graph

Sunday, January 11th, 2009

Designing forms online is a hard job. What you need to do is find the right balance between the consumer experience which is generally worse as the number of fields grows and the amount of content you or your employers want to get from the user in a single form. With this you’re defining the conversion rate of a form – less fields will, ceteris paribus, give you a higher conversion rate – which means that you should strive to have less fields in a form (although recently I saw an argument on twitter that you want for people to put some effort into forms to avoid registration from people who will never use your service1). Having many fields in a form has two major effects – users cannot easily scan the form to see if they’re actually willing to give away all the information that you want and they don’t want the form to take a lot of time. Since you sometimes can’t lower the number of required fields you can try to lesser the pain of filling them – by auto pre-filling them.

This is especially true of contact/feedback and registration forms. On contact forms the only thing consumers want to give is the message, on the other hand what you want is at least a name and a way to contact them (the others in your company might want more, but that’s a different storypost). The registration form is somewhat similar in the way that you can make it really simple by just using email and password fields but then again it’s nice if you have a way of addressing your users other than an email address and if your application is at least a bit local you also want their location.

The other side of the story is obviously that consumers don’t want to fill the same forms all the time. As time passes they’re minds are saying “Not again…” which is not that far enough from “Why can’t they get it from some place I already use”.

Into the graph

There have been a lot of attempts at solving this issue of repetitive entering of same data. There’s a way to do it with OpenID, which unfortunately isn’t ready for mass use since not many people use it. Other possibilities are public APIs of numerous services that allow you to get at least some user information if you have some data about them.

One of these APIs is Flickr‘s as it allows access to user information if you have the user’s email through flickr.people.findByEmail and then flickr.people.getInfo as is neatly demostrated by huffduffer which uses it to retrieve your Flickr avatar.

What you have now is the user’s name, “preferred” username, location and avatar (which you might have had already if the user is registered with gravatar).

The graph

Social Graph Platform Wars
Image by davemc500hats via Flickr

The other place where you can get decent information about the user is Google’s SocialGraph API. With it you get lots of services from which you can get all kinds of public information about a user. The problem with this API is that you first need a relevant entry point which must be a URL that the user owns. This can be a Flickr user URL (that you have if you successfully completed the previous step) but these don’t always produce very good results.

What seems to produce better results are twitter URLs – the only problem wasis how to get one. An easy way to get the users twitter URL is demonstrated in a blog post by Chris Heilmann. This will get you all the information you get from Flickr for all the users that are currently logged in to their twitter account. Seems that this is not possible anymore!

If you’re still not getting anything you can still ask a user for a URL – be it their blog or any social network service account. Or you can let her log in using other services that will give you a good starting point, like Facebook Connect or OpenID.

Data from the graph

What SocialGraph gives you is a list of services the user is registered with. You can also get their list of friends – if any of them are also users of your service you can suggest they also connect on your service. You might also get to know whether they use OpenID and suggest them that they use that login to log into your service too. Or you might be able to figure out what their blogs are – especially when they’re claimed on Technorati.

This information can also help you get in touch with your users as you can automatically contact them on services where you also have an account, like Facebook, twitter, friendfeed and others.

The thing is that once you have all this information you should be able to get all the public information the user has exposed on any of these services. And you can use this information to help the user by pre-filling forms or use it in other ways that a user might find helpful, but not spooky.

What you shouldn’t do is use this information in ways that might scare the user. For example if you can get the birth date from any of the services, don’t hide the fact that you did – offer a form to fill the date and prefill it. This way the user won’t be spooked if you send them a happy birthday note or you greet them with a happy birthday note.

This form should get your Twitter data and then get some of your services via Google’s SocialGraph. It’s all nicely wrapped in an hCard.

  1. Sorry I forgot your name as I’m not yet used to bookmarking twitter statuses. back
Reblog this post [with Zemanta]

jQuery transport is out…

Wednesday, October 1st, 2008
JQuery intermediate site

Image by Phillie Casablanca via Flickr

After a week of mostly testing and fine-tuning the code I finally released the windowName transport plugin for jQuery. You can get the plugin here but I suggest you first check the plugin page.

I need help testing

If you have an obscure browser / OS combination that is supported by jQuery I urge you to test the plugin. There are no good test pages yet so my temporary test page will have to do. The test page POSTs the querystring passed to it to a nonlocal domain and should open a JavaScript alert with the same querystring plus php=true.

On a sidenote – I figured out that the page looks better without the background images. So I changed the theme – let me know what you think.

Reblog this post [with Zemanta]