Wes Gorgichuk

Wes has an extensive background in JavaScript, Node, PHP, MySQL and Actionscript development. He enjoys learning new technologies and has unwittingly received the, unofficial, title of DevOps at gskinner for managing the internal server infrastructure in addition to his programming duties. When he's not learning new technologies he can be found hitting the trails on his mountain bike or travelling the world and eating at some of the best restaurants there are.

Keeping it Grounded: Why We Avoid the Cloud (Sometimes)

The Cloud

Don’t get me wrong, the “Cloud” is great. Being able to utilize existing apps and not having to worry about updates or security is a huge time saver. But when it gets down to it, “In the cloud” is a buzz term. When translated to laymen speech it means “Storing your data and running your applications on an offsite server, somewhere”. It’s that “somewhere” that is a legal gray area for us, and for certain clients. For example; let’s say we’re working on a project for Microsoft, but are storing documents and files on Google servers. The two companies can (and do) collaborate, but what if they don’t on this project? And we’re storing sensitive Microsoft information with Google? It could cause legal issues if a dispute ever came up. This is the primary reason why we choose to self-host the vast majority of our infrastructure. The services we self-host include a Git server, bug tracker, wiki, file syncing server, and a custom built timetracker. Having a local server host all these services allows us to be extremely agile in development and with our workflows.

Continue reading →

Better Typography for Any Web Project

Using the SCSS Baseline Type Utility

Typographers and type enthusiasts will attest that aligning a typeface to its baseline grid is an essential part of any text-heavy design. Maintaining a consistent vertical rhythm is an important part in the creation of beautiful typography and layouts. This is accomplished easily in programs such as Adobe InDesign. However until now, I have yet to find a tool that easily accomplishes this with web type, while remaining flexible to the individual needs of a project.

Continue reading →

Automation in Your Daily Workflow

Automation saves you time, your company money, and your employee’s sanity. At gskinner, we have a long history of building workflow tools to aid with anything from creating a simple button in Flash, to managing the build process for entire web apps or JavaScript libraries like CreateJS. Automation doesn’t need to be complicated. Some of my own tools only have a few lines of code, but those few lines can take hours off any project. For large scale projects spending hours or even days building an automation tool can have the same impact as a small tool. I generally start with a small scope (no more then a few hours) and see if what I’m building is a) Useful and b) Useable. If it doesn’t meet both of those criteria then I can re-evaluate my approach without burning too much time.

Continue reading →

A Mental Model for Media Queries

Handling layout changes across a broad landscape of devices and browsers typically involves the use of media queries, which enable layouts to bend and flex based on their viewing environment.

Most queries I see are built around the concept of width:

@media screen and (max-width: 640px) {
    body { background-color: blue; }
}

I love the simplicity of this methodology. It’s straightforward, easy to implement, and it works with content that comprises most websites. But what about web-based apps, the website’s younger cousin? Is this model the most effective media query strategy that can help us with the unique challenges of designing web applications? Continue reading →

Check. Check. Is this thing on?

It’s been nearly a full year since I last blogged. (Do people still blog? Maybe I should snapchat this instead?) I used to blog a lot, but life became busier, posts became more infrequent, and eventually it stopped being a habit and became a chore.

That doesn’t mean I don’t have a lot to say. It’s just that the last few years have been a crazy and exciting ride, and I haven’t had a lot of time to dedicate to writing posts.

Five years ago, Flash as a platform died. For a lot of shops, the migration was gradual. Not for us. Our clients come to us for cutting-edge tech, and almost overnight, Flash didn’t meet their criteria. We went from almost 100% Flash work, to nearly 0% in less than a year.
Continue reading →

RegExr v2: Build, Test, & Learn RegEx

RegExr is exactly six years old today. Built in Flex and AS3, it was a largely accidental outcome of exploring a few technical concepts I was interested in at the time (tokenizers/lexers, advanced text interactions, regular expressions).

RegExr v1 circa 2008

I thought the end result might be useful to others struggling to learn or work with RegEx, so I released it online. Its popularity took me by surprise, with around 10M hits and 150K patterns saved to date. This is despite being essentially abandoned since 2008.

I’m happy to announce that the neglect is finally ending, with today’s release of RegExr v2. Rebuilt from scratch in HTML/JS, and (hopefully) improved in every way. I’d like to believe that RegExr v2 is the best way to learn, build and test RegEx online today.

RegExr v2

Key features:

  • clean, modern design
  • video tutorial
  • expression syntax coloring
  • underlines expression errors in red
  • contextual help for all regex tokens and errors on rollover
  • updates matches as you type
  • support for testing substitution/replace
  • full reference of all JS RegEx tokens, with loadable examples
  • searchable database of community submitted patterns
  • drag and drop text files to load their content
  • save and share patterns with others via direct links
  • undo/redo
     

I also dug through over 240 comments on the original blog post, and implemented a ton of suggestions:

  • larger monospaced text and support for browser zoom (my eyes are older, my monitors are larger, and 10pt font just doesn’t seem so cool now)
  • vastly improved tokenizer, that is (hopefully) 100% accurate to JS RegExp standards
  • improved documentation, now with examples
  • support for pasting full expressions (including flags)
  • save includes your sample and substitution text
     

Now that it’s released, we’re going to try not to let it stagnate again. The first order of business is to clean up the code and commit it to the RegExr GitHub repo, so that it becomes a living project with community support.

We’re also going to try to clean up the existing community patterns – likely scrubbing any that now have errors (due to differences in AS3 and JS for example).

Following that, I’m going to be taking a look at different options for wrapping it in a desktop installer, so you can run it offline and save your favourites locally (input on this is welcome). I’d also love to make it usable on mobile devices, not because I think there’s a huge demand for testing regular expressions on mobile phones, but as a challenge to see if it can be done well – I think the “click to insert” feature of the reference library could work really well.

I’m also planning to write up a blog post exploring some of the technical challenges and decisions that we made while building this.

If you enjoy using RegExr, you can help out by tweeting, facebooking, gPlussing, blogging, or otherwise sharing/linking to it so others can find it. Version 1 disappeared almost completely from Google a few months ago (I believe they downgraded pages with only Flash content), and I’d really like it to recover in the rankings.

As always, I’d love to hear what you think of the new version of RegExr, and any feedback on how to make it even better.

Spelling Plus Library Open Sourced

We would like to let everyone know that Spelling Plus Library (aka SPL), our Flash/Flex spell-checking library has been released open source.

We first released SPL as a commercial component over 6 years ago, with a major overhaul to support the Text Layout Framework almost 4 years later. It was always our goal to provide a high quality, performant, and feature rich product, backed by great support. As the requirements of the industry have shifted, and the demand for Flash components has dropped, we felt it was a great time to release it to the community at large.

The entire SPL repository is now available under an MIT license, meaning it is free to use for everyone, including on commercial projects. This includes:

  • The SPL source code. Word list loader and parser, text highlighter, and spelling suggestion and replacement utilities
  • The Flex-based AIR application that helps create, modify, and export word lists
  • All examples, spikes we used for testing, and some internal demos
  • The build process to export Flash and Flex SWCs
  • Generated word lists using custom compression for US and UK English, along with tested word lists for Spanish, French, and German.

 
You can check out the GitHub repository to get everything. Feel free to submit pull requests. Please note that we are no longer supporting SPL, so any questions or issues reported may not get immediate responses.

Thanks to our supporters over the years, we are super proud of what SPL has accomplished, and hope that it will continue to see life moving forward.

Pirates Love Daisies HTML5 Game Launches!

I’m extremely excited to announce the launch of one of our recent projects: Pirates Love Daisies!

Microsoft approached us a few months ago and asked to work with us to build a best of breed tower defense game in Javascript and HTML5. I was a bit hesitant at first – it’s been quite awhile since I worked with JS and HTML in any great depth, and most of my memories were of fighting browser incompatibilities and cursing the lack of decent developer tools. However, we did some quick code spikes to get a feel for what was possible and decided that this was a great opportunity to gain some applied experience with a new technology while working on a fun project.

Concept

We teamed up with local illustration group Pulp Studios and started brainstorming ideas for the theme of the game. Fairly early on we latched on to the idea of pirates (I mean really, who doesn’t like pirates!), but we needed something for them to defend. We considered going with the typical tower defense model, and simply have the user prevent creeps (enemies) from getting from point A to point B, but I’ve never liked that narrative. What exactly is at point B that’s so important?

We decided that the creeps were out to steal something valuable from the pirates, but we weren’t sure what that should be. Gold was an obvious choice, but it was boring, and it made more sense as the currency for purchasing units and upgrades. Then it hit us… Daisies!

Pirates Love Daisies, Art by Pulp Studios

Why daisies? Because Pirates Love Daisies, of course. The fact that daisies are visually iconic, seemed to be appropriately fun and quirky, and would work well aesthetically may have factored in as well.

With the illustrators working on sketches, we got down to writing code.

Coding

We started out by building core game logic, and a simple library to manage canvas state. We profiled performance, then revisited some of our initial ideas to work with the limitations we found.

Overall, we found working with JS to be a lot easier than we expected. Picking up the language was a breeze, and we were able to apply the processes and approaches we’ve developed from years of working on interactive content with Flash. For me, working with Javascript again actually had a certain pleasant nostalgia to it, as it recalled the days working with ActionScript 1. There is a certain amount of fun and freedom afforded by a dynamic scripting language, though the lack of strict typing, compiler time errors, and language-level support for inheritance (ie. no super keyword) were frustrating but manageable.

We also ran into some browser incompatibilities, though far fewer than we initially feared. The worst of them revolved around audio. It seems that every browser has its own set of irritating quirks related to dynamic audio that we had to stumble our way through. We wound up building an audio manager to resolve these issues that we may clean up and share in the future.

All round, things went fairly smoothly from a coding perspective. We ran into some challenges and had to make some compromises, but we surmounted all the major obstacles and learned a ton.

Pirates Love Daisies

Performance

Overall, I was really impressed by the performance we were able to obtain. Code execution speeds are fairly similar to AS3 (which is impressive if you consider all the extra type data the AS3 JIT has to work with), and graphics performance is, for the most part, reasonable.

IE9 was the big stand out on graphics performance – its GPU-enabled engine is smoking fast, especially with large bitmaps. Interestingly, we found that iOS had terrible performance (when it worked at all) – something like 4-5x slower than Android on comparable hardware.

One other thing we found that’s worth noting is that drop shadows are ridiculously slow in canvas. A few small drop shadows rendered to canvas could drop our framerate in half.

HTML5 Features

HTML5 is actually a collection of standards at different levels of completion, so while it’s easy to refer to this as an HTML5 game, it really just leverages a few of the new features that are included under that umbrella.

Specifically, we used canvas for drawing the game board (terrain, units, creeps, effects, etc), local storage to save local scores, the audio element for all of the sound, and embedded fonts throughout.

Tools and Libraries

One of the challenges we encountered was the lack of good tools. For JS development, we tried a few different options but ultimately settled on Dreamweaver – it’s not a fantastic JS code editor, but it’s decent, cross-platform, and everyone in the office already had it.

The game art was created in Illustrator, then animated in Flash Pro. We built a custom AIR tool for exporting SWF animations to a sprite sheet (a grid of animation frames) which helped out tremendously. We also built a super simple AIR app that preps our JS files, runs level 1 of the google compiler on them, and then runs the result through the YUI compressor. We’re hoping to release both of these apps in the new year, once we have a chance to clean them up.

For testing and debugging, we used the debug tools in every major browser. Roughly half our developers were on Macs using Safari and Chrome, and the other half were using Windows with IE9 and Firefox. This let us spot cross browser issues early on. We also found different problems were more easily solved with different browser’s dev/debug tools.

In our code, we leveraged JQuery, JSON, and a new library we developed called Easel. The Easel library provides a hierarchical display list, similar to the one in AS3, that makes it much easier to work with the canvas element. We released the alpha version of Easel today at EaselJS.com under the MIT license. It should make it much easier for both Flash and JS developers to get started using canvas.

Gameplay

When building a game it’s essential that you don’t underestimate the huge amount of time required to balance gameplay. Our level designer built spreadsheets, graphs, and formula to help model the characteristics of the units, creeps, and maps, but it took hundreds of plays through the game (a sacrifice, to be sure) to get the balance right.

We tried hard to make the game very approachable, with a short tutorial, and easy start, but also layer lots of strategy into it for the more experienced gamer. Our scoring system involves lots of trade-offs. As an example, you get points for defeating creeps and ending waves faster, but you also get points each wave for hoarding gold. You have to decide how to balance these two opposed reward systems.

It was only when, having opened PLD to test some specific feature, I caught myself in my third game trying to beat another developer’s high score (and getting yelled at by my wonderfully patient wife) that I really started to feel like everything was coming together. If you can completely lose track of time while playing your own game, after being immersed in planning, designing, and coding it for a couple months, I think that’s probably a good sign… though it can have a negative impact on office productivity.

PLD-game

Overall

Microsoft was a fantastic client. After suggesting the tower defense genre, they trusted us with all the technical and creative details to make the project a success, while offering great feedback throughout. They put a lot of faith in a company that’s really not known for Javascript or game development, and I’d like to believe it was well placed.

I never thought I’d say this, but Internet Explorer 9 actually looks to be a great browser. It has impressive performance, and seems to be very standards compliant. I would definitely recommend checking it out, you might be surprised.

Everyone involved with the project had a huge amount of fun building it out. We had a great time brainstorming ideas, coming up with ways to tweak gameplay, and spending (way too much) time play testing. We’d love to hear what you think of the game in the comments below.