OdeToCode IC Logo

CSS Resets

Sunday, November 29, 2009 by K. Scott Allen

reset buttonEvery web browser has a default style sheet it uses when rendering content, and every web browser uses slightly different defaults. Perhaps a button will use an extra 2 pixels of width in one browser, but 3 fewer pixels in another. These differences are insignificant to many of us, but they worry some designers and keep them awake at night. This is where CSS reset style sheets come into play.

The goal of a CSS reset style sheet is to set the default styling for all HTML elements into a known state. A good CSS reset will effectively “undo” all the default styles any web browser might define. The CSS designer can then built their own style rules and feel relatively confident that a design will look the same across all browsers and environments.

For example, here is what you will be starting with after applying the YUI Reset CSS:

  • Black text on a white page background
  • Margin and padding for all elements set to zero
  • Table borders set to zero
  • All fonts sized 100% of base
  • Font-weight and font-style set to normal
  • and more …

There are a few CSS resets available on the web:

Note that YUI and Blueprint both include a CSS reset as part of a larger CSS framework.

Should I Be Using A CSS Reset?

This is the subject of some debate.

Some people feel a CSS reset creates more work – both for the designer and the web browser. The designer has to start from scratch and will write more CSS style rules to design a page that has been stripped of all aesthetics by a CSS reset. Naturally the browser will also work harder to process all these additional rules and cascades. 

But, if you care deeply a design, and how that design will render around the universe, then you won’t mind any of the extra work. CSS reset can be good.

As Eric Meyers says in his post “Crafting Ourselves”:

Reset styles clearly work for a lot of people, whether as-is or in a modified form. As I say on the reset page, those styles aren’t supposed to be left alone by anyone. They’re a starting point. If a thousand people took them and created a thousand different personalized style sheets, that would be right on the money. But there’s also nothing wrong with taking them and writing your own overrides. If that works for you, then awesome.

For others, reset styles are more of an impediment. That’s only to be expected; we all work in different ways. The key here, and the reason I made the approving comment above, is that you evaluate various tools by thinking about how they relate to the ways you do what you do—and then choose what tools to use, and how, and when. That’s the mark of someone who thinks seriously about their craft and strives to do it better.

Eric’s commentary applies to many of the tradeoffs we face in software development.

Is Microsoft Taking Dynamic Languages Seriously?

Monday, November 23, 2009 by K. Scott Allen

Specifically IronPython and IronRuby.

Consider this …

  • IronPython got underway in July of 2004. Five years later it appears IronPython is still not a candidate to be a first class language in the .NET framework and tools. You can vote on this issue.
  • Microsoft first released IronRuby at Mix in 2007. Nearly three years later it appears IronRuby is still not a candidate to be a first class language in the .NET framework and tools. You can vote on this issue.

A first class language is deployed when the full .NET framework is installed. It’s as easy to find as csc.exe. It’s not a language you have to ask the IT department to install separately. It’s not a language that requires you to jump out of Visual Studio to edit or run.

Most of all, a first class language doesn’t require justification to higher powers. A first class language is pre-certified and stamped with a seal of approval. It’s as easy to use in the locked-down big corporate setting as the company paper shredder.

shredder

The DLR and the PDC

I was depressed when I read the session list from Microsoft’s recent Professional Developers Conference. If you browse the session list you’ll find hundreds of sessions covering cloud computing, Sharepoint, Silverlight, SQL Server, and modeling. There are a handful of sessions covering concurrency, and a few dedicated to C++.

There is exactly one session featuring the Dynamic Language Runtime in a significant fashion. The title is Using Dynamic Languages to Build Scriptable Applications. You can learn how to augment an existing application after you’ve done all the real work in a first class language.

Perhaps Microsoft is just hedging their bets, but it’s clear that that dynamic languages aren’t high on the priority list. Maybe they’ll be first class citizens one day, but many developers are tired of waiting.

P.S. Is Managed JScript dead?

Keeping CSS Files DRY with .less

Sunday, November 22, 2009 by K. Scott Allen

dotless - a LESS css port for .NETIt was just a few weeks ago when I heard of LESS for Ruby, and now there a port for .NET developers: .less (dot less).

One of the frustrating aspects of working with CSS (one of many, actually) is the amount of duplication in a .css file. CSS does allow us to separate content from presentation, but, if I had a nickel for every time I did a search and replace for some hexadecimal RGB code replicated 5 times in a CSS file, I’d buy each of you an interactive t-shirt.

.less help to keep your CSS files DRY using 4 constructs:

  • Variables
  • Mixins
  • Operations
  • Nested Rules

The examples on the .less home page are self-explanatory. For example, variables:

@gold : #cccc99;

body {
  background-color: @gold;
}

“Mixin” is a Ruby concept, and with .less the you can “mix” one style rule “into” another.

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#header {
  .rounded_corners;
}

How’s It Work?

You enter your styles into a file with a .less extension and include them in a view or web form just like any style sheet.

<link href="/Content/Site.less" rel="stylesheet" type="text/css" />

An HTTP handler is configured to respond to requests for the .less files.

<httpHandlers>
    
  <add validate="false" path="*.less" verb="*"
    type="dotless.Core.LessCssHttpHandler, dotless.Core" />
              
</httpHandlers>

When a request arrives for a .less file it is the handler’s job to parse the .less file and transform it into standard CSS rule sets. .less does this using PEG Lib and offers the ability to both minify and cache the resulting CSS.

The source code is available on GitHub, so check it out for yourself. .less will let you write lean, mean style sheets.

Improving JavaScript Skills

Tuesday, November 3, 2009 by K. Scott Allen

A few people have asked me how to improve their  JavaScript ability. Not just learn about syntax and crazy stuff like closures, but how to apply the same design skills they have in their primary language(s) to the code they stuff into .js files.

I think the key is to submerse yourself in JavaScript for an extended period of time. So often in web development we context-switch into JavaScript mode to bang out a few client-side event handlers, then jump right back into the server code. I’m not suggesting you try to write all the JavaScript code for a web site all at once (that’s just silly), but you could try a code kata with JavaScript every now and then.

Uncle Bob has a nice bowling game Kata. It’s written in Java, however, you can play along with any other language, including JavaScript.

Here’s how to start (for ASP.NET developers):

1. In Visual Studio, select File –> New –> Web Site.

2. Delete the Default.aspx file.

3. Download jQuery and qUnit (both qUnit.js and qUnit.css). Add them all to the root of the site.

4. Add a new HTML page to the web site with the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link href="qunit.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="qunit.js" type="text/javascript"></script>

  <script>        
    
  </script>
  
</head>
<body>
  <h1 id="qunit-header">JavaScript Code Kata</h1>
 <h2 id="qunit-banner"></h2>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
</body>
</html>

5. Start practicing.

As an example, here is what you might have inside the script tags by slide 18 on Uncle Bob’s Bowling kata:

test("Test Gutter Game", function() {
   
    var game = new Game();
    
    for (var i = 0; i < 20; i++) {
        game.roll(0);
    }
    
    equals(0, game.score());
});

And by slide 19 you’ll make the above test pass. You might have the following code (inside the script tag, or you could put it in a separate .js file).

function Game() {

}

Game.prototype = {
    roll: function(pins) {

    },

    score: function() {
        return 0;
    }
};

Once you get to the end, try some other katas. Or, try the same kata with a different style (like avoid for loops, as an example). Everything gets easier with practice.

JavaScript submersion is fun (and makes you better too).

BitLocker To Go

Monday, November 2, 2009 by K. Scott Allen

I had some data on a Cruzer flash drive I wanted to protect, and I just discovered how easy it use to use BitLocker on a flash drive (thanks to Hanselman, who pointed this out in one sentence at the end of a post).

BitLocker is another Windows 7 feature that has been around since Vista, but BitLocker To Go (encryption for removable drives) is new.  I believe it is only available on Win7 Ultimate and Enterprise.

Once the drive is inserted, right-click the drive in Windows Explorer and select “Turn on BitLocker…”. Windows will ask if you want to unlock the drive using a password or a smart card + PIN. I took the password option:

bitlocker to go setup

Encryption can take some time (~ 15 minutes for my 4GB flash drive).Windows will place a BitLocker To Go “reader” application on the drive so you can have read access to files from Vista and XP machines (bitlockertogo.exe). Note: the down-level reader only works if the drive was not formatted with NTFS. It’s interesting to read about how this works:

Getting BitLocker To Go functionality to work on Windows XP and Windows Vista required some reengineering of the core BitLocker feature. To do this, the team refactored the method by which BitLocker protects FAT volumes. BitLocker behavior was modified to overlay a "discovery volume" onto the physical, original volume and virtualize the blocks overwritten. The discovery volume contains the BitLocker To Go Reader as well as a readme file. This is called a Hybrid BitLocker drive. By default, when a FAT drive is encrypted, a hybrid BitLocker drive is created. The discovery drive is visible only on the Windows XP and Windows Vista operating systems.

I always thought encrypting my entire system hard drive was a little bit scary. I like BitLocker To Go because it is built-in, and can protect a removable device where I keep sensitive files.

MVC or Web Forms? A Dying Question

Thursday, October 29, 2009 by K. Scott Allen

Everyone who talks about ASP.NET MVC gets asked the question:

    Should I use MVC or Web Forms?

There’s been quite a bit of debate on this topic, but in a couple years I don’t think it will matter.

10 Types Of Developers

… those who can count in binary, and those who don’t care.

The IT developer who doesn’t read blogs and works 8 hours a day in a Microsoft shop is either portrayed as a hero who produces business value, or vilified as a duct-taping Mortimer who produces a mess. The truth is somewhere in the middle, and the fact is that these developers look at MVC and Web Forms and see this:

twin cars 

… which is why so many people ask the question. There is no clear distinction. Most developers don’t have a passion for TDD or composite UIs – they just want to get the day’s batch transactions through the firewall and into a spreadsheet for the business folks. “I see two web frameworks. I can use either. Just tell me which one is best!!”.

Meanwhile…

Platforms versus Frameworks

There was a big SharePoint conference last week, and SharePoint is clearly positioning itself for global feature domination.

  • Office integration? Check.
  • End user customization? Check.
  • Visual Studio designer? Check.
  • REST and ATOM feeds from anywhere? Check.
  • Administration interface with reporting and logging? Check.Check. Check.
  • Build for Internet and Intranet? Check and check.
  • Connect to any data source? Check.
  • Enterprise level authentication and authorization? Check.
  • Silverlight? Check.
  • Workflows? Check. 
  • Anything else you can think of? Check.

When you stack up SharePoint versus MVC or Web Forms, then everyone can see a contrast. One is a small framework to build on. The other is a giant platform  that moves tons of data across the corporate landscape.

big contrast 

The SharePoint platform is an out-of-the-box-do-everything solution you tweak and augment for a particular environment. Some developers think this is great. Some developers think this is scary. At least the contrast makes for an easy decisions.

There Really Are 10 Types Of Developers

… those who like frameworks, and those who like platforms.

Developers who like platforms will want to use SharePoint. Install it. Customize it. Then watch end users collaborate in spreadsheets on numbers from Analysis Services.

Developers who like frameworks will want to use MVC. It’s light. It’s extensible. It leaves them in complete control.

Web Forms is caught in the middle. The abstraction is too heavy for framework lovers. At the same time, it’s not an out-of-the-box solution despite all the drag-n-drop data controls and pre-configured providers. It’s vulnerable to both sides and both SharePoint and MVC have momentum and excitement.

spectrum 

The question in the next decade won’t be: “MVC or Web Forms?”.

The question will be: “MVC or SharePoint?

But nobody will ask the question, because the answer is easier to figure out.

About Scott Allen

Wednesday, October 28, 2009 by K. Scott Allen

image I am a founder and Principal Consultant with OdeToCode LLC. I have 19+ years of commercial software development experience across a wide range of technologies. I’ve successfully delivered software products for embedded, Windows, and web platforms. I’ve developed web services for Fortune 50 companies and firmware for startups. I’m a published author in leading print and online technical journals, and I'm also a speaker at national and international conferences.

I’m available for consulting on .NET related projects anywhere through OdeToCode LLC. These days I primarily work with C#, ASP.NET, ASP.NET MVC, and SQL Server. I also enjoy writing articles and white papers. Contact me as scott at odetocode.com.


2012 Events

DevWeek (26-30 March 2012) London's Biggest Conference for Developers
Software Passion Summit (19-20 March 2012) Clarion Hotel Post, Göteborg, Sweden
scott allen speaker

Writing

I enjoy writing about technology. I've been fortunate enough to work with some of the best editors and publications in the world.

image

Training

Over the years I’ve worked with some of the best trainers in the world at Pluralsight. I’ve delivered over 25 weeks of class instruction and produced over 50 hours of video content. Here are the current classes and training courses I offer.

Building Applications with ASP.NET MVC (4 Days)

This course will give you everything you need to start building applications using the ASP.NET MVC framework. Working through a series of practical examples, you’ll see how to use framework components, scaffolding, Razor views, and jQuery UI widgets. We’ll talk about best practices for real world scenarios and highlight key extensibility points in the MVC framework.

  1. Introduction
  2. Controllers
  3. Razor Views
  4. Building Models
  5. Using jQuery
  6. AJAX and JSON
  7. jQuery UI
  8. Configuration
  9. TDD with MVC
  10. Managing Dependencies
  11. Best Practices

Developing with C# (4 days)

The course is designed to take experienced developers who are new to .NET or the C# language and give them all the fundamentals, best practices, and advanced knowledge required to be a productive and happy developer with the C# language. We’ll demonstrate all the capabilities and features of the language, and work with both desktop and web applications to see how to apply the language in different contexts. During the course we’ll solve specific, everyday problems in application development using techniques like functional programming and test-driven development. We’ll also see how to apply modern programming principles and use dynamic programming techniques to make the most of the C# language.

  1. Introduction
  2. Classes and Objects
  3. Types
  4. Events, Properties, and Methods
  5. Flow Control
  6. C# and the CLR
  7. Generics
  8. C# and LINQ
  9. Dynamic Programming
  10. Object Oriented Programming
  11. Functional Programming
  12. Langue Oriented Programming

Real World LINQ - Data Access and Beyond (4 days)

LINQ changes how we build data access components with .NET, and also introduces new flexibility and expressiveness Into the C# language. In this course we’ll see how LINQ works at a language level, and also how to use LINQ with XML and the Entity Framework. We’ll look at the tradeoffs to evaluate when building a data access layer with LINQ, and see how to use LINQ features in a domain model to implement better business logic.

  1. Introduction to LINQ
  2. LINQ and the C# Language
  3. Queries with LINQ
  4. Query Operators
  5. Entity Framework I (Queries)
  6. Entity Framework II (Updates)
  7. LINQ in Layered Applications
  8. LINQ to XML
  9. LINQ for Better Business Logic
  10. Entity Framework Code First
  11. Entity Framework Migrations and Mapping
  12. Entity Framework Extensibility
  13. Data Services
  14. LINQ and the Task Parallel Library

HTML 5, CSS 3, and JavaScript (3 days)

This course will demonstrate the features and capabilities of the latest web standards: HTML 5 and CSS 3, as well the latest JavaScript libraries that will help you build great applications on top these standards. From local storage and video, to geo-location and background workers, we’ll have a thorough exploration of each area and see practical examples and advice.

  1. Introduction
  2. Forms with HTML 5
  3. Modern JavaScript
  4. CSS Fundamentals
  5. Media with HTML 5
  6. JQuery Fundamentals
  7. CSS Positioning and Layout
  8. HTML 5 Sockets and Workers
  9. jQuery UI
  10. CSS Typography and Media
  11. HTML 5 Canvas and SVG
  12. Modern JavaScript Libraries
  13. CSS Animations and Transitions
  14. HTML 5 Storage and Geolocation
  15. Dragging, Dropping, and File System Access

Optional Content:

  1. Building Windows 8 Metro Applications with HTML 5
  2. WinJS for Windows 8
  3. WinRT and JavaScript

Test-First Development with C# (3 days)

This course teaches and demonstrates the test-first development approach to building software. We’ll discuss the value of unit testing and uncover the essence of the red-green-refactor workflow. The course will also examine various styles, techniques, and tools used by test-first development teams.

  1. Introduction to Test-First Development
  2. Writing Unit Tests – the Fundamentals
  3. Writing Unit Tests – Style and Organization
  4. Refactoring
  5. Driving Design
  6. Isolating Code
  7. Behavior Driven Development
  8. Acceptance Test Development
  9. Modern OOP and Functional Techniques for C#

Pluralsight Videos

 

image