Archive for the ‘Programming’ Category

DNS redirection

Saturday, June 2nd, 2018

Whew, finally got DNS setup to work from Hover to Azure! I was stumped on this for a while, until I eventually discovered that the problem was not any of the domain records I was adding (CNAME, A, etc.), but with the name servers. It still had the old domaincontrol.com name servers from the previous setup, so switching them to ns1.hover.com and ns2.hover.com was the trick. I did enjoy learning about diginterface.com to watch DNS updates propagate.

Azure Hosting

Sunday, February 25th, 2018

This blog is now migrated over to Microsoft Azure! I’m interesting in checking it out as a more functional web host now that it has developed in the last few years (along with Amazon AWS). Specifically, looking forward to being able to host Python and nodejs apps that I’ve been working on, but just running locally so far.

The setup process for migrating the WordPress blog over from my old host was pretty smooth, all things considered. I made the mistake of updating WordPress on the old site before doing the export, and that update broke WordPress and caused it to start erroring on any admin page. That led to some hasty tinkering with the Javascript to skirt around the errors, and ultimately getting it working well enough to do the export. The posts and images seem to have moved over with no errors after all that, though.

Shopping List Balsamiq

Sunday, May 4th, 2014

With the release of Angular 1.2 and a desire to keep practicing my web programming skills, I’m working on an upgrade to our Shopping List AJAX app to allow switching between lists. The use case is the need to have a succinct list for each store we visit, since we often have to sequence trips in parallel for various reasons. Having just a single list breaks down pretty quickly in that workflow due to lots of scrolling, or being unable to hit ‘clear’ without wiping out items from the other store.

Through lots of design time at work I’m starting to get passable at making mockups in Balsamiq, so I thought it would be a useful exercise to try taking the skill home. Here’s where I’m at so far (only have a few minutes here and there to work on it).

Still need a solution to the question of how to see all the items at once, which is an unusual UI interaction that seems like it would suggest some sort of “filtering” concept. Maybe a design with a single master list and a filter for each store (including a default filter) is the next one to explore.

On the technical side, I am still figuring out whether this is a good time to tackle switching the backend over from PHP to something a little bit newer and flashier. Simple file I/O was fine initially, but having two layers of tables seems like it will be a huge pain to do without a real database, and I’m not sure spending a bunch of time hacking together PHP + MySQL is really the thing to be doing in 2014. Looking instead for something that integrates nicely with the Angular $resource model, which I haven’t found yet.

Crafting vs Untangling

Saturday, April 26th, 2014

One of the things I think a lot about during my day job is what motivates people to passion, particularly software developers working on a large integrated system. I’ve certainly learned a lot over the years about the differences between people’s worldviews and styles, and met many developers who derive their satisfaction from technical work in all kinds of ways that never would have even occurred to me.

The most interesting axis of differentiation I’ve run across is the spectrum between engineers who like to craft, build, and own new things on the one hand, and engineers who like to unravel deep and intricate mysteries on the other. These are not mutually exclusive, but I’ve found that everyone has a comfortable spot somewhere on the continuum where they can derive maximum joy from their time spent at work.

Build from scratch

Engineers who are fundamentally crafters have a similarity to the stereotype of a “startup developer” – the desire to be in on the ground floor, see the fruits of your labor, and have a big hand in the direction of a product. Pride of ownership is a big part of job satisfaction, and being publicly viewed as the creator of something is a deeply satisfying ego boost for these folks. They tend to enjoy demoing their feature and working with customers to implement it, even when those become long tasks that take them away from future programming.

Reveal the mystery

On the other hand, engineers who are problem solvers at heart find pride in their ability to understand what no one else can, and dig to the heart of an existing issue more quickly than other people. They can thrive on pressure and get their joy from the “aha” moments that happen in private, as another layer of the puzzle falls away and they reach deeper understanding. These folks can easily be happy doing systems programming on a large codebase, where there is complexity by the truckload for those with the desire to untangle it.

Be true to yourself

My (limited) experience has been that the majority of programmers fall into the first camp. The desire to craft brand new seems to spring naturally out of the engineering mindset, so this tends to be the comfortable mode of working for computer science students and new graduates. The ability to self-identify on this spectrum and choose work that best fits your personal bent is an under-appreciated talent that more software developers should spend time honing. I expect that reaching a better understanding of this concept would be helpful for most developers’ job satisfaction and avoid burnout or boredom that might otherwise be unexplained.

 

Designing Around User Interface ‘Flicker’

Monday, August 19th, 2013

A few months ago I rolled out a total overhaul of my Shopping List web app using AngularJS, which was a lot of fun and has in general been a success from a programming/tinkering perspective. It was not, however, a success in user happiness, as we found out the hard way the first trip to the grocery store using version 2.0.

The problem? As part of the overhaul I had patched a data integrity bug where two delete requests are sent in quick succession and it’s ambiguous to the server which line to delete (that’s an architecture problem for another day).  I thought this was a nice change which prevented a rare scenario of accidentally deleting the wrong list item. It turned out, however, that this actually created a workflow where the server update message can come back and can subtly shift the client UI a second or two after the user expects that it’s already done updating, restoring the entry that the server believed to have been deleted in error.

Screen Shot 2013-05-13 at 1.54.17 PM

When the red X is clicked, that row will be deleted… usually. Sometimes it will go away, and then pop back unexpectedly. What a ‘nice’ feature!

This meant that just about the time the user goes to tap the next item to mark it done or deleted, the server rudely shoves a new item into the list and jumbles up the tap targets. This behavior and its unfortunate timing makes it very, very easy to click on the wrong thing. In practice this is just as bad as the bug I had meant to fix, because it manifests in the same behavior of an accidentally lost entry.

Trying to solve this design issue got me thinking about this interesting class of bugs: cases where a user interface updates just before you try to click or tap an element, causing you to hit the wrong one. It comes up somewhat often in web browsing if you’re loading a page with lots of images and trying to click a link towards the bottom of the page. As each image above you loads, the link you’re trying to click can shift. This creates a frustrating race where you have to chase the click target down the page. You can also see this in iOS when you’re looking at a single image in Photos, and you get stuck in loop between tapping the HUDless screen to bring up the “Back” button and trying to actually tap “Back”. For me personally, my brain->finger pathway seems to have exactly the same timing as the UI delay on hiding/showing the HUD, so I can never quite tap on the button I want to until I force myself to stop and break the loop.

I don’t really have a great solution to this problem. One technique I’ve seen applied in mission-critical professional software is the use of a ‘shield’ which blocks all user input when the application knows that a server refresh is pending. This seems to work ok, but it’s tricky to get the user experience right because it’s replacing a rare misclick/mistap scenario with frequent appearance of unresponsiveness. As long as the UI both indicates the reason for the lack of response (maybe with a ‘Loading’ icon) and allows the user to somehow read data underneath if necessary, it seems like a viable path. This only stretches so far, though: after a couple seconds of loading I would expect users to abandon the screen rather than continue to wait. It’s also potentially making the 95% case a worse user experience for the sake of the 5%, which is probably a mistake in most software.

For this particular shopping list application, my solution was to consolidate all workflows that cause row insertion/deletion outside the list itself, so that the risk of a race condition between ambiguous server commands is mostly eliminated, and there aren’t destructive buttons shifting up and down anyway. It seems to work ok for now, but even here it feels like we lost functionality to deal with a bug that, while frustrating when it does manifest, is only relevant a percentage of the time. Here the timing of the server requests made this percentage high enough for a change to be worthwhile, but I’m not sure that’s often the case in other applications.

Asteroid Runner on the iPhone!

Saturday, May 18th, 2013

Earlier this week I was very happy to be able to get my Asteroid Runner game working on the iPhone with minimal fuss. It only took two tries, once using the older “iOSImpact” framework which turned out not to implement the accelerometer events, and once using the newer “Ejecta” framework. Both are made by the creator of the ImpactJS framework and basically provide a Javascript interpreter and a mock HTML5 canvas that has a rich enough API to match the way the game runs in the browser. It might be possible to use just a raw UIWebView, but after a brief foray it seems there’s a bunch of overhead around resource loading for all the images and sounds that isn’t worth re-implementing as far as I can tell.

iPhone 5 screenshot

iPhone 5 live screenshot

One of the things I’ve been happiest with through this porting process is that I built the screen width and height to be flexible early on; the game plays a little differently depending on your browser/device shape, but it avoids any kind of nasty scaling problems. Might need to move away from this for balance reasons, but during functionality testing it’s nice to see the whole spectrum on different devices (even iPhone 4 vs. iPhone 5 with their different screens).

Screen Shot 2013-05-18 at 10.10.48 PM

Relative screen heights are used throughout (with apologies for the abuse of the term ‘consts’ here)

This also required extending the ImpactJS entity class to allow positioning entities relatively instead of absolutely (since we have no idea how many pixels will be in the screen). I created a plugin that injects this into impact.entity here. I think this could be useful for other games as well that share this flexibility of scale.

Javascript Intellisense

Tuesday, May 14th, 2013

Working on my Asteroid Runner game again, and I finally found the first IDE/editor that is able to parse the ImpactJS engine effortlessly: IntelliJ IDEA!

Screen Shot 2013-05-14 at 1.48.44 PM

 

After trying just about everything under the sun (had previously used Coda and Komodo on this project hunting for this functionality), I had pretty much given up hope. Now I’m happy again and excited to be able to code even faster than before. It sure beats having to keep a browser window open to hunt through the API documentation for everything. The best part is that I didn’t even have to specify any paths; it did the traversal and indexing all on its own. Major points to Jetbrains for the ease of use here, although it still seemed a little too cumbersome to get the rest of the project set up in the first place.

Angular.js and data binding

Friday, April 12th, 2013

A few weeks ago in a burst of creative energy, I decided it was time to take another stab at overhauling my shopping list site. This time I’m forcing myself to learn a new framework, Angular, which has something very cool that I want to get to know better for professional development: data binding.

The basic idea behind data binding is that it creates a two-way link between an element that you see on the screen (like a button or text box) and a variable or object in the data structure generated by your code. This two-way link automatically handles keeping the two in sync, which is a big time saver for a language like Javascript where updating UI elements can be quite messy (depending on how much jQuery you use, maybe).

Here’s the basic structure of the shopping list now:
Screen Shot 2013-04-12 at 11.15.04 PM

There are at least two really cool things going on here:

  1. The “ng-repeat” attribute on the table row tells Angular to repeat this row once for each item in the “shoppingList” data structure. This means I don’t have to worry about managing the actual HTML of the list, it’s just created for me. My HTML markup doesn’t ever get hugely long and complex, and it doesn’t have to be generated by Javascript so it’s much easier to read.
  2. The “ng-model” attribute on the checkbox sets up automatic two-way data binding between the checkbox’s state and the value of the “item.isGotten” field. When I click the checkbox, .isGotten gets set to true; when I unclick it, it gets set to false. This saves me having to write the worst kind of click event handling code. It’s not just making programming faster, it’s making it more fun by letting me spend all my time thinking about the data structures and algorithms instead of the mundane glue.

 

The Javascript behind this is also much simpler than the old ugly version that had to handle parsing, generating HTML, handling events, and all that. It doesn’t save to the server quite yet, but it’s almost there. Because data binding handles all the basic syncing, I only have to define the logic for how to add and remove items from the list. The savings in lines of code is something like 80%.

Screen Shot 2013-04-12 at 11.21.10 PM

This is simple and clean in a way that warms my heart. Most fun I’ve had with web development yet!

Shopping List: Input Encoding

Saturday, March 16th, 2013

It all started a couple weeks ago with an apostrophe. We were adding “Esther’s 80th card” to the shopping list, and it kept coming up “Esther\’s 80th card”. Seemed innocuous enough – at some level the apostrophe is probably being escaped with a backslash. This wasn’t the first time we’d seen it and I had a little time over the weekend, so I thought I would jump in and fix it with some better encoding.

Little did I know that this would expose all kinds of other problems with special characters, particularly ampersands, spaces, and quote marks of any kind. There seemed to be some black magic going on at multiple levels making it difficult to debug why simple encode()/decode() calls were falling far short.

Eventually, after learning about such fun concepts as PHP’s “magic quotes” and all the different variants of encoding and decoding calls that are broken in fun ways, here’s what I came up with for saving data:

 

I think this works for all reasonable inputs. At least it works for every test I can come up with. We end up with fully-encoded strings stored in the flat file, that aren’t decoded until immediately before being displayed to the user. The most fun part by far is the oddity that $_POST only operates properly with an encoded input string, but then it unhelpfully decodes it for you (I couldn’t figure out how to turn this off, anyway). So I have to encode once in the Javascript and once in the PHP.

In any case, time to go get some M&Ms! I can’t remember the last time I ate regular M&Ms, but it makes for a great example in HTML special characters.

Sound effects – clicking noises!

Sunday, February 10th, 2013

Today I spent a couple hours struggling with an annoying “clicking” noise that was showing up in my Asteroids Runner game when an asteroid got destroyed. It was somewhat sporadic and difficult to debug; early on in a game the noise was very common, and then it got less common as the session went on. How could this be?

The first thing I tried was implementing proper pre-loading of sound files, figuring that maybe there was a loading issue happening the first few times the sound played. ImpactJS handles this pretty well, letting you either load sounds at runtime (probably a bad idea), or using a sound manager to preload them:

ig.soundManager.load('media/explosion.mp3', true);
ig.soundManager.load('media/laser.mp3', true);
...
var deathSound = ig.soundManager.get('media/explosion.mp3');
deathSound.play();

This seemed to smooth out the first few sound effects which was a nice gain, but it didn’t actually solve the clicking problem at all!

Next I ventured into Audacity to try to learn more about what might be causing the noise. A little experimentation with various sound effects made it clear that abruptly stopping a sound (any sudden change in volume) can lead to that clicking effect, so I went off in search of any code path that could cause sounds to get stopped early.

I made the Sound objects multi-channel so that the browser is able to play them on top of each other, theoretically preventing a case where a sound is stopped early because a new one needs to start. This seemed to improve the overall sound quality but the click was still there. I was able to tell this working by logging which channel was being used in the Javascript console:

console.log("Returned channel #" + i);

So after circling the long way around the problem trying to find the bug in my code that was causing this, I dug back into Audacity and after playing various chunks of my explosion sound over and over, I came to an embarrassing realization: the clicking sound was actually in the sound file itself. It was an artifact of the original freeware sound I had downloaded. My code, instead of causing the bug, was actually just covering up the issue in many cases!

Example of a sharp volume change that could lead to a clicking noise when played at full speed

So after another web search for publicly usable sound effects and some rewiring and damping of the new explosion sound, Asteroids Runner is click free. It now has better initial performance and smoother overall sounds to boot!