The web this site was written for: the techniques that were right and are now wrong

The reason those tutorials are still dangerous is that they are not incorrect. Follow the 2006 steps today and you will get exactly the result promised. The result is what has expired, along with the constraints that made it sensible, and no step in the instructions tells you that.

The glossy button: 7 steps in Photoshop, now 4 lines of CSS

The glossy button was a Photoshop job in 2006 because no shipping browser drew a rounded corner. A rounded corner was an image or it did not exist, and if the button had to be a picture anyway, it might as well be a good picture. The recipe ran roughly like this, and it is worth reading once for what it cost:

1. Draw the shape with the Rounded Rectangle tool at a 10 px corner radius.
2. Apply a vertical Gradient Overlay, darker stop at the bottom.
3. Add a 1 px inner stroke a shade darker than the fill.
4. Draw an ellipse across the top half, fill it white, and drop it to 20 to 30 percent opacity so the highlight stops dead on the midline.
5. Add a Drop Shadow at 90 degrees, small distance, low opacity.
6. Set the label text inside the image, because the typeface you wanted was not available to a browser.
7. Duplicate the whole thing, lighten it by 10 percent for the hover state, export both as .gif or .png, and stack them into 1 sprite image that the CSS offsets with background-position on :hover.

What went wrong was never the picture. It was step 6. Because the label lived inside the image, every new button meant a new export, every wording change meant a trip back to Photoshop, and every translation meant a complete second set. A button was not a button, it was 3 pictures and a maintenance problem, and a large site carried hundreds of them.

Now the browser draws it: border-radius for the corners, linear-gradient() for the fill, box-shadow for the lift, and :hover with a transition for the state change. The label is real text, so it is selectable, translatable, searchable, resizable and readable by a screen reader, and it costs 0 image requests. The verdict is not that the old picture is ugly. It is that it is unmistakably dated, and here is what gives it away: the hard-edged ellipse of highlight stopping at the midline, the 1 px bevel, and the mirror reflection under the logo.

Dynamic CSS file loading, and what stylesheets do instead

Loading a stylesheet through PHP was one of the cleverest things on this site in 2006, and it solved a real problem: CSS had no variables, no maths and no conditions. You named the file style.php, sent header('Content-Type: text/css'); as the first line, and suddenly a stylesheet could have a colour defined once, a loop, and a value that depended on who was asking. Sites paired it with a style switcher: <link rel="alternate stylesheet"> for a high-contrast or large-text version, plus a cookie to remember the choice, plus the 3 little A A A buttons in the corner of the header.

All of that has been absorbed, and by better mechanisms:

• Custom properties put variables inside CSS itself: declare --brand: #0a5; once and use var(--brand) everywhere, with no server round trip.
• prefers-color-scheme and prefers-reduced-motion read the choice the reader already made in their operating system, so nobody has to find your switcher.
• Media queries and clamp() handle width and scale, which is what most of those PHP calculations were doing.
• Browser zoom made the 3 text-size buttons redundant about 15 years ago.

This one costs you something now, which is why the verdict is firmer than nostalgia. A stylesheet generated per request is not a static file: it does not cache like one, it runs code on every hit, and it cannot sit on a CDN without extra work. The idea was right and it moved: generating CSS from variables is now a build step, run once before deployment, not a thing that happens while a reader waits.

Hand-built RSS in PHP

Writing an RSS feed by hand in PHP is the technique on this list that is still CURRENT, with 1 correction. The format has not changed: an XML declaration, <rss version="2.0">, a <channel> with a title, a link and a description, and 1 <item> per post, served with header('Content-Type: application/rss+xml');. It was taught here as a loop over a database result, and that code would still work.

What changed is that almost nobody needs to write it, because the CMS emits one. WordPress publishes a feed at /feed/ with no code from you at all. Hand-building is correct in exactly 1 situation now: you are generating a feed from data that no CMS owns. If you are in that situation, the 2 things that broke feeds in 2006 are still the 2 things that break them: an unescaped & or < inside a title, which invalidates the whole document rather than 1 item, and a publication date in the wrong format. Escape the text or wrap it in a CDATA section, and check the output in a feed validator before you announce it.

The reading habit moved on, and the format did not care. RSS is plain XML, anything can still consume it, and it outlived most of the readers that made it famous.

Every site had a registration form

In 2006 a site was not a real site until it had a registration page, a member profile and a member count in the sidebar. This one had all 3. The assumption was that an audience was something you enrolled, and the technique for it was standard: a form, a users table, and a password column.

The verdict is DATES THE PICTURE, and this is the 1 item on the list where the dating is not cosmetic. A registration form means you are storing other people's credentials, which is a liability you now have to defend for as long as the site exists. The 2006 habit was md5($password) written straight into the table, frequently with no salt, and that is the single most dated line of code in the whole archive. The modern equivalents are password_hash() and password_verify(), which choose the algorithm and the salt for you and are designed to be replaced as the algorithm ages.

The bigger correction is architectural. Most sites that had accounts in 2006 did not need accounts, and most sites like this one do not have them now: a comment does not require an identity, and a mailing list is an email address. What goes wrong is not an active login form, it is a forgotten one. Every abandoned registration page is a database of reused passwords with nobody watching it, still answering requests years after the last person signed up.

What happened to the programs these tutorials were written for

The same 20 years sorted the software into 3 different fates, and the archive here covers all 3.

• Adobe Fireworks: DISCONTINUED. Adobe announced the end in May 2013, citing overlap with Photoshop and Illustrator, and shipped no replacement. Adobe XD became the company's direction for screen design, and the work went to Figma and Affinity Designer. Its native document was a .png with the structure held in private chunks, so old files still open flat in any current editor.
• PaintShop Pro: CURRENT. Corel purchased Jasc Software and the distribution rights in October 2004, and the program is still sold: PaintShop Pro 2023, version 25.0, published December 2022, with a free trial from Corel's own site.
• Photoshop: current, and much of what was taught here is now automatic. Removing a background was a 20 minute job with a lasso, a feather and a lot of undo. It is now 1 click on the Contextual Task Bar, which detects the subject and builds the mask, with Select Subject doing the same job including hair from the same bar.

What predicted those outcomes was not which program was best. Fireworks was better at its job than either of the programs that absorbed it. What decided it was whether the job survived, and slicing a comp into image tiles did not.

How to date a layout in 5 seconds

If a tutorial has no date on it, the screenshots will tell you. These are the tells, in rough order of how loudly they announce themselves:

• An elliptical white highlight across the top half of every button, badge and logo.
• A 1 px bevel: 1 light line along the top edge, 1 dark line along the bottom.
• A mirror reflection under the logo, fading out over roughly 40 percent of its height.
• Diagonal stripes, subtle noise, or a wet-floor gradient in the header.
• Headings set as images because the typeface was not available to a browser.
• A fixed width of about 760 px or 960 px, centred, with dead space either side and no behaviour at all on a phone.
• Layout built from nested tables, or from floats and clearing divs, because flexbox and grid did not exist.
• .gif images with a white matte, so any soft edge carries a white fringe the moment the background is not white.
• The 3 text-size buttons, the printer icon, the visitor counter and the "valid XHTML" badge in the footer.

The practical rule for anything published between 2006 and 2012, on this site or any other: the technique is probably sound and the appearance almost certainly is not. Take the operation, discard the finish, and check the menu path against the program in front of you rather than the one in the screenshot. The effects this site taught goes through them 1 at a time and says which of them still stand.

Where to go next

PHOTOSHOPThe effects this site taught, and which ones aged