Tiago Epifânio Tech Blog

Bom Bandido

2016-11-15T16:48:00.004+00:00

Recentemente, eu e o João Mateus (@joaodavidmateus) criámos o Bom Bandido, um site onde partilhamos coisas que achamos importantes, interessantes, engraçadas ou simplesmente parvas.

Apareçam por lá, subscrevam, ou sigam-nos nas redes sociais:

WWW: https://bombandido.com

RSS: https://bombandido.com/feed/

Twitter: https://twitter.com/bombandido

Facebook: https://www.facebook.com/bombandido

Sushi Sutory

2016-10-31T15:26:00.000+00:00

Bubble Boy Games is proud to announce a new mobile game: “Sushi Sutory”.

It features:

Colorful cartoony graphics.
Lot’s of stuff to unlock.
Addictive gameplay.
Cool bonus games.

Checkout some of the in-game screens:

Jump, sushi, jump

Colorful graphics

Play fun bonus games

Play bonus game “Soy Catcher Extreme” to earn extra soy

The game is available at Google’s Play Store (will be available for iOS very soon):
https://play.google.com/store/apps/details?id=com.Bubble.SushiSutory

Retromania - Novo portal de "retro gaming"

2015-07-07T11:11:00.001+01:00

Retromania é um novo portal português onde serão divulgadas as notícias mais revelantes do mundo do "retro gaming" e "retro computing" em português. Spectrums, Commodores, Ataris, Nintendos, Segas... está tudo lá:

http://www.retromania.pt

Neste site, existe ainda um fórum onde os mais aficionados podem trocar ideias, ajudar ou ser ajudado, partilhar novidades, etc:

http://www.retromania.pt/forum

Android game: Up Up n' Roll Away

2015-06-14T22:05:00.001+01:00

We just released a new game for android: Up Up n' Roll Away.

It's is a "minimalist" game where you can test your precision skills.
Power up the ball, release in the right moment and you will get to the next platform.
The sky is the limit.
... be the ball...

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

Here's how the game looks:

Drill & Drill Co.

2015-05-22T11:29:00.002+01:00

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

2015-04-22T15:53:00.002+01:00

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.

2012-04-23T10:11:00.001+01:00

Here's my homage to it.

Spectrum Nostalgia, a set on Flickr.

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

2010-04-14T11:11:00.001+01:00

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

2010-01-21T00:31:00.001+00:00

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

2010-01-15T00:25:00.000+00:00

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

2009-10-26T23:46:00.001+00:00

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:

Change your mode to Shutter Speed (Tv) priority (weird, I know, but keep reading)
Point your camera to your subject and take a quick meter reading (press that asterisk button in your camera)
Rotate the control ring. The LCD will display a dual meter (aperture and shutter speed) which you can change according to you criteria
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

2009-10-26T23:23:00.002+00:00

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

2009-04-21T22:25:00.000+01:00

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:

Tetris
Battery Life
The Nintendo Brand
Price
Pokémon
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

2008-11-15T13:27:00.003+00:00

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:

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

Quick Reference Cards

Stop writing www and .com

2008-10-18T19:06:00.005+01:00

I’ve been using this shortcut for a while, and recently I became aware that almost no one is using it.

If you’re entering an address in your browser and it starts with www and ends with .com, you can avoid writing it completely. For instance, if you want to navigate to youtube, just write youtube in your browser and then hit CTRL+ENTER. Your browser will auto-complete the address (http://www.youtube.com).

I’ve tried it with Internet Explorer 7, Firefox 3, Chrome and Safari. It works in every browser.

Car Record Player

2008-07-25T15:39:00.001+01:00

Earlier today at work, we were chatting about old audio players and I happened to say that once there were in-car record players. Yes, record players. Everyone laughed at me and thought that I had gone completely insane. Of course everybody in this industry is in the process of going mad but I still have a few years of sanity to enjoy... 2 at least. Maybe less after I finish this post.

Well, here it is, behold the Chrysler Highway Hi-Fi:

And here is a video of the Philips Car Record Player:

Watch it, Kenwood, you never know... Philips may be planning a retro comeback with this hi-tech gadget.

I'm also starting to consider trading my Creative Zen 16GB with this useful portable player. I'll have to carry a backpack with 30kg worth of vinyl discs, though.

Virtual Water

2008-03-25T17:33:00.001+00:00

Professor John Anthony Allan (University of London), the Inventor of the Virtual Water concept, was awarded the 2008 Stockholm Water Prize last week.

I had never heard of this concept but it's very interesting. It is a method of calculating the amount of water spent in the production of certain products, particularly food products.

Did you know, for instance, that it takes 140 liters of water to produce a cup of coffee? (this is a calculation based on the water that was consumed to grow, produce, package and ship the coffee beans). That is the same amount of water that is consumed daily by a person in England by drinking, bathing, cooking, etc.

Take a look at these links:

http://www.reuters.com/article/inDepthNews/idUSL1850227220080319

http://www.worldwatercouncil.org/index.php?id=866

Head Tracking for Desktop VR Displays using the Wii Remote

2008-03-10T16:02:00.002+00:00

I just saw this video and I had to share it.

This guy, Johnny Lee, has been developing very interesting projects with the Wii Remote. His last project, shown in this video, is a head tracking system which creates a very interesting 3D experience. Just see it.

Don't forget to check Johnny Lee's website and blog.

Online Javascript Formatter

2008-02-08T11:32:00.001+00:00

Every now and then I need to format some javascript code that I find online.

I have been using this online javascript formatter. It's simple and it usually fills my needs.

How to make sexy buttons with CSS

2008-02-06T10:10:00.001+00:00

I just found this article on how to make sexy buttons with round corners with CSS. It's a little hard to customize your own buttons but if you comprehend how they work, you can do it.

New blog address

2008-01-26T18:48:00.000+00:00

Finally I've changed my blog's address. You're already reading the new one :-)

The Atom/RSS feed has a new location too:

http://feeds.feedburner.com/tiagoe

The old posts will remain in the old location as well as in the new one. I will have the old blog redirect the users automatically to the new one. That way I will not have broken links.

In a future post I will discuss the steps I've made to change blog's address without loosing anything.

The old feed will not be updated, though. You should update your feed reader.

The translation of Buzz! The Mega Quiz

2008-01-14T14:18:00.001+00:00

Last birthday I was offered a game for my Playstation 2... Buzz!™ The Mega Quiz. It's a very nice Quiz game where you can play with up to 8 player with these funny controllers that they call the "Buzz! Buzzers".

It's a very fun game to play at home parties. The game/show is hosted by Buzz who is voiced (in the Portuguese version) by a famous Portuguese TV show presenter.

The game is composed by a few different rounds where you try to answer the question correctly and, hopefully, faster than your opponents.

There's a round that's called the Globetrotter. In this round you're supposedly traveling around the world and have to answer questions about the country you're in. The player that answers correctly has to choose the next destination.

The other day I was playing this game and I had to choose the next destination, so I chose Peru. I was surprised by the fact that the plane didn't go to Peru... it went to Turkey...

Why did the plane go to Turkey? Why is this funny? Well, in Portuguese, Peru is also a word... the name of an animal. Which animal? The Turkey!!! For some reason, the translators translated the word Peru when it was supposed to be the name a country.

Anyway, I'm still having fun playing Buzz. And it's extra fun every time I choose to go to Peru.

Didn't you find this funny? Well, I wouldn't too. It's just that I haven't posted anything for a while and was fearing you'd forget about me. Geez, this just got worse, right? Buzz, turkeys and trying to be funny. What's next? One day I will be photographing myself playing violin on a laptop. I will then be doomed.

The ultimate solution to blogging source code

2007-12-20T16:56:00.001+00:00

Finally Mário Romano found the answer to the Ultimate Question of Life, the Universe, and Everything. Well... not quite but he found a great solution to the question "how do I post source code in my blog posts". Find it here:

pre {
  background-color:#FCFBF8;
  border-color:#CCCCCC;
  border-style:solid;
  border-width:1px 1px 1px 2px;
  line-height:1.2em;
  margin:1em auto;
  overflow:auto;
  padding:1em;
  width:90%;
  word-wrap:normal; /* IE Fix */
}

And by the way, the answer to the Ultimate Question of Life, the Universe, and Everything is 42.

How to exclude your own visits from Google Analytics and ClustrMaps

2007-11-19T12:12:00.001+00:00

After a 5 minute Google (re)search I found a few ways to exclude my own visits to my sites/blog from the Google Analytics and ClustrMaps reports.

Google recommends two ways of doing this:

Creating a filter that excludes your IP address from the reports
Installing a cookie in your browser and creating a filter that excludes your visits from the reports

I don't find the first option very useful because I don't use static IP addresses.

As for the other option, I really didn't try that. Google doesn't explain very well how to do it and I didn't have the patience to explore that option.

Another downside of both of these options is that they require that you edit your html. OK, that's not really a problem but when you're managing a blog, you don't want to mess with your HTML too much.

I found an easier approach in here:

Use AdBlock Plus to block communication with Google Analytics and ClustrMaps.

These are the addresses I had to block:

http://www.google-analytics.com/urchin.js
http://www3.clustrmaps.com/counter/index2.php?url=http://(enter your address here)

Don't forget to disable the Collapse blocked elements option in AdBlock. If you don't disable that option, you won't be able to see the link to you ClustrMap (Adblock simply doesn't show anything).

[Update]

Ok, there's a problem with the approach I described for Google Analytics: It will block the analytics scripts of other sites you open (including your friends' blogs).

To fix this you have to... well, change the HTML of your site :-D

In your HTML find the following tag:

and replace with:

I added the #url=http:(replace with your site url) which in fact doesn't do anything when getting the script from the server but allows us to setup AdBlock to block this URL.

Next, you have to setup AdBlock to block only http://www.google-analytics.com/urchin.js#url=http://(replace with your site url) instead of the late http://www.google-analytics.com/urchin.js.

input image objects not found in form.elements

2007-11-08T22:44:00.001+00:00

Imagine you write the following javascript sentence in an html page:

self.document.forms[0].elements

That will give you all the elements inside the first form (forms[0]) in the current page, right? Well, no. For some reason, if you have an input of type image (<input type="image">) in the form, that element will not be in the forms[0].elements object.

Every other input (button, text, select, submit, ...) will be in the elements object, but do not expect to find image type inputs. I've tried that in IE and Firefox unsuccessfully.

(If you don't know what an input of type image is, well it's behaviour is the same as the submit inputs but instead of a button, the user is presented with an image.)

So, how do we solve this? Well, instead of using:

self.document.forms[0].elements

we have to use the following:

self.document.all

Of course, that way, you will get a list of all the elements in the current page instead of all the elements in a form but you will find the inputs of type image in there, for certain.