Hi,

I’ve made a post for all of you interested in making Visual Studio extensions to work for VS2010 and VS2012 with a single package extension

http://www.corvalius.com/blog/index.php/corvalius/targeting-an-extension-for-vs2010-and-vs2012-using-a-single-manifest/

Almost all Sharepoint sites make use of Sharepoint Search Capabilities. Sharepoint also provides OOB site templates for setting up search centers. Today I would like to show how we customized the OOB Basic Search Center site to meet the overall site’s...(read more)

When building a custom timer job for Sharepoint 2010, special attention should be put on where do we need this job to run. When we have a farm environment, we can choose to run the job on all servers, in one particular server, only the front end servers...(read more)

Some time ago I wrote about a Media Processing Component for Sharepoint that I was working on. It is a Media Assets list for Sharepoint that lets you choose where to store the blob files. It provides also intelligence for encoding videos, generating thumbnail...(read more)

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 Semantic.gs

Semantic.gs 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 semantic.gs 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 semantic.gs 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:

/* semantic.gs 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 )

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 /* semantic.gs 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)

 

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:

c:\node\testapp>.\node_modules\.bin\express

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.

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 http://127.0.0.1:8000/');

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:

• http://www.heroku.com/
• https://no.de/
• http://nodejitsu.com/
• and obviously Azure!

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/nvm.sh), and then either execute or add this to your bash profile file: . ~/nvm/nvm.sh

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:

• http://www.nodebeginner.org/
• http://nodeguide.com/beginner.html
• http://blog.nodejs.org/
• http://howtonode.org/

I’ve moved my blog to: http://leandrob.com. Regards!!

Worker roles are a great resource we can use to execute background tasks like integration, migration, scheduling tasks, etc, but also are very useful to run asynchronous tasks triggered by the user. All this kind of processes usually are composed by a set of steps, and we usually hardcode the flow in which those steps [...]

Since his 4.0 version, Entity Framework, offer us a very nice feature called “Pluralization”. Basically when we write an entity name in the EF designer, EF pluralizes that word in order to get the appropriate EntitySetName. This is a very nice detail, and I love it. How it works? Yeah, as you can imagine, they basically [...]

I’m glad to announce Hermes, a new open source project developed by TellagoDevLabs. It implements a Publish/Subscribe pattern exposed through a RESTFull API  and MongoDB as backend for storage.

Hermes allows us to create Topics and then Publishers and Subscribers will be able to publish and retrieve messages for a specific Topic.

Hermes is message agnostic, that means that it doesn’t care about what the message contains and its data type.

Its RESTFull interface allows us to interact with Hermes using plain HTTP request. The example below shows us how to publish the string “Hello Hermes!” for a Topic (In this example the Topic’s ID is ‘4e1aeec5e892e70b044c695c’)

To publish the message we should:

1. Create a HttpWebRequest
2. Set request’s method to POST
3. Complete the Content-Type Header with a valid value, in this case it will be ‘text/text’
4. Set Request’s body with the message, in this case it will be ‘Hello Hermes!’ but you can set any stream as message’s body.
5. Optionally, you can add custom HTTP headers, in this sample I added a header named ‘Foo’

// Create HTTP POST request var request = (HttpWebRequest)WebRequest.Create("http://localhost:6156/messages/topic/4e1aeec5e892e70b044c695c"); request.Method = "POST"; // Add Body and Content-Type header to the Request request.ContentType = "text/text"; using (var stream = request.GetRequestStream()) { using (var writer = new StreamWriter(stream)) { writer.Write("Hello Hermes!"); } } // Add a custom header to the request request.Headers.Add("foo","some data"); // Publish the message var response = (HttpWebResponse)request.GetResponse(); // Displays HTTP status code and message's url. Console.WriteLine("HttpStatusCode: {0}", response.StatusCode); Console.WriteLine("Header Location: {0}", response.Headers["Location"]); Console.ReadKey();

When Hermes processes the request, it store the request’s body an all request’s headers, and after that it returns a HTTP response with status code 201 CREATED, and the Location HTTP header containing the URL to the message just published.

We can retrieve the message sending an HTTP GET request to the URL receive at Location header:

// Create HTTP GET request to Retrieve the message request = (HttpWebRequest)WebRequest.Create(response.Headers["Location"]); request.Method = "GET"; // Send the request response = (HttpWebResponse)request.GetResponse(); Console.WriteLine(); Console.WriteLine("Retrieving message"); Console.WriteLine("Foo header: {0}", response.Headers["Foo"]); Console.WriteLine("Message body: {0}", new StreamReader(response.GetResponseStream()).ReadToEnd());

Or we can retrieve all the messages for a specific topic sending an HTTP GET request to the Topic’s URL. The response will contain an array of links to each topic’s message:

// Create HTTP GET request request = (HttpWebRequest)WebRequest.Create("http://localhost:6156/messages/topic/4e1aeec5e892e70b044c695c"); request.Method = "GET"; // send request response = (HttpWebResponse)request.GetResponse(); Console.WriteLine(); Console.WriteLine("Polling topic's messages"); var contentAsString = new StreamReader(response.GetResponseStream()).ReadToEnd(); var content = XDocument.Parse(contentAsString); Console.WriteLine(content);

I ran the sample above against a Topic that contains two messages, below is its output:

In future posts I will write about the Client API that we created in order to simplify consuming Hermes.

You can find the complete source code here and its documentation  here. And you can also find more information in these blogs:

• http://joseoncode.com/2011/07/12/introducing-hermes/
• http://thegsharp.wordpress.com/2011/07/12/introducing-hermes-open-source-pubsub/
• http://geekswithblogs.net/BizTalkUnleashed/Default.aspx
• http://weblogs.asp.net/cibrax/archive/2011/07/12/hermes-a-new-open-source-alternative-for-doing-pub-sub-over-http.aspx
• http://weblogs.asp.net/gsusx/archive/2011/07/12/tellago-announces-hermes-a-publish-subscribe-messaging-engine-based-on-http-and-mongodb.aspx

The first time that I read something about MapReduce was in a paper from Google, its title is “MapReduce: Simplied Data Processing on Large Clusters“

The idea captivated me from the beginning but I haven’t any opportunity to use it, until now, when a project took me over to MongoDB and find that MapReduce is part of it.

So, in this first post I’m going to talk about how MapReduce algorithm works, with a very simple c# implementation as a sample. In a future post I will show you how we can use it in MongoDB

What is MapReduce?

It is an algorithm that can process a very large amount of data in parallel. It receives three inputs, a source collection, a Map function and a Reduce function. And it will return a new data collection.

Collection MapReduce(Collection source, Function map, Function reduce)

The algorithm is compossed by few steps, the first one consists to execute the Map function to each item within the source collection. The Map will return zero or may instances of Key/Value objects.

 ArrayOfKeyValue Map(object itemFromSourceCollection)

So, we can say that Map’s responsability is to convert an item from the source collection to zero or many instances of Key/Value objects. We can see this at the picture below.

At the next step , the algorithm will sort all Key/Value instances and it will create new object instances where all values will be grouped by Key.

The last step will executes the Reduce function by each grouped Key/Value instance.

ItemResult Reduce(KeyWithArrayOfValues item)

 The Reduce function will return a new item instance that will be included into the result collection.

Sample

Let me show you a very simple c# implementation of this algorithm, it counts all the vocals in an array of strings.

I created a generic MapReduce functon that represents the algorithm’s orchestation, and I also implemented the Map and Reduce functions that are required as inputs of the MapReduce. The implementation of the Map and Reduce functions are specifics for the task that we want to acomplish, in this sample it is “To count all vocals within a set of strings”

using System; using System.Collections.Generic; using System.Collections.Concurrent; using System.Linq; using System.Threading.Tasks; namespace MapReduceSample { // This class represents a collection's item result class VocalCount { public char Vocal; public int Count; } class Program { static void Main(string[] args) { // "lines" represents the source collection. var lines = new[] { "How many vocals do", "these two lines have?" }; foreach (var line in lines) { Console.WriteLine(line); } Console.WriteLine(); // Invokes MapReduce var results = MapReduce(lines, Map, Reduce); // Displays result foreach (var result in results) { Console.WriteLine("{0} = {1}", result.Vocal, result.Count); } Console.ReadKey(); } /// <summary> /// The map function counts vocals in a string /// </summary> /// <param name="sourceItem">A line to be processed</param> /// <returns>A collection of Key/Value instances. /// Where the key is the vocal, and the value is its count.</returns> static IEnumerable<KeyValuePair<char, int>> Map(string sourceItem) { return sourceItem .ToLower() .Where(c => "aeiou".Contains(c)) .GroupBy(c => c, (c, instances) => new KeyValuePair<char, int>(c, instances.Count())); } /// <summary> /// The reduce function compute the total count for each vocal /// </summary> /// <param name="reduceItem">A Key/Values instance. Where the key is the vocal, /// and the value is an enumeration of all counts</param> /// <returns>A result instance, VocalCount</returns> static VocalCount Reduce(KeyValuePair<char, IEnumerable<int>> reduceItem) { return new VocalCount { Vocal = reduceItem.Key, Count = reduceItem.Value.Sum() // Computes total count }; } /// <summary> /// A generic implementation of MapReduce /// </summary> /// <typeparam name="TSource">Type of the items at the source collection</typeparam> /// <typeparam name="TKey">Key's type used by Map and Reduce functions</typeparam> /// <typeparam name="TValue">Value's type used by Map and Reduce functions</typeparam> /// <typeparam name="TResult">Type of the items at the returned collection</typeparam> /// <param name="source">Source collection</param> /// <param name="map">Map function to apply</param> /// <param name="reduce">reduce function to apply</param> /// <returns></returns> static IEnumerable<TResult> MapReduce<TSource, TKey, TValue, TResult>( IEnumerable<TSource> source, Func<TSource, IEnumerable<KeyValuePair<TKey, TValue>>> map, Func<KeyValuePair<TKey, IEnumerable<TValue>>, TResult> reduce) { // Collection where map's result will we stored var mapResults = new ConcurrentBag<KeyValuePair<TKey, TValue>>(); // Invokes, in a parallel way,the Map function for each item at source Parallel.ForEach(source, sourceItem => { foreach (var mapResult in map(sourceItem)) { mapResults.Add(mapResult); } }); // Groups al values by key. var reduceSources = mapResults.GroupBy( item => item.Key, (key, values) => new KeyValuePair<TKey, IEnumerable<TValue>>(key, values.Select(i=>i.Value))); var resultCollection = new BlockingCollection<TResult>(); // Kick off a reduce task Task.Factory.StartNew(() => { // Invokes, in a parallel way,the Reduce function for each item at reduceSources Parallel.ForEach(reduceSources, (reduceItem) => resultCollection.Add(reduce(reduceItem))); // Need to do this to keep GetConsumingEnumerable below from hanging resultCollection.CompleteAdding(); }); // Use resultCollection.GetConsumingEnumerable() instead of just resultCollection // because the former will block waiting for completion and the latter will // simply take a snapshot of the current state of the underlying collection. return resultCollection.GetConsumingEnumerable(); } } }