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.

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.

Minification Made Easy with VS Web Essentials for Visual Studio 2012

Why do we care about minification?

Minification is the easiest thing you can do to your websites to improve the performance of the front end. Minifying is going to take all your code and cram it into one line. This can decrease the size of the file by up to 40%. That is a lot less for your browser to download and will speed up the rendering of your pages.

Why choose Web Essentials?

VS Web Essentials provides the easiest way to setup minification. The extension can be installed without leaving Visual Studio and it’s very easy to find in the extensions and updates portion of Visual Studio. There are no build events to configure. The minification can either happen on save or be done manually. There isn’t a complicated configuration file that you will need to setup. The extension generates an easy to read config file.

Web Essentials provides a TON of features that make CSS and Javascript coding a lot easier. The extension is very useful even if you are not interested in the minification functionality.

CSS Tricks

You can enable an option to prevent the minification from removing CSS comments that have been marked as important. This will allow you to keep your version numbers and licensing in your comments. I’ve tried to hunt down other minification processes that wouldn’t remove important comments and I couldn’t find any.

Javascript Tricks

You can enable Javascript Source Maps that will allow you to use your minified JS file in development and easily find what line bugs are occurring on. Below are some great articles on Source Maps.

This is the first time I’ve done any video demos before. I’d really appreciate any feedback that would help me improve my presentation skills.

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.

jQuery Performance Tips: Caching Selectors

Selector Caching is the number one thing I have learned for jQuery performance. I’ve seen it in countless numbers of blog posts, tweets and conference lectures. It’s a real simple concept too. John Resig wrote about Twitter’s problem a couple years ago here.
Continue reading “jQuery Performance Tips: Caching Selectors”

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.

Tired of typing long URLs into your mobile devices? QR code that!

Co-Worker: Hey Daniel! Can you check this site out on the company iPad!?!?!
Me: Yeah sure what’s the URL?
Co-Worker: http://www.superlogurlwithextracharacters.us?queryvar=1&var=abvceor&mobiledetectioin=42&key=wholikestacos
Me: Ummm….. *sad face*

I work with a lot of mobile devices at work and I’m not comfortable setting up my email on company devices. It hit me like a ton of bricks. USE QR TECHNOLOGY!!!!!!

I go to http://qrcode.kaywa.com/ or any other qr generator. Download a QR app on your device that can open URLs in the native browser. I use SimpleAct Inc. Best Barcode Scanner. It works on all iDevices and it works great. Pull up the QR on your screen, point your camera to it, and BAM!!!! Site pulls upon your device.

I haven’t gotten around to finding any QR apps on Android and Windows Phone 7 yet.

This has shaved countless minutes of typing out complex urls on a tiny device.

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.

A Couple Tips to Type Code Faster

I’m not too embarrassed to say it, but I was looking at my fingers when I was typing until I was a senior in highschool. I was sneaky with the keyboarding teacher. Over the past year or so, I’ve really been trying hard to learn to type faster and more efficiently.
Continue reading “A Couple Tips to Type Code Faster”

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.

Mobile Website Methods with Asp.Net MVC. Part 1 – Content Sites

I have a fair amount of experience building mobile sites. Mobile sites are essential now because so many people are using mobile phones and tablet devices to browse the internet. Many sites don’t have great mobile experience. They use flash, rely heavily on hover effects, or they have so much content that it takes forever for the page to load.

I’m going to show how I made a mobile version of my site in just a couple hours using Asp.Net MVC and jQuery mobile. My site is primarily content and has very little code involved on it. My website is very basic and very straight forward. I browsed through my site and decided to find the basic information I wanted to display on my mobile version. In my case, I wanted to display my portfolio, resume, about me, contact me, some of my social links, and an about my mobile page so people could see what technology I used.
Continue reading “Mobile Website Methods with Asp.Net MVC. Part 1 – Content Sites”

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.

Speed up page speed by lazy loading non-essential elements with jQuery

I worked up this idea after using some Facebook like buttons and the jScrollPane jQuery plugin. I’m a big fan of jScrollPane, but the iframes from the like buttons caused some unfortunate page flashing after document.ready fired.

I worked up this idea after using some Facebook like buttons and the jScrollPane jQuery plugin. I’m a big fan of jScrollPane, but the iframes from the like buttons caused some unfortunate page flashing after document.ready fired. Rendering the like buttons with FBML took even longer than the iframe method.

You can use this to delay large images, ads, iframes, or other beefy elements that don’t appear “above the fold” and are not essential to the initial presentation of your page. This can hurt the “SEO” value of content so be mindful of what you use it on.
Continue reading “Speed up page speed by lazy loading non-essential elements with jQuery”

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.

Easily Manage Many Javascript/CSS Files in Your .Net MVC Project

I’ve worked on a few projects where we crammed all of our javascript into one file. This made navigation of the file a sheer nightmare. Now, I use the SmallSharpTools.com Packer to cram all of my JS files into a single minified JS file. One of the last MVC project I worked on had 143 javascript files that were minified into a single one. There is one frustrating thing about this. You must build your project every time you change javascript code. You can also retrofit these methods for CSS files.
Continue reading “Easily Manage Many Javascript/CSS Files in Your .Net MVC Project”

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.

Visual Studio C# Enum Switch Snippet – Blew My Mind

So I learned something TOTALLY COOL from a coworker today! I’m always excited about learning something new when it comes to coding.

I’ve frequently been in the situation where I’ve wanted to create a Switch statement while using enums.
Continue reading “Visual Studio C# Enum Switch Snippet – Blew My Mind”

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.