Widget coding: Google Translator

google translatorIt’s been a while since I’ve worked on the widgets that I submitted to Opera Widgets. So I spent the last few days in my spare time just working on one of my most popular widgets…Google Translator. For the longest time it was handy, but not very well designed and the layout was poor…just a quick solution.

If you do translations from time to time or even often then you may find my widget very useful! You can convert text to and from many different languages and even web pages. The translations are done using ajax in the widget to fetch results from Google’s Translate service.

This widget, which is currently only available through Opera and Opera Widgets, happens to be a very popular widget and downloads count some where near ~82,000 at the moment.

I just uploaded version 2.1 yesterday, but the Opera team has to inspect the widgets to make sure there are no problems or possibly fraudulent activities going on in the background (kind of annoying since they don’t go live immediately and end up taking days, but worth the security).

Anyways, v2.1 included several improvements over the previous 1.42 (a.k.a. 2.0). An update notification is now included, the tabs are redesigned to match Gmail’s design a little closer, jQuery effects are now tied into the widget to make it more aesthetically pleasing to the eye, options were moved from a sloppy and quick side panel to the footer of the widget and can be toggled on and off, a more menu was added to pack in several more features that didn’t fit anywhere else (similar to Gmail’s more menu), useless images that could be replaced with css have been removed and a stylesheet has taken the burden off of inline styling which was never intended to be permanent..but a quick way to get the layout fixed right.

There are actually many many more changes and if you want to see a list then you can take a look at the changelog here.

I actually went above and beyond v2.1 almost immediately after publishing it. After creating a stable version (2.1) it was time to push the widget further, so v2.2 has many more fixes and updates. Optimizations are in progress and going well to reduce wasted code and duplicate elements that are not needed. There is actually a “Beta” version of v2.2pre1 on my Google Translator site. You can go a head and check it out if you want and see some of the updates from 2.1. It should be stable enough to use, but it’s not finalized just yet. 😉

Anyhoo, just wanted to update everyone who reads my blog! Hope you’re all using Opera or at least gave it an honest run. 😉 It’s a great browser, but sometimes you just can’t break away from the chains that tie you to another piece of software (most of us that would be Microsoft, lol).

Stay cool!

New site design under way..

I’ve been working on redesigning the site a bit so it doesn’t feel so cluttered. I’m not finished yet and still have a bit of cleaning up to do. However, I wanted to get some comments, feedback and constructive criticism. Please let me know the goods and the bads. If you can..please give a suggestion or 20. 😀

I don’t want to officially launch the design yet, so I’m waiting for reviews. I’m curious if it’s better or worse and what is better or worse about it. I haven’t gone as far as setting up cookies or passing the css tag, so the style sheet will only apply on pages with css=2 appended to them. If you view another page and would like to see how it looks with the style sheet then just add ?css=2 at the end and press enter. Here are some links to get started..

https://www.kyleabaker.com/?css=2
https://www.kyleabaker.com/archive.php?css=2
https://www.kyleabaker.com/news.php?news=71&css=2

Check them while their hot! I’ll be removing this feature/option soon and these links will be disabled. 😉

UPDATE:
New design is up. I’m still tweaking it and working in the comments and suggestions. Thanks for the feedback!

ECMAScript and CSS: Quick Lesson

Hey all, I know most of you are not guru’s in ECMAScript (a.k.a. Javascript)..but then again I’m not either. I just wanted to share a little tip with you. I find that many times when people try to add javascript functions to their pages or web applications, they add the functions in an incorrect manor.

Here is the most common mistake made. Say you want to make an image button or a hyperlink on your page that is linked to a javascript function. You might attempt this..

<a href=”#” onclick=”Javascript:someFunction();”> Click Here to do some action </a>

One more correct way to do this would be the following..

<a onclick=”Javascript:someFunction();” style=”cursor: pointer;”> Click Here to do some action </a>

Or..if you are using an image as a button or link to a javascript function then instead of wrapping an anchor tag around it, you could do the following..

<img src=”./image.png” alt=”buton” onclick=”Javascript:someFunction();” style=”cursor: pointer;”>

So you can see that the main difference is the use of some simple css ( cursor: pointer; ) which gives you the effect of appearing to “link” to something. The whole linking design is a good way to just make your functions easier for users to find (verses the regular arrow cursor). However, the problem with the incorrect method that I mentioned is that search engines tend to find your site and scan links. When they scan links with addresses such as “#” they usually rank your pages lower. Using css can help you avoid causing poor search results for your site. Also, some browsers are not designed to follow links such as “#” and often just reload the current page. You don’t want your page reloading instead of performing the script that you thought you correctly called for..do you?

So it’s best to just follow safe methods and standards to ensure that your code lasts longer and is supported in most all browsers without having to do silly browser specific hacks. These hacks can often become out dated very fast and force you to do hacks to your hacks. If you’d like to check into other web standards take a look at W3C. If you have any comments or suggested articles please let me know!

Online Alarm Clock

Hey all,
I’ve been spending some of my bored time working on a small ‘fun’ project that I had been wanting to get started. I made an Alarm Clock that you can create an account/password for and setup your very own list of alarms to wake you up in the morning. It is very easy to use and it works! If you by chance do have any questions or comments then please feel free to ask away! Comments can be left here for this blog entry..or you can send me an email if you wish (look at the contact me page). I’m always open for suggestions and constructive criticism.

As always..I’ve tried my best to make it follow webstandards and w3 standards, haha. I’m always coding by standards, but that’s what us Opera fanatics do, lol. We don’t force people to use Opera, we already know it’s the best. 😛

Back on topic, I hope you all find the Online Alarm Clock useful!