# Sunday, 01 April 2012

Woohoo! And another year of being an MVP. I’m glad I made it again and that my contributions to the community get appreciated by that same community and Microsoft.

The last year for sure was busy with being active on the ASP.NET forums, being a board member of the Belgian Windows Azure user group (azug), I became a MEET member, …

Grz, Kris.

Sunday, 01 April 2012 16:14:04 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [1]  | 
# Monday, 12 March 2012

banner385x201

 

Likely you already found out that recently Windows 8 preview got released showing off some of the new ways Windows 8 will work for you and your company. Microsoft Belgium jumps on the bandwagon and organizes a cool concept: study at day, hack and code at night.

You can follow during the day the following program:

8:08 - 9:00
    Registration
9:00 - 10:30
    Opening keynote: Introducing Windows 8
    Platform for Metro style app and principles
        Speaker: Giorgio Sardo
10:30 - 11:00
    Break
11:00 - 12:30
    Building Metro Style Apps with XAML and HTML: everything .NET and Web developers need to know
12:30 - 13:15?
    Lunch
13:30 - 15:00
    Building Metro Style UI and integrating with Windows 8 Experiences
15:00 - 15:30
    Break
15:30 - 17:00
    Bringing Your Apps to Life
    Closing with Windows Store & Developer opportunity
17:00 - 18:00
    Closing drink

After that the hackaton starts:

18:00 - 18:30
    Welcome and setup
18:30 - 23:00
    Develop your app, code galore!
19:00 - 20:00
    Pizza & Red Bull
23:00 - 24:00
    Showcasing of apps, voting for the best apps
    Best app of the night prize!
24:00
    Closing or stay up all night :)

So if you like to start being creative for Windows 8 and you’re in Belgium, you know where you want to be on March 23 2012.

Grz, Kris.

Monday, 12 March 2012 22:25:00 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [3]  | 
# Friday, 09 March 2012

Tech days Belgium 2012 was a jam packed load of interesting sessions. For those who couldn’t attend or, like myself, couldn’t follow the sessions due to having to choose between several sessions at the same time slot, we can now watch the recorded sessions online: http://www.microsoft.com/belux/techdays/2012/Home.aspx.

techdaysbelgium2012

Grz, Kris.

Friday, 09 March 2012 23:09:00 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [4]  | 
# Monday, 05 March 2012

Just as of today there’s a new update of WebMatrix 2 Beta for download. One of the direct changes that one can see is that WebPages 2 coolness dripped into it too.

For example, in the past one had to write:

<a class="order-button" href="@Href("~/order", featured.Id)" title="Order @featured.Name">Order Now</a>

And now that has become:

<a class="order-button" href="~/order/@featured.Id" title="Order @featured.Name">Order Now</a>

Notice the difference? Cool huh? And WebPages 2 holds more nifty cool features that will help out web developers all around the globe.

I’m looking forward to see this small yet powerful tool come to a final release. Hopefully soon.

Grz, Kris.

Monday, 05 March 2012 21:01:53 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  | 
# Tuesday, 07 February 2012

Today I gave another Webcamps session at Microsoft HQ in Brussels Belgium. A nice bunch of people and I had a small surprise for them later on the day… Microsoft chose this day to celebrate the fact that Internet explorer 6, the quite old browser, had gotten under 1% usage in Belgium. Something to celebrate! So we were presented a very, very tasty pie with a nice message on it:

byebyeie6

In case you didn’t know it yet, Microsoft provides a dedicated site which keeps track of the usage of IE6: http://www.ie6countdown.com/. On that site you can also find a small snippet to add to your site to promote people visiting yours to simply install a better browser. Note: Internet explorer 10 will be around (and hopefully soon). I have been playing with the preview bits already and I must say, it looks very good. More speed, better HTML 5 support, increased security, …

In case you want to know, yes the pie tasted really great.

Grz, Kris.

Tuesday, 07 February 2012 00:22:00 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [2]  | 
# Wednesday, 18 January 2012

In a former post I already presented the new CSS 3 column module and some funky stuff one can do with it.

However sometimes you want to provide your end users the possibility to decide for themselves how many columns they want to see. The following sample will do just that with the help of some javascript and the new HTML 5 range input type.

The following CSS is used to style up some range of text from the beginning:

#test {
    column-count: 3;
    column-rule:2px solid #000;
    column-gap:80px;
}

to style up a div element with id test:

<h3>How many columns?</h3>
<input type="range" min="1" max="5" onchange="changeColumnCount(this)">
<div id="test">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim mattis justo, 
      sit amet volutpat turpis convallis vel. Etiam pulvinar tincidunt diam, sit amet ornare justo
    </p>
</div>

Note the type of the input element: range. I specified the min and max values so there can be only one column or a maximum of five columns. The onchange event will call the following javascript function which takes care of the behavior part and makes the magic happen:

<script type="text/javascript">
	
    function changeColumnCount(meter) {

        document.getElementById('test').style.columnCount = meter.value;
    }

</script>	

The meter value gets set to the column-count CSS property. Notice the way it is done in javascript, not via column-count but via the element’s property style.columnCount. Make sure that you have the casing right as javascript is a case sensitive language!

I used Internet Explorer 10 on Windows 8 and Opera on Windows 7 to test the feature:

IE10PreviewWin8

IE10Win8

The second IE10 is the Metro version. Note the number 4 coming over the meter. This shows up when dragging the slider from one value to another and disappears again when you release the slider.

The full code to test this out:

Have fun with this!

Grz, Kris.

CSS3 | HTML5 | range
Wednesday, 18 January 2012 12:41:22 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 17 January 2012

More and more CSS 3 technology starts to come natively to modern browsers. One of these that I like is the new column module. This post will highlight some of the nice features.

column-count

Setting the column-layout will, for the selection made, make up the content in a column layout without you having to mess around with tables and trying to get things right. For text I simply made use of lipsum and wrapped it in a div:

<div id="test">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim 
mattis justo, sit amet volutpat turpis convallis vel. Etiam pulvinar tincidunt diam, sit amet 
ornare justo aliquam sed. Aliquam augue tortor, lacinia a sodales in, fermentum vitae sapien. 
Nulla pellentesque nisl at mauris aliquet in condimentum neque ullamcorper...
        </p>
</div>

For the CSS part I made up this part which makes the selection on the div element with id test:

#test {
    column-count: 3;
}

I tested this in browsers like Internet Explorer 10 (on Windows 8) and Opera which work already fine out of the box without browser specific prefixes like (-moz, -ms, -webkit):

columncount

column-rule

Making several columns up with practically no effort is nice but sometimes you want to have a small improvement in readability and add small guidelines in between to better separate the different columns. With the column-rule you can add these. The syntax follows the same easy to remember format like we’re used to from setting a border:

#test {
    column-count: 3;
    column-rule: 1px solid black;
}

Which results in:

columnrule1

Of course you can also go for a 5px dotted red approach if you like to:

#test {
    column-count: 3;
    column-rule: 5px dotted red;
}

columnrule2

 

column-gap

In the previous samples we noticed that the text was pretty close to the borders of the columns. If this is not the desired effect you can set the column-gap to chime in that nice piece of extra space:

#test {
    column-count: 3;
    column-rule: 1px solid black;
    column-gap:80px;
}

Which results in:

columngap

As you can see, with some easy to use CSS 3 column module goodness one can style up the readability of content in an easy way. In the future more and more browsers will support this natively out of the box as well so keep it in mind for one of your next projects.

Grz, Kris

Tuesday, 17 January 2012 16:35:24 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  | 
# Friday, 13 January 2012

Today I found out about a freely available online book about Coffeescript.

If you don’t know what Coffeescript is all about then please take a look at this short introduction taken from Wikipedia:

“CoffeeScript is a programming language that transcompiles to JavaScript. The language adds syntactic sugar inspired by Ruby, Python and Haskell to enhance JavaScript's brevity and readability, as well as adding more sophisticated features like array comprehension and pattern matching. CoffeeScript compiles predictably to JavaScript and programs can be written with less code (typically 1/3 fewer lines) with no effect on runtime performance.”

Cool!

Of course besides being cool as a language, developers like to have cool editors to work with. One I found is the free Mindscape Web Workbench.

If you’re more into learning from video tutorials you can check out the Pluralsight training or Tekpub one.

Grz, Kris.

Friday, 13 January 2012 12:53:35 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Sunday, 08 January 2012

If you provide a way for your user to make an appointment it’s always a good idea to provide a reminder mechanism for him or her. A nice way to do this is to send a mail. But a mail alone is sometimes not enough and Microsoft Outlook users for example would rather love to see a .ics appointment attached.

The System.Net.Mail namespace provides the needed functionality to get this recipe cooking in no time and will taste great afterwards.

First part of the recipe are the helper classes which hold the functionality for making up the ics content and sending a mail depending on provided input.

The Mailing class:

using System.Net.Mail;
using System.Web.Configuration;

namespace IcsAsMailAttachment.Controllers
{
    public class Mailing
    {
        public void SendMail(string from, string to, string subject, string body, Attachment attachment)
        {
            using (MailMessage mailClient = new MailMessage(from, to, subject, body))
            {
                mailClient.Attachments.Add(attachment);
                mailClient.IsBodyHtml = true;

                SmtpClient smtp = new SmtpClient(WebConfigurationManager.AppSettings["mailserver"]);

                smtp.Send(mailClient);
            }
        }
    }
}

This class does the actual sending. The mailserver, on line 15, is retrieved from the web.config file appSettings section. This makes it easy for the site admin to change the mail server without having to adjust and redeploy the code (saving time and money).

The Appointment class:

using System;
using System.Text;

namespace IcsAsMailAttachment.Controllers
{
    public class Appointment
    {
        private string GetFormatedDate(DateTime date)
        {
             return string.Format("{0:00}{1:00}{2:00}", date.Year, date.Month, date.Day);
        }

        private string GetFormattedTime(DateTime dateTime)
        {
            return string.Format("T{0:00}{1:00}{2:00}", dateTime.Hour, dateTime.Minute, dateTime.Second);
        }

        public string CreateIcs(string subject, string location, DateTime startDate, DateTime endDate)
        {
            StringBuilder sb = new StringBuilder();

            sb.AppendLine("BEGIN:VCALENDAR");
            sb.AppendLine("VERSION:2.0");
            sb.AppendLine("PRODID:-//hacksw/handcal//NONSGML v1.0//EN");
            sb.AppendLine("BEGIN:VEVENT");

            string startDay = string.Format("VALUE=DATE:{0}{1}",
                GetFormatedDate(startDate), GetFormattedTime(startDate));

            string endDay = string.Format("VALUE=DATE:{0}{1}", 
                GetFormatedDate(endDate), GetFormattedTime(endDate));

            sb.AppendLine("DTSTART;" + startDay);
            sb.AppendLine("DTEND;" + endDay);
            sb.AppendLine("SUMMARY:" + subject);
            sb.AppendLine("LOCATION:" + location);
            sb.AppendLine("END:VEVENT");
            sb.AppendLine("END:VCALENDAR");

            return sb.ToString();
        }
    }
}

The Appointment class does the heavy lifting of generating the string needed for the ics markup. Two helper methods are put in place to get a nicely formatted Date and Time string.

The SendMailController class:

using System;
using System.IO;
using System.Net.Mail;
using System.Text;
using System.Web.Mvc;

namespace IcsAsMailAttachment.Controllers
{
    public class SendMailController : Controller
    {
        //
        // GET: /SendMail/

        public ActionResult Index()
        {
            string ics = new Appointment().CreateIcs("A great meeting to attend!", "In the cloud",
                new DateTime(2012, 2, 3, 18, 0, 0), new DateTime(2012, 2, 3, 22, 15, 0));

            MemoryStream ms = new MemoryStream();
            UTF8Encoding enc = new UTF8Encoding();
            byte[] arrBytData = enc.GetBytes(ics);
            ms.Write(arrBytData, 0, arrBytData.Length);
            ms.Position = 0;

            // Be sure to give the name a .ics extension here, otherwise it will not work.
            Attachment attachment = new Attachment(ms, "Appointment.ics");

            new Mailing().SendMail("from@contoso.com", "to@ymca.com", 
                "The subject", "<strong>Welcome to the cloud!</strong>", attachment);

            return View();
        }
    }
}

The SendMailController class, I tested this in an ASP.NET MVC 3 web application, creates a new ICS appointment on line 16. For being able to send the attachment without first having to save it to disk we create a MemoryStream instance on line 19 and transform our ics to a byte array so that we can pass it along in the constructor of the Attachment class on line 26. The highlight is on line 26 as you will need to provide the .ics extension in the name there.

When testing this you might want to send it directly via a mail server. However this might get the sys admin at your company upset or perhaps gets the sender email address that you use blacklisted. For this purpose you can tell ASP.NET to drop the generated mail on disk instead. Just be sure to turn that off when you are deploying to a live production as otherwise nobody will receive your emails!

Email settings in web.config:

<?xml version="1.0"?>

<configuration>
  <system.net>
    <mailSettings>
      <smtp deliveryMethod="SpecifiedPickupDirectory">
        <specifiedPickupDirectory pickupDirectoryLocation="C:\temp\mails" />
      </smtp>
    </mailSettings>
  </system.net>

 

The results:

Once the mail has been sent, it will appear in the designated pickup directory location as specified in the web.config.

Pickup folder for ASP.NET mails

Double clicking on the .eml file opens it up in in the associated application, for me that is Outlook.

The email that was sent

There you see the Appointment.ics file. Remember the name we gave on line 26 in the SendMailController? Yes, that is exactly the name, and correct extension, that was provided. Double click the ics file and you can see the appointment.

The ICS file opened ready for adding it to the agenda in Outlook

The date and times come from the parameters passed in the SendMailController class on line 16 and 17.

As you can see, it is quite easy to set this up with just a bit of code. Providing the opportunity to add an appointment directly to the agenda of the interested user is a great benefit. They don’t have to create one themselves, enter in the dates and hours, possibly making mistakes when doing so, … Make it easy for your customers to keep their agenda up to date in a quick and easy way and they’ll love it.

Grz, Kris.

Sunday, 08 January 2012 14:51:10 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  | 
# Wednesday, 04 January 2012

Just noticed via Twitter that there’s a new December 2011 update available: Visual Studio 2010 and .NET Framework 4 Training Kit December 2011 update. This training kit holds a lot of interesting small videos, demos, code, … oh my.

Today I also found out about a blog post that lists around 30 free books. Books about javascript, Ruby, C#, …

Grz, Kris.

Wednesday, 04 January 2012 21:13:49 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  |