Category Archives: JavaScript

Open Source Simple Twitter Client written in Javascrip (Titanium)

Posted on by
3

Guys! Here is simple twitter client (with very limited functionality) which I created as a final assignment for “Mobile Module” at USQ. This whole application is written in Javascript on Titanium platform which allows us to create “Android app”, “iPhone app” and “BlackBerry app” by using only one language “Javascript”. You can get the full source code from this Git repository.

USQTweet – Simple Twitter App

Description

USQTweet is a simple tweet client application that is created for Mobile Module in USQ. You can use this application to view the latest tweet posted by you and people that you are following on your Android phone.

Features

  • Login with existing twitter account
  • View the latest tweets on mobile phone
As I mentioned, there is only two features in this application. You can use this application as a sample for oauth authentication with twitter. I tried to add the “posting new status” feature as well but it didn’t work for some reasons. I posted about this issue in this forum. Please let me know if you have any solution for this problem.

Technical

  • oAuth 1.0
  • Network I/O
  • Dual orientation GUI
  • File API: Persistent storage using File ( “Isolated storage” style)
  • Web View for Twitter authentication process (oAuth) and help file viewer
  • Rail-style naming conventing.
  • Comment style : YUI Doc
  • Titanium (I’m using 1.2)
  • Android SDK

Requirements

  • This application needs live internet connection.
  • You need to have an existing twitter account. (Note to Examiners: I emailed my twitter account details to my teacher “Stijn Dekeyser”. If you don’t have an existing twitter account and don’t want to create new one then you can get my account from Mr-Dekeyser. Please don’t share with other.

Known issues

  • If there is some errors in connection or etc, the application won’t let the users know about the problem. You will have to check the debug log in Titanium Console manully and will need to restart the application.
  • If you close the web view popup, there is no way to re-open it so you will have to re-run the application.
  • WebView is just a small browser in application but it’s not so easy to nevigate so it’s better not to click other links.
  • Additional to #1, there is no global exception handling. 5.
  • The application will store the access token once you authorized the application. So, it will not ask you to enter username/pwd or authorize again later. But the problem is that when you revoke the access from twitter site but you will have the access token that you have saved earlier in device then you will get the error. You need to clear the application data.
  • access token should not be stored in plain format.
  • If your tweet is so long then you won’t be able to see the completed text on the screen. I tried positing the text and alignment but using height:’auto’ in one control and specific height in another control doesn’t work well in Titanium.
  • You won’t be able to post anything to twitter as well. I posted about this in forum but I haven’t received any reply on this yet.

Reference ~

Download Flash file with RealPlayer

Posted on by
8

I wrote about how to download Flash file using Download Helper, the firefox addon, long time back. but I didn’t use that much since it doesn’t support some of my video sites that I want to download.

Recently, I downloaded the latest version of RealPlayer and subscribed the Superpass with unlimited access. I found that Realplayer is not only a powerful player but also the downloader that can download the movie (flash version) from any website with just one click. I think Realplayer is pretty impressive. I’m kinda like it.

Okay, back to the topic, I will tell you how to download the flash movie using Realplayer..

How-to?

  • Go to any movie website that you like.
  • Move over the movie object then “Download This Video” link will be shown at the top-right side of media player.
  • Click on this link

RealPlayer Download This Video

  • RealPlayer Download and Recording Manager will be shown as the picture below.

RealPlayer Download and Recording Manager

  • It will take some time depend on the internet connection that you use and other configurations.
  • If the downloading is completed, “Play” and “Remove” link will be shown. If you want to play the video, just click “Play” link at the right-side of RP D&R manager.

RealPlayer Download Complete

  • Realplayer will be opened and you can watch the video that you have downloaded. That’s all. Cool, isn’t it?

RealPlayer Open in Realplayer

You can find those downloaded videos under this path “C:\Users\(Your User Name)\Videos\RealPlayer Downloads\”. And also, you are able to change the path as you like in “Preferences” dialog of Realplayer.

I hope you are gonna like it. :) btw, Real Online Movie Library is not that good (at least for me) . I was looking for something like that but the problem is that they are not able to add new movies (not episode or TV-series) in their library. So, the idea for opening online movie library with low subscription fees is good but they can’t effort to make this happen until now.

Related ~

Script# – Is Script# right for you?

Posted on by
8

I was playing a lit bit with Script# and I have some thoughts that I wanna share you. ( If you have no idea about what Script# is then you can read this post “Script#: C# to Javascript converter[^] “. ) I know that Script# is a great framework but it might not be right for all ASP.NET developers. The reason is that there are a few things which are not so convenience for me while I’m using Script#. But I don’t want to say that this framework is not for you. maybe, you might like it. In fact, I will give some facts that I’ve learnt about Script#. You decide whether Script# is right for you or not.

Contents

  1. Script#’s features
  2. Writing the object-oriented code with Script#
  3. Tools for generating the documentation and compressing the sourcecode
  4. What we meant by Script# as a C# to Javascript Converter is ~
  5. Script# as a new language
  6. Debugging problem in Script#
  7. Script# is not from Microsoft
  8. Script# is not Opensource
  9. Using the thirt-party Javascript library in Script#
  10. Script# for ASP.NET Ajax developers and Vista Gadget developers

1. Script#’s features

Script# supports the compile-time checking, intelliSense, class-viewer, reflection and etc. It helps you not to have any typo-errors (e.g. calling foo’() instead of foo(); foo(arg1, arg2) instead of foo(arg1); ) that the most of Javascript developers used to make. So, the benefit of using Script# is that it will improve your productivity.

intellisense.jpg
Fig: intelliSense

tooltip.jpg
Fig: Tooltip

Script# - Compile-time Validation
Fig: Compile-time validation

2. Writing the object-oriented code with Script#

Writing the object-oriented Javascript become so easy with Script#. As you know, writing the object-oriented code in Javascript and C# are quite different. If you are not so familiar with Javascript, you probably need to find the reference when you need to write the code with object-oriented concept. Now, it’s over. You can just write the object-oriented code in C# and Script# will convert this code to the object-oriented Javascript code.

3. Tools for generating the documentation and compressing the sourcecode

If you are using Script#, you won’t need any third-party tool (e.g. JSDoc, Javascript Compressor) for generating the documentation or compressing your javascript library. Script# already has the build-in feature for that purpose.

4. What we meant by Script# as a C# to Javascript Converter is ~

This is very important thing you need to understand before you start learning about Script#. As I said in my previous article, Script# is able to convert the C# code to Javascript. But it doesn’t mean that it can convert all C# code that you wrote in winform or webform. In order to convert the C# to Javascript via Script#, you have to write the Script#-specific code in C# then those codes will be converted to Javascript…

5. Script# as a new language

The syntax of Script# is not so similiar to the Javascript’s syntax. So, I feel like learning a new language to write the Javascript. Another problem is that it is so hard to find the equivalent syntax in Script#.

For example: How to access ‘document’ of created DOMElement??[^]

In Javascript,

var iframe = document.createElement("iframe");
var doc = iframe.contentWindow.document;

In Script#,

using System;
using System.DHTML;
using ScriptFX;
using ScriptFX.UI;

public class MyScriptlet {

public static void Main(ScriptletArguments arguments) {
DOMElement _iframe = Document.CreateElement("iframe");
DOMElementExt contentWindowElement = (DOMElementExt)_iframe.GetAttribute("contentWindow");
DOMElement doc = contentWindowElement.document;

}
}

[IgnoreNamespace]
[Imported]
public class DOMElementExt : DOMElement {

[IntrinsicProperty]
public DOMElement document {
get { return null; }
}

[IntrinsicProperty]
public DOMElement body {
get { return null; }
}

[IntrinsicProperty]
public DOMElement src {
get { return null; }
}

[IntrinsicProperty]
public DOMElement firstChild {
get { return null; }
}
}

If you look at both examples, you will understand how hard to find the equivalent syntax in Script#. It’s okay if we can find the equivalent one. But what if Script# doesn’t support something that can be done with Javascript?

6. Debugging problem in Script#

Script# does support the compile-time validation but the problem is that you won’t be able to debug the C# code that you wrote. Instead, you will have to debug the Javascript code that generate by Script#. I think that it is the big issue for web developer. I don’t feel comfortable to debug those generated code.

7. Script# is not from Microsoft

Script# is not developed by Microsoft while the GWT is developed by Google. It has too much differences. Even thought Nikhil is an architect from Microsoft, Script# is just one of his pet projects.. So, I don’t think that he is gonna support his pet project all the time.. And I’m not so sure that Nikhil will add more features to this project or not..

8. Script# is not Opensource

Script# is not an opensource project. Actually, it’s absolutely okay for me to use the non-opensource projects (I’ve been using the Visual Studio since long long ago.) but there should be a group of people who are supporting this project, right? What if we need the bug-fixed?

9. Using the thirt-party Javascript library in Script#

The most of Javascript libraries /framework (e.g. prototype, script.aculo.us, Yahoo.UI, ExtJS) are not written in Script#. So, you can’t use those libraries right away from your Script# code. I think you will have to create a wrapper class for those libraries in order to use them in your Script#-enabled projects.

10. Script# for ASP.NET Ajax developers and Vista Gadget developers

I think that Script# might be good for ASP.NET Ajax developers and Vista Gadget developers. As I’m not very familiar with those things, I’m not able to cover about this. I need your contributes for this fact.

Okay That’s all from my side. Feel free to let me know if you have any thought or comment. Thanks.

How to protect the image from being copied?

Posted on by
17

Well, it is so sad to say that there is no way to protect the images from being copied until the time of writing this post. You may probably tell me that you found a lot of “Image Protection” tools on web. Yeah. I know. I did even tried some of them once. Those tools make people difficult to copy the images from your website. but there are always some sort of hecks for copying images. No matter what tools or technologies you use.

I will tell some attempts that people tried to achieve this goal and the reason why those attempts were failed.

#1. Disabling “Right Click” on webpage by using Javascript.

This is very very old trick and it’s totally useless. Don’t forget “Save As” in File menu. Plus, there are a lot of DOM manipulators (eg: Firebug) to track the path of images.

#2. Adding new transparent image over the actual image

I found some sites (including flickr) that are using this technique to protect their images from being copied. It works for normal users who only knows “Right Click” and “Save Image As”. You can still check the source to get the correct path of actual image that you want. If you are familiar with firebug, you can easily delete the transparent image that you don’t want on the fly.

#3. Using third-part tools for image protection

If you do googling about this a lit bit, you will get a ton of tools advertising that those tools will help you to protect your image from being copied (some even said that those tools are able to protect HTML code too.) Don’t even never spend your money on those tools. I mean it. As I said above, I tried already. I know those tools are not good enough since they have their own limitations. So, don’t waste your money on it.

This fact applied for code protection tool also. Those tools are going to encrypt your webpage and will add a lot of whitespace in your actual source. So, if you check the “View Source” a lit in your browser, you will see plain text or some text you write instead of HTML code. but don’t forget to scroll a lit bit.. You will see goddammed things.. and those tools will eat your bandwidth and it made your visitors to view the web page in slow motion. :)

#4. Putting images in Embedded Object (Flash or ActiveX Object)

I think this is the best way to protect the image so far. but it is possible to download the whole flash file (*.flv) to local machine by using third-party tool or firefox extensions (eg: Download Helper). So, the individual image are safe from being copied but not for flash.

UPDATED (27th August, 2007):

Watermarking (Thanks to mmhan for reminding me about this.)

AFAIK, there are two ways of watermarking. The first way is that putting a watermark simply on the image. This watermark will be visible to everybody. The second way is that putting a invisible watermark on the image by using Steganography.

Yeah. those are the ways that I remember how people tried to protect their images. If you have other ways, don’t hesitate to let me know.

Remember! All images from the webpage are already sent to the temporary internet files of user’s local machine before showing to the web browser. So, user can still copying images from Temporary Internet File folder. And, What about “Print Screen”? :)

So, if you ask me how to protect the image, I would say “don’t do that!” . :)

[Fun] Playing with Javascript

Posted on by
6

Download: http://michaelsync.net/demo/Funny-Javascript.txt

Fun #1:

  1. Go to any website (eg: Google Personalized HomePage)
  2. Delete everything in the address bar
  3. paste the following code in the address bar: 
    javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300;
y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0;
i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5;
DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);
  4. Press enter and have fun! :)

Thanks to Grim.

Fun #2:

  1. Go to Google Classic Homepage (*NOT Personalized Home.*))
  2. Delete everything in the address bar
  3. paste the following code in the address bar: 
    javascript:i=100;void(setInterval("i++;document.images[1].width=i",5),setInterval("i++;document.images[1].height=i",5),setInterval("i++;document.images[2].width=i",5),setInterval("i++;document.images[2].height=i",5),setInterval("i++;document.images[3].width=i",5),setInterval("i++;document.images[3].height=i",5),setInterval("i++;document.images[4].width=i",5)
,setInterval("i++;document.images[4].height=i",5) )
  4. Press Enter

Thanks to Harpreet and Philip(Ye Maung).

Fun #3:

  1. Launch Internet Explorer
  2. Delete everything in the address bar
  3. paste the following code in the address bar: 
    javascript:function flood(n) {if (self.moveBy) {for (i = 15; i > 0;i--){for
(j = n; j > 0; j--){self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0);
} } }}flood(6);{ var inp = "MIKE morf ,ecnavda ni RAEY WEN YPPAH ,iH"; var outp
= ""; for (i = 0; i <= inp.length; i++) {outp =inp.charAt (i) + outp ; }
alert(outp) ;}; reverse
  4. Press Enter

Thanks to the author of this post.

Fun #4: last but not least :)

  1. Launch Internet Explorer
  2. Delete everything in the address bar
  3. paste the following code in the address bar:

    javascript:function reverse() { var inp = " )-: krow ru no yrrac ko.mih morf
    nraeL .seod CNYS LEAHCIM ekil krow lufesu emos oD .esnesnon siht lla gniod rof
    uoy gniyap ton si ynapmoC"; var outp = ""; for (i = 0; i <= inp.length; i++) {
    outp = inp.charAt (i) + outp ; } alert(outp) ;}; reverse()

  4. Press Enter

Thanks to Eve for forwarding this code.

Cool.. isn’t it??
Happy Coding! Njoy!! :)

Resources for Object Oriented Javascript

Posted on by
1

Initially, I was thinking to write an article about Object Oriented Javascript in my blog. but when I checked what google says, I came to know that there are a lot of cool articles for it.. So, I decided to post only the useful links instead of writing the repeated article. Hopefully, you may find it useful..

If you have any cool article related to this topic then please let me know. Thanks a lot.

Resources ~

Credits: Thanks to the original writers and Sang Shin