My project “KnowYourStack.com” (the working title was BizzBingo – a detailed blogpost will follow soon) lays on GitHub and I’ve recognized a Problem where Daniel Lang helped me a lot. At the end he created a Fork for my Project and laid a Pull Request:

The question is: How do I transfer the changes to me?

Because I’m a totally beginner in Git/GitHub I’m going to write it down step by step. The help page on GitHub was a good introduction but at last I need to merge several files during this action which makes this a lot more complicated.

git checkout master
...
git pull https://github.com/dlang/BizzBingo master
... (VIELE DATEIEN werden gezogen)...

Result:

“Automatic merge failed: fix conflicts and then commit the result.”

$ git mergetool

Beware: Before you start make sure you already created a Mergetool. It’s not that difficult and you will find a detailed instruction here. In fact all you have to do is to choose a Merge Program (I’ve chosen KDiff3 but it’s ugly). And after that you need to tell Git which tool is the right one for the mergen process. At the end that’s what the .gitconfig looks like:

[/diff]

	tool = kdiff3

[merge]

	tool = kdiff3

[mergetool "kdiff3"]

	path = C:/Program Files (x86)/KDiff3/kdiff3.exe

    keepBackup = false

    trustExitCode = false

[difftool "kdiff3"]

    path = C:/Program Files (x86)/KDiff3/kdiff3.exe

    keepBackup = false

    trustExitCode = false

After that the files will merge to GitHub with “commit” and “push”. That’s it.

I think that will work – Thanks again Daniel

A little task: each new text line (Carriage Return/ if you press enter ) in a Textarea should be an element on a list – so what’s the easiest way? Actual a basic element in the web and the user make aware distributions – so it would be fair to dignify it.

Little MVC Demo App:

We are going to analyze the input in this text field a little bit closer. In my option the “split” happens on the Server-Side but it’s also possible on JavaScript.

After you’ve klicked on “ok”:

The controller receives the text you’ve entered. After the user pressed “enter” in the Textarea either an \n or a \r\n as “functional character”. ( I think it’s in connection with the operation system…. But that’s another story ).

After that all we have to is to split the string on this sign and then we are able to take care about the single distributions:

  public ActionResult Multiline(string input)
        {
            ViewBag.MultilineRaw = input;

            List<string> eachLine = input.Split(new string[] { "\n", "\r\n" }, StringSplitOptions.RemoveEmptyEntries).ToList();
            ViewBag.MultilineSplitted = eachLine;

            return View("Index");
        }

View:

@using(Html.BeginForm("Multiline", "Home"))
{
    @Html.TextArea("input")
    <button>OK</button>
}
@if(string.IsNullOrWhiteSpace(ViewBag.MultilineRaw) == false)
{
<h2>Input</h2>
<p>Raw: @ViewBag.MultilineRaw</p>
<h3>Each Line</h3>
    <ul>
        @foreach(var line in @ViewBag.MultilineSplitted)
        {
        <li>@line</li>
        }
    </ul>
}

Result:

Not a big deal but maybe a help for some of you.

[Download on Google Code]

What was reserved for mighty Desktop Apps in the past is now coming closer to the web. I’ve going to present three tools to you which are very useful for web developer. At least all the tools are quite cool in there functionality.

Playground for HTML/CSS

If you need a quick Playground for CSS and HTML than you should take a look on Dabblet.com:

The basics are easy to explain: You are able to hitch CSS and HTML Code into the Web surface and you will see the result directly on the Preview.

It’s also possible to save it or share it via Link with somebody else: More Information’s on this Blog or you try it by yourself.

Playground for Javascript (and HTML and CSS)

If you are looking for a Javascript Playground and other additional Frameworks “per Click” a jsfiddler.com a good address:

It’s possible to see some Examples on the Sidebar like for example a simple Twitter Reader.

Here you can deposit CSS/HTML but in fact it doesn’t look so classy like dabblet.com.

Hurl.it – curl online

Last service in this row: hurl.it modeled on curl.

The first examples are directly on the home page like a request to the GitHubAPI. But the service is quite insecure (it wasn’t available the last view days) and there are some problems with answers (the Stackoverflow API doesn’t worked with this Tool).

But at least it is also useful if you want to have a quick play around with a REST Service.

Dart, a Google Javascript alternative was presented a few months ago and the web developer scene are a little bit unsure about the usability of Dart. To declare the language Google has translated the Javascript basics into Dart. The result is this “Translator”.

In my opinion the name doesn’t find that well because it’s only a statistical comparison and it’s not possible to “convert” Javascript Code. I assume it’s the plan for the future.

For those who are interested in Dart: click.

HTML and CSS are not foreign words for me but I regret, I’m not a Web designer – I see myself as a webdeveloper. But at least a dressy side is a must. But thank good there are some ready “Systems”.

Twitter Bootstrap

Twitter Bootstrap is a Toolkit for every kind of Web applications. It includes some basic styles and also some special styles for Buttons, charts, forms and so on. After all it is a smart Grid-System. Compared to other CSS Grid Frameworks Twitter Bootstrap seems to be more “round” and it offers some basic elements.

The best way is to take a look online. You will find a source on GitHub.

Technics behind it

Twitter Bootstrap is using Less to build the CSS and it also contains ready Javascripts for some little UI gimmicks like Popups, Dropdowns, Dialogs, …

The embedding

All you have to do is to embed the Styles (the Less files plus the Less Javascript files or the ready CSS). An example which you will also found on the GitHub examples:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="../bootstrap.css" rel="stylesheet">
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
      }
      .container > footer p {
        text-align: center; /* center align it with the container */
      }
      .container {
        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
      }

      /* The white background content wrapper */
      .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      /* Page header tweaks */
      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }

      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10,
      .content .span4 {
        min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">Project name</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <form action="" class="pull-right">
            <input class="input-small" type="text" placeholder="Username">
            <input class="input-small" type="password" placeholder="Password">
            <button class="btn" type="submit">Sign in</button>
          </form>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="content">
        <div class="page-header">
          <h1>Page name <small>Supporting text or tagline</small></h1>
        </div>
        <div class="row">
          <div class="span10">
            <h2>Main content</h2>
          </div>
          <div class="span4">
            <h3>Secondary content</h3>
          </div>
        </div>
      </div>

      <footer>
        <p>&copy; Company 2011</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>

It creates this side:

Roadmap

There is also a Roadmap for this Project which is cultivated by some developers on Twitter:

Result

Twitter Bootstrap seems to be a great entrance for non-designer with many nice elements. The only think I’ve missed is a version for Mobile websites – I’m looking forward to it.

Download and everything else on GitHub.

To get files into the MVC Controller Modelbinding from MVC is a clever method.

But in fact it is a little bit complicated to set the error message if the connection failed.

Example:

public class RegisterModel
    {
		...

        [Required]
        [DataType(DataType.EmailAddress)]
        [Display(Name = "Email address")]
        public string Email { get; set; }

        [Required]
        [Display(Name = "Age")]
        public int Age { get; set; }

		...
    }

This is the default model for the registration in the ASP.NET MVC project draft. I’ve added a Property “Age” from the Typ “int”. This have to be mentioned in the View as well:

 ...
			<div class="editor-label">
                @Html.LabelFor(m => m.Age)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Age)
                @Html.ValidationMessageFor(m => m.Age)
            </div>
			...

Problem: What happens if the user enters letters instead of numbers?

Everything is alright as long as the ClientValidation is on:

If it’s off you will receive this error message:

The error message “The vaule ‘Test’ is not valid for Age.” Will be written directly into the ModelState:

Unfortunately it’s not that easy to change this message – all kinds of languages will be ignored. That doesn’t look nice on a German side.

Fix: create a resource file

You need to create a Resource file at the App_GlobalResources and add a “PropertyValuenvalid” with the proper text:

Link the Resource file to the Global.asax:

	protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            DefaultModelBinder.ResourceClassKey = "Errors"; <-- lookup in Errors.resx

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }

Result:

Background:

It’s not possible to run every kind of validation logic because the Framework isn’t able to attach the Property. Interestingly the reaction of the Framework is different if you try to allocate a higher number to the Int. In this case the ModelState receives an Exception you are able to catch. Also a validation could grip. I only have this problem in connection with String-entries.

A loooong time ago I’ve blogged about how to access to You Tube with the Google Data APIs. After all that time there are several new ways how to recall files. Google offers You Tube a “simple” surface. If you prefer to do low-Level HTTP calls it is also possible.

Aim: I want the files to this You Tube video – but I already have the URL:

http://www.youtube.com/watch?v=ItqQ2EZziB8 (different to my former Blogpost where I was searching stuff)

download the library with NuGet

For comfortable excess I recommend you Google Data APIs. You will find this on NuGet as well:

All you need is the Google.GData.Client and the Google.GData.YouTube package:

Code

(because my Testclient is a console application and I need the functionality from the System.Web Assembly I changed the whole Frameworkt to .NET 4.0)

Uri youTubeLink = new Uri("http://www.youtube.com/watch?v=ItqQ2EZziB8");
            var parameters = System.Web.HttpUtility.ParseQueryString(youTubeLink.Query);
            var videoId = parameters["v"];

            Uri youTubeApi = new Uri(string.Format("http://gdata.youtube.com/feeds/api/videos/{0}", videoId));
            YouTubeRequestSettings settings = new YouTubeRequestSettings(null, null);

            YouTubeRequest request = new YouTubeRequest(settings);
            var result = request.Retrieve<Video>(youTubeApi);

            Console.WriteLine(result.Title);
            Console.WriteLine(result.Description);
            Console.WriteLine(result.ViewCount);

            Console.ReadLine();

Declaration

In line 3 I take the “v” parameter for the video. In line 5 I apply empty YouTubeRequestSettings – with this I’m able to call every official service but I can’t leave comments or upload videos.

Afterwards the Video will be picked up with the request.Retrieve. Now I have several Meta information’s about the Video.

No “Retrive” Method?

During the development process I’ve recognized a strange problem – under the Request-Object I had no Retrieve or Get Method. I’m not sure what the problem is. At least the You Tube Request class is from the Google.YouTube namespace – maybe I got the wrong class.

More Informations on the YouTube API.NET side.

Result of my codes:

[Code on Google Code]

I own a MacBook Pro (from 2010) for about a year now and because I’ve used to think about this Question since I have it, I’m going to blog about my experience now.

My Notebook Configurations MacBook Pro April 2010

- 2,66 Intel Core i7

- 8GB RAM

- 15’’ Glossy Display

- Intel X-25M 168GB SSD

The Hardware: It’s a dream – at least with little disadvantages

What to write about Apple Hardware: The Quality is amazing. There are worlds between this and all the plastic notebooks I’ve seen so far. Also the Touchpad and the clever usage of Multitouch in the Desktop World are brilliant. The Display is great and the Colors are very strong. I wasn’t even disturbed by the “Glossy” but maybe it’s because I didn’t use it in the sun .. Come on… I’m a Developer

For a Developer the keyboard is very important and here is the problem…

a) It’s a Notebook keyboard where some keys are left anyway

b) It’s a keyboard from Apple where even more keys are left or allocated with something else

In compare with my PC keyboard (not that beautiful but that what they usually look like):

Either my keyboard scheme was totally wrong configured or I’m a noob. I couldn’t find the keys “~” and “\”, which are sometimes very useful for developers. Also “[“”]” and “{“”}” where missing for a long time even if I found them with closed eyes on my normal keyboard and why the @ is on a completely other key is a mystery.

At last if you plan to use the numerous Goodis of Resharper you will need some Specialists (POS1 / ENDE,…) which you wouldn’t find on the MacBook Keyboard.

An advantage is that the keyboard glows in the dark and that writing on her is very comfortable. Programming is very difficult but you can learn to life with it (Quite recently I didn’t use a second keyboard )

Summary about the hardware:

It’s possible to work with the keyboard and the mouse but it’s more effective to use another one. At the moment I use this one. There is nothing negative left to say about the hardware.

About the Software: Mac OSX or Windows? Why not both?

I don’t care if it’s Mac OSX or Windows 7. Both have their strengths and weaknesses. But at last I have to use Windows for Visual Studio and co.

What I use Mac OSX for: Most of all for Browsing in the Web. It’s more comfortable to use the great Touchpad then a Mouse or the Touchpad of a Windows Notebook. Even Mail-App and iCal is okay for the usual user. The Mail-App works and I don’t have problems with the synchronization so far.

(Picturesource)

Summary:

- Webbrowsing for fun

- Mail

What I use Windows 7 for: For developing with Visual Studio and for serious office stuff. To say the true I didn’t like Office for Mac & co. Office 2010 is enough for me. Even if it has some faults but nothing is perfect . Gaming of course makes only sense on Windows.

Summary:

- Developing with .NET / Visual Studio 2010

- Office

- Gaming

Connecting both worlds with Bootcamp & VMWare Fusion – without disadvantages

Since the change to Intel-processors MacBooks are at least “only” PC’s. Of course it’s possible to install Windows 7 nativ – Apple calls this Bootcamp and serves the fitting drivers. With Bootcamp Windows runs native like on every other PC and uses the whole power. But for example the Touchpad doesn’t work in the same way like with Mac OSX.

Bootcamp “splits” the hard disk in an OSX and in a Windows partition. But think twice about this step because the hard disk is only 160GB – not much space if you are used to think in Terabyte.

VMWare Fusion has a very useful feature: It’s possible to boot the Bootcamp partition in a VM. The advantage is that you are now able to use MacOSX and Windows at the same time. The performance doesn’t thank you for that but simple strategy games, Office or Visual Studio will work.

Combined with VMWare Fusion it’s able to connect both worlds in a classy way and if you need more Power than you use Bootcamp. Only Windows hates the changes of the Hardwaresettings and asks for a reactivation of the Licencekey.

That’s what the Windows Capacity index looks like (because of this is the MacBook from 2010 the newest Generation will look a little bit better)

Take a look beyond your own nose (at least for iOS Devs)!

To take a look beyond your nose to try Mac OSX could be a reason for the buy as well (it was for me too). If you want to develop native for iOS Tools you need a MacBook Pro.

If you like it you can try mono as well but I didn’t even think about this – if .NET works on Windows and I build WebApps why this pain?

But it’s possible.

I don’t regret the buy but now I need a battle machine to play battlefield (but this would be the dead for every Windows Notebook at least ).

Result: Is a MacBook Pro the right choice for a .NET Developer?

If you need a high class Notebook with Performance but also mobile: Yes, I recommend it to you. But for a longer work and for programming you need a windows keyboard.

If you are only mobile from time to time the better choice is a usual pc and for to go a MachBook Air. Today it would have been the better choice for me.

If you don’t want to make any type of compromises than you should buy the MacBook Pro – it will never be a bad buy. Or you wait for a look on the Ultrabooks.

Last question – Gaming?

From time to time you need a little alternation. On the 2010 Macbook Battlefield 3 runs on the “minimal” settings at last for 3 hours. After that the machine gets hot and turns into the sleep mode. Nice for working but I need something with more power . But keep in mind, that battlefield is a very ambitious game. Older games run without problems.

If you are interested now: Im sure you will find something on Apple or Amazon.

Like if assumed a while ago Microsoft does everything to place Windows Azure as “the” Cloud-Platform for several Languages & Frameworks. In the past Microsoft was famous for pushing their own Platforms and Languages into the market seems like changing their strategy and is now pushing for example node.js and publishes SDKs on GitHub.

Node.js on Windows Azure

Windows Azure provides node.js! The SDK includes Powershell-Cmdlets for creating and testing and deploying of node.js applications and samples.

Never worked with node.js so far? Samples from Microsoft

Since now I was only able to look casually above node.js by myself but it seems like the examples from Microsoft are very large comparing to the numerous “Hello World” article but without getting to complex. The first Tutorial includes:

- IISNode for node.js based on IIS

- How to work with the Node-Package manager “npm”

- How this works with the Azure services

- MVC Framework “Express”

For a totally node.js inexperienced developer like me it looks very well and understandable. At last it doesn’t hurt to take a look.

There are also two tutorials which are a little bit more complex: Node.js Web Application with Table Storage

Entrance video in 5 minutes with node.js & Azure:

Node.js – a curious hype?

I’m sure node.js is used to be fun with a few elegant frameworks. I didn’t get far with C# alone as well. Only the frameworks like ASP.NET MVC make it interesting and because of this I’m curious about the development and we should wait for whatever will come.

Anyway Microsoft is on the right way.

All the samples from Microsoft are also available on GitHub.

To embed content from other sides like YouTube, Flickr, Slideshare seems to be very difficult at the first sight especially if you want to make it “automatically” from the URL. How the embedding works depends on the content – on YouTube and so on you need a video player for Slideshare and so on you need Flash/JS for the presentations. But there is a standard for exact this case: oEmbed.

Aims of oEmbed

oEmbed is used to be a standard surface to embed content from other sides on your own side. There are some important names supporting oEmbed like YouTube or Flickr:

Example Flickr:

The client calls this URL:

http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/

And receives this answer:

{
	"version": "1.0",
	"type": "photo",
	"width": 240,
	"height": 160,
	"title": "ZB8T0193",
	"url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
	"author_name": "Bees",
	"author_url": "http://www.flickr.com/photos/bees/",
	"provider_name": "Flickr",
	"provider_url": "http://www.flickr.com/"
}

Example YouTube:

Call:

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

Answer:

{
	"version": "1.0",
	"type": "video",
	"provider_name": "YouTube",
	"provider_url": "http://youtube.com/",
	"width": 425,
	"height": 344,
	"title": "Amazing Nintendo Facts",
	"author_name": "ZackScott",
	"author_url": "http://www.youtube.com/user/ZackScott",
	"html":
		"<object width=\"425\" height=\"344\">
			<param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
			<param name=\"allowFullScreen\" value=\"true\"></param>
			<param name=\"allowscriptaccess\" value=\"always\"></param>
			<embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
				type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
				allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
		</object>",
}

Especially on YouTube the Idea works: In the HTML Property you will find the whole code do embed the YouTube player.

oEmbed Answers

According to the Standard the answer will be XML or JSON but at the moment JSON is the more in use. YouTube supports both.

jQuery oEmbed library

There is also a jQuery library to call this service. For this they use JSONP.

Embed.ly – oEmbed Hub

Because of oEmbed the format is fixed but anyway you need to question numerous Providers to get to know the URLS. With the service embed.ly you can access to a kind of “Hub”. Embeded.ly provides a oEmbed endpoint and you can send almost every kind of address to emebd.ly and you will receive a fitting answer.

Embed.ly could be called easily with the jQuery Plugin.

Embedy.ly – costs

There is a rub with embed.ly – it’s not for free. But there is a Account-Type for free (scroll to the bottom!). With this Account you are allowed to make 10.000 calls every month. Afterwards the prices are graded.

Who could be interested in embed.ly or oEmbed?

The most important usage is for “link-sharing” sites like Digg.com and so on but you get some meta-information from the URL so you don’t need a complex connection to API.

Try it on embed.ly

Embed.ly offers a “Test-Client” to get a feeling for the results you can await.