In a previous post I talked about templates - a great way to work with those is using HTML imports. Imports let you reference an external resource to load in, that way you could for example package up your templates in an external .html file and reuse it across your web app.

Setting up an import is very easy and looks similar to what you already do for CSS. 

<link rel="import" href="templates.html">
Posted
AuthorPeter
CategoriesJavaScript

I promised to write some posts about web components and related topics many months ago, and now finally found some time to get round to it. So here it is, the first topic to cover - the HTML5 template tag.

What the template tag allows you to do is specify some HTML markup that gets parsed but doesn't get rendered until you clone it and append it to the DOM, it is essentially inert. 
 

<template id="artist">
<div class="item">
<img src="" class="photo">
<span></span>
</div>
</template>

 

Posted
AuthorPeter
CategoriesJavaScript

Following up from my last tech review project with Apress, I recently took on "Pro Express.js". This is another great work by Azat Mardan giving an overview and API reference to this popular Node.js web application framework.

What I particularly like about this publication is the many real-world examples and it giving you the building blocks to grow your web apps from a basic proof of concept to a scalable solution.

The book is available for pre-order now and should be released some time next month. 

Posted
AuthorPeter

Speech recognition is one of those emerging standards that I look forward to being more widely implemented, not in the least because of what it could mean for accessibility of web apps.

Interestingly for a powerful feature like this, it has an incredibly simple JavaScript API to use, in just a few lines of code you can get your app to handle speech input.
 

var recognizer = new webkitSpeechRecognition();
recognizer.onresult = function(event) {
console.log(event.results[0][0].transcript);
console.log(event.results[0][0].confidence);
}
recognizer.start();
Posted
AuthorPeter
CategoriesJavaScript

Its been almost 6 months since my last conference - keeping busy at work has definitely brought down my average. I won't be speaking this time but am very much looking forward to HTML5DevConf in San Francisco next week.

I just spent some time going through the schedule and this is a current lineup of sessions I'd like to attend: 

  • Implementing Web Components at scale
  • Harnessing the power of UI Components
  • Bringing Web content to the Big Screen with Google Cast
  • Building Games for Every Platform with HTML5
  • WAI-ARIA: Awesome for Everyone
Posted
AuthorPeter

Multi-Mania is happening again on May 19 and 20th, its been a few years since I last presented there but am happy to be back for this edition doing a session on "Web Components - Building Blocks for the Web".

I've been spending a lot of time recently getting hands-on with web components and its related technologies (custom elements, HTML imports, Shadow DOM,... ) and look forward to sharing more about this soon. Over the next few weeks and months I'll post some articles and video tutorials following up on my presentation that deep-dive into each of the topics.

Hope to see many of you in Kortrijk, Belgium - the conference is free of charge and there are still some tickets available, be sure to register soon!

Posted
AuthorPeter

Its been a while since I last did a tech review project but could not refuse helping out on a very interesting book Azat Mardan has coming up called "Practical Node.js - Building Realtime Scalable Web Apps".

If you're anything like me you'll find this an excellent read and a very practical guide through what you need to build out web apps using Node.js and related technologies. It goes well beyond an introduction and explores a variety of topics like MongoDB, templating with Handlebars, LESS CSS, Socket.IO,...

The publication is scheduled to come out in June but is available for pre-order now. 

Posted
AuthorPeter

If you do web development and spend most of the day in the command line as I do, you'll appreciate this little productivity tip using Python.

Have you ever just quickly wanted to set up a server without configuring an alias and setting up a root folder? You can use the following command to set one up: 

python -m SimpleHTTPServer 8000

What this will do is take your current folder as the root and run a simple HTTP server on port 8000 (or whatever port you specify). It allows directory listing so you can easily navigate through folders.

For additional convenience, what I do is just set up an alias in ~/.bashrc on my Ubuntu machine or ~/.bash_profile on Mac. 

alias SERVER="python -m SimpleHTTPServer 8000"

What that does is next time I need a local server for a few quick tests, rather than fire up Apache I just navigate to a folder, type SERVER on the command line and open up http://localhost:8000

Posted
AuthorPeter

I came across some Python features this week that I remember blew my mind when I first learned about them. The first one is tuple unpacking, the ability to do an assignment like this:

(x0, x1) = (0, 1)

Probably not very surprising what this does but very convenient, x0 gets assigned 0 and x1 gets assigned a value of 1.  Where this starts to show its real power is doing something like this:

(x0, x1) = (x1, x0 + x1)

Here we're assigning x0 to x1 first and making x1 the sum of both, essentially building up a Fibonacci sequence. Good to note is that parentheses are optional here. 

Taking this one step further, lets say we want to be able to keep walking through this Fibonacci sequence. Rather than create a list of length n and populating it, Python has a cool language feature called generators that lets your function behave as an iterator. 

def fibonacci():
(x0, x1) = (0, 1)
while True:
yield x1
(x0, x1) = (x1, x0 + x1)


We're using while true in this generator because we don't want to limit how many times we can iterate. The actual magic happens using the yield keyword, it returns the current value when next() is called without exiting out of the function.

sequence = fibonacci() 
print sequence.next() # 1
print sequence.next() # 1
print sequence.next() # 2

Its features like these that make Python such an interesting programming language to use for prototyping. If you haven't already, be sure to give it a try!

Posted
AuthorPeter
CategoriesPython

Its been well over a year since I last blogged and am finally getting round to setting something up again. The old blog with articles from 2003 until 2012 is now being retired and is available as an archive.

I'm currently working as a Web Solutions Engineer in Creative Innovation at Google and new posts will likely revolve around my latest interests including (but not limited to) HTML5, Python, App Engine and a various Google APIs. That said, here is the standard disclaimer: any views expressed here are my own and do not necessarily reflect those of my employer.

I expect to have a first post up later this week and hope to see you around!

Posted
AuthorPeter