My most-often use for transparent text is for centering text. Let's suppose a headline needs to be centered without considering a note appended to it.

Here is a simple demonstration of a headline that is not centered the way I want it.

Who is
best? (Will!)

I don't want the "(Will!)" to be considered when centering the headline.

Here is the code for the above. As we go along, you'll see changes to this code.

<h1 style="text-align:center;">
Who is<br>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

To center that last line, the text on the right also needs to be prepended on the left to balance the line.

Who is
(Will!) best? (Will!)

But that doesn't look nice. Here's the source code so you can follow along with the changes.

<h1 style="text-align:center;">
Who is<br>
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

To make it look nice, we'll use transparent text on the left.

Who is
(Will!) best? (Will!)

Yes, that is what I want. See:

<h1 style="text-align:center;">
Who is<br>
<span style="color:transparent; font-size:60%; font-weight:normal;">(Will!)</span>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

The second line of the header appears to be centered without considering the note appended to it.

HTML symbols can also be published transparent. Here is a quick example with arrows.

→ Who is
best? ←

With balancing arrow symbols:

→ Who is →
← best? ←

With transparent balancing arrows:

→ Who is →
← best? ←

Here is the HTML code for the above three examples.

<h1 style="text-align:center;">
&rarr; 
Who is
<br>
best?
&larr;
</h1>

<h1 style="text-align:center;">
&rarr; 
Who is
&rarr;
<br>
&larr;
best?
&larr;
</h1>

<h1 style="text-align:center;">
&rarr; 
Who is
<span style="color:transparent;">&rarr;</span>
<br>
<span style="color:transparent;">&larr;</span>
best?
&larr;
</h1>

Now you have another skill. For centering, a technique is to use transparent balancing text or symbols. The balance stays in play even with font size changes.

(This content first appeared in Possibilities newsletter.)

Unordered lists in HTML web pages generally use bullets to begin list items. Sometimes circles or squares. But it doesn't have to be that way.

You can use an image instead of bullets.

Here is how to do it.

1. Make an image to use. The image must be a size suitable for the list you will be using it with. Put the image on your server and note its URL.

2. Make a CSS class for the list items you want to affect. Specify the URL of the image to use.

   Example:

   <style type="text/css">
   .my-list-image {
   list-style-image:url('https://www.willmaster.com/possibilities/images/uni-head.png');
   }
   </style>
   

3. To implement, use the class name my-list-image in the ul or ol tag. (Or any other class name that suits you.)

   Example:

   Here is code for an example (displayed at the next list item).

   <ul class="my-list-image">
   <li>The unicorn head image can be replaced by any other image you intend to use.</li>
   <li>The image needs to be correctly sized before using it as a list bullet.</li>
   <li>You can see possibilities now, I am certain.</li>
   </ul>
   

4. Here is what the above code renders.

   • The unicorn head image can be replaced by any other image you intend to use.
   • The image needs to be correctly sized before using it as a list bullet.
   • You can see possibilities now, I am certain.

The unicorn head was cropped from a larger image. The cropped image was then reduced to a size suitable for the example list.

To reiterate, when you want to use your own image instead of bullets for your list items, this CSS is what you need:

list-style-image:url('[IMAGE_URL]');

Replace [IMAGE_URL] with the URL to the image you wish to use. The list-style-image property can be used inline or within a style sheet.

(This content first appeared in Possibilities newsletter.)

JavaScript can be used to tell the browser to forget it ever displayed the current page and to load another page in the same window. If the browser's "back" icon works at all, it will skip over the current page.

Here is a demonstration:

The technique may be applied to, as examples:

• Removing a log-in page from history so the "back" icon won't work. This would prevent the browser from backing up and automatically refilling the log-in form fields like they were before.

• A one-guess quiz. When the response is selected, the browser takes the user to the next page to see if they won (or whatever). The browser won't back up to the page one-guess page for the person to try to change their response.

As you perceive, the technique has limited applicability. When it is used, however, it is quite effective in forgetting the location of the web page.

This is how to use it:

Make a link with a javascript: protocol or a button with an onclick attribute. The destination URL is the JavaScript location.replace() command with the destination URL specified as the replacement.

Here are two examples, one as a link and one as a button.

<a href="javascript:location.replace('https://spamfreeform.com/')">Go to Spam-free Form Website</a>

<input onclick="location.replace('https://spamfreeform.com/')" type="button" value="Tap me">

Replace https://spamfreeform.com/ with the correct destination URL, and you are good to go.

When the user taps the link or the button, the browser will first forget it was at the web page and then load the web page at the destination URL.

(This content first appeared in Possibilities newsletter.)

Methods GET and POST both refer to how the browser sends information to a web page.

Most people don't need to know what method their browser uses when requesting data. Even as a site developer, it isn't often that a choice needs to be made between GET and POST methods.

Yet, when you do need to make a choice, it is good to know what it is you are choosing.

When links to a web page are tapped, they are method GET. Link URLs (and URLs typed into a browser's address bar) may send additional information to the destination web page through the use of URL parameters. URL parameters are a "?" character appended to the URL and followed by information.

Example URL with parameters.

http://example.com/page.php?name=will&state=awake

Generally, when a form is submitted, it contains information submitted with a form using method POST. Example form:

<form method="post" action="https://example.com">
Name: <input type="text" name="the_name">
<br><input type="submit" value="Tap me">
</form>

So, really, how are GET and POST different from each other?

A link GETs a web page, sometimes with information. A form POSTs to a web page, usually with information.

The entire URL of a GET request is logged in server logs. For POST requests, only the destination URL, not the form information, is logged in server logs.

(Server logs contain information about what goes on at the server. There is no way to bypass all server logs except by modifying the server software. Interactions with the server are noted, generally with the IP address.)

Method GET URLs are length-limited. The maximum length depends on server configuration. Almost always the server will accept at least 255 characters. Often 511 characters. Sometimes as many as 1023 characters.

Method POST generally allows at least 8 megabytes of information, frequently much more, perhaps 32 or even 64 megabytes.

Here is a table of GET and POST differences.

The above differences between method GET and method POST are the primary ones considered when a choice needs to be made.

(This content first appeared in Possibilities newsletter.)