New Widget: Latest Snapshots

I just finished writing a new widget that may be helpful to some of you Opera Desktop Team enthusiasts. It reloads the latest builds every 5 minutes by default, but can be configured to any interval.

The widget is very simple, and if you want to test it before it’s available from the Widget repository then you can grab it from my site here.

The current version as of making this post is v1.0, but I’m going to be releasing an update soon to notify you when a newer snapshot build is available and also show in the widget the current build that you are using so it’s easier to reference. 😉

If you have any comments or suggestions please leave them on the widget page here. Enjoy!

Coding: Online Alarm

I’ve been working on my Online Alarm clock that I start writing more than a year ago! Really, I’ve just been going back to try to finish more of the user interface and clean up more of the code.

The work that I’ve been doing to the user interface includes bringing the design into the years of Web 2.0 with cleaner, larger and simpler layouts.

Just take a look at the difference between the original log-in page (top) compared to the log-in page after I completed functionality and updated the styling to make it a little more Web 2.0 friendly!

It’s amazing to me how you can have a functional web application, but if you don’t make it look nice then it seems like it’s so much more difficult to navigate and use. User interfaces really help sell a product as well, so hopefully I can get this one setup nicely.

I had planned on uploading the source code to the Google Code page that I made for it, but I’m still waiting to work out some kinks.

Mainly, I’m waiting until I get the GUI finished a little more so I will know which MySQL fields are needed and should be installed by an installation script.

The script itself shouldn’t be too difficult, but I really need to map out the process before I start coding it so I can make the installation as simple as possible at the same time.

I’m thinking it will be as simple as uploading all of the files to your server and completing a setup form that just requires server credentials (of course) and an initial Admin username and password. That should be quick and easy and get everything ready to start using!

There is also the issue of completing the admin control panel. If I don’t complete it then the admin will have little control over the service unless they choose to edit everything via phpMyAdmin or something like that.

It shouldn’t be too long before I can bring this project to a version 0.1 level, haha. Then you’ll be able to download the source and do what you wish with it for free (hopefully submit bug reports and patches 😛 )!

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!

Screenshots now use on-the-fly thumbnails

phpI finally got around to implementing thumbnails for the screenshots to the right and in the gallery! Basically, instead of loading full screen images (which take ages to load on a slow internet connection) you are now loading images that have been shrunk from the originals down to the size that you see so no bandwidth is wasted and you see them load much faster!

Here is how it works:
The script that I’m using takes a src param and a width param. [You’ll see this if you’re viewing the source of the images. 😉 ] The src (or source) param is the path to the original full size image. Once the source or path to the image has been established, the script shrinks and caches (saves or stores) the image on the server and then sends it to you. This makes my job of maintaining screenshots much easier!

Just thought you ought to know. 😉 You most likely would never have known that these images were served to you on-the-fly and are not actually stored on the server in the sizes that you see. Just a neat little php trick!

If you’re interested in the script that I used you can find it at phpthumb.sourceforge.net/. It’s open source and updated fairly often (just enough so it’s not out of date, lol).

Enjoy the faster page loads!

New Posting Tools!

I’ve spent some time today making from scratch a few tools to make things such as using bold, italic, underline, inserting images, hyperlinks, emails and smilies (a.k.a. emoticons)! It took some time to complete as the entire interface is written in javascript, but it should be working fine now! 😉 Left me know if you have any problems at all. 😎 You can post those here in the comments section if you wish, however, please do provide some method of communication in case I have a question about how the problem occurred (you could just give me a forum name or something so I can get a hold of you). Thanks! 😀

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!

Handy User Javascripts for Opera

Here is a treat for you Opera n00bs! If you don’t know already, Opera 8 started allowing users to add scripts (javascript) to a directory on their local machine. With these scripts, users can do just about anything! One example of how Opera ASA uses scripts in a positive way is that every single computer with Opera on it has a file in the settings folder called browser.js. This file contains javascript functions that Opera uses to correct pages with faulty javascript code.

You can take advantage of this wonderful feature and save some javascript files to your machine that add features such as Google Suggests (which is a drop down menu with suggestions based on what you are typing). This userjs (user javascript) file adds this functionality to all google pages for you! There are also spell checkers and one very important userjs file that patches all google services so they are more cooperative with Opera. Here is a list of what you can get..

  • Google Suggests
  • Google Services Patch
  • Google Thumbnail Image Direct Links
  • No Click to Activate for Flash Items
  • Inline OSpell Checker
    To use these userjs files follow the steps listed below inorder to enable your Opera to use userjs files.

    1. Find the directory that you installed Opera to. If you are on a windows machine then this is most likely in ‘C:\Program Files\Opera’.
    2. After finding the install folder, create a new folder inside of the install folder called ‘userjs’. You should now have the following folder: ‘C:\Program Files\Opera\userjs’
    3. Open Opera. Click on ‘Tools -> Preferences… -> Advanced -> Content -> JavaScript options…’. Now, at the bottom of this window you should see ‘User Javascript Options’ with an input box and a button below it. Click the ‘Choose…’ button and select the userjs folder that you created.
    4. Now click OK to save changes in the JavaScript options window. Click OK once more to save changes to the Preferences window.
    5. Now that you’ve finished setting up Opera to use your userjs files, just start saving the once you want Opera to use in the userjs folder that you created! To get the scripts that I mentioned above just click on them. If you want more you can check:

There is also a video available that you can use to guide you through setting up UserJS with Opera for the first time. Here is the link: video!

Enjoy!

Edit (10th Jun 07):
Here are some more useful userjs files you can use:

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!