Managing a massive Steam Library

I have a massive Steam library. I’m not rich or anything, but I purchase a lot of Humble Bundles and I’m a sucker for 50 cent games on sale. I’ve acquired over 300 games/DLCs and it’s really challenging to keep everything organized in steam categories. I spent a long time with two windows open trying to categorize based on tags, genre and rating. I recently went through and setup all controller supported into it’s own category. I switched computers and Steam’s cloud system overwrote it. I eventually gave up and just let things go wild in my library.

Happiness returned when I stumbled upon Depressurizer! Depressurizer provides you an interface for managing your Steam categories very quickly. I was able to auto-categorize based on User Tags, Genre, Store Flags, Ratings and a ton of other fields. Depressurizer will write to your Steam directory, but also export it to a physical file in case Steam forgets all your hard work. I’ve stored my app in my Dropbox folder so I can work on my library on my Surface and my main setup.

depressurizer

This app is a must if you have more than 50 games in your Steam library. Plus, it’s an open source .net project! I may just contribute to it in the future 🙂

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

Ten years of Halo 2

Where were you ten years ago? We’re asked frequently in job interviews “Where do you see yourself in 5 or 10 years?” This is a really hard question to answer. I like thinking of where I was ten years ago and see how far I’ve come. Gaming has always been an important part of my life and I occasionally like to think “What was I doing in gaming ten years ago?”

Ten years ago, my life was FULL of gaming. I was working for GameStop. I was a seasonal hire. I was hired in October and my position was over a week after the New Year. I just had a four month spurt of unemployment and was in the middle of my junior year of college. I wouldn’t say I was strapped for cash or anything. I was working weekends at a local paintball store. I ended up being the only holiday hire out of six to be offered a permanent position. I ended up passing and going to work for a local grocery store chain.

The fall of 2004 was an amazing time to work for a video game store. Fable was released a few week before I started. There was a lot of negative feedback due to the game not living up to expectations. We had a lot of trad-ins of the game my first week. I got to experience the Grand Theft Auto: San Andreas, Star Wars: Knights of the Old Republic 2 and The World of Warcraft releases. These games were milestones and set the standards for the games of that generation. World of Warcraft is still a very relevant MMORPG. San Andreas recently made it to the hand held market and KOTOR eventually evolved into an MMORPG that couldn’t live up to the reputation of its predecessor. One game topped all of these for me and it set the standard for my preference of games ever since.

Halo 2 was the only game that was released in the fall of 2004 that had a midnight release. The game was released on November the 9th 2004. There were roughly one hundred and twenty people hanging outside the store at 11:55pm and just about everyone had paid for the game in full. This event was the easiest shift I ever worked. Everybody was excited for the game and we were ready to serve. I took a hint and picked up an XBox the next week.

I tried to do things right. I played through the original Halo and this was extremely challenging for me. Goldeneye and Perfect Dark were the only FPS games I had experience in and the dual control stick layout took some getting used to. Halo was conquered over a weekend and Halo 2’s campaign was destroyed shortly after that. My gaming preferences were drastically changed after this experience.

I’ve never been big into the multiplayer experience. I was much more into the story. The Halo franchise has a very detailed universe and Halo 2 introduced the players to the other side of the story. The first game involved the super soldier, but the second game put you in the shoes of the enemy of the first game, the Covenant. You learn about the different species of the Covenant and experience the tension of the defeat from the first game. I had never played a game with this type of story telling. A lot of people didn’t like the fact you didn’t play the whole game as Master Chief, but I thought it was brilliant.

Over ten years, I’ve played all the Halo games, read most of the books, watched the TV series, and watched a lot of Red vs Blue. I can’t say Halo 2 was my favorite. It was the game that caught my attention and made Halo my favorite game series of all time. Halo: The Master Chief Collection comes out tomorrow. It crams Halo remastered, Halo 2 remastered, Halo 3 and Halo 4 into one game. I don’t own an XBox One, but I anxiously await the day I do so that I can re-experience ten years worth of awesome gaming.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

Debug your AngularJS app with AngularJS Batarang

I’ve been fortunate enough to be able to start working on several AngularJS applications and I can honestly say I haven’t had more fun geeking out on a project. They are internal projects so I can’t really show them off and brag about them, but I am really happy with my work. It’s not perfect, but I feel like they are pretty good for the first few runs.

On this last project, I hit a really big snag on performance. I was working on a grid with inline editing that required specifically formatted inputs. I cannot deny I’m an Angular rookie, but I really wasn’t sure where I should start with debugging the issue.

I stumbled on AngularJS Batarang while looking at a couple of Chrome extensions. Long story short, this is exactly what I’ve been looking for and more. Check out this video that shows the features.

Checkout this extension if you are new to Angular or are looking to optimize your Angular app. It’s really easy to use and extremely helpful.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

Hey look, another update.

Lots of stuff has been going on the past few months. I have a couple of posts in the works and a bunch of youtube videos recently uploaded. I hope to have a waterfall of stuff soon.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

WorthyD’s CSS guide for Rookie CSS Devs and Backend Devs

I’ve dug around for a long time for CSS best practices. I’ve found tons of contradicting and wishy washy rules. Most of these only make sense to people who are in CSS every day and are highly debatable. I’m going to try to give an overview of what I see as most important and explain why in a way most developers can understand. This should point you in the direction to get you into more advanced CSS and not drive your cut out people insane with sloppy CSS.

I’m going to go ahead and throw out that I firmly believe that you should easily be able to completely re-skin your web content without needing to roll HTML updates. I believe class names being specific to the content and not packed with a bunch of generic classes.

Know the basics

Know the best way to include style sheets.

There are two ways to include style sheets.
Method 1 – The Link Tag:

<link rel='stylesheet' href='a.css' />

Method 2 – Import:

<style>
     @import url('a.css');
</style>

For performance, only use method 1. Method 2 will block parrallel downloading of style sheets and slow down the rendering of the page.

Do not use any inline styles. Period. EVER!

Inline styles kill re-usability and maintainability . It’s super easy to tack on inline styles if you don’t want to dig through a thousand line CSS file.

Avoid using style tags at a page level

This is mainly for tidiness. If you need to modify styles specifically for a page, create a style sheet for that page and reference it with a link tag.

Stay organized

Combine & Compress your CSS

Personally, I like having multiple CSS files to keep things organized. For production, I’ll combine and compress them into one file. This helps avoid having a CSS file several thousand lines long that is difficult to maintain.

@if(IsProduction()){
  <link rel="stylesheet" href="main.min.css" />
}else{
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="base.css" />
  <link rel="stylesheet" href="forms.css" />
  <link rel="stylesheet" href="buttons.css" />
}

Keep your CSS Selectors organized

Section off your style sheet so people know what they are looking at. You can use comments to help identify what section they are looking at.

/*==========
    Header
===========*/
.logo {/*RULES*/}

/*===========
    Navigation
============*/
#nav{ /*RULES*/}
#nav li {/*RULES*/}

Selectors

CSS selectors are the key to having clean and maintainable CSS. There are some pretty simple rules you can follow to ensure you don’t end up with a bunch of messy CSS.

Classitis and Specificity

Classitis is having to rely on many class rules to select your element.

<style>
.nav .navItem .navElement{
     color:#fff;
}
</style>
<ul class="nav">
     <li class="navItem"><a class="navElement" href="#">Home</a></li>
     <li class="navItem"><a class="navElement" href="#">About</a></li>
     <li class="navItem"><a class="navElement" href="#">Login</a></li>
</ul>

The example above contains a lot of classes in the HTML that can be condensed. The selector also is longer that needed. You can clean up like so.

<style>
.nav a{
     color:#fff;
}
</style>
<ul class="nav">
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Login</a></li>
</ul>

Now this is only ideal if the ul.nav element will never have additional child a elements.

It’s also important to keep your selectors as short as needed. A selector with 5 or 6 selector elements isn’t ideal. You can control this by understanding CSS Specificity. Here are two articles that do a better job explaining it than I could. CSS Specificity: Things You Should Know & Specifics on CSS Specificity

Naming Conventions

Selector naming conventions are another religious argument that can be debated all day long.

.navMenu {margin: 10px;}

.nav-menu {margin: 10px;}

.nav_menu {margin: 10px;}

All of these are valid by the W3C and pass CSSLint. The important thing is to STAY CONSISTENT!!!! Personally, I camel case because jQuery UI uses hyphens. It’s easy to see what rules are mine and what is theirs.

Utility Classes

Avoid use of utility classes. The class names aren’t always descriptive enough and relying on them could cause you to need to roll both CSS and HTML in your site updates.

/*Common Utility Classes I see that bug me*/
.fr {float:right}
.fl {float:left}
.mb15{ margin-bottom:15px;} 
/*what happens if you're asked to move the content? 
Make another class for margin-bottom 13 and update your HTML?*/

Using utility classes will speed up your coding, but will hinder the maintainability of you code. You’re HTML elements could also end up with 4 or 5 classes on one element.

Understand Child Selectors

Using child selectors can help prevent the need of overwriting parent element styles. These aren’t supported in IE7 and below. Use when you can, because they can help prevent a lot of headaches.

 
<style>
ul li {color:blue; margin-bottom:15px}
ul li ul li {color:#fff; margin-bottom:0px}
</style>
<ul>
	<li>Blue</li>
	<li>Blue</li>
	<li>Blue
		<ul>
			<li>white no margin</li>
		</ul>
	</li>
</u>

We can re-write the CSS selectors and not have to overwrite the margin-bottom rule by doing it this way. It’s a real primitive example, but I run into this issue daily.

 
<style>
ul > li {color:blue; margin-bottom:15px}
ul ul > li {color:#fff;}
</style>

Read more about Child and Sibling Selectors

Chaining Classes

Chaining classes can be really helpful. But like child selectors, it doesn’t fully work in IE6 and IE7. You can also end up with an element that has a ton of classes attached to it.

<style>
   .icon{background-image: url(sprite.png);}
   .icon.save {background-position:-10px 0}
</style>
<input type="button" class="icon save" value="Save" />

Read more about mulit class selectors

Have Clean Properties

Your selectors are really only half of the CSS you have to really pay close attention to. You need to have clean CSS properties. Here are something things that will help cause less grief for the person coding after you.

Alphabetize Your Properties

.selector {
	width: 100px;
	margin: 10px
	border: 1px solid #000;
	padding: 5px
	float: right;
}
.selector {
	border: 1px solid #000;
	float: right;
	margin: 10px
	padding: 5px
	width: 100px;
}

You can find properties a lot quicker when they are alphabetized. Web browser tools will also alphabetize them in your DOM inspector. It took me a long time to get this down, but has helped out a lot.

Use Shorthand Properties

Short hand will help out on your file size and makes it more readable.

.selector{
	margin-bottom: 5px
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 5px;
}
.selector{ /*Same rule, but in shorthand*/
	margin: 5px 10px;
}

Read more on CSS Shorthand Properties

Zero Values

Don’t use px on zero values. Several reasons to do this, but it’s just a lot cleaner code and the “px” isn’t required.

/*discouraged*/
.selector {
     margin: 10px 0px 5px 0px;
}
/*better*/
.selector {
     margin: 10px 0 5px 0;
}

Image Reference

It’s important to use caution when referencing CSS. This isn’t an issue if you are 100% sure where your site is going to live. If you do your development on blah.localhost and your site ends up being hosted on blah.localhost/blah/ your image references will be broken if absolutely referenced.

/*image reference will break if app is moved to a sub directory or file is hosted on cdn*/
.img{
    background-image: url(/content/images/img.png);
}
/*this image reference makes  your CSS more portable*/
.img{
    background-image: url(../images/img.png);
}

Do not use CSS hacks and avoid using !important

Back in the day, it was really common to use browser hacks to fix IE specific issues. This should be avoided at all costs. You can use conditional comments to target specific versions of IE if you need to. In the last few years, I’ve only had to use conditional comments a couple of times.

Using !important after a CSS rule jumps the specificity all the way up. Learn about CSS specificity to avoid using !important. ONLY use if if you have a nasty javascript plugin that writes out styles you don’t like.

Frameworks

There are tons of CSS and Javascript frameworks to help you out with layout, feature detection and all sorts of other fun stuff. There’s Mondernizer and Bootstrap to name a few. Out of the box, these frameworks are potentially dangerous for the performance of your application.
Modernizer has a TON of feature detecting, but lets say you aren’t using Canvas or Video tags. Do you really need Modernizer to detect those and include all the code to detect them? Go get a custom build of it to plug into your site.

Well that turned out a lot longer than I had initially expected. I hope you found something useful. Please fell free to leave any feedback and I’ll do my best to keep good stuff coming.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

Self Checkout. A new experience.

Happy St. Patrick’s day!

The wife and I decided to go to our local “super club” to look for a giant plastic tool shed for our backyard. So after taking care of all the fun stuff of the shed not having a price on it, then hunting down an employee to help, and finally after a fifteen minute wait at the customer service counter, we found out that the shed was much more than we expected.

Anyway! I remembered I was in need of AA batteries. I go through AAs like candy. I use them for the spare xbox controller, wii controllers, piranha gun, and the million remote controls I have. I decided to grab a pack. I also noticed that they also had a new Self Checkout line. YAY!!!!

Ok, so we are at the super club so there are some new rules to self checkout. Scan your card, scan your items, then pay. Easy right? No scale, bagging or anything! Too good to be true right? Wrong!

There is an onsite self checkout “helper”. I was 3/4 of the way through my transaction and the helper came over and explained everything in detail…. absolute detail. They told me “Now when you’re ready to pay, just press this ‘Pay Now’ button and then swipe your card.”

My wife immediately caught on to how annoyed I was by this. She laughed all the way home. It was a 30 minute drive home…. she just giggled again!

I’ve been playing a good number of games. I have some good budget gaming posts on the way. Maybe some more tshirt posts. Trying to get the ball rolling again.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

UnlikeStuff.com – A new tool to unlike Facebook Likes

I talked to a coworker of mine after the never-text.info fiasco and got inspired to build an unlike tool since Facebook doesn’t have one. So I bring to you UnlikeStuff.com.

Before you check out the site, I’m a web developer. I’m by no means a designer in any way shape or form. The site was thrown together in my spare time.

I have a lot of ideas in-store for the site and I’ll try to make them when I can. But until then, enjoy.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

Lame http://never-text.info/ click jacking

Never-Text.info is running a nice little click scam. They got me, but I like to think I’m clever when it comes to using firebug. I dug through and actually copied their “like” button iframe. I uploaded a page so that you can actually see the page and unlike it.

http://worthyd.com/unlike.html

Don’t believe their 1 mil hype. There were only 200K likers when I checked.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.