Dit is het webblog van Peter Kassenaar - Ik geef training en consultancy in het maken van crossplatform mobiele apps en webapps. Trefwoorden: AngularJS, PhoneGap, jQuery/Mobile. HTML5, CSS3, JavaScript, AJAX, JSON. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter.(@PeterKassenaar)

Terug naar de algemene site.

12juli

New online course: Productive Coding with WebStorm

I’m happy to announce that as of today, my new course “Productive Coding with WebStorm” is available on the online training platform Udemy.

Order now with a 30% discount!

JetBrains WebStorm is the perfect editor for web developers. It is a full featured IDE that provides all the tools and features for developers in JavaScript, Typescript, NodeJS and of course HTML and CSS.

This brief training will show you how to best use WebStorm to be as productive as possible. You will learn many useful tricks to work faster. You'll see all the possibilities to customize the user interface, using keyboard shortcuts and write your code superfast by creating and using Live Templates. Also you'll learn how WebStorm supports your workflow and lets you use tools like Gulp, NPM or Github, all without leaving your editor!

The course is specifically intended for WebStorm, but is also extremely valuable for users of other JetBrains editors like IntelliJ, PHPStorm, PyCharm and others.

jetbrains-editors

This course covers the following topics:

  • Welcome and introduction
  • Downloading and installing WebStorm
  • Touring the IDE and setting up your working environment
  • Adapting the UI to meet your personal needs
  • Coding faster in JavaScript, TypeScript, HTML and CSS
  • Using build- and workflow tools right from the IDE
  • Git- and Github integration
  • Testing your RESTful Services with the REST Client
  • Adding and deleting plugins
  • Other tips and tricks

If you have any questions on this course, feel free to contact me.

Order now with a 30% discount!

Peter Kassenaar
-- 12 July 2016

03juni

Tomb Raider Wallpapers

OK, so this is one of the (I hope rare) fanboy-ish blogposts I do. You see, I’ve been a long time Lara Croft/Tomb Raider fan. This February my wife gave me a (home made) Tomb Raider-coupon for my birthday, enabling me to buy or pre-order the new game the day it comes available.

Well, we’re not there yet, but at least now we’ve got a trailer. And it is a stunning one!

Yes, I know it is a GC-generated trailer (aren’t they all?), but if the quality of the final game is only half as great as it is in this trailer, it will still be fine with me. I played the trailer from YouTube on 1080p HD-quality and made some screenshots that I’ve turned into wallpapers. I thought I’d share them with you (is that OK, @CrystalDKarl?)

At the moment they’re only 1920x1200 (a bit distorted from the original video dimensions, therefore), but you can cut, crop and resize them yourself to suit your monitor size. Below is a link to the original trailer on YouTube.

The only letdown is now that the game is only scheduled for a fall 2012 release. Still more than a year in the waiting… <sigh>.

 

TombRaider_01

TombRaider_01.png

TombRaider_02

TombRaider_02.png

TombRaider_03

TombRaider_03.png

TombRaider_04

TombRaider_04.png

Trailer on YouTube

Tomb Raider "Turning Point" Debut Trailer [US Version] in HD quality

Enjoy!

Peter Kassenaar
--03 juni 2011

03april

Midnight Club: Los Angeles - True Dedication

Midnight Club: Los Angeles Logo screen

I recently got into gaming on an Xbox 360. Maybe you have read my newbie blog post on the racing game Midnight Club: Los Angeles. Compared to that post, I can tell you that I've just reached 100% career progression on the game. It took me an insane amount of time (70+ hrs. of gameplay), but this of course was due to the lack of racing skills on my side :-).

So basically, this is 'game over' for me. Sure, you can race for fun, or just do the missions again that you've already completed, but without the pressure of real game progression, this is far less fun.

Achievements

But wait - I don't have all the Xbox Live achievements yet! I was on 790/1000 points when I decided to go for one of the hardest achievements in the game, the True Dedication achievement, worth 100 points.

In short: you have to complete different kind of goals for every race in the game (currently 100) and do so in a single race. This means you have to do every race in the game, win it, finish the race with less than 25% damage on your vehicle and beat a given time for that race.

 

Yes, this is a hard achievement!

 

True Dedication Progression Application

Within the game there is little indication of how far you've progressed when going for this achievement. So I decided to write my own progression tracking application. I put in a small registration/login system, so it's a multi user application.

The application enables you to show all MCLA-races completed by course, by time, by area, etc. Also the app will let the user filter or sort the complete Goal Attack list by area, by race type etc.

If you are after the True Dedication achievement yourself, give it a look. You're welcome to register.

Check it out at http://www.kassenaar.com/td/.

Best of all (if I may say so myself :-), you can leave your comments on a race by race base. This might be very helpful to others when they are trying to achieve the goals for the same race you have already completed.

Let me know what you think by leaving a message below, or drop me a note at info@kassenaar.com.

Thanks for reading,
-- Peter Kassenaar, 3 april 2009.

Achievement Unlocked Logo

30december

Absolute beginners guide to Midnight Club Los Angeles

Cover of MCLAWith the initial purchase of my Xbox 360 last week I also  got myself a copy of the Rockstar San Diego racing game Midnight Club Los Angeles (MCLA). The Xbox version is functional identical to the Playstation 3 version I believe, so read on if you play MCLA on Playstation.

Besides a brief manual there is a nice inlay in the box with a full color map of LA in the game and all the vehicles that can be purchased during the game. But there is surprisingly little information on how to actually play the game itself.

So there I was.

A) An Xbox beginner (mind you, I just got my feet wet with the Xbox. The only experience I had before loading MCLA were the demo's that are preinstalled on the console),

B) a racing beginner (the last racing game I played was Outrun 2006 on pc) and

C) a console newbie (the last 'console' I had was an Atari 2600!, back in the mid-eighties).

I searched the internet and there are lots of tips, cheats and gameplay videos. But not a beginners guide on MCLA.

That's why I tried to write one myself.

I hope you find the information in the following steps useful. Instead of just summing up functions, I try to describe how to actually use and reach them (i.e., which buttons to press). Please bear in mind that this was written with only 6-8 hrs of gameplay under my belt, with – as mentioned before – very little to none experience in racing games on consoles to rely on. Learning by doing in Real Life! But then again, this way you might get the most 'fresh' opinion on the matter.

I assume you are familiar with the objective of the game, which is earning reputation points ('rep' for short) and collecting and tuning new vehicles. There are various types of modes: career mode (which progresses you through the game), arcade mode, online mode and all kinds of races.

The following is a list of tips for absolute beginners on MCLA. Read them in random order, feel free to leave a message to comment on the issues listed.

1. Get yourself a racing wheel

I tried a couple of demo games pre-installed on the Xbox prior to moving to MCLA: Pixar/Disney's Cars and a demo version of Test Drive Unlimited. I found they were almost impossible to play with the standard controller. All right, accelerating and braking isn't that hard, but steering with the little joysticks on the controller is a PITA. You always get too far to the left or the right and when correcting, you always overcorrect, finding yourself in the dirt of the opposite side of the road. Dreadful.

Microsoft wireless racing wheel

So I went to an auction site and (marktplaats.nl for that matter) and got myself for fifty bucks the Microsoft wireless racing wheel for the Xbox 360. With force feedback once plugged in to a power outlet. Great. Now this is racing. Steering with both hands, accelerating and braking with your feet. Now I felt I was ready to enter the world of MCLA.

Bottom line: don't hurt yourself with the standard Xbox controller if you are a MCLA newbie. Get a steering wheel.

2. Your first race; Welcome to Hollywood

The opening sequence of the game is quite straightforward. The opening cinematic tells it all. You can pick a car (I choose the Volkwagen Scirocco 1988) and are told by some guys to race a guy named Henry. You can watch a video of the first startup and gameplay on YouTube:

 

http://nl.youtube.com/watch?v=_IaBR4PVqlU

 

This first race is titled Welcome to Hollywood. It is one of the more easy courses, as I have discovered. It doesn't return often in your missions later on (at least, not in the missions I've done so far), but you can always select it in Arcade mode at any time.

I strongly suggest you do so while learning MCLA.

It is a perfect course for learning the basics of the game. The yellow flares (checkpoints) you have to pass are well visible. There a not so many turns, you can test various techniques for steering, accelerating and braking. And because there are long straight lines in the track, you can also practice using the mini map in the lower lefthand corner of the screen (see tip #6 also). By racing this track several times in a row you also learn how to anticipate 90 degree turns at various speeds and how to approach them.

  • You select the Arcade mode by pressing the Start button > on the controller. This opens the Pause menu.
  • Press right on the D-pad of the controller (or use the right flipper behind the steering wheel) to access the Modes menu.
  • Press A to accept the default option, which is Arcade mode.
  • Then press A to select Orderd Race
  • Press Down on the D-pad of the controller several times to select Welcome to Hollywood. There are four or five courses unlocked when you've just started to build up a career, Welcome to Hollywood is always one of them.

Other courses

Other courses that are suitable for learning the racing basics in MCLA are Sunset and Vine and Willshire Sprint, in ascending degree of difficulty, IMO. Race them five or six times each, if you really want to master your vehicle in the game. Best of all: you even earn rep points while practicing. Heck, you can even earn money, just by racing and finishing in the top three.

After a couple of runs of the Welcome to Hollywood course I was able to finish from 5th place for the first attempts to a couple of 2nd places and even a win!

3. Going to the garage

Prior to playing MCLA I had already read a lot about the garage. Here you can repair your vehicle, tune it, buy other parts, etc. But how do you get there!?

After racing a handful of courses as described above, I decided it was time to go the garage to have a look around. After all, I damaged out a couple of times because of a crash into a wall or an approaching car.

I pressed the Back button < on the steering wheel to access the GPS map and plotted myself a path to the location of Hollywood Auto, the garage. But I didn't find a way to enter it! I drove around the block for about fifteen minutes to discover a fence, an entrance, or a door to enter. I even smashed into walls to enter the garage. But no luck. WTF?

Well, it appears you first have to complete the mission that tells you to go to Hollywood auto and talk to Karol, the owner. This mission is called Hollywood Auto and appeared in my mission log (access the mission log by pressing < and then the Y button to enter the Mission Log) but evidently I didn't pay attention to it, busy as I was earning rep on the Strip (the second mission you have to complete).

The mission itself is a piece of cake (just turn 180 degrees at the start of the mission, drive 100 yards and there you are), but you have to complete it in order to unlock the garage. If only I should have known that in advance…

After that, the option Go To Garage appears every time when you access the pause-menu (do so by pressing the > button on the controller).

4. Multiple missions at one time. And how to access them

Every now and then a small window pops up, telling you the basics of a new mission. They are written out, but I find them hard to read (I play MCLA on an old CRT tv, it might be better legible on an LCD tv). I found you don't have to complete a mission before unlocking another one. You can have multiple missions at a time, but only one is the active mission.

You access missions by pressing < on the controller and then choosing Y to see the mission log. This took me a while :-).

A mission that is completed goes to the (you guessed it) Completed Mission tab. You switch between tabs with either Left or Right on the D-pad, the left or right bumper button or – in my case – the flippers behind the steering wheel. Missions that you don't complete simply stay in the Active Missions tab. You can reenter a mission at any time. For example after a couple of more test runs on the active courses.

[update, dec. 30] Missions are also monitored automatically in the background. For example, I tuned my car in the garage (which makes it 'a tuner') and after that I raced some more races in Arcade mode. Each win automatically adds to the mission Get Tuned Up. So without knowing, after six wins, I inadvertently completed this mission!

5. Learn the basics by drafting

It is tempting to try the outrun all your opponents right from the start. But this is not the best approach, as I've discovered.

I think it is smarter driving when you draft behind your opponents – especially if you are on a course you are not yet familiar with – to learn from the way they are driving. You learn how to approach turns, when to hit the brakes, when to accelerate and when to swerve or switch lanes. The AI in MCLA is quite good, and this way you don't have to reinvent the wheel for every course. Just relax a bit and lean back. And try to keep track of your opponents.

Sure, when you inadvertently hit a wall or get into a head-on collision with a car, you're out on your own (and miles behind the rest of the pack), but overall I think it is wise to just follow them on a new course. Try to memorize the checkpoints and special issues like sharp turns or shortcuts through a mall, over the pavement or through a park in the course.

And if you see the red flare in front of you, marking the finish line of the course, you can always use your nitrous (left flipper behind the steering wheel) for an enormous amount of boost. It can take you from fifth to second or even first place in only a couple of hundred yards.

Also, once you are a bit familiar with drafting (while drafting, it is not necessary to hit the accelerate pedal to the max all the time), extend your skills by looking in front of your opponents car and try to predict what he is going to do. Anticipate on this. This will greatly enhance your anticipation skills and driving techniques. Highly recommended.

6. Learn to use the mini map

The mini map in the lower left hand corner of the screen is important. Practice using it while driving familiar courses (for example in Arcade mode. See #2 on how to pick a course in arcade mode).

For a good result in the more difficult courses or for locating race opponents in the various modes you must be able to switch your eyeballs (very fast!) between the view on the road and the view on the map. Once you master this skill, you can better anticipate upcoming junctions, turns and checkpoints.

The mini map is dynamic.

It zooms in when you drive at low speeds, it zooms out when driving at high speed (at the time of writing this blog post, driving 120 mph in a crowded city is a very high speed for me :-).

You can also display a full screen HUD (Head Up Display) of the entire city with the Up arrow of the D-pad on your controller while driving, but I find this very distracting. Press the Up key again to switch it off.

7. Race at night

In the beginning I thought it would be easier to race by daylight, as you can see more of the course, other cars and the road.

It is not.

I found it a lot easier to drive at night. In the darkness you can better see the headlights of oncoming cars and you can better see the taillights and breaking lights of the cars that are in front of you, driving in the same lane. Also you're less distracted by buildings, people on the pavement, etc.

In broad daylight the sun illuminates the surface of the road, there are a lot of reflections on cars, buildings, etc. This makes it harder for the MCLA-beginner to navigate and drive without damaging your vehicle.

In Arcade mode you can set the time of day while racing. The default setting is Dynamic, but you can switch it to Night by pressing … and then ….

I believe the time of day in career mode is always set dynamic, so live with it.

8. Exit the game

I believe in every other game I have played so far there is a menu option that says Quit, or Exit or similar. I cannot find it in MCLA. The game wants you to play it forever! Or is this common behavior on Xbox games?

However, I was only able to return to the Xbox dashboard by pressing the center X-button on the controller or on the steering wheel and then pressing Y to return to the dashboard.

9. Conclusion

There definitely are a lot of other tips for beginning drivers in MCLA, if I have time I'll post them on this blog. In the meantime, feel free to leave a comment, or maybe you have tips of your own that you want to share, so we can all benefit.

Thanks for reading,

Peter Kassenaar
-- 26-29 december 2008

P.S. I definitely need a way to make screenshots from my Xbox console, to better illustrate some of the points mentioned above. Any tips? Thanks!

02juli

Counting selected items in a List Control using Linq

In my previous blog post I wrote about a method I found on clearing all items in a List Control using the (apparently) built-in method ClearSelection().

In this post I discuss a small technique some of you might also find useful. Besides clearing the items in a list control it was also necessary for the before mentioned application to count the number of selected items in a List Control (mosty a <asp:CheckBoxList>). In some lists users where restricted to selecting a maximum of 5 items out of 10, or similar. If a user selects a sixth item, an error message is shown.

Traditional approach using foreach()

The traditional approach would be something like the code below.

First, declare the CheckBoxList on the page like this

<asp:CheckBoxList runat="server" ID="chkList" RepeatColumns="2" RepeatDirection="Vertical"

AutoPostBack="true" OnSelectedIndexChanged="chkListChanged" />
<
asp:Label ID="lblNoItems" runat="server" />

For the sake of the example I use the Page_Load() event in code behind to fill the list with 20 items:

 protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            // fill items in CheckBoxList

            for (int i = 1; i <= 20; i++)

            {

                ListItem li = new ListItem();

                li.Text = string.Format("Item {0}", i);

                li.Value = i.ToString();

                chkList.Items.Add(li);

            }

        }

    }

Then, write the method chkListChanged() to handle the selection of the items.

protected void chkListChanged(object sender, EventArgs e)
{

int selectedItems = 0;

       foreach (ListItem li in chkList.Items)

        {

            if (li.Selected)

                selectedItems++;

        }

        if (selectedItems > 5)

        {

            // throw some error message

            lblNoItems.Text = " Too many items selected...";

        }
}

An approach using Linq

Since the project I'm working on is a full .NET 3.5 Linq-based solution, I figured it would be elegant to use Linq also to retrieve the number of selected items in the List. This way it is like "querying a List Control". This is (IMHO) quite an exciting concept, if you were used to only build queries for SQL-databases. After some googling I composed the following method

var total = from i in chkList.Items.Cast<ListItem>()

                    where i.Selected == true

                    select i;

now the variable total is available. It holds all the selected items in the list. We can use the Linq method Count() to test how many items have been selected and show an appropriate message in lblNoItems.

int allowedItems = 5;       

        lblNoItems.Text = total.Count() <= allowedItems

            ? string.Format("No. of selected items: {0}. You're OK!", total.Count())

            : string.Format("To many items selected ({0}), please deselect {1} item(s)!",

                total.Count(), (total.Count() - allowedItems));

Two things to notice here:

  • In the Linq query you must explicitly cast the items in the List to a <ListItem> object using the Cast() method, otherwise the query won't work.
  • I use the ? : operator to decide wich message is shown instead of an if-else compound statement.

As I've discovered, there are more advantages using Linq this way. For example, the variable total not only holds the number of selected items in the list (as the variable selectedItems does in the traditional approach), but is a complete array of all selected ListItem objects. You could further manipulate this, for example serialize them and store in a users profile or in a database, and so on (again, using a foreach-loop).

This is what the page looks like when 5 items or less are selected

And here's the UI once you select a sixth item

The files are available for download,

Thanks for reading,

-- Peter Kassenaar,
2 juli 2008.

countCheckBoxList.zip (1,56 kb)

27juni

Clearing all items in a List Control

I am currently working on an ASP.NET project where the client needs to have a web form with about ten lists, each list containing anywhere from three or four to a couple of dozen options.

These lists are composed as a CheckBoxList, RadioButtonList or DropDownList, all based on the standard <asp:xxxList> control.

The selected items in the lists are used to build a Linq statement to query and filter a large database table. The (concept) UI of these lists are like the image below.

Clearing the list

In order to begin a new query, we figured it would be handy to have a button below each list to clear the selection of all items instead of manually deselecting every option. So I added a Clear button ('Leegmaken' in Dutch) and wrote the following code for the button. Sure, I looked through the Intellisense list for something like 'empty', or, 'deselect', but couldn't find anything.

So I assumed this was the easiest way to set the Selected state of every ListItem to false. Have a foreach() loop and loop through every ListItem in the control, setting the Selected property to false. (The bindConditionalGrid() method below the loop is for binding the GridView in the page again, to reflect the new criteria.)

Until yesterday.

ClearSelection()

By accident I was looking at the Intellisense list for a CheckBoxList control, when I stumbled upon the ClearSelection() method, which apparently had the exact same function as the little method I wrote above!

So now instead of four lines of code, I need only one. And this times ten, for the number of Clear-buttons in the page (I know, I think it is possible to write a generic method to clear a list and pass the button name or list name as a parameter, but this quick and dirty approach is suitable for now. If you have such a method, feel free to share it via a comment below :-).

Here is the MSDN page with the documentation for the ClearSelection method:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listcontrol.clearselection.aspx 

Bottomline

Intellisense is your friend.

There might be prewritten methods for a task that you wish to accomplish. They might have other names than you expect :-), especially when English is not your mother tongue.

Peter Kassenaar
-- 27 juni 2008

19februari

Extending BlogEngine.NET with shadowbox

Last week I investigated options on extending the well known Lightbox 2 functionality with the ability to display other types of media files, in particular swf-files. This for the purpose of my blog, where I wanted to have a good user experience on viewing uploaded screencasts (or 'videotutorials', or 'webvideos', or whatever you call them). I fiddled with it a bit, but soon discovered it would take me quite some time to adjust it to my needs.

But behold, after just a minute of googling I stumbled upon Shadowbox Media Viewer by Michael J.I. Jackson, a piece of software released just a couple of days ago. And thankfully, it fulfilled all my needs (and quite a bit more than that!). What exactly is shadowbox? According to the site

"Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page."

Out of the box it works really great in static HTML, or even – semi static – ASP.NET pages. I wanted however to add it to my blog, wich is driven by BlogEngine.NET (I started this blog only on feb. 1st). It turned out to be pretty easy, and I wanted to share this experience to the world, so I dedicated a screencast to it.

Check it out - just click the image, it should load the screencast in a shadowbox itself (hey, what else did you expect :-). Please notice however that the audio quality is not optimal. It has some clicks and squeaks. I apologize for that. Other properties are:

  • A 17-minute walkthrough on extending a fresh BlogEngine.NET installation with shadowbox.
  • Starting with downloading the needed files, incorporating them to the blog, ending with adding a new post that contains 'shadowbox-ed' media like hi-res images and swf-files.
  • Please allow the video a couple of minutes to load. It should take a while, but I hope it's worth the wait. (Weird experience: Firefox loads the video a lot faster that Internet Explorer, given the same amount of bandwith…)

If this video is useful to you, or you have other comments, please feel free to leave a note.