Dear Javascript Guru: Please Stop Using The Hash Symbol For No-Op HREFs

by Jon Davis 27. October 2010 18:31

This is evil:

<a href="#" onclick="doSomething()">click me</a>

I’m not talking about the onclick attribute (we’ve learned to late-bind such handlers with unobtrusive scripting), I’m talking about the href=”#”. This is a minor thing but now at the year 2010 it has become a genuine pet peeve of mine. HTML has been around since the early 90s and Javascript commonplace since ‘95 or ‘96. I started getting into web design and development in ‘96. So believe me when I say that if you are putting a pound symbol, or ‘#’, into your <a href="#" onclick="..">’s, you’re not tricking anyone with some brilliant idea because we were doing that back then. Actually, you’re annoying people.

That pound symbol has meaning to a web page. It is a bookmark identifier, i.e. #Your-Bookmark, or <a href="#Your-Bookmark">, which will navigate the browser to the place on the same page where the specified bookmarked item is named with <a name="Your-Bookmark">. So if the bookmark name in the link tag is blank, it will do nothing, right? WRONG! It will add another history item to the navigation history, and then it will scroll to the top of the page.

“But what if we have an onclick event and we want the text to appear as a hyperlink but don’t want the browser to go anywhere?” First, go back to school, this is elementary knowledge.

There are a few approaches you can take to do what you were trying to do here, without using the hash symbol.

Approach 1: Use CSS.

Try using <span class="scripted-link" onclick="alert('better');"> and then in CSS use .scripted-link { text-decoration: underline; cursor: pointer; }. See?! That wasn’t hard! This will cause the “link” text to look and feel like a hyperlink but it’s all just style. The text-decoration: underline will cause the text to appear as underlined (you can re-style this however you want, of course), and the cursor: pointer causes the mouse to turn into a hand when the user hovers over it. But if that’s too much work for you, here’s another approach.

Approach 2: Use javascript:void(0);

If you insist on using <a href>’s then use javascript:void(0);, i.e. <a href="javascript:void(0);" onclick="alert('better');" class="script-link">click me</a>. The statement “void(0);” does what it sounds like it does—it performs a noop (no-operation) function execution. In other words, it’s saying “do nothing”.

Here’s another little tip: If you want the user to see what the link will do, add two slashes and an explanation, i.e. <a href="javascript:void(0); // vote Green" onclick="vote('green');">Green</a>. This will cause the browser’s status indictator to show “javascript:void(0); // vote Green”, which looks ugly but at least it’s more informative to a smart user than just showing “javascript:void(0);”.

Yes, this is a bit more typing than using a hash symbol, but this is the only technically correct implementation of what you were trying to accomplish in the first place, plus it keeps your scripting efforts separated from the CSS guru’s efforts.

Approach 3: Declare The Function Outright, Then Return False

If you want to combine the HREF and the onclick handler, you can also just execute the handler as the href target outright,

<a href="javascript:doSomething()">click me</a>

The only caveat is that this function must return false or void, or else the page may navigate to an empty screen. If it doesn’t return false, you can force it to return false or void inline:

<a href="javascript:doSomething(); void(0);">click me</a>

Yes, I am posting this because I just came across yet another web page produced by people who should know better where I clicked on a link and it just scrolled to the top of the page because the HREF value was “#”. STOP THAT. I don’t ever want to see another hash symbol as the HREF value again, there is never any valid reason for it to be there. Use "javascript:void(0);" instead, and the world will be a better-functioning place—or at least its web will.

UPDATE 10/28/2010 1:40 PM: Per the comments below, there are other, perhaps even better approaches you can take. First, if the onclick function returns false, the navigation will be cancelled. (Truthfully, I may have forgotten about this, so I cannot verify this without testing and I don’t want to take the time to test at the moment, but I’ll take bruce’s word for it.) Second, you can also cancel the click event entirely with the event DOM object “by calling `event.stop()` or `event.preventDefault()`”. Thanks Dimitar.

Currently rated 2.7 by 7 people

  • Currently 2.714286/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

The Touch Tablets: Let The Fray Begin!

by Jon Davis 26. October 2010 00:10

So I sold my iPad a few months back and recently pre-ordered the ExoPC (aka Ciara VIBE, and please don’t Google for that) which is really the only worthwhile Windows 7 tablet PC on the market right now (if you want to call ExoPC "on the market" since pre-orders are closed and regular sales won't open untiil December) but the only reason why I got entrenched in the ExoPC excitement because it had been assumed by the media a few months back that the HP Slate with Windows 7 had been cancelled. But then a month or two ago HP Slate with Windows 7 showed up again, re-branded as a business computer. And it just became available for purchase. So now that the HP Slate w/ Win 7 has decided to show up and go on sale already, I am now an owner of BOTH, although neither have yet arrived. So right now I am looking at specs and documented details, and I’ll post a follow-up post and maybe a YouTube video comparing everything with real units hands-on.

Comparing the two units (ExoPC vs HP Slate 500) and comparing them vs that women's hygiene device, from what I can tell so far it looks like this ...

HP Slate 500 Tablet PC - Business Laptop and Tablet PCsimage
The HP Slate 500

The HP slate has the fastest processor of the bunch at 1.8 GHz. The ExoPC is only 1.66 GHz. The iPad is only documented as being able to run stuff, although it certainly looks and feels great.

The iPad's battery lasts up to 10 hours. The HP Slate battery lasts about 5 hours, and the ExoPC battery lasts about 4 hours.

The HP Slate has a smaller display (8.9 inches @ 1024x600) than the iPad (9.7 inches @ 1024x768). The iPad has a smaller display than the ExoPC (11.6 inches @ 1366x768).

The iPad and HP Slate both weigh about 1 1/2 lbs., while the ExoPC weighs in at 2 lbs. Frankly, I think we can safely attribute most of ExoPC’s extra weight to the size difference; at 11.6 inches rather than 8.9 inches it’s pretty much on par per square inch with the HP Slate in terms of weight. In fact, I think we could say the same thing about the battery life, too; more inches on the display mean more battery load, hence the 1 hour life difference.

The iPad supports only touch. The HP Slate supports both touch and pen stylus. The ExoPC is supposed to support both touch and pen as well.

YouTube
The Apple iPad

The iPad will let you watch movies, play games, surf the web, listen to music, check your e-mail, run a few productivity apps without rich text editing, and run any number of third party software applications except for those that run exclusively on Mac, Windows, Linux, or Android.

The HP Slate 500 and the ExoPC will let you watch movies, play games, surf the web, listen to music, produce music, check your e-mail, manage your accounting, run Office applications with rich fonts, run Linux in a VM, run your custom business software, and run practically any third party software application ever produced in the history of computing except for those that run exclusively on Mac, iPhone OS (iOS), or Android, although it does support Android emulation.

The iPad lets you dock to a proprietary iPad dock and connect a few peripherals such as a keyboard via wireless Bluetooth. Both the HP and the ExoPC let you dock to a proprietary dock, but both have USB ports as well as full wireless Bluetooth support. All three support standard WiFi protocols (802.11b/g/n) although I'm not sure about iPad's "-n" support.

iPad supports data transfer and removable storage strictly via Bluetooth, WiFi, and the cellular network. ExoPC and HP Slate support data transfer and removable storage via wireless protocols as well as via USB and an SD card slot.

The iPad's operating system is the Mac OS operating system that got stripped down severely enough to be suitable as a mobile phone operating system, which was re-tailored for multitouch UI, and was then given a massive screen. The HP Slate and ExoPC's operating system (Windows 7) is the Windows operating system which has evolved in each iteration with greater native support for touch and even multi-touch in Windows 7's case. Windows 7's taskbar was also re-tailored for big fingers. HP might have some custom-tailored software, but ExoPC is really a software company, not a hardware company, and they heavily tailored their tablet with a fresh and innovative touchscreen operating system interface that can drop down to native Windows 7 with a flick of a gesture.

That said, iPad and ExoPC have build-in software markets and package managers. HP Slate, I expect, does not.

iPad and ExoPC have built-in accelerometers. HP Slate does not.

The ExoPC Slate

iPad has no camera. ExoPC has a front-facing camera. HP Slate has two cameras, front and back. The nonexistent Edison Slate has five cameras, on in front, one on back, and three on the side. (Random.)

iPad has a model available with built-in GPS. ExoPC will have a model available with built-in GPS, but does not yet. HP Slate doesn't know how to spel GPEss. Theoretically, one can pair an Android or Windows Phone 7 mobile phone to the ExoPC or the HP Slate via Bluetooth to get GPS, so I don't see the big deal.

iPad has Apple. Slate 500 has HP. ExoPC has Ciara-Tech in Canada and some other strange brand in Europe, and nobody in the U.S. yet but a company will be announced in something like January, which is a couple years in Internet time.

Overall, I hope ExoPC retargets their software to run on other slates such as HP Slate, as the ExoPC and HP Slate are really fierce competitors. The key differences between the two are ExoPC being bigger (much bigger) in display size but might be prone to fingerprints and scratches on the back, while the HP Slate has a higher clock rate and has an appearance in my opinion of being sturdier especially on the back where it doesn't matter.

I've re-ordered a used iPad (again, yes, that’s why “re-ordered”) which has shipped, preordered the ExoPC which has shipped, and ordered a new HP Slate 500 which has not yet shipped. Once they all arrive, it'll be time for a fair comparison. From there, I’ll have to make a choice of either developing software for all these platforms or selling one or two of them off.

This should be fun!! I’m in geek heaven. Laaa..!

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Video: Dot.NET, Open Source, and License Fees

by Jon Davis 20. October 2010 07:22

I had not one but two (!!) conversations exactly like this over the last 48 hours. Absolutely ridiculous. I had to make a crappy video about it.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Use An Atomic Clock For Timing Synchronization

by Jon Davis 7. October 2010 01:44

We use GPS to map geographical data. And we use snapshots of time to track past events. Why not use atomic clock synchronization across the board to synchronize high-precision live data?

For example, in 3D television, the shutter speed of untinted 3D glasses is 60Hz per eye, and 120Hz on the TV, but the glasses and the TV have to be synchronized with each other. If instead the glasses and the TV were synchronized with an atomic clock down to high precision accuracy, one could travel around the world with the same 3D glasses and successfully view 3D content on different brands of 3D televisions with the same glasses, assuming all these televisions also used atomic clock synchronization.

Consider also how handy it would be for video editing if high definition video recorders stored high precision, atomic clock synchronized timestamps with each video frame. With a tap of a button in Adobe Premiere Pro (assuming it also supported this) you could synchronize multiple simultaneously recorded video streams without any special SMPTE time code synchronization techniques or anything like that. You just sync on the UTC timestamp.

I think it’s a fabulous idea. Remember, I blogged about it first! My idea! Mine! :)

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:


 

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

About the author

Jon Davis (aka "stimpy77") has been a programmer, developer, and consultant for web and Windows software solutions professionally since 1997, with experience ranging from OS and hardware support to DHTML programming to IIS/ASP web apps to Java network programming to Visual Basic applications to C# desktop apps.
 
Software in all forms is also his sole hobby, whether playing PC games or tinkering with programming them. "I was playing Defender on the Commodore 64," he reminisces, "when I decided at the age of 12 or so that I want to be a computer programmer when I grow up."

Jon was previously employed as a senior .NET developer at a very well-known Internet services company whom you're more likely than not to have directly done business with. However, this blog and all of jondavis.net have no affiliation with, and are not representative of, his former employer in any way.

Contact Me 


Tag cloud

Calendar

<<  May 2018  >>
MoTuWeThFrSaSu
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

View posts in large calendar