Mac OS X Mountain Lion and Wi-Fi internet using a KPN Experia Box

Apple just released its latest version of Mac OS X called Mountain Lion. They improved a few things so I had to have it, especially at the price they sell it for. I know there's not much in there I will use, but still.

As with the previous version, I could install the whole thing by going to the appstore and selecting the update there. After waiting a bit for the download to complete, the install went down without a hitch and soon I was running Mac OS X Mountain Lion and happily browsing away on the internet. Or so I thought.

Responsive JavaScript rules to make your responsive design complete

<p>Adaptive designs are hot lately and I think they are a great way to build your website. Why? Simple: It makes it more usable on different computers. I absolutely hate scrolling horizontally and I hate zooming in on my mobile phone even more. And I'm pretty sure you do too.</p> <p>There's various different techniques around the web that you can apply to your website in order to build a responsive/adaptive layout for it. Whether you are a mobile first or a desktop first type of guy, you will most likely be using a ton of CSS media queries and CSS classes to make everything look excellent on all possible resolutions. </p> <p>In the responsive/adaptive layout for knowNow, I used a lot of CSS media queries and special CSS classes too. However I found out that it didn't cover 100% of what I wanted with the design. Some things you just can't do with CSS. For example, swap a bootstrap span9 for a span12 is not possible in CSS. For that you need javascript. </p> <p>Of course you can build all that javascript by hand, but that makes a hell of a mess in your website. After thinking about it for a bit I came up with a different idea to solve the problem.</p><!--more--><h2>Meet Responsive.js</h2> <p>My solution to the problem was to build a small jQuery plugin that lets me define rules for pixel range within which I want certain actions to be applied to my HTML layout. It makes building that list bit of a responsive layout that much easier.</p> <p>The plugin defines $.responsive.rule(minWidth,maxWidth,callback) as a function that you can use to define a rule. Using the plugin within a website looks like this:</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Define the rules for the page using the responsive plugin.
// You can create multiple rules for the same range, the rules get applied in the order they are defined.
$.responsive.rule(0,479,function() {
$("#border-extrasmall").addClass("active");
$("#border-small").removeClass("active");
$("#border-wide").removeClass("active");
$("#border-extrawide").removeClass("active");
});
$.responsive.rule(480,979,function() {
$("#border-extrasmall").removeClass("active");
$("#border-small").addClass("active");
$("#border-wide").removeClass("active");
$("#border-extrawide").removeClass("active");
});
$.responsive.rule(980,1199,function() {
$("#border-extrasmall").removeClass("active");
$("#border-small").removeClass("active");
$("#border-wide").addClass("active");
$("#border-extrawide").removeClass("active");
});
$.responsive.rule(1200,0,function() {
$("#border-extrasmall").removeClass("active");
$("#border-small").removeClass("active");
$("#border-wide").removeClass("active");
$("#border-extrawide").addClass("active");
});

<p>You don't need to worry about when rules are defined or applied. The plugin makes sure that every rule is applied when window is resized or when the document is ready. If you create rules after the document was loaded, the rule will get applied as soon as you create it. This means that you can create rules at any time during the page lifetime.</p> <h2>How are rules applied?</h2> <p>When you invoke the $.responsive.rule function, a new rule object is created and stored. When the window is being resized, the plugin will iterate over all the rules that have been previously created and it will invoke them.</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* Defines a responsive rule object, containing the logic for a single responsive rule.
*/
function responsiveRule(minWidth, maxWidth, callback) {
var ruleCallback = callback;
var ruleMinWidth = minWidth;
var ruleMaxWidth = maxWidth;
var isApplied = false;
/**
* Invokes the responsive rule if the specified width is within the range of the rule
* and the rule wasn't applied before when the width was within the range of the rule.
* @param width The current client width
*/
function invoke(width) {
var shouldBeApplied = ((ruleMinWidth === 0 || ruleMinWidth <= width) &amp;&amp; (ruleMaxWidth === 0 || ruleMaxWidth >= width));
// If the rule was previously applied and should be applied now, stop processing the rule.
// This ensures that all the magic in the callback isn't applied a second time.
if(isApplied &amp;&amp; shouldBeApplied) {
return;
}
// Invoke the rule callback when the width is within the ranges specified.
// If one of the range limits is set to zero, skip checking for that limit.
if(shouldBeApplied) {
ruleCallback(width,ruleMinWidth, ruleMaxWidth);
// Mark the rule as applied. This flag will be used later to check if the rule
// should be applied again when the current width is still within the range of the rule.
isApplied = true;
} else {
// Make the rule as unapplied. This ensures that the rule is executed
// when the width comes within the range of the rule the first time.
isApplied = false;
}
}
return {
invoke: invoke
};
};

Dynamic JSON processing in WinRT

<p>Windows 8 is around the corner and I figured, it can't hurt to dive into some app development for the new version of Windows. And what a version it is, a completely new development platform for developers to work on and a lot of changes to the UI and the underlying APIs. I personally love it, but I can imagine that there's a lot of people out there that hate it right now, because their stuff is moved.</p> <p>In this article I want to spend a little bit of time on something fun I wrote to make working with the Facebook API a lot easier. While not a complete sample on building Windows 8 apps, I think you will still find this information useful for writing your own apps that use a JSON API.</p><!--more--><h2>Meet the JSON object family</h2> <p>JSON is hot on the internet right now. It's the JavaScript Object Notation, if it looks completely new to you, take a closer look. It's just a piece of javascript describing one or more objects, arrays and their members. This serialization format has been around for quite a while as it is the standard way for Javascript to serialize objects. Today however it is mostly used in REST API's that are used from websites. It makes things quite easy for developers as they get a format that is quite native to Javascript, thus reducing the amount of serialization problems.</p> <p>For Windows 8/WinRT apps it's quite a different story. Depending on what language you use there's support ranging from excellent to rather funky. The support for JSON in the Javascript/HTML5 API for WinRT is excellent, .NET support is rather funky. In .NET you get the System.Data.Json namespace which contains the JsonObject, JsonArray and JsonValue components. With these you can generate and read JSON data. </p> <p>What makes the JsonObject, JsonArray and JsonValue components so funky is that they are clay-like objects. For example, take the JsonObject class. Properties that were read from a JSON source are not regular properties, but can only be accessed through an indexer as the following snippet demonstrates.</p>

1
2
3
4
var parsedValue = JsonValue.Parse("{\"name\":\"Willem\"}");
var parsedObject = parsedValue.GetObject();
var firstName = parsedObject["name"].GetString();