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.

Microsoft Build Conference Day 2

Busy, but awesome day in tech at Build. Going to be short but sweet.

Keynote

Lots of good stuff shown off for VS2013, Azure and Office 365.

What’s New in ASP.NET and Visual Studio 2013

I wont lie. Scott Hanselman is one of the reason I love coming to dev conferences. I find him extremely inspirational and he does such a great job at making his sessions fun. I’ve watched a lot of his sessions twice.
Scott dove into all the great new features coming to VS 2013. Showed off how asp.net is moving to “one” asp.net with seamless integration between MVC and .net forms. Developers will be empowered to build their own templates a lot easier.
This was the session of the event for me. Due to some long demos, these sessions were shifted back a little bit. Scott entertained us with Ascii street view, http://letmebingthatforyou.com/, youtube videos and tons of other fun stuff. He actually favorited my tweet.

This was absolute nervana for me. My coworker and I saw him in the dev area. We wanted to go talk to him but we both felt like we would be this Chris Farley character.
I really didn’t feel up to embarrassing myself like that. Go watch his session, even if you don’t code. You’ll get a good laugh.

Scaling the Real-time Web with ASP.NET SignalR

This was a very informative session that answered just about all of my questions about scaling SignalR. Damian did a really great job demoing all the scaling tools.

Fast Apps and Sites with JavaScript

This was a great session. It put me in my place that I’m not nearly as good at javascript as I thought I was. I normally focus on maintainability and best practices in code. This session was kinda like, to heck with all that! Lets make everything run SUPER FAST! It was pretty mind blowing for me.

Create Fast and Fluid Interfaces with HTML and JavaScript

This was an extension of the what’s new for WinJS from yesterday. Paul went over a lot of the new features, why they decided to improve them and went over code for them.

Today was full of tons of great info. I’m really ready to be home though. I miss my family a great deal. I hid in a corner and tried to face time with Amanda and Lily. The wifi wasn’t so great and it ended shortly. I found several other people doing the same thing a couple hours later. It was good to know I wasn’t the only one missing my family.

Here is where I’m planning on being tomorrow:
9:00AM to 10:00AM
Developing High Performance Websites and Modern Apps with JavaScript Performance Tools
Jonathan Carter

10:30AM to 11:30AM
Visual Studio 2013 for Web Developers: Deep Dive
Mads Kristensen

12:00PM to 1:00PM Sessions
Reusing Your Web Development Skills in Windows Store Apps
Jonathon Sampson , Ralph Whitbeck

2:00PM to 3:00PM
Building REST Services with JavaScript
Nathan Totten

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.

Microsoft Build Conference Days -1 and 0

Microsoft Build doesn’t officially kick off tomorrow, but I’m going to go ahead and fill you in on my trip so far.

Day -1

I’m not the biggest fan of traveling. I’ve always relied heavily on my wife to get me where to go in airports and while driving. I’ve been pretty nervous the past few days. This is going to be the longest I’ve been away from Amanda since we got married almost 6 years ago and it is definitely the longest I’ve been away from my 14 month old daughter Lily.

To make this extended time apart as easy as possible, we spent the whole day together in Tulsa. We went to the Zoo, the mall, Baby’s R Us and just enjoyed each other’s company. I really needed it and I wasn’t interrupted a whole lot by work.

Day 0

Amanda and Lily dropped me off at the Tulsa airport where I flew to Huston then to San Fran. Tulsa to Huston was awesome. It was one of those 3 seats per row and I got the seat by the window all by myself. I worked on a power point presentation on code branching strategies.

From Huston to San Fran was a different story. Exit row with no seat in front… in the middle of 2 guys who liked the elbow rest. Not fun, but it could have been worse. I started reading American Sniper and napped.

Getting to the hotel was fun too. I got lost and got a real culture shock. You’re not really use to the kind of stuff you see in San Francisco in North West Arkansas. I met up with the other guy from Rockfish who is attending the conference and we’ve setup our battle stations in the hotel room. I was really hoping to get to play the new Borderlands 2 DLC that came out today, but the internet connection is pretty slow. It’s been downloading for four hours now and it’s only a gig.

Tomorrow starts off the big day. I’ll do my best to post frequent updates on my twitter account @WorthyD.

Sessions were posted on Channel9. Here is where you’ll most likely find me.

11:30AM to 12:30PM
Windows Phone: Design for Developers

2:00PM to 3:00PM
New Platform Capabilities for Advancing Web Development

3:30PM to 4:30PM
What’s new in WinJS

5:00PM to 6:00PM
Windows 8.1 in the enterprise

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.

Weekend Tech Reads For 1-18-2013

Asp.net / Asp.net MVC

Ten Tricks for Razor Views – Great post on some syntax related stuff with Razer views in MVC. This is really helpful if you have only been using the standard view engine in MVC.

Javascript / jQuery

WAAAAAAAYYY too much stuff has been going on with jQuery this week. It’s really awesome stuff though.
JQUERY 1.9 FINAL, JQUERY 2.0 BETA, MIGRATE FINAL RELEASED
Announcing jQuery Mobile 1.3.0 Beta
ANNOUNCING THE JQUERY PLUGIN REGISTRY

Web Development

The Best Way to Learn HTML – This is a great article for beginners.
Learn Advanced HTML & CSS with one useful guide.

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.

Weekend Tech Reads For 1-11-2013

Asp.net / Asp.net MVC

Announcing the ASP.NET and Web Tools 2012.2 Release Candidate – A bunch of new features coming to Visual Studio.
Creating a complete ASP.Net MVC 4.0 application with Visual Studio 2012, C# , EF 5.0 (Code First) – part 1 – Great read on creating an MVC 4 with EF.

Javascript / jQuery

Essential JavaScript Namespacing Patterns – It is well known that Addy Osmani is my javascript hero. This article changed my methodology for coding javascript.
jQuery API Documentation – The jQuery API Documentation got a face lift recently. I find it much more usable. jQuery UI also had an update recently.

CSS

All you need to know about CSS Transitions – CSS transitions have always stumped me. I’ve always relied on javascript for animations. This gives a great overview.

Web Development

Web Developer Checklist – This is a checklist that every web developer should checkout. It provides you with a basic check list of all the things you need to look at while building a website, but also gives you links to help you out with each item.

Other Reads

Windows 8 productivity: Who moved my cheese? Oh, there it is. – Article by Scott Hanselman about where some stuff has been moved and new features in Windows 8. This is a really good read if you are new to Windows 8.

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.

Lessons Learned And Tips – Responsive Design

I recently came off my first project where I got to fully implement a responsive design for a desktop to mobile website. I’ve done several in the past where we would do certain things for portrait and landscape or tablet to mobile design. I feel desktop to mobile was defiantly more challenging. The project was a huge success and there was excellent work by all teams, but there were several few “gotcha” moments that almost happened. These weren’t due to lack of attention to detail, but more along the lines of new discoveries. I’m going to outline some things that we executed that helped out greatly and a few other things that caused some headaches.

Keep the layout simple

Look at your site content before you begin to implement a responsive design. Can you present all of your content in one column and it still be relevant? You may want to look into a full mobile implementation if you can’t do this.

You can always use Javascript and CSS to show hide content based on screen widths. I’d recommend using caution when going wit this approach. You shouldn’t be hiding more than you are showing.

The Boston Globe is a great example of appropriate use of a responsive design.

Be careful with date pickers

Ever try to use the jQuery UI date picker on a mobile phone? It’s not fun. You can set the input type of your text box to “date” so that a mobile phone will open the native date picker. However, some desktop browsers support date inputs and we didn’t want double date pickers. I found an article on how to handle HTML5 and the jQuery UI date picker here.

Avoid CSS Clear Fixes

Yeah, I’m guilty of this like crazy. It’s a quick fix, but can be really killer when you need to restructure how the elements align on the front end. Instead of using a clear fix, you can apply an “overflow” with a value of “auto” or “hidden” to the parent wrapper to get the same effect. This is the best article I’ve found explaining CSS floats

Watch your device dimensions

For the longest time phone screen dimensions were 320 by 480. The iPhone 5 and Galaxy S3 have been released and their screen sizes are a little bit different. The iPhone 5 has a size of 320 by 568 and the Galaxy S3 is 360 by 640. Yes, I know their specs say different, but this is if we set their pixel density to 1 instead of 1.5+ (retina). The old methods aren’t reliable anymore. We must remain flexible in the mobile world. I’d recommend portrait going to 479px and landscape going to 767px. This IS stepping on smaller tablet’s toes. The Kindle Fire would pickup our mobile landscape mode. So figure out what will suite your needs best. This is a good example article with some media query snippets to use as a starting point. You will need to tweak for more modern devices, but the logic remains the same.

Keep the background repeatable

See the above note. Fancy background images can be problematic when you try to stretch a background to fit all phone dimensions and look crisp. I recommend solid colors, gradients or an image that repeats horizontally well.

Avoid using img tags

This mainly applies to using icons. Trying to dynamically change image tag source attributes can’t be done in CSS and you would have to rely on javascript. I recommend using a block element like a div tag and setting the background to your image. You can then change the background image in CSS when your mobile layout is applied. If you are working with an instance where an image tag was already implemented, wrap it in a div, hide the img tag when in mobile and set the div’s background. It’s not the most graceful approach, but will work if you are in a pinch.

Rely on CSS more than Javascript

This is probably the biggest thing I learned. Do your best to keep all your responsive design related stuff inside of CSS and use media queries to determine when to load them. I’ve seen sites use javascript to determine if the screen is landscape or if it is a specific width by attaching an event to window.resize. This can result in a really glitchy experience if the user manually re-sizes the window.

I hope you found this post useful for your next responsive design project. Thanks for reading.

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.

Awesome jQuery performance tips by Addy Osmani.

I’m always on the look out for ways to improve my front end development skills. I usually have to sift through heavily opinionated articles to find anything useful. Addy Osmani recently posted up a slide show with some really great performance tips. He has a bunch of great articles and I’ve learned a lot from them. You can check out the slides here. I’d highly highly encourage you to go through all the slides a couple times. Here are a couple of things that I took away that I now use all the time.
Continue reading “Awesome jQuery performance tips by Addy Osmani.”

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.