We love you, but we're not IN love with you

Month: January 2013

Using jQuery on a non-DOM HTML String

I had an interesting problem today at work – I needed to get the src attribute of an <img> tag that was not in the DOM.  I had a string containing HTML that was not actually part of the page, but I needed to parse it for information. I was not able to change the data, but I had access to an object with a property called “innerHTML” which contained the following string:

<img src="img/myimage.png" width="1700" height="500" />
<p>this is some text</p>

The easy (but ugly) way to solve this problem is to simply write the string into a hidden <div> on your HTML page, then extract what you need with jQuery. I really didn’t want to do this because I was going to be writing several large images into the page, and it just seems like a really lame way to handle the problem.

With a bit of help from this Stack Overflow thread, I found a better way to handle it. Simply cast your string into a jQuery object and you can use regular jQuery methods on it. here’s an example of how it works:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script type="text/javascript">
//create a sample object with a property containing HTML text:
var obj = {
    mystring: '<img src="img/myimage.png" width="1700" height="500"/>' +
        '<p>this is some text</p>'
}

$(document).ready(function() {
    //cast the string into jquery...
    //then use jquery's filter() function to isolate the image tag:
    var img_tag = $(obj.mystring).filter('img')[0];
    //to get the src attribute, we cast the above result into jquery again:
    var img_src = $(img_tag).attr('src');
    console.log(img_src); //ta da!!
});
</script>

This doesn’t come up very often, but it’s a good trick to have up your sleeve.

Game Time: This Is The Only Level

As promised, I’m going to start featuring some games that I think you should be playing. This Is The Only Level is a free Flash game, but don’t let it’s appearance fool you – this is a great action/puzzle game.

This is the only level

It looks ridiculously simple, but it’s actually an interesting conceptual game where the goal and layout of each stage never changes – you need to pilot your character (the elephant) to the exit on the lower right side of the gameboard. The hook is that the rules and mechanics of gameplay change on each stage and it’s up to you to figure out how to get to the exit each time. Each stage has a name which is a clue to how the mechanics work, but the names often don’t make sense until AFTER you have completed a stage.

You can see from the screenshot that you don’t need to invest a lot of time in the game to enjoy it (my time isn’t even particularly speedy). It’s a unique casual game and there are a few sequels if you find that One Level isn’t enough.

Why I Still Make Games in Flash/AS3 (for now)

As I look ahead to this year, I have several posts planned around game development in ActionScript 3 (Flash). So, I thought I should post a brief explanation about why I’m STILL developing games in AS3. After all, isn’t Flash dead? Aren’t we all living in a brave, new HTML5 world? Here are a few of the reasons why I’m developing in AS3:

actionscript vs javascriptAs of this post, HTML5 <canvas> support is still inconsistent across major browsers. Admittedly, the main issue is Internet Explorer, but they still have a HUGE market share and can’t be completely ignored. For most of our <canvas> projects at work, we still end up building a Flash backup. If you’re targeting desktop devices for your games, publishing to Flash gives you a bigger market share than HTML5 <canvas>.

HTML5 <audio> support is pitiful. In some browsers (*cough* Mobile Safari *cough*), it barely works at all. Then there are issues with preloading sounds so they are actually available when you need them.

A New Direction for Wasted Potential

wasted potential cereal boxFor the past several years, this blog has been used as to provide helpful info to Web and Flash Developers. Basically, I would post solutions to problems that I couldn’t easily find elsewhere on the interwebs. It was just a place for developers to find resources to help with their day jobs.

There are several problems with this approach. First, the blog is a bit unfocused because it tends to reflect whatever I’m doing at my job. So, I have tips for WordPress, Flash, HTML, PHP, javascript, etc… I work with a lot of different technologies and I tend to post about whatever I’m working with at the moment. Another issue is that this type of blog works best with long, tutorial style posts. I’m a pretty busy guy these days and I just don’t usually have the several hours it takes to create a long tutorial. So, a lot of really great posts never get finished. I have unfinished drafts of tutorials for Drupal, CreateJS, and a wide variety of other things because I just don’t have the time to finish them. I also only post something about 6 times a year because of the time required to generate something worthwhile.

Well, it’s a new year and I’m going to take things in a new direction. Instead of being just about web development, Wasted Potential will be about indie game development, old-school gaming, electronics hackery, and related stuff (or even unrelated stuff that I find interesting). I’ll still post solutions to developer problems, but it will no longer be the main focus. It’s going to be a bit more personal and hopefully more interesting for me and everyone else.

I’m going to start by posting more often about what I’m doing in my spare time, as well as cool things I see other people doing. I also hope to roll out a new design for the site in the next few months. Stay tuned.

Powered by WordPress & Theme by Anders Norén