Using the ~ selector in CSS

So Eric Wendelin is wondering what can be done with the CSS3 indirectly-adjacent sibling selector, now that the majority of browsers actually support it. Here are some ideas off the top of my head:

Minimalist horizontal menus

<style type="text/css">
ul {list-style:none;margin:0;padding:0;}
li {float:left;}
li ~ li {border-left:1px solid #000;}
</style>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

The code above puts borders in all menu items, except the first. Like so:

• Home
• About
• Contact

 

This same idea can be applied for other menu layouts (it's particularly useful for boxy, multi-level left menu designs.)

Equally spaced 3-column layout

.column {background:#eee;float:left;width:32%;}
.column ~ .column {margin-left:2%;}
html:
<div class="column">Text</div>
<div class="column">Text</div>
<div class="column">Text</div>

Pretty self-explanatory, I hope :)

Sematic Inference

Say you have a blog:

<style type="text/css">
h1 ~ p {/*article styles*/}
h2 ~ p {/*comment styles*/}
</style>
<h1>Using the ~ selector in CSS</h1>
<p>Bla bla bla, Leo talks too much.</p>
<h2>Comments</h2>
<p>First.</p>
<p>lolol photoshopped</p>

Much cleaner than wrapping divs everywhere, huh?

Anything else?

I'm sure there are plenty of other cooler ways to use this selector. Now that Microsoft has announced that it will no longer sell XP, IE6 will become less and less of a concern and I expect web developers to start exploring new CSS techniques more.

If you got more ideas, post them up :)

OFF - The Internet really can be your hard drive

Interesting.

Regexp and javascript

Jeff Atwood psoted some nice insights on regular expressions. It sorta made me realize that the Javascript's built-in regexp class sucks ass :)

A lesson on humility

Sigh. Conservapedia folks, let me put this nicely: no one cares what your opinion is.

Not so private

I saw quite a few people surprised at this little known tidbit about eval in firefox. Maybe it's just me, but can't we simply download the script and run it in Rhino or whatever if we really wanted to extract "private" data for an attack?

I thought one of the golden rules of security is that there's no such thing as client-side security.

Making sites faster the easy way

Awesome presentation by YSlow lead dev Stoyan Stefanov.

flXHR - Flash based Ajax

Very nice library, it claims to have good interoperability with js libraries, cross-domain communication capabilities and a few interesting and advanced goodies.

I'd like to see if this technology can be explored more in the realm of Comet.

Formy - CSS Framework for forms

It's still beta and doesn't have a demo up, but it might be nice to look at it.

Blogging and content stealing

Interesting point. Imho, there's something terribly wrong when people want to essentially capitalize on their opinion's copyright - especially when they can use the legal system to do so.

RDFa and microformats

Interesting reads if you're interested in semantic web and are guilty of using HTML attributes intended for human consumption for machine data.

CERN won't end the world

For whatever reason, reports like these just amuse me. When you really think about it, if CERN was to really blow up the world, who would be alive to care?

Jiffy: Fine -grained performance timing

Neat firebug extension.

Firefox 2 and firefox 3 at the same time

Need to support both? No problem.

Skinning text with CSS

I usually cringe at the IE6 PNG alpha hack, but this is a neat trick.

Acid 4 - going back to the origins

Acid 4 is beginning to get planned out, and will aim to test rendering of graphics, much like Acid 1 and 2, and leave out scripting, performance and the somewhat criticized suite of minor specific bugs.

ASM to MSIL

Here's a weird project: you can write code in x86 assembler and get .NET MSIL out. Cool.

HTML vs XHTML

Funny how things go. Two years ago, XHTML 1.0 was all the rave, and now we're back to promoting good old HTML 4.01

IE ol bug

Say we have the following code:

<style>
ol li {width:200px;}
</style>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

This will cause a really dumb bug in IE: the bullet numbers don't increment.

The easiest way to fix it is to remove the fixed width from the li. The problem with doing that is that IE might trigger peekaboo bugs instead, if you have floated stuff inside of the li. To get around that, we can do this:

<style>
ol li div {width:200px;}
</style>
<ol>
  <li><div>Item 1</div></li>
  <li><div>Item 2</div></li>
</ol>

Let's talk about security

Interesting discussion on how to make web app developers and security meet.

Internet Argument

This comic strip wins the Internet.

You suck at photoshop

This is an interesting series. Can't go wrong with advanced photoshop tutorials in a clever comedy format.

Slickspeed, Dromaeo and Acid3 on Firefox 3, Opera 9.5 and Safari 3.1

So out of curiosity, I ran Acid3, Mootools' SlickSpeed, John Resig's Dromaeo benchmark tests with the shiny new "grade A+" browsers to see how the javascript engines fare. Ok, I cheated a bit. I used Flock 2 beta, since I'm not downloading Firefox 3 until tomorrow.

Acid 3 Results

All three browsers failed, but not that badly.

1. Flock got 71/100 and stuttered twice on the smoothness of animation
2. Opera got 83/100 and stuttered once on the smoothness of animation
3. Safari got 75/100, stuttered twice on the smoothness of animation and displayed the red cat of death

Dromaeo results

You can see my dromaeo results for Flock, Opera and Safari, or run your own.

Overall Slickspeed speed

The slickspeed test is really meant to be benchmarking libraries, but since selector libraries are being used quite a bit nowadays, I figured it'd make a nice test. Here's the summary:

	Flock	Opera	Safari
DOMAssistant 2.7.1.1	76	12	0
JQuery 1.2.6	139	52	24
Prototype 1.6.0.2	183	44	68
MooTools 1.2b2	86	32	40
Ext 2.0.2	95	8	4
Dojo 1.0.2	84	4	0
YUI 2.5.1	330	184	191

Slickspeed Errors

DOMAssistant threw exceptions in Opera (h1[id]:contains(Selectors), a[href][lang][class] and div[class] tests) and Safari (h1[id]:contains(Selectors))

Observations

Opera seems to be the fastest in the dromaeo benchmark, but the results for the other two browsers were fairly close.

In terms of Acid3, Opera, again, was significantly better than the competitors, especially on the smoothness of animation portion.

In the slickspeed test, both Opera and Safari had a lot of greens (i.e. "0 ms") - DOMAssistant in Safari actually took (an almost fishy) 0 ms for all tests. On the other hand, there were no errors thrown in Flock by any of the libraries, compared to 3 errors in Opera by DOMAssistant and 1 error in Safari (by the same library). It goes to show that Firebug really makes Firefox the number one priority for js library developers.

In terms of DOM selection speed, however, Safari fared better than the competitors. I guess the moral of the story is that being in the bleeding edge warrants good performance.

Conclusion

Firefox/Flock seems to be slowest despite being the last to be released, but on the other hand, it's also the least likely of the 3 to throw errors during a regular session of browsing.

Safari is very fast on DOM manipulation, but lags a bit behind on raw javascript power (which is what SquirrelFish is aiming to improve). Like Opera, it's less likely to be as thoroughly tested as Firefox.

Opera is fairly well rounded browser, offering good performance on both raw js and DOM, but, as an underdog, it's also the least likely to be thoroughly tested by developers. Hopefully, a future, more feature-packed Dragonfly will change that.

Last Thoughts

Which browser is better? Well, it's your pick, really. Personally, I'm using Opera for most of my browsing, but I find that Firefox chokes less on richer sites (e.g. veoh.com's search and video-clip skipping don't work in Opera).

What I want to see from now on is more commitment towards performance and standardization by the Mozilla guys, and more support for Opera and Safari by library authors and developers.

Thinking different. Because I can :)

So Firefox 3 was finally released, servers were unreachable for about 2 hours and now the release rush is slowing down. Go ahead and download your copy if you want to, i'll be trying out Flock 2 beta instead. At least until tomorrow, anyways (cough-out-of-spite-because-i-dislike-hype-cough).

Firefox 3 Download Day is poop

I'm just gonna go ahead and say that this whole world-record setting thing is just dumb. A lot of people have woken up this morning to find out that firefox 3 wasn't quite up for download yet. Some are going to sleep. There's a lot of confusion when the download is even going to be available, since some say it was supposed to start at 10am, some are saying 1pm. Of course, spreadfirefox.com is down, since the servers got slashdotted, dugg and redditted at the same time.

Doesn't this whole thing remind you of line-ups for iPhones last year? It's not like you can't go into a store and just buy one today.

And how exactly are they counting downloads? One per IP? What about NATs? What if I download once at work and once at home? Does that count? Does the world record take Windows security patches into account? Do we even have the numbers for Live Messenger downloads? Picasa? Winamp? Real Player? Bonzy Buddy? Storm trojans?

For all anyone knows, the Mozilla guys could pretty much come up with whatever number they wanted and claim the world record. But somewhere along the lines, communication failed miserably and a lot of people were left disappointed with a delay they weren't expecting. And to that I ask, what's more important? The world record or the community?

Two things that annoy me about Adobe Software

1. I can't close a minimized PSD in Photoshop by clicking the close button
2. I can't open the find dialog in DreamWeaver by pressing CTRL+F if I have no files open. It's the interface for "find in files", so it makes no sense that I have to go to edit > find and replace.

</rant>

What branding can teach us

Success is all about specializing.

Do asians write better code than blacks?

My post title is obviously completely inappropriate. What in the world makes this ok?

Rather than dwelling on anedoctal "statistics", at least teach us something useful.

Tiny PE

So today I was playing around with writing a Windows .exe compiler and I spent a good portion of the day trying to write code to handle the MZ stub. Until it turned out that that we can pretty much clobber the whole thing (and a good portion of the PE header too, for that matter). Grr. :)

Where are we going from here?

Most people nowadays (at least in the western world) would cringe at the idea of a military junta or a 13-century-style dictatorial monarchic or feudal system. The reason is obvious: Systems like those take away freedom from the masses in favor of a small elites. People can't share their ideas without fear of retaliation and there's pretty much no room for fair competition. You're either at the top making the rules or you're at bottom, stuck with having to follow whatever rules are shoved down on you.

Politically speaking, we're not living in a terribly bad system. We can send letters to our representatives when we want our concerns heard and we can boycott treacherous politicians on the next election.

But on another front, as we move deeper into a digital era, we hear more and more about intellectual property, digital rights managements, and lobbying by industries. We're even starting to see things like C-61 - which has essentially been dubbed the "Canadian DCMA, only much worse".

There's active research going into DRM hardware. What stops people 5 years from now from abusing these systems to promote censorship of material that degrade their political opinions?

What's stopping corporations today from engaging in barratry-like litigations to eliminate competition, or to set legal precedences for further harassment and political gain?

I don't know what can stop it, but money sure seems to be an easy way to continue pushing special interest groups' agendas deeper into the law.

Wear red

For those familiar with the Starcraft Pro scene, you might have heard of Moletrap's color theory: that players playing red usually win. It turns out that his theory might not be as silly as some might have initially thought.

Is Google Making Us Stoopid?

Provocative article. Personally I think the whole thing makes sense: of course we skim through everything nowadays, there's just too much content for any sane person to go through. What I don't see is the correlation between the content disposition and stupidity: Being able to read long novels in one sitting is hardly an indicator of knowledge or intelligence.

One part of the article I particularly liked though was the one about Socrates; it is indeed very easy to fall into a false sense of being knowledgeable, considering the vast amount of opinions floating around blogs and forums, and the open communication format of the web encourages loudness and attention grabbing skills over actual information. Just because you agree with what people say on your favorite sites doesn't mean you're knowledgeable about any given subject as a whole (especially since everything is bound to have gray areas).

Take the C-61 thing I talked about yesterday for example: not many people actually read the document; most will base their opinions based on what they already do with their digital media and (maybe) what Slashdot tells us that Michael Geist said (he reportedly hasn't read the whole thing yet, mind you). However, there's no secret conspiracy stopping Geist from finishing reading it and further solidifying his position as an expert in copyright legislation.

There are other ways to become more knowledgeable too. One could start looking into ACTA and, in the process, find out that law.com is a really interesting site for things concerning non-IP-related law matters, or maybe get interested into economics, politics or whatever other factor that plays into the copyright protection game. Then, we go from there.

Are we going to eventually become ultra-efficient mind machines? I don't think we have to, but if we want to accomplish anything significant, we probably should. Not at skimming, but at specializing.

Security breach

Forget Quantum Eavesdropping. The weakest link in security is always human.

C-61 - The canadian copyrights act

The canadian government just introduced the C-61 bill, the canadian copyrights act. It's fairly restrictive towards multimedia consumers, prohibiting multiple usage and indefinite storage of time-shifted copies (e.g. via PVR systems), and it gives judges freedom to impose punitive damages in any case, regardless of whether a copyrighted piece was illegally shared or downloaded. It also leaves out backup rights for DVD and CD media. The almost-upside is that fines for people downloading illegal content are capped at $500 a pop (compared to the $9000 in that one US case). Almost-upside, because of the punitive damage clause I mentioned.

There was some criticism on the creator's rights side as well, as it makes it illegal to "distort or mutilate a copyright performance", i.e. any author can use this clause to sue someone making a satire, criticizing documentary or any form of fair use that puts a negative spin on their work.

Another significant area of interest is DRMs. It's illegal to bypass DRM schemes unless you're doing reverse engineering, security testing, or encryption research.

Personally, I'm not particularly impressed by this bill.

Blocking Usenet

ISPs are going to block Usenet to fight child porn. Here's another "brilliant" idea: let's block all HTTP traffic!

An exciting month for the browser wars

The official Opera 9.5 was released today, promising a 50% speed improvement and many features: the speed dial, fraud protection and a lot of emphasis on synchronization capabilities.

In similar news, the long awaited Firefox 3 is set to be released next tuesday, boasting the "Awesome Bar", improved security and memory management.

Not to be left behind, the Safari team announced a sneak peak for the upcoming Safari 4, which will boast a score of 100/100 on Acid3 and lightning fast javascript with the new SquirrelFish engine.

In Microsoft land, we're not gonna see anything exciting until August, but they did announce that they are pouring efforts to help adoption of IE8 by IT professionals. While it doesn't sound like much, I think this is an important step for Microsoft and the standards movement, seeing how IE7 adoption didn't quite catch on and we're still stuck supporting IE6 for corporate clients in this day and age.

It's interesting that, despite being competitors, each browser team is focusing on very different things: Opera is betting big on mobile, Firefox is putting a lot of effort into stability and community support, Safari wants to be the bleeding edge technology showcase and Microsoft is focusing in compatibility and migration efforts.

Fixing button styling in firefox with -moz-margin-*

Yeah, yeah, yeah. Here I go talking about CSS buttons again.

If you style buttons often, you might have noticed that in Firefox, setting border:0 still leaves some mysterious amount of border space. We could fix the vertical centering of things by applying center to the vertical portion of background-position, but that doesn't work so well in the horizontal axis.

Since this issue is specific to Mozilla-based browsers, it turns out that there is an equally vendor-specific way to fix it:

button {-moz-margin-start:-3px;-moz-margin-end:-3px;}

Anti-bus-hijacking System. For real.

This is sad and funny at the same time. I wonder if someday it'll be possible to bring down the entire New Jersey bus fleet to a halt by spoofing the distress signal.

CIRA Whois Backdoor

This is a dumb policy. There needs to be some sort of mechanism to confirm whether infringement claims are valid before blindly releasing registrants' private information.

More on multicore development

The guy's got a point.

Marginalizing cyberbullying

Two words: WOW and Photoshop.

Apparently MMOs suck

Funny, I have been thinking the same thing. On a side note, since we're talking about games, I think Starcraft 2 is gonna flunk.

DMCA takedown notice framing

A research paper showing you can frame just about any networked device into being accused of downloading copyrighted material. Yes, that means someone could frame you too.

"Finally" and IE memory leaks

Really interesting way to fix memory leaks. The downside is that uses try blocks, which are said to be slow.

Well, there goes two billion dollars

And the stealth bomber goes capoof.

button-span revisited

After having used a <button><span> structure to create cross-browser sliding-doors-styled buttons for a while, I decided to write about the issues I've stumbled across, and ways I've found to fix them:

1. Widths go out of whack in IE, depending on the amount of text in the button - weird bug with an easy but non-obvious solution: add overflow:visible to the button.
2. Firefox aligns the background images wrong vertically - this has to do with a bug in the way button borders are handled. To make everything align, set both background-position's to center vertically.
3. Pressing the button looks ugly in IE - this issue has a somewhat obvious fix: to add position:relative to the inner span. The catch is that this fix introduces another nasty bug in IE (if you have dynamically generated html): the span won't redraw properly when the button needs to move due to stuff being added to the page via ajax. You end up with half of the button where it's supposed to be, and the other half sitting where it was. In IE7, we can apply position:relative only to the hover state, but I don't have a good solution for IE6 :(

So in summary, the CSS rules I use nowadays to style button-span's are these:

<style>
button,button span {
  background:url(button.gif) no-repeat 0 center;
  float:left;
  line-height:16px;
  padding:0 0 0 10px;
  white-space:nowrap;
}
button {
  background-position:100% center;
  border:0;
  overflow:visible;
  padding:0 10px 0 0;
}
* html button span,button:hover span {
  position:relative;
}
</style>
<button><span>Do Stuff</span></button>

Supporting McCain out of spite

So Obama won the nomination, and now some crazy people decided that they'd rather support a Republican, just because their pet candidate Clinton lost. Words fail me.

Yahoo's email address book API

Interesting enough, there was an article in Coding Horror about the very issue of lack of address book APIs by big email providers. Well, here it is, at least from Yahoo.

You've been left behind

You might have heard of that service that allows you to send an email to non-believers after the rapture (i.e. the day when all christians supposedly go to heaven, while non believers are stuck in a world ruled by the anti-christ). Here's an article on Wired about it. The comments are so funny.

Facebook Open Platform

Released under a variant of the MPL, apparently.

Safari is getting faster

With SquirrelFish.