So I will promised a quick HTML5/CSS3 series, but I’ve just realised a site which demonstrates the new Javascript API, HTML 5 and CSS 3. And it really is very good. I will post about my discoveries as well, I’m not being lazy, but this really is good:
I recently had an issue with the JsonResult controller type. I tried to connect to an API to return some JSON and received the error: “This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request.”
Hmmm, I thought. This looks like the library I’m using is faulty, so I tried another library, same issue. So it was the controller. In MVC 2.0, they have tightened up the security to stop JSON Hijacking. Very good indeed. But some changes have been made to the way you can call JSON. If you are making a POST request to the JSON you’re good, go back to the sunshine and happiness.
Anyone else will need to return the JSON as follows:
return new JsonResult { Data = (records), JsonRequestBehavior = JsonRequestBehavior.AllowGet };This allows a GET request. Though really, if you are using JSON, it is usually as a service, so just change the request to only accept a POST request ([HttpPost()]) and make the consumer do the same. It is the better way really.
I recently attended the Microsoft Techdays. They’ve really got it down with these things. This time it was in a cinema (Vue) in Fulham Broadway for developers and in Shepherds Bush for IT professionals. In the evening they had fringe events. On Wednesday evening I decided to go to the open source .net developer event. I’ll try and write about some of these, but one which instantly stood out to me was Dylan Beattie’s quick talk on Dot-Less.
Dot-Less is an open source port over from Ruby’s Less library. What it does is allows developers to do some impressive things with CSS. It’s a fairly obvious concept. It doesn’t change the way CSS works, it allows a developer to write some interesting things easier.
For example. If you have a brand and they have a colour used across the CSS document, you will usually have to write font-color:#CC0000;, then background-color:#CC0000; etc. for anything which needs it. Dot-Less allows the developer to define these at the top like a variable. Like: @brand_color: #CC0000; You can then do the rest of your CSS as: font-color:@brand_color;, then background-color:@brand_color;. Excellent! So when the client inevitably changes thei mind, instead of risking find and replace, you replace one value and BANG, the colours are changed.
It gets better. You can even group styles which you might reuse. e.g.
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}This is something developers will grow to hate over the next few years as CSS3 waits for browsers to catch up. With Dot-Less, you then can add this style group to another style e.g.
#header {
.rounded_corners;
}Lovely, and when the client changes their mind about that drop shadow, you change it in one place. Something I liked, was that you can perform mathematical operations on your CSS. e.g.
#yourid {
color: #006600 * 3; /* will equal #090 */
border-left: #006600;
border-right: #006600;
}This then changes the colour slightly and you get sme lovely effects. Ok, a little bit of a dev toy (I can’t see a designer agreeing to that) but it is a nice way to play about with CSS. There are other little tricks like nested rules etc. But best visit: http://www.dotlesscss.com/ for the full low down. And because all of this gets rendered on the server side. It will just work in all browsers as normal CSS but without the mess usually involved. Go away and have a go!
As he ended off, Dylan said “5 years ago, .net developers would have to borrow and steal anything open source, now it is very different”. I remember those times. How Microsoft has changed, and for the better, making .net a fantastic environment for programmers to work in with some very powerful libraries now available. I spend a lot of my day on CodePlex looking at the new libraries. It almost brings a tear to my eye!
So, sometimes you will find that browsers look for the favicon.ico file at the root of your site. A lot of the time you haven’t yet/won’t add one of these. As the browser looks for this, it can cause a 404 error in asp.net MVC. It can be made to ignore this file by adding the following code to the global.asax route index.
routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*/)?favicon.ico(/.*)?" });Thanks to Phil Haack for that nugget.
After rebuilding my site in HTML5 and using CSS3 I have decided to do a small series of what can be done. HTML5 is very exciting and powerful and CSS3 finally adds some features that designers have wanted for years but developers have cried over (drop shadows for example, or curved boxes).
So the first in the series is this post, and it will be the shortest post. The Doctype. Now, every time I start a site, I can never remember the full Doctype, especially for XHTML 1.0 which is quite lengthy. I do find the following as a quick lookup very useful though: http://perishablepress.com/press/2006/08/30/xhtml-document-header-resource/.
HTML5 is different, the doctype is:
<!DOCTYPE html>Lovely! It is that simple, love it!