Happy New Year! I hope everyone had an awesome holidays. To celebrate, I’m going to be giving away 5 of these kickass HTML5 shirts that the folks at Microsoft have kindly provided.
These aren’t your regular HTML5 shirts, they come from Canada so naturally they involve a polar bear, a beaver and a moose.
How To Enter
To enter, simply sent out a tweet with the hashtag #HTML5shirt and a link to this post.
“Win a #HTML5shirt from @wesbos http://wesbos.com/html5-shirt-giveaway”
I will be giving them away to 5 random tweeters and using twittertwitterchickendinner.com to pick the winners. I’ll ship you the shirt anywhere in the world. I have them in most sizes but is first come first serve.
Thats it, good luck and if you so please, follow me on twitter for more on HTML5. Follow @wesbos
Update: Winners!
First off, thanks to everyone who entered the draw, having almost 2,000 enter is pretty nuts! I’ll have to find a way I can do this again because you guys love your free shirts
Drumroll please… The Winners are:
@steno, @sheppy, @csixty4, @oscargodson and @PatridgeDev
Congrats! Contact me wes@wesbos.com within 24 hours with a mailing address and shirt size to claim you prize.
Thanks again everyone, I have some really cool HTML5 stuff coming down the pipe so stay tuned!
This November I have two development related talks coming up and I thought I would take a second to formally invite you!
The first is an all day workshop on WordPress development which is being done with the great folks at Ladies Learning Code. If you haven’t heard yet, LLC is an awesome initiative started by a few Toronto ladies with the purpose of creating a comfortable environment where women can learn basic web development skills. I will be leading the upcoming WordPress workshop where I will take you from installing WordPress to making your very own theme. The workshop is on Saturday, November 26 and costs $40. The first round of tickets sold out in a heart beat, so be sure to sign up for the second round if you’re interested!
The second is quick talk on HTML5 Canvas at the #devTo meetup. This event is held once a month and is open to anyone who is interested in chatting about development. I’ve been to the last few meetups and I’ve found them pretty awesome. There a good mix of designers, developers (of all languages) and industry folk which always allows for good conversation (the free pizza and beer aren’t bad either!). I’ll be doing a quick introduction to the HTML5 Canvas element, what it is, what we can do with it, how to work with it as well as showing a few examples of stuff I’ve done with it. Canvas really is one of the most exciting parts of HTML5 so I’m looking forward to sharing what I’ve done so far. This event is always super popular and has already sold out, so get on the wait list and cross your fingers!
Thats all for now, hope to see you at one of the upcoming events!
Many people, myself included, were annoyed that you aren’t able to put the new Newsstand Icon in a folder. Well a quick little hack I found today lets you do just that! Turns out you can trick iOS5 by creating a folder with other icons and then quickly drag it into that folder.
This doesn’t require you to jail break, but it does take a quick finger! Watch this video to see how to do it:
Note
This should only be done if you are no using newsstand. Trying to launch newsstand from within a folder crashes springboard!
To continue on with my string of blog posts on Sublime Text 2, I’m going to show you a short but handy feature that was just pushed to the stable build. Code Folding!
Unfortunately, collapsing of code in sublime text isn’t exactly the same as textmate, so you dont get the little arrows in the sidebar. The code is also folded into a single character which makes it easy to delete an entire block of folded code without noticing you have done so. This is the first iteration of code folding in sublime text 2, so I’m sure it will only get better. With those cautions in mind lets take a look at how to work code folding in Sublime. Continue reading →
A really great feature of Sublime Text 2 is the ability to create your own build scripts. A build script is helpful when you are writing in a language that needs to be compiled or executed from terminal / command line. I personally use build scripts to compile the current file into CoffeeScript as well as run the current file in Node JS.
Watch the tutorial or continue reading to learn how to make Sublime Text 2 build scripts. Continue reading →
This morning I saw this link on youtube which was a little mashup of some HTML5 technologies. I thought it would be funny if I could do the same, but with goofy pair of glasses. I’ve also been itching to put the CCV JavaScript Face Detection library to use. This library shows a few examples on static images, but after a quick look at the code, it shows that the underlying element to the script is a canvas element. So instead of running it on a single image, I am running it on a feed of frames coming from an HTML5 video element.
I’ll go into the technical details further on in the post, but here is a demo as well as a youtube video showing the effect as it can be a little sluggish on older machines. Currently tested and working in Google Chrome 14 and Firefox 6.0. Continue reading →
I’m a long time Coda user. A few months ago I, like everyone else, decided to switch over to vim. I really liked Vim but just couldn’t get the hang of it for whatever reason. After shamefully crawling back to Coda, I found myself realizing that Coda fell short in a few areas. It was then I decided to give Sublime Text 2 a shot as it had been touted as the sucessor to Text Mate. Its taken me a few weeks to get used to, but I can happily say I’m a Sublime Text 2 user now. Here are a few tips that make switching over easier.
We have all been there. You finish up the most beautiful design with perfectly picked colours, font sizes and page style and pass it off to the client. A few days later you check back at the site and they have happily splattered underlined neon green h1 tags with inline styles. Why why why? Because the WordPress WYSIWYG editor is hard to use and by default it temps you with a basic colour pallet and basic h1-h6 tags. Continue reading →
Web sockets and Canvas are two really cool features that are currently being implemented into browsers. This tutorial will give you a short rundown of how they both work as well as create a realtime drawing canvas that is powered by Node.js and web sockets. For simplicity’s sake, I’ll be writing all the code in coffeescript. If you prefer regular ‘ol JavaScript, take a look at the corresponding .js files. I’ve also left out the CSS for the same reason.
The first thing we need to do is create a web socket server. For this we will be using Node.js and the module Socket.io. Socket.io makes its super easy to get a web socket server up and running. It even provides a flash fallback for browsers that don’t support native web sockets. In this tutorial we will only be working with browsers that support the canvas element.
If you don’t have Socket.io installed yet, make sure you do so by typing npm install socket.io into your terminal.
For now, lets just set up the web socket server. Create your server.coffee file with the following configuration.
Compile your coffeescript and hop back into your terminal and type node server.js. You now have a web socket server running on port 4000.
If you go to localhost:4000 you’ll see the following:
Client Side
First, lets quickly get our index.html file up and running. In addition to some bare bones markup, I’m also including jQuery, our Socket.io JS file which is now being served up from our server, a jQuery plugin for drag events, and our own scripts.js file which will hold all the magic.
Now that we have our server up and running, we can write some code which will draw to the canvas. Create a new file called scripts.coffee. All of the following code happens within the App.init() method which we will trigger on the jQuery document ready.
Create our Canvas Element
# setup our application with its own namespace
App = {}
###
Init
###
App.init = ->
App.canvas = document.createElement 'canvas' #create the canvas element
App.canvas.height = 400
App.canvas.width = 800 #size it up
document.getElementsByTagName('article')[0].appendChild(App.canvas) #append it into the DOM
App.ctx = App.canvas.getContext("2d") # Store the context
# set some preferences for our line drawing.
App.ctx.fillStyle = "solid"
App.ctx.strokeStyle = "#bada55"
App.ctx.lineWidth = 5
App.ctx.lineCap = "round"
# Draw Function
App.draw = (x,y,type) ->
if type is "dragstart"
App.ctx.beginPath()
App.ctx.moveTo(x,y)
else if type is "drag"
App.ctx.lineTo(x,y)
App.ctx.stroke()
else
App.ctx.closePath()
return
Draw to canvas function
Since drawing to canvas involves beginning, moving and closing paths, i’ve create a short little function that hooks into the jQuery dragstart and drag events.
# Draw Function
App.draw = (x,y,type) ->
if type is "dragstart"
App.ctx.beginPath()
App.ctx.moveTo(x,y)
else if type is "drag"
App.ctx.lineTo(x,y)
App.ctx.stroke()
else
App.ctx.closePath()
return
Setup our client side web socket
Since we included our file at http://localhost:4000/socket.io/socket.io.js we are able to create an object which we can send our data over. With just a few lines, we create our App.socket object and bind to any incoming web socket events called ‘draw’. We will go over this more soon.
This is where things gets exciting. Now we want to bind a few events to our canvas element. The way this works is when someone draws on the canvas, we immediately use our draw() function to draw to the current canvas as well as send the x and y ordinates over the web socket with socket.io’s emit. In just a bit we will take a look at the server side part of this event and see how the server sends out this data to all open windows.
###
Draw Events
###
$('canvas').live 'drag dragstart dragend', (e) ->
type = e.handleObj.type
offset = $(this).offset()
e.offsetX = e.layerX - offset.left
e.offsetY = e.layerY - offset.top
x = e.offsetX
y = e.offsetY
App.draw(x,y,type)
App.socket.emit('drawClick', { x : x, y : y, type : type})
return
Jump back to server side
Now that we know we are sending the x, y and type of event over the web socket, we need to do something with that on our server. What we want to do, is take that data and send it back out to everyone else that has a browser open.
Our updated server.coffee file now looks like this. We first wait for a connection event, then wait for a ‘drawClick’ event to be sent by a browser. When that happens we take the data and send it out to everyone else with a browser open. THe server side script we wrote earlier will then paint the canvas.
You’ll now need to restart your web socket server as we have made changes to it. Hit control-c to kill it, and node type node server.js to restart it.
Get Drawing!
One you fully understand how this all works, open your index.html file in any web browser that supports web sockets and canvas (at the time of writing Chrome, Firefox, Safari, Opera and IE9). Check http://caniuse.com/#search=canvas for more support info.
Limitations
As this is a very basic demo, there are a few limitations which can easily be solved with a little more code. Currently the canvas only supports one person drawing at a time, if two or more are drawing, the canvas will be painted sporadically. Also, there is definitely a lot of room to add tools such as brushes, colours, erasers and PNG export. If there is interest, I’ll expand this tutorial series to cover them.
If you’re interested in getting this up and running in the real world and off of your localhost, I was able to get mine running on Amazons free micro instance of EC2 although this involves installing Node and NPM all over again. Also note you should run your server on port 80 rather than 4000.
Please feel free to download, hack, complain, fork or contribute to the project on my github account.
Two things I’ve been working with lately have been Node.js and CoffeeScript. If you haven’t heard of either, Node.js is server side javascript and CoffeeScript is a ruby/python like langage that compiles down to regular javascript.
The way I develop my CoffeeScript is by using the Node.js compiler to watch my `scripts.coffee` for any changes and compile it into normal JavaScript every time I save my file. The process is instant, but I need to watch my terminal window to see if there were any compiling errors. As you can imagine, this can get fairly annoying especially if you aren’t on dual monitors.
So, my solution was to write a Node.js module that would send a growl notification to the user when the compile was finished. I made use of the growlnotify command line plugin for OSX.
Two of my favorite jQuery plugins are Mike Alsup’s Cycle and Ben Alman’s Hashchange. Cycle allows you to create really flexible sliders /slideshows and Hashchange allows you to create an event that triggers on hash change. When you’re using jQuery cycle for a large slideshow, its a good idea to let users link within that slideshow to a specific slide so that they can share and bookmark them.
A great example of this is for a photographer that may have 50 pictures in their portfolio, they often do not let you share the link to that specific picture but rather just the page with the slideshow embedded in it. Additionally, the user can now use the browsers back/forward buttons to navigate through your slideshow Continue reading →
Just about an hour ago Rovio and Chrome released Angry Birds for Chrome. As a JavaScript / HTML5 guy, I quickly jumped into the code to see how things worked.
I was quickly able to find a hack that gave me access to all the levels, even the special Chrome levels! So to get access to all levels in Chrome Angry Birds, just copy and paste the following line into your browser’s address bar.
I’m a backup fanatic and not having a few backups of files makes me uneasy. Today I had a little scare where I couldn’t find a few of my databases when viewing PHPmyAdmin through MAMP. Turns out sometimes MAMP likes to sometimes grab the databases from the MAMP Pro location and sometimes the MAMP location.
So, I decided it was time to figure out how to automatically backup my databases. The problem is that my MySQL databases are not in the same folder as my Dropbox folder.
The answer to this is very simple, we just need to create a simple symlink that will allow the databases to be stored in their location and still be backed up to the DropBox folder.
I saw on twitter that John Gardner was looking for a way to loop through his WordPress categories and then display all posts that belonged to that category below it. I thought it was a great question / problem to solve so I did a quick tutorial on how to do so.
If you haven’t heard, the New York Times has implemented a paywall where you can only view 20 articles a month. After that they throw an overlay on top of the content so you can’t view it.
Since they still want to be indexed by search engines, they don’t bother to hide the content once you have reached your 20 max. Two simple lines of CSS will hide this. I’ve also made it into a Chrome Extension Continue reading →
