Bootstrap – The framework you hate for all the wrong reasons.

Disclaimer: The thoughts in this article are my own and do not represent the opinions of my employer past, present or future.

I’ve been sick in bed the past few days. I tend to do a lot of reading when I’m down and I stumbled on a several articles criticizing the Bootstrap framework. (I also got going on Single Page Web Applications, but that’s for a different time.) I got pretty motivated to express my opinions from my experience with the framework.

I’ve been utilizing the Bootstrap framework for over a year now. I’ve had a lot of success with it and it always amazes me how much hate it gets. I’ve spent a lot of time in their source code and I have a really good understanding of how everything works. I’ve done a lot of responsive work outside of Bootstrap and I’m pretty comfortable arguing for or against it.

This is one of the tag lines from Bootstrap’s web site. Do I believe it’s true? Yes, I do.

Designed for everyone, everywhere.

Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes.

There is one big thing that gets overlooked a lot when looking at Bootstrap. Bootstrap is trying to do two big things. It’s a responsive grid framework and a responsive UI framework. The UI part of the framework provides styled static elements like inputs and buttons, and also has a set of interactive components that work well on a smaller screen.

So what’s with all the hate? I have a few reasons I’ve heard and theories I have.

You have to use a bunch of random classes to get it to work.

I see a lot of this. There is a trade off though. Many single class elements end up with countless rules that get over ridden based on it’s parents elements or the current media query. It’s a trade off. Do you want more rules in your style sheet or more classes on your element?

It’s bulky.

The full CSS library is around 130kb and the JavaScript library is around 30kb. Is this heavy at a glance? Yes, but there are three things you can do if you don’t like this.

    1. Utilize a CDN – There are several providers that serve up the full Bootstrap package over a CDN. A CDN will provides speed by caching the content and your browser will download it faster because it’s on a different domain
    2. Build your own Bootstrap package – This is the less obvious choice, but you can really slim down the package by using their tool. You can also download their source code and create a custom build yourself.
    3. Do both 1 and 2 – There should be other static assets in your project. You might as well invest in the service.

It’s trendy and people only want to use it because “Bootstrap” is a buzz word right now.

There is a lot of truth behind this statement. Bootstrap is extremely popular right now because it’s fairly new. jQuery had a similar buzz around it after it hit mainstream.

It’s not not suitable for large scale applications.

I couldn’t disagree more. Bootstrap’s consistent naming patterns make it ideal for large teams working on large projects. A fully custom responsive implementation requires a lot of documentation and communication across the team. The likely hood of a class being misused is pretty high. With Bootstrap, everyone can easily know how the grid works and work through new pages quickly. I’ve seen a large number of backend developers wire up pages using Bootstrap with ease. This introduces a level of efficiency that can be extremely challenging to replicate with a custom responsive implementation.

All Bootstrap sites look the same.

Did you expect to use Bootstrap and not have to code your own CSS? Checkout Wrap Bootstrap and see if you can tell if the sites are “exactly the same”. I roll my eyes at this comment a lot. It is very common to come across websites that look stamped with the Bootstrap CSS, but imagine what these sites would look like without it.

Web Designer: I don’t want to design for it.

Ok, that’s nice. Don’t want to be limited to 12 columns? That can be changed by a couple keystrokes in a LESS file. Don’t like the default buttons and inputs? A little custom CSS will fix that. The only thing we can’t do is recreate a design based on a non-grid layout. Most CSS responsive frameworks have limitations when working with non-grid based layouts. Just do whatever you want. Clever front end developers will figure out how to do it.

Front End Developer: I have spent a lot of time learning to be an expert on responsive.

Don’t worry about this. I personally know several SQL developers that panicked when Linq to SQL/Entity Framework came out. They thought that they would be out of the job because anyone who knew C#/VB would be writing their SQL for them. This is 100% not true. A framework can get you 90% there. Knowledge and experience will get you the rest of the way. The experience you have in the core technology is always relevant. The same can be said about jQuery and JavaScript. jQuery made JavaScript 100Xs easier to write. CSS precompilers can be thrown in this boat too. jQuery and Linq also introduced ways to write really bad JS and SQL if you weren’t careful. Bootstrap is no different. It can help you write simple and quick responsive elements, but can also create overly complicated and complex elements. As an experienced FE Dev, it’s your responsibility to identify the right and wrong ways.

You’re old fashioned and boring

If it ain’t broke, don’t fix it. I really hate LESS. I’ve been using it heavily for a year now. I just hate it. I see too much bad code, improperly named global variables, hundreds of media queries that could be consolidated, and excessively over qualified selectors due to nesting. Bootstrap contains the ONLY LESS files I’ve seen that do something cool. They create loops for generating the CSS for the grid layout and calculate out exact widths with it.

I feel like I have much cleaner and better performing CSS without LESS, but it takes me a little bit longer to do. You could say the same about Bootstrap. A lot of people said the same thing about JavaScript with jQuery and SQL with LinqToSQL. These tools and libraries get widely adopted and we can’t avoid working without them. I’ve seen a lot of bad JavaScript due to jQuery and several websites crash due to bad Linq statements. Why do I continue to use LESS, jQuery, and Linq? Efficiency. I can code with or without them. It doesn’t matter. I want to be versatile and quick. I can get stuff done a lot quicker with them. The same can be applied to Bootstrap. It’s a new tool that introduces a lot of efficiencies. It can also introduce potential inefficiencies much like the tools above, but a good developer should catch these before they become a problem.

Bootstrap is a very capable front end framework that makes responsive easy and quick to implement. This is much like what jQuery did with JavaScript. Is Bootstrap something I’m going to implement on every one of my projects? No, but it will be my goto framework when a project fits the mold and I can save time. It’s another tool to add to my toolbelt that will allow me to be innovative and more versatile.

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.

My PSD to HTML YouTube Series

Several months ago I braved through making a video tutorial series to help developers with PSD to HTML. Below is the result. I plan on making more series, but there is a lot of work that has to go into these things. I’m currently in the process of publishing a jQuery for Backend Developers right now. 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.

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.

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.

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.

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.