June 29th, 2009
Kings of Code day one is over. The weather is perfect, Tuschinski theatre is charming and todays side-events were a great warm-up for tomorrows conference day. The seminars may not have been extremely advanced but they were nice introductions to some really interesting topics that I’ve been wanting to learn more about.
Advanced jQuery techniques
The day started off with a few advanced jQuery techniques with speaker Edwin Martin. While I don’t personally consider them really advanced, the techniques still had some nice points we could learn from.
For example, I hadn’t heard of the live() event binder which solves the problem of having to rebind onclick events when adding elements dynamically, which will come in handy in almost every project. Edwin also gave a nice introduction to creating custom easing animations.
One thing that impressed me was jQuery’s RSS parser. With jut a few lines of code, you can make an AJAX call to get an RSS feed and conveniently traverse and output it in the browser by using Javascript only. Didn’t know that.
Neither did I know how fast and easy it can be to create a custom themed dynamic interface with jQuery UI and ThemeRoller (though I may have suspected it.)
<canvas>
The seminar of the canvas element by Marcel Beumer was something I had looked forward to. I find the idea of rendering 2D with HTML5 and Javascript to be fascinating. While the seminar itself was great and informative, it gave me the feeling that it may still be a better idea to learn Flash and AS3, rather than start playing with canvas.
Marcel pointed out that the advantages with HTML5’s canvas element is that it’s an open standard that is supported by the browser rather than dependent on a plugin, and that you will use the same toolset—HTML and Javascript—as you are used to. I completely agree and it’s a beautiful idea which seems to already be very capable.
However, it may take a very long time until it becomes a standard and even longer until it’s supported by all major browsers. Flash is already an extremely powerful platform that is being constantly improved and updated. It may be a browser plugin (and as such, an additional download) but it’ll take a long time before more people will have a browser supporting <canvas> than a browser with Flash.
Of course, there’s always emulation layers and similar but they are, and will be, much slower. And talking about speed, I’ve got a strong feeling that Flash will be way more optimized as it can already render 3D at stunning frame-rates. I saw amazing examples of this at FITC earlier this year.
The canvas element is a nice tool and I will love to see it become an open standard. Hopefully I’ll find somewhere to put it to good use but for now, I’m a bit skeptic and still find Flash to be more mature, proven and optimized for the purpose of rendering heavier graphics. As the technology matures, I hope we’ll see an increasingly powerful and fast HTML5 with great frameworks/ abstraction layers for all sorts of rendering.
Link recommendation from the seminar:
Bespin – Web code editor built using HTML5 technology
https://bespin.mozilla.com/
Introduction to Rails
It’s funny how the seminar I suspected would be least interesting turned out to be the one I enjoyed most. Before this, I’ve never looked at either Ruby or Rails. Since I’m used to PHP, I simply assumed it would be somewhat boring, hyped and unnecessary. I’m glad to say I was wrong.
During the one hour long seminar, Menno van der Sman and Justin Halsall introduced us to Rails by building a database driven location-based search engine. I have to say, Rails really impressed me and I’m going to another seminar about it tomorrow. It looked and felt really comfortable, quick and convenient. These guys made me want to learn more and I’ll probably even put it to practice in an upcoming project.
Subversion & Versions App
In the afternoon, Jasper Hauser and Jonathan Dann from Sofa gave an introduction to subversion and their own Mac client, Versions. Since I’m actually using this application daily, there wasn’t a whole lot of new information for me to pick up. However, it’s always fun to hear things from other people’s perspective, especially those who developed the application I’m using. Besides, I really like Sofa.
All in all, it was a good and enjoyable presentation. Among other things, they recommended Google Code as a subversion repository and I noticed them using a very nice snippet app called TextExpander which I will definitely take a look at.
iPhone app development
Last but not least came an excellent end of an exciting first day Since I’m an iPhone owner and a huge fan, I of course looked forward to this seminar. Joris Verbogt, creator of the Dutch TXXI app (of which the owner is actually a friend of mine) gave us a quick walkthrough on how to create a native iPhone application using Objective-C in Xcode and Interface Builder.
The syntax of Objective-C may seem a bit odd at first but it shouldn’t take long to get used to it if you’ve ever written C or C++. Using the supplied iPhone simulator and Interface Builder, Joris showed us how to quickly build a Twitter feed interface and conveniently see it in action right there on his Mac. Plenty of fun!
All I can really say after this on hour seminar is that Apple seem to have made it a joy to develop for this platform and I’d love to try it out.
End of the day
My first day of my first visit at Kings of Code turned out to be warm, exciting and very educational. The atmosphere is great, the subjects are awesome and at the end of the day, both my colleague and I are satisfied and even more excited about tomorrow.
See you there!
Note: Rapid blogging, the clock is ticking—beware of typos.
Tags: conference, event, html5, iphone, jquery, kings of code, presentation, rails, seminar, subversion
Posted in Development, Reviews | No Comments »
May 13th, 2009
Since it may not yet be extremely clear what I do all day – sometimes even I wonder – this will at least clarify what software I use. As for hardware, I’ve got an old Intel Core Duo MacBook, an external monitor and a Wacom Graphire4 tablet.
The following is what I recommend when it comes to software for Mac.
- Adobe Creative Suite - $999 - link
Seriously, who could live without it? I mostly use is Photoshop for slicing and Fireworks for prototyping and wireframing. If, or when, I will get my hands dirty with graphic design, the obvious choice would be Illustrator.
Dreamweaver, however, is something I haven’t touched in years. Here’s why.
- TextMate - $55 - link
For me, this is perhaps the most invaluable development tool. It’s not an IDE – there’s no debugger, no eye-candy, no heavy features – and that’s what I love about it. When it comes to editing code, there’s no substitute. With it’s convenient shortcuts, advanced text editing features and complete bundles for most languages, it’s the fastest and most comfortable code editor I’ve ever used.
If you try it out, I suggest checking out the Bundles menu and get used to some useful keyboard shortcuts. Personally, I love the auto-quotation, auto-indentation, soft tabs , Command+/ (comment and uncomment), Command+[ (indent) and the F5 shortcut (for sorting CSS properties) but I also know a lot of people like the Alt+Esc auto-completion.
- Versions - $53 - link
When the code is written an tested it needs to be committed to the repo and this app has the slickest and simplest interface I’ve seen on a SVN client. What more can I say, it just works. Of course, command line knowledge is highly recommended too but Versions is lightweight, simple and has pretty much everything you need.
As with all other software, I recommend removing unnecessary buttons from the toolbar to get an even leaner interface.
- WMware Fusion - $80 - link
Unfortunately, testing website compatibility with IE is something we have to deal with. Booting Windows in BootCamp takes too much time and energy, which is why I use a virtual machine with Windows XP. I used to do it in Parallels but VMware’s Fusion for some reason feels better.
I recommend suspending the virtual machine instead of turning it off. It could save some time, especially for you lucky bastards with new Mac/MacBook Pro’s. Once up and running, I use Multiple IE to get access to most versions of Internet Explorer. Multiple IE is, however, not perfectly reliable and once I get a new computer I’ll run another virtual machine with the “real” IE6.
- MAMP - Free - link
If we’re doing server-side scripting, setting up a CMS or similar, we’ll of course need server software. Setting up Apache and MySQL manually may be a fun adventure on a Mac and I recommend people to do it at some point but if we just want to get on with our work, this bundle is a gift. Like most of you already know, it installs a decent setup of Apache, MySQL and PHP on your Mac.
Of course, there’s a lot of purists out there that wants to have full control over their local server and I get that. If one has spare time and prioritizes this stuff, I’m all for it. It can be a nice learning experience and once you have it all beautifully set up exactly like you want it, maybe you can find a way to standardize it and back it all up for future needs.
But for now, I prefer just smacking this baby into the Applications folder knowing I’ll have everything I need, including PhpMyAdmin, and focus on backing up my “htdocs” folder and the databases I care for. We’re never going to use it as a production server so there’s most likely no harm in using this time-saving option unless you have special needs.
That’s my five choices. I find these to be efficient for me but in the end, a lot is about personal preference and what you need. If you need a debugger, Zend Studio (recommended, ~$550) may be your choice of editor. If you’re a command line guru that types 300 words per minute, you may find command line svn to be more effective. Also, as we grow and our industry changes, so will our choice of tools.
Bottom line; try out as many alternatives as you can and always keep an open mind.
Tags: applications, Development, list, mac, software, tools
Posted in Development | No Comments »
May 6th, 2009
Note: This article is discussing Drupal version 6.11.
Drupal 6 is built to validate as XHTML but I’ve lately been leaning towards HTML standards. I also enjoy making things – Drupal in particular – do what I want them to do, so I just had to see if I could get Drupal to validate as HTML 4.01 Strict.
Since Drupal has a lot of theme override functions, I naturally presumed that it would be a simple task and it was. Well, except for the fact that Drupal core spits out a content-type meta short-tag in the <head> section of the website. But let’s start from the beginning.
The theme basic from Raincity Studios is a starting point for all my projects and I dearly recommend it. The problem I had here was mainly in the <head> section, where Drupal outputs all the tags as short-tags, ending with “/>”. These tags are being printed out with the help of the PHP variables $head and $styles.
So basically, all we need to do is put the following two lines in into the theme_preprocess_page() function of our template.php file, to remove the slash from the end of the tags.
$vars['head'] = str_replace(" />", ">", $vars['head']);
$vars['styles'] = str_replace(" />", ">", $vars['styles']);
Remaining is the content-type problem mentioned above. It turns out there are two Drupal core functions, called drupal_get_html_head() and drupal_final_markup(), in the file /includes/common.inc, which make sure a content-type meta tag is prepended to the <head> section.
The code looks like this and as far as I can tell, there’s no other way of getting rid of this than to do changes to this file.
function drupal_get_html_head() {
$output = "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n";
return $output . drupal_set_html_head();
}
function drupal_final_markup($content) {
// Make sure that the charset is always specified as the first element of the
// head region to prevent encoding-based attacks.
return preg_replace('/<head[^>]*>/i', "\$0\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />", $content, 1);
}
So just removing the slash from the string in that function will solve the problem. Changing core code is a bad, bad thing but at least it’s a very minor change and we can still update the site with the only problem being that it again may not validate.
After doing this I had no other problems than contributed modules sometimes outputting XHTML, and very rightfully so since Drupal is based on it. This can often be solved with theme functions. ImageCache, for example, is used by calling a theme function so I Googled it’s API, found the original code and put the following in my template.php…
function mytheme_valid_imagecache($namespace, $path, $alt = '', $title = '', $attributes = NULL) {
if (is_null($attributes)) {
$attributes['class'] = 'imagecache imagecache-'. $namespace;
}
$attributes = drupal_attributes($attributes);
$imagecache_url = imagecache_create_url($namespace, $path);
return '<img src="'. $imagecache_url .'" alt="'. check_plain($alt) .'" title="'. check_plain($title) .'" '. $attributes .'>';
}
…which is an exact replica of the original code but without the slash in the <img> tag. Now I just call this function instead of the ImageCache theme function, and I get valid HTML 4.01 Strict.
I wouldn’t recommend this at all if you’re using more than just a few modules. If you’re using more modules, a lot of ugly changes may have to be made – changes that may also break something if you ever decide to update the site. However, it was a nice experiment for this particular project and I enjoy seeing the wonderful green color when I run the site through the validator.
Maybe time to write a HTMLify module.
Tags: drupal, html, standards, theme, theming, validation
Posted in Development | 1 Comment »