Tag: HTML
-
Saving a Canvas element as an image
Here’s a little tip to allow your users download the contents of a canvas element as an image, without the need for a server. We can do this by using an Anchor tag with a download attribute. Start with creating <canvas> and <a> tags: The <a> tag’s download attribute can be set to a file…
-
Recreating the Apple Watch UI using a hexagonal grid
Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI. Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this…
-
Reverse engineering Captivate for HTML5 widgets
Adobe Captivate is pretty horrible, especially the HTML5 output. I feel like I’m banging my head against a wall every time I use it. The HTML5 output is riddled with bugs and most of the features simply don’t work. If there is one upside to the HTML5 publishing though (and there aren’t many), it’s the…
-
Webcam to canvas or data URI with HTML5 and Javascript
This post has been sitting around unfinished since April so I thought I should finish it and get it out there. In this post I am going to show how you can capture an image from a webcam via JavaScript and convert it to a Data URI which can then be saved in a database…
-
Creating HTML5 widgets for Adobe Captivate 6/7
I decided to write this post due to the frustration and lack of information out there on how to make HTML5 widgets for Adobe Captivate. There is almost no documentation on this and the only useful article I could find was riddled with mistakes. My approach may not be the best but this should get…
-
JS Transform Handles
The other day I was playing around with Mozilla’s Popcorn Maker and I had the idea of using HTML/JS/CSS to create transformable divs using transform handles and a bounding box. I did a quick search for any existing examples of HTML transform handles but i couldn’t find anything so I decided to give it a…
-
Adding console.log() to AIR’s HTMLLoader
Here is a little code snipped I thought I’d post for future reference and may help someone else out. I was using the HTMLLoader class in Adobe AIR to load content and I came across an error where my Javascript was calling console.log(). In the AIR HTMLLoader environment this function does not exist so I…
-
Creating a HTML version of this blog’s header
Update: this post was made when I was using a different blog design. Please view the original swf file here. Below is a little experiment I did which involved creating a version of this blog’s image flipping Flickr feed header (which I made in Flash) – in HTML/CSS/Javascript. Luckily jQuery includes a JSON parsing feature…
-
Videos from Adobe MAX Sneaks
Below is some videos taken at the Adobe MAX 2010 conferences during Sneaks sessions. Sneaks sessions are a chance for Adobe to demonstrate prototypes and new technologies that may or may not make it into future Adobe products. Some pretty interesting stuff! Typography of Code- a new way of displaying and reading code for designers…
-
Comparing custom font display with @font-face
This is a little experiment I conducted comparing the way different browsers render custom fonts through @font-face. What I found was that the two browsers that displayed them best were IE8 and Firefox 4 Beta. The worst browsers were Opera and Safari. Opera seemed to make the characters extra skinny, and Safari made the characters…