I use my blog to record and share my knowledge, but also to present to possible employers my skills. I use it like a marketing tool for my persona. For this, I need to make available not only the RSS and Twitter account, but also resume profiles like Xing, LinkedIn and Facebook.

Since I am using WordPress and I know a little bit of PHP and MySQL I wanted to customize my current theme.But some time ago I’ve read that they don’t encourage you to customize directly the chosen theme, but instead create your own child theme, with the desired customizations. This way, when the theme will be updated, you won’t loose neither time nor brains trying to redo all the modifications.

Creating a child theme, directly from the developers of WordPress

Making a child theme is very simple. Create a directory, put a properly formatted style.css file in it, and you have a child theme! With a little understanding of HTML and CSS, you can make that very basic child theme modify the styling and layout of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved.

For some time ago, I started using child themes. At first, it seemed a useless time investment, but since then the theme was updated 3 or 4 times, so imagine each time creating a list of modifications to the original, implement them again and again in the new version!

Let’s see some code!

The modification that I will present now is how to add new icons for job websites, up on the bar. The steps are:

1. Using your preffered image editing tool (I preffer using Paint .Net, very smart and effective PNG producer) I modified the nav-icons.png file :

From : To:

The extra icons are taken from a royality free icon pack. They are 64 by 64 pixels. You can modify their sizes, but you’ll also have to update the javascript code that moves the images up and down.

Note: To make your life easier and keep the modifications to a minimum, keep the Twitter icon first and the RSS last, otherwise you’ll have to override the entire $nav_extra underneath.

2.  Add the icons in your child theme, by concatenating the script that shows new buttons with the one which is already present, containing the Twitter and RSS. If you want to change the order of the icons, you can change the lines order. If you want to make the RSS icon first, instead of adding strings to $nav_extra, you’ll have to recreate also the RSS and Twitter strings and insert them in the string variable. Don’t forget to add the action to WordPress queue, such that your function to be called:

function mystique_navbuttons_pics($nav_extra)
{
  $nav_extra .= '<a href="http://www.facebook.com/radu.poenaru" class="nav-extra facebook" target="_blank" title="Contact me on Facebook!"><span>Contact me on Facebook!</span></a>';
  $nav_extra .= '<a href="http://www.linkedin.com/in/radupoe" class="nav-extra linkedin" target="_blank" title="Contact me on LinkedIn!"><span>Contact me on LinkedIn!</span></a>';
  $nav_extra .= '<a href="https://www.xing.com/profile/Radu_Poenaru" class="nav-extra xing" target="_blank" title="Contact me on Xing!"><span>Contact me on LinkedIn!</span></a>';

  $nav_extra = str_replace("title", "target='_blank' title", $nav_extra) ;

  return $nav_extra;
}
add_action('mystique_navigation_extra', mystique_navbuttons_pics');

3. Add the CSS required by the icons. This requires each icon to know where to start cutting from main PNG file its own appearance. We will create and inject the CSS in the corresponding file.

function mystique_navbuttons_css(){
 $i = THEME_URL.'/images'; ?>
/* Extra navigation icons */
#header a.xing{background: url(<?php echo $i; ?>/nav-icons.png) no-repeat scroll -192px top transparent}
#header a.linkedin{background: url(<?php echo $i; ?>/nav-icons.png) no-repeat scroll -64px top transparent}
#header a.facebook{background: url(<?php echo $i; ?>/nav-icons.png) no-repeat scroll -128px top transparent}

<?php
}
add_action('mystique_css','mystique_navbuttons_css');

That’s all guys, now you have a child theme wit your customizations and never afraid that you’ll have to spend time again when the theme will be updated!

Post from: Radu Poenaru's Weblog

Adding new Social icons to the Mystique theme

Almost all good developers that I know have some kind of repository of their code. Mine is my blog, this blog. Stay with me and you’ll find out how to easily be able to create your local version of WordPress, customize and test your plugins.

For´this you’ll need to follow the next steps:

1. Go to Webmatrix official website and download the Web Platform Installer which will install for you not only Webmatrix itself, but also a lot of useful tools like an integrated webserver, Internet Information Services Express, PHP interpretor and its connectors just to name a few. But you can also use it to add new features like ASP .Net MVC3!
2. Because now the install of MySQL server is not any more supported, you’ll have to install it by yourself – go to their official website and download it from there. Choose the MSI Installer essentials and the process will be very easy. I prefer to install it as a service and then, from Control Panel –> Services, to set it to start manually. This way won’t eat resources when it is not needed.
3. Next, we’ll download a MySQL GUI called HeidiSQL – free and smart product. One might say that command line is enough, but I would rather concentrate on development instead of memorizing all those commands.
4. Create an empty database and a user. I personally like to set the database name, user and its password to the ones that I use on my production WordPress website. This way, I only have to modify only the DBHost in the WordPress’ configuration file.
5. Create a production database backup using your prefered tool – I use for quite a while the WP-DB-Backup plugin for WordPress to generate my scheduled backups. Import  the content of the backup (using HeidiSQL is very easy – just point it to a zip, gzip archive or a sql file).
6. Now that we setup our database, let’s go to the code – download locally the sources of your website using FTP or other tools that your hosting provides, open Webmatrix and create a new website using local files. This way you will setup your development workspace wherever you like – I prefer to use D: drive. Otherwise, you’ll be prompted to use your MyDocuments folder which will not be available any more in case of windows clean reinstall – the entire c: drive will be wiped-out.
7. Make the proper changes to the wp-config file (if you followed my advice you’ll just have to replace in DBHost your production server with localhost). Hit Run (the small green arrow from the Webmatrix top ribbon) and you’re good to go!

If by any change you get a blank window in your prefered browser stating that “

Error establishing a database connection

” or something like this, go and check that in your hosts file (found in c:\Windows\System32\drivers\etc\) you have uncommented the line with localhost:

# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
    127.0.0.1       localhost
#    ::1             localhost

Happy coding!

Post from: Radu Poenaru's Weblog

7 easy steps to use Webmatrix and WordPress local development

I wrote quite a while ago about How to implement Syntax Highlight in your WordPress blog. It used an forward, yet permanent approach: modify you’re theme’s header.php. But is it enough?

Lately, I wanted to update my blog’s theme to the newest version. But hey! I had a lot of modifications such the one above that kept me from doing a smooth update: BNR Slider, custom images for RSS and Twitter, hints, Syntax Highlight and so on.

The newest solution that I come up with is using a child theme, feature provided by WordPress engine. Basically, you have a theme applied to you blog that you like. Instead of modifying it, you create a new folder in theme’s directory with a special name who’ll be applied OVER your base theme, customizing only the aspects you need. Assuming that your theme’s name is MyFavoriteTheme, you’ll have to create the child theme as MyFavoriteTheme-child.

In order to use your new theme, you’ll have to create in the MyFavoriteTheme-child folder two files:

1. styles.css – required – who’ll mark your folder as a child theme
2. functions.php – optional – for our example is required, as we’ll write code inside of it

First, you Really need to setup the styles. The content is simple and explained in this straight-forward article.

The most interesting part is the functions.php, where we’ll define code to add our Syntax Highlight classes. You’ll have to put all needed JavaScript files in the /scripts folder, in the root of the WordPress install, and the css files respectively in /styles folder. This is just for easy of migration from one theme to the other, if you get bored or want to change your current one.

Then, in the aforementioned functions.php from your MyFavoriteTheme-child folder you have to insert the following text:

<?php
$path_to_scripts = "/scripts/";
$path_to_styles = "/styles/";

function register_syntaxhighlight() {
  wp_enqueue_script('shcore',  $path_to_scripts.'shcore.js');

  wp_enqueue_script('shbrushcsharp', $path_to_scripts.'shBrushCSharp.js');
  wp_enqueue_script('shbrushcpp', $path_to_scripts.'shBrushCpp.js');
  wp_enqueue_script('shbrushcss', $path_to_scripts.'shBrushCss.js');
  wp_enqueue_script('shbrushobjc', $path_to_scripts.'shBrushObjC.js');
  wp_enqueue_script('shbrushjscript', $path_to_scripts.'shBrushJScript.js');
  wp_enqueue_script('shbrushphp', $path_to_scripts.'shBrushPhp.js');
  wp_enqueue_script('shbrushplain', $path_to_scripts.'shBrushPlain.js');
  wp_enqueue_script('shbrushruby', $path_to_scripts.'shBrushRuby.js');
  wp_enqueue_script('shbrushsql', $path_to_scripts.'shBrushSql.js');
  wp_enqueue_script('shbrushxml', $path_to_scripts.'shBrushXml.js');
  wp_enqueue_script('shbrushas3', $path_to_scripts.'shBrushAs3.js');
  wp_enqueue_script('shbrushjava', $path_to_scripts.'shBrushJava.js');
  wp_enqueue_script('shbrushSql', $path_to_scripts.'shBrushSql.js');

  wp_enqueue_script('shstarter', $path_to_scripts.'shstarter.js', array('shcore'));

  wp_enqueue_style('shcore',  $path_to_styles.'shcore.css');
  wp_enqueue_style('shThemeDefault', $path_to_styles.'shThemeDefault.css');
}

add_action('init', 'register_syntaxhighlight');

?>

The code explanation:

1. First we set some global vars, to know where the directories are;
2. Then we create a new function in which we add one by one the scripts required for the site – you can add the ones that you use and when you’ll post some content that requires a new brush, the shCore will kindly alert you that one of the brushes is missing, specify also the name of it. This way you’ll load only the ones used and no more, keeping the webpage size low and quality high.
3. wp_enqueue_script assures that the script will be loaded once. So if it is already loaded by any other plugin or theme, you will not have it downloaded twice;
4. finally, we add an WordPress action, binding to the init hook and add there our code.

After uploading your code to your WordPress install (be careful to names – Linux is case sensitive), you’ll have to select as theme the child theme, so your modification will be applied. Until you’ll select the child theme, you will not see any changes!

That’s it, folks!

Post from: Radu Poenaru's Weblog

How to add Syntax Highlight to WordPress

As I presented earlier, you can easily create a Silverlight video player and you can see it working pretty nice. Not to mention that it can play  a lot of formats and it is only 344 kb in size!  Now let’s see how this is possible and how can one do it on his website.

From the start, Silverlight was meant to be as easiest as possible to develop and deploy. Also, the cross browser (running on all major browsers) and cross platform (running on Linux, Mac OSX and Windows) was a requirement. But more than this, not to depend on the server side on .Net framework was also important. So you can deploy and run (only for running you’ll need the Silverlight Runtime installed) your app no matter the OS (Operating System).

This is why we discuss today on adding Silverlight to WordPress and not on How to deploy Silverlight on Linux. From the server’s OS point of view, Silverlight is just another file so you don’t need any plugin nor installs on the server side. It is on the client side where it is downloaded, setup with parameters and processed and here you need to install the Silverlight runtime – a mere of 4 Mb. If you’ve developed prior Adobe Flash application, you’ll feel very natural on the process. So let’s begin our ride to add your Silverlight application to WordPress.

Step 1.

Develop your Silverlight application. You should have a .xap file built in order to go further.

Step 2.

Upload to your WordPress blog your Silverlight application to a folder of your desire and then the Silverlight.js file that you find in your Visual Studio solution, in the web application project (I prefer to the root’s scripts folder). If you don’t find it, you can take it from here, but beware that this might be outdated. Afterwards, create a new file, called silverlight_app.js ( I prefer lowercasing all my server side files so I won’t have problems with case-sensitive OS like Linux). In that file, paste the following script (the default way to handle Silverlight errors) and then upload it also:

function onSilverlightError(sender, args) {
    var appSource = "";
    if (sender != null && sender != 0) {
        appSource = sender.getHost().Source;
    }

    var errorType = args.ErrorType;
    var iErrorCode = args.ErrorCode;

    if (errorType == "ImageError" || errorType == "MediaError") {
        return;
    }

    var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;

    errMsg += "Code: "+ iErrorCode + "    \n";
    errMsg += "Category: " + errorType + "       \n";
    errMsg += "Message: " + args.ErrorMessage + "     \n";

    if (errorType == "ParserError") {
        errMsg += "File: " + args.xamlFile + "     \n";
        errMsg += "Line: " + args.lineNumber + "     \n";
        errMsg += "Position: " + args.charPosition + "     \n";
    }
    else if (errorType == "RuntimeError") {
        if (args.lineNumber != 0) {
            errMsg += "Line: " + args.lineNumber + "     \n";
            errMsg += "Position: " +  args.charPosition + "     \n";
        }
        errMsg += "MethodName: " + args.methodName + "     \n";
    }

    throw new Error(errMsg);
}

Add references to both files in your WordPress theme’s header file, inside the <head></head> tag (you can edit the header.php).Note that even if the theme’s folder way deep from the root, the actual page processing is done in the root, where core web files are located. This is why we have added scripts with this path:

<script src="scripts/silverlight.js" type="text/javascript"></script>
<script src="scripts/silverlight_app.js" type="text/javascript"></script>

Step 3.

Create a new article in which you put the Silverlight object. Note that some blog editors (like Windows LiveWriter doesn’t like to have inside the article < or > so you’ll have to replace them with their HTML equivalents &lt; and &gt;). Also replace the PathTo with your actual path  where you uploaded your Silverlight application ( can be a relative path or full http path – as long as you point to the application’s directory) and YourSilverlightApplicationName.xap with the actual name of your application :

<form id="form1" style="height:100%">
<div id="silverlightControlHost" style="width:400px; height:300px" >
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
	  <param name="source" value="PathTo/YourSilverlightApplicationName.xap"/>
	  <param name="onError" value="onSilverlightError" />
	  <param name="background" value="white" />
	  <param name="minRuntimeVersion" value="4.0.50401.0" />
	  <param name="autoUpgrade" value="true" />
	  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
	  </a>
    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>

Step 4.

Post the article and your hard worked Silverlight application!

That’s all!

Post from: Radu Poenaru's Weblog

Add Silverlight to WordPress

I am and will be a Microsoft Developer. While working for convenience with other tools, I love strong type languages. I don’t want to ship products because I saved once and hit “s” one more time, so my product will be shipped with that small, human and yet unpardonable error in code.

How many times did you loose your time and effort with PHP in order to find a small mistake like this?

In my pursue on Microsoft tools path I started enjoying the Silverlight technology. Who might not know, Silverlight is a competitor to Flash. By now, on its 4th version, is way above Adobe Flash in almost all areas (I actually worked with Flex and Flash recently, so I really know what I’m talking about):

• Easy to develop : the C# language is a world class, easy to write in, with good compiler, a lot of resources and a VERY good IDE (try to write code and animations in same time in that Flash IDE and you’ll see what I mean)
• Supports Full HD (there are examples on the net with 2 or 3 full HD movies playing), while Flash just tries to get HD with lots of CPU used.
• The model of development is the same for in Browser and Out of Browser – you don’t need to change the tool from Flash to Flex in order to have same product for Desktop and Web.

So I want to really learn, but what example shall I have? My second job as student is to work in Uni-Bonn, developing a Ruby on Rails solution for them. While this is also an interpreted language, the RubyMine IDE makes it possible not to miss a variable or a mistyped string. It doesn’t provide types, but still, it’s a step forward. To improve my Rails skills I use a lot the website of a professional Ruby developer, Ryan Bates. He has a lot of RailsCasts and he adds one each week. But unfortunately, being an Apple user, the movie is encoded as .mov file. I discovered that on the second link, with smaller font, provides also an .m4p link.

So I  started developing a web Silverlight player for its movies. Yeah, I know, the web is full of them, but I wanted to lean this technology and also improve my access to Rails Casts.

I begun with a simple Silverlight project, adding a MediaElement on the canvas and set its Source property to a movie. It immediately started playing – was a nice experience by now. But you need controls for moving along the movie timeline, a list from which to choose your desired movie.

Thus, I started creating two User controls – one for MediaElement controls, and other for retrieving the guy’s rss feed, parse it and display it nicely. While the controls were quite fast to develop, the list took more time. Also because I wanted to learn a little bit of Expression Blend. So I used the Shawn Wildermuth’s Dirty Little Secret #2 and learn deep custom templating for a Listbox.

Putting all together was a breeze, the most time used was for testing the final product.

You can go directly to the Silverlight player and see the result.

Post from: Radu Poenaru's Weblog

Silverlight VideoPlayer for RailsCasts

This is my second shot to create a better player for Railcasts. As you can see, it goes better and better. Who knows what might be next?

• How and why I choose the Silverlight platform
• How to integrate your Silverlight content with your WordPress blog (and presumable all blog systems who allow you to add JavaScript)

Post from: Radu Poenaru's Weblog

Railscasts Silverlight video player

As a Ruby developer, I work quite a lot with their “special” plugins called gems. The nice fact about the gems is that they bring lots of functionality. By example, there’s a gem for paginating a collection who takes just few parameters and not only that finds out how many objects the collection has, but also how to split them, generating the corresponding links and serving to the original container (that used to show the entire collection) only the collection part that is representative in the context of current page and items per page.

Before someone new to a specific gem starts thinking to implement it, usually searches on the net for examples. The most important gems are described and exemplified in Railscasts.com. The content is excelent, the quality is good, sound is nice but the format chosen for movies is Apple’s .MOV proprietary format. There are few plugins to install for playing the files with MediaPlayer, but frankly I wanted a quicker solution than go on some obscure websites and getting from there a creepy .exe installer.

So I’ve created a simple .mov player that will replace the 33 MB of useless QuickTime Player (if you’re a Mac user, you have already this installed so you’ll not need my hack).

Go directly to the player >

So let’s see some code!

First, I decided to use the Object method in order to play mov files. Apple provides a .cab file, who is able to play this files in browser. More documentation on its parameters you can find in their Embedding tutorial.

Don’t forget to add a link to JQuery library!

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

The html code is shown below and it is pretty straight forward:

<body>
<div class="media">
  <div class="navigationTabs">
      <input type="text" id="txtURL" style="width:75%"/>
      <input type="button" id="btnPlayMov" value="Play"/>
      <input type="button" id="btnClearMov" value="Clear"/>
      </div>
      <div id="divPlayer">

http://media.railscasts.com/videos/188_declarative_authorization.mov

  </div>
</div>
</body>

The JavaScript is a little bit trickier as it involves JQuery.  For a newbie, it is pretty hard to debug, but after a while you’ll just feel it:

$(function() {
  // bind an onClick event for this second Flash container
  $("#btnPlayMov").click(function() {
    var _height = "306px";
    var _width = "400px";
    var _movie =  $('#txtURL').val();

    var _html = '';

    $("#divPlayer").html(_html);
  });

  $("#btnClearMov").click(function() {
    $("#divPlayer").html("http://media.railscasts.com/videos/188_declarative_authorization.mov");
  })
})

Not to mention that it works in all major browsers (IE 8, FireFox 3.6 and Chrome) !

Go directly to the player >

Post from: Radu Poenaru's Weblog

Create a simple HTML .MOV player

Sharing your article for free advertisement on Facebook is a fact. While using different Social Networks sharing tools I had a problem when sharing my articles on Facebook: sometimes the image that I intended to use to represent the article wouldn’t show in the list of the images who can be chosen. Why is that?

It bothered me some while I got the some free time to actually look into this, between exams, work and master research. After some wandering on the internet, I found here the correct directions. What I learnt: Always search for the API!

In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:

<meta name="title" content="title" /> <meta name="description" content="description " /> <link rel="image_src" href="thumbnail_image" / >

Also, beware of this fact:

The thumbnail_image is the URL to the image that appears in the Feed story. The thumbnail’s width or height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w / h, h / w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126 / 39 = 3.23). Images will be resized proportionally.

OK. so these are the Facebook requirements. How can we implement them?

So let’s get into some code.

First, I tried to modify the theme – adding the following code to the header.php file:

$id =$post->ID;
$the_content =$wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
$pattern = '!<img.*?src="(.*?)"!';
preg_match_all($pattern, $the_content, $matches);
echo '<link $image_src="$matches['1'][0];" $matches); $the_content, preg_match_all($pattern, />';

While it is workable, from performace point of view isn’t very nice because you try to read at ANY page refresh the post and show the image. But what if you’re on the first page with lots of posts? Or in archive? The code that I settled in the final was placed in functions.php file in my current theme. It allows me to use triggers that output to the head of the page the desired content and also to do this only when a single post page is requested. The code is:

function add_image_src(){

  global $post;
	// get the global variable post
  // if it exists and is only a single post
  if ($post){

    // pattern for recognizing first image in post
    $pattern = '!<img.*?src="(.*?)"!';
    preg_match_all($pattern, $post->post_content, $matches);

    //first image would be the representative image
    $image_src = $matches['1'][0];
    // extract it as Facebook wants it
    echo '<link rel="image_src" href="', $image_src,'" />';
  }
}

// hooking to the head generation loop my function defined above
add_action('wp_head', 'add_image_src');

Post from: Radu Poenaru's Weblog

How to generate image_src for Facebook links in WordPress theme

Windows Live Writer (shorter: WLW) is one of the most popular blog authoring tool that I also happen to like and use. And I say this because of its features – I especially enjoy the Preview tab. But what it really lacks is previewing the ENTIRE page – it will get only the html and some css. So no Syntax Highlighting of my code? Let me tell you how I solved this issue.

As a blog writer I searched for something that could allow me to write the articles offline and then upload them in WordPress. I also tried WordPress built-in editor, but the editing box is so small that I couldn’t use it too much.

The most important feature for me is that it retrieves the blog theme and has a preview function that provide you the same look on editor window. So you will be able to write a post with a preview. But when having a more complex theme, using JQuery or Prototype, you will discover that you don’t get any more the same look and feel as in the blog. This is partially ok for editing, but sometimes it is really bad – especially if you’re a programmer and add a lot of code in your page. On blogs there is a solution to show the code with syntax color, but in the Windows Live Writer I couldn’t find one suitable plug-in that does this.

So it’s time for a simple and nice hack: while registering your blog in main menu entry Blogs – Edit blog settings, it will retrieve the page format for the preview feature. Searching in Windows 7 special directories, I found where it stores the blog template:

For Windows 7 and Vista users: C:\Users\YourUserName\AppData\Roaming\Windows Live Writer\blogtemplates\

For Windows XP users: C:\Documents and Settings/YourUserName/Application data/Windows Live

In this folder you’ll find as many folders as blogs you have registered in WLW – so it’s a matter of luck to find the right one. Basically, you have to navigate inside of each one and you’ll find there 2 HTML files:  index.htm and index[1].htm and some not interesting folders containing associated images and css files.

First I tried to edit the index.htm file, who seems to be used by WLW to decorate the Edit view and inserted the following code right above the </HEAD> tag:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

But surprise! Editing tab was changed, code nice highlighted , but it also modified  the Source tab in the way that now contained also all the HTML generated by Syntax Highlighter. After undo, I was able to see again my page as it was before. So I modified in the same way index[1].htm file, which I found that is responsible for the Preview tab and it worked like a charm. So now I have the same Syntax highlight in WLW as on my blog!

Post from: Radu Poenaru's Weblog

Add SyntaxHighlight to Windows Live Writer in Preview mode

Assume that you have an plain text, old Comma Separated Values file filled with your precious export from a legacy system. How can you process it easily now? The first answer that comes to mind is to parse it and load it into a datatable and later process it by using DataTable.Select() method. But this approach has some limitations – like splitting data into several tables and then join them.

One would imagine that parsing CSV files is a straightforward and boring task, given that it is quite a while since CSV is around. Some of them are correct – in the sense that many implementations merely use some splitting method like String.Split(). Some don’t even offer the specification of the values splitting character – so your file wouldn’t be parsed correctly if instead of , you have ; as separator – yet another thing to modify if you’re lucky enough to have the sources. Others will not handle properly field values with commas because the simple split method of the String class. But there are better implementations that take care about escaped quotes, trimming spaces before and after fields and other small and useful details, but very few that I found did it all as I liked it – and at least as importantly, in a fast and efficient manner.

After trying several methods to parse the csv file, I endup using Matt Perdeck’s LINQ to CSV library presented in its article on The Code Project website.

Among the feature that I used and liked very much I would mention (from the article):

• Follows the most common rules for CSV files. Correctly handles data fields that contain commas and line breaks.
• In addition to comma, most delimiting characters can be used, including tab for tab delimited fields.
• Can be used with an IEnumerable of an anonymous class – which is often returned by a LINQ query.
• Supports deferred reading.
• Supports processing files with international date and number formats.
• Supports different character encodings if you need them.
• Recognizes a wide variety of date and number formats when reading files.
• Provides fine control of date and number formats when writing files.
• Robust error handling, allowing you to quickly find and fix problems in large input files.

Using the library is straight-forward: after downloading the zip file from the The Code Project (this required that you have an account there) you can start using it by including it as a referenced library in your project.

Next step is to define the layout of your csv file, in a manner that CSVtoLINQ to be able to map the data from file (which is pure text) to correct data types :

using LINQtoCSV;
using System;

class Product
{
    [CsvColumn(Name = "ProductName", FieldIndex = 1)]
    public string Name { get; set; }

    [CsvColumn(FieldIndex = 2, OutputFormat = "dd MMM HH:mm:ss")]
    public DateTime LaunchDate { get; set; }

    [CsvColumn(FieldIndex = 3, CanBeNull = false, OutputFormat = "C")]
    public decimal Price { get; set; }

    [CsvColumn(FieldIndex = 4)]
    public string Country { get; set; }

    [CsvColumn(FieldIndex = 5)]
    public string Description { get; set; }
}

As you can see, there are lots of types that you can apply to your class.

Then you have to declare the using clause in your source file, where you want to use it:

using LINQtoCSV;

Then, all you need is to start using the library by adding this code

private void btnLoad_Click(object sender, EventArgs e) {
  openFile.Filter = "CSV Files|*.csv";
  openFile.Title = "Open CSV File";

  if (openFile.ShowDialog() == DialogResult.OK) {
    textBox1.Text = openFile.FileName;

    CsvFileDescription inputFileDescription = new CsvFileDescription {
      // cool - I can specify my own separator!
      SeparatorChar = ';',
      FirstLineHasColumnNames = true
    };

    CsvContext cc = new CsvContext();

    bEvents =
      cc.Read(openFile.FileName, inputFileDescription);

    // elegantly parse the LINQ outputed by the parser
    var bALLEvents =
      from p in bEvents
      orderby p.EventID
      select new { p.EventID, p.EventName, p.SourceName, p.TargetName };

    // binding to DataGridView
    // Notice the conversion to a List of the bALLEvents collection
    dataGridView1.DataSource = bALLEvents.ToList();
  }
}

That’s it, folks – Enjoy and share!

Post from: Radu Poenaru's Weblog

Import CSV file and query it with LINQ