I got tired from searching for song lyrics online while watching music videos on YouTube.
So I write this simple, yet extremely useful Chrome extension.

It’s called “Lyrics for YouTube™” and you can download it at the Google Chrome extensions gallery:
https://chrome.google.com/extensions/developer/detail/kggldhblikkmmnbkeococbeoaacgelkf

With one click of a button, the lyrics will appear right next to the music video, at a very natural fashion. This way, you have the playing music video and the song’s lyrics, in a beautiful side by side comfortable display.

Usage instructions – Click the extension’s icon and the song’s lyrics will magically appear right next to the video.

Search terms:

Background

Have you heard about Google’s latest service – Google Cloud Print?

It’s a cool service which allows you to print stuff from your home printer using any other computer in the world or even (and especially) mobile devices.

The service is still in beta, so right now you can only print through mobile devices with HTML5 compliant browsers which can access Google’s Gmail and Docs mobile version.
They claim that their next step is embedding this functionality in Chrome OS notebooks.

It kind of looks like they skipped over Google Chrome’s version.
That’s why I developed an extension for Google Chrome through which you may print using the Google Cloud Print service to any of your connected printers.

I encountered quite a few technical challenges while developing this extension. But I’ve overcome all of then and I’m proud to present the final outcome.
Everyone is welcome to download and study the extension’s source code.

Download

You may download the extension here: (A 5 star rating will be greatly appreciated :)
https://chrome.google.com/webstore/detail/ffaifmgpcdjedlffbhenaloimajbdkfg

What does the extension do?

The extension gives you the ability to print any doc/pdf/txt file, Gmail attachment, email or Google Docs document using Google Cloud Print™.

Screenshots

Here are some screenshots of the extension in action:

Some more screenshots people took I found on Flicker:
http://www.flickr.com/photos/nda/5411410871/
http://www.flickr.com/photos/nda/5411411069/
http://www.flickr.com/photos/nda/5411410263/
http://www.flickr.com/photos/nda/5411410395/
http://www.flickr.com/photos/nda/5411410871/
http://www.flickr.com/photos/nda/5412023376/

Instructions

Print a pdf/doc/txt/jpg/jpeg file

Navigate your way to the desired file and click the extension’s icon.

The icon will appear on the left side of the address bar only when the current tab’s URL ends with .pdf, .doc or .txt.

Print a Gmail attachment or email

Look for the “Print using Google Cloud Print” links (you can see where they are located in the screenshots).

Print a Google Docs document

Open a document and click File > Print using Google Cloud Print.

Demo Video

Here is a demo video of the extension in action (thanks to Digital Inspiration):

Changelog

Version 0.31 (5/3/1011)

Version 0.3 (15/2/1011)

Version 0.22 (10/2/1011)

Version 0.21 (9/2/1011)

Version 0.2 (7/2/1011)

Press

This extension has been broadly reviewed by bloggers and news sites:

Feedback

Please leave any feedback / suggestions you might have at the extension’s feedback forum (no registration needed):
http://printusinggooglecloudprint.uservoice.com

or in the comments section below, or by contacting me.

Learn more

About Google Cloud Print™:
http://www.google.com/support/cloudprint/
http://www.google.com/chrome/intl/en/p/cloudprint.html
http://code.google.com/apis/cloudprint/docs/overview.html

Search terms:

You can extract and view any Google Chrome extension’s full source code following the following easy steps.

Every Google Chrome extension is basically a CRX file. When you click the “Install” button on the Google Chrome extension gallery you are basically clicking a link of the extension’s CRX file.

The first step is downloading the extension’s CRX file. Instead of clicking it’s link, which will lead to that extension being installed on your browser, right-click the link and choose “Save link as…”.

Now that you have the CRX file on your computer, rename it’s extension from CRX to ZIP. Turns out that every CRX file is a renamed ZIP archive of the extension.

All there is left to do is extract the ZIP archive to the desired destination. The full code of the Chrome extension is there.

Have fun exploring other peoples code!

Search terms:

My brother and I developed a first person minesweeper game in 3D, using the UNITY game development platform. Give it a shot (click to play):

We’ve also built a Facebook application version of this game, available to play at:
http://apps.facebook.com/minesweeper-game/

Search terms:

I used WordPress’ get_the_post_thumbnail() function in order to output the current post’s featured image. It was great, until I had to link to the featured image. To do that, I needed the value of the SRC attribute of that IMG tag, i.e., the direct link to the featured image.

Thanks to phpxref, and the WordPress Codex, I managed to write a small useful function just for that. Without further ado, I present to you, the function:

function oy_get_direct_thumbnail_link( $post_id = NULL ) {
	global $id;
	$post_id = ( NULL === $post_id ) ? $id : $post_id;
	$src = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'full');
	$src = $src[0];
	return $src;
}

The first and only parameter ($post_id) is optional. If used inside the loop, it fetches the current post’s ID by itself.

Search terms:

I finished working on this project today, it took me about a day and a half to complete it. It looks super easy but as always there are issues that you encounter only during the development phase.

The service/application offers you six boxes in which you may type whatever you want. e.g. memos, notes, temporary data or tasks.

The data is saved within each keystroke one makes. It’s stored using the browser’s cookies.

Adding extra features always costs some of the simplicity of the application. And many people try to find the “right” balance. In this project, I decided to go to an extreme – super easy & no features. Some people may like it and some may not.

Here is my new personal homepage:
http://www.sixpacknotes.com/

Your feedback is welcomed.

box2d warningsWhen I started developing in flash using the Box2d physics engine, I had this problem which held me back for a couple of hair pulling hours. So I thought, why not spare other people from this misery?

The Problem’s Symptoms

If you encountered any of these error messages when compiling a Box2d flash project:
b2World.as, Line 871 - 1046: Type was not found or was not a compile-time constant: Vector. - public function RayCastAll(point1:b2Vec2, point2:b2Vec2):Vector.
b2World.as, Line 917 - Warning: 3590: void used where a Boolean value was expected. The expression will be type coerced to Boolean. - return (m_flags & e_locked) > 0;
Input.as, Line 155 - Warning: 3590: void used where a Boolean value was expected. The expression will be type coerced to Boolean. - mouseReleased = !e.buttonDown;
Input.as, Line 189 - Warning: 3590: void used where a Boolean value was expected. The expression will be type coerced to Boolean. - return (keyState[k] > 0);
Input.as, Line 199 - Warning: 3590: void used where a Boolean value was expected. The expression will be type coerced to Boolean. - return (keyState[k] == 1);
Input.as, Line 208 - Warning: 3590: void used where a Boolean value was expected. The expression will be type coerced to Boolean. - return (keyState[k] == -1);
Input.as, Line 217 - Warning: 3590: void used where a Boolean value was expected. The expression will be type coerced to Boolean. - return (keyBuffer[i][0] == k && keyBuffer[i][1] <= t);
1046: Type was not found or was not a compile-time constant: b2PolygonDef. - var the_box:b2PolygonDef;
1067: Implicit coercion of a value of type Box2D.Collision:b2AABB to an unrelated type Box2D.Common.Math:b2Vec2. - the_world=new b2World(environment,gravity,true);
1137: Incorrect number of arguments. Expected no more than 2. - the_world=new b2World(environment,gravity,true);
1178: Attempted access of inaccessible property m_sprite through a reference with static type Box2D.Dynamics:b2DebugDraw. - debug_draw.m_sprite=debug_sprite;
1178: Attempted access of inaccessible property m_drawScale through a reference with static type Box2D.Dynamics:b2DebugDraw. - debug_draw.m_drawScale=30;
1178: Attempted access of inaccessible property m_fillAlpha through a reference with static type Box2D.Dynamics:b2DebugDraw. - debug_draw.m_fillAlpha=0.5;
1178: Attempted access of inaccessible property m_lineThickness through a reference with static type Box2D.Dynamics:b2DebugDraw. - debug_draw.m_lineThickness=1;
1178: Attempted access of inaccessible property m_drawFlags through a reference with static type Box2D.Dynamics:b2DebugDraw. - debug_draw.m_drawFlags=b2DebugDraw.e_shapeBit;
1180: Call to a possibly undefined method b2PolygonDef. - the_box = new b2PolygonDef();
1061: Call to a possibly undefined method CreateShape through a reference with static type Box2D.Dynamics:b2Body. - final_body.CreateShape(the_box);
1061: Call to a possibly undefined method SetMassFromShapes through a reference with static type Box2D.Dynamics:b2Body. - final_body.SetMassFromShapes();
1046: Type was not found or was not a compile-time constant: b2PolygonDef. - var the_box:b2PolygonDef;
1180: Call to a possibly undefined method b2PolygonDef. - final_body.CreateShape(the_box);
1061: Call to a possibly undefined method SetMassFromShapes through a reference with static type Box2D.Dynamics:b2Body. - final_body.SetMassFromShapes();
1136: Incorrect number of arguments. Expected 3. - the_world.Step(1/30, 10);
Warning: 3590: Box2D.Common.Math:b2Vec2 used where a Boolean value was expected. The expression will be type coerced to Boolean. - the_world=new b2World(environment,gravity,true);
1046: Type was not found or was not a compile-time constant: b2World. - public var the_world:b2World;
1046: Type was not found or was not a compile-time constant: b2AABB. - var environment:b2AABB = new b2AABB();
1046: Type was not found or was not a compile-time constant: b2Vec2. - var gravity:b2Vec2=new b2Vec2(0.0,10.0);
1046: Type was not found or was not a compile-time constant: b2DebugDraw. - var debug_draw:b2DebugDraw = new b2DebugDraw();
1046: Type was not found or was not a compile-time constant: b2Body. - var final_body:b2Body;
1046: Type was not found or was not a compile-time constant: b2BodyDef. - var the_body:b2BodyDef;
1046: Type was not found or was not a compile-time constant: b2PolygonDef. - var the_box:b2PolygonDef;
1180: Call to a possibly undefined method b2AABB. - var environment:b2AABB = new b2AABB();
1180: Call to a possibly undefined method b2Vec2. - var gravity:b2Vec2=new b2Vec2(0.0,10.0);
1180: Call to a possibly undefined method b2World. - the_world=new b2World(environment,gravity,true);
1180: Call to a possibly undefined method b2DebugDraw. - var debug_draw:b2DebugDraw = new b2DebugDraw();
1120: Access of undefined property b2DebugDraw. - debug_draw.m_drawFlags=b2DebugDraw.e_shapeBit;
1180: Call to a possibly undefined method b2BodyDef. - the_body = new b2BodyDef();
1180: Call to a possibly undefined method b2PolygonDef. - the_box = new b2PolygonDef();
1046: Type was not found or was not a compile-time constant: b2Body. - var final_body:b2Body;
1046: Type was not found or was not a compile-time constant: b2BodyDef. - var the_body:b2BodyDef;
1046: Type was not found or was not a compile-time constant: b2PolygonDef. - var the_box:b2PolygonDef;
1180: Call to a possibly undefined method b2BodyDef. - the_body = new b2BodyDef();
1180: Call to a possibly undefined method b2PolygonDef. - the_box = new b2PolygonDef();
1172: Definition Box2D.Dynamics could not be found. - import Box2D.Dynamics.*;
1172: Definition Box2D.Collision could not be found. - import Box2D.Collision.*;
1172: Definition Box2D.Collision.Shapes could not be found. - import Box2D.Collision.Shapes.*;
1172: Definition Box2D.Common.Math could not be found. - import Box2D.Common.Math.*;

I have the solution.

Possible Causes

There are two main causes for these type of errors:

  1. The Box2d code you are compiling doesn't match the Box2d source files' version.
  2. Flash can not locate the Box2d engine source files.

Version Difference

Personally, I first encountered the first cause. As it seems, when the Box2d guys updated their SVN and downloads for the latest version (for the time writing this post: 2.1 alpha aka 2.1a), they forgot to also update their code samples. So if one downloads the latest version and tries to compile the example projects, it simply won't work. Instead, flash will throw some of the errors listed above.

In addition, all of the online resources and tutorials regarding Box2D don't work with the latest Box2D version. I have yet to find an article or a code sample that works flawlessly with the latest version. They really rewrote major parts of the engine thus making lots of code (if not all) incompatible.

Missing Box2D files

The second cause is also very common. When compiling any project which uses the Box2d physics engine, Abobe must be able to find the needed Box2d source files. Adobe Flash looks for the files in the projects directory (is our case, for a Box2D subdirectory), and at the locations which one can specify in the preferences menu.

The Solutions

These solutions have solved my problems. If these won't help you, or if you have a better solution that you'd like to suggest - comment below.

Version Difference

As I've mentioned before, the examples in the latest Box2D download don't match the correct version and almost any code sample you will find online won't work with the latest version of Box2D.

Visit their full download page which contains all previous versions and download version 2.0.2. All the examples work great in this package. And any other code should also work using this version.

Missing Box2D files

Many times, Adobe Flash (also Flash Develop and any other Flash IDE) won't find the correct Box2D directory to use. As a result it will throw those errors.

To fix this, you have two options:

  1. You can simply copy the correct Box2D source folder (a folder named Box2D) to the directory of your project. For instance, if your project lies under C:\projects\box2d-demo\demo.fla, you will need to copy the Box2D folder there. In the end the Box2D folder should lie at C:\projects\box2d-demo\Box2D.
  2. The second option is to inform your IDE about the location of your Box2D folder. I use this option and I store my Box2D directory at C:\Documents and Settings\Oren Yomtov\My Documents\FlashUtilities\Box2D.

    To inform your IDE, follow the following steps:

    In Adobe Flash:

    1. Open your project in Adobe Flash.
    2. Navigate to "Edit->Preferences...".
    3. Click the "ActionScript" tab/category.
    4. Click the "ActionScript 3.0 Settings..." button.
    5. Click the "Browser To Path" (folder/cross icon) button under "Source path:".
    6. Browse to the folder which contains the Box2D folder and click "OK".
    7. Click "OK" twice to save the changes.

    In Flash Develop (If you use it):

    1. Open Flash Develop
    2. Navigate to "Project->Settings..."
    3. Click the "Classpaths" tab.
    4. Click the "Add Classpath..." button.
    5. Browse to the folder which contains the Box2D folder and click "OK".
    6. Click "OK" to save the changes.

    NOTE: If you use both, you will need to configure both.
    Do not browse directly to the Box2D folder. Instead, browse to it's parent folder.

Now recompile your code and it should all work.

By the way, if you are looking for video tutorials on the Box2D engine - check out Todd's great videos. They are very detailed and fun. Good luck.

Search terms:

Last month I participated in two amazing events. The first one is The Big Geek and is considerably similar to the second event called Startup Weekend. They both took place in Israel.

The Big Geek II

BigGeek 2 Logo

Startupseeds

StartupSeeds
This event was organized by StartupSeeds, a non-profit organisation encouraging teen Israeli entrepreneurs to make their first steps in the entrepreneurship world. Whether it’s by giving them a place to talk about technology, or by conducting monthly meetings with the most interesting lectures (for free!). StartupSeeds even assists young innovative kids with starting their own startups by providing them financial help and the best mentors available. The online forum and meetings created a large and friendly community for the Israeli teenager who breaths technology and internet.

What’s the event about?

Sixteen kids (Ages 14-18), divided into four “teams”, worked 24 hours non-stop on their unique idea for a startup. Each team raised a fully working service within those 24 hours (!). While the projects are not breath-taking nor unbelievable, they are still awesome considering the time spent working on them. Actually, they’re awesome not matter what.

FixedInch
The project that my team and I developed is FixedInch. It’s a free online service for displaying objects in their real size over any screen in the world. We have discussed the possibility to continue working on it, and we most likely will, in the near future.

What else can I say? It was an awesome experience that I will never forget. It was 24 hours of fun and jokes, some of could not be told anywhere else like (via @TalDromi):

“Let’s use JSON for this”
“Who’s this Jason you are talking about?”
“XML’s brother!”

View photos from the event

Startup Weekend Israel 2009

Startup Weekend Israel

This is a world-wide known event, which started in 2007. Since then it took place in over 50 cities and growing (!). This is kind of a grown-up version of the Big Geek.

During the first day, 140 Israeli entrepreneurs pitched 50 unique ideas which turned into thirteen motivated teams. Each team consisted of about 4-8 people who designed and developed their idea for three days. The second day was all about work and food (lots of it!). On the third day of the event, the teams finished their work and presented their project.

Frayer Meter
My team and I worked on Frayer Meter – an online free service that suggests the most economical cellular plan according to one’s needs. While it’s not fully functional, we plan to continue working on it as we believe in it’s potential.

NOTE: If you don’t know Hebrew, feel free to use Google Translate when visiting links from this post.

Search terms:
31.10.2009

Lately, a fellow web developer of mine asked me why can’t he manage to save the current time in a MySQL table. The problem was that he didn’t understand how the PHP timing mechanism works. That’s why I decided to write this article.

Working with PHP is easier than most people originally think. It is after all the general purpose scripting language used in web development. Once you understand the basics like time managment and databases, you can very easly produce dynamic web paging using it. Before you even consider setting up a webpage, it must be a priority to understand the basics of PHP. Hopefully you will find the following helpful and informative.

time() and date()

time()

The time() function receives no parameters and returns the current time measured in the number of seconds since January 1 1970 00:00:00 GMT.
This may sound a bit weird but I find it to be clever.

Because one doesn’t want to display dates and times in PHP as a very long number (e.g. “The current time is 1256702873″), the date() function was created.

date()

The date() function returns a string formatted according to the given format parameter.

The function is documented as follows:
string date ( string $format [, int $timestamp ] )
While I prefer to think of it as:
string date ( string $format [, int $timestamp=time()] )
If you don’t pass the second parameter, it uses the time() function instead.

Lets see a couple of examples:
<?php
// Assuming today is March 10th, 2001, 5:16:18 pm, and that we are in the
// Mountain Standard Time (MST) Time Zone

$today = date("F j, Y, g:i a"); // March 10, 2001, 5:16 pm
$today = date("m.d.y"); // 03.10.01
$today = date("j, n, Y"); // 10, 3, 2001
$today = date("Ymd"); // 20010310
$today = date('h-i-s, j-m-y, it is w Day'); // 05-16-18, 10-03-01, 1631 1618 6 Satpm01
$today = date('\i\t \i\s \t\h\e jS \d\a\y.'); // it is the 10th day.
$today = date("D M j G:i:s T Y"); // Sat Mar 10 17:16:18 MST 2001
$today = date('H:m:s \m \i\s\ \m\o\n\t\h'); // 17:03:18 m is month
$today = date("H:i:s"); // 17:16:18
?>

I don’t want to get into the format parameter in this post, but you can read all about it at the PHP manual.

Saving the time in a MySQL Database

The wrong way

My friend was using some sort of a special “date”/”time”/”timestamp”/”datetime” column type because he didn’t know what he was getting from the time() function.
This is not the way to store the result from time(). While it may be useful in certain circumstances, I’d rather save the number of seconds since January 1 1970 00:00:00 GMT for later easier manipulation with PHP.

The right way

All you need to do is use a simple INT or BIGINT column type to store what you get from your time() call.
In order to display it, use the date() function, passing it as the second parameter.

Search terms:

A theme consists of many files, this can get very confusing very fast. What files are needed? What files runs when and why? Here are the explanations and tips about WordPress template files.

First things first, what is a template exactly? A template is a PHP file that is a part of a theme. For example, there is a template for displaying the home page, one for displaying pages and another one for displaying posts.

What Are The Existing WordPress Tempaltes?

Here is a list of the existing WordPress templates that can be used in themes:

Here is a very useful image provided by WordPress Codex (click to enlarge):

WordPress Template Hierarchy

Custom Templates

There are two main types of custom WordPress templates.

The first one are templates that WordPress looks for automatically, and if one is found it will be used. What the heck am I talking about?
If you have a category called “News” with the ID of 512 and you want the archive page of that category to have it’s own unique template you can create a new template file called category-512.php in the theme’s folder. And WordPress will use it.

This is the list of custom wordpress templates you can use:

WordPress Custom Template Drop Down

Now for the second type of WordPress custom templates.

Let’s say you have more then one page* you want to be displayed in a different way then the others. How do you do that?
Create a new file called whatever.php at your theme’s folder and inside write whatever you want instead of single.php or index.php (depending what displays the single posts at your theme).
Add this comment to the top of the file:

<?php
/*
Template Name: The Whatever Template Yo
*/
?>

(Of course change The Whatever Template Yo to the new template’s name)

Now edit (or create) the pages which you want to use this template and in the right side pick the desired template from the drop down menu. Just like in the screenshot at the right side.

*If you want to do this for posts rather then pages then you will find the Custom Post Template plugin very useful.

Any questions/corrections? Comments are always welcome.

Search terms:

Next Page »