index.html


<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>Alastair Lockie</title>
  <meta name="author" content="Alastair Lockie">

  
  <meta name="description" content="Last Wednesday I was lucky enough to attend a fascinating evening at Google, London. Glenn Jones kindly invited me to join him at an event on Web &hellip;">
  

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link rel="canonical" href="http://larister.github.com/">
  <link href="/favicon.png" rel="icon">
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
  <script src="/javascripts/modernizr-2.0.js"></script>
  <script src="/javascripts/ender.js"></script>
  <script src="/javascripts/octopress.js" type="text/javascript"></script>
  <link href="/atom.xml" rel="alternate" title="Alastair Lockie" type="application/atom+xml">
  <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

  
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36564455-1']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>


</head>

<body   >
  <header role="banner"><hgroup>
  <h1><a href="/">Alastair Lockie</a></h1>
  
    <h2>Nuggets of JavaScript</h2>
  
</hgroup>

</header>
  <nav role="navigation"><ul class="subscription" data-subscription="rss">
  <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
  
</ul>
  
<form action="http://google.com/search" method="get">
  <fieldset role="search">
    <input type="hidden" name="q" value="site:larister.github.com" />
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>
  
<ul class="main-navigation">
  <li><a href="/">Blog</a></li>
  <li><a href="/blog/archives">Archives</a></li>
</ul>

</nav>
  <div id="main">
    <div id="content">
      <div class="blog-index">
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/07/22/web-components-will-be-a-pretty-big-deal/">Web Components Will Be a Pretty Big Deal</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-07-22T21:48:00+01:00" pubdate data-updated="true">Jul 22<span>nd</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><p>Last Wednesday I was lucky enough to attend a fascinating evening at Google, London. <a href="https://twitter.com/glennjones">Glenn Jones</a> kindly invited me to join him at an event on <a href="http://www.w3.org/TR/2013/WD-components-intro-20130606/">Web Components</a> and <a href="http://www.polymer-project.org/">Polymer</a>.</p>

<p>The Polymer team have been quietly working on their baby for the last three years, but it is only starting to emerge into the limelight now.</p>

<h1>Web Components</h1>

<p>The core philosophy behind Web Components is to make markup meaningful again. They want to give you the ability to build your own HTML elements. For the most obvious example of this, fire up Google Chrome and add an <code>&lt;input type="date"&gt;</code> tag:</p>

<p><input type="date"></p>

<p>See how it&#8217;s rendered? It&#8217;s a fully functional widget, with the ability to increment/decrement values and even open up a calendar view.</p>

<p>Right click and inspect element. What do you see? Still the same old input tag. Now click on the little cog at the bottom right of the dev tools and click on &#8216;Show Shadow DOM&#8217;. Reboot the dev tools and behold! Now you have a grey <code>#document-fragment</code> within the input tag which shows you all the inner workings of the element.</p>

<p>This is a perfect example of a custom element. It has its own encapsulated styling and JavaScript behaviour, and is entirely reusable. Web Components releases this awesome power from the clutches of the browser vendors and opens it up to all.</p>

<h1>Polymer</h1>

<p>So what is Polymer? It is Google&#8217;s implementation of Web Components, and it sits on a collection of polyfills which make the technology possible on today&#8217;s browsers. This collection of polyfills is called &#8216;platform.js&#8217;, and includes:</p>

<ul>
<li>Custom Elements</li>
<li>Shadow DOM</li>
<li>HTML Imports</li>
<li>Model Driven Views</li>
</ul>


<p>It also includes a couple of polyfills for Web Animations and Pointer Events. These aren&#8217;t directly related to Web Components, but are still great shims in their own right and show that the Polymer team are working hard to bring the future of the web ever closer. Each polyfill can also be included/excluded as needed. As with all polyfills, they will become less and less necessary over time as standards are implemented.</p>

<p>Let&#8217;s take a quick gander at each of these polyfills for Web Components.</p>

<h2>Custom Elements</h2>

<p>This is what allows you to register your own HTML element. Ever wanted to have your own <code>&lt;this-guy&gt;</code> tag with two <code>&lt;thumb&gt;</code> tags? Now you can. What&#8217;s more, your <code>&lt;this-guy&gt;</code> tag can have it&#8217;s own fully encapsulated JavaScript.</p>

<p>As this JavaScript is not exposed to the outside world, there are some interesting side effects. Notably, inline handlers such as click may come back into fashion. Before you gasp, think about the original reasoning behind separating out behaviour from the DOM. It was (at least partly) to avoid the use of global functions. But when your code is isolated in its own little sandbox, this concern melts away. What&#8217;s more, you can do away with the messy business of adding and removing event listeners.</p>

<p>The same goes for CSS as well, no more big long selectors to drill down through the tree to the exact element you want. You are able to allow the outside world to style some or all of your custom element, but the choice and control is yours. For me, this encapsulation of JS and CSS is the most revolutionary part of Web Components, and I am deeply excited about it.</p>

<h2>Shadow DOM</h2>

<p>The Shadow DOM encapsulates the innards of your custom element and just exposes a nice clean tag for you to plonk on your page. This tag can even have child nodes; the contents of which can be accessed and mashed into your custom element. Check out Google&#8217;s example:</p>

<p>What the user writes:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;my-custom-element&gt;
</span><span class='line'>  &lt;q&gt;Hello World&lt;/q&gt;
</span><span class='line'>&lt;/my-custom-element&gt;</span></code></pre></td></tr></table></div></figure>


<p>Your Shadow DOM:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;shadow-root&gt;
</span><span class='line'>  &lt;span&gt;People say: &lt;content&gt;&lt;/content&gt;&lt;/span&gt;
</span><span class='line'>&lt;/shadow-root&gt;</span></code></pre></td></tr></table></div></figure>


<p>The resulting HTML:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;my-custom-element&gt;
</span><span class='line'>  &lt;span&gt;People say: &lt;q&gt;Hello World&lt;/q&gt;&lt;/span&gt;
</span><span class='line'>&lt;/my-custom-element&gt;</span></code></pre></td></tr></table></div></figure>


<p>Dumping out the content of the my-custom-element tag is the most simple example, but it is a very flexible framework. You can use CSS selectors to grab out exactly the parts you want and insert them where appropriate.</p>

<p>Of course, these reusable and encapsulated elements can be compounded to make ever more complex elements, until you have an entire webapp just represented as <code>&lt;my-webapp&gt;</code>. Although this might seem anathema to some, remember that entire webapps are currently being built with no elements on the page whatsoever, in arbritrary ways. The Shadow DOM and custom elements at least provide standardisation, plus the ability to drill down into the building blocks using Dev Tools.</p>

<h2>HTML Imports</h2>

<p>So you&#8217;ve got your nice new shiny element. It is defined in its own file, with a script tag and styles inside. Now how to get the thing into your page? Unsurprisingly, it&#8217;s using the new HTML Import functionality. As you&#8217;d expect, this is as simple as adding a script or a stylesheet to a page; indeed it uses the <code>&lt;link&gt;</code> tag:</p>

<p><code>&lt;link rel="import" href="import-file.html"&gt;</code></p>

<p>Job done!</p>

<h2>Model Driven Views</h2>

<p>MDV (Model Driven Views) is the only part of the spec currently assigned an Implementation Status of &#8216;In progress&#8217;. However, it is certainly far enough along to get a good idea of what it will offer. Essentially, MDV standardises the ubiquitous task of generating HTML using templates and data from a model.</p>

<p>If you&#8217;ve ever used mustache or a similar technology, you&#8217;ll be right at home with HTML templates. They look just the same, however they can live directly on the DOM. Crucially, though, they are parsed and not rendered. This means that you cannot access the innards of an HTML template via JavaScript, nor will any CSS or JavaScript be evaluated until it is stamped out onto the page.</p>

<p>MDVs are not simply templates, however. The HTML generated from the templates includes a property called &#8220;templateInstance&#8221; which stores a reference to the data used to create the template.</p>

<p>This means that whenever the data changes, so does the generated HTML. It even works vice versa, if a user enters a value into an input in your template which is bound to an attribute in your model, that model will get updated instantly.</p>

<p>MDV obviously doesn&#8217;t offer anything that a myriad of frameworks and libraries already offer, but it sure will be nice to have it standardised.</p>

<hr />

<h1>Summing Up</h1>

<p>Polymer is a mind-boggling concept when you get your head round it. It is not a replacement for Backbone, Angular or other frameworks, but it will drastically change the way they work and the way we think about web applications for the better. The ability to build a webapp piece by piece with custom elements building on top of each other, each standalone and encapsulated is deeply exciting and feels like the right direction to be heading in.</p>

<p>There are some niggles still. Polyfills often support legacy browsers, however if you need to support IE 8 then you&#8217;re out of luck. Even IE 9 isn&#8217;t officially supported.</p>

<p>There is also a healthy ongoing discussion over how this technology should be structured. Should data be a separate tag? Should JavaScript and styling be external to the HTML file where your custom element is defined, or should it all go in one file (&#8216;Taco-style&#8217; as the team evocatively call it)? What will the distribution and repository system look like?</p>

<p>I&#8217;m also slightly wary of the &#8216;everything is an element&#8217; approach. I&#8217;m completely onboard with actual custom components, but during the demonstration the Polymer team showed how Web Animations (which I haven&#8217;t covered here) will look. Each transition was a new HTML element, and personally I found it harder to grok than animations defined using JavaScript; it felt worryingly like a return to XML definitions. The team reassured me that imperative declarations would be supported, but they also made it clear that the HTML element approach was preferred.</p>

<p>However, this is a new and constantly changing technology. It seems to have changed fairly significantly even since the GoogleIO presentations, styling syntax in particular. What I&#8217;ve discussed here is also only a small fraction of the project, head over to <a href="http://www.polymer-project.org">http://www.polymer-project.org</a>, and make sure to watch the two videos below which give a more comprehensive introduction to Polymer and Web Components. Lastly, <a href="https://github.com/polymer/polymer">download the code</a>, <a href="http://www.polymer-project.org/discuss.html">join the mailing list</a> and make your voice heard!</p>

<hr />

<iframe width="560" height="315" src="//www.youtube.com/embed/fqULJBBEVQE" frameborder="0" allowfullscreen></iframe>


<hr />

<iframe width="560" height="315" src="//www.youtube.com/embed/0g0oOOT86NY" frameborder="0" allowfullscreen></iframe>


</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2013/02/24/starting-a-coding-meetup/">Starting a Coding Meetup</a></h1>
    
    
      <p class="meta">
        

<time datetime="2013-02-24T07:37:00+00:00" pubdate data-updated="true">Feb 24<span>th</span>, 2013</time>
        
      </p>
    
  </header>


  <div class="entry-content"><p>One of the best ways to increase your enjoyment as a coder is to attend a local meetup. You will make new friends and contacts with the same passions as you. You will swap stories of coding horrors and triumphs over a drink. You&#8217;ll learn the latest technologies and see them in action. Plus, it&#8217;s a great environment to test out your own ideas and public speaking skills in a safe, supportive environment.</p>

<p>I have been attending <a href="http://asyncjs.com/">Async</a> in Brighton since I moved down here, and indeed it was one of the reasons I was keen on moving to the city. We&#8217;ve had some cracking speeches in the last year or so, from such luminaries as <a href="http://asyncjs.com/largescale/">Addy Osmani</a> and <a href="http://asyncjs.com/appcache/">Jake Archibald</a> to name just a couple. I&#8217;ve certainly learned a huge amount, and would recommend anybody in the vicinity with even a passing interest in JavaScript to pop down.</p>

<p>But what if you don&#8217;t have a local meetup? If this is the case, I&#8217;d strongly urge you to consider organising your own meetup. Async was started by the inimitable <a href="http://premasagar.com/">Premasagar Rose</a>, and when his fellow organisor <a href="http://aroncarroll.com/">Aron Carroll</a> flew the coop to Berlin, I offered to help out. It&#8217;s been a great experience, and given me a behind-the-scenes look at how it works, and how to go about setting up such a meetup.</p>

<p>As with most things in life, the hardest part of organising a meetup is the start - &#8216;blank canvas&#8217; syndrome. As such, here are my top tips for how to go about getting the ball rolling:</p>

<h2>Find your audience</h2>

<p>There&#8217;s only one crucial ingredient for a meetup and that is attendees. Chances are, you already have a few friends/acquaintances that you chat to about nerd-matters. Ask them if they&#8217;d like to have a local meetup, and if so recruit them to spread the word. Whilst you&#8217;re at it, ask if any of them would be willing to do the first speech.</p>

<p>If you are new to the area, try to find out who The Local Influencer is. Most places have a guy/gal who &#8216;just seems to know everybody&#8217; in the community. Find them and talk to them; chances are they have already thought about starting a meetup and will either want to help, or will at least be able to put the word out for you.</p>

<p>Lastly, it&#8217;s worth tapping any sizeable companies in the area. Send an email explaining what you&#8217;re planning, and ask if any of their developers would be interested.</p>

<h2>Track down a venue</h2>

<p>Async is hosted at <a href="http://www.theskiff.org/">The Skiff</a>, a coworking space in Brighton. If you have a coworking space nearby, this is an obvious port of call. If not, ask either your company, or one you have contact with, if you can host it in their meeting room after hours.</p>

<p>Function rooms at pubs could be an option, especially if the owner is happy to lease it for free on the promise that attendees buy a drink or two.</p>

<p>Churches, town halls and hotels could be a last resort but try to avoid having to pay for the venue as keeping the meetup free to attend is important.</p>

<h2>Procure equipment</h2>

<p>You might assume that you need quite a lot to get a meetup up and running, but really the only key piece of technology is a projector. Your speakers can bring their own laptop, you can just use the wall instead of a screen. A camcorder to record the talks is a nice to have, but not essential.</p>

<p>If you don&#8217;t have a projector yourself, and can&#8217;t borrow one off your company or the venue, it may sound obvious but just ask around. There are bound to be some other clubs in the area that have presentations - get in contact and see if they&#8217;d be willing to lend you their projector for a night. Put the word out on Twitter, people can sometimes have an old projector they bought for an ill-fated home cinema dream.</p>

<p>You can always buy a projector later on once you&#8217;ve had a few meetings and established a routine, but it&#8217;s good to borrow one to begin with if you can.</p>

<h2>The first speech</h2>

<p>Once you&#8217;ve got an audience, a venue and a projector, you&#8217;re all set. You just need a speaker for the first night. If nobody else is willing to step up to the plate, show them how it&#8217;s done! It can be a little nerve-wracking to get up in front of a bunch of professionals, but it&#8217;s easier than you think.</p>

<p>Talk about what you are passionate about, whether it&#8217;s a new technology, a tool that you love, or a process you&#8217;ve found really helpful.</p>

<p>Don&#8217;t fall into the trap of thinking that you aren&#8217;t an authority on a subject and thus have no right to speak about it - people are hungry to learn, and you know more than you think. You owe it to your audience to share your knowledge and experience, and they&#8217;ll be very grateful you did!</p>

<p>The secret to a great speech is the old adage &#8216;proper preparation prevents piss poor performance&#8217;. Write your speech with plenty of time, and then practice it repeatedly. Run through it with your partner or a family member, and again with a fellow geek.</p>

<p>Most importantly, try to relax. Nerves are all in your head, everyone there wants you to succeed and is encouraging. Take a deep breath, and before you know it you&#8217;ll be well into your speech and having a whale of a time.</p>

<h2>To infinity&#8230;</h2>

<p>Once you&#8217;ve had a few meetings, consider setting up a page on <a href="http://lanyrd.com/">Lanyrd</a>, <a href="http://www.meetup.com/">Meetup.com</a> or <a href="http://www.eventbrite.co.uk/">Eventbrite</a>. It can be a good idea to set up a simple website as well.</p>

<p>Depending on the size of your village/town/whatever, you may find that you start to run out of speakers. If and when this happens, cast your net further afield. Ask similar meetups within spitting distance if they would like to share speakers. Don&#8217;t be afraid to reach out to leading figures in your field, the worst they can do is say no.</p>

<p>Above all, just keep the ball rolling. If you can&#8217;t find a speaker for a particular evening, why not do a &#8216;Show and Tell&#8217; evening where people just speak for 5 minutes on what they&#8217;re currently interested in? Or a hacknight? It&#8217;s important early on to keep the show going so people come to expect the meetup to be happening at a certain time on a certain night, and can factor it into their schedules.</p>

<hr />

<p>That&#8217;s it, go forth and organise! Feel free to <a href="http://www.twitter.com/larister">get in touch</a> with me for any questions, guidance, or suggestions.</p>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2012/10/27/sublime-text-2-configuration-plus-keyboard-shortcuts/">Sublime Text 2: Configuration + Keyboard Shortcuts</a></h1>
    
    
      <p class="meta">
        

<time datetime="2012-10-27T18:38:00+01:00" pubdate data-updated="true">Oct 27<span>th</span>, 2012</time>
        
      </p>
    
  </header>


  <div class="entry-content"><p>I recently did a talk at my local JavaScript meetup (<a href="http://asyncjs.com/">Async in Brighton</a>) about <a href="http://www.sublimetext.com/2">Sublime Text 2</a> and Chrome Dev Tools. Afterwards, I had a few requests to post about which plugins I use, and my preferences. I also plan on posting the video of the talk, but in the meantime here are my top tips:</p>

<h2>My Sublime Text 2 Plugins:</h2>

<p>Remember, the first step is to install <a href="http://wbond.net/sublime_packages/package_control/installation">Will Bond&#8217;s package control</a>. Once you&#8217;ve done that, just open up the command palette (Cmd + Shift + P or Ctrl + Shift + P) and type &#8216;install&#8217;, followed by enter. This will bring up a filterable list of all available packages.</p>

<h3><a href="https://github.com/SublimeLinter/SublimeLinter">Sublime Linter</a></h3>

<p>An essential plugin, Sublime Linter saves you from future runtime headaches by pointing out missing semicolons, mis-spelled variable names etc. Works for JavaScript, CSS, and plenty more besides.</p>

<h3><a href="https://github.com/kemayo/sublime-text-2-git">Git</a></h3>

<p>Very full featured Git plugin for ST2, great integration of standard commands such as diff, status, log etc., but as an added bonus it takes your selection into account when using features such as &#8216;Blame&#8217; and &#8216;Add Hunk&#8217;.</p>

<h3><a href="https://github.com/bgreenlee/sublime-github">Github Gists</a></h3>

<p>Nice little plugin for creating a Github Gist from your selection, public or private. You can also select and copy a gist to the clipboard ready for use.</p>

<h3><a href="https://github.com/sublimator/ZenCoding">Zen Coding</a></h3>

<p>Adds in support for Zen Coding, a way of creating huge chunks of HTML quickly and easily using CSS selector &#8216;haikus&#8217;. The Github readme is a bit sparse, but remember you can just type &#8216;zen&#8217; into the Sublime Text 2 command palette once the plugin is installed, and it&#8217;ll show you all the available commands. For more information on Zen Coding, check out <a href="http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/">this overview at Smashing Magazine</a>.</p>

<h3><a href="https://github.com/joelpt/sublimetext-automatic-backups">Automatic Backups</a></h3>

<p>One of the earliest plugins, it simply stores a copy of your file each time you save to a backup folder on your disk. You can step back through history through previous revisions of the file simply and easily, or merge two versions together. These days most of us use Git or some other form of version control, but Automatic Backups is still a nice safety net to have around.</p>

<h3><a href="https://github.com/titoBouzout/SideBarEnhancements">Sidebar Enhancements</a></h3>

<p>Adds a few extras to the default Sublime Text 2 sidebar, which is pretty basic straight out the box; notably more control over file management (duplicate etc.), as well as more advanced features such as advanced copy options and opening a file in the browser.</p>

<h3><a href="https://github.com/SublimeText/Tag">Tag</a></h3>

<p>Small plugin that just gives a helping hand when writing HTML/XML, with features such as linting, formatting and auto-closing on forward slash.</p>

<h3><a href="https://github.com/fjl/Sublime-Missing-Palette-Commands">Missing Palette Commands</a></h3>

<p>Even smaller plugin which simply adds in some commands to the command palette. If you find something missing from there, just add it into the Missing.sublime-commands JSON file yourself!</p>

<h2>My Sublime Text 2 Preferences</h2>

<p>I generally find the Sublime Text 2 default preferences to be pretty sensible, but there are some nice features turned off by default so it&#8217;s definitely worth taking a gander at the settings file (just type &#8216;prefd&#8217; into the command palette) to see what&#8217;s on offer. Below is my preferences file for reference; &#8216;Vintage&#8217; mode is off at the moment but I plan on using it more once my Vim-fu improves.</p>

<figure class='code'><figcaption><span>My Sublime Text 2 Preferences</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">{</span>
</span><span class='line'>    <span class="c1">// Show folders in the side bar in bold</span>
</span><span class='line'>    <span class="s2">&quot;bold_folder_labels&quot;</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// Word list to use for spell checking</span>
</span><span class='line'>    <span class="s2">&quot;dictionary&quot;</span><span class="o">:</span> <span class="s2">&quot;Packages/Language - English/en_GB.dic&quot;</span><span class="p">,</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// Set to true to draw a border around the visible rectangle on the minimap.</span>
</span><span class='line'>    <span class="c1">// The color of the border will be determined by the &quot;minimapBorder&quot; key in</span>
</span><span class='line'>    <span class="c1">// the color scheme</span>
</span><span class='line'>    <span class="s2">&quot;draw_minimap_border&quot;</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>
</span><span class='line'>    <span class="s2">&quot;font_size&quot;</span><span class="o">:</span> <span class="mf">14.0</span><span class="p">,</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// List any packages to ignore here. When removing entries from this list,</span>
</span><span class='line'>    <span class="c1">// a restart may be required if the package contains plugins.</span>
</span><span class='line'>    <span class="s2">&quot;ignored_packages&quot;</span><span class="o">:</span> <span class="p">[</span><span class="s2">&quot;Vintage&quot;</span><span class="p">],</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// Set to true to insert spaces when tab is pressed</span>
</span><span class='line'>    <span class="s2">&quot;translate_tabs_to_spaces&quot;</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// Set to true to removing trailing white space on save</span>
</span><span class='line'>    <span class="s2">&quot;trim_trailing_white_space_on_save&quot;</span><span class="o">:</span> <span class="kc">true</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Favourite Keyboard Shortcuts</h2>

<p>During my presentation, I wanted to show off as many features as possible in the time available, so I used keyboard shortcuts where I could. I had a few questions about what the shortcut was for certain features, so I thought I&#8217;d include them in full here.</p>

<h3>Layout</h3>

<h5>Switch between multicolumn layouts:</h5>

<p>Mac: <em>Cmd + Alt + [1-4]</em><br/>
Win/Linux: <em>Alt + Shift + [1-4]</em></p>

<h5>Show grid layout:</h5>

<p>Mac: <em>Cmd + Alt + 5</em><br/>
Win/Linux: <em>Alt + Shift + 5</em></p>

<h5>Switch between multirow layouts:</h5>

<p>Mac: <em>Cmd + Alt + Shift + [1-3]</em><br/>
Win/Linux: <em>Alt + Shift + [8-9]</em></p>

<h5>Move focus to panel:</h5>

<p><em>Ctrl + [1-4]</em></p>

<h5>Move file to panel:</h5>

<p><em>Ctrl + Shift + [1-4]</em></p>

<h5>Distraction Free Editing:</h5>

<p>Mac: <em>Cmd + Ctrl + Shift + F</em><br/>
Win/Linux: <em>Shift + F11</em></p>

<h3>Autocompletes</h3>

<h5>Show &#8216;Go To&#8217; autocomplete:</h5>

<p>Mac: <em>Cmd + P</em><br/>
Win/Linux: <em>Ctrl + P</em></p>

<p>From within &#8216;Go To&#8217; autocomplete:<br/>
&#8217;@&#8217; = function<br/>
&#8217;:&#8217; = line number</p>

<h5>Show Command Palette:</h5>

<p>Mac: <em>Cmd + Shift + P</em><br/>
Win/Linux: <em>Ctrl + Shift + P</em></p>

<h3>Editing</h3>

<h5>Code folding:</h5>

<p>Mac: <em>Cmd + Alt + []</em><br/>
Win/Linux: <em>Ctrl + Shift + []</em></p>

<h5>Move line up/down:</h5>

<p>Mac: <em>Cmd + Ctrl + up/down</em><br/>
Win/Linux: <em>Ctrl + Shift + up/down</em></p>

<h5>Indent:</h5>

<p>Mac: <em>Cmd + []</em> <br/>
Win/Linux: <em>Ctrl + []</em></p>

<h5>Sort Lines:</h5>

<p>Mac: <em>Ctrl + F5</em><br/>
Win/Linux: <em>F9</em></p>

<h5>Join Lines:</h5>

<p>Mac: <em>Cmd + J</em><br/>
Win/Linux: <em>unbound by default</em></p>

<h3>Selecting</h3>

<h5>Select Word:</h5>

<p>Mac: <em>Cmd + D</em><br/>
Win/Linux: <em>Ctrl + D</em></p>

<h5>Select Line:</h5>

<p>Mac: <em>Cmd + L</em><br/>
Win/Linux: <em>Ctrl + L</em></p>

<h5>Select Scope:</h5>

<p>Mac: <em>Cmd + Shift + Space</em><br/>
Win/Linux: <em>Ctrl + Shift + Space</em></p>

<h5>Select Brackets:</h5>

<p><em>Ctrl + Shift + M</em></p>

<h3>Multi-selecting</h3>

<h5>Select next occurrence:</h5>

<p>Mac: <em>Cmd + D</em><br/>
Win/Linux: <em>Ctrl + D</em></p>

<h5>Skip occurrence:</h5>

<p>Mac: <em>Cmd + K</em><br/>
Win/Linux: <em>Ctrl + K</em></p>

<h5>Undo selection:</h5>

<p>Mac: <em>Cmd + U</em><br/>
Win/Linux: <em>Ctrl + U</em></p>

<h5>Select all occurrences:</h5>

<p>Mac: <em>Ctrl + Cmd + G</em><br/>
Win/Linux: <em>Alt + F3</em></p>

<h5>Select block:</h5>

<p>Mac: <em>Alt + mouse drag</em><br/>
Win/Linux: <em>Shift + right mouse drag</em></p>

<h5>Add previous/next line:</h5>

<p>Mac: <em>Ctrl + Shift + up/down</em><br/>
Win/Linux: <em>Ctrl + Alt + up/down</em></p>

<h5>Add cursor:</h5>

<p>Mac: <em>Cmd + mouse click</em><br/>
Win/Linux: <em>Ctrl + mouse click</em></p>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2012/09/23/notes-from-a-hackathon/">Notes From a Hackathon</a></h1>
    
    
      <p class="meta">
        

<time datetime="2012-09-23T17:42:00+01:00" pubdate data-updated="true">Sep 23<span>rd</span>, 2012</time>
        
      </p>
    
  </header>


  <div class="entry-content"><p>A few weeks ago I had the opportunity to attend a rather special event: the <a href="http://www.thedigitalsizzle.com/" title="Digital Sizzle Hackathon">Digital Sizzle Hackathon</a> in London. It was a rare, exhausting and stimulating weekend, and an experience that I&#8217;d thoroughly recommend to just about anyone.</p>

<p>The weekend kicked off with an introduction to the event on the Friday evening. The event was hosted at Mozilla HQ in Leicester Square, a sumptuous workspace ideally situated. After a quick kick-off by the event organisers and an explanation from the API providers, the call for ideas began. Any fears of a collective creative block were soon put to rest as the line of speakers grew ever larger.</p>

<div class="floatright">
    <a href="http://www.flickr.com/photos/paul_clarke/7986249580/" class="notextdecoration">
        <img src="http://farm9.staticflickr.com/8310/7986249580_78dd35f904.jpg" title="Kick off event"/>
    </a>
</div>


<p>The ideas flowed thick and fast, with speakers appealing to their audience&#8217;s curiosity, their appetite for a challenge, and their love of lasers. The evening wrapped up with pizza and beers, over which the teams slowly coalesced around the popular ideas. The Digital Sizzle team were admirable at making sure nobody was left without a team.</p>

<p>After a night&#8217;s sleep - or lack of it on my part thanks to a particularly ill-timed bout of insomnia - we reconvened at 9am to start work. Breakfast was laid on, and Mozilla&#8217;s absurdly sophisticated coffee machine revved into action (the only rule: if you were taught how to use it you then had to pass that knowledge on to at least one other person).</p>

<p>Plans were formalised, brains were set a&#8217;stormin&#8217;, then slowly the exicted chatter subsided into the pitter patter of determined typing. At this point, dear reader, please be patient as I indulge in a momentary digression.</p>

<div class="floatleft">
    <a href="http://www.flickr.com/photos/paul_clarke/7989197960/" class="notextdecoration">
        <img src="http://farm9.staticflickr.com/8452/7989197960_5da00a8e88_n_d.jpg" title="Locked in coder"/>
    </a>
</div>


<p>As outlined in my previous post, I have only relatively recently crossed the line from &#8216;programmer as a day job&#8217; to &#8216;programmer as a vocation&#8217;. This distinction came mainly from the realisation that I was simply using the wrong language. After using Java for most of my career, switching to liberal JavaScript was akin to a plunge into crystal cool waters following a long sauna. This is not to say, of course, that JavaScript is a superior language to Java. I merely mean that I fall more on the side of Liberalism in <a href="https://plus.google.com/u/0/110981030061712822816/posts/KaSKeg4vQtz" title="Steve Yegge's Magic Mystery Bus">Steve Yegge&#8217;s scale of software ideology</a>, thus Java was simply a wrong fit for me.</p>

<p>Despite my new found enthusiasm for programming however, I was initially hesitant when I heard about the hackathon. After all, I&#8217;ve only been coding full time in JavaScript for six months; surely the hackathon would be full of Linus-alikes and Wozniak-ians. I&#8217;d be left looking like a Sunday League footballer who&#8217;s stumbled into the Premier league.</p>

<p>I mention this as I know that I am not alone in this; I have since spoken to a few people who have expressed similar feelings. In this post, my aim is to reassure you that such concerns are baseless. As I started coding away that first morning, it dawned on me that this was not the competitive environment I feared. Rather, the whole room crackled with the energy of creative minds doing what they love the most in its purest form; unhindered by estimates, unit tests, maintainability concerns, and all the other necessary but occasionally tiresome aspects of a professional developer&#8217;s worklife.</p>

<div class="floatright">
    <a href="http://www.flickr.com/photos/paul_clarke/7989357028/" class="notextdecoration">
        <img src="http://farm9.staticflickr.com/8450/7989357028_481fc0e899_n.jpg" title="Burgers"/>
    </a>
</div>


<p>For that weekend, we could immerse ourselves entirely on a project of our own volition, with not a care in the world. We had all the food, beer, and drink we could possibly want, and if you got stuck on an issue there was likely to be an expert within spitting distance who would be happy to help. Evening soon arrived, and with it burgers from the BBQ that put the Sizzle into Digital Sizzle. Hand on heart, one of the best burgers I&#8217;ve ever had. Despite my insomnia the previous night, it wasn&#8217;t till gone three in the morning that I found a quiet spot to lay my head. I drifted off to the sounds of some nightowls putting the world to rights in a deep philosophical debate.</p>

<p>I awoke 4 hours later and groggily returned to my station, coffee in hand, and was instantly immersed again. After a few hours of flow, burritos were served for lunch and it dawned on us that we only had a few hours left to pull together all the disparate threads of our project. We furiously hacked away right up until the presentation, trying to put the finishing touches together but alas we didn&#8217;t manage to match up the audio with the visuals in time.</p>

<p>After a marathon coding session, the reward of the project presentation was fantastic. Here were a few highlights that stuck out for me, although with 24 projects in total there are too many gems to list here:
* Twitter killed my bunny - a game where a tweet-powered bunny tried to escape the &#8216;Negativity crusher&#8217;, which came slamming down when the sentiment from social networks turned sour.
* Real weather - an arduino powered spectacle involving water pumped up and over corrugated plastic to simulate rain, a fan for the wind, and a lightbulb for the sun.
* Karakilio - a breathtakingly ambitious spotify-powered karaoke app played over mobile phones. Unfortunately it succumbed to the curse of the demo, but it was a great idea.
* Data necklace - the most beautiful example of geek love I&#8217;ve ever seen. A talented Romeo used a nearby laser cutting shop to create plastic necklaces containing, amongst other things, batons whose size were determined by the number of tweets about a recent celebrity death. It was a macabre but touching gift for his (no doubt slightly bemused) wife.</p>

<div class="floatleft">
    <a href="http://www.flickr.com/photos/paul_clarke/7992308349/" class="notextdecoration">
        <img src="http://farm9.staticflickr.com/8446/7992308349_272315417d.jpg" title="Presentations"/>
    </a>
</div>


<p>After seeing water pumps being tested in the shower at two in the morning, or hearing the occasional yells which constitued the testing for &#8220;Scream Ball&#8221;, it was really great to see these projects finished and in the flesh. The devils of presentation visited a few poor presenters, but on the whole it was inspiring and humbling to see what people had been able to create in a weekend. I also learned that it&#8217;s very important to put a bit of time and energy into the presentation of your project. Our team lead did a fantastic job given the circumstances, but whilst we&#8217;d spent the last precious moments feverishly hacking away, other teams had put together a great slideshow explaining their concept and what they were trying to achieve. It makes a big difference.</p>

<p> On the whole, I found the hackathon to be a hugely rewarding and enjoyable experience. Regardless of your experience or perceived competence, I guarantee you will have a lot of fun, and it&#8217;ll reconnect you with the love of programming which thrust you into your career in the first place.</p>

<p> All photo credits: <a href="http://paulclarke.com">Paul Clarke</a></p>
</div>
  
  
    </article>
  
  
    <article>
      
  <header>
    
      <h1 class="entry-title"><a href="/blog/2012/04/15/from-java-to-javascript/">From Java to JavaScript</a></h1>
    
    
      <p class="meta">
        

<time datetime="2012-04-15T08:40:00+01:00" pubdate data-updated="true">Apr 15<span>th</span>, 2012</time>
        
      </p>
    
  </header>


  <div class="entry-content"><p>
Firstly, hello and welcome to my blog. It’s been on my todo list to start this longer than ‘sort out the photos under the bed’, and that’s saying something. I’ve finally got round to starting it now for two reasons. Firstly, I recently read <a href="http://technicalblogging.com/why-every-professional-should-consider-blogging/">this excellent post</a> outlining the benefits of blogging, such as improved clarity of thought and more effective communication. Secondly, I have started on a new stage of my career, and I want to share my thoughts and experiences.
</p>


<h2>My background</h2>


<p>
I’ve been a professional Java developer for five years now, and I’ve decided to take a bit of a gamble. I’m turning my back on the language and have accepted a job as a full-time JavaScript developer. To those that still view JavaScript as a toy language which isn’t for serious programmers, this may seem like a bit of a foolish life decision.
</p>


<p>
I must confess, if you’d asked me a couple of years ago I may well have thought the same. Even up until a few months ago I hadn’t seriously entertained the idea of giving up Java. Ignoring brief educational forays into Visual Basic, ActionScript and even ADA, Java is the first language I truly knew. From BlueJ at University through to Technical Lead on a suite of web apps in my previous company, I’d always thought of myself as a Java developer. I feel <a href="http://en.wikipedia.org/wiki/Flow_(psychology)">a real sense of flow</a> when I’m flying through an inheritance hierarchy refactor, the NetBeans keyboard shortcuts burned into my finger muscle memory.
</p>


<p>
There is still a part of me that considers Java to be a ‘proper’ programming language compared to JavaScript. The challenges of multi-threading, the security of strong typing, and the maturity of frameworks such as Spring and Hibernate are not easy to turn one’s back on. Java is a very established and well-respected language, and I believe that despite the growth of languages such as Ruby and Python, it still has many years ahead of it.
</p>


<h2>The Ascendance of JavaScript</h2>


<p>
In contrast, although JavaScript first appeared in Netscape 2 way back in 1995, it wasn’t until the appearance of rich web applications like GMail and the proliferation of AJAX a decade later that people started to sit up and take notice. 
</p>


<p>
For me, there were three main reasons why JavaScript is well worth considering as a primary language. Firstly, and most importantly, there is a <a href="http://vimeo.com/36579366">more direct connection with the thing I’m creating</a>. Coding with Java can be deeply rewarding, but you don’t really get to see very much. Aside from the green bars of passing tests, or the steady stream of logs in the console, positive feedback needs to come from the internal knowledge of a job well done. Coding in JavaScript, on the other hand, usually involves active changes to the DOM - changes that you can see and interact with, changes that feel more tangible somehow. I know that this is a personal preference, but for me this feedback is important. 
</p>


<p>
The second aspect to JavaScript development that tempted me across is the rapid evolution of the language. Despite the appearance of new frameworks like Play, and new features to the language itself with version updates, Java felt quite slow moving to me. JavaScript, by contrast, is the top language on github (at the time of writing), and it shows. There seems to be a new testing framework or MV* framework cropping up each month, and that’s not to mention the lightning pace of Node.js’ evolution. The buzz of a language on the move is both exciting and addictive - go to any JavaScript conference and you’ll see what I mean.
</p>


<p>
Finally, there is the sheer ubiquity of the language. There is a JavaScript interpreter on almost every web-enabled device. What started out as a quick &amp; dirty language knocked together by Brendan Eich in just 10 days has become the world’s most widely supported programming language. <a href="https://www.destroyallsoftware.com/talks/wat">JavaScript might have it’s problems</a> but I don’t see it going anywhere anytime soon.
</p>


<h2>jQuery - the gateway drug</h2>


<p>
Like many, my introduction into the pleasures of JavaScript came through the warm and friendly world of <a href="http://www.jquery.com">jQuery</a>. There were other libraries before jQuery to aid with DOM manipulation (traditionally the most painful and inconsistent aspect of JavaScript development), but jQuery absolutely nailed it.
</p>


<p>
jQuery revolutionised front-end development for a great many people, but I think everybody who uses it heavily hits a point where they come to realise that learning the library alone and not the language just won’t cut it. This point came for me whilst I was devouring the excellent ‘jQuery in Action’, and read the Appendix which outlined some core JavaScript fundamentals such as closures and object literals. After countless recommendations, I got hold of a copy of Douglas Crockford’s JavaScript - the Good Parts. When I found myself choosing to spend a sunny afternoon sitting up on the Surrey Hills with a beer and said book, I realised that I was really starting to fall for this language.
</p>


<p>
My conversion came all the quicker thanks to the incredible community surrounding jQuery and JavaScript. I had barely used Twitter up until I read a blog post by <a href="http://www.twitter.com/rem">@rem</a> on how to recognise a poorly written jQuery plugin and decided to follow him; same story with Paul Irish’s now famous <a href="http://vimeo.com/12529436">‘10 things I learned from the jQuery source’</a> video. Pretty soon, I was following more and more JavaScript luminaries, and I finally discovered what people meant when they quote Twitter as a great resource for learning. I now follow over 300 people, and most of them are JavaScript developers.
</p>


<p>
I know that these views are not universally shared, and for me this shift of focus simply brings my day to day job more in line with my personal style of programming. For others, Java is a great choice, but for me it felt like programming in a treacle-filled strait jacket. I’m looking forward to a simpler, faster, and in my opinion more elegant life of programming.
</p>

</div>
  
  
    </article>
  
  <div class="pagination">
    
    <a href="/blog/archives">Blog Archives</a>
    
  </div>
</div>
<aside class="sidebar">
  
    <section>
  <h1>Recent Posts</h1>
  <ul id="recent_posts">
    
      <li class="post">
        <a href="/blog/2013/07/22/web-components-will-be-a-pretty-big-deal/">Web Components will be a Pretty Big Deal</a>
      </li>
    
      <li class="post">
        <a href="/blog/2013/02/24/starting-a-coding-meetup/">Starting a coding meetup</a>
      </li>
    
      <li class="post">
        <a href="/blog/2012/10/27/sublime-text-2-configuration-plus-keyboard-shortcuts/">Sublime Text 2: Configuration + Keyboard shortcuts</a>
      </li>
    
      <li class="post">
        <a href="/blog/2012/09/23/notes-from-a-hackathon/">Notes from a hackathon</a>
      </li>
    
      <li class="post">
        <a href="/blog/2012/04/15/from-java-to-javascript/">From Java to JavaScript</a>
      </li>
    
  </ul>
</section>

<section>
  <h1>GitHub Repos</h1>
  <ul id="gh_repos">
    <li class="loading">Status updating&#8230;</li>
  </ul>
  
  <a href="https://github.com/larister">@larister</a> on GitHub
  
  <script type="text/javascript">
    $.domReady(function(){
        if (!window.jXHR){
            var jxhr = document.createElement('script');
            jxhr.type = 'text/javascript';
            jxhr.src = '/javascripts/libs/jXHR.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(jxhr, s);
        }

        github.showRepos({
            user: 'larister',
            count: 0,
            skip_forks: true,
            target: '#gh_repos'
        });
    });
  </script>
  <script src="/javascripts/github.js" type="text/javascript"> </script>
</section>


<section>
  <h1>Latest Tweets</h1>
  <ul id="tweets">
    <li class="loading">Status updating&#8230;</li>
  </ul>
  <script type="text/javascript">
    $.domReady(function(){
      getTwitterFeed("larister", 4, false);
    });
  </script>
  <script src="/javascripts/twitter.js" type="text/javascript"> </script>
  
    <a href="http://twitter.com/larister" class="twitter-follow-button" data-show-count="false">Follow @larister</a>
  
</section>


</aside>

    </div>
  </div>
  <footer role="contentinfo"><p>
  Copyright &copy; 2014 - Alastair Lockie -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

</footer>
  

  <script type="text/javascript">
    (function() {
      var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
      script.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);
    })();
  </script>


  <script type="text/javascript">
    (function(){
      var twitterWidgets = document.createElement('script');
      twitterWidgets.type = 'text/javascript';
      twitterWidgets.async = true;
      twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
  </script>


</body>
</html>