From the Bookmarks Bar – August 30, 2013

This week from the bookmarks bar I’ve got some interesting new developments in the world of Android development, a great new JS app for chip tune lovers and some great suggestions for front-end developers to promote code reuse.

C++ Compiler for Android

Want to start tinkering with Android applications but not that up to date on Java.  Good news!  Intel has released their own compiler for C++ that generates native Android applications.  Better yet, it is free for the time being.

Band.js: An 8-bit JavaScript Audio Library

Anyone who loves video games is no doubt a fan of the old chip tune music from the days of the NES and Game Boy.  Using a new library, you can create 8 bit chip tunes using only JavaScript and the HTML5 audio API.  Check out the link for some sample tunes from Super Mario Bros., Tetris and Zelda.

Decoupling HTML, CSS and JavaScript

Decoupling is a must with web applications; we have many design patterns that we follow and we split our applications into layers for this purpose.  However, we often think of the view as just one part of that application.  Most web applications have multiple front ends and it helps to be able to reuse HTML and CSS where possible.  Here is a good look at ways to do it.

Thanks for reading!  If you have some great bookmark suggestions please let me know in the comments!

Choosing a Game Development Framework

Lately I’ve had an idea for a game that I just can’t get out of my head.  Combined with the recent unveiling of the Nintendo Web Framework I’m compelled to make an attempt to get a demo of the game running on the Wii U.  At a recent presentation from Unite ’13, Nintendo touted how easy game development is for the Wii U using JavaScript and HTML5.  I’ve always wanted to explore the limitations of HD gaming within the browser so this is the perfect opportunity to test Nintendo’s claims.

Our weakness as developers is that when we have an idea we just want to code.  I don’t want to plan or design, I want to get something up and running and see the fruits of my labor as soon as possible.  As much as I love technology, some times I’m so compelled to code that I don’t even want to vet the best framework for the job.  Sometimes I’ll just grab what I’m most familiar with and start working.  With game development, that is difficult to do.

I wrote a previous post about the pitfalls of game development in JavaScript where I mentioned not reinventing the wheel.  I see so many horror stories of indie developers spending all of their time on an engine and not ever making a game.  I suggested a couple of frameworks in that post, but now that I’ve completed a more extensive vetting process I’d like to share some insight on the decisions that I made.

2D vs. 3D

If you are planning on making a 3D game, you should look no further than Unity.  You can quickly get prototypes of your game running by relying on Unity as a backbone.  There are a number of resources already available that you can take advantage of for development.  These include 3D models, plugins and tutorials for your project.

If you insist against Unity, CryEngine, Unreal Engine and the Source Engine are other options, but aren’t exactly targeted to indie developers.

I was dead set on making a 2D game; many aspects of my game rely on it.  Making a true 2D game in Unity is just not possible.  You can create a game with a fixed camera that limits movement to two dimensions but ultimately the assets and game will run 3D.  My inexperience with 3D game development had me a bit nervous going that route.

Web, Mobile or dare I say it…consoles?

I mention above that I already had some interest in the Nintendo Web Framework as a potential target, so the decision to make the game using JavaScript and HTML5 was practically made for me.  However, that wouldn’t make for a very interesting post now would it?

If I wanted to make a game for mobile platforms and perhaps PC/Mac/Linux, my previous experience would lead me to look toward cocos2d.  I have previously worked with cocos2d-iphone and found it easy to work with.  cocos2d-x is essentially the cross platform version of cocos2d, which has support for those and many other platforms.

Whittling It Down

A quick Google search turns up many JavaScript game development frameworks.  How do you decide which one to use?  I ended up filtering out options based on features that I saw as valuable to me.  This is obviously a subjective process, so your criteria may lead you to a different result than mine.

First, I needed something free and open source if possible.  I would hardly even consider myself an indie developer and I really can’t see myself financially contributing to a pet project like this.  Second, I’d prefer a framework that can work out of the box with standard tools such as Tiled for tile based map creation.

At this point I had narrowed my decision down to two options: cocos2d-html5 and melonJS.  It is going to sound odd based on my recommendation of cocos2d above, but after working with both options I eventually settled on using melonJS.  cocos2d has its applications but for lightweight, simple JavaScript game development it is my opinion that melonJS is the best framework out there.

Thanks to the great documentation, I had a simple platformer up and running using the melonJS boilerplate project within an hour of getting started.  I have yet to thoroughly stress test, but I’ve had no hiccups running the game at 720p within Chrome.

Why did I turn away from cocos2d-html5?  After some exploration it just didn’t seem like the best way to go for a lightweight JavaScript game.  Ultimately, cocos2d-html5 is meant for cross platform games between the web and iPhone, and the API reflects that.  I wanted something built for JavaScript from the ground up.

Have you been working with a framework that you really like?  Leave a comment to let me know.

Code Wars: Training in Programming Arts

As developers we have to frequently consult outside resources for information on how to complete certain tasks.  Whether it’s a book or an online tutorial, a quick refresher is always helpful to get a push in the right direction.  The problem is that we will often look for these resources when we know specifically what we need to do, rather than using them to buff up our skills.

There are many sites out there that allow you to do programming challenges to work on your proficiency with a language.  Project Euler, TopCoder or the Daily Programmer subreddit come to mind.  My newest addiction of this type of site is Code Wars.

What is Code Wars?

I like to explain Code Wars as a combination of small programming challenges and Xbox style achievements.  You complete a series of code “katas“: short snippets or bug fixes that test basic understanding of programming language concepts.  For each kata that you complete, you work your way up to higher ranks and increasingly more difficult tasks.

Code Wars Dashboard

The user dashboard in Code Wars.

Code Wars tracks the type of the katas that you complete into different types, such as bug fixes, algorithms and reference.  You can also complete katas in either JavaScript, Coffee Script or Ruby.  Since Code Wars starts with the basics, it is perfect for supplementing your learning of a new language.

Test Your Might

Code Wars provides you with a very simple code editor with syntax highlighting.  It works surprisingly well in the browser, complete with handling of indentation and other features.  You are also provided with the ability to write unit tests against your solution to test any cases that will help you complete the kata.  Then you submit your solution.  There becomes nothing more addicting than getting that green check mark every time you complete a kata.

The best feature of Code Wars comes after you complete a kata.  Once you submit your solution and it is verified, you get to see the solutions that other developers submitted as well.  Sometimes you will see solutions that are more complicated than your own, but quite often you will see solutions that are mind blowing in their simplicity.  I typically spend just as much time reviewing other’s solutions as I do coming up with my own.

Future Wars

I have no doubt that in the future Code Wars will bring support for more languages.  I’m excited at the possibility of completing code katas with Python or PHP.  I can’t help but think that Code Wars would also be an amazing tool for teaching people how to use the UNIX command line.

The beauty of Code Wars is that its katas are populated by user submissions, so it will continue to grow with new content in the as time goes on.

Want to test your skills?  Sign up by completing the example kata at http://www.codewars.com!  Thanks for reading!  If you would like, you can view my Code Wars profile here!

From the Bookmarks Bar – August 16, 2013

This week I’m excited to share a few great links From the Bookmarks Bar.  I have two great development tools and a free course that is very interesting.  Everyone loves free learning!  Take a look!

Koding: Free Virtual Machines for Developers

A new project called Koding has recently launched, with the goal to provide free virtual machines with development environments available to anyone.  The VMs run an instance of Ubuntu which you can use to develop on any language you wish.

The World’s Simplest HTML5 WYSIWYG Editor

Getting tired of the bulky, complex WYSIWYG editors?  Want something fast and easy to use?  Check out the world’s simplest editor.  With Bootstrap and around 100 lines of HTML/CSS/JS you can have a fully functioning HTML editor on your site.

Create Your Own Programming Language

Ever wondered what goes into developing a new programming language?  Here is a great introductory level course that goes over the basics of everything from parsing to compiling.

Thanks for reading!  Do you have some links you would like to see in the bookmarks bar?  Leave a comment or let me know on Twitter!

How to Write a jQuery Plugin – Part 3: Usage

In the parts one and two of my series on how to write a jQuery plugin, we learned how to create a simple jQuery plugin with the proper structure. We allowed the user to provide values for their own set of options and we allowed them to use our plugin with multiple elements by using a single class. Now we have a simple version of our plugin in a JS file ready to be used. In this post I will demonstrate how to import our plugin file to an HTML page and apply it to some elements on the page.

Importing Plugin Script File

If you have used jQuery plugins before, then this process is nothing new for you. You need only two things to use a jQuery plugin on a page; links to jQuery and the plugin file. We do that by adding these script tags to the head section of our page:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.highlight.js"></script>

The first line loads the minified version of jQuery from the content delivery network (CDN) hosted by jQuery. This allows jQuery to be imported by your page without hosting on your server, but requires an internet connection so it cannot work with offline apps. The second line imports the file of our jQuery plugin. The sample file is available for download below.

Usage

Let’s say we have now added some content to our page. We have a couple of blocks of content that we want to use our plugin on. To identify these elements, we have added a class of “highlight” to each one. We want our plugin to activate when the page has finished loading. We can use the following JavaScript:

$(function () {
     $('.highlight').highlight();
});

The dollar sign ($) function is a shortcut for the $(document).ready() function in jQuery. So once jQuery has finished loading, it calls our plugin using the highlight function. Remember in the previous parts in the series we used jQuery’s extend features to add our highlight function directly into jQuery. Our plugin already handles multiple elements, so it will apply the effect to every element on the page that has the class “highlight”.

But what about our user options? How do we use those? Our plugin has an option called “cssClass” that allows us to control the class that gets added to the element to define the highlight options. All that we need to do is create an object that defines that value and pass it into our highlight function. Here is an example:

$(function () {
     $('.highlight').highlight({ cssClass: 'highlight-red' });
});

Our plugin will take the option values specified here and merge them with the default values we have set. The only thing we need is to define the highlight classes in CSS.

.highlight-yellow { background-color: yellow; }
.highlight-red { background-color: red; }

I’d like to note that in effect what we have done here is just add a class for the highlight effect to the elements through the plugin. Normally, we would not do this through a plugin, we would just use CSS, but it is a good learning example. If we wanted to, we could provide additional features that could not be done through CSS alone.

That’s it! Thanks so much for reading this far. Any questions or thoughts? Feel free to leave a comment here or let me know on Twitter!

How to Write a jQuery Plugin – Part 2: Options and Collections

In part one of my series on creating a jQuery plugin, I showed an example on how to structure a new custom plugin.  In this post, I’ll show you how to provide options for developers using your plugin and how to allow your plugin to handle multiple elements in the DOM.

User Options

You will remember in part one that we added an options parameter to our plugin’s main function.  It looked like this:

$.fn.highlight = function (options) {

This parameter is an object that will contain values for all of the options that the user will specify.  There is nothing special about this object.  It can hold any kind of data that you need to use as a setting for your plugin.  The problem with using this object directly is that we don’t want to require the user to set any options at all, if we don’t need them to.  However, we also don’t want to have to check to see if each value exists to specify a default.

jQuery’s built in extend function simplifies this down to a small piece of code.  See the example below:

var settings = $.extend({
     cssClass: 'highlight-yellow'
}, options);

In this snippet we are creating a variable in our plugin to hold our user settings.  To do this, we pass two things into jQuery’s extend function.  The first is an object that contains all of the default values that we wish for our plugin to use if the user does not specify their own value.  The second parameter is, you guessed it, the options variable containing the user’s specified values.  jQuery extend takes those two objects and merges them together, replacing our default values with the values in the options variable, if they exist.

In this case, I’ve added a very simple setting that will control the class that gets added to the content to highlight it in a specific color.  I will demonstrate how to use that in the next section.

Handling Loops and Collections

You may not realize it, but any time you are using a jQuery selector you are being returned a collection of elements.  This is the case whether or not there is or an only be one matching element on the page or not.  Selecting an element by class?  You get a collection of the elements that match that class.  Selecting an element by ID?  You still get a collection, but it contains only a single element.

This is important to understand because you will need to code your plugin to handle a collection of elements, rather than just one.  You can do this easily using jQuery’s each function.

return this.each(function () {
     // Adds the highlighter class to the element
     // Note the use of our settings object.
     $(this).addClass(settings.cssClass)
});

Inside of the each function is where we write the code for the core functionality of our plugin.  In this case, we want to add a class to every element that has been selected by the user. This will be how we add the highlight to each block of content.

Notice the use of the settings variable.  That object will contain either the default value or the user specified option value.  No extra work is required.

At this point, if we combine all of our code into a single file, we have a very simplified, but working plugin.  In the final part of the series, I will show you how to create your plugin file and complete all of the necessary steps to use it in an HTML page.

Until then, thanks for reading!

From the Bookmarks Bar – August 3, 2013

It’s a little late, but I’ve got a few awesome links for this week’s bookmarks bar.  They include a great new piece of open source software, an update to an awesome web development framework and some suggestions for self improvement for developers.

Tox

Tox is a brand new piece of open source software for secure messaging, calls and video chat.  It was created to provide a more secure alternative to Skype following the news that Skype was providing data to the NSA.  While it is not in wide release at this time, you can pull from the Tox git repository and build the application on your machine, if you would like.

12 Things That Would Make You a Better Developer

While I can’t say that I agree that all of these are absolutely necessary, many of these can help you become a much more efficient developer at the least.  I would recommend the section on pushing for more automation.

Bootstrap 3

Twitter’s Bootstrap framework for front-end web development has just unleashed the release candidate of version 3.  The framework boasts an all new flattened look with a focus on speed improvements.  Don’t like the look?  There are plenty of add ons out there to customize Bootstrap to your liking!

Thanks for checking out this week’s links.  Found any cool Bootstrap designs?  Let me know on Twitter!