Windows Vista "Show characters" checkbox under a password field

And Useit.com recommends it: It’s time to show most passwords in clear text as users type them. So without further ado, here’s what it looks like on the web: unmasking the password field

This is the HTML code from the example:

<form>
	<label>
		Password:
		<input id="password" name="password" type="password" />
	</label>
 
	<label>
		<input id="showcharacters" name="showcharacters" type="checkbox" /> Show characters
	</label>
</form>

And this is the JavaScript jQuery that toggles the masking and unmasking of the password field:

$(document).ready(function() {
 
	$('#showcharacters').click(function() {
		if ($(this).attr('checked')) {
			$('#password').replaceWith('
<input id="password" name="password" type="text" value="' + $('#password').attr('value') + '" />');
		} else {
			$('#password').replaceWith('
<input id="password" name="password" type="password" value="' + $('#password').attr('value') + '" />');
		}
	});
 
});

I personally think this is better than the iPhone method of showing only the last typed character, because well… when using a real keyboard I type my passwords faster than I’d be able to read them letter by letter. Which means I type really fast or read really slow.

Either way this would be a better solution to having to type a password two times in order to confirm it.

Obviously it would have been uncomfortable for me to actually include the thing in the post (CSS needs to be in the head, JavaScript may conflict with other JavaScript, etc), so the best option would have been to just link to the file demonstrating the effect.

Using inFrame the reader doesn’t have to go away from the blog post to view demo files… just add a class of inframe to each of these links.

Try it out: Click on the links to view/hide

Some random example from A List Apart: “CSS Sprites2″: regular link to the file

Slick animation menu (from nettuts): regular link to the file

Smooth Gallery, a mootools gallery: regular link to the file

The jQuery JavaScript

Of course, you have to include jQuery if you’re not using it already in the page.

$(document).ready(function() {
	/*
		inFrame - Keep Demos Inside the Page with jQuery
		- affects all the links with a class of 'inframe'
		- set a rel attribute like rel="height:400px" on the link for a 400px high iframe
		- if you don't set a height, default is 550px
	*/
	$('a.inframe').click(function() {
		var e=$(this);
 
		if (!e.data('state')) {	//if state is undefined
 
			e.data('state','open'); //set the state to 'open'
 
			// Extract the frame height from the rel attribute
			var frameHeight=e.attr('rel');
			var pat1 = new RegExp('height:');
			pat1.test(frameHeight);
			frameHeight=RegExp.rightContext;
			var pat2 = new RegExp('px');
			pat2.test(frameHeight);
			frameHeight = RegExp.leftContext;
			if ( !frameHeight || (Math.ceil(frameHeight)!=Math.floor(frameHeight)) ) {
				//if it's null or not an integer
				frameHeight = '550'; //default frame height, in case none is specified
			};
			frameHeight += 'px';
 
			frameWidth = '100%';
 
			// Insert the iframe just after the link
			e.after('<iframe style="width:'+frameWidth+'; height:'+frameHeight+'; border:solid 1px #ccc; margin-bottom:1em; background:#fff;" src=' + e.attr('href') + ' frameborder="0" ></iframe>');
			var iframe=e.next('iframe');
 
			// Insert the "loading..." text
			iframe.before(' <small class="quiet"> Loading...</small>')
			iframe.load(function(){	//once content was loaded
				iframe.slideDown(500);	//slide it down
				iframe.prev('small').remove();	//remove the 'loading...'
			});
			e.attr('title','Hide');	//set the link title to 'Hide'
		}
		else if(e.data('state')=='closed') { //if state is 'closed'
			e.data('state', 'open');
			e.next('iframe').slideDown(500);
			e.attr('title','Hide');
		}
		else if(e.data('state')=='open') { //if state is 'open'
			e.data('state', 'closed');
			e.next('iframe').slideUp(500);
			e.attr('title','Show');
		}
		return false;
	});
});

iframe.inframe {
	box-shadow: 1px 1px 6px #ccc;
	-moz-box-shadow: 1px 1px 6px #ccc;
	-webkit-box-shadow: 1px 1px 6px #ccc;
	padding:5px;
	margin-right:-10px;
	bakground:#fff;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
}

How to Use it

Include jQuery and the inFrame script above.

Add a class of inframe to all the links you wish to apply it to. Like this:

<a class="inframe" href="http://vileworks.com">VileWorks</a>

The default height is 550px, but if you want to specify it for a link, you can do so using the rel attribute:

<a class="inframe" rel="height:300px" href="http://vileworks.com">VileWorks</a>

Please note that there’s no space between “height” and “300px” and you can’t specify the height in ems or in percents.

If you already have other rel attributes you want to use, like nofollow or external, you can include those too.

<a class="inframe" rel="nofollow height:300px" href="http://vileworks.com">Vile</a>

Features

• Tested in IE6, IE7, Firefox 3, Safari 3, Google Chrome, Opera on a PC. And Safari on iPhone.
• Degrades gracefully (to regular links) when JavaScript is turned off.
• SEO friendly with the files you link to.

Even though they’re iframes which are usually very bad for findability, usability, accessibility and other words ending in ‘-bility’, they’re not bad in this case because the links are still there, with their hrefs and everything looking all natural — so search engines that crawl your site and people with no javascript won’t feel any difference.

Goofy useless stuff

Trippy.

Like the link below… that’s a link to this very same page. Open it, and you’ll find it again inside. And open it in there again. See how far you can go before you get lost in the scroll bars or crash your browser!

link to this page

Fascinating.

Does the user have JavaScript enabled?
If yes, they’re okay — let’em comment, no annoying captcha required.
No? We’ve got a suspect. Read them their rights and serve them the ultimate “are you human?” test.

I made this 5 minute screencast to earn fame and fortune on Nettuts, but I’m also posting it here along with some textual comments. Figured I’d make it easier for you to copy/paste the whole 2 lines of JavaScript.

Here’s what you start with, the source code from this tutorial.
(Note: be sure to have the Arial font file called arial.ttf in the fonts folder–copy it from your System in there because their archive does not come with it).

This is the JavaScript/PHP I’m pasting in:

<script type="text/javascript">
<!--	
	document.getElementsByName('code')[0].value = '<?php echo $string; ?>';
	document.getElementById('captcha').style.display = 'none';
 
-->
</script>

Both lines of JavaScript work on elements from this chunk of HTML:

<div id="captcha">
	<img src="captcha.php"/>
	<p><input type="text" name="code" /> Are you human?</p>
</div>

The first line of JavaScript sets the correct value for the code text field.
And the second line of JavaScript sets display:none to the captcha div, thus hiding it from anyone with JavaScript enabled.

Hidden Captcha instead of Akismet?

I use the same Hidden Captcha concept on this site, where I installed a modified version of the Simple Captcha WordPress plugin. But when you try to comment you don’t see any captcha requirement, do you? Not unless you have JavaScript disabled.

Since I’ve installed Simple Captcha, the Akismet spam count remained at 0 (zero).
And this leads me to the Akismet false positives issue. Where innocent comments can sometimes incorrectly show up as spam and get lost in the thousands of real spam comments.

How Spammers can play with Akismet system and get you banned?

Lets take an example of a blogger who wrote a harsh comment on other blogger’s website. Now the other blogger will take his identity (username, email and URL) and put them into a spam script (believe me there are plenty out there) and he will set the script to send out 100’s of comments/trackbacks to other blogs. Of course, most of these blog owners who got the ’spam’ would flag these comments as spam. This would result in your credentials being incorrectly marked as spam comments by hundreds of bloggers, thus ruining your expertise to promote your site.

You can read the rest of that article on Mind Tree.

Akismet is great and all, but man… I don’t want to send innocent people to the spam box.

So this Hidden Captcha system (easily implementable on any existing captcha system as seen in the screencast) can actually allow me to disable Akismet (thus eliminating the possibility of false positives) and keep actual spam comments away.
No usability issues because of hard to read captchas–for most of the readers.
And no accessability problems, because that small percent of humans without JavaScript enabled can still comment after filling in the Captcha code.

Link to the demo–you can also check it out with JavaScript disabled, and have a look at its source code.

So, if you have the FreePress Recent Comments Widget and the long site titles from the trackbacks/pingbacks are breaking your design, here’s your quick tip from VileWorks:

• go to Dasboard \ Plugins \ Recent Comments (edit)
• find this line (line 234 in recentCommentsWidget.php):

  $request .= "AND comment_approved = '1' ORDER BY comment_ID DESC LIMIT $limit";

• change it to:

  $request .= "AND comment_approved = '1' AND comment_type <> 'trackback' AND comment_type <> 'pingback' ORDER BY comment_ID DESC LIMIT $limit";

What you’re doing is adding a condition in the mySQL query that the comment type should not be trackback nor pingback (trackbacks and pingbacks are also stored in the wp_comments table in the database).

Good luck!

PS: I don’t know about other recent comments plugins but this particular one offers a pretty useful fp_get_recent_comments() function you can call in your theme. Here’s what parameters you can pass into it:

• Number of comments to show: Total number of comments to display
• Number of words per comment excerpt: The first N words of the comment will be listed
• Max comments per post: This option is a “cap” to ensure that multiple posts are included in the list, even if all the recent comments were from a single post.
• Max letters per word: This option is to deal with long “words” in the comments (specifically raw URLs) that can interfere with the formating of the list, depending on the CSS rules applied.

Update: Ray Fowler suggests in a comment below filtering out the admin comments

That way when I reply to a whole bunch of comments, I am not the only one showing up in the sidebar. Besides, I would rather highlight my guests rather than myself.

I did this with my recent comments widget by adding the extra condition and user_id !='1'. Where 1 is the admin’s id.

So the original line

$request .= "AND comment_approved = '1' ORDER BY comment_ID DESC LIMIT $limit";

would become

$request .= "AND comment_approved = '1' AND user_id  <> '1'  AND comment_type <> 'trackback' AND comment_type <> 'pingback' ORDER BY comment_ID DESC LIMIT $limit";

When done, without much effort you should be able to adapt the code to fit any similar JavaScript image gallery(/slider/switcher/swapper… whatever).

So let’s take a look at it:

• the manager (demo)
• the gallery you’re managing
  

Smooth Gallery Manager

As mentioned on the manager page, the password is “demo” and you don’t have sweat about  removing/adding/reordering images—the manager in the demo resets the file to an initial input each time a user logs in.

For faster testing: right click some photo from the internet, select copy image location and paste it in the Add New Item/Image location field (that’s the only required field). Then press Add. Then in the Edit Items part copy and paste image locations from one item to another and then update it.

You might want to download the gallery + manager before continuing:

download: Smooth Gallery Manager (202.90KB) clicks: 1687 description: Databaseless PHP admin pannel for Smooth Gallery.

After you do, open up manager.php and follow along. Only the more important parts ware discussed below, the rest is commented in the file.

So how come no databases?

It’s an image gallery, it’s not gonna have thousands of entries. There’s not much justification in creating a database for 5-20 items. We’ll keep it all in the HTML.

And this will give us a chance to work with a really neat tool: PHP Simple HTML DOM Parser. This HTML parser written in PHP5+ is going to save us a lot of work. And I think this won’t be the last you hear of it here on VileWorks.

1. The logic behind it, in plain English

We’re going to have a simple log in/log out functionality, we don’t want anyone who knows the manager’s URI to be able edit our gallery.
After the log in, two main options will be available: add new item and edit existing items. …And a log out link.

if logged in
	if received 'add item'
		add the item;
	display 'add item' form;
	if received 'update items'
		update all the items;
	display 'update items' form;
	display 'log out' link;
else
	display 'log in' form;

The conditioned actions “if received ‘add item’ -> add the item” and “if received ‘update items’ -> update the items” are placed in the code before their forms so that they will display a success or error message in the page just above the form that was submitted.

The “add new item” functionality will add a new item at the beginning of the gallery: the image along with its title, description and a link to another page.

The “update items” will allow us to:

• change the items’ titles, descriptions, images and the URL the images link to
• delete items
• and to reorder the items

2. What’s the manager managing

Let’s take a look at the HTML code of a regular SmoothGallery.

<!-- some HTML code for the rest of the page -->
 
<div id="myGallery">
 
	<div class="imageElement">
		<h3>Image 1 Title</h3>
		<p>Image 1 Description</p>
		<a class="open" title="open image" href="1.html"></a>
		<img class="full" src="images/image1.jpg" alt="" />
 
	</div>
 
	<div class="imageElement">
		<h3>Image 2 Title</h3>
		<p>Image 2 Description</p>
		<a class="open" title="open image" href="2.html"></a>
		<img class="full" src="images/image1.jpg" alt="" />
	</div>
 
	<!-- ... -->
 
 
	<div class="imageElement">
		<h3>Image n Title</h3>
		<p>Image n Description</p>
		<a class="open" title="open image" href="n.html"></a>
		<img class="full" src="images/n.jpg" alt="" />
	</div>
 
</div> <!-- end of div#myGallery -->
 
<!-- some more HTML code for the rest of the page -->

And this is a kind of a common way for JavaScript image galleries to store their data in the HTML although some might have small differences like using <li>’s instead of <div>’s for the item nodes (which I believe is a more semantic way).

Note: The default Smooth Gallery also had a carousel displaying thumbnails of images. To keep things more general (and not just Smooth Gallery specific), the thumbnails will not be handled by the manager—they were also removed from the HTML—and the carousel was turned off in jd.gallery.js:

34

showCarousel: false,

However, after getting an idea about how the whole thing works, through a small process of intuition the specific functionality could be easily added.

3. Using the Simple HTML DOOM Parser to add a new element

The “add new item” action will basically just add a new HTML node at the beginning of the gallery with the inputted details it received from the form.

<?php
$html = file_get_html($gallery_location);
 
// store in the $items[] array all the maching elements
$items = $html->find('#myGallery .imageElement');
//the argument can be any CSS selector
 
// this only checks if the image url was received, the rest is optional
if (isset($_POST['add-img-url']) &#038;& $_POST['add-img-url']!='') {
		
	/* ADDING THE NEW ELEMENT */
 
	// creates a new element and then adds the default HTML in it
	// (an empty title, description, link and image)	
	$temp_item=new simple_html_dom();
	$temp_item->load('
	<div class="imageElement">
		<h3></h3>
		<p></p>
		<a href="#" title="open image" class="open"></a>
		<img src="" class="full" />
		</div>
	');
 
	// get the received values and set them to the new element
	$temp_item->find('h3',0)->innertext	= stripslashes($_POST['add-title']);
	$temp_item->find('p',0)->innertext	= stripslashes($_POST['add-description']);
	$temp_item->find('img',0)->src		= stripslashes($_POST['add-img-url']);
	$temp_item->find('a',0)->href		= stripslashes($_POST['add-linksto']);
 
	// add the new element at the beginning of the gallery div
	$html->find('#myGallery',0)->innertext = $temp_item->outertext . $html->find('#myGallery',0)->innertext;
 
	// try to save the new document
	if ( file_put_contents($gallery_location, $html->root->innertext()) ) {
 
		$html->clear(); 
		unset($html);
		$html = file_get_html($gallery_location);
		$items = $html->find('#myGallery .imageElement');
		echo '<h3 class="success">Item added</h3>';
 
	}
	else {
		echo '<h3 class="error">Error writing file!</h3>';
	}		
}
?>

The above snippet is just the part responsible for the “add new item” action. And this is where the HTML parser first comes in.

$temp_item->find('img',0)->src

Those of you familiar with the jQuery JavaScript library might have noticed the find() method. This searches for all descendant elements that match the specified expression (CSS selector). In the code above, the second argument for the find() method is the element’s index—in our case 0, because we always need the first (and only) match.

After getting to an element, you can easily manipulate its attributes (src, href etc) and its inner and outer text.

The image below illustrates the difference between the innertext and outertext.

Outer text is the element including its opening and closing tags and the inner text is just what’s “inside” of it, between the opening and closing tags.

What follows in the code is the HTML for the form which sends the data to the snippet discussed above.

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="add_new_item">
    <div class="span-8 add-item">
        <div class="span-8">
            <label for="add-title">Title: <br /><input type="text" value="" name="add-title" id="add-title" class="" /></label>
            <label for="add-description">Description: <br /><input type="text" value="" name="add-description" id="add-description" class="" /></label>
            <label for="add-img-url">Image location (required): <br /><input type="text" value="" name="add-img-url" id="add-img-url" class="add-img-url" /></label>
            <label for="add-href">Image links to (link to page or full size image): <br /><input type="text" value="" name="add-linksto" id="add-href" class="" /></label>    
        </div>
        <div class="form-foter span-8">
            <button type="submit" class="positive button-ok" value="Add">Add</button>
        </div>
    </div>
    <div class="span-9 last">
    	<img src="backend/1px.gif" class="preview" alt="Add image" id="add-preview" />
    </div>
    <hr />
</form>

4. Using the Simple HTML DOOM Parser to update the existing elements

And by “update” I mean edit, delete or reorder.

<?php
// if received "update form"...
if (isset($_POST['updateform']) &#038;& $_POST['updateform']=='was_submitted' ) { 
			
	// go through the array of elements...
	$j=0;
	$deleted_positions=array();
	for($i=0; $i<count($items); $i++) {
		if ($_POST['delete-'.$i]){ 
			// if 'delete' was selected, remove the node
			$items[$i]->outertext='';
			// ex: if 'delete-2' was selected, then delete the second element
 
			// store the deleted ones' positions in another array
			$deleted_positions[$j]=$i;
			$j++;
		}
		else {
			// update the information for each element...
			$items[$i]->find('h3',0)->innertext	= stripslashes($_POST['title-'.$i]);
			$items[$i]->find('p',0)->innertext	= stripslashes($_POST['description-'.$i]);
			$items[$i]->find('img',0)->src		= stripslashes($_POST['img-url-'.$i]);
			$items[$i]->find('a',0)->href		= stripslashes($_POST['linksto-'.$i]);
		}
	}
 
	/* Sort items by the inputted positions - $_POST['pos'.$i] */
 
	for ($i=0; $i<count($items); $i++) { // for each of the items
			// store the item's position in $positions[]
			$positions[$i]=$_POST['pos-'.$i];
	}
 
	/* The Bubble Sort */
	do {
		$sorted=true;
		for ($i=0; $i<count($items)-1; $i++) { // for each of the items
 
			if ( in_array($i,$deleted_positions) ) { // if the current item was deleted...
				$i++; // ...skip it
			}
 
			// if the current item is larger than the next AND the next wasn't deleted
			if ( ($positions[$i]>$positions[$i+1]) &#038;& !in_array($i+1,$deleted_positions) ){	
						
				$sorted=false; // items weren't sorted
 
				// swap the position values in the $positions array
				/* since these are not tied to the items in any way, 
				they have to be swapped separately in their own array */
				$temp_position	= $positions[$i];
				$positions[$i]	= $positions[$i+1];
				$positions[$i+1]= $temp_position;
 
				// swap the contents of the items (their title, description, link, image location)
				$temp			= $items[$i]->innertext;
				$items[$i]->innertext	= $items[$i+1]->innertext;
				$items[$i+1]->innertext	= $temp;
			}
		}
	} while (!$sorted); // repeat this while the items are not sorted
 
	// try to save the new document
	if ( file_put_contents($gallery_location, $html->root->innertext()) ) {
		$html->clear(); 
		unset($html);
		$html = file_get_html($gallery_location);
		$items = $html->find('#myGallery .imageElement');
		echo '<h3 class="success">Gallery Updated</h3>';
	}
	else {
		echo '<h3 class="error">Error writing file!</h3>';
	}
}
?>

4.1 Updating and deleting

In the first loop we’re going through the items and if an item was deleted, the outer text is set to null and its position is stored in the $deleted_positions array (we’ll need these positions when we sort them).
If the item wasn’t deleted, all its information will be updated.

4.2 Sorting the items with Bubble sort

The do…while loop in the snipped above uses the Bubble sort method to sort the items by positions.
As mentioned in the comment, besides the actual item swap we also need to do an swap for the positions, since these aren’t connected to the items—they’re just stored in the $positions array.

Followed by the form with all the options for each image. This is where the updates are sent from to the snippet above.

<form action="<?php echo $_SERVER['PHP_SELF']; ?>#update" method="post" name="update_items" >
<?php
	$i=0;
	foreach($items as $item) {
		$position=$i+1;
?>
	<div class="item span-8 <?php if ($position%2 == 0) echo  'last'; ?>">
 
		<input type="text" class="image-title" value="<?php echo $item->find('h3',0)->innertext; ?>" name="title-<?php echo $i; ?>"/>
 
		<label class="delete" for="delete-<?php echo $i; ?>">Delete?
			<input type="checkbox" value="delete" name="delete-<?php echo $i; ?>" id="delete-<?php echo $i; ?>"/>
		</label>
 
		<input type="text" class="description" value="<?php echo $item->find('p',0)->innertext; ?>" name="description-<?php echo $i; ?>"/>
 
		<img src="<?php echo $item->find('img',0)->src; ?>" alt="<?php echo $item->find('h3',0)->innertext; ?>" class="preview"/>
 
		<input type="text" class="img-url" value="<?php echo $item->find('img',0)->src; ?>" name="img-url-<?php echo $i; ?>"/>
 
		<label class="position" for="pos-<?php echo $i; ?>">Position:
			<input maxlength="3" class="position" type="text" value="<?php echo $position; ?>" name="pos-<?php echo $i; ?>" id="pos-<?php echo $i; ?>"/>
		</label>
 
		<label class="linksto" for="linksto-<?php echo $i; ?>">Links to: 
			<input type="text" value="<?php echo $item->find('a',0)->href; ?>" name="linksto-<?php echo $i; ?>" id="linksto-<?php echo $i; ?>" /><br />
		</label>
 
	</div>
<?php
		if ($position%2 == 0) echo '<hr class="invisible" />';
		$i++;
	}
?>
	<div class="span-17 form-foter">
		<input type="hidden" value="was_submitted" name="updateform" />
		<button type="submit" id="apply-changes" class="positive button-ok" value="Apply Changes">Apply Changes</button>
		<button type="reset" id="resetbutton" class="negative button-cancel" value="Discard Changes">Discard</button>
	</div>
</form>

Nifty fact: Because of the way we’re using the positions, we’re able to enter any rational number as a position. So if you wanted to put the last image on the 2nd position, you’d just have give it a position of 1.5 (or anything between 1 and 2), instead of giving it 2 and changing the position for the second to 3 and for the 3rd to 4 and so on. And after pressing submit, the order is achieved and the positions are nice natural numbers again.

Because we just want two items per row we’re checking if the position is an even (if ($position%2 == 0)) and if it is we’re adding some class for the CSS to handle and an horizontal ruler.

Conclusions

So this pretty much covers the PHP part. I commented as much as I could of the code but still, feel free to shoot any questions in the comments.

Of course, the view needed some CSS stylying for a decent display. The Blueprint CSS framework was used for faster and cleaner development.
And some more JavaScript (mootools to be more precise) improvements made their way in, achieving tasks like:

• select all text when clicking in a text field
• instantly change the displayed image when the text in the image location is changed
  • and this means the Reset button now has to reset back all the images and not just the fields

//select all onfocus for text fields
$$('.item input, .add-item input').each(function(item, i)	{
 
 
	item.addEvent('focus', function(e){
		item.select();
	});
});
 
//refresh image on input change
$$('.img-url').each(function(item, i)	{
	item.addEvent('keyup', function(e){
		item.getPrevious('.preview').src=item.value;
	});
 
	item.addEvent('blur', function(e){
		item.getPrevious('.preview').src=item.value;
	});
});
//refresh image on input change (on the add image form)
$$('.add-img-url')[0].addEvent('keyup', function(e){
		$('add-preview').src=$$('.add-img-url')[0].value;
});
$$('.add-img-url')[0].addEvent('change', function(e){
		$('add-preview').src=$$('.add-img-url')[0].value;
});
 
//reset back all images on reset
$('resetbutton').addEvent('click', function(e){
	$$('.item .preview').each(function(item, i)	{
		document.update_items.reset();
		item.src=item.getNext('input.img-url').value;
	});
});

So that’s about it. Hope the effort invested was worth it and the result was of help to you.

For those of you interested, there’s a tutorial on Nettuts with a similar goal using PHP and mySQL:

For this lesson, our goal is to create a photo admin section where an administrator can retrieve photos from a database and update the title of his photos simply by clicking on the appropriate text.

This neat little login system, Micro Login System, seems to have the basic stuff for me to start with but, as said it stores the user info in a text file.
The contents of userpwd.txt would have been:

admin:3089af3a625carf15ed2a1a93684413ffa
user1:75580656a394292460ebb4b036ebeaf1
user2:c67ac4665947cd23ff7d1d180b8e41d5

That’s user : md5( password ).
I was concerned about this because anyone who knew about the system could have entered address/userpwd.txt in the address box and gotten that info.

My solution

Php files are pretty secure right?…

scroll down to the conclusion to skip the whole story

They’re processed on the server before the client gets the output. How about giving the file a php extension instead of txt?

Of course this wouldn’t be enough, because the output would be exactly the same as the file’s contents. But now that it’s a php, we can write php code in it. What if the userpwd.php looked like this:

<?php header("HTTP/1.0 404 Not Found"); die(); ?>
admin:3089af3a625carf15ed2a1a93684413f
user1:75580656a394292460ebb4b036ebeaf1
user2:c67ac4665947cd23ff7d1d180b8e41d5

The login system can be made to ignore the first line when doing its thing, because it runs server side and can read the contents of userpwd.php as it is on the server (like it was reading the txt version of the file), so there’s no problem here.

But if a client tries to open userpwd.php in his browser, the die(); function will be executed when the server processes the php code in the file and the script is terminated, thus outputing a blank page.

Optional stuff

The header(“HTTP/1.0 404 Not Found”), is an attempt to mislead anyone trying to type in the file name by sending the browser a 404 Page Not Found status. I even went as far as adding an error message as a parameter for the die function that looks like the default html for a 404 error in most browsers:

die("<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML 2.0//EN\"> <html><head> \n<title>404 Not Found</title> \n</head><body> \n<h1>Not Found</h1> \n<p>The requested URL was not found on this server.</p> \n</body></html>");

So our userpwd.php would look like this:

<?php header("HTTP/1.0 404 Not Found"); die("<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML 2.0//EN\"> <html><head> \n<title>404 Not Found</title> \n</head><body> \n<h1>Not Found</h1> \n<p>The requested URL was not found on this server.</p> \n</body></html>"); ?>
admin:3089af3a625carf15ed2a1a93684413f
user1:75580656a394292460ebb4b036ebeaf1
user2:c67ac4665947cd23ff7d1d180b8e41d5

And now, if anyone were to open the file in their browser, they’ll get a page with this source code:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> 
<html>
<head>
    <title>404 Not Found</title>
</head>
<body>
    <h1>Not Found</h1>
    <p>The requested URL was not found on this server.</p>
</body>
</html>

Background story

I’m gonna start working on a simple CMS which I’ll be releasing open source. Now this should be really simple as in:

• user already has his/her own site (probably a static html site)
• user uploads a folder to his/her root dir via ftp—and that’s all, without having any database involved
• pages are editable in certain ways by a script in that folder

And that about covers it (until further development). But before I actually start putting things together I was exploring possibilities and ran into this.

Conclusions

The most secure txt file is a php file

So let’s take a look at it again…
If you don’t need/don’t want to use mySQL or any other database but have some sensitive data to store in a flat file:

• give it a .php extension
• it should have this text on the first line: <?php die(); ?>

Optional: Or to fake it into looking like a 404 Not Found page, it should have this first line (instead of the above):

<?php header("HTTP/1.0 404 Not Found"); die("<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML 2.0//EN\"> <html><head> \n<title>404 Not Found</title> \n</head><body> \n<h1>Not Found</h1> \n<p>The requested URL was not found on this server.</p> \n</body></html>"); ?>

If you’re interested in the login system I’ve been talking about, you can download it and read a tutorial explaining how it works here: Micro Login System.

Think different?

Can you think of any reason for this not be secure? Do you think I’m reinventing the wheel here?
Mention it in a comment here, or leave me a private note via my contact form if you think I’m missing anything.

How I use captcha without making my users complete the barely readable word

Capthca sucks. For more information on how much captcha can suck see John Willis’ post Top 10 Worst Captchas.
But at the same time it can be really annoying for webmasters to have their forms unprotected with all the spam bots running free out there.

What I wanted was to have the commenting feature protected against spam bots without having the innocent human users ruining their eyes on captcha like images, or complete any mathematical equation or any other additional question fields.

One very important difference between a spam bot and a human using a web browser is that the first can’t run JavaScript code. However, this isn’t a perfect criteria of selection, because there are humans browsing the web using browsers without JavaScript support (Opera Mini for mobile devices for example).

My ideea (and as I did some Google searches, I found out other people had similar ideas) was the followig algorithm:

Does the user have JavaScript enabled?
If yes, he’s ok. Let him comment.
No? He’s a suspect. Read him his rights and give him the ultimate “are you human?” test.

To do this I left the captcha system enabled and in place and wrote 2 extra lines of JavaScript that:

//complete the text field with the correct word from the image:
$('secretword').value='nospam';
//hide the div containing the captcha image and the text field:
$('captcha').style.display='none';

Update: I wrote/recorded a follow up post/screencast explaining how to implement the hidden captcha.

That’s mootools JavaScript, the $ sign stands for document.getElementById(), ’secretword’ is the id of the text field where the secret word from the image should be completed and ‘captcha’ is the id of the div containing the captcha image and text field.

So… if the user doesn’t have JavaScript, he gets the normal captcha, if he does, the captcha is solved by the first line of JavaScript and its existence is hidden by the second.

To make my life a lot easier I made my captcha output only one word, nospam, so I didn’t have to get the secret word from the server each time.
I was able to get away with this because I doubt anyone is going to make a special spam bot for VileWorks.com so their stupid spam bot brain will never know that the “secret word” is nospam. The same word, over and over again.
If anyone would go through the trouble of adapting their spam bot to my script, I would simply change the word. Or I would go myself through the trouble of setting the captcha back to outputting random letters and get the secret word back from the server each time.

Is this a good solution for future protection against spam for large web sites?

Certainly not. Especially not for larger sites. Even if the words were random letters and the JavaScript was written server-side to complete the form with the correct word each time (think $(’secretword’).value=’&lt;?php echo $secretword; ?&gt;‘; ), as long as the secret word is in the source code of the page, it can be reached by spam bots.

Is it a good solution for me and a whole lot of other website owners?

Yes. As long as nobody can make a lot of income by any form of spam on your specific website and as long as there aren’t thousands of websites that use this same specific system, nobody’s going to bother to adapt a spam bot to your website.

Spam is only profitable when done massively. It might take a spammer only a 20 minutes to program his spam bot to beat the system I’m talking about, but it would take me even less time to delete his comments, ban his ip and slightly change something in my code so he would have to reprogram his spam bot.

Unless he was some sociopath trying to annoy me, he would never go throught all the trouble.
Bottom line is: the best solutions are specific solutions.

Ever seen those forms asking you to prove that you are human by entering “the result of 8 + 5″? Do you think it’s hard to make an automated solution that reads two numbers and outputs their sum? Of course not. Nobody bothered because they aren’t popular enough to be of any interest.

Here’s what you should be achieving:

Step 1: Getting the actual map

Go to maps.yahoo.com, find your area and zoom in to a desired level—I went in somewhere between City and Street view in some area in Bucharest, Romania but you can also do a Country view. If your part of the world isn’t covered by yahoo maps, try google maps or get a regular image of a map fmor the area you need.

Update: Simon suggests in a comment below that to avoid any legal implications in using a screen capture from Google or Yahoo Maps in your artwork, you should rather go with an open map provider as openstreetmap.org.

Hit the PrintScreen key, go in Photoshop and paste it in a new document and then Crop (C key) the image keeping only the desired part. Use the Patch Tool or the Healing Brush Tool to remove the center cross.

Step 2: Applying the old paper texture to give it a vintage look

For the second step you need an old grunge paper texture. I used this free image from cgtextures.

Paste it on a new layer above the map and set the blending mode to Multiply. If your image turns out to dark, select the paper layer and go to Image > Adjustment > Brightness/Contrast and set set the brightness to a higher value (I didn’t need to). You may also need to adjust its size and position.

Step 3: Adding a photograph

Now you need to find a suited image of your city/region. Well, it doesn’t necessarily have to be related to your region as long as it looks good. I used this image of the The Athenaeum in Bucharest. But I also found fantasy/surreal art images to look great here (examples at the end).

Paste the image under the paper layer and adjust its blending mode, opacity and brightness/contrast. I used Multiply with a 50% Opacity but you may want to try other values for your image of choice (like Soft Light for the blending mode or increasing the Brightness).

Step 4: Clear the roads!

Next thing I did here was to create a Layer Mask to the Bucharest Athenaeum layer and while having the mask selected and the foreground to black, I used a 100px brush with 0% hardness to brush away the sky.

Then, with the same brush, but after setting its Opacity to 50% I brushed some more on the mask in regions I considered to “crowded” like where there were roads and texts from the map layer and trees and building parts from the Athenaeum image.

I then reduced the brush size and brushed some more along the roads.
The brush size should be smaller than the road width. Try to only brush inside the roads.

Step 5: A nice final touch, the borders

Your layers should now be in this order: Paper layer (up most), Photograph layer and Map layer.

While having the Photograph layer selected, create a new layer (Ctrl+Shift+N), name it Borders and fill it with white (press D and X to make the foreground color white and Alt + Backspace to fill it with color).

Hit Ctrl+A to select all, go to Select > Modify > Contract and contract the selection by 19px. Change the Foreground Color to #999999 and hit Alt+Backspace to fill the selection. Go to Select > Modify > Contract again and enter 1px. Hit the Delete key to clear the selection.

And you’re done. Gongrats!

Oh, right… I promised the fantasy examples:

I used two layers with two photographs for the one above, both with Multiply blending mode and both with layer masks.

And another one, of a south Romanian view (click to expand):

Go beyond: add a page curl using Veerle’s tutorial and place it on a desk environment!

Let me know how it all went. Good luck!

Well, besides the lack of SEO, low usability (for example: back button not working, “find on this page” not working, the “make text bigger/smaller” button not working etcetera), nonstandard user interface, fully flash based sites are pretty much ok.

This is a really old issue and of course modern technology offers solutions like Flex for powerful web applications, but unfortunately the web is still filled with flash based sites… which use flash just for the design’s sake.

I’m not stating here that flash is bad or anything. It actually is GREAT! It’s the best choice right now for online streaming video or audio, the only choice for some web applications or games, a good way to make your banner ads stand out (even though this can be really annoying for the visitors but that’s a different topic).

Seeing how this is such an old topic, I need not to go in any more details as some people excellently did that already:

Making god use of flash: When you should and shouldn’t use it. Is Flash going to help me in communicating with my audience?

Flash: 99% Bad.

Really, people… these things are so last decade even my article looks old fashioned. There’s all the talk about web 2.0 and taking this paradigm to the next level… Do you think the definitions “the web as a platform” or “the web as a database” can include your site that not even Google can index due to the fact that the only navigation you have between pages is a flash menu?

Large centered bg image + Firefox + 800×600 resolution = trouble.

Ok, let’s say my website has the following CSS code for the body:

background: #000000 url(img/bg.jpg) top center no-repeat;

That’s a black background with a centered image on the upper side. The “center” part should mean that the middle of the image will be in the middle of the browser’s view port. That’s pretty straight forward and looks as it should in any browser with CSS support.

Except in Firefox and Opera on a low enough resolution, or if the browser’s window size is small enough the background image starts going left at a certain point! Works fine in IE.
If you’re on Firefox or Opera, go ahead… resize this window making it narrower and narrower. You’ll see the VileWorks logo going left. Now scroll right to see how the design broke apart Update: not anymore.

Usually, when something works on Internet Explorer and doesn’t work in Firefox it’s somehow my fault and the fact that it works ok in IE is an IE bug. But I can’t see how the above code couldn’t be correct. And it doesn’t just happen to me, I’ve seen this on a lot of sites with large, centered, no-repeat background images. All of these designs break somehow on a (for example) 800×600 resolution.

body {
    background:#000000 url(img/bg.jpg) center top no-repeat;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:14px; line-height:20px;
 
    /* These two: */
    display:table;
    width:100%;
}