Share What We Say

Filter by:


Get A $100 Coupon for Buying a New Touch Laptop

Professional ASP.NET Blog - Wed, 2013-02-13 03:02
Ok, so you were not able to get a Surface or maybe the Surface is not really for you. Good News! You can get a $100 coupon to the Microsoft Store when you order a new Touch Laptop for $699 or more . The promotion runs through Monday February 18th. Unfortunately...(read more)
Categories: Blogs

Stylus, a better CSS

G# Blog - Sat, 2012-05-26 15:41

There are a lot of wrong things about CSS, but in the there’s been other languages created to empower CSS, and once you get used to any of these there’s no going back. The most common are SASS and LESS which have been around for a while. While these languages are very good (in particular SASS) and they do most of the things that Stylus does, there’s one aspect of CSS that they don’t address by design: the syntax. Both SASS and LESS try to stay as close as CSS original syntax as possible to minimize the impact of having to learn a new language. While this is something positive, in my opinion Stylus approach is much better.

A few of the most cool features these languages provide:

  • Variables
  • Functions
  • Nesting rules

Stylus not only empowers CSS but it also improves the syntax for much better readability, for example:

  • Braces are optional.
  • Colons to separate property from values are optional.
  • Semi colons at the end of lines are optional.

Here’s an example of how the style of a vertical menu could look like:


Needless to say that this looks clean, simple and concise. As opposed to:


Semantic Markup

For me one of the most important reasons why I wanted to use SASS, LESS (or Stylus in this case), is that it allows you to really start coding html with semantic markup. From wikipedia, semantic markup is:

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation (look).

This basically means that you can write your html in a way that describes the meaning of what it holds, rather than the style. As an example of this, you won’t need to use classes like “span_12”, “vertical”, “horizontal”, “right”, “left” anymore; all these represent presentational concepts rather than explaining the meaning of the content. Writing html in a semantic way, makes much more sense and allows for safer refactorings and redesigns of your websites.

Stylus in with Expressjs

Using stylus with Expressjs could really not be any simpler. All you have to do is add the “stylus” module to the package.json file like this:


Then, just add the following like of code right before you set up the static middleware for your express application:

app.use(require('stylus').middleware({ src: __dirname + '/public' }));

Should look somethig like this:


Stylus is smart enough that it will compile the “.styl” files whenever these files change into “.css” files so that from your views you will only have to reference the “.css” file version.

So go ahead and create a “site.styl” file inside of your “stylesheets” folder, and put the following code:

body body: red

Now run your node application and browse to http://localhost:3000/stylesheets/site.css and you should see something like this:


Now that we have stylus working let’s do a more realistic scenario.

Introducing is a grid system which has a version built for stylus that allows you to create all kinds of grid systems and layouts, even fluid, fixed and/or responsive. I like it because it is extremely easy to setup and use. Download the files from the website and copy the grid.styl file that is in the zip file into your “stylesheets” folder (and while you are at it you might as well use the reset.css).

Next, we need to import the grid.styl file into our site.styl file with this line in the top of the file:

@import grid

Now let’s see how to work with stylus and to make a fluid layout and semantic markup. One of the ways in which you can tell whether you are being semantic is if you code your markup without worrying about how it will look later. So in my case this is the markup (in jade format) that I really want to have in my page:

doctype 5 html head title= title link(rel='stylesheet', href='/stylesheets/site.css') body #container header h1 My Super Layout #menu ul li Home li About us li Contact us #sidebar ul li Option 1 li.selected Option 2 li Option 3 #content body!= body

So nothing out of the ordinary really, if you want to see what it looks like you can see it here, just a container with the header, a menu and then a side bar and a content section. Suppose that I would like to have this site in a fluid layout with a maximum width of 960px with a grid system of 12 columns. Using this is extremely simple to do, we already imported the grid.styl, and now we have to specify the amount of columns by setting the following property (which actually is 12 by default):

columns = 12

Now we are going to tell it that we want to be fluid:

/* make the grid fluid */ total-width=100%

And for having a max width of 960 and the content centered, we’ll apply the following style to the container:

#container max-width: 960px margin-left: auto margin-right: auto

Honestly, it couldn’t be any easier. Now let’s keep on with the rest of the layout. I want the header to occupy the entire width of the layout, so that’s 12 columns in the grid system we chose:

header column(12)

So normally, if we would have wanted to do this in plain old CSS, we would have have to add the “header” selector to some rule shared with every other element we wanted to occupy the entire with, and we would end up with a pretty messed up CSS pretty quick.

We want the menu to be horizontal, and to take the entire width so we create a class “horizontal” with the common css for styling horizontal lists, and we extend it with the menu specific properties:

.horizontal li list-style: none outside none display: inline margin-left: 10px padding-left: $padding &:first-child padding-left: 0 margin-left: 0 #menu column(12) ul @extend .horizontal margin: 15px 0px li border-left: 1px solid grey &:first-child border-left: 0

Even when we are using a class that has presentational meaning, we are not touching our markup (which is what we wanted Smile)

Same thing for the Side Bar, except this time, we only want the side bar to occupy a part of the width in our page. How much? Let’s say 3 columns, which leaves us with 9 columns for the actual content of the page. And we want to add an extra rule that says that if the list item is selected, then it should have a red line in the right border. Notice the use of the “&” character in order to access the parent “li” with the extra “selected” class. By doing this the entire style for the side bar resides in one single block of code.

.vertical li list-style: none outside none display: block margin-bottom: 10px #sidebar column(3) ul @extend .vertical li border-bottom: 1px solid grey &.selected border-right: 3px solid red; #content column(9)

And in case you were wondering how the entire file looks like here it is (much cleaner and prettier than CSS, LESS or SASS in my opinion):

@import "reset.css" @import grid /* make the grid fluid */ total-width=100% /* some common variables */ $font_xl = 36px $padding = 10px $theme_color = red body font: 14px "Lucida Grande", Helvetica, Arial, sans-serif h1 font-size: $font_xl margin: $padding 0 /* since it's fluid, let's put a max width and center the content */ #container max-width: 960px min-height: 480px margin-left: auto margin-right: auto header column(12) border-bottom: 1px solid grey /* this can be reused whenever we need a horizontal list */ .horizontal li list-style: none outside none display: inline margin-left: 10px padding-left: $padding &:first-child padding-left: 0 margin-left: 0 #menu column(12) ul @extend .horizontal margin: 15px 0px li border-left: 1px solid grey &:first-child border-left: 0 /* this can be reused whenever we need a vertical list */ .vertical li list-style: none outside none display: block margin-bottom: 10px /* between the side bar and the content we should have 12 columns */ #sidebar column(3) ul @extend .vertical li border-bottom: 1px solid grey &.selected border-right: 3px solid $theme_color #content column(9)


Categories: Blogs

Getting started with Express for node.js

G# Blog - Thu, 2012-05-24 17:25

Express is an MVC framework built on top of connect that obviously runs on node.js. Express simplifies making websites by adding a series of middleware that will handle the parsing of the requests, the routing, and finally the rendering of the views. I’ll show you how to do your first express.js app which will be extremely easy and simple to do.

First, create a folder for the app, and install the Express module with npm like this:

c:\node\testapp>npm intall express


This will install the express module, and will leave a command line tool that will let us create a simple express app. For executing this command line type the following:



As we can see, express created three folders for us:

Public: these are static files such as .html, .js, .css and images that are considered public and will returned directly if those are requested.

Routes: here is where our controllers will reside. In this folder we will put the scripts that know how to handle requests, and which views to render or which response to send back.

Views: obviously the views are going to be in this folder. Express can handle quite a lot of templating engines which you can choose from. By default Express uses jade (.jade files) which is a very clean and simple syntax.

The other thing that the express command is letting us know, is that we have to run npm tool to update the dependencies. So if we open the package.json we can see that our application right now depends on both Express and Jade:

“name”: “application-name”
, “version”: “0.0.1″
, “private”: true
, “dependencies”: {
“express”: “2.5.8″
, “jade”: “>= 0.0.1″

So let’s run npm to install the necessary dependencies for our app:

c:\node\testapp>npm install


Let’s run the app so see it in action, and we’ll go through each piece later. Use the following to run the website:

c:\node\testapp>node app.js


Now go to http://localhost:3000 in your browser and you’ll see a site with a “Welcome to Express” message. Now let’s see how all this is happening.

Express is built on top of connect.js which allows you to plug middleware in the pipe to handle requests. When you look at the app.js file, you’ll notice two things, one is that it’s using the app.router middleware:


This middleware will allow you to define routes, and specify the functions that will handle that request. The other thing you’ll notice is that after the app is configured, there’s a Routes comment with the following:


Which is saying that it will handle requests to “/” with routes.index. The routes as I pointed out before, are stored in the “routes” folder, so if we look at the routes\index.js file we’ll see how that request is being handled.


Express will figure out which templating engine we are using (Jade in this case), will map the name of the view “index” to the right file, and send back the result of applying that view to the model we passed; which in this case is { title: ‘Express’ }. In our case, the index view is stored in views\index.jade which is using views\layout.jade as the layout (or master page for the ones coming from asp .net). Here’s what it looks like:


Pretty cool, right?? So that’s it for getting started on using Express.

Categories: Blogs

Getting started with node.js

G# Blog - Tue, 2012-05-15 22:10

What is node.js?

node.js is a development platform based on Javascript created by Ryan Dahl and currently maintained by the cloud provider Joyent. The interesting thing about node.js is that it runs in a single thread, and attacks concurrency by trying to block as little as possible (if at all). In it’s most simplistic form, node.js provides a REPL interface for the command line:


node.js happens to be very good at running web servers, apart from being very simple to do so, the non-blocking philosophy makes it a very good allied of concurrency, since it’s not limited to the amount of threads that your process can run. Here’s how a hello world web server looks like:

1: var http = require('http'); 2: 3: http.createServer(function (request, response) { 4: response.writeHead(200, { 'Content-Type': 'text/plain' }); 5: response.end('Hello World\n'); 6: }).listen(8000); 7: 8: console.log('Server running at');

And you could could run this very easily if you save it to a file like this:

node index.js

Another very interesting thing about writing web applications in node, is that you keep the client side and server side languages consistent. If you add a json-document based NoSQL database like mongo to the mix, you have yourself a complete javascript/json environment for developing websites.

Getting started in windows

If you want to get started with windows, you can download the installer from the node.js website. At the moment of writing this post, the version 0.6.18 was only 3MB. After you install, you will find the nodejs installation under you ‘program files(86)’ folder. You can open your cmd or powershell command line, and you will already have the node and npm command at your disposal.

There are a number of cloud services that will host your node.js applications out there like:

Getting up and running in Azure turns out to be pretty simple with the latest SDK they released. You can get the SDK using the Web Platform Installer searching for node:


And you will get a set of powershell commandlets for creating node webroles, and even deploying to azure from the command line.

And last but not least, if you want to host your node.js apps in IIS, you can install IISNode for IIS. From the IISNode, here are the benefits:

  • Process management
  • Side by side with other content types
  • Scalability on multi-core servers
  • Integrated debugging
  • Auto-update
  • Access to logs over HTTP
  • Minimal changes to node.js application code
  • Integrated management experience
  • Other IIS benefits. Port sharing, security, URL rewriting, compression, caching, logging

Getting started in linux

You can also go to the node.js website and download the installer, but there’s another cool way of getting node in your linux environment called “nvm”. Nvm is a sh script that will download, build and manage the different versions of node that you might want to use in your environment. For getting nvm, all you have to do is go to the nvm github website, and copy the script into some file in you computer (for example ~/nvm/, and then either execute or add this to your bash profile file: . ~/nvm/

Once you have nvm, you can do the following things:

Install a specific version:
nvm install v0.6.18

Start using a specific version:
nvm use v0.6.18

…and you are ready to node!

Writing javascript for node is no different than writing javascript for any other platform (including browsers), so you can really any text editor that supports the javascript syntax. Lately, I have been using Sublime Text 2 thanks to my friend Jose Romaniello and it’s awesome and I can use it in both Windows and Linux!

As for resources for starting to use node these seem to be the best out there:

Categories: Blogs

Thu, 1970-01-01 00:00