CreativeSpark

Software developer / Creative designer notebook

[bfmags-blog]

JS MV* Frameworks Performance Comparisons

Vue.js is a new MV* library for building interactive web applications, similar to AngularJS or BackboneJS, aiming simplicity and functionality at only 11.23kb gzipped.

A nice comparison on the performance of the most known MV* libraries is provided here > http://vuejs.org/perf/

Compared libraries

Vue (v0.7.3)

Backbone (v1.1.0) + jQuery (v2.0.3)

Knockout (v3.0.0)

Ember (v1.0.0) + Handlebars (v1.0.0) + jQuery (v1.9.1)

Angular (v1.2.7)

React (v0.8.0)

Om (version unknown) + React (v0.8.0)

Ractive (v0.3.8)

[bfmags-blog]

JS: The Right Way

> JS r101 [+OOP] - Prototype

> idiomatic.js

+ eloquent.js

[bfmags-blog]

the boilerplate

HTML5 boilerplate has been around for a while and delivers a great front-end template. It includes normalize.css (CSS reset) and modernizr ( HTML5shiv and more ) for cross-browser HTML5 support, along other options like Jquery or Bootstrap. 

Motherplate (leemunroe) is a more bare bones responsive template, for instance it only uses HTML5shiv script instead of full modernizrJS. It's also Sass / Compass ready for better productivity. [1]

> Sass Basics

[bfmags-blog]

Meet Yeoman, Grunt

Automate your front-end workflow to improve productivity. Build web apps with the Yeoman. 

Yeoman workflow is comprised of three tools: yo (the scaffolding tool), grunt (the build tool) and bower (for package management).

Find out more at:

Html5Rocks! Building Web Apps With Yeoman And Polymer

Automating Front-end Workflow With Yeoman

> http://yeoman.io/

SmashingMagazine Get Up And Running With Grunt

Using Node & Grunt For HTML5 Build Scripts

[bfmags-blog]

[bfmags-blog]

Obtain a game rating certificate

Age ratings may be required for distributing your games. Different countries and regions have different ratings standards and bodies.

There are simple and free online tools for generating PEGI and ESRB certificates. For the Brazilian DJCTQ, the same PEGI/ESRB certificate can be used.

Approved rating boards:

ESRB (US and Canada) 

PEGI (Europe, including Russia, Portugal)

CSRR (Taiwan)

DJCTQ -> PEGI/ESRB (Brazil)

CERO (Japan) 

Windows Phone

A guide for Windows Phone can be found here, including an online tool for creating certificates at ESRB and a free online tool from PEGI.

[bfmags-blog]

Tiled Map Editor

With Tiled you can create map layouts and specify collision areas, spawn positions. For export it has a standardized tmx (Tiled Map XML) or JSON formats.

GameDev tuts+ has a nice introduction to Tiled here

[bfmags-blog]

Pixel Art - GrafX2

GrafX2 is a free bitmap paint program inspired by the Amiga programs Deluxe Paint and Brilliance, suitable for pixel art and game graphics.

Mark Ferrari has made amazing 8-bit artwork in the past, featured in games like Loom and The Secret of Monkey Island. Joseph Huckaby and a new technique "BlendShift Cycling" makes everything come to life in his website Canvas Cycle: True 8-bit Color Cycling with HTML5

[bfmags-blog]

png quantisation :: TinyPNG && pngmini

voormedia TinyPNG is a free online service that provides lossy compression for PNG images and preserves full alpha transparency. Save up to 70% or more in your images, making your apps lighter and faster!

Alternatively, check out pngquant and pngmini offline tools, also ImageOptim that works with both jpeg and png images.

[bfmags-blog]

Getting started with Phaser JS

Phaser is a fast, free and fun open source game framework for making desktop and mobile browser HTML5 games. It supports Canvas and WebGL rendering.

It's developed by Richard Davey, and the neat artwork is done by Ilija Melentijevic. You can fork it at github here

To get started, head over 

html5gamedevs Phaser Forum

Great tutorial @jessefreeman website 

Try out 150+ Phaser Examples

[bfmags-blog]

Different Screen Sizes with HTML5

The folks @ GameClosure DevKit wrote this interesting article about different screen sizes with HTML5 - read it here

Also check DevKit Docs on multiple device aspect ratios - here

Popular dimensions of different aspect ratios:

16:9

1280 × 720 (Galaxy Nexus)

1136 × 640 (iPhone 5)

1024 × 576

720 × 405

3:2

1080 × 720 (High-definition TV)

960 × 640 (iPhone 4)

864 × 576

480 × 320 (iPhone 3)

4:3

2048 × 1536 (iPad 3 & 4)

1024 × 768 (iPad 1 & 2)

960 × 720

768 × 576

427 × 320

320 × 240

[bfmags-blog]

ShoeBox && ZOË

ShoeBox is a free Adobe Air based app for Windows and Mac OSX with game and ui related tools. Each tool uses a drag and drop - or clipbord interaction for a quick workflow.

ZOË : A stand alone tool for exporting SWF animations as EaselJS sprite sheets that can be used in Canvas and CSS.

[bfmags-blog]

GC ToolBox && WireCutter - AI Scripts

ToolBox.jsx is a script that can be run from within Adobe Illustrator that gives you access to a few tools built to make asset creation easier.

By using a Symbol in Adobe Illustrator, you gain the ability to propagate changes to all it's instances, giving you powerful revision control.

With WireCutter Script, you can export all your library items to png files.

Read more at GC DevKit Blog : Automating the Illustrator Art Pipeline

[bfmags-blog]

http://blog.nihilogic.dk -- HTML5 Canvas Cheat Sheet

[bfmags-blog]

Sublime Text && Brackets

Sublime Text and Brackets are two great code editors worth following. They can handle HTML, CSS and JavaScript pretty well, and both support plugins/extensions

[bfmags-blog]

Tizen HMTL5 Development

Tizen is an open-source Linux-based mobile operating system, sponsored by Samsung and Intel, and hosted at The Linux Foundation. 

Tizen fully supports HTML5 Apps (the latest Tizen SDK 2.2 has top score in the HTML5 test benchmark), which is great news for cross-platform development.

I received my Reference Device in the mail a few weeks ago, and Tizen runs quite smooth.  

The SDK IDE is based on Eclipse, so I feel right at home (but still wishing a hack-free dark theme :).

Good Documentation, Active Community, I'm good to Go!