Kris' blog

Playing around with the new HTML 5 range input type and CSS 3 column module

Kris van der Mast — Wed, 18 Jan 2012 12:41:22 GMT

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:

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.

CSS 3 new column module

Kris van der Mast — Tue, 17 Jan 2012 16:35:24 GMT

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):

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:

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;
}

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:

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

Coffeescript introduction free online book

Kris van der Mast — Fri, 13 Jan 2012 12:53:35 GMT

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.

How to send a mail with an ics appointment as attachment with System.Net.Mail

Kris van der Mast — Sun, 08 Jan 2012 14:51:10 GMT

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.

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

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 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.

Visual Studio 2010 and .NET Framework 4 Training Kit December 2011 update and 30 free books

Kris van der Mast — Wed, 04 Jan 2012 21:13:49 GMT

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.

First steps to a newer site

Kris van der Mast — Tue, 27 Dec 2011 22:01:21 GMT

Today I’ve spent some time on getting the first pages right for a new site. Since 2006 I’ve only had a blog but no particular pages handy on my site. Due to demand by people I decided to take this part up and already crafted several pages:

Today these are still simple html but I want to switch to a full blown CMS system soon. The one that I have in mind is Orchard.

The pages themselves are made up with some small CSS 3 enhancements and HTML 5 semantics in mind. I based it on the Mango theme people can download for Orchard. Actually I started up WebMatrix, grabbed Orchard from the gallery, set up a site and took the aforementioned Mango theme. Then simply creating a couple of pages and in the browser save these as html. Then took Sublime 2 to change some paths to some scripts. Uploaded and voila, one happy camper .

Grz, Kris.

Orchard CMS Hands On Lab for free

Kris van der Mast — Tue, 27 Dec 2011 19:43:51 GMT

Hi,

recently I gave a WebCamps for Microsoft and for that I created a custom hands on lab about Orchard CMS. I put this online for everyone to enjoy. You can download it here.

Grz, Kris.

The sessions I look forward to at Techdays 2012

Kris van der Mast — Sat, 24 Dec 2011 22:01:05 GMT

The list of sessions of Techdays 2012 is practically at 100% so that makes it easy to start choosing the ones I would like to attend up front .

My todo list for those days are:

Day 1

Keynote developers (duh!)
The developer story: CLOUD (Wade Wegener)
The Future of C# and Visual Basic (Bart De Smet)
What's new in Visual Studio 11 for Application Lifecycle Management (Brian Keller)
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4 (Steven Sanderson)

Day 2

Take a Ride on the Metro (Jeff Prosise) or Building services for your phone and tablet applications using WebAPI (Matt Milner)
Developing HTML5 Applications with Script# - Compiling C# into JavaScript (Nikhil Kothari)
The zen of async: Best practices for best performance (Alex Turner)
Building Cross-Platform Mobile Applications with HTML5 (Jeff Prosise)
What's new in Windows Workflow 4.5 (Matt Milner)
SignalR. Code, not toothpaste. (Maarten Balliauw)

Grz, Kris.

Get that bit of hard drive back by cleaning the Web Platform Installer cache

Kris van der Mast — Fri, 23 Dec 2011 21:06:13 GMT

With prices of hard drives going up at the moment you might want to reclaim some valuable space on it.

Web Platform Installer is a great tool to streamline downloads, their dependencies and have these installed on computer. I’m sure you already have this gem installed. If not, then quickly reach out here and grab it: http://www.microsoft.com/web/downloads/platform.aspx. Really, do it now. It’s that cool.

Of course downloading all the cool new tools or updates can start to weigh on that poor little disk inside your pc after a while and you might want to clean up after a while. The steps are pretty easy if you know where to look:

Open Windows Explorer
In the address bar type in the following: %localappdata%\Microsoft\Web Platform Installer
In the Installers subfolder you can find the gold. Either save it on an external hard drive or delete as much as you want.

Grz, Kris.

New events overview site for Microsoft Belgium

Kris van der Mast — Thu, 22 Dec 2011 22:24:58 GMT

Recently Microsoft released a new web site where you can see what will be covered by

Live meetings
Offline events
Community events
…

Be sure to check it out at www.msdn-events.be.

Grz, Kris.

Learn Windows Azure event

Kris van der Mast — Wed, 14 Dec 2011 14:25:54 GMT

The last months were pretty quiet around ScottGu but yesterday evening, for us Belgian people, there was a great and lengthy streamed event about Windows Azure. As I’m the competence center leader of the Azure Cloud Computing team at Ordina Belgium I took the opportunity to gather up with colleagues, ordered pizza and made a great evening.

I’m glad to see this kind of events happening. They provide excellent coverage about the topic, starting out in a way that newcomers can follow with ease but also introducing the latest and greatest tooling and progress the Windows Azure platform has made during the last months. There’s also a ton of great news on the fronts of having people with skills other than .NET being served as well. Node.js, Java, PHP and other technologies get attention. That’s just awesome!

The Windowsazure.com website also got a major update with that nice looking Metro style sauce over it.

In the past people sometimes feared testing the cloud for budget reasons. Even a colleague of mine once had to find out the hard way that when you shut down an instance but keep the deployment you also keep on getting charged. Microsoft now releases a new way to explore Azure for 3 months but with a spending limit. According to me that promises a safer way to spend researching Azure.

Grz, Kris.