Book Review: Instant KineticJS Starter

April 28th, 2013 by Adrian

KineticJS Starter Book Cover

Instant KineticJS Starter

Create Flash-like mobile supported applications using KineticJS!
by Andrey Kovalenko
49 pages long
Published by Packt Publishing

Contents

  • So, what is KineticJS
  • Installation
  • Quick start – creating your first image editor
    • Organizing your stage, layers, groups, and shapes
    • Adding custom and ready-to-use shapes, images, and text to a layer
    • Dragging-and-dropping items with configurable constraints and bounds
    • Resizing, scaling, and rotating items
    • Cloning and removing items
    • Applying a filter to a selected image
    • Animating selected shapes
    • Cache nodes to improve performance
    • Optimizing for use on mobile devices (iOS, Android)
    • Saving a stage as an image
  • Top features you need to know about
    • Layering support
    • Standard and custom shapes
    • Styling
    • Selector support
    • Event-driven architecture, drag-and-drop
    • Filtering
    • Animation
    • Serialization/deserialization, saving a stage as an image
  • People and places you should get to know

“KineticJS is a JavaScript library that helps us simplify the development of interactive HTML5 applications. In this case interactive applications are different 2D applications such as games, image editors, interactive maps, cartoons, and more. From a technical point of view it is an extension to the HTML5 Canvas 2D context in the form of a JavaScript library.”

First off, this book is intended as a ‘starter’, so don’t expect a weighty tomb that covers everything. If you have a medium level of HTML5 Canvas, CSS and JavaScript knowledge then you shouldn’t have any trouble getting to grips with KineticJS.

The book starts off by explaining how to download and install KineticJS in to an empty HTML page. Then it jumps straight in to creating an image editor! I’m not sure this was the correct approach, but I guess the author was just trying to capture your interest early on (before you lost interest). I personally think it would have been better to build up to creating something like an image editor.

Anyway, the image editor is a reasonable application to use, as it allows the author to introduce various aspects of KineticJS using a real-world example. You can see from the contents list above what is covered in this example. The image editor takes us from page 7 through to page 24.

On page 25 the author goes in to a bit more depth on some of the topics you covered during the image editor build. See the contents list above to see what is covered. This continues through to page 48.

Occasionally the English grammar isn’t as clear to read as it could be, and I spotted a couple of instances where punctuation was missing, suggesting another round of proof-reading wouldn’t have gone a miss.

On the whole though it is a useful primer to anyone looking at using KineticJS for the first time, but a lot of the content is available for free from html5canvastutorials.com

Buy the book from Amazon.co.uk here.

Posted in Books, Canvas | No Comments »

10 Print Chr (205.5+Rnd(1)); : Goto 10

January 16th, 2013 by Adrian

10 PRINT

A couple of months ago The MIT Press released 10 PRINT CHR$(205.5+RND(1)); : GOTO 10, written by Casey Reas and friends.

Here is a brief overview taken from the MIT Press website …

This book takes a single line of code–the extremely concise BASIC program for the Commodore 64 inscribed in the title–and uses it as a lens through which to consider the phenomenon of creative computing and the way computer programs exist in culture. The authors of this collaboratively written book treat code not as merely functional but as a text–in the case of 10 PRINT, a text that appeared in many different printed sources–that yields a story about its making, its purpose, its assumptions, and more. They consider randomness and regularity in computing and art, the maze in culture, the popular BASIC programming language, and the highly influential Commodore 64 computer.

You can see the result of this one line of code on YouTube here.

Casey Reas discussed it in a bit more detail during his presentation at the Eyeo Festival 2012. Check out the 30 minute mark in this Vimeo recording.

You can buy the book from Amazon.co.uk or download a free PDF version which is released under a Creative Commons licence.

 

Posted in Books, Generative Art | No Comments »

The Nature of Code

December 7th, 2012 by Adrian

The Nature of Code

Daniel Shiffman‘s book ‘The Nature of Code‘ has finally been released. It is available for free online, or you can download an offline copy by donating your chosen amount to the author (and/or the Processing Foundation). The print version of the book is coming soon.

It is well written, very clear to follow, with small bitesize pieces of code that illustrate what is being discussed. This a fantastic resource and we should all be very grateful to Daniel for his generosity to the creative coding community.

You can read the book online here, and download the Processing code examples here.

Follow Daniel on Twitter.

Posted in Books, Processing, Sample Code | No Comments »

Full Frontal 2012 – Videos Online

December 6th, 2012 by Adrian

Full Frontal 2012

Videos from the Full Frontal conference (held at the beginning of November in Brighton) are now available to watch online. Remy Sharp has posted the videos to his YouTube account.

Check out the videos below …

  1. James Pearce - All you need is (angle bracket)body/(angle bracket)
  2. John Allsopp - Is HTML relevent in the era of web apps?
  3. Andrew Betts - Offline Rules
  4. Anna Debenham - Exploring the game console browser landscape
  5. Paul Kinlan - Building Web Apps of the future. Tomorrow, today and yesterday
  6. Rebecca Murphey - Writing Testable JavaScript
  7. Steven Wittens - Making things with Maths
  8. Chris Wilson - Tales of Suckage and Awesomeness

Posted in Conferences and Events, HTML5, Javascript, Presentation | No Comments »

XOXO Festival – Videos Available Online

November 28th, 2012 by Adrian

XOXO

XOXO was an arts and technology festival held in Portland, Oregon, back in September 2012. The festival started out as a Kickstarter project by Andy Baio, and raised it’s goal of $175,511.

They have now posted videos of all the session online for free.

Some of the highlights include:

View the full list of videos on the XOXO Festival YouTube Channel.

Posted in Conferences and Events, Presentation | No Comments »

Google Developers Live (GDL) Presents Make Web Magic

November 26th, 2012 by Adrian

Google Developers Live

Recently I’ve really been enjoying this video series by Google Developers Live. It’s called Make Web Magic, and it is a series of interviews with talented HTML5 developers who have released great work (usually on the Chrome Experiments site). To date there are three interviews on there. The host is Paul Irish (someone who knows what they are talking about) and it is a great way to pick up tips and tricks used by the experts. Check out the videos …


Make Web Magic | Part I – Michael Deal

Michael Deal

Michael’s website: http://mudcu.be


Make Web Magic | Part II – Mark Danks

Mark Danks

Mark’s website: http://www.danks.org/mark/


Make Web Magic | Part III – Hakim El Hattab

Hakim El Hattab

Hakim’s website: http://hakim.se

Posted in CSS3, Google, HTML5, Javascript, Presentation, Video, WebGL | No Comments »

dat-gui: A Lightweight GUI for JavaScript Variables

November 19th, 2012 by Adrian

dat-gui

Recently I’ve started using this really cool lightweight GUI for allowing the easy tweaking of your JavaScript variables at runtime. It’s called dat-gui and it is available for download from the Chrome experiments website. The source code is hosted on Google Code and there is a handy tutorial showing how to use it here.

It makes it really easy to display sliders, colour pickers, checkboxes, buttons, drop-down menus etc in a nice clean panel (that can also be hidden) that update your JavaScript variables on-the-fly. It is also possible to create presets and save bespoke settings.

The interface looks something like this …

dat-gui Example

Here is my example of it in use.

Canvas Experiment 22

Posted in Canvas, Javascript | No Comments »

JSConf EU 2012 – Videos Online

November 19th, 2012 by Adrian

JSConf EU 2012

Back in October JSConf EU took place in Berlin. I wasn’t aware of it at the time, but it has now come to my attention that the sessions are now available online for free.

There were some great speakers including Anders Heijlsberg, Mr.doob and Remy Sharp. Check out the list below …

All the videos are available on their YouTube channel here.

Posted in Conferences and Events, Javascript | No Comments »

Subtle Patterns

November 19th, 2012 by Adrian

I’m really loving this website. It’s called Subtle Patterns and it has a huge collection (over 300) of quality subtle patterns that are tile-able and can be used for repeating backgrounds. The site has been created by Atle Mo, but many of the textures are submitted by users. Only the very best get selected by Atle, maintaining a high quality to the collection. So next time you want to give your flat backgrounds a bit of a lift head on over to subtlepatterns.com

Posted in Design | No Comments »

JSConf 2012 – Videos Online

November 16th, 2012 by Adrian

Back in April JSConf 2012 was held in Scottsdale, Arizona. I wasn’t aware of it at the time, but it has now come to my attention that the sessions are now available online for free.

There were some great speaks including Remy Sharp and Paul Irish. Check out the list below …

Posted in Conferences and Events, Javascript | No Comments »

Handy Online Colour Picker

November 16th, 2012 by Adrian

If you are ever in need of selecting a colour and getting it’s HEX, RGB or HSB value, but can’t be bothered to fire up Photoshop, then just go to colorpicker.com

It’s a super handy online colour picker that also allows you to save up to 10 colours (and is persistent between browser sessions).

They also have a link to a chart showing the HTML Color Names.

It is also possible to link directly to a specific colour using a query string like this …

http://www.colorpicker.com/?colorcode=43E0F5

UPDATE:
This is also handy for copy-and-pasting HSL values.
http://mothereffinghsl.com

Posted in Tool | 1 Comment »

Microsoft Build Conference – Videos Online

November 9th, 2012 by Adrian

Microsoft held their build conference a few days ago (October 30 – November 2) in Redmond. They have put some of the videos of those sessions online. Don’t be put off by the fact it is from Microsoft, there are some interesting things in there like HTML5 & CSS3, high-performance JavaScript and an introduction to TypeScript.

Day 1

Day 2

Day 3

Day 4

Posted in Conferences and Events, CSS3, HTML5, Javascript, Presentation, Video | No Comments »

Adobe Creative Week Videos

November 8th, 2012 by Adrian

Did you miss Adobe Creative Week earlier in the year? If so, all the videos are available to watch online. Check out the list below …

Creative Week – Daily Debates

Creative Week – Evangelist Demos

Creative Week – Show and Tell

Creative Week – How Tos

 

Posted in Adobe, Conferences and Events, Presentation, Video | No Comments »

Tributary – A d3 Playground

November 1st, 2012 by Adrian

A couple of weeks ago I listed a bunch of HTML, CSS, JS online code playgrounds. Well anyway, I’ve just stumbled across this cool playground for doing d3 JavaScript SVG visualisations called Tributary. It has been created by Ian Johnson and allows you to spike d3 code snippets in the browser.

Ian presented a session about Tributary at the Graphical Web 2012 conference in Zurich, Switzerland. Watch his session on Vimeo here.

His examples from that session are available here.

Posted in Data Visualization, Infographics, Javascript, SVG | No Comments »

Support Details – Browser/OS Specification

November 1st, 2012 by Adrian

Support Details – This is a handy site for clearly displaying important information about your  (or your clients) web browser and operating system.

It displays the following information:

  • Operating System
  • Web Browser
  • IP Address
  • Javascript enabled?
  • Cookies enabled?
  • Screen Resolution
  • Browser Size
  • Colour Depth
  • Flash Player Version

There is even a useful ‘Send Details’ feature which allows your client to automatically send their results back to you by email.

On a similar note, there is also a site called Codec Detect, which video and audio codecs their browser supports.

Posted in HTML5, Javascript, Video | 2 Comments »

PxLoader – A JavaScript Preloader

November 1st, 2012 by Adrian

This morning I thought I’d blog about PxLoader. This is a handy JavaScript library for handling the loading of files (eg. Images, Sounds, etc) and monitoring their progress. It was created by Pixel Lab, the people who made the HTML5 version of Cut the Rope. It looks pretty straight forward to use and the website has some nice clear examples and documentation.

NOTE: This is different to a JavaScript module loader such as RequireJS, which handles the dependancies of JavaScript modules.

A good alternative to this is PreloadJS, which is part of the CreateJS suite of tools (also available separately).

Or you can make your own asset loader.

Posted in Canvas, CreateJS, EaselJS, HTML5, Javascript | No Comments »

microjs – A search tool for JavaScript micro-frameworks

October 31st, 2012 by Adrian

microjs is an online tool by Thomas Fuchs for finding JavaScript micro-frameworks. Search by selecting what it is you are trying to do (eg. CSS animation or feature/browser detection) and the list of micro-frameworks will be filtered for you. All the frameworks are 5kB or less (the only exception to this is Backbone which comes in at 5.5kB). It is not a complete list by any means, but it has a lot of the popular ones and it is a great way to discover some new ones you may not be aware of. Worth a bookmark.

Posted in CSS3, HTML5, Javascript | No Comments »

-prefrix-free

October 30th, 2012 by Adrian

Following on from my previous post regarding CSS vendor prefixes, I thought I would also highlight Lea Verou‘s project -prefix-free. This is a small JavaScript file that dynamically updates your CSS to include the vendor prefixes for you (ie. you don’t need to write any vendor prefixes in your CSS code.

CodePen has the option to use -prefix-free by clicking on the cog icon in the top-right of the CSS panel. You’ll then see a checkbox called ‘Prefix free’.

Posted in CSS, CSS3, HTML, HTML5, Javascript | No Comments »

Prefixr

October 30th, 2012 by Adrian

Today I came across Prefixr by Jeffrey Way from NetTuts. This is a pretty nifty online utility that goes through your CSS code and generates all the vendor prefixes for you. Pretty handy.

There are also a whole bunch of plugins available for your code editor of choice. For example, Sublime Text 2, Notepad++, TextMate, Espresso, Coda.

A similar tool to this is CSS3 Maximizer, but this doesn’t seem to do animation keyframes like Prefixr does.

Posted in CSS, CSS3, HTML, HTML5 | No Comments »

My Personal Word Cloud

October 30th, 2012 by Adrian

I’ve always liked Word Clouds (aka tag clouds), so this morning I decided to create one that reflects the things that interest me. There are a few online tools for creating your own word clouds. I chose Wordle, which is the original online tool.

Click here to view a larger version of my word cloud.

Posted in Generative Art, Infographics | No Comments »

« Previous Entries