Will Bontrager Blogs Website Techniques
WillMaster > Blog > JavaScript
Remove Current Page From Browser History
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:
Menu (see caution)
Caution: Your back button won't return to this page. If you think you might want to return here, a bookmark may be prudent.
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.)
WillMaster > Blog > HTML
Differences Between Method GET and Method POST
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.
| Differences | ||
|---|---|---|
| Item | GET | POST |
| Data logged in server logs | Yes | No |
| Data visible in browser's address bar | Yes | No |
| General maximum amount of data | <=1k | >=8mg |
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.)
WillMaster > Blog > HTML
Edit Any Web Page
Why would someone want to edit someone else's web page on the sly?
This article describes a fun and harmless way to do it. The edits aren't permanent, and they only exist in your current browser window.
So, why?
It's fun — for a short time. Then it gets old, like anything unique no longer feels unique after a while.
What you do is make a bookmark. Every modern browser has a way to create a bookmark manually.
Put this line into the bookmark as the destination URL:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Now, whenever you are at a web page you want to edit, for whatever reason, tap the bookmark you just made.
Instantly, you can put your mouse cursor anywhere on the web page and make edits on the page.
Have fun. :-)
(This content first appeared in Possibilities newsletter.)
WillMaster > Blog > HTML
Formatting Superscript and Subscript
Superscript and subscript characters on a line of text can be formatted with the HTML <sup> and <sub> tags.
Examples of characters using the sup and sub tags.
What you see is the default for the system you are using to view this article. It works. So why an article about it?
If you want more control over the position and font size of the superscript and subscript characters, you'll need to do something different than using the sup and sub tags.
Before I proceed, the way to use the sup and sub tags is like you would use most tags — start the tag, type the characters to affect, then place the end tag. Example and code:
The sup tag and the sub tag.
The <sup>sup</sup> tag and the <sub>sub</sub> tag.
To control the position and spacing of the superscript and subscript characters, a span tag with position:relative; and text sizing CSS can be used.
Here is an example that uses a span tag, followed by the source code for it. The positions are higher and lower then the sup and sub tags would render. The text size is also different.
The sup tag and the sub tag.
The <span style="position:relative; top:-1em; font-size:60%;">sup</span> tag and the <span style="position:relative; bottom:-1em; font-size:60%;">sub</span> tag.
Now you know how: When you want more control over the rendering of superscript and subscript, use a span tag with CSS instead of the sup and sub tags.
(This content first appeared in Possibilities newsletter.)

