But what if you need to tell someone else that password, or perhaps log in on another computer?

Raymond.cc has a great solution to this problem. He has written a piece of JavaScript code that you can simply copy and paste into your browser’s address bar to reveal any hidden passwords on the page that may be saved.

Here’s the code!

Check out his blog at Raymond.cc for more info and instructions on usage.

This article discusses some simple things you can change on an old website without much effort or re-working of the HTML coding – ideal for situations where you don’t want to go for a full re-design but want to make some minor changes to improve your website’s appeal.

Background Images

The first easy switch that comes to mind is an updated background image.  Does your site have a plain color background?  You can really spice up a design by adding a gradient or texture to the background of the page overall – just make sure that it is congruent with the overall feel of the site!

Re-work Typography

Poorly thought-out (or rushed, as is usually the case) typography can cause a dated or otherwise unappealing look.  Put some thought into your fonts and heading styles and be sure to have ample line height.  By making everything more consistent from page to page and adding typographic contrast between headings and body text you will look your pages look cleaner.

Upgrade to CSS3!

New options in CSS3 make adding some pizazz to an old design easy.  Using new CSS3 styles like text-shadow, border radius, and more, you can add a layer of design precision to your websites that was previously only possible using images!

Use Brighter, Sharper Images

Using media and interface elements using higher quality images and more saturated colors in your design can bring a more modern look to your website.

Implement Sharing Tools

A truly easy upgrade for any website is adding a sharing tool, such as the Meebo Bar to the site.  While this doesn’t effect the design much, it does bring some modern functionality to the website with no coding required!

Font Squirrel’s @Font-Face Generator

@font-face was CSS’s original answer to the web-font question, but due to poor browser support and confusing implementation methods, it hasn’t yet taken off.  Font Squirrel’s generator, on the other hand, combines the @font-face declaration and uses a combination of javascript and CSS hacks to make it work in old, incompatible, and obscure browsers.

http://www.fontsquirrel.com/fontface/generator

Typekit – A commercial approach

Typekit takes a new approach to web-fonts.  One of the forgotten (yet increasingly important) aspects of the web-font issue is the licensing.  With most solutions, designers use fonts online without thinking about licensing.  Typekit does all of that for you – at a cost.

Typekit is the first commercial model which hosts web fonts as a service.  Integration into your pages is supposed to be very easy and seamless.

http://typekit.com/

In this article, I’ll provide a sample script that I have used and adapted for several galleries and other similar tasks. This article is meant for developers, but I will do my best to take as much of the “lingo” out of it as I can, and explain and document it well. Even if you don’t know programming or PHP at all, this should be a useful tool for you. I developed this with only a basic knowledge of PHP syntax and a bit of guess and check. Check out the example!

Robot work

If you are a web developer, you’ve probably been in this situation before, and this code snippet might look familiar:

<li><a href=”images/gallery/01/01.jpg” title=”Caption” rel=”lightbox”><img src=”images/gallery/01/thumbs/01.jpg” alt=”Click for Full Size” /></a></li>

For every image in your gallery, that line needs to be repeated, with the image source, link href, and caption changed. Sounds like a wrist-cramp in the making – definitely what I’d call “Robot work”.

A Scripted Solution

This situation just begs to be automated. Being a php enthusiast, I decided to embark on a small adventure – write a script that will produce this HTML automatically. Here it is, in all its simplistic glory (Pardon any coding faux pas – I am not the most experienced PHP developer in the world). This script is used with a lightbox gallery called “Sexy Light Box”. A grid of thumbnails which can be clicked on for larger view is our goal here.

<?php
$folder = 'images/gallery/';
$extension = '.jpg';
$group = '[group1]';
$caption = 'Caption';
$alt = '';
$title = '';
$iterations = 28;

$wrap1 = '<li><a href="';
$wrap2 = '" rel="sexylightbox';
$wrap3 = '" title="';
$wrap4 = '"><img src="';
$wrap5 = '" alt="';
$wrap6 = '" /></a></li>';
$i = 1;

while ($i <= $iterations) {
if ($i >= 10) {
$string = $wrap1 . $folder . "/" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . $i . $extension . $wrap5 . $alt . $wrap6 . $title . $wrap7 . "\n";
} else {
$string = $wrap1 . $folder . "/" . "0" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . "0" . $i . $extension . $wrap5 . $alt . $wrap6 . "\n";
}
echo ("$string");
$i++;
}
?>

The Breakdown

This script allows the developer to simply define the gallery directory, number of images, and an (optional – not included in this version) array of captions. Below I will explain the code line by line.

$folder = 'media/gallery';

Defines the folder in which the images are.

$extension = '.jpg';

Image extension. Currently the script requires that all images have the same filetype

$group = '[group1]';

Most lightbox scripts support “groups” or galleries – matching “rel” tags define your gallery

$caption = 'Caption';

Title tag of the linked full-size image. Most lightbox scripts use this as a caption.

$alt = '';

Alt tags for the images. This could be converted to an array if you are concerned about unique alt tags for your gallery thumbnails

$iterations = 28;

The number of images in the gallery.

$wrap1 - $wrap6

these are just the chopped parts of the HTML that is being created and wrapped around the variables.

while ($i <= $iterations) {

$i is a placeholder variable known as an “index”. It is increased by each time the while loop is completed. Once $i is greater to or equal than $iterations, the loops condition becomes false and it is no longer repeated

if ($i >= 10) {

This line is deals with the naming scheme of the images. I name my images 01.jpg, 02.jpg … instead of 1.jpg, 2.jpg etc. Because of this, I had to include a line that would add a “0” to the code IF the image number is less than 10.

$string = $wrap1 . $folder . "/" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . $i . $extension . $wrap5 . $alt . $wrap6 . $title . $wrap7 . "\n"; }

This is the line where all of the HTML wraps and the variables you set earlier are combined. This version of the command includes the “0” I mentioned earlier. The final HTML that is about to be “echoed” is saved to the variable $string

else {

If the image number is 10 or above…

$string = $wrap1 . $folder . "/" . "0" . $i . $extension . $wrap2 . $group . $wrap3 . $caption . $wrap4 . $folder . "/thumbs/" . "0" . $i . $extension . $wrap5 . $alt . $wrap6 . "\n";

This familiar line of code has the same function as the previous “combiner” line. The only difference is that this one leaves out the 0, to avoid getting “010.jpg”.

echo ("$string");

This prints the first line of the gallery! Yay! The echo command takes our “$string” variable and prints it to our webpage.

$i++; }

The index variable $i is incremented, or increased by 1. This keeps our script from looping infinitely and lets it know when we’re out of images. Once the script hits this line, it goes back to the top of the “while” loop. If the initiating condition (“$i <= $iterations”) is true, the loop will run again, creating a new line for our gallery.

Simple enough?

This is a pretty basic script, and I’m sure it could be improved upon, but for now it definitely saves time, and is easily adapted to many purposes.

Pros and Cons

Pros: Adaptable, time saving, and simple. The script is re-usable several times on the same page if more than one gallery is on the page.

Cons: Slight server overhead which is probably negligible. Each time the page loads, the server has to generate that HTML. In my opinion, this hardly matters for such a small-scale site.

Wrapping Up

Thanks for checking out this script. I hope you’ve learned something from it!

You can download the example code HERE.

To learn more about the javascript used to make the gallery fancy, check out Sexy Light Box – compatible with jQuery AND mootools.

Free clipart

http://www.webweaver.nu/clipart/

Web Generator

http://www.ornj.net/webalbum/

Free Photo Gallery Generator

There are several programs to choose from at this link

http://www.web-album-maker.com/

Free CSS templates (Which we do not use)

http://www.freecsstemplates.org/

What does this mean for developers?

The new documentation is so thorough that anyone should be able to make simple scripts, even with minimal programming knowledge.  Every function is documented, complete with code snippets, examples, and common questions and answers.

There are also new functions that allow very simple manipulation of HTML elements – allowing for very easy presentational JavaScript.  These new functions simplify previously difficult actions.

Check it out today!

http://api.jquery.com/

http://jquery14.com/day-01/jquery-14

Innovative and curious as the developers are Pro Web Marketing are, we’ve found several alternatives that can avoid the downsides of traditional solutions.

Fahrner Image Replacement

Fahrner Image Replacement is a technique that was originally thought up by Todd Fahrner, but it is simple and obvious enough that many other designers and developers have thought of it on their own (Us included!)  The idea is that you may use CSS (Cascading Style Sheets) to “Hide” the heading, and superimpose the graphic version of that text over it.  This is good for basic header replacement, but it requires a lot of manual work.   The text is also impossible to “copy” for an end-user, which is bad for accessibility.

…Read more about FIR

(Scalable) Inman Flash Replacement (sIFR)

sIFR is a technique which uses Adobe’s Flash Player to replace text with a dynamic flash layer automatically.  It utilizes Flash, JavaScript, and CSS to create what is probably the most full-featured option to show your fonts in their full glory.  The only downsides?  It is a real pain to set up, and it requires that your users have a modern version of the flash player.  It can also cause havoc on slower PCs!

…Read more about sIFR

Cufon – My personal favorite!

Cufon is a project designed to replace sIFR.  It uses JavaScript and a custom “Generator” to create a script directly from your font.  All you have to do is generate the script, include it, and deploy it at specified selector tags (headings, etc).

Cufon works in all major browsers and does not interfere with any text interaction such as copying and pasting, and even allows for perfect search engine spidering.

Check it out here

Looking to the future – CSS3 and Modern Browsers

CSS3 includes the “@font-face” property as part of its specification.  This will allow developers to specify which font they want to use by uploading a copy of it to their server.  The code will work like this:

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

Once all major browser vendors have implemented this into their specification, this technique will become more popular.  Learn more about the spec here.

Conclusion

Using non-standard fonts still requires a bit of extra work at this point, and all of these techniques should only be used sparingly.  Your pages main body text should still be a web-standard font, for most cases.

Here is a free web-based tool that does just that.  It is called ‘Add This’ and can be seen here at this web site:

http://www.addthis.com/

You pick the options you want and the site will automatically generate the HTML code needed. You simply copy/paste this this code and place it on your Web site or with-in the template of your blog.

If you are not exactly sure where to place the code, contact a friend that has basic HTML skills and they can help you. It should only take about 15 mins.

Now when someone wants to share an interesting blog post or page on your web site, they simply click on the icon that they have an account with. For example, if someone has a Facebook account, they click on the Facebook icon, login to there Facebook account, and they post a brief mention of your content. This generates more exposure for your site and is a great way to get traffic. It basically allows other people to promote your web site and blog, for no cost!

The other benefit of this tool is that once a person posts a mention of your content on there social networking account, it creates what is called a ‘back link’. A back link is simply a link on a web site that links to your web site. The more back links that you have from sites that have relevant, similar content, the better. Google and other search engines put a decent amount of weight on how many quality back links you have. Basically the more quality back links, the more important you site must be in the eyes of the search engines.

So if your looking for a free, easy to use tool that allows others to share and promote your site, then I would highly recommend using this service.

There are two secure programs that enable you to securily share your files and documents with staff and clients.

Microsoft Groove is by far the best collaboration program.  It allows you to collaborate calendars, documents, meetings, and much more.  If you have Microsoft Office 2007 Professional, you already have Groove available.

If you do not have Groove, Dropbox is a great little collaboration program that allows you to share and transfer up to 2 gig of space for free.

Check out jQuery today – http://jquery.com/