I'm a software developer living in Auckland, New Zealand. Originally from a sleepy little Southern Town in the USA, I moved to New Zealand in the last century and have become a husband and father.
I recently spoke on game development in Windows 8 with HTML and JavaScript. Here is my slidedeck
Here are some links from the talk
Additionally, if you are wanting to make games for Windows 8 you can have a look at Construct 2 and Game Salad as an alternative to Visual Studio that are dedicated to making HTML5 games.
A comment on a blog post about SugarCRM moving to jQuery from YUI.
Following my last post on my time with Windows 8, I’d like to write about actually developing for it.
My day to day development happens on a MacBook Pro with OS X Lion, using TextMate for writing js. I use the YUI Library as my go to front end library and I use node.js both for development tools and when I do non work related development. So yeah, I love JavaScript. So when Microsoft announced that HTML/JavaScript was a first class option for writing apps in Windows 8 it got my interest. (Full disclosure, I previously worked with .Net, and before that with ASP, so I know the MS stack)
Since I’ve covered my thoughts on Windows I’m going to dive straight to Visual Studio 11. Now I’m no stranger to VS, and have used every version since VS 6. But MS has decided to introduce Metro elements into VS. This caused much wailing and gnashing of teeth. However, when I use VS I turn off all the toolbars and all the panels but the solution explorer. As a text editor on Windows, Visual Studio is hands down awesome. I’ve lamented on more than one occasion that I wish MS would strip it down and release it as a text editor, the font rendering in Visual Studio now is excellent and nothing comes close to it on Windows. The only thing that I find the least bit annoying is the ALLCAPS for Panels, but if they want it to say SOLUTION EXPLORER instead of Solution Explorer, I’ll deal.
File, New, Project. You are presented a list of templates for JavaScript apps and MS has done a nice job of giving you starting points for various types of Metro apps. However I didn’t want any of those, I had decided to make game, and there was no templates for that.
After starting with a blank template I then proceeded to gather up some libs to use. As mentioned before I love YUI so grabbed it and brought it into my project. Reference it on the page, and what happpens? Intellisense. Now, it wasn’t full on intellisense with full descriptions, but I got code completion for code I didn’t expect. I was a little thing, but it was a nice touch. So the YUI code worked with no problem. But then I was only doing some DOM work to start with, now it’s time to really start working on the code.
Now as interesting as it would be to write a game from scratch I only had a weekend, so I decided to use Crafy.js, a JavaScript game library. Everything just worked. After I started noticing a bit of a slowdown when lot’s of things were happening on screen I got worried, was I doing something wrong? Was the idea of writing a fast JavaScript game really a pipe dream? Or was it something else? Well it turns out that I started off using the DOM too much, so I then moved to pure canvas and the game was wicked fast (and I continued to get it fast as I learned how to tune the code)
I ran the game in the lastest versions of Chrome and FireFox and was disappointed, especially with audio. I had a number of sounds going at once, as well as background music, shooting sounds, explosions all from events happening on the game and not once did I have a problem with Win8 playing them. Chrome just stopped playing all sound after a few seconds and FireFox only played some of the sounds (though those sounds never stopped and was a nicer degrade over Chrome)
Never once over the entire weekend did I feel the default tools or experience got in my way. I think that is worth repeating, the tools and experience never got in my way. Something I’ve not had happen when developing for other platforms. VS was nearly flawless and the debugging experience was nice. I did not however dig deep into the libraries included with Win8, I wanted to see how Win8 HTML/JS apps played with standards. Microsoft could have taken the route of having all the “goodness” hanging off of the WinRT libraries, but instead they have used the HTML5 specs for audio, localStorage, web workers and many other advanced bits. This was especially pleasing considering the past history of embrace and extend.
My verdict is Microsoft has a winner on it’s hands, at least technically, public relations is a whole different story. But there is a lot to offer a JavaScript developer. I have been continuing to develop my game and hope to have it in the store when it’s ready.
I think if you currently make web apps, especially if you want to make html5/javascript games then you owe it to yourself to give Win8 development a go.*
I will be posting a follow up to this on the generic developer experience as well. That should be in the next few days.
* If you install Win8 please install onto machine not a VM, I found that Virtualizing Windows 8 was an unpleasant experience and everything was almost unusable from Virtual Box on my MacBook Pro
I attended a Windows 8 “Hackathon” this past weekend and would like share some thoughts on Windows 8, and in my next post some thoughts about developing for Windows 8.
Now there has been a lot of negative reactions from people about Windows 8 because basically Microsoft moved peoples cheese. There is no start button, there are two environments and there is no close button for metro apps. So when things change people complain. How many times did I miss the start button over the weekend? Not once. Not a single time did I think to myself I really need that start button here. Why? Windows 8 makes it easy find apps. It’s actually easier to find apps in Windows 8 then it is to use the start menu. So for the people complaining about no start menu, get over it.
Metro versus the desktop. A lot has been written about switching between Metro and the desktop, and there are some legitimate concerns. While not jarring, or even distracting, every time I switched between a desktop app and a metro app I was reminded why Microsoft is moving to metro apps, an app isn’t about chrome, it’s about the app. An App should stand on it’s merit, and the os should get the hell out of it’s way. Metro makes that happen. Hopefully this will motivate existing app makers to get on to making metro versions of their apps.
How do I close an app? Grab it and dump it. Was easy when you see it done. There are lots of things like that in Windows 8. Once you know how to do something that becomes crazy simple to do. Microsoft will have to work at. Of course a few quick intro slides on setup would get it into peoples heads. It is that easy, but it’s only easy if you know about it.
There were lots of little things about Windows 8 that I like, things like the file explorer (that had a lot of nerd rage about the ribbon) that while had the ribbon, it got out of the way and actually gave me more room than in previous versions. Another thing is Live tiles in Metro. I love live tiles and Metro allows apps to establish an ongoing relationship with users without even opening an app.
It is a preview release, so nothing is perfect. But for a preview it was pretty solid and the only real issue I had was a mac bootcamp driver crashing. Here’s hoping that Microsoft can really nail this release. Hopefully I’ll have up a developing for Windows 8 post in the next day or so.
I gave a talk at the Auckland JS Meetup and I thought I’d put some links for some additional info.
For writing command line apps with Node.js
Using Titanium Studio with node.js
Extra credit
Hope this info helps someone and if you have any questions hit me up on twitter or email me kevin @ kevinisom.info
I am a big huge fan of the YUI Framework. Now YUI is full of awesomeness. One of the most awesome widgets is the Overlay and that’s what this post is all about.
One of the foundations of YUI is the Widget class, and the Overlay extends the Widget. In fact the Overlay is only one line of JavaScript. In fact that one line starts to show off some of the awesomeness of YUI and how you can use YUI to compose useful controls without having to have thousands of lines of code.
This first JSFiddle below shows an overlay being constructed and it’s contents filled by the srcNode, it’s width set to 300px, and render being set to true tells YUI to render it into the dom.
Now I’m sure you’re thinking that’s not very interesting. And it’s not, however by setting a few additional properties and applying some additional css hopefully I can show just how useful it can be.
In this example the overlay uses the centered and constrain attributes to show over the div simulating an ajax request while the content is swapped out. The centered attribute centers the widget in the viewport, or if a Node is passed (as in this instance) in, it will be centered to that node. The constrain attribute sets the node to constrain the widget’s bounding box to.
Lastly using the plugin functionality that YUI exposes adds animation for showing and hiding the overlay. The Animation Plugin example shows how something like that is made.
In this sample by setting the align property and some css (inspired by this blog post on it) you can achieve some nice looking (well relative in this example, the colors are a little rough) tooltip with very little code. A much easier to manage option instead of bringing in a library you have no control over just for tool tips.
The align attribute is used to align a reference point on the widget, with the reference point on another Node, or the viewport. The attribute takes a node as the first argument followed by an array of points. The WidgetPositionAlign class has constants defined for this.
The YUI Gallery has some great plugins for the overlay.
I hope this has helped show how useful and versatile the overlay control is. As I mentioned when I started, I think the Overlay is a great example of just how powerful YUI is. After all the overlay is 1 line of code
Y.Overlay = Y.Base.create("overlay", Y.Widget, [Y.WidgetStdMod, Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionAlign, Y.WidgetPositionConstrain]);
That’s it, simply mixing in a number of different small classes you can get a lot of functionality
IE6 users don’t deserve to use the internet.
Die IE6 DIE!
Your browser sucks.
Nobody users the internet with JavaScript turned off.
All things I’ve said or heard. But sometimes you can’t shut the door to ie6 or any fringe browser. But that doesn’t mean you have to give ever browser the exact same experience. Besides, what about users that have JavaScript turned off? Or use a screen reader? Can you say no to paying customers? Maybe you can, but not everyone has that luxury.
All Browsers can be supported, that doesn’t mean that they have to be supported in the same way. For instance, you have some boxes that by design should have rounded corners, and a drop shadow. Now that’s easy in a modern browser that doesn’t suck. But to get that in older browsers requires more divs, more images, more work and more importantly the solution adds to the burden of older browsers with slower rendering engines and slower javascript engines.
So that’s it. Don’t make those older browsers work hard. If you want to have a form popup in an overlay, allow a user to fill in the details, submit it to the site, have the overlay fade away and then update any relevant page elements with data from a callback. That’s a lot of work for those older slower browsers. Not only is it a lot of work for the browser, the further you have to go back the more work it is for the developer. However have the default behavior actually take a user to a page that has the form in it, have the form then post to the server, and then redirect the browser back to the default page and have the server render the updated html.
Now that may sound like a lot of work, but really, more than likely it is. Most script libraries that do that sort of thing already let’s you structure your markup that way. This way you have handled both the older browser as well as the scriptless browser, and as long as you followed accessibility guidelines you should be sorted with screen readers fairly well too.
The key thing is to not try to be a hero and spend hundreds of hours making a web application that looks and works right in all the browsers (unless you turn off JavaScript) and as always, communicate with the stakeholders about how much work is required for either option and the pitfalls of each.
Some resources
With all of the progress on getting node.js to run on windows people may want to start writing complex apps with it. Well at least apps that use more than what’s shipped with it. Now on Linux or OS X that means using npm. Unfortunately npm is still a long way off for windows by the looks of things (it currently uses symlinks and Windows XP doesn’t have symlinks) but you can still use all of those packages at npmjs.org it just means more work.
First find a package you will want to use. In this case I want to write a new web app with express.js. Express.js is a web framework for node and is similar to sinatra for ruby. You can use the search functionality available on the npm site to find the express package. You will see the description, version, dependencies, repository, and node engines listed. Take note of the dependencies, you will have to repeat these steps for all the dependencies. Download the latest tgz file (at the time I’m writing this, it’s 2.4.6) Unpack the file and rename the folder from package to express. Repeat that for connect, qs, and mime, as well as jade (or any other template engine you want to use.
After downloading and renaming all the packages, copy them to a folder called node_modules in your project. You will want to make sure you add the folder to your ignore list for your version control. Unless you’re going to deploy to a windows machine with IISNode as solutions like Heroku and Nodester will install your dependencies for you.
Finally you will want to create a package.json and list your dependencies so when you deploy or someone wants to use your app they can use npm to install the dependencies and run your app.
So you should end up with a project directory that looks something like this
root
|—node_modules
| |—connect
| |—express
| |—jade
| |—mime
| |—qs
|—public
|—views
|—app.js
|—package.json
Hopefully this all makes sense, and here’s hoping that npm will be coming to windows in the near future. So get going and write some node apps.
My experience using Eclipse on OS X tends to be, keystroke, keystroke, rainbow wheel of doom, keystroke, keystroke, rainbow wheel of doom. Keystroke, rainbow wheel of doom, curse close Eclipse, open Textmate.
I find it funny that AngryBirds was shown off at Google IO, made with GWT and runs so much better in IE 9 than Chrome
