Category Archives: Technical

URUGUAY: 5 days left to win tickets to JSCONF!

El ganador será anunciado el martes por la mañana!

Ganá dos pases para la JSConf Uruguay 2016 (Abril 15 + 16)

1- Compartí tu proyecto favorito de Jam3 en Facebook, Twitter o Instagram.
2- Contanos por qué te encanta
3 – Taggeá nuestra página y usá el hashtag #Jam3JS
(acordate de hacerlo público y que no sea solo para tus amigos)

Buena suerte!

Winner will be announced on Tuesday morning!

Win two passes to the JSConf Uruguay 2016 (April 15th + 16th)

1. Share your favourite Jam3 Project on Facebook, Twitter or Instagram
2. Tell us why you love it
3. Tag us and hashtag #Jam3JS
(make sure to make your post public)

Uruguay: Win Two Tickets to JSConf

Screen Shot 2016-03-24 at 9.36.02 AM

Hey, URUGUAY!

Win two passes to the JSConf Uruguay 2016 (April 15th + 16th)

1. Share your favourite Jam3 Project on Facebook, Twitter or Instagram
2. Tell us why you love it
3. Tag us and hashtag #Jam3JS
(make sure to make your post public)

Good luck!

Ganá dos pases para la JSConf Uruguay 2016 (Abril 15 + 16)

1- Compartí tu proyecto favorito de Jam3 en Facebook, Twitter o Instagram.
2- Contanos por qué te encanta
3 – Taggeá nuestra página y usá el hashtag #Jam3JS
(acordate de hacerlo público y que no sea solo para tus amigos)

Buena suerte!

Death of IE…Rejoice!

Finally the death knell to the bane of every web developer’s existence!

We were relieved to hear Microsoft’s recent announcement to end security and technical support for Internet Explorer 8,9,10. Well, almost. As IE 11 still lives on.

Nevertheless, we are extra enthusiastic about this because it signals that WebGL is currently triumphing by effectively removing all remaining unsupported platforms – and for what we do here at Jam3, that’s great news.

The death of the unsupported page can’t be far behind right?

We also expect to see more reliable cross browser experiences in the areas of Canvas, In Browser Video, SVG, and the Full Screen Browser, which will lead to richer 3D experiences. This will also help contribute to the current WebVR movement, that we are currently embracing and exploring.

We are also excited to stop the insane – head slamming against a wall – practice of putting upwards of 30% of the development work effort to support products that had less than less than 2.8% combined usage in 2015.

 
We won’t miss you one bit. Bye Felicia.

ZIP THROUGH THE LOAD

Load times are a Flash Developer’s nemesis. Even today with download speeds measured in megabits per second, a good developer has to be wary of how slow things are loading. A popular way of speeding up load times are to use a CDN like Cachefly or Amazon. However, these services do cost money and often charge by bandwidth used. An alternative way to speed up loading is to compress your files into a zip file.

This can help load times in a variety of ways. Firstly, downloading a compressed file means less data needs to be transmitted. For example, to build the main voxel model for our site (www.jam3.com) we download a file that is roughly 2MB uncompressed. If we zip it, we can get it down to 25KB. While 2MB will only take a few seconds to download on a high end connection, it is a lot to download on slow one. Secondly, if you compress multiple files in the same zip file you can limit the amount of requests the client and server have to deal with which adds a lot of overhead. If you are downloading lots of little files these small handshakes can add up to a lot of time and every bit helps.

There are different ways to handle compression for the web but here we’ll be looking at unzipping using Flash.

Flash doesn’t handle zip files natively but there are a few libraries available that will add support. The one we’ll be using here can be found at nochump.com

First off we need to actually load our zip file:

private function loadZip():void{ var loader:URLLoader = new URLLoader(); //since flash doesn't know what to do with a .zip //we need to make sure it just loads it as a //binary file so it doesn't try to cast it as text. loader.dataFormat = URLLoaderDataFormat.BINARY loader.addEventListener(Event.COMPLETE, onLoadComplete); loader.load(new URLRequest("main.zip")); } private function onLoadComplete(e:Event):void{ //do stuff here }

Once we have our zip file loaded we can begin to manipulate it to get at the delicious compressed data it contains.

private function onLoadComplete(e:Event):void{ // get our data from our loader var loader:URLLoader = URLLoader(e.target); //create a new Zipfile and pass it our data to decode var myzip:ZipFile = new ZipFile(loader.data); }

Each ZipFile has a property called entries which is an array of ZipEntrys. Each file in the zip has a corresponding ZipEntry. A ZipEntry is basically a data object that contains the file name, size, last modified date and a couple of other properties about the file. To trace the first file name we could just do this trace(myzip.entries[0]);
To actually get at the data we need to use the method ZipFile.getInput(entry) which returns a bytearray of our file.

var entry:ZipEntry = myzip.entries[0]; var data:ByteArray = myzip.getInput(entry);

Once we have a byte array there a few different ways to decode our data. For this example, my zip contains an xml file. We need to convert our data to an XML object. This is surprisingly easy.

var myXml:XML = XML(myByteArray.toString()); trace(myXml);

If our zip contains images it slightly more complicated. The easiest way is to use a Loader’s loadBytes method. This loads a bytearray and decodes it into the correct type (ASDocs). In this case, jpg.

var myLoader:Loader = new Loader(); myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBytesComplete); myLoader.loadBytes(myByteArray); private function onBytesComplete(e:Event):void{ var loader:Loader = Loader(e.target.loader); addChild(loader.content); }

One major caveat to loading a zip of images is that its quite CPU intensive. While you do save time on load you can end up waiting for Flash to decode your images for you. Also, zipping a bunch of images doesn’t save much space. It does however cut down on the amount of requests you are making to the server.

And that’s all there is too it. Loading compressed files is a great way to compress your load times and make sure your user can zip on through!

VOTE FOR LABS PANELS AT SXSW

Jam3’s looking to invade SXSW Interactive in 2012, and we have more ammo and explosive content than a Michael Bay flick.

There’s plenty of methods to our madness at Jam3 and we want to share some of that with you at the SXSW Interactive conference this coming year. Give them some love and support their initiatives in the talks they aim to present.

The smörgåsbord of topics range from design to tech to production. We’ve got mouthwatering material on creating tools to implement a creative team’s vision, and theories on how “less code is the best kind of code.” We’ve got an in depth look at audio responsive visualizations, and a little digital storytelling production guidance for you broadcast/film folk to cap it all off.

Our People and Talk Titles:
Mikko Haapoja’s “Less Code More Cool”
Aaron Morris’s “Teaching Laziness: Coding Efficiency for Beginners”
Salpy Kelian and Cole Sullivan’s “Audio Visualization: a DIY Guide”
Adrian Belina’s “Producing Digital Narratives for Brands or Film”

Come vote the shit out of this and support your fellow digital peeps in Jam3‘s epic takeover of SXSW’s 2012 best Interactive Conference Ever.

http://panelpicker.sxsw.com/ideas/index/10/company:jam3

TAMING THE WEB: 5 TIPS FOR HTML, CSS & JS

When working in the realm of html, css, and javascript, browser consistency can be a major headache, especially if you are still forced to support the evil known as Internet Explorer 6. But there are a few things you can do to make the process a little easier on yourself. Below I’ll be sharing some of the things that have helped me when building websites for multiple browsers and platforms. Keep in mind though that implementing these are best done before starting a project, they may do more harm than good on an existing website.

First off we will start with CSS. This first one is a bit controversial, some people swear by it, some people hate it, all i know, it helps me out a lot. Using a reset CSS helps make all the base values for things like margin and padding equal across all browsers. Some people claim they end up having to write more code when they have to re-declare bold tags and what not, but the benefits far outweigh the negatives. Starting with a clean slate makes development from that point much easier and removes the need for browser specific hacks. You can also remove some of the reset values to make it more suitable to your development style, all in all, a great way to start off a project. Although, adding this to a preexisting project can cause more problems than it solves. The one i use most is available here.

Another tip for using CSS is avoiding the use of floats. Floats i find are rendered differently in most browsers so i find it best to simply not use them whenever possible, instead relying on positioning elements with top and left. I understand sometimes you may have to use floats, i just prefer to limit they’re use. A tip for using positioning, setting the position to absolute will set the start point of your top and left values at the top left of the browser, but if you set the container div to position relative, the container will still be in the same position, but the absolutely positioned div will have it’s start point set to the top left of the containing div.

Its also important to note the use of z-index on Internet Explorer 7 and earlier. Each positioned element in IE creates a new stacking order, starting from 0, instead of using a global stacking order like most browsers. This can cause problems when you want one element to appear over another, but it is nested deeper in the page. The best way to solve this problem is to keep z-indexed elements on the same level in the html, or if you wish to have it appear over all the content, simply place it right below the opening body tag.

As for HTML, the only real change i make is setting the doctype. Whenever i generate a new HTML page, i make sure the doctype is strict rather than transitional (sometimes set by default). It forces Internet Explorer to behave more like the other modern browsers and generally just makes development easier, This will also most likely give you some problems if changing it in a preexisting project, so its best to start from scratch with this one. The most common doctypes i use are:

HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

As for Javascript, my best advice is to pick a library and stick with it. Most common Javascript libraries already take into account browser differences so creating functionality for your website becomes a lot easier. From my last post you can probably gather that i am a MooTools guy, but jQuery works just as well in this area, just try not to use both in the same project.

If your starting a project from scratch, take some time to setup a few of the things i have mentioned, and i think you will find you’ll be spending a lot less time doing the terrible chore that is browser testing. I take no responsibility for any headaches you get from implementing these on an existing project :)

If you have any other tips for taming the web, please add a comment below.