Friday, August 9, 2013

Want to live in space?

Here is some food for thought.  I threw this together today because I feel, as a species, we are being robbed of our true potential.

Wednesday, July 17, 2013

iOS ontouch event lag

Quite some time ago I was building a javascript app for my work that would run on an iPad.  It was a survey app that had options for the user to touch and then it would thank them for their input when they were done.  Something I noticed though was that compared to when I ran the app on my PC the iPad version seemed very sluggish.  The buttons used onclick events which one would use on any average page but I knew there was a special iOS only event called ontouch so I thought that if I changed all my events to those instead it might fix the issue.

I was wrong.

To illustrate this for you I have put together a simple little "game" that has arrow buttons and a little "character" that those buttons move around the screen.  I use the terms VERY loosely.  At any rate, if you run the following code on your iPad/iPhone/iPod Touch you will be able to see what I'm talking about.

To play around with this you will need to put this html file on a web server.  If you don't have access to a real one you can set up a local one on you wifi network using WAMP.

Once you get it up and running it should look something like this -

As you can see.  It takes a bit from the time you touch the buttons until the time it actually moves the hero.  I did a lot of digging (so you don't have to) and found out that there is ANOTHER iOS specific event called ontouchstart.

Replace all the ontouch events with ontouchstart and fire up the "game" again.  See the difference?  Instant gratification.

At first I had thought that perhaps iOS devices were just really bad at handling javascript but it turns out the little bit of lag is there on purpose.  As they say "its a feature not a bug".  The reason for two different events is that if somebody accidentally touches something they didn't want to, like a submit button, the user can still change their mind by swiping their finger to change the behavior from a touch event to a scroll one.  With ontouchstart though, there is no turning back!

So, in the event you were wondering why your javascript buttons were functioning like crap on an iOS device, now you know.          ...and knowing is half the battle!

Sunday, January 13, 2013

Make an HTML editor like W3schools "Try it yourself" feature

Hey there!  Long time no see right?  I come with gifts!!!

One of the things I love to do is code.  HTML is something that I started playing around with much too long ago to give a date.  I prefer to write my HTML/CSS/Javascript using plain text.  This way I know that I have total control over what I'm getting as opposed to an editor which allows for quick and easy editing but may not always be as flexible as you want it to be.

The problem with coding in plain text via a program like Notepad or Textedit is that you have to save the file, switch to your browser and refresh the page every time you make an edit to see the result.  If any of you have ever visited W3schools and gone through their tutorials you will have come across a rather awesome feature to their pages: the Try it yourself editor.  This is an in-browser tool that lets you write code in a box on the left side of the page and then see the resulting page in a box on the right side.  Every time you edit the code on the left, all you need to do to see the updated change is click the Submit button which refreshes the box on the right.  It's an amazing little tool.

I decided that it would be cool to have one of my own, right on my desktop, that I could use to do my coding without having to run two separate programs and keep going back and forth, saving and refreshing.  It seemed simple enough... but after a lengthy Google-ing spree and combing through many forum pages I came up empty handed.  So I did what any good code-monkey would do.  I wrote it myself.  And now I will share it with you so perhaps your Google-fu wont fail you as mine did.

First, I add a textarea and an iframe. The ids are mycode and display respectively.  I also add the button that will make the magic happen and link it to the function I'm about to show you.

Next, I add a function called "display" in the Head of the page that takes the text from the textarea, converts it to a variable named "x" and then sets the innerHTML of the iframe equal to "x".

Finally (though I won't go into the details of it here), I spice it all up with some CSS styling to make it all look pretty.

Throw in your html, body, head tags and some CSS in the right places and the code will create a page that looks a little like this: