Dead Puppies - Found old code.

Ever code, write, create something 'wayback' and then happen upon it? Yeah, me too.

I was talking with a co-worker about old flash projects and I remembered one such project I had done back in college. It was for a grade and yes.. I did do it at the last minute.

The kicker is that I received a good grade and everyone liked it.

My Flash project "Dead Puppies"

Just a quick note on using a static backdrop with Twitter Bootstrap: Modal

Okay, so I was working on a login form that was in a modal window. I wanted the modal to not be destroyable unless the user entered their username and password and they were correct/valid.

So I looked at the Bootstrap site for the options I need to set for that. I saw a note that you could make the backdrop not respond to mouse clicks by using the static option. The syntax was shown as follows:

view plain print about
1$('#myModal').modal(options)
2
3as in
4
5$('#myModal').modal(backdrop: static)

The when I tried that it gave an error "ReferenceError: static is not defined". So after much digging in the interwebs I found the answer, sadly I don't even remember where I found the answer. Which is part of the reason for this post.. so someone else might be able to find an answer to the same question sometime in the near future.

Anyhow, the solution is below:

view plain print about
1$('#myModal').modal(backdrop: 'static')

Yep, that's it.. wasted about 15 minutes on that I believe.

For those who want to know a bit more below is the code snippet I ended up using to show a modal login window, but not allow the user to press ESC on their keyboard or click on the backdrop to dismiss the login.

view plain print about
1$(document).ready(function () {
2 $('#myModal').modal({
3 show: true,
4 keyboard: false,
5 backdrop: true,
6 backdrop: 'static'
7 )};
8)};

Another thing I did was change the CSS for the backdrop because I didn't want the user to see the page behind the backdrop until they had logged in. So just do a find for .modal-backdrop in the bootstrap.css file and change opacity: to 1.0, I believe the default is 0.8.

view plain print about
1.modal-backdrop, .modal-backdrop.fade.in {
2 opacity: 1.0;
3 filter: alpha(opacity=80);
4}

The result would look similar to the image here.

Do we need to change icons to keep up with changes in technology?

Over at Design Festival there is an article 10 Outdated Symbols to Exclude From Your Designs written by Tara Horner that I disagree with. She states that..

Times are changing...fast. So fast, in fact, that often web and graphic designers forget that certain symbols or icons that they place in designs may no longer be recognizable nor relevant. Symbols that one generation recognize immediately may be completely unknown to younger users.

I understand the idea behind what she is saying there, but I don't believe that symbols lose their meaning from generation to generation so quickly or easily. My elementary age children understand the meaning of symbols discussed in the article. The also have used my iPhone and they know what the phone handset icon means, even though we have never had a phone like that in our house during their lifetime.

In the article she makes use of many icons of Apple items; iPhones, ear buds, Apple logo. Yet when I look at Mail in OS X I see envelopes, pencil on paper and a trashcan as icons. I think that most will agree that Apple has a good grasp of UI design (except for the skeuomorphism in some apps ). I think it is wrong to use say an iPhone as an icon for telephony, because it is a specific design by a specific company. Iconic as it maybe, it is only one aspect of the mobile phones that people use everyday. The phone handset is iconic in that it was around much longer and still holds meaning even to those who have never even used an older analogue phone.

Most people, even younger people learn to use software in the same way. Someone teaches them the basics at some point. When they are learning the basics they are given the meaning of icons used in the interface of the software. Since most apps and even web apps still use the floppy icon for the save icon, it doesn't matter that they have never used or even seen a floppy. The meaning is given in training or via tutorials, just like when I see an icon with of a speaker I know that is for sound/audio even though I don't see bare speakers anywhere.

As I commented on the article, change for the sake of change is not a good decision. Some symbols keep their meaning even after the original real world 'thing' has fallen out of use.

More Entries