Thanks again Avi, that was great stuff.

Meeting time and date: 7pm (Arizona Time), Nov 15th, 2012

We’re really excited about this one. I remember when I first saw Meteor.js. I think @0lu, @rxgx or @phil_renaud sent it to me. It was probably the day it launched. Srsly amazeballs. The only thing that kept me from really falling in love with it was the lack of security. That’s all changed now…

Fast forward to Oct 17th (or maybe at this point I should say rewind). This blog post is dropped. It took me a second to find the link to the screencast. When I did, it was like an early Halloween treat. So much sweet, sweet sugar. After talking with everyone, we thought it would be great to try and get someone from the Meteor team to do a TagSoup.

After a few emails, Avital Oliver, JS Engineer at Meteor, agreed. 2 Legit (hay hay)!

With all that said, here’s the deets:
When: Nov 15th, 2012 7pm-9pm
Where: Melt Media

Same format as the last meeting with the TypeScript team. Totally open. Ask anything, be prepared, and most important… Have Fun!

Hopefully, it will be a lot like:

Update from Rob

“I’m not sure if this has built-in support for the MVC bundling or not, but this is what I was talking about tonight, with improved TypeScript support within Visual Studio.”

Meeting time and date: 7pm (Arizona Time), Oct 18th, 2012

Recently Microsoft announced a programming language “that solves a very specific problem – getting JavaScript development to scale.”

Meet TypeScript

There was a lot of chatter on the social outlets. Some positive vibes, some haters and some indifferent. Let’s face it though, TS is new and we all have questions. So TagSoup is lucky enough to have a couple TypeScript team members come and chat with us (it’s going to be google hangout this time) about their baby. Rob Paveza (Program Manager on the Chakra Team) and Luke Hoban (Principal Program Manager on Chakra and TC39 Committee) from Microsoft are going to be spending some time with us. This isn’t going to be a “Presentation” but more of a “Round Table” talk with Rob and Luke. So bring your questions, thoughts and suggestions.

TypeScript caused a huge wave in the JS ocean, but, you don’t have to limit your questions for Rob and Luke to just “TypeScript”. These guys are great developers and have some powerful thoughts and insight on topics like JavaScipt in general, GRIDS, MV*, Yeoman etc. The idea of these round table discussions is to “knowledge share”, learn from each other and make you think in ways that make your brain hurt.

Our friends over at Melt Media have stepped up to the plate and offered their building for our meeting location. We will holding the event on Oct 18th, 7pm at Melt Media. We will also be trying our luck with a google hangout broadcast. Fun stuff. We’re counting on everyone to create a great discussion and ask as many questions as you’d like.

Come on down to Cartel Coffee in Tempe, drink some coffee and write some code. We will be there Thursday night (7/19) from 7pm until close.

Some of our friends from 8byte8 will be in town and hanging out. Come say hi and show them some AZ love.

See you then!

Tony

Come on down to Cartel Coffee in Tempe, drink some coffee and write some code. We will be there tonight from 7pm until close.

If you’re interested in BackBone.js, we’re looking for more people to join the training class put on by Derek Bailey from WatchMeCode. Come ask me for the deets.

See you tonight!

Tony

Callisto.fm - Media analytics

Location: Boulder, CO
Need: Node.js developer
Salary: Unknown
Who to contact: Kristi Mark - kmark@symbolonpartners.com - 303-736-9839

Notes: They just finished Techstars Cloud, and 2.5m angel funding and are working on series A. They’re doing some pretty cool stuff with media analytics (Youtube, Vimeo, podcasts, basically anything you stream online) and are working on contracts with media providers. @msitarzewski seemed pretty cool too

360 Cloud Solutions - NetSuite consulting

Location: Scottsdale, AZ
Need: Javascript developer, frontend and backend (using some Tomcat stuff)
Salary: About 70k
Who to contact: Rob Jones - rob.jones@pagestaff.com - 602-273-7100

Notes: They customize NetSuite installs for clients, using Javascript end to end. They develop in Eclipse and it sounded like that’s the only option for what they do. I’m told it’s a really cool place to work, but didn’t get a chance to meet most of the developers or see what it’s like. It’s ultra casual though, shorts and sandals.

Village Voice

A print media company that owns a handful of publications, including Arizona New Times. They’re looking for a PHP developer to help maintain and upgrade their custom CMS (based on CakePHP) as well as some front-end work. I met the lead developer and CIO, both were really cool guys, and their office was pretty nice. They also have a Mobile department and they’ve acquired some Ruby properties that they’re maintaining and bringing in house, so knowledge there is a bonus.

Location: Phoenix, AZ (12th and Jefferson)
Salary: ~65k

Contact: Chris Swinton - 480-342-9900 (recruiter for AZ Tech Finders, really legit guy though, trust me)

Liquid Web

A hosting company based out of Michigan but with an office up in Scottsdale, has an opening for a front-end javascript developer. The position involves supporting and updating tools used for internal use. Their backend is all Perl, I’ve met the whole team over there, and they’re pretty cool guys.

Location: Scottsdale, AZ
Salary: unknown

Follow up on Callisto.fm, they are no longer hiring right now. I still thought it was worth listing.

-Joe

I’m sorry I didn’t get to see all your lovely faces last week. I was getting my javascript learn on, in Austin, TX. Tomorrow’s meeting (June 21) marks the 4th weekly TagSoup gathering… in a row. OMG . That’s a full month. We should TOTALLY celebrate, am I right? So come on down to Cartel Coffee in Tempe and we can drink some delish coffee and write some code, build X and talk about Y.

Also, some friends are putting together a BackBone.js training class. They have been in contact with Derek Bailey, from watchmecode.net, and have scheduled him to fly out in mid August for a 2 day class. There are a few slots left, and if you’re interested, please get a hold of me and I can give you all the details.

See you tomorrow!

Tony

May 31st’s meeting will be a great time to meet with your teams (from April’s meeting) and hopefully wrap up your projects. I know I still have a lot of work to do.

There will be some more announcements made later this week. Hope you all enjoy this news.

First, first…

New venue. We’re trying to hop around all over town and the dudes at Melt Media were swell enough to offer up their place for this weeks meeting. Where’s Melt Media located? Right in the middle of downtown Tempe.

Second, first…

Coding fun! We wanted to try something different this time. Less words, more code. This next meeting, we will be breaking up into teams and work on a project together. What project? That’s for you and your team to decide. What technology? You guys decide. There’s no set rules, really. Just have fun. Team sizes wlll be between 3-5 people. We all know that you learn the most from acutally getting your hands dir-tay. Everyone can continue to collaborate until the next meeting (in a bout a month) and then show off what they’ve created. For this meeting, we will need all disciplines of web development involved. Designers, UX engineers, developers, unicorns etc.

Third, first…

TagSoup is going to Vegas. #VegasTech is growing huge. Since they’re so close, we figured we go check out their Vegas Jelly meetup and hang with some of our friends there. Are you interested in going? Let us know. We will be renting a 12 person van and driving out. We will be discussing the trek in more detail at the meeting.

TTFN - “Did you take a bath in rainbows and cupcakes?”

Tenative dates, if you’re interested, let us know what works for you:
April 26th
May 1st
May 8th

The length of the stay depends on personal budgets and alloted time. We’re really excited about the trip. Let’s make it happen.

Another tweet came in asking about drinking in AZ, specifically beer. Then a couple more came over. So here’s another list. Again, if anyone has suggestions, leave a comment, submit a pull request, or msg me. I will get it added. Let’s get started with the drinkys.

Local Breweries

• Four Peaks

  A short ride from the hotel, but this is one of the state’s most popular micro breweries. Not only do they have great beer, they also have great food. It’s in Tempe, near ASU, so it can get pretty busy with college kids some night. Parking always sucks. If you park in the back, don’t park by neighboring shops. They get pissy.
  Directions from the Hotel

• San Tan Brewery

  Was here for the first time yesterday, talking ideas for !conf. Great place, I had the Sex Panther beer (current special). Double stout deliciousness. To accompany the brew? Porck nachos. It’s a bit far from the hotel, but if you have the means, I highly recommend it.
  Directions from the Hotel

• Papago Brewing

  Closest to the hotel. I’ve never been, but after reading up and asking friends, I hear good things.
  Directions from the Hotel

• SunUp Brewing

  Never been, thought I would include it. It’s in a cool part of Phoenix though. Sorry, that’s all I got.
  Directions from the Hotel

• Pinnacle Peak Patio

  Farthest from the hotel. Never been, thought I would include it. Again, sorry, that’s all I got.
  Directions from the Hotel

• Sleepy Dog Brewery

  Recommended by friends, I’ve never been. We’ve all heard good things though. It’s a short ride to the Tempe location.
  Directions from the Hotel

• Rock Bottom

  More of a corporate franchise spot. I haven’t been in a while, but I remember good food. I don’t remember much of the beer. That doesn’t mean a whole lot though, if I drink enough, I don’t remember anything.
  Directions from the Hotel

Bars

• The Yardhouse

  Very close to the hotel, so if you’re thirsty, here’s a nice spot. SOOOO many beers. Check out their menu
  Directions from the Hotel

• Dos Gringos

  A big party spot for Scottsdale. A fun, Mexico-ish, themed bar. Two stories, lots of bars, and it’s located right in the middle of downtown Scottsdale. There’s a ton within walking distance from here. Slices Pizza down the street is pretty popular for after drinking food.
  Directions from the Hotel

• Salty Senorita

  Good mexican food. Not really a treu bar though. More of a restaurant with a good bar in it.
  Directions from the Hotel

• Saddle Ranch

  Reminds me a lot of Dos Gringos, but more restauranty. Steaks, Bulls and Rock and Roll is their motto.
  Directions from the Hotel

• Kona Grill

  Sushi restaurant with a good bar. It’s in the “hoity-toity” mall in Scottsdale. Usually on the weekends you can sit on the patio and watch the Ferraris or other exotics roll in. Bottom line, Sushi and booze. Works for me.
  Directions from the Hotel

• The Coach House

  I haven’t been. A friend said to check it out.
  Directions from the Hotel

• TT Roadhouse

  Divey, but fun. For a while, it was THE punk rock bar. They had a pretty epic juke box. This is the spot if you want some PBR. And yes, their webpage is a MySpace page.
  Directions from the Hotel

• Rusty Spur Saloon

  Haven’t been, need to go. Looks pretty rad.
  Directions from the Hotel

• Casey Moore’s

  One of my favorite bars. For those who have been to the Gingerman in Austin, I swear they’re like sister bars. Outside in AZ during April is fanatastic. Have a bowl of Clam Chowda and a beer. Nom Nom. Located in Tempe
  Directions from the Hotel

• Yucca Tap Room

  Dive bar-ish. Local music, lots of beer, wood paneling… just a fun bar to hang out. Located in Tempe
  Directions from the Hotel

Scottsdale - near the FireSky resort

• Sugar Bowl

  Been around for 50+ years. Fun, soda shop type place. Totally kitschy. Good shakes and banana splits for sure.
  Directions from the Hotel

• Over Easy

  About 10 minutes in a car, from the hotel. Awesome breakfast. Waffle Dogs? Srsly!!! Gotta have them.
  Directions from the Hotel

• Julio Toos

  Just want some decent, cheap tacos? Here you go.
  Directions from the Hotel

• City Hall

  Super high end dinner resturant. Has a high price tag, but hey you only live once right? A fun side note, they will place your napkins in your lap for you. High-Falootin’! Pretzel rolls with my steak please, yum.
  Directions for the Hotel

• Cowyboy Caio

  Should be a must visit for @cowboy. Good food, a bit on the pricier side for a dinner, but it’s worth it.
  Directions from the Hotel

• FnB

  Right near Cowboy Caio! Great wine list. A bit pricey, but again, worth it.
  Directions from the Hotel

• Citizen Public House

  One of the favs reccomended by @rxgx. mmmm GRITS + GUMBO for me.
  Directions from the Hotel

• Fogo de Chao

  I haven’t been here personally, but friends have. Basic premise, you sit down and people bring you as much food as your stomach can handle. When it was described to me, I instantly thought of Eric Cartman raising his flag at Casa Bonita asking for more Sopapillas please.
  Directions from the Hotel

• Olive and Ivy

  
  Directions from the Hotel

• Old Town Tortilla Factory

  Never been, was told to list it. Maybe Nick can give us a small run down. FORK, EDIT, COMMIT, PULL REQUEST!!!
  Directions from the Hotel

• Old Town Whiskey

  I’m a whiskey fan, and this is one of the best Whiskey bars in PHX. I swear I’ve seen Tuco here, or maybe that was a dream.
  Directions from the Hotel

• Don and Charlie’s

  Old school. Fun. Some of the best ribs in town. Great burgers. Not too pricey. Also, my family was kicked out after causing a ruckus about their “Everyone has to be present in order to be seated” rule. Thanks mom, now I’m forever embarrased about going back. Make sure you’re party is there when you want to be seated! There can be long waits.
  Directions from the Hotel

A bit out of the way, but SURELY worth it.

• Joe’s Real BBQ

  It’s far, it’s in Gilbert Wahhhhh. You can stay at my house for the night if you end up crashing into a food coma. Just get there. I don’t care how, just do it. Plus some other great places close by.
  Directions from the Hotel

• Liberty Market

  Another “Joe” creation. Simply fantastic. Located across the street from Joe’s BBQ and a Postinos. Make an afternoon of it.
  Directions from the Hotel

• Joe’s Farm Grill

  A personal favorite… from the same Joe at Joe’s Real BBQ. This man can do no wrong. If you’re out in my neck of the woods (Gilbert) make it happen.
  Directions from the Hotel

• Yucca Tap Room

  Dive bar-ish. Local music, lots of beer, wood paneling… just a fun bar to hang out.
  Directions from the Hotel

• Casey Moore’s

  One of my favorite bars. For those who have been to the Gingerman in Austin, I swear they’re like sister bars. Outside in AZ during April is fanatastic. Have a bowl of Clam Chowda and a beer. Nom Nom
  Directions from the Hotel

• Mrs White’s Soul Food

  Please, take the time to get here, and take the time to eat here (usually a long process). Insanely great soul food.
  Directions from the Hotel

• America’s Taco Shop

  Great Carne Asada style Tacos. I always get the Vampiros or Burrito Bombs. Word.
  Directions from the Hotel

• Postinos

  Wine Bar. Not too far from the resort either.
  Directions from the Hotel

@rwaldron showed off his node/arduino goodies. He’s starting building on top of a previously existing library, and extending the hell out of it. I can’t wait to start messing with this one:duino. We also have the video recording from our Skype call. The video capture is a bit choppy, but the audio is yummy. So if you don’t like the choppy, just listen. It’s well worth it.

Special shout outs to Taco, Alli, BumbleBee and “them apples”.

@divya was next up and she covered a bunch of topics. From HTML5 boilerplate, the new developer workflow, build scripts, webfonts, css preprocessors, hawt pink and more. The fun new toy I will be playing with after hearing @divya talk about… css Exclusions. mmmmhmmmmm

After the video chats, the group got into a discussion this piratepad list. Looks like we have found some spots for the rumgr folks! I will be writing a blog post explaining why the 30 Day Challenge never finished.

!conf has the last JS ticket to give away. How do you win? Well, come to the conference dressed in your best cowboy/cowgirl outfit. The best dressed gets it. Why did we decide to go this route? Well, everyone can easily participate, it adds a ton of fun to the conference, and who doesn’t love sharply dressed cowfolk? JSConf party tickets have gone on sale now. I hear the parties are amazing. Come hang with us.

!conf still needs some volunteers. If you’re interested, send @PhxTagSoup or @notconf a msg. Please consider it if you have spare time. It’s going to be a fun one.

TagSoup needs help too. Whether it’s design, writing, code, hairstyling etc… we can use your help. I will leave it at that.

Thanks so much to everyone that came. NACHOS!!!

Oh hai.

It’s been a while since we’ve had out last meetup but we’re back in full gear. The holiday break was nice and allowed us to plan some big things.

First you’ll notice a new venue. Unicon has been nice enough to allow us to use their space for the evening. We want to start rotating where the meeting is held each month. So if you have a spot for us, let us know. We would love to have TagSoup at your place.

If you plan on coming, please head over to out MeetUp page and RSVP (it helps us order the right amount of food). Unicon, located in Gilbert, might be a bit of a drive for you. It will be worth it. Here’s why:

Rick Waldron (@rwaldron) is going talk about surprises. And how to present a surprise to a group of developers. (all this means is I asked Rick to have fun and talk about whatever he wants). Rick currently works at Bocoup as a JavaScript Punk Rocker.

Divya Manian (@divya). Divya points and laughs. She gossips about CSS & HTML. Divya currently works at Opera as a Web Opener. She will be crafting words, from her mouth that shall intrigue and captive the youth. (again, when she asked what she should talk about, I just said, have fun and do whatever you want.)

Ryan Gasparini (@rxgx) and Tony Camp (@tonyjcamp) are going talk about pseudo friends, pseudo elements, pseudo fun? (Depending on time)

• Like always, free nom noms
• Free drinkies
• NotConf announcements
• Crew Cuts

Hope to see you all there:

http://www.google.com/maps?q=1760+E+Pecos+R…

Very elegant men will be there, including:

TXJS 2011 A1 - Douglas Crockford - JavaScript Programming Style and Your Brain from pixilated ideas on Vimeo.

I can’t think of anything more uniformly despised by everyone in my career than process. Just mentioning the word generally causes a visible reaction. That isn’t a good thing. A good process should be your best friend that makes everything else in your life easier. I know why everyone reacts that way. We’ve all worked somewhere with a rigid process whose endless meetings and documents detract more than they add. That doesn’t mean process itself is bad, just that those processes are.

A process doesn’t have to be rigid. It doesn’t even have to cover development lifecycle if you don’t want it to. If you notice a recurring problem, implement a rule to solve it. Say, for example, you are regularly deploying sites and the links don’t function properly. This is clearly a problem, and bad for you. Now we identify what caused that problem. In this example it was the page was never tested in IE7, and some of the fancy modern code doesn’t work there. How was that missed? We never identified what browsers the client expected the site to function properly in. So we now have the rule, “Identify all required support configurations from client prior to the start of development.” Congratulations, you have a process. It’s that simple. There is no one process that will solve every organization’s problems. Every company is going to have to tailor their own process. The assumption that adopting a predefined process will work is a common mistake. It’s an understandable one to make too. The entire idea of process is that it should make your life easier. What is easier than following a define set of steps? However, just like you can’t copy and paste the same code from one project to the next, you can’t just copy someone’s process. Their needs aren’t your needs. So identify those needs. Does management want greater visibility? Are project managers asking you to add, “just one small thing,” to the sprint? Our job as developers is to solve problems. There is no reason we can’t solve our own.

Before I end this, I will admit I’m biased towards process. I’m a QA, without process my life is very hectic. QA thrives in controlled environments. If I’m given reliable inputs (Requirements Docs, Support Configurations, User Stories, etc.), I can’t guarantee the outputs of my testing. I can assure you, without process requirements that those things exist, they won’t. This leads incomplete testing, and thus quality problems. No one likes those. So help us help you better, create a process

Hey everyone, it’s me again. I’m sober this time, don’t worry. Well actually I’m drunk on a crazy idea that I had last weekend. I’ve always been really into the NCAA Tournament. I once took up an entire wall in my kitchen with a giant bracket just so I could fill it in after every game. So rolling around in my head last weekend was an idea of combining the NCAA Tournament with my other love, code. I started to play around with a format to see how small (in terms of character length) I could make all my picks. This is what I came up with.

How To Get This Up and Running

1. Install node
2. Install npm
3. git clone git@gist.github.com:2028007.git gist-2028007
4. cd gist-2028007
5. npm install
6. node app.js S18541137214112424W185463721532533E191213113102112111011111MW1854113728432828FFWMWW

Explanation

The argument passed to app.js is a string containing picks for the 63 games in the NCAA Tournament (after the play-in games). The example above can be looked at as divided into five parts:

S18541137214112424 W185463721532533 E191213113102112111011111 MW1854113728432828 FFWMWW

Identifiers

Each of the first four parts are a region and the picks for that region. The last part is the picks for the Final Four. The Final Four identifier (FF) and picks must come at the end of the string. The alpha characters that start each part are the identifier for that region. The region identifier must be a key in a valid region key (by valid I mean it must exist in the data file).

Picks

The numbers for the first four regions correspond to the picks being made for that region. Each number refers to a seed that you think will win their game. The picks must be made in a top-down, left-right order when viewing the games on a bracket. This means for the first round, the games must be picked in the order: 1 v 16, 8 v 9, 5 v 12, 4 v 13, 6 v 11, 3 v 14, 7 v 10, 2 v 15. So if you wanted to pick all the higher seeded teams for the first round, your numbers would be 18546372. To complete a region, keep picking winning seeds in this order. To finish our previous example of all the higher seeded teams winning, our numbers would be 185463721432121. This might be easier to visualize if we look at the picks divided into rounds: 18546372 (first round winners) 2143 (second round winners) 12 (Sweet Sixteen winners) 1 (Elite Eight winner). Pair that with the identifier for the region and you have E185463721432121 which is a valid region.

Final Four

Once we have put our four regions together we can add the Final Four. For the Final Four ‘region’, you will pick the winners not be their seed but by the identifier of the region that they originally came out of. Make sure you know which regions are playing each other as well. In the example of the 2012 NCAA tournament, the Final Four was S v W and E v SW. So appropriate Final Four picks would be WMWW since we are first picking the winners of the two Final Four matchups and the picking the winner of the final game. Pair that with the Final Four identifier to get FFWSEW.

Output

If your picks are valid, the output should display in an object contain all the regions, rounds and games.

If there are any errors, those will be displayed instead.

Why?

I wanted a codified format to fit all my picks for the NCAA Tournament into as little characters as possible. I believe that even if all region identifiers were two characters and you picked the higher seed in every game, you could fit your picks in 132 characters (enough to fit in a tweet!). Obviously this could be shortened further by adding additional conventions (such as region order, etc.) but I believe this to be a good mix of brevity and flexibility.

This logic is the basis of TweetYourBracket.com (GitHub repo). The idea is that there will be a Twitter watcher which will watch for a specific hashtag and then the bracket will be parsed from the tweet and saved.

Not But Seriously, Why?

Because it was fun. Not let’s show off a few code samples to prove my point.

Note: all the code here is pulled from the TweetYourBracket GitHub repo and slightly modified for example purposes. I also made the gist I referenced above as an easier way to play with the majority of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// Takes a string of the picks for a region and validates them
// Return an array of picks if valid or false if invalid
var picksToArray = function(picks, regionName) {

  var regexp,
      replacement = '',
      regExpStr = '',
      seeds = [1, 16, 8, 9, 5, 12, 4, 13, 6, 11, 3, 14, 7, 10, 2, 15],
      seedLength = seeds.length,
      regExpJoiner = function(arr) {
        return '(' + arr.join('|') + '|X)';
      },
      backref = function(i) {
        return regExpJoiner.call(this, _.map(_.range(i, i+2), function(n) { return "\\"+n; }));
      };

  // Create capture groups for the first round matchups of the region
  // Since we know what order the games should be selected in we can build a regex
  // by splitting the seeds array into groups of two
  // The regex will look like this:
  // (1|16|X)(8|9|X)(5|12|X)(4|13|X)(6|11|X)(3|14|X)(7|10|X)(2|15|X)
  // The X is the character used for a game that hasnt been picked yet
  for (var i = 0; i < seedLength; i += 2) {
    regExpStr += regExpJoiner.call(this, seeds.slice(i, i+2));
  }

  // Create capture groups using back references for the capture groups above
  // Since we just created 8 capture groups above and we know that during each subsequent round
  // the number of teams will be cut in half, we can use another loop to add to the regex.
  // We will use glorious back references to ensure that each later match only contains
  // teams that would have had the possibility of advancing to that game.
  // We will add this to our regex above:
  // (\1|\2|X)(\3|\4|X)(\5|\6|X)(\7|\8|X)(\9|\10|X)(\11|\12|X)(\13|\14|X)
  for (i = 1; i < seedLength - 2; i += 2) {
    regExpStr += backref.call(this, i);
  }

  regexp = new RegExp(regExpStr);
  replacement = _.map(_.range(1, seedLength), function(num) { return '$'+num; }).join();

  // Here we will test if our picks match the regex and if they do
  // we will use the 15 capture groups we created above to split
  // the picks into an array
  if (regexp.test(picks)) {
    return picks.replace(regexp, replacement).split(',');
  } else {
    this.logError(regionName, 'was unable to parse the picks');
    return false;
  }
};

I had fun writing to the code above. The purpose of is to take a string of picks and validate them with a regex to ensure that they meet the necessary requirements. It gets a little inception-y as you are looping through and created capture groups in the regex that are using back references to capture groups you just created in the iteration before.

Now For the Client Side

The code above is all used on the server-side in my application. I tried to leave as much up to server as I could, because I already had the code there and didn’t want to deal with bugs bringing it to the browser. So what I did on my client-side bracket was to save the status of each pick into the URL hash. That way, the entire state of the bracket is in the URL at all times. It’s not perfect, because I didn’t add a watcher for the hash that will change picks if you change the URL. But what it does, is if you load the page with a bracket in the url hash, it will send that hash to the server and return the HTML if the bracket was valid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

function stringBuilder() {
  var str = "";

  // I'm going through each region's pickable games
  // and taking either the team's region (for the Final Four)
  // or the team's seed (if it's a regular region)
  // and in the end saving the string to window.location.hash
  $('.region').each(function() {

    var $reg = $(this),
        regId = $reg.attr('id').replace('_region', '');

    str += regId;

    $(this).find('.winners '+pickable).each(function() {
      var $this = $(this),
          text = $.trim($this.text());

      if (text) {
        text = (regId === 'FF') ? $this.data('fromRegion') : text.match(/[0-9]+/)[0];
      } else {
        text = 'X';
      }

      str += text;
    });
  });
  window.location.hash = str;
}

// This is called on dom ready
if (window.location.hash) {
  $.ajax({
    // I have server side routes set up with flatiron to render this with handlebars
    url: '/validate/' + window.location.hash.replace('#', ''),
    success: function(data) {
      $content.find('#bracket_holder').html($(data).html());
    }
  });
}

Rendering It All

The last thing I’m going to show you is the server-side JavaScript function that adds the necessary content to our tournament object and the Handlebars template that renders it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

// Take validated tournament and add necessary content so it is ready for Handlebars
var addTeamContent = function(validatedPicks, editable) {

  // These are the master regions
  var ncaaRegions = NCAA.regions;

  _.each(validatedPicks.regions, function(region, regionIndex) {

    // These are the teams that played in this region
    var regionTeams = (typeof ncaaRegions[region.id] !== 'undefined') ? ncaaRegions[region.id].teams : [];

    _.each(region.rounds, function(round, roundIndex) {

      // Triple nested loops FTW! ;)
      _.each(round.games, function(game, gameIndex) {

        if (typeof round.teams === 'undefined') round.teams = [];

        var team = {
              seed: '',
              name: ''
            },
            isTop = (gameIndex % 2 === 0),
            lastRound = (roundIndex === region.rounds.length-1),
            classes = ['top', 'bottom'];

        if (region.id !== this.finalFourRegionName) {

          team.seed = parseInt(game, 10);
          team.name = regionTeams[team.seed - 1];
          team.fromRegion = region.id;

        } else {

          // These are selected winners in the final four
          var fromRegion = _.find(validatedPicks.regions, function(reg) { return reg.id === game; });

          if (fromRegion) {
            var finalFourTeam = _.first(_.last(fromRegion.rounds).teams);
            team.seed = finalFourTeam.seed;
            team.name = finalFourTeam.name;
            team.fromRegion = game;
          }
        }

        round.teams[gameIndex] = _.extend(team, {
          editable: editable,
          startMatchup: isTop,
          endMatchup: !isTop,
          classes: (lastRound) ? '' : classes[~~!isTop]
        });

      }, this);
    }, this);
  }, this);

  return validatedPicks;
};

Check out the Handlebars template on GitHub to see how this was all rendered. Unfortunately I couldn’t figure out how to embed Handlebars code with Octopress.

In The End

I had a small dream of making this a production ready app in time for Selection Sunday (which was last Sunday). Obviously that didn’t work out but TweetYourBracket.com was an extremely fun exercise even if it didn’t get anywhere close to ready for prime time use. Some things I wanted to do with it:

• Make it not look like crap (using Bootstrap)
• Add some cooler interactions during the bracket (drag ‘n’ drop, keyboard shortcuts, auto scrolling)
• Mobile ready with some media queries
• Make the Postgres DB not break when a row doesn’t exist (sounds easy, so no idea why I couldn’t get it to work)
• Better hosting (for now it’s on a free Heroku instance)
• Make it actually do what was advertised and setup the Twitter Streaming API watcher

I encourage anyone who is interested in this to take a look at the GitHub repo. I just opened it up today and would never refuse a cool pull request or issue. Hopefully it will be ready by next year :)

Developers of all types know that they have responsibilities: to clients, to employers, to code standards, and so on. We’d be doing ourselves a disservice, however, if we didn’t acknowledge our responsibility to grow into not-typically-dev roles. It goes without saying that if you fall too far in love with a particular language and don’t learn alternatives/future-friendly sibling languages, you’ll become as certainly obsolete as your beloved language one day will.

This isn’t about learning new languages - this is about learning new disciplines. And wearing more hats.

Lots of hats. Party hats.

There is probably a spectrum that runs from Designer to to Database Engineer with developers front-end and back in between. Throw in copywriters, project managers, and account executives, and you have a whole world of hats to wear. You might think some of these roles are boring, and they might say the same of you, but that’s not the point - branching into other roles makes one immune to ignorance about them. And, if you’re lucky, you’ll learn a little about what you really love to do with your career.

Front End, Back End.

If you’re used to writing Ruby, PHP, Python, or whatever backend language you’re comfortable with, then JavaScript, CSS, and HTML might seem like tricycle languages to you. On the surface, back-end languages deal more closely with data and hardware, and are open to huge levels of nuance and particular histories which developers take with them with every new project. JS isn’t all namby-pamby and CSS has its own nuances - and both have communities that are huge and accessible. Getting used to browser compatibility issues will help solve your fellow devs hours of headaches in the future, and getting accustomed to html5 will help relieve your own frustration with web objects.

If you’re a front-end guy or gal, learn what you can about the server-side - talk to back-end developers and start going to hack nights. If you have a high familiarity with JavaScript, use Node.js to catapult you into the world of server-side scripting. It’s probably a matter of time before these two disciplines are looked at in the same way, after all.

This doesn’t mean you have to wear a Beret.

Maybe you’re already designing in code. That’s great! Keep up the good work. If not, you should know that coding starts at the design level. Most web designs, in Photoshop or otherwise, have a structure inherently established, and proper use of layering and folder-structures within a document only help add to this structure.

Talk to your designers and see how they setup their grids, their layer/folder structure, and their element hierarchy. It could give you a great head-start when building out your web templates or reveal the designer’s intentions before you get too far down your path in coding the site.

Lose the Lorem Ipsum

Ditch it. If you’re building out a website with greeked text, take the time to write some sample content for the page you’re building. It will help give you an idea of what the user will experience when he/she hits your page after you launch. At this level, you’ll often realize that a page is unnecessary because the content is redundant - just because the site map specifies it should exist doesn’t give it validity. Tap into your inner Copywriter and give it a go!

Your Sunday Best

Some of the best devs I know are serious introverts. There’s no fault in this: they put on their headphones and crank out better code than I could muster. But there’s a reason for the extroversion that project managers and account executives extoll in their peers - clients love being spoken to in their own language, and they love being able to feel like they can speak to you in yours. If you comment your code (and you do. I know you do.), just expand your comments into notes that a layman could understand. Why you’re minimizing a file, the reasons behind g-zipping or calling jQuery rather than writing in core JavaScript, etc. all matter when the client is expected to ever maintain a project, or even to help explain just what they’re getting out of the deal. More than anything, working on speaking with clients will help you connect with them on what their needs really are, and quit playing telephone with their IT team or middle managers.

There are lots of hats you can wear, either in an ad agency or web firm world. Just because you’re comfortable as a developer doesn’t mean you shouldn’t get uncomfortable from time to time. Take chances and do new things!

This is one of my favorite presentations. GitHub just “gets it”. I wish this was a prerequisite for anyone wanting to start their own business.