thoughts of a codingbadger

Pretty much every developer in the world knows about Stack Overflow, searching for a solution to a development problem in Google will almost certainly throw up a pretty damn good answer on Stack Overflow.

Along will many other Q&A sites that are now available on Stack Exchange there is a Careers site too.

Careers 2.0 is a place to show off your awesomeness. And I don't mean your awesomeness on Stack Overflow - I mean everywhere! 

As Careers 2.0 is tied to Stack Overflow there are certain aspects of it which are designed to promote your activity on Stack Overflow.

Such as the tags you are active in:

Your Stack Exchange accounts:

Along with any "top answers" you feel that are exceptionally good you need to show them off.

And that is it - the rest of your profile is up to you.

 

I will go through and show you some of the main sections that are on your Careers 2.0 Profile to demonstrate that most of this is nothing to do with Stack Overflow.

A personal statement

Add whatever you like here - it's entirely up to you. Just make it good!

Add the technologies you are interested in and if you want, the technologies you aren't interested in.

A number of the sections that relate to technology allow you to choose the same tags that Stack Overflow uses when you post a question. I am guessing this makes it easier for Employers to search through candidates who like a particular technology.

Experience & Education

Fairly self explantory to be honest. You add your previous roles along with a short description, time frames and the technology you used.

This is where it can get interesting. You are able to to add links to any open source projects that you have worked on. This allows you to put your real projects out there on display and make it easy for potential Employers to find and immediately see how you would normally write code. Remember, this is code that you have written properly, not some pseudo crap that you have quickly knocked together so you can earn a quick 20 or 30 rep on Stack Overflow.

Again more opportunities for you to show off your real acheivements.

Writing & Reading

The Writing section allows you to link to Amazon for any books that you may have written and also to any articles or blog posts you may have written that you feel will make you stand out from everybody else.

The Reading section is pretty similar and lets you link to Amazon for any books you have read and again any blog posts that you have read.

Obviously, you should pick and choose the relevant books that you have read. I'm pretty sure potential Employers do not need to know that you have read the "Shoot Annual" from 1983 :)

 

There are other sections that you can complete on your profile along with some other nice pieces of functionality but I don't want to spoil all of the surprises!

I get the impression that a lot of people think that Careers 2.0 is very closely tied to Stack Overflow and more specifically to the reputation that you have on Stack Overflow. This is simply not the case and I hope you can now see why your reputation on Stack Overflow is a pretty small factor when it comes to your Careers 2.0 profile.

It seems I am in good company as Joel Spolsky blogged about why reputation on Stack Overflow isn't what Careers 2.0 is about.

Oh, and here is a link to my Careers profile should you wish to have a look :)

Recently, I just passed the 10K mark on Stack Overflow. This gives you some additional privileges and well.... it's pretty cool! Agreed, I am miles away from being in the league of Jon Skeet or Marc Gravell but it's a little victory for me!

So, in my excitement I fired off a tweet of this geeky milestone.  I received a tweet back from Rory Becker, congratulating on me and pointing me in the direction of this page on the DevExpress site.

No need to refresh your page, it really does say that.

 DevExpress is proud to offer you a free license to  DXperience Enterprise subscription package

Now that is cool! Just because I have taken some time out to help other  developers they are helping me  out.

The timing of this is even better, as in the next month, I am due to start a new ASP.NET MVC3 project so these controls will come in very handy. I'm also looking forward to using CodeRush. After talking to Rory at DDD SouthWest at the weekend I was about to install the trial version to see how I got on - no need for that now :) I am assured by Rory that CodeRush rocks so I shouldn't have any troubles.

So, once installed and my new project is underway I shall write another post with my thoughts.

In the meantime, I just want to thank DevExpress for this amazing offer. They really don't have to do this but they do - so kudos to them.

As promised in my previous post, I have modified the JavaScript to re-arrange the Badges for a User Profile on Stack Overflow.

Currently it is a bit of a mess (I believe they are displayed in date received order.)

Again, just drag Arrange User Badges on to your browsers toolbar and let the magic happen:

This was slightly trickier to achieve as I couldn't simply use next() or prev() to iterate through the badges.

Javascript:(function() {
 
$("#tags-table").next().append("<div id='customBadges' class='user-stats-table' style='float:left;'><div>");
 
$("#customBadges").append("<table id='goldbadges'><tr><td class='check-cell'</td><td class='badge-cell'><b> Gold Badges</b><hr /><span class='item-multiplier'></span></td><td></td></tr></table><br>");
$("#customBadges").append("<table id='goldtags'><tr><td class='check-cell'</td><td class='badge-cell'><b> Gold Tag Badges</b><hr /><span class='item-multiplier'></span></td><td></td></tr></table><br>");
$("#customBadges").append("<table id='silverbadges'><tr><td class='check-cell'</td><td class='badge-cell'><b> Silver Badges</b><hr /><span class='item-multiplier'></span></td><td></td></tr></table><br>");
$("#customBadges").append("<table id='silvertags'><tr><td class='check-cell'</td><td class='badge-cell'><b> Silver Tag Badges</b><hr /><span class='item-multiplier'></span></td><td></td></tr></table><br>");
$("#customBadges").append("<table id='bronzebadges'><tr><td class='check-cell'</td><td class='badge-cell'><b> Bronze Badges</b><hr /><span class='item-multiplier'></span></td><td></td></tr></table><br>");
$("#customBadges").append("<table id='bronzetags'><tr><td class='check-cell'</td><td class='badge-cell'><b> Bronze Tag Badges</b><hr /><span class='item-multiplier'></span></td><td></td></tr></table><br>");
 
$(".user-stats-table").find("table").each(function(){
 
    $(this).find(".badge-col").each(function(){
 
    var current = $(this).html();
    
    while (current.length > 1)
    {
        var link = current.slice(0, current.indexOf("<br>",0));
 
        current = current.replace(link + "<br>", "");
 
        var newRow = "<tr><td class='check-cell'</td><td class='badge-cell'>";
 
        newRow = newRow + link;
 
        newRow = newRow + "</td><td></td></tr>";
        
        
        if (link.indexOf("badge1") > 0)
        {
            if (link.indexOf("badge-tag") > 0)
            {
                $(newRow).appendTo('#goldtags');
            }
            else
            {
                $(newRow).appendTo('#goldbadges');
            }
        }
        if (link.indexOf("badge2") > 0)
        {    
            if (link.indexOf("badge-tag") > 0)
            {    
                $(newRow).appendTo('#silvertags');
            }
            else
            {
                $(newRow).appendTo('#silverbadges');
            }
        }
        if (link.indexOf("badge3") > 0)
        {
            if (link.indexOf("badge-tag") > 0)
            {
                $(newRow).appendTo('#bronzetags');
            }
            else
            {
                $(newRow).appendTo('#bronzebadges');
            }
        }
                
    }
    $(this).remove();
    
    });
});
 
})();  

A quick explanation of what I'm doing:

1. Retrieve each table cell
2. Extract from the start of the string up to the next <br>. This will extract the hyperlink, the span that displays the badge & text and where applicable the multiplier span.
3. Remove this from the original string (otherwise we'll get stuck in never ending while loop)
4. Construct a new table row and add the badge
5. Check to see what type of badge it is Gold, Silver or Bronze
6. Additional check to see if this is a Tag Badge or not
7. Add the new row to the relevant new table.
8. Finally when we have processed the table cell remove it from the DOM

Again, I don't know whether this is particularly good code or not but it works!

Enjoy!

As much as I love Stack Overflow, there are certain things that irritate me.

One of those things is the order of the badges.

They are displayed in alphabetical order which usually would be fine but the different levels of badge (gold, silver and bronze) are all muddled together.  So I knocked up some JavaScript to sort them out.

Drag this  Arrange Badges on to your toolbar to arrange them nicely!

I'm going to look at doing the same for the User page.  This is slightly trickier as the badges are not in nice neat rows.  They are a bunch of hyperlinks and spans boshed together with some line breaks

In the meantime - enjoy!

I'm not sure whether this code is good, bad or mediocre but it does what I want so I'm happy.

Javascript:(function() {
  
$(".page-description").insertBefore("div#mainbar");
  
$("div#mainbar").prepend("<table id='bronzebadges'><tr><td class='check-cell'</td><td class='badge-cell'><b> Bronze Badges</b><span class='item-multiplier'></span></td><td></td></tr><hr /></table>");
$("div#mainbar").prepend("<table id='silverbadges'><tr><td class='check-cell'</td><td class='badge-cell'><b> Silver Badges</b><span class='item-multiplier'></span></td><td></td></tr><hr /></table>");
$("div#mainbar").prepend("<table id='goldbadges'><tr><td class='check-cell'</td><td class='badge-cell'><b> Gold Badges</b><span class='item-multiplier'></span></td><td></td></tr><hr /></table>");
 
  
$("div#mainbar").find("span").each(function(){
     
  
     if ($(this).hasClass("badge1"))
     {
         var goldRow = $(this).parent().parent().parent();
         $(goldRow).appendTo('#goldbadges');
     }
     
         if ($(this).hasClass("badge2"))
     {
         var silverRow = $(this).parent().parent().parent();
         $(silverRow).appendTo('#silverbadges');
     }
     
         if ($(this).hasClass("badge3"))
     {
         var bronzeRow = $(this).parent().parent().parent();
         $(bronzeRow).appendTo('#bronzebadges');
     }
     
 });
  
 })();