Windows Vista has a nice option labeled Show characters
right below password input fields:
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:
Say I had some CSS or JavaScript techniques/effects I wanted to show in a blog post.
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.
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
Of course, you have to include jQuery if you’re not using it already in the page. Continue reading…
As I was saying in a past–not so documented–article, this is how the Hidden Captcha concept works:
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.
In this tutorial I’ll walk you through the steps involved in building a databaseless PHP admin section for Smooth Gallery.
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:
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.
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.
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:
Here’s the deal: I need to store some sensitive data (user names and passwords) in a flat file. I don’t want to make any use of databases because this would defeat the whole purpose of the project. Of course, the passwords will be md5 encrypted in the file, but this wouldn’t be enough.
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.
Php files are pretty secure right?…
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';
Why shouldn’t you use flash for your website? Can there be anything wrong with a website that “enhances” the user experience by flying/zooming/swirling/flipping in like a .PPS document?
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?
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?
Update: Fixed! Scroll to the end of the article to see how to fix this.
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.
What I did was I added the last two properties to the body element in the stylesheet:
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%; }
You can find 
RSS