web development

“Pragmatic Guide to Sass” is in Beta!

by Joey deVilla on August 24, 2011


Sass, which is said to be short for “Syntactically Awesome Stylesheets”, is a meta-language that extends CSS3 to do things that plain old CSS can’t do easily or at all, with goodies we’ve come to know and love from our programming languages: variables, nesting, mixins and inheritance. It compiles to well-formatted standard CSS, and you can even have Sass watch your Sass files so that it automatically updates your compiled CSS files as you update your Sass source.


Sass is the creation of Hampton Catlin, a “Shopifriend” and programmer who’s all about optimizing his programming tools. When he got fed up with building HTML templates for his Rails projects, he created the Haml markup language. Haml’s popular enough that it’s found its way into the most unlikely of places, such as the .NET world, where they’ve implemented it as NHaml. Just as Haml is Hampton’s optimization of HTML, Sass is his optimization of CSS.

Pragmatic guide to sass

It’s only fitting that Hampton is the co-author of the upcoming Pragmatic Bookshelf book Pragmatic Guide to Sass. Like Hampton, it gets straight to the point; it’s going to be about 100 pages long. He recently tweeted that “doing more than 100 pages just seemed like filler.” Given that I’m already behind in my tech reading, I’m glad that Hampton (and his co-author Michael) insist on keeping things concise.

Pragmatic Guide to Sass is currently in beta. You can get it in ebook format immediately (with downloadable updates as more of the book is finished, including the final, finished ebook) for US$13 or buy the ebook + paper book bundle, where you can get the ebook now and both the paperback edition and the final, finished ebook when the book is complete for US$30.

This article also appears in the Shopify Technology Blog.


Introducing WebMatrix

by Joey deVilla on July 7, 2010

What is WebMatrix?

webmatrixBy now, you’ve probably seen the tech news reports as well as Scott Guthrie’s announcement about WebMatrix, Microsoft’s lightweight web development web development system that packages a web development tool with a number of new web technologies:

  • IIS Developer Express: a lightweight, free-as-in-beer web server with simple setup, runs on all versions of Windows and is compatible with the full-on version of IIS 7.5
  • SQL Server Compact Edition: a lightweight, free-as-in-beer file-based database with simple setup that can be embedded within ASP.NET applications, supports low-cost hosting and whose databases can be migrated to the full-on version of SQL Server.
  • ASP.NET “Razor”: A new view engine option for ASP.NET for easy and clean templating with a simple syntax. You can use Razor to embed C# or VB into HTML.

WebMatrix ties these goodies together in a nice simple package that the beginning web developer will find easy to use and that the pro web developer will find handy for building quick sites. These parts are also available individually to ASP.NET developers and will soon be available to ASP.NET MVC developers.

If you’re looking for a quick video tour of WebMatrix, chack out the Channel 9 video below:

Get Microsoft Silverlight

Can’t see the video? You can download and install Silverlight or download the video in iPod, MP3, PSP, WMA, WMV, WMV (High) or Zune formats.

A Quick Look at WebMatrix’s Parts

WebMatrix provides a simple, task-based interface for quickly creating web sites, both static and dynamic:

WebMatrix "Quick Start" screen, with four links: My Sites, Site from Web Gallery, Site from Template, Site from Folder

It makes it easy to include open source ASP.NET- and PHP-based web applications in your site:

WebMatrix App Gallery page, featuring apps like DotNetNuke and WordPress

It’s also easy to manage applications in a WebMatrix site:

BlogEngine.NET management page in WebMatrix
If you’d rather write your own web app in WebMatrix, you can do that too. There’s a rich file editor:

WebMatrix file editor, showing the site.master page in BlogEngine.NET being edited

And database definition and management tools:

Screenshot of table definiton and contents in WebMatrix's database tools

There’s also sample code and web helpers to make your life easier and show you what’s possible, such as this handy sample that makes it easy to make a Twitter client. Here’s the code that takes advantage of the sample:

WebMatrix code editor showing a Twitter class' "Search" method being called

…and here’s the result:

Screenshot of sample Twitter app in WebMatrix

If you need to get hardcore, you can open your WebMatrix project in Visual Studio or even the free-as-in-beer Visual Web Developer 2010 Express:

WebMatrix toolbar, with the "Launch in Visual Studio" button highlighted

Previewing your WebMatrix site in multiple browsers is a snap:

The "Run" button in WebMatrix, showing the different browsers you can use to preview your site

Deployment is nice and easy once you’re doing editing your site:

The "publish" button and screen in WebMatrix

Find Out More

I haven’t had a chance to take WebMatrix out for a proper spin yet, but I’m hoping to over the next few days. It’s a collection of cool technologies (which I ‘ll also use in my regular ASP.NET MVC development) wrapped together by a nice, simple tool that’s great for the web developer who’s not working on enterprise sites. I can also see myself using it as a handy prototyping tool.

If you’d like to find out more about WebMatrix, take a look at these:

Download the WebMatrix Beta now!

WebMatrix has just been released as a beta and available for download right now! We want you to try it out and let us know what you think, because we’ll be refining it based on what you tell us.

This article also appears in Canadian Developer Connection.