Evil Hackers are lurking everywhere and many Web-applications are delicately and share “too much” with the attacker.

A quick (first!) overview offers the Tool “ASafaWeb”. All the website does is making a few requests and writing an Analyses including problem solving’s. There are no permanent disadvantages (bad requests/ DoS attacks and so on).

Example: KnowYourStack.com

There is a short description including a problem solving:

The last test recommends hiding the information’s about the ASP.NET version / IIS.

That’s not enough!

The service only provides very simple tests – For example there is no test for the entering validation. Here you need to be very carefully!

If someone wants to share more tips with us you are welcome J

Prevent the Top 10 Security holes!

Some time ago Philip Proplesch referred about the excellent Blog row from Troy Hunt: OWASP Top 10 for .NET developer’s part 1: Injection. Read!

“Sign in with Twitter” is a popular practice to authenticate the users on your website. One advantage compared to an own registration is the lower inhibition for the user. But on the other hand Twitter doesn’t fess up with all the information’s and you will get into a kind of addiction. At the end everyone has to decide it by them self. The question is: How can I integrate the Twitter Login into my website?

Twitter Login – Oauth

The base is the OAuth protocol for the authentication. The application isn’t able to see secure information’s like keywords. More background information’s here.

TweetSharp – 10 minutes guide to Twitter Login

At least the OAuth protocol is a little bit “difficult”. There is a big library in the .NET environment which is able to understand both OAuth and OpenID: DotNetOpenAuth. But the library is very extensive and heavy. So here is my recommendation: TweetSharp!

Step 1: Take it from NuGet

Of course TweetSharp is also a NuGet package:

Step 2: register the Twitter App

On the Developer Side of Twitter you are able to adjust new apps. For our Dev-version the following information’s are enough.

Important: enter the same information’s into WebSite and Callback URL – otherwise there are going to be some problems. We choose 127.0.0.1 – localhost. You are able to fit it on the right URL later into the application.

The most important information’s:

We need the Consumer Key and the Consumer Secret soon.

Note: There are several “authorities” to be set on the Access level. At the moment it is only possible to read the Tweets but it is not possible to write them with the application. So the Twitter App is for registration only and the user is going to be informed about it on the login-page.

Step 3: Auth Controller

The code from Auth Controller is from the Doku on TweetSharp and I only changed a few things.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Security;
using TweetSharp;

namespace OAuthSignInWithTwitter.Controllers
{
    public class AuthController : Controller
    {
        private string _consumerKey = "BOgMSVFOOOBARRRRR7QOB9Yw";
        private string _consumerSecret = "lRCbswKMKxFOOOBARRRRR2eL20X5uWG1FOOOBARRRRRjl3MM323pE8";

        public ActionResult Authorize()
        {
            // Step 1 - Retrieve an OAuth Request Token
            TwitterService service = new TwitterService(_consumerKey, _consumerSecret);

            var url = Url.Action("AuthorizeCallback", "Auth", null, "http");
            // This is the registered callback URL
            OAuthRequestToken requestToken = service.GetRequestToken(url);

            // Step 2 - Redirect to the OAuth Authorization URL
            Uri uri = service.GetAuthorizationUri(requestToken);
            return new RedirectResult(uri.ToString(), false /*permanent*/);
        }

        // This URL is registered as the application's callback at http://dev.twitter.com
        public ActionResult AuthorizeCallback(string oauth_token, string oauth_verifier)
        {
            var requestToken = new OAuthRequestToken { Token = oauth_token };

            // Step 3 - Exchange the Request Token for an Access Token
            TwitterService service = new TwitterService(_consumerKey, _consumerSecret);
            OAuthAccessToken accessToken = service.GetAccessToken(requestToken, oauth_verifier);

            // Step 4 - User authenticates using the Access Token
            service.AuthenticateWith(accessToken.Token, accessToken.TokenSecret);
            TwitterUser user = service.VerifyCredentials();

            FormsAuthentication.SetAuthCookie(user.ScreenName, false);

            return RedirectToAction("Index", "Home");
        }
    }
}

Between Step 1 and 2 we create the main Callback-URL. In this Callback we use the FormsAuthentication and set the Cookie so also the ASP.NET engine will know that we are logged in.

Step 4: UI modification

In the _Layout.cshtml

  <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @if(this.Request.IsAuthenticated)
                {
                    <span>@@@HttpContext.Current.User.Identity.Name</span>
                }
                else
                {
                    @Html.ActionLink("Sign in with Twitter", "Authorize", "Auth");
                }
            </div>

Either the user is logged in via ForumsAuthentication or we show the Link to the Authorize Methode.

Result:

Additional we can access on several Twitter attributes of the user. That’s it about the authentication. Not that difficult at all. If you want to use more futures for example sending Tweets has to keep in mind the AccessToken from the Callback.

On my Project KnowYourStack.com I use a “Tinkerversion” via the DotNetOpenID Project – it works almost equal but it is a little bit more complicated so I recommend TweetSharp for this easy business.

CodePlex the Microsoft Open Source Project Hosting Plattform hasn’t changed that much in the last few years and for a few times I thought Microsoft stopped the whole developing process. But now I found out that there is still life in the project. Maybe it is because of the success of GitHub or because Microsofts latest intentions in the Open Source Direction. Not so long ago Microsoft has chosen GitHub instead of CodePlex for publishing Azure SDK – maybe that was the point where they decided to support their own platform again.

“The future of Codeplex is Bright”

Brian Harry who is Microsofts responsible person for the team Foundation Server and especially TFS Service on Azure posted a Blogpost with this headline. Also in the Open Source Announcement from Scott Hanselman it was mentioned why the ASP.NET team decided to use CodePlex instead of GitHub:

Why not on GitHub?

The Visual Studio Team has big plans for CodePlex, including adding Git support and modernizing the experience. Right now CodePlex supports TFS, Mercurial (Hg) and just added Git! As we’re a partner with the Visual Studio Team we think the right thing for us to do is to support their plans to make CodePlex a thriving place for open source software again. We push them hard and they’re releasing weekly now.

Git Support on CodePlex

CodePlex supports beside TFS and Mercurial also Git. Though the integration into the Web-UI isn’t that extensive compared to GitHub but for what I have seen so far and from personal talks with Microsoft Corp. Developers I found out that Git isn’t a foreign word for them. For example the ASP.NET Team is using GitHub for developing ASP.NET Webstack on Codeplex. I’m sure there will be some more futures soon.

TFS & Git

Of course this development is recognized by the TFS team as well – there are also some appearances for a DVSC. There is also a comment by Brian Harry about the Version Control Model Enhancements in TFS1 1 about the DVCS Model:

I’m certain that about this time, I bunch of people are asking “but, did you implement DVCS”.  The answer is no, not yet.  You still can’t checkin while you are offline.  And you can’t do history or branch merges, etc.  Certain operations do still require you to be online.  You won’t get big long hangs – but rather nice error messages that tell you you need to be online.  DVCS is definitely in our future and this is a step in that direction but there’s another step yet to take.

New UI in the Look of Metro

There are also some new Screenshots about the Metro interface for CodePlex shown:

More Screenshots here.

TFS Services & CodePlex

If you ask yourself how CodePlex and the announcement about TFS on Azure fits together: here is another comment from Brian Harry:

And, as I alluded to earlier, we’ll be working to align CodePlex and Team Foundation Service into a single, scalable offering.  This work will be happening partially in parallel with the efforts to revitalize CodePlex and respond to community feedback.  It will also happen in stages rather than in one big milestone.  It will likely start by having newly created CodePlex projects hosted on the Team Foundation Service Azure infrastructure.  Then, over time, we’ll integrate the user experiences.  This isn’t a concrete plan, but rather a flavor of how we are thinking about it.alluded to earlier, we’ll be working to align CodePlex and Team Foundation Service into a single, scalable offering.  This work will be happening partially in parallel with the efforts to revitalize CodePlex and respond to community feedback.  It will also happen in stages rather than in one big milestone.  It will likely start by having newly created CodePlex projects hosted on the Team Foundation Service Azure infrastructure.  Then, over time, we’ll integrate the user experiences.  This isn’t a concrete plan, but rather a flavor of how we are thinking about it.

My commendation: Take a look on Git!

From my point and according to the changes of the last view days I recommend every developer to take a look on Git or at least to think about the opportunities. Start a little Open Source Project – maybe on CodePlex and then give them your Feedback. Git is also interesting for .NET developer – a little intro is here. Maybe there will be a bigger Open Source mentality in the .NET environment.

Adobe is well known for Photoshop and Flash but of course there is a lot more. According to the “Future Post” from Google Adobe declared one of their big subjects on a Blogpost. I’m talking about the W3C Working Draft to CSS Regions. Adobe cooperates with the WebKit Team and W3C on this.

What are CSS Regions?

CSS Regions are meant to amplify the options for Text-Layout in the web. Here is a video from adobe:

At first Adobe proposed a big standard with more Use-Cases. To bring the parts quicker through the standardization (and to make the standard more “serviceable”) there are three models:

CSS Regions includes named flows and region chains that allow for complex, magazine-style layouts.CSS Exclusions defines ways to flow inline content around and inside shapes that are either defined in CSS or extracted from content. CSS Fragmentation defines how content breaks between pages, columns or regions.

CSS Fragmentation is the Working Draft to Multicolumn Layout and Paged Media.

The aim of all models is to put the varying design Layout from the world of magazines into the web.

Status of the standardization

According to Adobe there are still some dubieties. Standardization or not – It would be more interesting which Browser provider is going to support this?

Browser Support at the moment

WebKit Nightlies

Not interesting at all for usual users because you are using WebKit via Chrome or Safari “indirectly” but for completeness – it is implemented into Nightlies and it works.

Chrome

Implimented and activated in version 17 and 18 – but it will be deactivated in version 19 again and you need to reactivate on “about:flags” ( I guess the WebKit team was a little bit carefree ). In the Chrome Nightlies (Canary Builds) it is usually deactivated as well.

Internet Explorer

What a big surprise: Implemented and activated in the IE 10 Developer Preview!

Firefox

Mozilla included it into the Roadmap for 2012 after all

More Information’s

You will find more background information’s on the Adobe Blogpost and there is also a video from Paul Irishih (from the Chrome team) where he shows the Demos from Adobe as well.

Game Developing is an interesting subject for all kind of software developer. But as a web developer without any Flash-skills there aren’t that much starting points. With HTML5 and the combination between Javascript, CSS3 and fast browsers there are the first “robust” HTML5 games.

HTML5 games? Is this real?

Neowin created a “Top 10” list of HTML5 games. We should take a deeper look on the first place because the developers let us take a few behind the scenes. CutTheRope.ie – developed by Microsoft for promoting there IE/HTML/Web platforms. The game works also on iPads or in a Chrome Browser. I found many information’s on the “behind the scenes” page. At last I’m not able to work with the Debugger and the Dev tools of IEs but according to video it seems to be a big help for the developer

Also in the Neowin list is Angry Birds which is doubtless the best known game on the list but I didn’t found any important developing subjects. Just this Post where it is mentioned that the Web Audio API is going to be used now (pushed by Google )

Also a quite ambitioned project is Command & Conquer as an HTML5 Browser game. Nice future: the Source is on GitHub. The game isn’t that matured compared to CutTheRope put it is more extensive and I’m sure there isn’t a huge team of developers like on Microsoft.

“Tooling”

Bret Victor a Developer from France gives thoughts to “IDE for WebGames” and presented them on a conference. He created a kind of interactive editor to bring Mario into the web – unfortunately I wasn’t able to found out what exactly he used but the short video is very impressing:

3D before WEbGL

Even if the browser creators agree about HTML5 and Javascript are the future of web developing they do not agree in the field of 3D.

Google (for example) pushes WebGL and brought Quake into the web. I was able to play Quake 2 for a short time on my browser (until it crashed ). Google Maps only ported some parts of WebGL to improve the sight. Microsoft on the other side sees WebGL as a Security problem.

In which direction the whole thing will go and if there will be a DirectWeb someday is not sure at the moment.

If you are interested in WebGL anyway you should take a deeper view on three.js.

Hints?

If you are hiding some other interesting details from the game developing and graphic world via web – leave a comment!

There is a free online Tutorial about jQuery in English on Tuts + premium. The tutorial includes Basics, Effects, Plugin-development, AJAX and more. The videos are from a few minutes till 45 minutes. I’ve taken a look on a few videos so far and I saw the whole “this” Keyword video – it’s worth!

Maybe this isn’t a new message for you but I found it today on the mycsharp Forum.

By accident I found the page of code.nasa.org today. A little icon showing a microphone cached my attention:

Since Chrome 11 there is a “support” for the Speech Input API. I’ve read about this but in fact I thought the integration would be more extensive. Surprisingly the implementation is very easy – with the attribute “x-webkit-speech” (later on it’s only “speech”). The whole thing should be able to work with Input and Textarea elements:

//Supported elements

<input type="text" x-webkit-speech />
<textarea x-webkit-speech />

A bottle of bitterness

It only works on Chrome and you have to speak very slow and clear. He doesn’t understand German and only a few English. Hmm… not a Siri at all. The Speech Input API is still in his baby shoes and there aren’t that many improvements since the Release of Chrome 11.

Have a try

You are able to try it for example here. But this video shows how it works as well (for those who are not Chrome users )

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.