Drill & Drill Co.

We, at Bubble Boy, just released a new game for Android smartphones:

Your mission: to drill into the deepest layers of the Earth. How deep can you go?

Download link (from Google Play):
https://play.google.com/store/apps/details?id=com.BubbleBoy.Drilldrillco

Aventura das Palavras

Já conhecem a "Aventura das Palavras"?

A Aventura das Palavras é uma aplicação (app, se preferirem) para dispositivos android, feita por mim e pelo meu compincha João Caleia Rodrigues. É uma app pedagógica/didáctica/educativa para crianças entre os 6 e os 10 anos treinarem a leitura.

É esta a descrição que consta na Play Store:

A "Aventura das Palavras" ajuda as crianças a treinar, de forma divertida, as competências implicadas na leitura, como a correspondência grafo-fonética (correspondência letra-som), fusão fonética e fusão silábica, trabalhando vários tipos de sílabas (das mais fáceis às mais difíceis) e os casos especiais da Língua Portuguesa.

Façam download, avaliem a aplicação, façam reviews. Façam-nos ricos com esta aplicação... totalmente gratuita.

Link para download: https://play.google.com/store/apps/details?id=com.bubbleboy

Nota: No momento de edição deste post, a Aventura das Palavras encontra-se na lista "trending apps" na Play Store portuguesa:

The ZX Spectrum turns 30 years old today.

Here's my homage to it.

Spectrum Nostalgia, a set on Flickr.

Open letter to Microsoft about Silverlight. I mean Flash. I mean Silverlight.

Dear Microsoft,

Recently you announced you will support Silverlight applications in your new, to be released, Windows Phone 7 series operative system. That’s great news.

Yesterday you announced a bunch of new products: Visual Studio 2010, .NET 4.0, Silverlight 4. Once again, great news.

Yesterday you also announced and a new mobile phone named KIN. Sadly it won’t support Windows Phone 7 yet, since the OS is not to be released before the holiday season.

Curious about the KIN, I browsed to its official site www.kin.com. Cool site, teenager oriented, lots of Flash animations and interactivity.

Wait, did I say Flash? No, it’s got to be Siverlight of course. Let me just check.

(… me browsing…)

Dear Microsoft,

Being a mature company as you are, I noticed you use Flash technology in some of your sites (specifically the KIN and the XBox web sites). Does this mean that we should be using it in our sites if we want to be successful too?

Thanks in advance.

Yours truly,

Tiago

CSS Style <input type=”file”> tags

Inputs of type=”file” are probably the hardest tags to style in html. Due to security issues browsers don’t allow you to change it too much.
Of course we have tricks but since each browser makes its own implementation of the control (and it’s poorly documented stuff) the tricky part is to find something that works for all browsers.
If you google for it you’ll find a few tutorials that are hard to understand and use too much javascript, jquery and css.
I found a relatively simple way to achieve this and I’ll try to make it easy to understand. It goes in 4 steps.
STEP 1 – Create a text box and a input “type file”
Start with a textbox and a div with a input “type file” inside of it. The div should be the size of the “browse…” button that you want to use.
The only tricky part for now is the overflow property in the css class of the div being set to hidden. That causes the overflowing content of the div to be hidden from sight. See it in the screenshot.
html:

<input id="fileName" class="file_input_textbox" readonly />
 
<div class="file_input_div">
  <input type="file" />
</div>

css:

.file_input_textbox
{
 float: left
}

.file_input_div
{
  position: relative; 
  width: 100px; 
  height: 23px; 
  overflow: hidden;
}

screenshot:

STEP 2 – The fun part: oversize the input  “type=file”
Now we have to make the button part of the input “type=file” show in the div and completely fill it. Aligning it to the right is now enough because the different browsers act differently in this case.
So, the big trick in this tutorial? Oversize the control. How? Just set its font size to an absurd size (probably 30px will be enough, though).
html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

<div class="file_input_div">
  <input type="file" class="file_input_hidden"  />
</div>

css:

.file_input_hidden
{
  font-size: 23px; 
  position: absolute; 
  right: 0px; 
  top: 0px; 
  opacity: 0; 
}

screenshot:

STEP 3 – Make the input “type=file” invisible and put your customized button behind it.
Making the file input invisible doesn’t mean that you cant click it. So, make it invisible, put a customized button behind it.
That way, you will see your customized button but when you click it, you will in fact be clicking the real (invisible) browse button (the one that is oversized, overflowing, over the customized button, remember?)
You can customize your browse button by changing the “file_input_button” css class.
html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 
<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" />
</div>

css:

.file_input_button
{
 width: 100px; 
 position: absolute; 
 top: 0px;
 background-color: #33BB00;
 color: #FFFFFF;
 border-style: solid;
}

.file_input_hidden
{
 font-size: 45px; 
 position: absolute; 
 right: 0px; 
 top: 0px; 
 opacity: 0; 
 
 filter: alpha(opacity=0); 
 -ms-filter: "alpha(opacity=0)"; 
 -khtml-opacity: 0; 
 -moz-opacity: 0;
}

screenshot:

STEP 4 – Final step: Fill the text box with the name of the selected file
If you tried the previous steps, will have noticed that after you select a file, nothing shows in the text box. That’s because the file name is indeed being written in the hidden input “type=file”.
So, in this final step you shall add a simple javascript instruction to the onchange event of the input “type=file” tag. That instruction copies its value (the filename) to the text box.
html:

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 
<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>

And… voilá. It should be working. I’ve tested it in Firefox 3, IE6, IE7, IE8, Opera 10, Chrome 3 and it worked perfectly in all of them.

The complete solution
So, here is the complete code (css and html all in one):

//css
.file_input_textbox
{
 float: left
}

.file_input_div
{
 position: relative; 
 width: 100px; 
 height: 23px; 
 overflow: hidden;
}

.file_input_button
{
 width: 100px; 
 position: absolute; 
 top: 0px;
 background-color: #33BB00;
 color: #FFFFFF;
 border-style: solid;
}

.file_input_hidden
{
 font-size: 45px; 
 position: absolute; 
 right: 0px; 
 top: 0px; 
 opacity: 0; 
 
 filter: alpha(opacity=0); 
 -ms-filter: "alpha(opacity=0)"; 
 -khtml-opacity: 0; 
 -moz-opacity: 0;
}

 
//html
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
 
<div class="file_input_div">
  <input type="button" value="Search files" class="file_input_button" />
  <input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>

There. I hope it works for you as well as it did for me. If you find it doesn't work that well, feel free to let me know.

And if you like playing android games, why not check my new game "Up Up n' Roll Away" in the Play Store:
https://play.google.com/store/apps/details?id=com.BubbleBoy.UpUpRollAway

Best Practices for Web Forms Design

Here’s a great document by Luke Wroblewski concerning Web Forms Design theory:

http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Ever wondered if you should right or left align your fields’ labels? If you should put your labels on top of the fields, etc? It’s all there with lots of screen shots.

A Tip for Canon G10 Owners: get around The 1 Second Aperture priority Mode Limitation

If you have a Canon G10 and like to shoot in Aperture Priority (Av) mode, you’ve probably become aware that the camera limits the shutter speed to 1 second, max.

That’s quite a limitation for a nice camera like the G10.

Anyhow, there’s a little workaround (or at least something that’ll be enough for most of us, proud owners of a G10).

The trick can be found here (you should read it for details):

http://g10tipstricks.blogspot.com/2009/01/getting-around-canon-g10s-1-second-av.html

Basically it consists in 3 steps:

1. Change your mode to Shutter Speed (Tv) priority  (weird, I know, but keep reading)
2. Point your camera to your subject and take a quick meter reading (press that asterisk button in your camera)
3. Rotate the control ring. The LCD will display a dual meter (aperture and shutter speed) which you can change according to you criteria
4. Take your shot

Although not exactly what you were looking for, it’s still a pretty nice cool workaround, don’t you think?

Getting GPS Coordinates from Google Maps, The Easy Way

It’s a pain in the ass every time you need to get the GPS coordinates from a location in google maps, right? You’ll find yourself “googling” about methods that will do the trick (hopefully you’ll land in this page) like pasting javascript in your address bar or installing just another extension in your firefox.

You’ll probably do it every time you need it because you don’t remember the trick you used last time. I find it hard to remember complicated javascript sentences or the name of that specific extension too, don’t worry.

Well, I found an easy way to get your gps coordinates easily, in 2 steps. And I have pictures of it, too :-)

Step 1. Go to google maps and find the location you desire. Right click the exact location you need and select the option “What’s here?”:

Step 2. Click the green arrow (not the red indicator) to get your GPS coordinates:

Voilá.

Gameboy is 20

Gameboy is celebrating it’s 20th birthday today.

Benj Edwards from www.vintagecomputing.com published an article in arstechnica taking a look at the top 6 reasons why gameboy was so successful:

Happy 20th b-day, Game Boy: here are 6 reasons why you're #1

The top reasons he pointed out are:

1. Tetris
2. Battery Life
3. The Nintendo Brand
4. Price
5. Pokémon
6. Flexibility

I think he could have merged points 1 and 5 into one called “Great games” but read his explanations. They kind of make sense.

Oh, well, I think I’ll have to spend the next few days looking for a nice and cheap Gameboy Advance on eBay. There goes my “try not to buy fun but useless things” new year’s resolution.

Well, maybe not useless…

Can be fun, you know?…

And useful when in a doctor’s waiting room.

And on the train.

Quick Reference Cards

Here’s a short list of some quick reference cards that I keep in my bookmarks. It’s good if you’re someone like me always shifting between languages like javascript, c#, xml, xslt, vb6, vb.net, pl/sql, t-sql, etc., etc#, etc++, and keep forgetting some syntax details:

• Core C# and .NET Quick Reference
• JavaScript Card
• .NET Quick Reference Card
• XML Schema DataTypes
• Regular Expressions for JavaScript
• XML Schema Structures
• JavaScript Quick Reference Card
• Oracle PL/SQL Quick Reference
• Visual Basic 6 Quick Reference

And here’s a nice link with a few Quick Ref Cards:

• Quick Reference Cards