<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>KeyboardSurfer</title>
	<atom:link href="http://kbsurfer.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://kbsurfer.com</link>
	<description>Just another WordPress site</description>
	<lastBuildDate>Wed, 16 May 2012 05:43:57 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
		<item>
		<title>Me + nodejs = happy programmer!</title>
		<link>http://kbsurfer.com/2012/05/15/me-nodejs-happy-programmer/</link>
		<comments>http://kbsurfer.com/2012/05/15/me-nodejs-happy-programmer/#comments</comments>
		<pubDate>Wed, 16 May 2012 05:28:55 +0000</pubDate>
		<dc:creator>Christopher McKenzie</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Node]]></category>
		<category><![CDATA[express]]></category>
		<category><![CDATA[Jade]]></category>
		<category><![CDATA[Nodejs]]></category>
		<category><![CDATA[tedious]]></category>

		<guid isPermaLink="false">http://kbsurfer.com/?p=115</guid>
		<description><![CDATA[So I have just finished a project that requires a connection to a mssql db&#8230;I know, why not use .NET? Well no offense to you die hard .NET&#8217;ers out there, I just don&#8217;t really care for .NET, Sorry! I originally &#8230; <a href="http://kbsurfer.com/2012/05/15/me-nodejs-happy-programmer/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://kbsurfer.com/wp-content/uploads/2012/05/IMG_20120515_2211081.jpg"><img class="aligncenter size-full wp-image-119" title="cliche code pic" src="http://kbsurfer.com/wp-content/uploads/2012/05/IMG_20120515_2211081.jpg" alt="" width="779" height="300" /></a></p>
<p>So I have just finished a project that requires a connection to a mssql db&#8230;I know, why not use .NET? Well no offense to you die hard .NET&#8217;ers out there, I just don&#8217;t really care for .NET, Sorry! <img src='http://kbsurfer.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' />  I originally did this project in python and it worked great! err&#8230;well except windows authentication to mssql, still haven&#8217;t figured that one out :/, But I digress!</p>
<p>I have recently been playing around a lot with <a href="http://nodejs.org">nodejs</a>, so I said to myself why not port this project over to js? I began looking at libraries for mssql written for node and I came across <a href="http://pekim.github.com/tedious/">tedious</a>, I slightly giggled when I seen the name, I installed and quickly wrote up a little unit test and much to my surprise I was greeted by success! It was the simplest thing I had ever done! Next I asked is there a web-server framework like tornado for node? A quick google search brought me to <a href="http://expressjs.com">express</a>, and in hardly anytime at all I had what I previously wrote in python completely ported over to javascript.<br />
<span id="more-115"></span></p>
<p>I really must say thank you to all of the developers who worked on all these great projects! You are changing the way the web works. I find it hard to believe that now all a web developer needs to know to create a great web app is JavaScript, CSS, and HTML5.</p>
<p>I would also like to point out a couple other technologies that have been catching my eye more and more. <a href="http://jade-lang.com">Jade</a> is the successor to haml.js and a fantastic templating engine, and <a href="http://lesscss.org/">Less</a> which is an amazing tool for making css more dynamic! I also heard through the grapevine (*breaks out into song!) that <a href="http://oliverwilkerson.com/">Oliver Wilkerson</a> is going to be releasing a JadeLessCoffee compiler which I am very excited to try out! <img src='http://kbsurfer.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://kbsurfer.com/2012/05/15/me-nodejs-happy-programmer/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>HTML 5 web components</title>
		<link>http://kbsurfer.com/2012/03/14/html-5-web-components/</link>
		<comments>http://kbsurfer.com/2012/03/14/html-5-web-components/#comments</comments>
		<pubDate>Wed, 14 Mar 2012 12:46:02 +0000</pubDate>
		<dc:creator>Christopher McKenzie</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Web Components HTML5 cool]]></category>

		<guid isPermaLink="false">http://kbsurfer.com/?p=73</guid>
		<description><![CDATA[HTML5 is rapidly maturing into a extremely powerful platform, there are so many new API&#8217;s and tools that make the idea of having a web application a reality. One of the API&#8217;s that caught my eye is HTML5 Web Components. &#8230; <a href="http://kbsurfer.com/2012/03/14/html-5-web-components/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>HTML5 is rapidly maturing into a extremely powerful platform, there are so many new API&#8217;s and tools that make the idea of having a web application a reality. One of the API&#8217;s that caught my eye is <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" title="HTML5 Web Components" target="_blank">HTML5 Web Components</a>. Web component allow to extend the basic syntax of html by creating inert templates, for example creating a button that as a default function on creation would previously require you to write quite a bit of javascript that did a whole bunch of nonsense. Well now all that is necessary is to create a new html element that extends a basic button element, which would look like this.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;element extends<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;x-fancybutton&quot;</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span>&gt;</span> 
        this.onclick = function(){
            alert(&quot;hello world&quot;);
        }
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
    <span style="color: #009900;">&lt;template&gt;</span>
        <span style="color: #009900;">&lt;content&gt;&lt;<span style="color: #66cc66;">/</span>content&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>template&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>element&gt;</span></pre></td></tr></table></div>

<p><span id="more-73"></span>This creates a new element that will have all of the properties that are in the <template> tag where script is obviously the included javascript for the element to execute when created, and the <content> tag is where any content is insert when you are creating a new element of this type.
</p>
<p>
Creating a new element is fairly straight forward you just include the component file into your main html code using the link tag like so:</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;components&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;x-fancybutton.html&quot;</span><span style="color: #66cc66;">/</span>&gt;</span></pre></td></tr></table></div>

<p>then you would write in the tag for which your new element extends and add the &#8220;is&#8221; attribute like so.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>11
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"> <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">button</span> is<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;x-fancybutton&quot;</span>&gt;</span>Hello World<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">button</span>&gt;</span></pre></td></tr></table></div>

<p>This will create a new button that now by default listens for the click event and says hello! pretty cool eh! <img src='http://kbsurfer.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<pre class="sample">
 <button onclick="alert('hello');">Hello World</button>
</pre>
<p>Now obviously this is a super basic example but just imagine how much time you can save if you have a comment view and you have to create a bunch of elements just to display one comment. With this you can create the template once and just create the element with only the content and web components will do the rest! I hope to see this become a huge part of webdesign in the future!
</p>
<p>Now as the HTML5 Spec is still in current development this is still heavily experimental and requires a <a href="https://github.com/dglazkov/Web-Components-Polyfill" target="_blank">polyfill</a> (<a href="http://glazkov.com/" target="_blank">dglazkov</a>) and the <a href="http://tools.google.com/dlpage/chromesxs" target="_blank">canary build</a> of chrome with the shadow DOM flag enabled. But if you really enjoy modular code like I do it so worth checking out!</p>
<p> Stay tuned for the advanced section of this api I&#8217;m gonna build a twitter feed!<br />
<i>code from <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" title="HTML5 Web Components" target="_blank">HTML5 Web Components</a></i></p>
]]></content:encoded>
			<wfw:commentRss>http://kbsurfer.com/2012/03/14/html-5-web-components/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>What Direction?</title>
		<link>http://kbsurfer.com/2011/11/08/what-direction/</link>
		<comments>http://kbsurfer.com/2011/11/08/what-direction/#comments</comments>
		<pubDate>Tue, 08 Nov 2011 05:22:33 +0000</pubDate>
		<dc:creator>Christopher McKenzie</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://kbsurfer.com/?p=21</guid>
		<description><![CDATA[Well starting a blog is proving to be a difficult process. I have so many ideas for this site as a whole obviously it is my personal site so a portfolio will be a must. This site will be a &#8230; <a href="http://kbsurfer.com/2011/11/08/what-direction/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Well starting a blog is proving to be a difficult process. I have so many ideas for this site as a whole obviously it is my personal site so a portfolio will be a must.</p>
<div>This site will be a programming blog mostly and will have lots of tutorials and tips that I have learned and will learn in the near future. I am currently preparing to work on a new interface on my works SIS (Student Information System) it will be a fairly large project moving it from the current Microsoft Access front end to a web based ux. With this project I hope to learn new ways to further my knowledge of best practices for ux design.</div>
<div>I also do, however seldom it might be, freelance webdesign and starting a new contract with a company designing their website and will be furthering my knowledge of WordPress templating.</div>
]]></content:encoded>
			<wfw:commentRss>http://kbsurfer.com/2011/11/08/what-direction/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
