Share What We Say



Filter by:

Blogs

The Good and Bad For MtGox.com - Helping it Scale With Web Performance Optimization

Professional ASP.NET Blog - Fri, 2013-04-12 13:30
BitCoin seems to be latest rage with wild value fluctuations. The past few days have seen a very wild roller coaster for the online currency. Most of the world's BitCoins are exchanged at MtGox.com , which has had some issues either with a denial of service...(read more)
Categories: Blogs

HTML5 Is Ready For the Big Time, Are You?

Professional ASP.NET Blog - Sun, 2013-04-07 02:11
Much has been said and 'debated' in recent years about the viability of HTML5. It should be obvious where I stand if you read my Blog or talk to me in person. HTML5, CSS3 and JavaScript are certainly ready and have been for a while. The big problem, as...(read more)
Categories: Blogs

Use a DataList element for an HTML5 Auto Complete Experience

Professional ASP.NET Blog - Mon, 2013-03-25 17:11
Guided user input is almost always a good idea when architecting a data entry experience. You want to help the user avoid potential mistakes. With on screen, mobile keyboards you want to reduce the keystrokes required to enter data and at the same time...(read more)
Categories: Blogs

Why I Think Microsoft Should Buy Barnes & Noble

Professional ASP.NET Blog - Tue, 2013-03-05 17:54
One of the topics discussed recently on Windows Weekly was Barnes and Noble's financial issues . During the discussion Mary Jo Foley mentioned the idea of Microsoft buying the retail chain. She mentioned it would give them, a sizable retail presence....(read more)
Categories: Blogs

More Than A Week With The Surface Pro - Very Happy

Professional ASP.NET Blog - Mon, 2013-02-25 21:02
Valentine's morning I gave myself a gift I had been wanting for quite some time, a 128GB Surface Pro . Acquiring my Surface may have been the most cumbersome task I have ever done to purchase a product, and I got a dozen Furby's when they were...(read more)
Categories: Blogs

Deeptissue.js A Gesture Library For the Modern Web

Professional ASP.NET Blog - Tue, 2013-02-19 16:13
Today I am announcing Deeptissue.js , a library to make life easier for developers in the modern world. The inspiration for this library is rooted in my selfish need to have something that would bridge the gap between the WebKit Touch API , Internet Explorer's...(read more)
Categories: Blogs

Import BizTalk binding file sets incorrect pipeline

Leandro Blog - Wed, 2013-02-13 20:56

I thought would be better to show rather explain so there you go http://www.screenr.com/AOD7

 

Categories: Blogs

A Subtle CSS Rotation to Delight Users

Professional ASP.NET Blog - Wed, 2013-02-13 17:37
By now you should know that I am constantly on the lookout for cool and bad features implemented by web sites all the time. Last week I was reading some posts on Christian Hielman's blog . As I passed my mouse over the navigation on the right I noticed...(read more)
Categories: Blogs

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

Customizing a Sharepoint 2010 Search Center

Soledad Blog - Fri, 2012-07-20 21:12
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)
Categories: Blogs

Where is my Sharepoint 2010 Custom Timer Job running?

Soledad Blog - Sun, 2012-06-10 02:51
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)
Categories: Blogs

Azure Flavor for the Sharepoint Media Component

Soledad Blog - Sun, 2012-05-27 13:35
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)
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:

menu

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

menu-css

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:

package

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:

configure

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:

site

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 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 /* 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)

 

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

installexpress

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

expresscmd

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

npminstall

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

nodeapp

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:

approuter

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:

routes

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.

routeindex

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:

indexjade

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:

repl

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:

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:

wpi

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:

Categories: Blogs

New Blog: leandrob.com

Leandro Boffi Blog - Sat, 2011-08-20 23:12
I’ve moved my blog to: http://leandrob.com. Regards!!
Categories: Blogs

Windows Azure & WF 4.0 - Creating a Workflow-Driven WorkerRole

Leandro Boffi Blog - Fri, 2011-08-12 22:33
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 [...]
Categories: Blogs

Quick Tip: Using Entity Framework Pluralization stuff in your code

Leandro Boffi Blog - Fri, 2011-08-05 01:40
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 [...]
Categories: Blogs