Fun installations with NuGet, Extension Manager and Web Platform

so... i have read in blogs mentions and stuff about NuGet (formerly known as NuPack)
but i never actually used it..

i started using it last week at work and i love it! its easy to use, you have so much packages there but also you have the rating and the amount of downloads which is very important..
you want to know if the "package" you are about to start using has enough people using it so you can get support online. also it tells you about updates for those packages.

so what are you waiting for? go to tools --> Extension Manager
and install NuGet Package Manager
you wont regret it.

speaking of the Extension Manager.. same thing! use to the Extension Manager to power up your Visual Studio, i installed these extensions:

Nuget Package Manager - of course
Productivity Power Tools - a must have. by Microsoft itself, all kinds of small improvements for visual studio. read about Power Tools


Visual Nunit 2010 - just because its more convenient then the regular desktop ui for Nunit (and of course installed Nunit through NuGet)

JSEnhancements - very nice and convenient extension for JavaScript, it lets you collapse code blocks in JavaScript , i really think it saves me a lot of time when editing large JS files.
you can install it here

there is the JavaScript Parser extension which is very popular. i didn't get a chance to download it yet but its suppose to be good.

the next thing i played with this week was the Web Platform Installer in iis7

same idea like the extension manager but can save you more valuable time..
ill explain.. this week i decided to check out some CMS systems and see which is the best for me. for each CMS i had to go to there websites download, read how to install it and waste a lot of my time. but then i real about the Web Platform Installer, just got in clicked on the CMS category and with a click of a button install any CMS i want and start playing with it.

final thoughts:
since when Microsoft started being so cool? ;-) and why didn't i start using and playing with this stuff before?

have a good one, ill get back to coding

Making a site social

making a site social

i recently decided to find a new job. after A couple of interviews i got accepted to a cool little company: http://www.gigya.com

one of the company's services is a JavaScript api to help you, in a very easy way, connect your site to all social networks
because everyone knows that today its all about social networks...
so i decided to give the product a try and experiment with it before i even started working there.

making a site social has a lot of benefits like increasing traffic, creating  a better surfing experience for the user by connecting with an account he already has on Facebook
and seeing his picture on your site. and so on...

so here is the full coverage of making a site social using Gigya's api.

* Gigya's service is free of charge as long as you have less than a THOUSAND unique users each month. 

the first step we need to take in order to start working with the api is to register on the site:
https://www.gigya.com/site/Register.aspx

after registration we will receive an api key.
which is enough to play around with the api and check it out.
but... if you want to upload it to production and use it properly you will have to set api keys you get from each social network.

press the edit link, then press the site settings button on the right. this will lead you to the settings page. there are a lot of settings and permissions stuff you can set there.
but first of all get the information needed for each social network you plan on working with.

now we can get to work,

i think the first basic thing a site needs is the ability to give the user the power to share things with their friends
so...  if we take a look at the available plugins page http://www.gigya.com/site/partners/widgets.aspx
there will be 2 plugins that fits us a "share" plugin and a "Share Bar" plugin

the share bar plugin is more what i had in mind for my site so ill just start with it..

people are very used to these kinds of social bars on websites which is good for us.

so each plugin in the plugin page has a wizard to help you customize the plugin the way you want with different appearances and to select the social networks.

then the wizard of course produces the code you need to put in your site in order for that plugin to work.
the first piece of code you will need to add to your site in order to work with the api is the api itself :) and the api key.
code produced by the wizard looks like this:

<script type="text/javascript" src="http://cdn.gigya.com/js/socialize.js?apiKey=xxxxxxxxxxxxx"></script>

<script type="text/javascript">

    
var conf= { 

      APIKey: 'xxxxxxx-xxxxxxxxxxxxxx'

    }

</script>

this script is supposed to be added in the head. for the first line its true :)
but of course putting scripts in our page is not good layer separation lines 3 to 5 should go in some general js file in your site.
also so we wont just declare a global variable in the global namespace i enter the api key to the Gigya api namespace like so:

gigya.services.socialize.apiKey =
{
          APIKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
         , enabledProviders: 'facebook,twitter'
}

the next piece of code we get is something like this:
depending of course on what settings and social networks you choose in the wizard.
i only needed this 4.

<script type="text/javascript">
var act = new gigya.services.socialize.UserAction();
act.setUserMessage("This is the user message");
act.setTitle("This is my title");
act.setLinkBack("http://www.gigya.com");
act.setDescription("This is my Description");
act.addActionLink("Read More", "http://www.gigya.com");
var showShareBarUI_params=
{
  containerID: 'componentDiv',
  shareButtons: 'facebook-like,google-plusone,share,twitter',
  userAction: act
}
</script>
<div id="componentDiv"></div>
<script type="text/javascript">

gigya.services.socialize.showShareBarUI(conf,showShareBarUI_params);
</script>

here, don't forget to change the domain Gigya to your domain.
this code will render the share bar, inside the: <div id="componentDiv"></div>
again, as before, we don't want these scripts to be inside our HTML. so we will extract the JavaScript code to a function (with a good name like RenderShareBar or similar...)
inside a js file, and call it from the onload or the $(document).ready, whatever, as long as we keep our layers separated.

and that's it! you will have a share bar in your site with just minutes of work, very cool.

so in conclusion:

making your site social is always good. so you definitely want to do it, and you can do it by yourself of course all social networks like Facebook and twitter has there
own api you can use to add and use them in your site, and its not that hard. but.... if you want to add multiple social networks then it starts getting annoying...
the Gigya api wraps all of this networks in one easy to use package with is very convenient.
another benefit is that you wont have to worry if a certain api of one of the networks changes.
another cool thing is the analytics you get in the dashboard. where you can monitor the "social activity" on your site.

http://www.gigya.com/public/platform/analyze.aspx

so that's it with the registration and share bar.
next post ill try the social login feature which i think is the most important one. so annoying when sites make you register and don't have some kind of social login...  :)

May the force be with you.

Using a css reset

After seeing that a lot of people at work don’t use a css reset I want to address the subject.

I highly recommend using a css reset purely for the reason that it makes your life a little bit easier, when developing a cross browser site.

While developing apage and building it div by div paragraph after paragraph we start to see little differences between all of our browsers.
The reason for that is that different browsers give different default styles to html elements.
That’s very annoying for us.
So the first thing I recommend doing is putting a css reset on your site while starting to develop. it can save you a lot of time and css attributes
because in the end while developing you in fact do override the browser's default style settings for element. But.. it takes you more time to find those places (thank god for firebug)
and… You are writing all kind of attributes like: margin:0px; padding:0px; in a lot of your classes.

So that’s exactly what a css reset does, it overrides those default style settings and then you can start off fresh.

There are css reseters out there but I think the two most common are:
YUI css reset,
and a css reset by erik meyer.
I use erik's css reset for quite some time and its great.

You can download them here:

YUI css reset

Erik meyers

For already developed sites:
I wouldn't recommend to just add a css reset file to your site unless you are willing to spend the time required to go over all of your site with all the browsers and check to see that the css reset didn’t destroy anything…

In conclusion:
Don’t get me wrong this is not some kind of magic trick for building cross browser websites
you will still have annoying problems of course. But surely there will be less. And at least it saves us some time.

JavaScript style guide by Google

So i came a cross this Google document today, which is a JavaScript Style guide.
i think its really nice
so i decided to share it...

enjoy!

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

jQuery selector for .net controls

I guess everyone that developed in ASP.Net came across the annoying problem of selecting server elements by id.
The problem is the server controls render id's in a way that they will always be unique and they look like this: "ctl00_txtName"
which is ok, because by w3c standards elements must have a unique id.


But… when we want to select that type of element with the function getElementById
we run into a dilemma, make the code ugly and write getElementById("ctl00_txtName");
Or… place the JavaScript code inside an aspx page and write:
getElementById("<%= txtName.ClientID %>")


Even though the second option is the popular one, I didn’t like any of them. 
I used to render (from the code behind) all the id's I needed as some kind of JSON object and then I could still place all of my JavaScript code in .JS files. (where it belongs!!!)
Anyway… since the wonderful thing we call "jQuery" entered our life the whole client scripting experience became much nicer so why would this ancient problem be any different?
It shouldn't! There is a nice jQuery solution for this too.


Just to be clear this is not my original idea, I came across it at sometime and it can probably be found in some form or another on the web. 


So what is the solution? 
Using a simple jQuery selector of type "ends with" we can construct a very simple but useful function for selecting .net controls.


Anyway the function goes as follows:

function $$(id, context) {
    return $("[id$=_" + id + "]", context);
}

this selector selects all elements with an id attribute that ends with
"_theId" this will work for the example Id I gave earlier "ctl00_txtName"
if we were to call the function as so:  $$("txtName") we would indeed receive 
the element we wanted


But… there is a chance that we would also receive this element: 
"ctl00_secondForm_ctl00_txtName"
And for that reason there is another parameter to the function, the context
parameter is just passed to the jQuery selector  as always, so he would only 
search for our element in that context, like so:
$$("txtName", $("#container") );


That really helps when you are not sure if there is more than one element on the page that has an id that ends with the name you are looking for, and also improves performance of the selector.


I know this function is not bulletproof but it is very nice to have. 
We can make it even nicer like so:

function $$(id, context) {
    var el = $("#" + id, context);
 
    if (el.length < 1) {
        el = $("[id$=_" + id + "]", context);
    }
 
    return el;
}

The added code makes the
function a little bit cooler but… 


it hurts our performance a little bit too… because we are now running 2 jQuery selectors
but I think it is worth adding.
in case your element is not really rendered with a .Net id and you got confused
or someone changed your code and now that element is a regular Html element
we would still want our client code to run and not have to start changing it...
so I think it’s a nice addition.


Now to make our code even nicer we could add the function as a custom function to
jQuery like so:

$.fn.GetByNetId = function (id) {
    return $$(id, $(this));
}

And now instead of: $$("txtName", $("#container") );
we could write:
$("#container").GetByNetId("txtName");
which is a lot nicer :)
a new great thing is that since .Net 4 we no longer need solutions like this! 
Since .Net 4 we can just set the new "ClientIDMode" attribute to static
and that's it, that element will have the same id in the client as it has on
the server.

So that's it I guess… hope this function will save you some headache and
make your code a bit nicer like it did mine.   :)
May the force be with you

My First Blog Post

Finally, here I am, starting my blog.

My name is Guy Schaller. 
I am going to blog here mostly about client side development, but not just... 



A special thanks to Uri Lavi my mentor, who is helping me become the best developer I can be.