GS Design Just another developer blog

If you are a developer than you are well aware of the importance of testing your applications, and i dont mean testing it your self since that is really not going to be very helpful beyond the development stage.

Since you ( or your team ) have build this application you will not be tester, since you already know how the application will perform. The best thing to do is to do a test with more subjects, of all knowledge levels if possible and give them a series of events and tasks to perform to see how the application handles and how easy it is for them to perform those tasks.

I found that in all test groups there is always a “bird brain” (as the speaker in the presentation reffered to it) that will execute a series of actions that will crash your application (usually things you havent thought of anybody doing). Although some developers hate those type of testers ( how the F did you managed to get there) i like them. At my old job i used to have a secretary that would find any bug i might have overlooked in a matter of minutes, just by clicking around ).

Anyway, the point i was trying to make ( beside the fact that testing is important ) is that human driven tests although very creative at times, have a few limitations and will not managed to test the full amount of possibilities. And above this will take quite a few resources ( human and financially ) to execute this tests, and they cant be reused if the application changes.

So there are some really smart persons that are looking into making an automated system for testing web applications. Some the research in this field are also done by microsoft ( this is a small inside info for all those microsoft haters ).

I am not going to go into much more details and let you watch the presentation.
Enjoy.

If you havent figure it out by now, my "expertise" is more on the back-end ( php & mysql ) than with front end. So i sometimes look for solutions in javascript that i know how to do in php.

One of this is the concept of variable variables. A ‘variable’ variable is when the identifier of a variable is a variable itself. To be more specific, this works by taking a string as the name, and then defining a variable with that name. That variable can then be used as a normal variable.

The solution in Javascript

1. Using Eval
the first solution i found was to use eval.

This should result in having a variable name_street with the value Lincon Road.

However from my small knowledge of JS, i have come to understand that you should avoid using eval when possible.
2. Better Solution - Using Window Array

Same effect, with no eval

This is all for today,
cheers

The ternary operator will accept three operands and is used to assign a certain value to a variable based on a condition. The syntax is condition ? result1 : result2;

So if the the condition is evalued as true the result1 is runned else result2.

Example:

This will print out: true

Pretty simple, cheers.

For a lot of forms there is a need to display a text as a default one in the inputs. But it is to nice that the users has to delete that text before entering his own, but you don't really want to give up on the predefined / default text since it sometimes offer some useful tips for the user to understand that inputs purpose.

Another well know scenario are the search forms .. where you see written search and when you click the forms goes empty, that doesn't offer to much information but it makes for a better user experience by providing an elegant dynamic search form.

Well the way to do it is JavaScript. I saw a lot of ways to do it, with functions, but that all seems to complicated to me for such a simple thing. My way is to write the JS directly in the input code:

DEMO

Because people asked for a demo, i will point them to the right bar, called search . That is the effect you will get.

hope you enjoy this,
Cheers

Sorry for those of you that got hear thinking you will get a great scheme on how to make easy / no work money online, this is how to make money working .

This article is for people who are Programmers, designers or editors.
Some companies want to subcontract some of there work to other smaller companies, process called outsourcing.
But instead of doing to a different company's instead of outsourcing works to a company , plan to outsource the work directly to programmers like you using specialized websites that act like a market place for company's and freelancers .

There are a lot of such websites out there, but a few have managed to climb and stay in the Top 5. I will try and do a small review of them. As a note this is my personal top 5, not an official one.

1. Odesk

This is one of may favorite freelancing websites, and it got good reviews from a lot of websites and magazines. It is very popular because it has some build in features that are not found on other websites like:
- hourly payd jobs ( that are guaranted );
- desktop client that tracks hours worked for hourly projects
- free professional test for providers to show theyr skills
and much more

You can see a more detailed tour of odesk here.

2. getafreelancer.com

A very well famous website, which is very nice because you will get many projects to choose from. It suports escrow payments wich is nice to limit your "do the job, not get payed" situations, and has a few payment methods such as GetAFreelancer.com Debit card, PayPal, Moneybookers.com, E-Gold, Wired Transfer.

3. eufreelance.com

This is the same company as getafreelancer.com but its intead for europe because the currency you get payed is euros wich is nice especially for me because in my country the dollar has sunk to quite a low rate.

4. rentacoder.com

Yet another famous website, RAC features literally thousands of open projects, available in fields ranging from Data Entry to Writing to Web Design to Programming. RentACoder is probably one of the best freelance web site around, so be sure to sign up here.

5. scriptlance.com

This a new websites i signed on for, havent really tested it out. ScriptLance is a project web site in which freelancers can bid on projects and then complete them and get paid. This site isn’t quite as
reliable as RentACoder, as funds aren’t always escrowed like on RAC, but it is still a site worth checking out. Project fees are usually $5, which is very cheap.

That is it about making money online and freelancin, hope you enjoyed it.

I know some of you might not like these these websites, because of the low quotes that are found there, but i believe they have there purpose, and by making some projects on this website you can potentially find some contractors that will give you constant flow of projects in the future and you will build your online reputation in the process as well.

I might be wrong, but this is my perspective on freelancing websites.
Cheers.

I have started working on a music directory project recently and one on the task i had to do is to make the user experience more desktop-like with the current wimpyplayer.

The main problem that they were facing was that how the code was originally setup the player would open in a new pop-up window and load the songs you selected. The problem was that upon navigating to a new page and selecting new songs, the pop-up would refresh and clear the old songs and load the new ones.

The challenge was to make so that the player would support appending new tracks to its playlist. That was not quite the big problem .. since wimpyplayer has all the functions needed to do this, but how to detect the pop-up and trigger those functions ?

At first i tried a code to detect the pop-up that seem to work :

But if you would navigate to a different page in the parent window it would lose its reference to that pop-up and reopen it.

So i started to do some more googling to find a new solution, one that would be cross window. Luckily i did on the blog of Martin Laine.

Apparently he had the same challenge, and found a more low tech solution in 2005 that he called Cross-window Javascript communication where basicly he had the pop-up window remind the opener that reference to it at a small interval of 200 milliseconds.

Later Robert Emmery left a comment on his blog giving him a new solution, that i adopted as well .. and i will post here also in the hope that you will find it upon needed

In the main window:

In the popup:

I have been looking for a replacement for tinyMCE for a while, and i think today i found it ( thanks XSS Master ).

SPAW Editor v.2 is a web based in-browser WYSIWYG HTML editor control. It is a replacement for standard HTML textarea fields for rich text content editing.

The best features of it are :

Tabbed Multi-document Interface

Version 2 introduces new industry unique tabbed multi-document interface feature. Now you can edit virtually unlimited number of HTML snippets in a single WYSIWYG instance. This can save a lot of screen space, unnecessary scrolling and loading time compared to other solutions where you have to load as many WYSIWYG instances as HTML snippets you want to edit.

Floating/Shared Toolbars

Multiple instances of SPAW Editor v.2 can be controlled by a single toolbar. This toolbar can either be attached to one of the instances or float around the screen. This way you can save loading time and achieve a better level of integration of the editing area into complex designs (no toolbar overhead)

Phatfusion image menu is a horizontal image menu that reveals more of the image as you rollover it.

This sort of unique image menu works very well, I like how all images play along whatever section is active. Highly recommended.

Features

• 2 optional onClick events - open & close
• href passed to onClick events
• stays open when clicked
• closes when clicked
• select item to pre-open

Download Horizontal Image Menu | Demo

Today i found an interesting article about Tabs without JavaScript. Turns out you can do a tabbing system without needing to use JavaScript, only by CSS and standard (X)HTML. The downside is that you won't get styling on the active tab to indicate that it is active.

Here is the code:

Demo page

On all my projects there was at least one delete buton or a diferent action that would be irevocable. And many times during the developing phase i forgot to put a method of preventing clicking that link by mistake. Of course you can do a confirmation page from php that would be better since it will not depend on the user having javascript activated, but during the developing phase it is better to put a simple javascript confirm even if you will develop a php confirmation page. This will save some load of the server if the user has javascript activated, and save the user some time. Also it is best to always have a confirmation method since many times the user is in a hurry to click and might click the worng button.

There are 2 methods of doing a javascript confirm.

Using a separate function

Confirming directly in the link

I have gotten my slef used to use the last method on all my delete buttons even if i develop a confirmation page later on. It prevents even me from clicking the delete button by mistake .

I hope this has been of some help to you.

Cheers