Bob Belderbos

I just finished my first real-life timesaver script in Perl. I got a bit tired of the WYSIWYG Wordpress editor to markup my blog posts. It does an insufficient job aligning what I intend to display, which in itself is already a time-consuming activity (selecting/clicking). Moreover, I have to peak into the HTML to correct the editor. Time to automate this!

Purpose

Write my posts in a text editor with some simpler markup which I defined with some basic rules. The Perl script converts this to HTML that I can paste into the Wordpress editor (HTML tab)

Update 03.07.2012 ) I use the script for every post now for almost a year and it has been a great time saver. The invented markup is really easy and covers about all I need. The HTML generation is then one command and I quickly paste it into the Wordpress HTML editor. Another advantage is that my posts have conistent HTML tags, so if I decide to change CSS rules, the changes should be reflected in all posts.

The rules I use for quick text editor blogging

* headings
>>> preceded by a line means a header 3 (my css is using this for headings in my post)
>>>> same for h4 / headings

* intro text
MORE delimits the intro text that you see on the frontage (teaser)

* links
||Link name group||url
for links in the post (I use only target='_blank')
example: ||link to home||http://bobbelderbos.com

* paragraphs
lines preceded by :: are wrapped in paragraph tags with optional floating

* images
!!ALT text!!image link!!float!!width
for images (manual upload but I can script that, less cumbersome than WP)
(these are exclamation marks as opposed to pipe characters for anchors above)
example: !!featured image!!http://example.com/wp-content/uploads/YYYY/MM/image.jpg!!right!!200

* code samples
content between the CODE and /CODE tags will be wrapped in "pre" tags

* unordered list (ul / li)
are formed by a * (ul), one or more dashes - (li elements) and two stars (closing ul)

* literal lines
as perl I use the pound # sign. these lines are displayed "as is" so no risk of being mutilated by the script

* comments
lines preceded by #! are literal comments and will be ignored by the parser
example in my blog template: http://bobbelderbos.com/src/blog_template.txt

* FB like button
the word "LIKE" on a seperate line converts into fb:like button which you can spread around in your posts

This is the basic stuff I use in blog posts. I can easily memorize this syntax and write my posts in my text editor (a place where I am more effective anyway). Then when the post is done and saved as a text file, for example, blogpost.txt, I can run the perl script like this: $ perl wordpress_parse_post.pl blogpost.txt > blogpost.html && mate blogpost.html

The parser

The parser is available at Github. I couldn't paste it in here because I would get HTML embedding issues. Just check it out at Github and let me know if you have any suggestions ...

Result

Again, the generated html is based on the html I defined in my WP theme and wrote CSS for. But if you understand the search and replace functions (REGEX) of the script, you can easily go in and customize it. You just need to have a system defined.

If you want to use my defined markup, you can download the template here.

Hi there, I just finished another Facebook App to check out your friends' birthdays and send them easily a wall post or a personal message. This post shows some of the technologies behind it. 

PHP SDK library

First you need to grab a copy of the PHP SDK 3.0 library. This great article by Mahmud Ahsan shows a nice code example how you can implement it. Also when creating the app, in the dashboard you are provided with a simple example (this was a test app)

You can administer your apps from the developer's apps page (you need to sign up first)

Direct login, no login button

Instead of the famous login button I direct the user directly to the login / grant permission page/dialog with :

    if (!$user) {
        echo "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
        exit;
    }

$loginUrl comes from $facebook->getLoginUrl from the PHP SDK itself.

Extended permission

In fbmain.php you need to define the extra permissions the user needs to grant, in this case just 1:

    $loginUrl   = $facebook->getLoginUrl(
            array( 'scope'         =>  'friends_birthday'  )
    );

When a user accesses the app for the first time this looks something like:

FQL, the workhorse

As discussed in my previous post you can use FQL to get all Friends' birthdays:

$c_month = date('m');	// I also use a GET variable to input other months

$query = "https://api.facebook.com/method/fql.query?query=";
$query .= urlencode("SELECT uid, name,pic_square, birthday_date

  FROM user WHERE (substr(birthday_date, 0, 2) = \"$c_month\")

  AND uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) order by name"); 

$query .= "&access_token=".$access_token."&format=json";
$out = file_get_contents($query);
$response = json_decode($out, true);
aasort($response,"birthday_date");  // sorts the birthdays in chronological order

CSS

To check some of the styles used, I recommend to install the developer toolbar. The elegance of the Georgia suits well here.  I used some red (#900) to emphasize "Never" and the month.

PHP adds a class for the current date so that today's birthdays will jump out giving them a reddish background color:

.currentDay {background-color: #FF6666;}

JS / Jquery

Clicking between the months might take a bit - FQL needs to query the month you clicked (preloading all stuff would take too long, caching the results would be too advanced for this stage) - so a loader.gif is shown in a feedback div at the top of the page :

	// chrome workaround http://bit.ly/nHwY2P
	new Image().src = 'images/loader.gif';

	$("#navlinks a").click(function(){
		$("#feedback").html('<img src="images/loader.gif">');

	});

Facebook JS SDK

For some features it is preferred to also add the JS SDK. Especially for popup dialogs, inviting friends to your apps and the Like button. Below the inclusion of the library as well as the post to wall, send message and invite functions. $fbconfig['appid'] comes from your fbmain.php config file (see link to the thinkdiff article provided earlier):

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({appId: '<?= $fbconfig['appid' ] ?>', status: true,
           cookie: true, xfbml: true});
  FB.Event.subscribe('auth.login', function(response) {
    window.location.reload();
  });

// click on the green comment button and you get a popup to post to your friend's wall
 function fb_publish(sendUid) {
	// http://developers.facebook.com/docs/reference/javascript/FB.ui/

	 FB.ui(
	   {
	     to: sendUid,
		 method: 'feed'
	   }
	 );

// yields:

  }

// click the email button and you can send a private message

// it seems that a link is required, not sure why FB designed it this way ?!

 function fb_send(sendUid) {
	// http://developers.facebook.com/docs/reference/javascript/FB.ui/

	 FB.ui(
	   {
	    to: sendUid,
	    method: 'send',
	    name: 'Happy Birthday!',
	    link: 'https://apps.facebook.com/mybdaycal/',
	    picture: 'http://bobbelderbos.com/bday/images/birthday.jpg'
	   }
	 );

// yields:

  }

//  at the left upper corner you can click "invite friends", a dialog appears

// with all your friends, you can send them a request to use this app

  function Invite () {
    FB.ui({ method: 'apprequests',
      message: 'This app lets you stay up2date with friends birthdays and send them

                directly a happy birthday message'
    });

// yields:

  }

</script>

The functions are called in the PHP that loops over all the friends (from the FQL response):

	echo '<td><a class="aWall" href="#" onclick="fb_publish(
 ..
	<a style="font-size: 85%; " href="#" onclick="Invite()"
        title="Invite your Friends to this App">Invite Friends &raquo;</a>
Like Button
The like button links to the FB Application page. Since last April you can include the Send button.
<fb:like href="http://www.facebook.com/apps/application.php?id=246397802045313"
 send="true" width="380" show_faces="false" font="lucida grande"></fb:like>
Meta tags
See the opengraph documentation. The og:image allows the Like button to pick the right image
	<meta property="og:image" content="http://www.bobbelderbos.com/bday/images/birthday.jpg" />
	<meta property="fb:admins" content="628517118" />
	<meta property="fb:app_id" content="246397802045313">
Framework
I use the Skeleton boilerplate that has some good defaults for structuring my page. CSS and JS.
Nothing new just playing, feedback welcome

This functionality is nothing new, it seems that Facebook built in something quite similar, but the purpose was to learn more about the Facebook API (FQL, SDKs, dialogs, etc.) and dedicate a blog post to it. Interesting would be to combine it with a birthday card API somehow ...
If it is useful to anybody that would be great.
I love to hear your feedback.
App link: http://apps.facebook.com/mybdaycal/
FB page: http://facebook.com/apps/application.php?id=246397802045313
From here on ...
You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos.
By the way, if you have interesting topics you would like to see covered, just drop me a message, I am open to anything web-related.
'.$sendUid.'
 ..
	<a style="font-size: 85%; " href="#" onclick="Invite()"
        title="Invite your Friends to this App">Invite Friends &raquo;</a>
Like Button
The like button links to the FB Application page. Since last April you can include the Send button.
<fb:like href="http://www.facebook.com/apps/application.php?id=246397802045313"
 send="true" width="380" show_faces="false" font="lucida grande"></fb:like>
Meta tags
See the opengraph documentation. The og:image allows the Like button to pick the right image
	<meta property="og:image" content="http://www.bobbelderbos.com/bday/images/birthday.jpg" />
	<meta property="fb:admins" content="628517118" />
	<meta property="fb:app_id" content="246397802045313">
Framework
I use the Skeleton boilerplate that has some good defaults for structuring my page. CSS and JS.
Nothing new just playing, feedback welcome

This functionality is nothing new, it seems that Facebook built in something quite similar, but the purpose was to learn more about the Facebook API (FQL, SDKs, dialogs, etc.) and dedicate a blog post to it. Interesting would be to combine it with a birthday card API somehow ...
If it is useful to anybody that would be great.
I love to hear your feedback.
App link: http://apps.facebook.com/mybdaycal/
FB page: http://facebook.com/apps/application.php?id=246397802045313
From here on ...
You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos.
By the way, if you have interesting topics you would like to see covered, just drop me a message, I am open to anything web-related.
)"
		title="Send '.$friend['name'].' a Wall Post">
		<img src="images/comment.png"></a></td>';
	echo '<td><a class="aSend" href="#" onclick="fb_send(
 ..
	<a style="font-size: 85%; " href="#" onclick="Invite()"
        title="Invite your Friends to this App">Invite Friends &raquo;</a>
Like Button
The like button links to the FB Application page. Since last April you can include the Send button.
<fb:like href="http://www.facebook.com/apps/application.php?id=246397802045313"
 send="true" width="380" show_faces="false" font="lucida grande"></fb:like>
Meta tags
See the opengraph documentation. The og:image allows the Like button to pick the right image
	<meta property="og:image" content="http://www.bobbelderbos.com/bday/images/birthday.jpg" />
	<meta property="fb:admins" content="628517118" />
	<meta property="fb:app_id" content="246397802045313">
Framework
I use the Skeleton boilerplate that has some good defaults for structuring my page. CSS and JS.
Nothing new just playing, feedback welcome

This functionality is nothing new, it seems that Facebook built in something quite similar, but the purpose was to learn more about the Facebook API (FQL, SDKs, dialogs, etc.) and dedicate a blog post to it. Interesting would be to combine it with a birthday card API somehow ...
If it is useful to anybody that would be great.
I love to hear your feedback.
App link: http://apps.facebook.com/mybdaycal/
FB page: http://facebook.com/apps/application.php?id=246397802045313
From here on ...
You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos.
By the way, if you have interesting topics you would like to see covered, just drop me a message, I am open to anything web-related.
'.$sendUid.'
 ..
	<a style="font-size: 85%; " href="#" onclick="Invite()"
        title="Invite your Friends to this App">Invite Friends &raquo;</a>
Like Button
The like button links to the FB Application page. Since last April you can include the Send button.
<fb:like href="http://www.facebook.com/apps/application.php?id=246397802045313"
 send="true" width="380" show_faces="false" font="lucida grande"></fb:like>
Meta tags
See the opengraph documentation. The og:image allows the Like button to pick the right image
	<meta property="og:image" content="http://www.bobbelderbos.com/bday/images/birthday.jpg" />
	<meta property="fb:admins" content="628517118" />
	<meta property="fb:app_id" content="246397802045313">
Framework
I use the Skeleton boilerplate that has some good defaults for structuring my page. CSS and JS.
Nothing new just playing, feedback welcome

This functionality is nothing new, it seems that Facebook built in something quite similar, but the purpose was to learn more about the Facebook API (FQL, SDKs, dialogs, etc.) and dedicate a blog post to it. Interesting would be to combine it with a birthday card API somehow ...
If it is useful to anybody that would be great.
I love to hear your feedback.
App link: http://apps.facebook.com/mybdaycal/
FB page: http://facebook.com/apps/application.php?id=246397802045313
From here on ...
You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos.
By the way, if you have interesting topics you would like to see covered, just drop me a message, I am open to anything web-related.
)"
		title="Send '.$friend['name'].' a Private Message">
                <img src="images/mail.png"></a></td>';

 ..

	<a style="font-size: 85%; " href="#" onclick="Invite()"

        title="Invite your Friends to this App">Invite Friends &raquo;</a>

Like Button

The like button links to the FB Application page. Since last April you can include the Send button.

<fb:like href="http://www.facebook.com/apps/application.php?id=246397802045313"

 send="true" width="380" show_faces="false" font="lucida grande"></fb:like>

Meta tags

See the opengraph documentation. The og:image allows the Like button to pick the right image

	<meta property="og:image" content="http://www.bobbelderbos.com/bday/images/birthday.jpg" />
	<meta property="fb:admins" content="628517118" />
	<meta property="fb:app_id" content="246397802045313">

Framework

I use the Skeleton boilerplate that has some good defaults for structuring my page. CSS and JS.

Nothing new just playing, feedback welcome

This functionality is nothing new, it seems that Facebook built in something quite similar, but the purpose was to learn more about the Facebook API (FQL, SDKs, dialogs, etc.) and dedicate a blog post to it. Interesting would be to combine it with a birthday card API somehow ...

If it is useful to anybody that would be great.

I love to hear your feedback.

App link: http://apps.facebook.com/mybdaycal/

FB page: http://facebook.com/apps/application.php?id=246397802045313

From here on ...

You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos.

By the way, if you have interesting topics you would like to see covered, just drop me a message, I am open to anything web-related.

Today a post on FQL (Facebook Query Language). I will give you some examples that hopefully show the power of this SQL-like querying interface of the Facebook API.

So in short: FQL lets you query Facebook's Graph API (what is the Graph API?).

Some use cases:

1. get all comments for a specific URL

For example to see the comments on this book that was added to My Reading List: http://www.bobbelderbos.com/books/?googleID=UgrUeIwsS60C

Query:

SELECT post_fbid, fromid, object_id, text, time FROM comment

WHERE object_id IN (SELECT comments_fbid FROM link_stat WHERE url =

'http://www.bobbelderbos.com/books/?googleID=UgrUeIwsS60C')

This returns:

[
   {"post_fbid": "10150238413182479",
      "fromid": 628517118,
      "object_id": 10150208342007479,
      "text": "worth every penny, one of the best css titles I have read.",
      "time": 1310773947
   }
]

(more info on comments and replies per comment)

2. get all members of my BobsBlog Facebook Group

Query:

SELECT uid, name, pic_square FROM user WHERE uid = me()

OR uid IN (select uid from group_member where gid = 118232854902671)

order by name

3. get all the music your friends like - I used this one in friendsjukebox.com

(requires extended permission: friends_likes)

Query:

SELECT uid, name, pic_square,music FROM user WHERE uid = me()

OR uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) order by name

!! Note the batching of multiple queries into a single call !!

Snippet output:

... you can do the same for movies - query:

SELECT uid,name,pic_small,movies FROM user WHERE uid = me()

OR uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) order by name

4. get all birthdays of my friends of this month

(requires extended permission: friends_birthday)

Query:

SELECT uid, name,pic_square, birthday_date FROM user

WHERE (substr(birthday_date, 0, 2) = "07") AND uid IN

(SELECT uid2 FROM friend WHERE uid1 = me()) order by name

!! Note the use of substr in this query !!
Other functions that are available are now(), strlen(), substr() and strpos().

Fetch URL to execute the query

XML and JSON are supported formats. I am using JSON for this example.
$oauth_token is obtained by the Facebook's Authentication: you need to create a Facebook App first and get the user to login and grant permission to your app (I will do a followup post ...)

$query = "https://api.facebook.com/method/fql.query?query=";
$query .= urlencode("<above query>"); 

$query .= "&access_token=".$oauth_token."&format=json";
$out = file_get_contents($query);
$response = json_decode($out, true);

echo '<pre>';print_r($response);echo '</pre>';

FQL Test Console

There is a great test console where you can play with the queries. With another user account FQL console gave me "Something went wrong. We're working on getting it fixed as soon as we can."  It seems you need to have an Application setup and the test user might need to have granted the extra permissions him/herself.

A handy trick is to click on the URL in the FQL console, it will open a new tab with the URL to fetch. For example 1 that would be:

FQL Tables

Of course a lot more is possible, see all Tables. The only limitation is that you can only query indexable properties (columns)

What's next?

In the next post I will iterate over example 4. (birthday calendar) to show you how to use FQL as a workhorse for the input of your Facebook app. I will also cover some more aspects of the Facebook API like authorization and dialogs ...

From here on ...

You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos.

By the way, if you have interesting topics you would like to see covers, just drop me a message, I am open to anything web-related.

I wanted to use the Member Profile plugin of the updated LinkedIn Developer platform, but I wasn't getting all info. I found a way to import my profile to my blog, using LinkedIn's authorization layer. In this post I show you what I learned ...

Here is how the Member Profile would show my widget:

While my public LinkedIn profile looks like:

So not really working as expected. But LinkedIn has a whole API you can use to get any data of your profile, connections, companies, and news feeds.

To start you need an App

Log in to the LinkedIn Developer Network and create an application:

Make sure the Integration URL and JS API Domain fields link to the URL of the directory you are going to host your app.

Once you submitted the app, LinkedIn gives you an API and Secret Key. The first Key is needed to put in your pages that call the LinkedIn API.

Console to extract code

Then I used the  JavaScript API Developer Console to get the code for the Full Plugin widget (by the way, I also tried the out-of-the-box plugin for this, but it only gives the login button).

Only thing missing was my LinkedIn ID. Usually you can see it in your public URL (after pub/) but not if (like I did) you changed it to a clean URL: http://www.linkedin.com/in/bobbelderbos. I used Simple-LinkedIn's test page (PHP Library, see also at the end of this post) to obtain my ID.

 The snippet

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
  api_key: YOUR_API_KEY
</script>

<p>Full Member Profile</p>

<script type="IN/FullMemberProfile" data-id="xxxxxxxxxx"

 data-firstName="Bob" data-lastName="Belderbos"></script>

Integrate in Wordpress

I set up a page in Wordpress and pasted in the snippet of above, you can check out the result at: http://bobbelderbos.com/cv/. You can also see "CV" in the navigation of this site.

Gradual exposure

The nice thing is that this plugin includes the login plugin of LinkedIn. If you are not logged in to LinkedIn, you see only the public info with a button to login to LinkedIn to see more:

.. still not showing as much as I wanted, but better than nothing. Also the full profile is only visible to LinkedIn users.

I will update this post if/when I am able to show more in this "logged out" display. Anyways, people might already be logged into LinkedIn (cookie) and see your full CV directly as a default!

So when already signed in or signing in with the button you get the full CV in a nice format.
Try it yourself, I kind of like this integration: the LinkedIn logo is at the top but it seems really like a part of my site!

PHP libraries ...

I only used the JavaScript API in this post, I still have to write an article about accessing the LinkedIn API via PHP libraries.

Using a PHP library seems more versatile to me, because you get the response (data) back in XML or JSON, so it is easier to work with it.

Nevertheless I only touched the surface of what's possible with the LinkedIn JS API, I expect much more to be possible. You got any examples to share?

I mentioned the Simple-LinkedIn Class earlier. This library lets you do some pretty awesome stuff. Here is another great resource for using the LinkedIn API with PHP. I actually used this one in one of the apps I built ... it works great!

From here on ...

You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos.

By the way, if you have interesting topics you would like to see covers, just drop me a message, I am open to anything web-related.

I just stumbled upon a new plugin to add a Google+ Widget to your blog, allowing readers to add you directly to their circles. I am still playing with Google+, but my impressions up until now are very positive. 

Update 31.08.11

I decluttered my blog and I have to admit I prefer just a g+ icon under which I have under "Places". The number of circles I am in is really not important to me, and this way I save in less JS code. Of course the plugin looks very nice in a sidebar, but mine got just to cluttered.

See http://plusdevs.com/google-wordpress-plugin/ for more instructions: basically you download/upload the zipfile to your Wordpress blog, unpack it and activate it in your wp-admin.

Then you drag the GoogleCard to your sidebar in the WP Widget page and you fill in your Google+ ID (something like 106057741186141812269, the number you see after plus.google.com when in your profile's page). You can also put a customized title.

Done! See the sidebar of this blog. You can add me to share interesting web related stuff, I think it will be my most active topic on the new social network.

Waiting ...

Waiting for more fun with the Google+ API ! For now I could only sign up to get notified.

I hope to get a post out soon about Google+, it seems to really add value to Twitter and Facebook.

From here on ...

You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos.

By the way, if you have interesting topics you would like to see covers, just drop me a message, I am open to anything web-related.

I got fascinated about blogging when I started looking for a way to learn and get into web development. My personal experience is one of enrichment and fun. Today I wanted to share 10 key factors to become a proficient blogger.

1. (prelude) get a Wordpress or a CMS / blogging software

Wordpress is a gigantic piece of software to have the infrastructure in place. It is extendible with many plugins. Programming it yourself is just not worth it. However, you could design or buy a nice theme at not much effort / cost. It is a great way to get ready.

2. define your passion and just start!

OK, not to sound like yet another productivity blog out there, but it is true: once you find the subject you like (basically check if you have enough topics to cover in say 2 to 3 years), then start to write your first post. I felt a bit awkward sending a post into the www, and for sure it must have been stiff, but once started you are halfway through. You will roll into it, shape your style and become better at it when having posted 5 to 10 times, you'll see ...

3. content is King, google will find you!

A good design of your blog goes a long way, but good content is key. Zenhabits is one of the blogs I interestingly read every week. It has a very minimal design, beautiful, but the real power comes from the informative / inspiring articles.
Google is out there, Internet content is forever, kind of scary. The indexing of your content is ongoing, but that is a good thing as well. As you write more, the likelihood of being found grows. I found out that most visits to my blog are via Google!

4. write often - stuck on what to say? You shouldn't really...

This is something a lot of bloggers struggle with, myself included. A great trick is to brainstorm on topics you are interested in and make a list. Also be open for new experiences, sometimes a tweet, a post by a fellow blogger or a situation in everyday life, can give you the inspiration needed to write a post.
Some tips: read books in your field, they can provide a lot of inspiration. Be an observer, e.g. (it's amazing how trivial things can spark an idea!). Read news feeds, twitter and watch trends, you can jump on a bandwagon and contribute something useful to a subject not much people are yet familiar with.
Personally I find podcasts a great source of inspiration as well (especially the Sitepoint podcast en the Big Web Show)!

The size of the post is a bit arbitrary. You obviously write more short posts and they are pleasant to read (Seth's blog). Larger articles really permit you to dive into a topic. Usually I don't set a word limit, go with the flow, you will reach 1000 words easily if the topic really interests you.

Besides, sharing your knowledge is a great way to learn yourself. Don't you feel you really got a hold of something when you were able to explain it to somebody else? It also sets you aside: it is definitely a pro to have on your CV.

Update:

The "often" aspect is really relative. For a tech blog as this, a good article can take weeks or months of investigation. So in that light, posting once a week could be labelled as "often" already!

5. dedication, you'd better enjoy the ride, if not ...

Closely related to 4. is dedication. Don't start a blog with dollars in your eyes (ads revenues) or expecting thousands of visits from the start. Nothing comes overnight so you should enjoy the ride, if not you better shouldn't start.
You will have to put in hard work. I like my subject, the web, and I like to write, so I this is purely hobby although it has professional value of course. But yes: fun in the subject and writing are required to prevent a blog from dying.

6. promote your content

There are millions of blogs but most of them never come to the surface. A shame really because there are very good ones. Promote your new blog posts to Twitter, Facebook, Google+, Hacker News or other branch-related sites. Services as Ping.fm can automate this. Also allowing users to click and share your content (the famous social media buttons) might generate some traffic back to your blog, as well as linking / trackbacks.

7. engage with your users, it's fun!

One of the things I like most about blogging is to meet / hear from fellow web folks, people with shared interests. Usually it starts via a comment thread or a new reader pops a message via the contact form. Have those two forms active.
New readers are great especially if they read your articles with critical eyes! You can learn a lot from different view points.
A successful strategy is to let the reader participate is to ask questions. People feel invited this way to express their opinion. Again, you can use Social media to keep in touch with your readers (twitter, facebook page, etc.)

8. just a few suggestions to make the most out of your blog

You could facilitate links to older articles so that the reader can click and read more of your blog. It should be painless to subscribe. Subscribers are gold: these are the people that actually want to read your future posts! Additionally you can use other tools, I created a Facebook Group for example so I can interact with the people that regularly want to check out my writings.
There are WP plugins that put random / top commented posts below each new post. Small tricks
Use tags and categories to index your content and have a search box. Your blog will grow over time so content needs to be findable.
Very important is to use a appealing title for your posts. It's the management summary thing: people look at the title and decide to actually click / read it or not. There are millions of blog posts, why reading yours? Invite your readers in!
Moreover, structuring the article with headers allows the reader to scan the content and just read parts if time is a limiting factor.

9. Focus! today's Web makes it even more challenging!

With the rich GUI of Wordpress comes the responsibility to stay focussed. How much I like WP. I actually prefer to WRITE in Textmate and go into the GUI with the article 95% done. Writing requires focus! This cannot be underestimated: I think most successful articles I posted were the ones I was limited to a text editor! You can style and add images later, but the web is so awfully distractive, you should unplug from it time to time! Here I posted some other tips increase your productivity.

10. last but not least: be passionate!!

At the start of this article I said you should find a topic you really like. Actually so much you feel yourself talking about it for years. If there is one takeaway from this post it is that. When you have genuine interest in the topic, blogging becomes your second nature. As said before, writing should be a bit of your thing as well. Be passionate about something is the key to do what you do proficiently ! Read more about being passionate in this previous post.

So what about you fellow bloggers?

Can you find yourself in these 10 points? Are there other things you think that are key to successful blogging?

Further Reading

An interesting title on blogging is ProBlogger - Secrets for Blogging Your Way to a Six-Figure Income by Darren Rowse and Chris Garrett

Continue the conversation ...

You can subscribe to this blog, join my Facebook group, comment on this post below, or find me on twitter @bbelderbos

Coincidence is a fascinating concept: I just finished lecture 11 "testing and debugging" of MIT's interesting CS course yesterday and had an amazing example in practice today.The coincidence was a bug that was identified in an app I wrote. It did not make any sense at first: some data was written that had nothing to do with the expected data. I could not guess where it had come from. I started to look at the function responsible for writing that piece of output. As the mentioned course states: "reading" your code is very important, but you can easily get into the habit of just take things for granted.

Trying to understand the function I quickly saw the specific output got written to a temporary file first. You see, as code grows and apps age, you often forget the inner working of each and every function.

The thing to remember when debugging is that you need to be SYSTEMATIC. In the course a great example is shown of the binary search approach (the "Silly" program): start in the middle to rule out half of the code. Of the half left, start again in the middle, etc.

I started to look for a pattern to see when this bug might had slipped in. Having complete statistics (thankful now), and starting somewhere in the middle of last weeks uses, I was quickly able to pinpoint the exact time and date when the issue started.

The important question, always

Then I asked: "what changed around that date?". I started to think and talk to people involved: there was a permission change of the temporary file that got written to! A quick test script confirmed I could not overwrite the temp file anymore! Bingo!

The course and the real-life example thought me some things:

1. read along till the end
   The directory the temp file was in had enough permissions to write to, so that alone was not the issue. Until I went further down in the code I saw the file was not getting cleaned up. This fact I discovered later. So, although the binary search example as described above, is good to do anyways, I might had saved a bit of time. It is obvious but reading rewards!
2. reproduce the issue
   When you got a basic understanding of the issue, try to reproduce the problem as soon as possible in the process and with the minimum number of inputs (saves time). As the course says: once reproduced, you are more than halfway there. I often use a test.php to play around calling functions to isolate their working and really understand them.
3. search algorithm
   The binary approach into action: see above: you can quickly narrow down where the issue might be.
4. print, print, print
   As explained in the CS course ... print variables in your code. Actually do as much logging as you can. Bugs will show up, even best programmers are "bugged" (and if you would foresee those mistakes you wouldn't allow them to crawl in!) Although outputting extra stuff to console, tables/ files, might cost time to set up the first time, it will save time later and might decrease the damage done. I actually think a good approach is to design a test suite and toggle a global variable to switch it on/off. Be ready when you receive the call ;)

Defensive programming

At last

... be patient, analyzing a bug can take hours, sometimes even days if you (wisely) walk out from time to time. However I found the process much satisfying, intriguing even. I mean applying a systematic approach to narrow down an issue step by step, I think it is in the programmer's nature to just love that :)

Share the word or join..

Did you like this post? Tell your friends via the social media buttons on this site...

You can also join my Facebook group or get a weekly Mailchimp newsletter to keep up with my new blog posts. You can subscribe in the sidebar of this site ...

Ah.. and I am also at twitter: @bbelderbos

To become a programmer you need to practice a lot. To program you need data. To get inspired you need hobbies. After Movies and Books, I got to a passion of a lot of people: Music. I started a new Facebook App: Friends Jukebox. This blog post is just a quick overview what it does and some basics on the techniques used.

In a nutshell

Friends Jukebox queries your friends' favorite music artists and links to information and music videos of those artists. Data is cached and the subject is versatile so functionality can be amplified. This also lays in a design principle I mentioned some time ago: stick to the bare minimum and expand from there

Technologies:

APIs - 1a. Facebook login and FQL

First of all it uses the new Facebook PHP SDK 3.0. See this great article with instructions how to use it.

When logging in with Facebook, the user needs to grant this App permissions (post wall and email are for future use). The advanced permissions user_likes and friends_likes are needed to query the music taste of your friends and you.

Then it makes a big FQL query to get all the artists your friends like and presents it per friend, in alphabetical order. It also calculates the "likes" per artist and presents that in a cloud tag way: the artist with more likes has a bigger font-size. This way you visually see what artists are most popular.

Note that not all friends are included, only the ones that "liked" one or more artists. I think I got a rate of 50% of my friends, with 1 up till 40 artists, so even with few friends, you might get some outputs, and with a lot of musical engaged friends, you might get a very large output :)

APIs - 2. Last.fm

Each artist then can be clicked. When doing so, an overlay (fancybox) loads with more information about the artist (if found). I use the last.fm api for that. This is rather simple: parse the XML output you get when querying this web service.

APIs - 3. Youtube

There are also two links in the artist's info: one that goes of to last.fm, the first one, more interestingly, will show 6 youtube videos which I get from querying the gdata (youtube) API. I didn't re-invent the wheel for this.

With a bit of CSS, I put a share link on top of each video. This button, when clicked will invoke a call to Facebook's new Send Dialog. This allows for easy sharing of music videos with your friends.

APIs - 1b. Facebook plugins

There are more Facebook widgets integrated like the comment box, the like button, the invite friends dialog. See Facebook's developer documentation for more info. Those plugins are awesome, because they are easy to implement, yet they provide you with a powerful way to involve your users.

Feel free to try !

So if you like the idea, and you are curious what music your friends like to listen to, give it a try:

http://www.bobbelderbos.com/music

Movies

By the way, a similar feature can be found at sharemovi.es: you can check out what movies your friends like. See this post for more info (there JS is used, Friends Jukebox is mainly PHP).

Share the word or join..

Did you like this post? Tell your friends via the social media buttons on this site...

You can also join my Facebook group or get a weekly Mailchimp newsletter to keep up with my new blog posts. You can subscribe in the sidebar of this site ...

Ah.. and I am also at twitter: @bbelderbos

Hi there, enjoying your weekend? Hopefully you do with lots of fun and ... movies! Or you are not sure what to watch anymore? What about having 100 favorite movies of your friends at one click away?

How?! The almighty Facebook Graph API. All credits to this interesting post on the Facebook's developer blog about querying your friend's "Liked" movies. I saw it and thought "this should be ported to sharemovi.es" !

What is Sharemovi.es ?

November last year I launched sharemovi.es, my first Facebook app / site, defined as:

Sharemovi.es is a social application that aims to bring together movie fans. Each user has his/her unique movie profile where he/she adds up reviewed, rated and favorite movies. Movie reviews can easily be shared to facebook, twitter and other platforms. Anyone with a facebook account can sign up and start to use this app. It is built using the Facebook API. Have fun and hopefully you will get to know movies you wouldn't have heard off otherwise.

Never done

Bit by bit I keep on improving it / adding new features like this one. Over time I added support for facebook comments, (gData) movie trailers, you can invite friends, post movie reviews to your wall and to twitter. You can rate and favorite movies. So quite a lot already but "movies" is a versatile never-ending subject, so expect more to be added in the future !

So, you were always wondering what movies your friends liked ?

Now you can!

The flow is easy. Enter sharemovi.es and grant the necessary permissions to the app (existing sharemovi.es users: I am still searching an elegant way to let you accept incremental permissions if you go to a specific page. For now just log out and log in again from the sharemovi.es page, newly added permissions should be requested to you. )

Once in, click on "Friend's taste" button on the homepage or in the nav bar that you'll see once inside sharemovi.es ..

or:

... and you get a fancybox overlay and the process is loading. What you'll see here is pure Javascript at work, very smooth stuff produced by the FB developers.

Result : all friends' favorite movies:

When done you get a maximum result of 100 movies, the ones most "Liked" by friends, at the top. I added a link at the top of each movie to review it at sharemovi.es. The only thing you need to do manually after clicking this link, is to click the "Find!" button so that imdbGrabber finds the IMDB link which I use to pull basic info (director, actors, thumb) from, again, Facebook's graph API.

(You will see your friends' names and "Liked" movies here .. )

Then when clicking one of the red links, for example "Usual Suspects" was a movie I was reminded off by two friends who "Liked" this movie:

Click Find!

.. so some data mining stuff there (it is not perfect, but usually with the right keywords it will find the movie info), write some word, give a rating and decide where to share it.

Movie unique URL

After submitting your review, the movie gets an unique URL, e.g. http://sharemovi.es/theusualsuspects, it's like you own the movie review ;)

If the movie was submitted before, you are warned and you can go to the movie and comment via the FB comment box (v2, see a review of the new FB comment box here)

Not want to join sharemovi.es, but want to see the original FB developer's blog post example? Go here

Conclusion:

Apart from following what sharemovi.es users add (yesterday Megamind was added, I didn't know that movie and it looks awesome - cool!)

This way you can see what movies your friends like and review them yourself at sharemovi.es.

If you share one that you saw one of your friends "Liked" expect some conversation to be initiated. Then I know sharemovi.es is what it was meant to be: bringing movie fans together using the potential of Facebook's graph API !

Btw, you can follow @sharemovies at twitter and get all newly added movies in your stream automatically.

Share the word or join..

Did you like this post? Tell your friends via the social media buttons on this site...

You can also join my Facebook group or get a weekly Mailchimp newsletter to keep up with my new blog posts. You can subscribe in the sidebar of this site ...

Ah.. and I am also at twitter: @bbelderbos

Enhance your career

I just finished reading the The Passionate Programmer by Chad Fowler. It is about creating a remarkable career in software development. Developers out there, highly recommended reading!

In this post 15 things you can do, according to the book, to build that remarkable career:

1. go the other way

Compete on niche markets, if you go with the mass, you probably will compete against a low-wage countries.

2. know the business you are in.

Having worked in a hospital, at consultancy companies, in logistics and big tech companies, I can clearly see this.

Businesses operate very differently. It makes a difference if you understand their business models! At the end of the day we are assets in a company (or for a client) that runs a business, we are making money!

3. play with the best

When I played basketball long time ago, I was put in a team that played at a higher level. This was certainly difficult at first, but in the more stressful environment (important matches) I learned more than ever before.

The same thing applies in every field: the higher the skills of the people surrounding you (and expectations), the better you become.

4. diversity

Learn a new programming language each year. Why not? Try new stuff, the more you open up to new technologies, the more you widen your horizon, the better you become. Uncertain where Java will be in a few years? Learn clojure. Ruby or Python? Do some programming in both of them. Then you know which one fits best in a particular project. Now you do have a choice as you have enriched your toolkit!

5. fear, our worst enemy

I can just quote this one, brilliant: "Fear-driven career planning is more likely to land you in a cubicle farm for the rest of your life than on the path to greatness. Sure, it’s safe, but it’s no fun."

6. be all-round

You will only be a specialist if you grasp the wider scope of the area you are working in. Programming in php? Take some time to set up an apache server with php and mysql. Working a lot with jQuery? Try prototype. You get the idea.

7. just do it

Don't wait for others to teach you something, go out and learn it yourself!

8. find a master

Finding a master can narrow down the wide scope of learning in this all too broad field of technologies. The author tells us how he was directed (btw, the book is full of great stories of the author's personal life, he rolled into software development being a musician!): "dive into directory services, get comfortable with a UNIX variant, and master a scripting language"

And remember this Zen proverb: "To follow the path, look to the master, follow the master, walk with the master, see through the master, become the master."

9. be a mentor

Teaching is a great way to learn. Writing a blog post is very useful to understand a topic. It forces you to master the stuff yourself and to formulate things well (writing skills). As the book states: "To find out whether you really know something, try teaching it to someone else.".

10. practice, practice and practice (discipline)

You are only going to master something putting in a lot of practice (time). Read something, code a bit, fail at it, improve, read something, etc.

Watch out for procrastination. Usually just starting something is enough.

And with self imposed constraints this works even better. I mentioned in a post on productivity the law of Parkinson: if you set tight deadlines you can increase your productivity. Why not applying it to learning. Can we do exercise x in y time?

11. start small

Have an accomplishment to report every day. Keep a diary (blog?). Accept that you are not that capable after one week, just accept you are better than yesterday.

Start slowly to keep you motivated. See also zen habits for more advice on this.

12. enjoy the ride

Focus on the present, not the goal itself, enjoy small victories you would miss chasing future goals. Live in the present. I enjoy as much the coding as the end result.

13. don't get comfortable

The more successful you are, the more likely you are to make a fatal mistake. Never get too comfortable, especially knowing that what you know today can become obsolete tomorrow. In this sector your cannot really afford to rest on your laurels.

According to the book, the best thing you can do is making yourself 'generally' useful. Never rely on one technology or company. Some skills you master, even your job, can become obsolete tomorrow, always look for ways to improve / enhance / expand your skill set.

14. market yourself

Contribute to an existing project, write a blog, create and share source code, be useful to an existing community.

You'd do this out of passion, as a hobby, of course, but indirectly you are promoting your work / skills / brand.

15. watch the market

The book mentions "alpha geeks", the ones that are always ahead of new technologies. They will talk early on about things that might become big news in the tech sector. Identify and follow their tweets and blog posts.

==

Share books

Let me know if you have read The Passionate Programmer or you'd like to after reading this post. You can also add it to My Reading List, a Facebook App I created to share interesting books.
==