Archive for the 'ECMAScript' Category

Widget coding: Google Translator

Published
by
kyleabaker
on August 5, 2008
in Ajax, Applications, CSS, ECMAScript, HTML, JavaScript, News, Open Source, Opera, Picture, Web and Web Design
. 0 Comments

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!

[Ask] [Bloglines] [del.icio.us] [Digg] [Facebook] [Feed Me Links] [Friendsite] [Google] [MySpace] [Reddit] [Rojo] [Shoutwire] [Slashdot] [StumbleUpon] [Technorati] [Windows Live] [Yahoo!] [Email]

Ajaxed Search…

Published
by
kyleabaker
on December 14, 2007
in Ajax, ECMAScript and JavaScript
. 0 Comments

ajaxI’ve added a quick drop down box for the search field that uses AJAX and PHP on the backend to fetch results for you in real time. ;) Just another piece of the site’s redesign that has been underway. :D Stay tuned for more news and updates!

[Ask] [Bloglines] [del.icio.us] [Digg] [Facebook] [Feed Me Links] [Friendsite] [Google] [MySpace] [Reddit] [Rojo] [Shoutwire] [Slashdot] [StumbleUpon] [Technorati] [Windows Live] [Yahoo!] [Email]

Screenshots now use on-the-fly thumbnails

Published
by
kyleabaker
on December 6, 2007
in Ajax, ECMAScript, JavaScript, Multimedia, MySQL, PHP, Picture and Web Design
. 0 Comments

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!

[Ask] [Bloglines] [del.icio.us] [Digg] [Facebook] [Feed Me Links] [Friendsite] [Google] [MySpace] [Reddit] [Rojo] [Shoutwire] [Slashdot] [StumbleUpon] [Technorati] [Windows Live] [Yahoo!] [Email]

New Posting Tools!

Published
by
kyleabaker
on October 17, 2007
in JavaScript, News and Web Design
. 1 Comment

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. 8-) 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! :D

[Ask] [Bloglines] [del.icio.us] [Digg] [Facebook] [Feed Me Links] [Friendsite] [Google] [MySpace] [Reddit] [Rojo] [Shoutwire] [Slashdot] [StumbleUpon] [Technorati] [Windows Live] [Yahoo!] [Email]

ECMAScript and CSS: Quick Lesson

Published
by
kyleabaker
on July 23, 2007
in CSS, ECMAScript, How-To, JavaScript, Web and Web Design
. 0 Comments

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!

[Ask] [Bloglines] [del.icio.us] [Digg] [Facebook] [Feed Me Links] [Friendsite] [Google] [MySpace] [Reddit] [Rojo] [Shoutwire] [Slashdot] [StumbleUpon] [Technorati] [Windows Live] [Yahoo!] [Email]

Handy User Javascripts for Opera

Published
by
kyleabaker
on May 8, 2007
in ECMAScript, JavaScript, Opera and Web Browsers
. 1 Comment

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:

[Ask] [Bloglines] [del.icio.us] [Digg] [Facebook] [Feed Me Links] [Friendsite] [Google] [MySpace] [Reddit] [Rojo] [Shoutwire] [Slashdot] [StumbleUpon] [Technorati] [Windows Live] [Yahoo!] [Email]

Online Alarm Clock

Published
by
kyleabaker
on March 22, 2007
in Ajax, Applications, CSS, ECMAScript, HTML, JavaScript, MySQL, PHP, Web and Web Design
. 0 Comments

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. :P

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

[Ask] [Bloglines] [del.icio.us] [Digg] [Facebook] [Feed Me Links] [Friendsite] [Google] [MySpace] [Reddit] [Rojo] [Shoutwire] [Slashdot] [StumbleUpon] [Technorati] [Windows Live] [Yahoo!] [Email]