Studio Gri Fare Logo
-- epic emigration to Cyberland

List of Technologies   About Armagan Tekdoner

Inaction No More — JavaScript

Press "F2" key to see this page negatively

Mircosoft Widnows [Wersion 6.1.4567]
Copyright © 2000BC Mircosoft Corporation. All rites reversed.
C:\>_

ftp>mput *_

C:\>ftp www.dirty-basement.com_

Connected to dirty-basement.com.
220---------- Welcome to Pure-FTPd [privsep] [TLS] ----------
220-You are user number 3 of 1000000000 allowed.
220-Local time is now . Server port: 21.
User (dirty-basement.com:(none)):_

User (dirty-basement.com:(none)): ghetto_dude

331 User ghetto_dude OK. Password required_

Password:

230 OK. Current restricted directory is /
ftp> cd /safebox785
250 OK. Current directory is /safebox
ftp> mput *
200 PORT command successful
150 Connecting to port 54585_

Please wait...
All your files are being copied to dirty-basement.com/safebox785...

30.248 Files successfully transferred_

Fake DOS Screen Show © 2015 by Armagan Tekdoner

Nothing is going on, don't worry.
Intentionally misspelt words above are to hint that there is no real program working. It is just a JavaScript show, REFRESH the page to restart the show.

alert ("Client-side Scripting is no LOL matter");

said "let there be JavaScript," and the action began in 1995.

JavaScript is about improved user experience. Animated images that create dynamism, interactive slideshows that provide more content in less space, user-friendly validations that prevent errors while filling forms, or rotating banners.

Here is the fancy index of this website's JavaScript files.

Illusions without consequences

Istanbul 2007. Photo credit: Armagan TEKDONER
Move mouse over the tea to test image swap. | Istanbul 2007 © Armagan TEKDONER

Image Rotators

Bates Motel Sign Bates Motel Sign Bates Motel Sign

Bates Motel sign is made up of 3 separate images. I started with a gray-scale image, manipulated it by using the selective colour function of Photoshop to create different images. Then, saved them for web so that none of them exceeded the size of 14K.

JavaScript Calculator

(The app above is being displayed in an iFrame, its original location is here.)

Improved Dialogues

JavaScript does much more than popping up that infamous box that harasses us with messages only-to-be-okayed...

...or presenting potentially endless dialogues as exemplified.
This exercise can take 5 – 12 clicks in total.

Validations

JavaScript validations are useful tools intended to correct user errors.

Here is a credit card validation exercise.
(This experiment will tell you if the number you have provided belongs to one of VISA, MASTER, DINER'S or AMEX cards.)
Try to fool the validation. For eg, 1234123412341234 looks okay, but would not validate; whereas, real card numbers DO validate.

Please enter any credit card number without white spaces. (Although we do not store values, please do not enter real credit card numbers.)
 

Screenshot of a validation exercise
Client-side validations

Above is a JavaScript-based validation exercise with a bunch of fields, that sends nothing anywhere.

JavaScript Injections

Here is a basic how-to demo:

Enter 2 - 8 characters and submit

 
  1. Try entering 1 character, more than 8 characters, numbers / other characters, or just submitting it empty. It will NOT accept.
  2. Click inside the address bar of your browser, delete the existing url, and type exactly javascript: (This cannot be copied and pasted.) Do not hit enter yet.
  3. Then, copy this grey-highlighted part $('#js_form #js1').removeAttr('maxlength pattern required');
  4. Go back to the address bar and paste it there, right after javascript: Hit the enter key. Seemingly, nothing happens.
  5. Retry entering 1 character, a thousand characters, numbers / other characters, or just submitting it empty. Now, it WILL accept.
Please be advised that...

... this demo works only for this form. This form does nothing, is not submitted to anywhere, and has no db connection.

— write less, do more

The wheel had been invented long ago.

Screenshot link
Link to a study that performs client-side CRUD operations, heavily using jQuery.

I, as a jQuery fan, am among those who refrain from wheel-reinvention jobs. Why use native JavaScript for something that can be done by writing much less code?

— is what HTML would have been, had it been designed for building web-apps

What you will type below will be turned upside down, painted red, and bolded. Everything will happen without you submitting anything. Is thought control on the way?

{{string.trick1}}

Motion Graphics

Screenshot link to a Demo Page
Big Switch Show

Enjoy the show by going to the "Big Switch" page linked from its screenshot above.

5 Topics in Client-side Technologies

Link to an Advanced Study
Link to an Advanced Study about Client-side Technologies

Check the tricks by visiting the page linked from its screenshot above.

jQuery Mobile

cell phone screenshot

OK, as someone who hardly steps out of basement, I might be doing well without surfing the Internet using a cell-phone but normal people are as mobile as Captain Kirk today.
That is what jQuery mobile is for and it does the job.
Please analyse the mobile version of this website at .

“Bottles hanging on the wall” song app

bottle images bottle images bottle images

I am sure you have been waiting for an app that counts down some bottles hanging on some wall, thanks to which you could assign numbers and colours to bottles.
Here is that long-awaited Bottles hanging on the wall app.

Missile Alert app

Link to a technical study
Link to a session storage study

Inspired by the false missile attack alarm issued in Hawaii on January 2018, this mock application now prioritises prevention of false alarms, but overkills. An awfully-designed user interface along with overzealous validations, converts a one-button-task into stomach ache. The legalese found almost in all websites today has also been sarcastically ridiculed by exaggerating the existing nonsensical norms.

Check the tricks by visiting the page linked from its screenshot above.