CSSPan

Menu  

A free collection of useful site development tools (snippets, plugins, etc)

Contract Generator

Posted in Vanilla JavaScript on

After years of requests (unfortunately unanswered due to lack of time),  last year I made public the code for the contract generator.

Screenshots of the signature area in Contract Generator on medium and wide screens.
Click the image to run the public generator

You can generate a contract online (eg: using the public Generator), and then:

  • download it as a single file*,
  • upload it to your own server**,
  • and send your client a link to it.

When signed by your client, the .php file will delete itself from existence and replace itself with a static HTML version that has a Print button (and, other than the .html extension, the same filename).

FTP Contract

Posted in Databaseless PHP on

A signable contract that lives in a single file that you can host on your own domain.

How it works:

  1. You create a PHP contract and upload it on your server.
  2. Someone else signs it.
  3. The PHP contract deletes itself from your server and leaves beind a static HTML contract.

Limit Requests in PHP

Posted in Databaseless PHP on

This is the story of many page requests in a short amount of time. Over 500 requests from the same IP in under 10 seconds. They all pinged the TimThumb script (a thumbnail generator, very popular among WordPress themes and plugins) asking it for resized, uncached images. The fact that this was done in one go saturated 16GB of RAM on the server and stopped other processes running, thus crashing the server.

The client was unhappy with their site being offline for the past day and a half (they were in fact losing business while being offline) and in reply the host expressed yet more serious concerns:

Correct My Headings

Posted in WordPress on

If your subheadings appear on archive pages, they need to start from H3 (because H2 tags are used by the post titles on archive pages). This plugin dynamically corrects subheadings before they are displayed on your site — for SEO and semantic markup purposes. Depending on how you use headings in the text of your posts (you could have them starting from the H2 level or from the H3 level) you will have a couple of options to choose from in the plugin’s settings page.

Settings page

Password protected area in WordPress

Posted in WordPress on

If you ever need to set up a simple password protected area in WordPress, these snippets and plugins might come in handy when you’re hacking through your theme.

I believe this would be the logical approach: you create a main password protected page for your private section and then you create a bunch of child pages under that page. This way you’ll be using native WordPress functionality (page organization and page visibility) for most of your private section.

But you may find that a couple of patches will be in order.

Photoshop Tutorial: Create an old map of your area

Posted in Uncategorized on

Put your city on the map in 4 layers. Create an artistic old map of your area. Here’s what you should be achieving:

psd map tutorial step5
🗓 Originally published in 2008, on VileWorks.com/blog

Step 1: Getting the actual map

Go to Google Maps, 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. 

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 such 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.

psd map tutorial

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 too 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.