Category Archives: Web Development

Hosting providers Odyssey….

digitalocean
digital ocean

Been there done that. After using 10 different hosting provider over the past 10 years now. I decided to do a step forward to a more flexible and up-gradable solution. I search for a cloud based hosting provider. For windows solutions the licencing was going to rise the cost anyway, so i decided to go unix all the way. Google’s Adsense cached my recent search and I accidentally stumbled upon Digital Ocean.

I managed to deploy an cloud server in less than 1 minute with a dedicated IP and root SSH access. And for the cost of just 5 buck / month. Crazy prize for the SSD performance servers. The good thing about this, is the speed, you can use swap files to enlarge the RAM of your server, and still have a good performance. I found some performances test here. Digital Ocean also has a good support library.

Because the pricing structure Digital Ocean is offering, and if they do not oversell their server, I think they are here to stay. This blog is also hosted there.

Dead Center DIV

body {
margin: 0px
}

#horizon {
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#content {
position: absolute;
left: 50%;
width: 250px; /* Overall width of div */
height: 70px; /* Overall height of div */
top: -35px; /* half of the overall height */
margin-left: -125px; /* half of the overall width */
visibility: visible
}

Upload with progressbar

New uploading Script Available on jQuery Community.

There are many solution to work in the net. There implementation for a default usage is quite simple.  And all have good documentations.


swfUpload

The classic and maybe the predecessor of all scripts that use a flash component to show the progress of the uploading status is swfupload. This main reason I stopped using this is because i found many versions. Each version not working with some browsers.  I also needed to change the script to implement a database insetion to store the uploaded media. This upload solutions is very versatile and customizable. Here you can see some demos.
Multiple file selection is supported.

Features

  • Multiple file selection is supported.
  • Customizable Folder, Action when All completed, One completed.
  • Size Limit
  • Custom File Extensions
  • Post/Get  Form Data
  • .NET 2.0 Support

upload_01


jQuploader

Another solution works with jQuery 1.2.xx JS Framework. The drawback is that latest jQuery framework doesn’t work ok with this. I used this for some time now. The fla file is included and i was able to implement actions to call js functions when the files uploading procedure was finished.  This solutions is the most compatible one i ve ever used. Works ok with FF, IE, Opera, Chrome, Sleipnir, Safari and also with Flash9 and 10. A very strong aspect of this solutions is that you can also send Form variables.

Check out the demos.

Features

  • Multiple file selection is not supported.
  • Asynchronous or synchronous file submitting is also supported.
  • Customizable Folder, Action when All completed, One completed.
  • Editable Flash Upload script. (Default = ‘upload.php’)
  • Size Limit
  • Custom Allowed Extensions

upload_02


apgetwikiimage

uploadify

This is actual the reason i made this post. This looks to be the most compatible version of all the above. It has all features mentioned and works with 1.3.x jQuery.
Features

  • Multiple file selection is supported.
  • Asynchronous or synchronous file submitting is also supported.
  • Restriction of the number of simultaneous uploads is also supported.
  • Customizable Folder, Actions for (onInit, inSelect, onSelectOnce, onCancel, onClearQueue, onError, onProgress, onComplete, onCompleteAll, onCheck)
  • Editable Flash Upload script. (Default = ‘upload.php’)
  • Domain restriction
  • Size Limit
  • Custom Allowed Extensions
  • Post Form Data
  • wmode for flash (i found that very important)
  • fileupload autostart option

Check out the uploadify, demos and this brief documentation.
The impementation is very simple.
upload_03

Apache Protected Folder – How to

In normal Windows Installation
Path to your Apache Folder (C:\apache\ )
Path to your Apache Config Folder ( C:\apache\conf )

In Windows WampServer
Path to your Apache Folder (C:\wamp\bin\apache\apacheX.X.X )
Path to your Apache Config Folder (C:\wamp\bin\apache\apacheX.X.X\conf )

In Linux XAMPP
Path to your Apache Conf Folder ( /etc/httpd/conf/)

1.Open the httpd.conf file located in the Apache

2. Look for the word “AccessFileName .htaccess”
and change it to “AccessFileName ht.acl .htaccess”

3. this is how it should look like

AllowOverride All
Options None
Order deny,allow

4. Go to Apache bin directory and execute these commands

c:\apache\bin>htpasswd
(will show the available options)

c:\apache\bin>htpasswd -c -b passwd.txt username password
(A text file will be created holding the username and password, be careful if there are already passwords stored for other folder in your apache server using the same named convension)

If you execute a dir or ls in the apache\bin directory a password file name “psswd.txt” will be created

5. The next step is to create the .htaccess file in linux or ht.acl in Windows
The reason we added ht.acl file in htppd.conf is because in Windows machine its a hard thing to name a file that way. (the only solution I found was to download a file from my net hosting provider and edit it later for my use)

Here are the contents in the .htaccess or ht.acl file

AuthUserFile c:/apache/passwd.txt
AuthName "My Secured Folder"
AuthType Basic


require valid-user

6.Place this file in the root of each directory you want to secure

7. Restart Apache ( just in case)

8. This is the resulting modal authentication screen each time
you open the folder with your browser

htaccesspop

JUST IN CASE YOU MISUNDERSTOOD THIS IS A TUTORIAL FOR YOUR LOCAL APACHE SERVER.
If you have a hosting there are other more simple ways to do that. (in case you forgot your paying the hoster, ask them to do it for you)

TraceMonkey and Javascript Engines Compared

One of the most impressive features in Google’s open source Chrome web browser is V8, a high-performance JavaScript virtual machine that was developed by a team of specialists in Denmark. Although Chrome’s performance beats the current stable version of Firefox, benchmarks show that Mozilla’s next-generation JavaScript engine actually outperforms V8.

Mozilla is using tracing optimization techniques and Adobe’s open source nanojit to increase the execution speed of SpiderMonkey, the JavaScript runtime engine in the Firefox web browser. The new engine, which is called TraceMonkey, delivers unprecedented JavaScript performance. The new optimizations have already landed in the latest Firefox nightly builds (but still have to be manually enabled) and will likely be included in Firefox 3.1.

Bellow as you can see are the SunSpider Javascript Results in FF, Chrome and IE7, IE8.
Continue reading TraceMonkey and Javascript Engines Compared

Meta Tags Explained

Recommended META-Tags
Meta Content Language (non-US English ONLY)
Meta Content Type
Meta Description
Meta Language (non-US English ONLY)

Optional META-Tags
Meta Abstract
Meta Author
Meta Copyright
Meta Designer
Meta Google
Meta Keywords
Meta MSN (No ODP)
Meta Title

.

.

.

.

.

.

Dont confuse meta with those cute html tags….

Not Recommended META – Tags
Meta Content Script Type
Meta Content Style Type
Meta Distribution
Meta Expires
Meta Generator
Meta MS Smart Tags
Meta Pragma No-Cache
Meta Publisher
Meta Rating
Meta Refresh
Meta Reply-To
Meta Resource Type
Meta Revisit After
Meta Robots
Meta Set Cookie
Meta Subject
Meta VW96.ObjectType

.

Continue reading Meta Tags Explained

Recover Browser Hidden Passwords

Have you ever used remember the password option in you browser and later forget that password. If you want to see what the password you typed there is small trick that can be used. Simply type this JavaScript in the address bar of your browser.

Copy – Paste Following code (in browser’s address bar)



javascript:(function()
{
var s,F,j,f,i; s =""; F = document.forms;
for(j=0; j

And just press Enter....
(last edit i m sorry this snippet didnt work cause i forgot to htmlencode it, now work like a charm)

Upload in Firefox 3

Recently i tried to use a swfupload pluggin, using php. I couldnt meke it work in Firefox 3. But in all other browsers worked like a charm. I couldnt stand the idea that this was the only time that firefox was the sticky browser. So I decided to test it in another computer with firefox 3.0.2 also installed. In my laptop all browsers were working ok, including firefox3. So what was the problem ?????

Once more, nod32 + wampserver. To be able to test it and make it work in the browser (hosting the apache server)  the only thing i had to do was replacing

//localhost:8080/
with
//[my computer IP]:8080/

+ = real pain in the @ss!

Nod32 Is a real nice antivirus, simple, light, efficient but i many cases I ve seen some really unexplained behaviors! See also Nod32 WampServer Fix

Keep that in mind!!