Happy 2011: In 10+ Different Programming Languages

The end of the year 2010 is near so I’ve prepared this post for all you coders, developers and other geeks. You know when you build applications (especially web applications) you often leave a copyright notice on every page saying “Copyright 2010, All Rights Reserved” or whatever? Right, but what developers tend to forget is that time passes by and that they have to go back and change 2010 to 2011 in January — so we often browse websites, especially in January and February that have last year’s copyrights.

The best trick is not to hardcode the year inside your templates and skins, but to write the current year dynamically using date functions, so below is a list of printing out the current year in 10 different programming languages.

And here’s a list of ones contributed by commentators:

Continue reading

Highcharts: Pure Javascript Charts API

I was working on a project lately that involved charts and graphs which had to be interactive, lightweight and somewhat complicated. I looked through quite a lot of different chart APIs, and for some time thought that I’d have to go with Open Flash Chart which is good and simple, but it was Flash. There’s nothing wrong with Flash, but Flash is what makes it more complicated to modify and extend. The standard OFC functionality seemed to work fine for me, but soon I came across Highcharts.

Highcharts: Pure Javascript Charts API

Highcharts is purely written in javascript and uses some advanced SVG to render the content. It’s quite impressive and very well documented. Chart control is all done via javascript, and all the options available make it very flexible and extensible. Since everything’s done in javascript it fits well with PHP without having to write tonnes of code or use some third-party library. The json_encode function comes in very handy when passing options from PHP to Highcharts.

Highcharts is free for personal use, commercial licenses start from $80, which is quite okay. Check out the Highcharts Demo page for some terrific usage examples. Happy charting and thanks for sharing!

Now with the Facebook Like Button!

Obviously, the Facebook Like button is one you’d like to implement inside your blog, website or whatsoever. I did too, although I am quite late as everyone has theirs for ages, but why not share some thoughts about it and the whole social widgets riot? As we all know (or maybe suspect) the web is going social, and what value is your blog if your readers can’t share your article with their friends with a single click of a button?

Facebook’s gone wild for the last few months. They keep rolling out new features, extending their functionality, and allowing developers and website owners implement those features into their own websites. Of course Facebook’s not the only one with their funky F8 conference, the Javascript SDK and the Social Graph API, as Twitter introduced their @Anywhere platform at the SXSW conference. And what about Digg? Google Buzz? I can go on forever, but all these new features have some things in common:

  • The code is bullet-proof (with a few exceptions)
  • You don’t need third-party services such as Tweet Meme, etc
  • Everything’s well documented in several languages
  • They’re all incredibly easy to use and maintain

Right. Who needs those extra WordPress plugins when you can simply copy and paste a few lines of code into your sources? As long as you have a little bit of general HTML knowledge you’ll be fine. If you’re a developer though, you’ll find all these extras much more interesting than an average person. I’ll keep this post closer to what Facebook has to offer, but the thoughts are fair for others too.

If you’re into the Facebook Platform, then you must have had some experience with FBML, iframe coding for Facebook and Facebook Connect. After Facebook rolled out their official PHP library, things began to make more sense, as you don’t have to spend too much time reading the specs to their API, everything’s done for you and wrapped into a set of classes, well documented and ready for use. Amazing!

Now, let’s drop the PHP stuff and talk about javascript for a while. Facebook’s got a Javascript SDK, and the best part of it is that you don’t have to read at all! There it is, right on the homepage, a short snippet of javascript code, ready to be copy-pasted onto your website, and voila! You’re now officially pimped! And ..? And yes, returning back to our Facebook Like button, it’ll take you less than 3 seconds to install it as well as all the other sexy widgets.

The Facebook Like Plugin page is full of text for those of you who like to read, but just by looking at the form, it’ll take you 2 seconds to configure it, and one to grab the code in FBML. If there’s somebody who didn’t quite get it, here’s a snippet with the complete Like button:

<div id="body">
<!-- My FBML goes here -->
<!-- Facebook Javascript SDK -->
<div id="fb-root"></div>
    window.fbAsyncInit = function() {
        FB.init({appId: 'your_app_id', status: true, cookie: true, xfbml: true});
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

What on earth could be easier than that? Hello World? ;)

Now that you’re boosted with the Facebook Javascript SDK, you can go on and grab some other sweet plugins such as the Activity Feed, Comments, Friendpile and the rest. Experiment with the UI, sizing and positioning and you should be able to fit the widgets anywhere on your website. P.S. The Facebook Like button’s minimum width is 90 pixels.

You won’t (or at least shouldn’t) have any trouble installing other social widgets onto your website, including Twitter, Digg and Buzz. There are tonnes of articles out there that explain the whole process step by step, but if you’re experienced enough, you’ll be fine just by scanning through the code.. Hope you didn’t scan my article that way ;)

Anyways, the bottom line is that Facebook (and everyone else) are doing quite good at providing tools to fulfill your website with the social juice available. Oh, and don’t forget to “Like” this post, and of course retweet. Cheers!

Introducing Retweet Anywhere for WordPress

Hey, guess what! I’ve just released a new WordPress plugin called Retweet Anywhere. It’s something I’ve been working on a few days, inspired by the previoulsy used Sociable and Tweetmeme plugins, allowing visitors to tweet my posts. What I didn’t like about those two is that Sociable simply redirects to twitter.com with a preset status, and Tweetmeme is not customizable enough in terms of application name, etc. Retweet Anywhere solves both issues.

Retweet Anywhere enables you to place retweet buttons, links, images, literally anywhere in your blog. The standard mode fades the background and shows a lightbox with the text input with a preset status, where all one has to do is click the tweet button. Everything happens via OAuth, so you’re never asking your visitors for their Twitter names or passwords, and your branded tweets are fired through their accounts tagged with your application name.

Retweet Anywhere allows visitors to modify the text they’re about to tweet. This enables them to address somebody in particular, or simply add a few hashtags. As the administrator you’re allowed to customize the format of the default text, using simple codes like %s and %l which end up in professional looking tweets, such as “Reading: Post Title http://example.org #hashtag (via @kovshenin)”. Now isn’t that awesome? You’re also allowed to shorten your links using your bit.ly account, then track your click through rate. Bang!

Retweet Anywhere

Moreover, you can place such retweet buttons, links or your own custom HTML anywhere in your posts, for instance: Thank you for retweeting this awesome post. It uses the WordPress shortcodes system, which enable you to place such links into your posts, pages and widgets. Speaking about widgets, here’s a surprise for you.. Retweet Anywhere comes with an awesome, fully customizable retweet widget which you can push into your sidebars in seconds, allowing your visitors to retweet your posts, pages, archives, with a single click of a mouse! Fantastic!

And of course, the plugin is totally free of charge, yup yup, all yours, GPL licensed! Download available at the WordPress plugin directory, right over here: Retweet Anywhere.

Now, for the more techy guys, let’s go over some details. The plugin comes bundled with the jQuery Facebox plugin, and uses the Twitter @Anywhere pack to display their tweetBox() inside Facebox, which makes it look very slick. The URL trimming is all happeneing on the server-side and fired via AJAX on your pages, this means that your page will not slow down. Furthermore, the already trimmed links are saved into custom fields to your posts and pages, which saves you time and bandwidth, next time somebody tries to shorten – simple, yet effective caching!

As usual, all your comments and thoughts are highly appreciated. Bugs will be fixed, functionality will be improved. All thanks to WordPress and @Anywhere. If you’re wondering about upcoming features then the only one I could mention at this stage is of course localization – Russian and a few other languages ;) More info, discussions, changelog, etc on the dev page.

Cheers, good luck and don’t forget to retweet this post!

Setup Twitter @Anywhere for WordPress in Seconds!

That’s right, seconds! The twitter @Anywhere was introduced at SXSW conference and launched the dev tools a couple of days ago. It’s a simple javascript-driven set of tools that allows you to basically integrate Twitter functionality anywhere on your websites. Usage is as simple as loading a javascript file and launching a couple of js commands, which instantly give you the power of Twitter on your own blog. Personally, I’m amazed, and couldn’t help integrating it here on my blog. Hover your mouse over @kovshenin to see the hovercards in effect ;) Sweet eh?

It took me around 40 seconds to get this thing to work. This includes downloads and uploads file to the server ;) So open up your functions.php file and paste the following code:

$api_key = "Replace with your API key";
add_action("wp_head", "twitter_anywhere");

function twitter_anywhere()
	echo '<script type="text/javascript">';
	echo 'twttr.anywhere(onAnywhereLoad);';
	echo 'function onAnywhereLoad(twitter) { twitter.hovercards(); }';
	echo '</script>';

That’s it. Literally. That’s all you have to do to fire your hovercards throughout your blog! Just make sure you get an API key before right over here. The Anywhere documentation is all javascript and pretty straightforward, I’m sure you’ll figure it out.

I also looked at the WordPress Plugin Directory for ones registered with the “anywhere” names and guess what! I found at least three of them – anywhere, twitter-anywhere and wp-twitter-anywhere ;) Why write a plugin for something that’s so dead simple? Oh well.. It’s funny how people rush to register WordPress plugin names when something new turns out. Same happened with Google Wave, and there’s still no good Wave plugin for WordPress ;)

jQuery Cycle: Pager and pagerAnchorBuilder

One very awesome and useful plugin for jQuery is jQuery Cycle, which pretty much works out of the box, but browsing through the second part of the Intermediate Demos we’ve seen a click transition called Pager, which is somewhat tricky.

Pager is nothing but a few links next to your cycling block with page numbers, which switch the cycle upon click. It’s very useful when you have to create, say a list of services a company provides, with sweet lightboxes (don’t confuse with the Lightbox plugin), perhaps with some images, cycling through their descriptions, yet we’d like our visitors to be able to switch through the services manually, without having to wait. This is exactly what the Pager transition does, but hey, who the hell would want page numbers instead of their services names?

This is where pageAnchorBuilder comes in, and it’s not quite obvious what has to be done to make this work. According to the jQuery Cycle documentation it’s:

pageAnchorBuilder – callback function for building anchor links: function(index, DOMelement)

So here’s a demonstration of how this would work. Let’s setup a quick cycle, with a few options. Perhaps you’ll need more than I listed below ;)

jQuery('#fade').before('<div id="nav" class="nav"></div>').cycle({
	pager: '#nav',
	pagerAnchorBuilder: paginate

So paginate is a callback function which takes two arguments, the index and the DOM element. Using the index will work just fine. Let’s see how this works with text:

function paginate(ind, el) {
	if (ind == 0) return '<span>Service One</span>';
	else if (ind == 1) return '<span>Service Two</span>';
	// and so on

I think that’s pretty straightforward once you understand how it works. Let’s try some images:

function paginate(ind, el) {
	return '<img src="http://whatever.com/services/service' + ind + '.jpg" />';

So name your images service0.jpg, service1.jpg, etc. And my favourite, CSS classes:

function paginate(ind, el) {
	return '<div class="service' + ind + '"></div>';

Then just add a few .service0, .service1, etc. classes in your stylesheet, voila! Hope that helps, and don’t forget about the other useful options. Cheers!

WordPress 2.9: From a Developer's Point of View

Yup, WordPress 2.9 is finally out and I’ve seen a lot of people upgrade immediately – sweet thing to do, I did so too and hadn’t had any problems here (I’m not using too much plugins), then I switched over to the 3.0 branch, all good! The semi-square buttons in the admin interface are fixed by the way ;) Anyways, this post is not about my blog, but about something I’m working on locally in the intranet of a company. And here’s a quick reminder: do not upgrade the running instance before you checked everything on a duplicate testing one, especially if a bunch of plugins there are handwritten ;)

A Handwritten WordPress Plugin is a huge set of files, with hundreds of duplicate lines of code and tonnes of commented code. The MVC/MVP models are usually transformed into the AIO (All-In-One) model. The only version control systems used are the “Copy & Paste” and “Undo & Redo”. The Core Upgrade process does not involve reading the changelog, backing up, etc.

Okay this is not a very smart thing to do, but sometimes you just need to, especially when you’re in a hurry (duh!). I’m not going to go in detail about the plugins, because you wouldn’t understand it anyway (no offence, I don’t understand most of it either), but let’s just say that I was using the Post Tags interface that you see in your “Edit Posts” admin interface. The sweet little box where you can type some tags or choose from the most used ones. All I did was copy the HTML contents of that little box onto my page, and it used to work (in 2.7 and 2.8), but as soon as I upgraded to 2.9, bang! It suddenly stopped. The javascript bindings were gone!

I figured out that the bindings were all made in the post.js so I took a look at the diff between 2.8 and 2.9 – completely different. The major change was the jQuery selector from span#ajaxtag to div.ajaxtag (line 99 in post.dev.js) which prevented all the other bindings. A few more ids have changed to include the tax name, and some other minor changes which I didn’t figure out yet. Although what’s the point in figuring it out? Wait until 3.0 is released and rewrite the plugin again, meh!

I did a lot of thinking here. This was not the only interface that broke, and rewriting everything on every core upgrade would be pretty difficult. People talk a lot about WordPress upgrades, plugins compatibility, etc. But most of the time they refer to plugins developed by other people, which sooner or later will get an upgrade. So waiting for a few weeks before launching the core upgrade generally does the job. But what if it’s a completely different page with a completely customized admin interface?

I worked a lot with WordPress metaboxes a few weeks before the upgrade and today I figured out that the best and easiest way of building WordPress admin interfaces would be, that’s right, metaboxing. The standard components used in the edit posts/pages interface (tags, publishing, categories, custom fields, etc) are simple metaboxes. So why copy HTML if you could simply use the predefined ones? And when a change is on its way, you’d sleep tight. Unless of course you’re interacting with the standard components from your customized ones, which involves using certain selectors for ids and classes. In that case you’ll just have to read the changelog, tickets (over 500 for WordPress 2.9) and of course code diffs.

Creating your own custom metaboxes is not as difficult as it is at first sight (yet I still haven’t figured out how to save their positions via AJAX, but I will). You will get the hang of it after your third or fourth metabox ;)

P.S. Have you noticed the new post thumbnails here? They used to be wide images, now they’re h2 text and small thumbnail. I love WordPress shortcodes ;)

Inspired: Javascript & jQuery Love

Remember the “inspired” blog posts series I started back in November? Well, let’s keep playing that game and today’s topic is jQuery and Javascript. The things you can do with javascript today are pretty impressive and sometimes unbelievable. Starting from simple AJAX calls and ending up with complete rich user interfaces with sweet animation (poke Facebook for instance).

You know I browse the web a lot – StumbleUpon, Digg, Twitter, etc. I go through tonnes of content, so today I made a short list of a few interesting jQuery and Javascript links that made my day! For rookies and for pros, check them out (ordered randomly):

Now you tell me – who needs Flash when you have Javascript? ;) Oh and by the way, if you’ve anything to add to the list (preferably articles published in late 2009) feel free to suggest via comments. If you’re looking for even more jQuery love, follow the real-time search results for the #jQuery tag on Twitter. Cheers!

Extending the jQuery Lightbox Plugin: Custom Link

Lightbox. I love it, though one interesting limitation I came over today is that there’s no extra linking possibilities. Yeah, the back and forth links are cool, but I’d like to take my visitor to some place whenever he clicks the full-sized image, not just close the lightbox. A good example may be an art gallery, where you can view an image set via lightbox, and then suddenly you decide to view one of the images in more detail (comments, download link, ratings and other stuff that you don’t put in the title attribute to show below the image). Wouldn’t it be nice if the user was lead to that specific art piece page if they clicked in the center of the image?

I made a little hack for that. I worked with the jQuery version of Lightbox but this trick should be applicable to the original (prototype) version too. So, here’s the trick. This is the usual way:

<a class="lightbox" href="path/to/full_image.jpg" title="title of the image">
    <img src="path/to/thumbnail.jpg" alt="whatever" />

And this is my version:

<a class="lightbox" href="path/to/full_image.jpg" title="title of the image"
    rev="http://url/of/some/page.htm" >
    <img src="path/to/thumbnail.jpg" alt="whatever" />

So our rev attribute will hold the URL where we’d like to take our visitors if they clicked the center of the image. Now, open up your lightbox.css file and find the #lightbox-nav identifier, and add a cursor:pointer; property. This is so that people actually notice that the image is clickable (you get that finger cursor, just like on any link). Now, if you’re working with image sets (more than one image) you’ll have the next and previous links appear and they take 49% of the image each (with the default settings). Let’s give our visitors some more room and decrease that down to 15%. It’s located in the lightbox.css file, identified by #lightbox-nav-btnPrev, #lightbox-nav-btnNext (change width: 49%; to width: 15%;).

Finally, the javascript part. We need two modifications here, one that will read our link rev attribute and store it in an array, the second is the actual linking. Find the _start() function in lightbox.js. Mine is on line 66. Find this line:

settings.imageArray.push(new Array(objClicked.getAttribute('href'),

And change it to:

settings.imageArray.push(new Array(objClicked.getAttribute('href'),
    objClicked.getAttribute('title'), objClicked.getAttribute('rev')));

One more… Find:

settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),

Swap with:

settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),
    jQueryMatchedObj[i].getAttribute('title'), jQueryMatchedObj[i].getAttribute('rev')));

And the final part – we need to add an event for whenever the visitors click the image. We’re not binding the click event on the actual image though, instead we take the navigation container which holds the next and previous buttons (in case you’re using image sets) and bind it there, because it’s more visible to the browser (z-index is around 10). Okay so find the _set_interface() function in lightbox.js. Mine is on line 126. Somewhere after the $(‘body’).append part type in this code:

$("#lightbox-nav").click(function() {
	location.href = settings.imageArray[settings.activeImage][2];

The settings.imageArray is the one being filled at the _start point we changed previously. We added a third index to the array, therefore we use the [2] (zero-based, remember?). Okay, done. Go ahead and try it out. Hope it worked for you too ;)

Powered by Delicious: Web Design, Coding & HTML5

This is my first “Powered by Delicious” post, but I plan on writing similar posts at least once a month or so, depending how many links I bookmark. Here’s a list of some of my latest delicious bookmarks, with goodies on web design, coding, html5, photoshop, javascript and a bunch of other stuff.