Elliot Swan

Opera Celebrating 10th Anniversary — Free Licenses (4) 9:39 am

Opera is celebrating their 10th anniversary today, and as a result are having a Virtual Party and are giving away free licenses.

Nuke Pink (5) 5:04 pm

Some people complained to me that the pink stripe in the upper-left corner of the page was too distracting and didn’t fit, while others seemed to like it. I thought they both had good points, but you can’t please everybody.

Or can you?

If you’ll notice I’ve added a “user options” section over by RSS buttons with the option to Nuke Pink. Go right ahead and push it, and that pinkness that has haunted you for so long will vanish forever. Unfortunately, as soon as you refresh the page or go to a different page on this site it’ll come back, but I aim to change that soon–I just haven’t gotten to it yet.

Peace.

So I tried out Google Talk… (3) 9:52 am

I downloaded Google Talk this morning to give it a spin, and I’m still trying to decide whether I’m a fan of it or not.

It’s extremely simple, no clutter, and no ads (surprise there, I was half-expecting to ads displayed that are relevant to the conversation…).

It’s got a cool search feature that lets you search through your contact list (After all, what kind of Google product would it be if there was no search?)

It “sort of” integrates with Gmail, but not enough to be a ton of use. It has a link to your inbox, pulls your IM contacts from your Gmail contacts, and while instant messaging there’s a link you can click to email the person. It also periodically checks your gmail account to see if you’ve got mail.

Then comes what I assume they named the client after, the “call” feature. When you have an IM window open with somebody you can hit a button to “Talk” them. It “dials” them (you even hear a ring), and they have the choice to answer it or not. If they accept, then you’re in. You can also mute your side, so you can be talking separately to several people by having everybody on mute except to whom you are talking to at the moment.

Overall, it’s a nice program, but it’s extremely minimal and I don’t think it has anything that will win people over from other clients. At least not yet, anyways. They say they are working on more features.

Try it out for yourself (you’ll need a Gmail account): Google Talk

EDIT: Just found another quite cool feature. You can collapse IM windows and stack them into one window, letting you see their s/n and the last message they typed or when they last typed something. Also when a window is collapsed a little green light will blink if they have sent you a message that you haven’t read yet. It will always tell you if somebody is typing by showing a picture of a keyboard in the right of your typing area, and it will also say “[So and So] is typing” in the header bar.

Google going to launch IM program (6) 6:53 pm

Looks like Google is actually going to be launching their own instant messaging system quite soon–Yahoo! Report

Pure CSS Tooltips | An experiment with the :after pseudo-element (2) 12:36 pm

You’ve probably seen those stylish JavaScript tooltips, such as the ones on ESPN. After reading the W3 CSS2 docs I began to wonder if something similar could be done using the :after pseudo-element and the content property. I found out that yes, it can be done, but (unfortunately) it does have it’s limitations.

The XHTML

First we have to specify our tooltip in our XHTML. The browser automatically makes tooltips from the title attribute, but they tend to look pretty boring. So I made my own attribute:

<a href="somewhere.php" tooltip="This is tooltip text">The link</a>

And there lies the first drawback: It won’t validate because I made up my own attribute. You could use the title attribute for this but if somebody hovers over your link long enough the browser will show it’s own tooltip over your fancy one. As far as I can see there’s no way to get around this behavior.

Creating the CSS

First let’s style the link a little bit:


a {
color: red;
text-decoration: none;
}


Now we’re going to use the :after pseudo-element and the content property to display the tooltip when the link is hovered:


a:hover:after {
content: " "attr(tooltip)" ";
}


This will pull the tooltip attribute and display it using CSS. Now let’s style it:


margin-top: 5px;
margin-left: 20px;
display: block;
font: 10px arial;
text-decoration: none;
padding: 10px;
background: #372B2D;
color: white;
opacity: .7;


We’re also going to want to make sure that the tooltip is the highest layer, so we’ll add z-index to it:


z-index: 200000;


Now I just know there’s going to be a few of you who are going to try this out then send me angry emails saying something like

Your CSS is a piece of crap! It messes up my whole link when I hover over it!

Well I hate to break it to you, but your browser is a piece of crap. Go visit Browse Happy and get a better one.

IE will take our CSS and make a complete mess out of things when the link is hovered, so we have to hide some of our stylesheet from them by using the child selector hack:

html > body a:hover:after { the styles }

The big problem

Now we get to the biggest limitation. If you try to put together a CSS tooltip using the code I just posted you’ll find out that the tooltip will be displayed inline and will move all your content around. In order to fix this, the link must be positioned absolutely. This will stop the link from shifting and will also let the tooltips be positioned using margins so that they don’t break your pages. But unfortunately, positioning your links absolutely is usually quite impractical.

In conclusion

Can these tooltips really be of any use if their links have to be positioned absolutely?

Actually, yes–but it still probably wouldn’t be the most practical way to do it.

See if we use them in a list, we can position the lists relatively and the links inside the lists absolutely. This will allow the links to be positioned absolutely but stay in their own lists. I’m thinking of using this on my sidebar to show the last five posts when you hover over a category. However, it would probably be smarter to use a variation of Eric Meyer’s Pure CSS Popups, as it uses valid XHTML and works in Internet Explorer.

If you want to see a working example of this article, check out Experimenting with CSS :after. Please feel free to play with the code and see what you come up with. If you get anything good please feel free to shoot me an email, I’d love to hear about it.

New “It’s all about me” Page (2) 11:39 am

I just redid the It’s all about me page. Both rewrote it as well as put up a new picture.

What do you think?

.PNG Image Fades (2) 5:33 pm

I just implemented a variation of Image fades for overflow: auto to the elliotswan.com homepage. It’s quite similar to that found on the chalk.it blog.

IE users 6 and below won’t be able to see it (unless they migrate to a better browser, of course ), but if your browser supports .PNG transparency and position:fixed, then it should hopefully look good.

I’d love to hear your thoughts on it, and if something looks weird in your browser please let me know.

EDIT: Unfortunately, I had to take it out for now, as it covers the footer and makes it impossible to use the links in it. If anybody has a solution for this, please let me know…

My Awesome Desktop (10) 7:17 pm

My awesome desktop

Check out my sweet mac desktop for guys who have windows. I’ve spent hours on this thing….

Programs being used:

• Konfabulator
• Object Dock
• WindowBlinds (the free version)

Using CSS, DOM, and AJAX to Create Websites That Function Like Applications (0) 8:56 pm

As a web developer I have often envied those who get to create software such as operating systems–this type of functionality hasn’t been done well on the web. What if a website could be created that looked, felt, and functioned more like an application? Imagine the possibilities. Seriously, try to imagine them. Think of what could be done if we could take the functionality and interactivity that is currently common in non-web applications, and combine that with the even further interactivity and possibilities the web offers. That could equal some awesome website.

Server-side languages such as PHP and ASP.NET do allow for much interactivity, but since it’s server side it is limited to refreshing the page every time the user wants to do something new. Flash has been used to do this as well, but Flash applications tend to be 1) annoying and 2) not very search engine friendly.

However, using CSS (especially 2, and 3 once more of it is supported) and the DOM is becoming increasingly popular and can also be quite effective. And now with AJAX, I think we are well on our way to being able to develop websites that both look and function like an application.

Check out Jake Tracey’s use of AJAX on his sidebar. That’s just the beginning. If we combine things like that with all the other great technologies out there, I think we can actually start getting closer to creating websites that are able to have the functionality and interactivity of applications.

Innovation in Design — Finding Problems to Fix (1) 7:21 pm

I was reading Innovation, Progress, and Imagination by Steve Smith the other day, and I thought this was an awesome statement:

Now, to make things even more difficult, innovation, to me, is not just solving a problem. It�s finding new problems. Sure, you can innovate an existing concept, but to me, true innovation goes beyond our current scope of knowledge. To do this we need to understand the tools which drive our innovation.

I think in order to find new problems we must not take anything for granted. Normal must not mean acceptable. If Thomas Edison had considered candles an acceptable source of light, we might still be using them. Somebody had to be determined that there’s a better way to make light than a piece of string with wax on top.

What problems can you think of that have yet to be solved? What things can you think of that have been considered normal and even acceptable that should no longer be? What could be changed on your sites (and mine) that would make them more accessible, even if the things that would be changed are currently common to most sites?

I believe it’s people constantly asking questions like these that make the most successful sites and designs.

Web Design Agency : Enhancing the user experience and usability of your web design is critical to the success of the website.