Bring Back Click Sounds When Navigating Websites

Listen up, I have some beef with “modern” browsers. Some claim they are ruining the web, but I am just mad that Internet Explorer stopped making a click sound when navigating websites aka clicking HyperLinks.

Have you browser developers ever watched your parents use the worldwide web? Do you have any idea how many times people click the same dang link while impatiently waiting for something to happen. They literally don’t know anything is happening because you neglected to play a cool sound when the browser is navigating. Shoutout to the oldIE team because you implemented this in Internet Explorer, but removed it in IE9 so…

Anyways, browser vendors obviously aren’t concerned with cool sounds or helping prevent people from clicking links 30 times before realizing something is happening. So its up to us, the word wideweb developers to take things back into our hands.

I would like to now reveal my solution. Introducing, Kool Clicks™, bringing the classic Windows navigation sound back to the browser.

Kool Clicks is a simple JScript that uses HTML5 Audio (thanks modern browsers I guess) to play the classic oldIE click sound whenever any hyper-Link is clicked on the entire web page.

Kool Clicks is intelligently programmed to only make sounds in IE9+ and other “modern” browsers. In browsers that have native click sounds, Kool Clicks just sits back and enjoys the sounds. No need to duplicate perfection.

Obviously Kool Clicks has no options. It isn’t some hippie Jquery plugin that let’s you change whatever you want. It also contains bugs (big woop, you don’t write perfect code). If you want it to make different sounds or whatever then you should write it yourself. Kool Clicks is a way of life and its not for everyone.

Try Kool Clicks for yourself and view the Source-code in this free web page: https://jsbin.com/nivomi/edit?js,output

Update: shoutout to subzey for making some improvements and fixing some bugs. Check out Kool Clicks version 0.0.2

I still hold out hope for the web, but us webmasters have to make it what we want. We can’t rely on browser vendors to literally do everything for us. Sometimes you have to write code to make websites. Sometimes you have to bring back deprecated browser features. Sometimes you have to get weird.

My Graphic Art from the 90s

I recently found the first computer art I ever created. At my parent’s house I found print outs of my artwork. I really wish I still had the originals, but these will have to do.

These gems were done in the late 90s in my High School Computer Art class. They were done on a Macintosh Performa. The software I used was AppleWorks Paint program, which was a slightly more advanced version of MacPaint. Every one of the pixels was hand drawn. Sometimes I would use the spray paint can to texture things. But for the most part, I zoomed in and colored a pixel at a time. This stuff looks terrible, but this was a years worth of work and I was damn proud of it.

Most importantly, this was my first real introduction to Graphic Art. This artwork inspired me to get a bootleg copy of Photoshop from a guy I waited tables with during my senior year of High School. From there, I learned a lot more by experimentation at home. Eventually, I would go to tech school for Web Design and take my first gig in the industry as a Web/Graphic Designer. Only after becoming frustrated with Developers would I learn to program, myself. Today, I mainly program, but I am thinking, its time to get back to some artwork again.

Without further ado, I present, my Graphic Art from the 90′s…


Prowling Leopard


Prowling Leopard in the Jungle


Waffle Cone


Slice of Pie


Crushed Diet Pepsi


Rally Car

Well, there you have it. The first computer art I ever created. Terrible, but it started me on the path to where I am Today. I have focused my creativity into programming in the last 10 years, but maybe the graphic artist in me will make a come back. I have to say, I have been really enjoying Jenn Schiffer’s http://make8bitart.com/ lately. Keep an eye out for some more artwork from me.

Wijmo 5 Beta

I have had a blast working on Wijmo 5 so far and we just went public with the Beta.

This interesting thing about this type of project is that we get to build a new product without any limitations and can apply everything we learned while build Wijmo 3. We have made some bold moves, like creating JS Controls instead of Widgets. And I can say it is the best damn product I’ve ever made.

Another fun thing about this project has been working with Bernardo Castilho, our CTO. Now don’t let the title fool you. This guy write more lines of code than some of our senior programmers. And he has been the mastermind behind Wijmo 5. Bernardo originally wrote the world-famous FlexGrid Control for VB 6 and the rest has been history. So having him bring all of his knowledge and experience to Wijmo has been essential. He can be a tough guy to work with, but the best usually are. And in the end, the product will be better for it. You can watch some more of our story in this video our team threw together.

Data Visualization in HTML5 Va Fan

I have recently been cited for not knowing what Data Visualization means. While I can not confirm nor deny, I am passionate about the subject.

“[Chris Bannon] is someone who is probably an excellent developer…

…but someone who does not really know what ‘data visualization’ means.”

John Goodall, Research Scientist

Most of what I know, has been learned from Stephen Few in his three books on Data Visualization: Show Me The Numbers, Now you see it and Information Dashboard Design. They are excellent works, and easy to learn simple and advanced material from.

I like his work and examples so much that I created duplicates of them using wijmo. You can see proper visualizations using wijmo here (please ignore the pie chart).

I have recently had the pleasure of speaking on the Data Visualization in Sweden at DevSum. The event was in Stockholm and was absolutely beautiful. I had fun giving this talk and added some humor in as well. The goal of this presentation was to educate developers about:

  • The importance of good Data Visualization
  • Good & bad practices
  • Tools in HTML5 to build visualizations

Here are my slides from the presentation. I hope they help you understand Data Visualization a little more.

Now that you are slightly more educated, try taking Stephen Few’s Data Visualization IQ Test

And now to continue my quest to figure out what Data Visualization actually means…

Lacin’ ‘em up for the MDA 2014

Blue vs White

This year, its The Pharaohs vs The Pharaohs as Team White faces off against Team Blue. Pharaohs both old and new will go head-to-head in the ultimate match up of talent and grinding.

I am honored to be the Captain for Team White. My team is built from the bottom up with out strongest player in net and backed up by solid defense. And our offense is a set of hard working grinders. To sum up our team make up:

“You can out-work talent, but you can’t out-talent hard work.” -Chico

Check out the full White Team roster.

Location

Mt. Lebanon Ice Rink
900 Cedar Blvd, Pittsburgh, PA

March 22nd 6:00PM

Video from last year

This is what the Charity Game is really all about…

Bring your family. Bring your friends. It’s going to be a good game for a great cause.

Object-Oriented Client-Script

We hear so much about Object-Oriented JavaScript, but its all hacks. I have a solution that gives you Classes in JavaScript. Yes, finally, Classes in JavaScript!

Just make you’re REAL CLASSES using VBScript, a true OBJECT-ORIENTED coding language.

    <script type="text/VBScript">
      Function NewPerson()
          Set NewPerson = New Person
      End Function
      Class Person
          Private p_Name
          Private Sub Class_Initialize()
              Name = "Cool Person"
          End Sub
          Property Get Name
              Name = p_Name
          End Property
          Property Let Name(ByVal in_Name)
              p_Name = in_Name
          End Property
      End Class
    </script>

Now you can create an instance of your REAL CLASS from JavaScript.

    <script type="text/javascript">
      try {
        var person = NewPerson();
        alert("You are now using Classes in JavaScript. You created a Person with name of: " + person.name);
      }
      catch (err) {
        //You could also redirect to a Funcional Programming version of your site here.
        alert("Lol, your browser doesn't support Classes (yet). Hang in there buddy! Or use IE.");
      }
    </script>

You can see a real world scenario sample online! http://jsbin.com/OrobAMO/1/edit

Right now, this only works in Internet Explorers 6, 7, and 8 and probably 9 and maybe even 10. But EgmaScript 6 (also known as ES6) will be out soon, which is the next upgrade of Javascript and will support Classes. So when that is done you can just copy this code to use that, which will probably be nearly identical format. At that point, this code will work in pretty much all browsers. Until then, you can use this pollyfill.

Sad Trumbone When Someone Leaves Your Website

Ladies and Gentlemen, I give you: Sad Trumbone When Someone Leaves Your Website

http://jsbin.com/OMEKObA/1/

This cutting edge HTML5 Audio technique can be easily achieved. Simply add an audio element to your page.

<audio id="sad" src="http://soundfxnow.com/soundfx/Sad-Trombone.mp3"></audio>

Then bind the onbeforeunload event and call the play() method on the audio element before returning the prompt message.

//Bind window unload event
window.onbeforeunload = function() {
  //Play sad trumbone
  document.getElementById('sad').play();
  //Return prompt message
  return "Are you sure want to leave? I mean, I am a pretty great site.";
};

5th Annual Pharaohs Charity Hockey Game

We will be hitting the ice for charity again at the 5th Annual “Lacing em up for the MDA” – Charity Hockey Game!

Pittsburgh Pharaohs take on the Pittsburgh Metro F.O.O.L.S. in another charity hockey event. The F.O.O.L.S. team walked home with the win in last year’s game but still trail the series 2-1. We have been fortunate enough over these last 4 games to raise about $6,000 for a very reputable charity group, let’s make this 5th year another huge success!

5th Annual Lacin Em Up for the MDA

Location

Mt. Lebanon Ice Rink
900 Cedar Blvd, Pittsburgh, PA

March 24th 6:00PM

Data Visualization in HTML5

Thanks to all who came to my talk “Data Visualization in HTML5 with jQuery & Wijmo” at Silicon Valley Code Camp.

Session Abstract

HTML5 offers rich new options for data visualization like SVG and Canvas. We will look at the new technology available in HTML5 as well as tools to help use it. Wijmo is a jQuery library that makes charting in SVG easy and work in every browser. We will use it to build some killer dashboards in HTML5. With Wijmo we can create bar charts, line charts and pie charts with just a single line of jQuery. We can use simple html tables to get data from or load in data using Ajax. This session will walk you through from the basics to advanced data visualization in HTML5.

Slides

Demo Code

Get the code here: Data-Visualization-in-HTML5 on GitHub

Resources

  • Wijmo – UI for the Web. Data Visualization tools used in this session.
  • RaphaelJS – Cross-browser SVG library
  • AmplifyJS – Cross-browser offline storage
  • Socket.IO – Cross-browser WebSockets
  • RespondJS – Cross-browser CSS3 Media Queries

Thanks

Thanks again for coming. If you don’t mind, I would love to hear what you thought of the presentation. Please take a minute and rate it here. http://spkr8.com/t/8686

Ruby Spells jQuery

My 3 year old daughter Ruby spells jQuery. Nuff said.

Ruby Spells jQuery from banzor on Vimeo.