Category Archives: HTML5

PHPHOST BLOG

Web Hosting Related Articles You May Need

Video Review: HTML5 Game Development

Packt Publishing recently invited me to review the recently released video HTML5 Game Development by Makzan (http://makzan.net/). I hesitated initially to accept this offer because I’ve typically preferred reading text (books, blogs, and articles) over watching videos and podcasts for learning new technical concepts. However, after viewing the HTML5 Game Development video, I’m glad that I accepted that offer.

The HTML5 Game Development video, once downloaded, can be viewed in a web browser via the Packt Video player. The next screen snapshot demonstrates this for the first section of the video.

The HTML5 Game Development video is a series of short video clips ranging from a little shorter than 2 minutes to a little longer than 4 minutes each. These videos are categorized by “section” (sections are referenced as “chapters” in navigation buttons) and the next screen snapshot shows the first, second, and last (eighth) sections. The one in the middle (Section 1 in this case) is the Section whose video snippets would be viewed when the “Browse Videos” button is clicked.

When a Section (or Chapter) is selected, multiple short videos are made available. An example of this is shown in the next screen snapshot. Click on “Watch Video” allows one to start watching the specific video.

I have taken the time in this post to depict this presentation of the short video snippets because there are some advantages to the HTML5 Game Development video being available in this format. The short videos allow easily digestible amounts of information to be seen in just a few minutes. Objectives for each video snippet are outlined before the video snippet and then are addressed in the video snippet. With such short video snippets available and with clear objectives outlined before each video, it is easy to pick and choose which portions to watch more than once. An effective way of viewing this overall video might be to first watch the video snippets once through and then return to those of most interest are those that need to be seen again.

The overall video length is advertised as just under 2 hours. This is divided into eight chapters/sections ranging from 12+ minutes each to 17+ minutes each. With each chapter/section having 5 videos, these videos range from 1 minute to 4 minutes each. The Packt HTML5 Game Development Video Table of Contents outlines the eight chapters/sections, the five videos per chapter/section, and the total duration of each chapter/section. The O’Reilly page for this video breaks down each of the five videos in each of the eight chapters/sections by their individual durations (to minutes granularity).

Through the course of the 40 video snippets, HTML5 Game Development uses audio and video presentation to demonstrate creation of two simple HTML5-based game applications that work in web browsers on desktops and laptops and work on mobile devices. Along the way, the presentation covers HTML, CSS, JavaScript, and the EaselJS/CreateJS libraries. Seeing the code being edited in the Sublime text editor while the action being taken is narrated makes it easy to quickly see and learn how this all works together. I also liked that the video introduced many specific syntax features of HTML5 (such as local storage), JavaScript built-in functionality (such as use of JSON.stringify and JSON.parse), and CSS styling techniques.

HTML5 Game Development depicts application of several interesting products. Its use of Sublime Text makes it easy to read the code thanks to color coded syntax on a dark background, line numbers, code completion, and keyword matching capabilities. The video also uses Sloppy and the iOS Simulator to help demonstrate adjusting the developed games to run on mobile devices. The video also demonstrates using free tools available online to secure fonts and make them presentable on the web. Another example is the video’s demonstration of using Zoë to covert Flash animation to sprite sheets (.png and .json files) and then applying those with EaselJS Sprite Sheet Animations.

The Packt page describing HTML5 Game Development includes a section with the header “Who this video course is for” that succinctly (and correctly in my opinion) summarizes the audience for this series of video snippets: “HTML5 Game Development is ideal for anyone who wants to get started with the fundamentals of game development in HTML5. Some basic knowledge of HTML, JavaScript, and CSS would be useful.” The narration in the videos includes several nice references to best practices and reasons why certain things are coded the way they are and having basic familiarity with HTML, CSS, and JavaScript made it much easier to appreciate these points.

The videos demonstrate quite a bit in the two hours. The narration is quick and the code editing in Sublime Text is quick thanks to significant copying-and-pasting that occurs in synchronization with the narration. I enjoyed the relatively fast pace because I didn’t have a chance to lose interest or get bored. However, I was glad that I had used HTML5 technologies previously because a lot of content was covered so rapidly. For viewers with less experience with these technologies, the short videos provide the opportunity to easily re-watch parts that need more than one viewing and possibly mix viewing of those parts with reading other more introductory resources.

One of the things I most enjoyed about the HTML5 Game Development video snippets was the real-time development and refactoring that was demonstrated. Other than the JavaScript libraries being used, both simple games were built from nothing in front of the viewer. Although this often meant copying and pasting of code obviously written earlier, it was done as if it was being typed in (but thankfully pasting is much quicker than most peoples’ typing). The narration describes what is happening in each case and Sublime Text features are used to highlight portions being discussed. The best presentations at conferences or in videos are those in which significant upfront time has been invested in writing and generating the presentation. It is clear to me that this investment was made in preparing HTML5 Game Development. The coordination of audio and video is generally very good and is very conducive to quick learning.

I learned several things specific to game development from this video. For example, it was interesting to see discussion and implementation of the Sliding Door Effect. It was also interesting to see how common JavaScript functions and calculations could be used to model the game dynamics.

There are a few things to note to get the most out of “HTML5 Game Development.” Although video 6.2 is called “Applying Gravity to the Hero”, it actually talks about running hero and moving camera instead of falling hero. On the other hand, video 6.3 is called “Making the Hero Run” but talks about making the hero stop falling on the platform rather than falling through it. These videos, at least in my download, were switched in order.

To see full screen (which is particularly important with the code editing video), click on the square to the right of the video progress bar and volume control when mouse cursor is over video in the Packt Video Player.

The audio in HTML5 Game Development is clear and the woman narrating the video speaks in a clear manner and enunciates well (and I liked the accent).

HTML5 Game Development is a great resource for anyone with basic familiarity with HTML, JavaScript, and CSS to expand that knowledge into learning key principles that can be applied to generate HTML5 games and other interactive applications. For developers in that position, I highly recommend the HTML5 Game Development video.

Original posting available at http://marxsoftware.blogspot.com/ (Inspired by Actual Events)

Continue reading

Posted in Book Review, HTML5, Syndicated | Comments Off on Video Review: HTML5 Game Development

Book Review: Backbone.js Patterns and Best Practices

The sub-title of Swarnendu De‘s Backbone.js Patterns and Best Practices (Packt Publishing, 2014) is “A one-stop guide to best practices and design patterns when building applications using Backbone.js.” The Backbone.js site describes Backbone.js as follows:

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Preface

The Preface states that most of the book’s examples can be followed with simple text editor and web browser, but some examples require a web server and Node.js. The Preface points out that Backbone.js Patterns and Best Practices “is not a general introduction to Backbone.js or JavaScript design patterns,” but is instead intended ” for any developers who ha[ve] a basic knowledge of Backbone.js and is looking for solutions to common Backbone.js problems, looking to enforce reusability in their code by removing boilerplate and developing custom plugins and extensions, and hoping to use the most effective patterns to develop large-scale web application architecture.”

The Preface further reinforces the point that this book is not for beginners when talking about the book’s objective: “Whether you are an intermediate- or advanced-level Backbone.js developer, this book will guide you through the best practices and patterns to handle different issues with each Backbone component.”

Chapter 1: Reducing Boilerplate with Plugin Development

The initial chapter of Backbone.js Patterns and Best Practices introduces the basics of Backbone.js and provides short descriptions of Backbone.Model, Backbone.View, Backbone.Collection, Backbone.Router, and Backbone.Events. The first chapter introduces the Underscore.js utility and mentions that “Backbone.js has a hard dependency on Underscore.js.” The author also mentions Lo-Dash as an Underscore.js alternative. The core coverage of this initial chapter is on reusing code by extending (with and without a base class) and using mixins.

Chapter 2: Working with Views

Chapter 2 of Backbone.js Patterns and Best Practices begins with the sentence, “Backbone view works as the presentation layer of an application.” The chapter is dedicated to coverage of Backbone Views and covers the el property, listening to view events, working with nested views, working with templates, organizing templates, precompiling templates, and more. Along the way, the chapter mentions the JavaScript Memory Profiling, Backbone-Debugger, Require.js, Handlebars.js, backbone.stickit, rivets.js, and Backbone.ModelBinder.

The second chapter also introduces Marionette.js, which it describes as “a composite application library for Backbone.js.” The focus is on Marionette’s ItemView, CollectionView, and CompositeView.

Chapter 2 moves finishes with coverage of backbone.layoutmanager as an alternative to Marionette RegionManager.

Chapter 3: Working with Models

Backbone.js Patterns and Best Practices‘s third chapter discusses working with Backbone models. The chapter begins by outlining the basics of Backbone models and how to use Backbone models with an emphasis on CRUD (create/read/update/delete) operations. Model validation is covered next with examples of using direct Backbone model validation as well as using Backbone.Validation. Chapter 2 covers serialization of Backbone models and using Backbone-relational.js for relational data work with Backbone.

Chapter 4: Working with Collections

Chapter 4 of Backbone.js Patterns and Best Practices defines a Backbone collection as “an ordered set of models” that includes “functionality to add, remove, sort, and filter models, and save to or fetch data from the server.” The chapter includes a brief overview of Backbone collections before moving onto describing how to perform database-related operations on a Backbone collection. Sorting and filtering of Backbone collections are also covered in the fourth chapter.

Chapter 5: Routing Best Practices and Subrouting

The fifth chapter in Backbone.js Patterns and Best Practices describes a Backbone router as a mechanism that matches a “URL fragment” to an invoked method. The chapter provides an overview of Backbone routers and routing before moving onto coverage of “best practices for working with routers.” In the course of this discussion, the author references Marionette.AppRouter and Marionette.Controller. Sub-routing is described in Chapter 5 and the extension backbone.subroute is specifically referenced.

Chapter 6: Working with Events, Sync, and Storage

Chapter 6 of Backbone.js Patterns and Best Practies covers “custom events, Backbone.sync() method and Backbone.LocalStorage.” The portion of the chapter on events begins with a definition of events from the Backbone.Events API page. This section demonstrates how easy it is to create custom events in Backbone, contrasts use of Events to use of Callbacks, and provides a case study describing use of events. The section of Chapter 6 on Backbone.LocalStorage discusses and demonstrates use of Backbone.localStorage Adapter before mention an alternative called Backbone.dualStorage.

Chapter 7: Organizing Backbone Applications – Structure, Optimize, and Deploy

As its title suggests, Chapter 7 of Backbone.js Patterns and Best Practices discusses issues related to application structure, optimization, and deployment of Backbone-based applications. The author proposes an application directory structure which “is not something that will work universally for every application,” but “lots of developers use it for their projects without any issues.”

One of Chapter 7’s main themes is Asynchronous Model Definition and using Require.js to add AMD support to a Backbone application.

Chapter 8: Unit Test, Stub, Spy, and Mock Your App

The final chapter (not including appendices) of Backbone.js Patterns and Best Practices begins with the opinionated statement, “Majority of developers believe that testing is essential, but in reality only a few of them actually go for test-driven development.” The author lists multiple tools/frameworks for testing JavaScript code, but the chapter’s focus is on use of QUnit (unit testing framework) and SinonJS (test doubles support).

Appendix A: Books, Tutorials, and References

Appendix A includes the author’s recommendations for three books on Backbone.js along with recommended online tutorials and blog posts on Backbone.js. This appendix also includes references to additional resources on testing Backbone-based applications with QUnit and SinonJS as well as references to more Backbone plugins and tutorials.

Appendix B: Precompiling Templates on the Server Side

Appendix B is short and uses a Node.js-based example to illustrate how to precompile JavaScript templates.

Appendix C: Organizing Templates with AMD and Require.js

Although two chapters earlier in Backbone.js Patterns and Best Practices discuss AMD and Require.js briefly, both chapters reference Appendix C for additional details. The example in this appendix is built on top of requirejs-tpl.

General Observations

  • My most important observation is that the implication of Backbone.js Patterns and Best Practices‘s title and the explicit statements in its Preface that the book is targeted at intermediate Backbone developers should not be taken lightly. Although the book does provide some brief introductory material on most of the subjects it covers, at least some familiarity with the basics of a Backbone.js-based application would be extremely beneficial in realizing the full value of reading this book.
  • There are not many images or screen snapshots in this book, but these are not particularly important to the content.
  • Even in the PDF version of Backbone.js Patterns and Best Practices that I reviewed, the code listings are black text on white background with no color syntax. Most of the code listings are short enough to mitigate the issue, but color-coded syntax would be easier to read.
  • Backbone.js Patterns and Best Practices is written with the intent to discuss issues that the author believes developers frequently run into when developing Backbone-based applications.

Conclusion and Recommendation

Backbone.js Patterns and Best Practices (Packt, 2014, 174 pages) is explicitly intended for intermediate to advanced level Backbone.js developers. For more introductory text to Backbone.js, other books that might be more appropriate (none of which I have read) include Beginning Backbone.js (Apress, 2013, 304 pages), Developing Backbone.js Applications: Building Better JavaScript Applications (O’Reilly, 2013, 374 pages, free open source reading), Backbone.js Cookbook (Packt, 2013, 282 pages), or Instant Backbone.js Application Development (Packt, 2013, 64 pages). There are also numerous online resources with introductory Backbone.js content. Because I have not reviewed these other Backbone.js books, I cannot definitively state that Backbone.js Patterns and Best Practices picks up where they leave off. However, my best guess is that there is some overlap between these seemingly more introductory Backbone.js books, but that Backbone.js Patterns and Best Practices likely covers some more advanced topics (patterns and best practices) not covered in those books.

Original posting available at http://marxsoftware.blogspot.com/ (Inspired by Actual Events)

Continue reading

Posted in Book Review, HTML5, JavaScript, Syndicated, Web Development | Comments Off on Book Review: Backbone.js Patterns and Best Practices

Book Review: Mastering HTML5 Forms

When I accepted Packt Publishing’s offer to review the recently released book Mastering HTML5 Forms, I was curious about what an entire book would cover related to HTML5 forms. Although they are relatively basic when compared to some of HTML5’s other f… Continue reading

Posted in Book Review, HTML5, Syndicated | Comments Off on Book Review: Mastering HTML5 Forms

Book Review: HTML5 Data and Services Cookbook

Packt Publishing recently published HTML5 Data and Services Cookbook by Gorgi Kosev and Mite Mitreski. The subtitle of the book is: “Over one hundred website building recipes utilizing all the modern HTML5 features and techniques!” I accepted an invita… Continue reading

Posted in Book Review, HTML5, JavaScript, Mobile Development, Syndicated, Web Development | Comments Off on Book Review: HTML5 Data and Services Cookbook

Significant Software Development Developments of 2012

I have written before (2007, 2008, 2009, 2010, 2011) on my biased perspective of the most significant developments in software development for that year. This post is the 2012 version with all my biases and skewed perspectives freely admitted.

10. Gr… Continue reading

Posted in Akka, Cloud Computing, General Development, Groovy, HTML5, linux, NoSQL, Scala, Syndicated | Comments Off on Significant Software Development Developments of 2012

JavaOne 2012: Building Mobile Apps with HTML5 and Java [Tiggzi]

I returned to Parc 55 (Mission conference room) to see Max Katz’s (Exadel Developer Relations) “Building Mobile Apps with HTML5 and Java” Birds-of-a-Feather (BoF) presentation. Specifically, Katz is in Developer Relations for Tiggzi, a cloud-based app … Continue reading

Posted in Cloud Computing, HTML5, JavaOne 2012, JavaScript, Syndicated | Comments Off on JavaOne 2012: Building Mobile Apps with HTML5 and Java [Tiggzi]

JavaOne 2012: Building Mobile Apps with HTML5 and Java [Tiggzi]

I returned to Parc 55 (Mission conference room) to see Max Katz’s (Exadel Developer Relations) “Building Mobile Apps with HTML5 and Java” Birds-of-a-Feather (BoF) presentation. Specifically, Katz is in Developer Relations for Tiggzi, a cloud-based app … Continue reading

Posted in Cloud Computing, HTML5, JavaOne 2012, JavaScript, Syndicated | Comments Off on JavaOne 2012: Building Mobile Apps with HTML5 and Java [Tiggzi]

HTML5 Placeholder Fallback using jQuery

This small script can ensure that support for the HTML5 input placeholder attribute falls back gracefully in older browsers and Internet Explorer. Continue reading

Posted in form, HTML5, input, JavaScript, jQuery, placeholder, Syndicated | Comments Off on HTML5 Placeholder Fallback using jQuery

HTML5 Placeholder Fallback using jQuery

This small script can ensure that support for the HTML5 input placeholder attribute falls back gracefully in older browsers and Internet Explorer. Continue reading

Posted in form, HTML5, input, JavaScript, jQuery, placeholder, Syndicated | Comments Off on HTML5 Placeholder Fallback using jQuery

Significant Software Development Developments of 2011

As I did in 2007, 2008, 2009, and 2010, I summarize some of the software development events of 2011 that I find most significant. All of the normal caveats still apply: this list is definitely shaped by personal experience, interests, and biases.

10. … Continue reading

Posted in General Development, HTML5, Java (General), Scala, Syndicated | Comments Off on Significant Software Development Developments of 2011