qTranslate is a lets say sufficient free plugin that enables multilingual wordpress setups. For a free plugin it is really feature rich, but when it comes to interact with the really nice shopp plugin, there are a few shortcommings. Especially, there is no way (besides writing qtranslate’s comments by hand) to translate the product summaries. This however can be resolved rather easy, because the product-summary field is more or less identical to wordpress own postexcerpt field. The later can be translated by qTranslate with qTranslates internal qtrans_modifyExcerpt() function.

So if we want to add translation für shopp product summaries, we simply have to take that function, adjust it to our needs and call it at the right spot. Without further ado – add the code below to your functions.php and you are done.

function tao_qtrans_modifyProductSummary() {
	global $q_config;
	echo "<script type="text/javascript">\n";
	echo "if(jQuery('#summary').size()>0) {";
	echo $q_config['js']['qtrans_is_array'];
	echo $q_config['js']['qtrans_xsplit'];
	echo $q_config['js']['qtrans_split'];
	echo $q_config['js']['qtrans_integrate'];
	echo $q_config['js']['qtrans_switch_postbox'];
	echo $q_config['js']['qtrans_use'];
	$el = qtrans_getSortedLanguages();
	foreach($el as $language) {
		echo qtrans_createTitlebarButton('product-summary', $language, 'summary', 'qtrans_switcher_product-summary_'.$language);
		echo qtrans_createTextArea('product-summary', $language, 'summary', 'qtrans_switcher_product-summary_'.$language);
	}
	echo "qtrans_switch_postbox('product-summary','summary','".$q_config['default_language']."');";
	echo "jQuery('#summary').hide();";
	echo "}";
	echo "\n</script>\n";
}

if( function_exists('qtrans_createTitlebarButton') &&
	function_exists('qtrans_createTextArea') ) {
	add_filter('admin_footer', 'tao_qtrans_modifyProductSummary');
}

Commonly, larger mailchimp lists are segmented by interest groups to allow specific targeting without handling subscriber data on different lists.

Now if you want to import large amounts of already subscribed users, using the mailchimp api is the best solution. Scanning the mailchimp api docs of the listBatchSubscribe action I was not able to find any documentation on how to import subscribers to specific interest groups – should have read the listSubscribe docs too . It turned out it is really simple. Just add an array of group information to your data rows using the key ‘GROUPINGS’ and you are good to go. Group information must contain the key ‘groups’ – a comma separated list of interests and either the group id or the name of the group you want to add your data to. ID, name and values of groups can also be listed using the listInterestGroupings method.

A simple example:

$batch = array(
   array(
      'EMAIL' => 'test@yourdomain.com',
      'FNAME' => 'Test',
      'LNAME' => 'Test',
      'GROUPINGS' => array(
          array('name' => 'MyGroup', 'groups' => 'Value1, Value3'),
          array('id' => 15, 'groups' => 'Value2'),
      )
);
$chimp->listBatchSubscribe($list_id, $batch, true, true, true);

Being an avid Notational Velocity user on OSX, i was really happy when Notational Velocity started to support SimpleNote. This made it really easy to sync notes on multiple devices including my iPhone.

Now i recently became a part-time linux user (again). Sadly there was no useful native client for SimpleNote available. Of course there is the standard web-interface and there is even a google chrome extension that allows working with SimpleNote.

Once again, i totally forgot emacs. Sometimes called an operating system on its own and this operating system really has support for SimpleNote through simplenote.el.

Installation is really simple:

(require 'simplenote)
(setq simplenote-email "")
(setq simplenote-password "")
(simplenote-setup)

Happy note-taking.

I have just been toying around a few minutes with the google+ api.

The result is a small jQuery plugin that can display and update a users activity stream.

Setting up the plugin is really simple – just include it using

<script src="https://raw.github.com/wbg/jQuery-GooglePlus-Widget/master/js/jquery.googleplus.widget.min.js"></script>

And start it using

$(function() {
  	       $('#target').googleplusWidget({api_key:'API KEY',user_id:'USER ID'}).trigger('start_gplus');
});

You can register an API key using the google api console: https://code.google.com/apis/console/

Get it on github

There is a severe drawback in Adobe Flash on OS X Lion (10.7). Flash Apps that need access to Camera or Microphone i.e. every Flash Video Chat show the “Allow to Access” Screen, but there is no way to click “Allow”. Currently this can either be worked around using keyboard navigation (tab to the ‘Allow’ button and hit space to confirm) or by manually adding the Sites in the “Camera and Microphone” tab of the Flash Player Preference Pane.

Details about this bug on the apple discussion board. And the corresponding entry on adobes bug tracker.

This week Apple released its newest Operating System Mac OS X 10.7 aka Lion solely through the Mac App Store. It is no revolutionary update, but there are lots of new GUI as well as OS features.

Ars Technica did a great review covering all the new stuff in lion. Read it at arstechnica.com.

Most well-structured wordpress projects these days make heavy use of custom post types to cleanly separate different kinds of information.

Sadly by default, these post types are not available in your main wordpress RSS / ATOM feed, but luckily this can easily be fixed.

Just paste the following Code in your functions.php and all entries of all your custom post types are added to your RSS / ATOM feed.

add_filter('pre_get_posts',
	create_function('$query',
		'if ($query->is_feed) $query->set("post_type","any");
		return $query;'
	)
);

If you want to be more specific about what to add to your feed, simply change “any” to an array of post_types. For example:

add_filter('pre_get_posts',
	create_function('$query',
		'if ($query->is_feed)
			$query->set("post_type",array("post", "my_custom"));
		return $query;'
	)
);

As you are accessing the wordpress query object, the same technique can also be used to change the post order in your feed, or add custom category filters etc…

By default wordpress removes iframe tags from posts. This is not always the desired behavior as youtube, vimeo and other widgets are added via iframes.

The filtering of iframe tags is performed on the clientside by the javascript editor tinymce as well as on the serverside by the wordpress whitelist filter. Therefor, to disable iframe filtering, it is neccessary to add two hooks to either a plugin or the functions.php of your theme:

Disable iframe filtering in tinymce

Simply add the following code to your functions.php – this adds iframes as valid elements for tinymce:

add_filter('tiny_mce_before_init', create_function('$a', '$a["extended_valid_elements"] = "iframe[id|class|align|frameborder|height|name|scrolling|src|width|title|style]";return $a;'));

Disable server-side iframe filtering

Add this code to your functions.php – it adds iframes to the whitelist of wordpress:

global $allowedposttags;
$allowedposttags["iframe"] = array("id" => array(),"class" => array(), "align" => array(),"frameborder" => array(),"title" => array(),"style" => array(),"name" => array(),"scrolling" => array(),"src" => array(),"height" => array(),"width" => array());

Auch wenn wir alle sehr gerne auf wordpress zurückgreifen lohnt sich doch zwischendurch ein Blick auf die zahlreichen Open-Source-Alternativen.

Also hab ich mir heute ein wenig Zeit genommen um mir zwei bekannte – Drupal & Typo3 – und ein paar mir weniger bekannte – Concrete5, CMS Made Simple, SilverStripe – anzusehen.

Concrete5

Erster Versuch Concrete5, das explizit seine Features für Entwickler in den Vordergrund stellt. Am Setup gibt es nichts zu bemängeln, sehr übersichtlich und nach ein paar Klicks abgeschlossen. Um Dinge wie SEO URLs oder eine sitemap.xml muss man sich nicht kümmern – es funktioniert einfach. Das Admin interface muss man wohl mögen, mein Fall ist es nicht, aber die Möglichkeit Inhalte im Frontend mit Versionierung und instant Preview zu bearbeiten ist super. Die Erweiterbarkeit hab ich mir nur kurz angesehen, finde es aber auf den ersten Blick etwas verwunderlich, dass die Entwickler zwar jede Menge Zend Klassen verwenden, aber gerade fürs MVC auf eine handgestrickte Framework zurückgreifen.

Silverstripe

SilverStripe war enttäuschend: Obwohl der Install-Check problemlos durchlief brach die eigentliche Installation mit einem anglichen Fehler im php date.timezone Setting ab. Das wäre nicht weiter schlimm und leicht zu beheben, aber: wenn die Installation abbricht wird kein Rollback durchgeführt – um die Installation zu wiederholen muss zuerst von Hand die _config gelöscht und die erstellten Tables entfernt werden. Manche Taoisten würden in dem Fall von einem “absoluten no-go” sprechen.

CMS made Simple

Die Installation von CMS made Simple ist ähnlich wie bei Concrete5 sehr schnell und problemlos abgeschlossen, wenn der install Folder nach erfolgreicher Installation noch automatisch gelöscht würde wäre alles perfekt. SEO URLs funktionieren leider auch nicht automatisch, dafür wirkt das Backend sehr aufgeräumt. Leider gibt es aber ein paar Kleinigkeiten die die Eingabe von Inhalten etwas umständlich machen. Es ist zum Beispiel nicht möglich Bilder direkt über den Content Editor hochzuladen – man muss diese erst über die getrennte Image Manager Seite hochladen (kein Multiupload), bevor Sie eingefügt werden können.
Das Template System von CMS made Simple basieren auf Smarty. Templates können damit sehr angenehm bearbeitet werden und das System dürften vielen Frontend-Entwicklern ein Begriff sein.

Drupal & Typo3

Bleiben noch die zwei altbekannten Drupal und Typo3. Und bei beiden war ich überrascht, wie viel Feinschliff die Systeme erfahren haben. Typo3 hat mittlerweile eine wirklich einfache Installationsroutin. Auch werden zB SEO URLs nun automatisch und ohne zusätzliche Extensions aktiviert. Das Admin Interface hat ebenfalls viel von seiner Unübersichtlichkeit verloren. Als Nutzer der alten Varianten muss man sich zwar etwas umgewöhnen (wo legt man jetzt Domain Records an?), der Schulungsaufwand für neue Nutzer dürfte aber um einiges geringer sein. Selbiges gilt für Drupal – einfache Installation, sehr brauchbares Admin Interface, aber hier noch ein wenig mehr getan werden um die grandiose Featurevielfalt besser vor Einsteigern und Redakteuren zu verbergen.
Ebenso wie für Wordpress sind für Drupal und Typo3 eine große Mengen an freien Erweiterungen und Themes verfügbar – damit können viele Problemstellungen bequem ohne Eigenentwicklungen gelöst werden.

Mein Fazit

Drupal und Typo3 kommen für mich wieder für sehr viele Projekte in Frage. Der Entwicklungsfokus in Richtung Social Media empfiehlt Drupal dabei eher für Community-Lastige Projekte. Typo3 wirkt durch die tollen Möglichkeiten für strukturierte Workflows und das genial einfache Caching System perfekt für Seiten mit einem großen Anteil an statischen Inhalten. Von den drei neuen Systemen finde ich concrete5 durch das brauchbare Frontend-Editing und die einfache Erweiterbarkeit am interessantesten.

Just a short note, because it happens to me once in a while.

If your bluetooth devices like mouse or keyboard stop working in OS X and reconnecting etc. do not solve the problem:

Open your Terminal and execute the following:

sudo killall blued

This restarts your bluetooth daemon and your devices should be working again.

A simple implementation of the good old water demoscene effect with a little twist. It works on the pixel data of a video playing in realtime. Check out the demo here. More infos soon. Be sure to use a recent version of Google Chrome or Apple Safari.

To get rid of the nasty sparetime i created a little fun experiment that uses HTML5 <video> + <canvas> and some CSS3 transforms to perform some interesting transition / slicing effects on video elements. It only works in webkit based Browsers i.e. Apple Safari and Google Chrome. Below is a link to the demo and a really short howto explaining the technique behind it.

Watch the demo first.

Howto

The code is pretty simple and straightforward. In essence you need a video tag to play the video, some canvas elements that act as your video slices and finally some css transforms to animate the canvas elements.

Video

HTML5 <video> makes playing videos (nearly) as simple as displaying an image on your website. The only thing slightly problematic is the codec support in different browsers. To satisfy all class A browsers, you would need at least three videos with different encodings (ogg, webm, h.264), but as these demo only covers webkit, at least ogg is not needed.

To embed the video you can use something like this:

<video id="video" loop autoplay controls style="display:none">
<source src="trailer_480p.m4v" type="video/mp4">
<source src="trailer_480p.webm" type="video/webm">
</video>

This defines a video element with some additional parameters: The source tags define the video files in different encodings, the loop, autoplay and controls attributes should be self explanatory.

To encode videos in h.264 i simply use handbrake, Miro Video Converter does a good job at creating WebM videos. Both tools are available for free.

Javascript

The javascript code is not that complicated either. In essence you just need to update some canvas elements with the video content periodically. This is simply done by rendering the video to the canvas element. The code is really straightforward:

var canvas1 = document.getElementById('canvas1')[0];
var ctx1 = canvas1.getContext('2d');
// ... repeat for remaining canvas elements
var video = document.getElementsByTagName('video')[0];
video.addEventListener('play', function() {
	setInterval(function() {
		ctx1.drawImage(video, 0,0, 854, 480);
		// ... repeat for remaining canvas elements
}, 33); }, false);

A possible speedup could be achived by rendering the video to a single large hidden canvas element an render this to the visible elements. Still I did not bother to test the speed improvements for this small example.

CSS3

As slices of the video are rendered to different canvas by now, you can use standard css3 transformation effect on them. To get at least minimal speed on mobile browsers, you should always use 3d transforms instead for their 2d counterparts as those are hardware accelerated e.g. translate3d(10px,10px,0px) instead of translate(10px, 10px). More details on CSS3 transforms can be found here.

The Movie

Last but not least: the excelent open source movie used for this demo is of course Big Buck Bunny (c) copyright 2008, Blender Foundation. A truly amazing achievement of the open source community.

In a collaborative effort EN GARDE and TAO Software lauched dada-dada.tv today. Beautiful design meets some nice Javascript/HTML5 enhacements.

Looks like Rey Bango of jQuery fame spent a lot of time compiling an awesome list of Web development resources:

The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books

XML, the much easier successor to SGML once was the de facto standard for data exchange formats on the web. Upon the arrival of JSON this changed really fast. Mostly due to the fact that JSON is really simple compared to XML. It’s relly easy to serialize and unserialize data to JSON in nearly any language used in modern web development, it is human readable, it is clean and it features a lot less overhead than XML Last but not least, it is much closer to datastrucutres used in typical programming languages. Still XML was quite dominant – maybe because of it’s enterprisey nature, but some new developments are likely going to change that.

Recently twitter announced that they will stop supporting XML in their streaming API. Foursquare equally recommends developers to use their API with JSON as they plan to go JSON only with their next API version.

These developments encouraged some interesting comments by XML advocates. Especially James Clark states:

From this perspective, my reaction to JSON is a combination of “Yay” and “Sigh”.

It’s “Yay”, because for important use cases JSON is dramatically better than XML. In particular, JSON shines as a programming language-independent representation of typical programming language data structures. This is an incredibly important use case and it would be hard to overstate how appallingly bad XML is for this. The fundamental problem is the mismatch between programming language data structures and the XML element/attribute data model of elements.

Though also his “sigh” is really understandable:

This is not a good thing for either community (and it’s why part of my reaction to JSON is “Sigh”). XML misses out by not having the innovation, enthusiasm and traction that the Web developer community brings with it, and the Web developer community misses out by not being able to take advantage of the powerful and convenient technologies that have been built on top of XML over the last decade.

This sure holds true as in the JSON world I still have to find those really powerfull and feature complete tools that are available for XML.