Will Bontrager Blogs Website Techniques

When you want to hide information within the source code of web pages, there are several ways to do it. All have their drawbacks. One or more of the methods might be perfect for you.

I hide information a lot. Not for nefarious reasons, but for reminders in the future. Examples are why a table has a heavy border, the CSS styling before a change was made (in case I want to revert), and how certain calculations are done.

All those could be kept in a notes file. Still, information within the source code of the very web page where it applies is easier than remembering to update a notes file and then remembering where in the notes file the information exists. Immediately accessible notes speed things up.

With all that said, here are a few ways to hide information within the source code of web pages.

Hide With CSS

The CSS declaration display:none; can be used to keep the content within a div or other content container from publishing on the web page.

Advantage: Works for any web page.

Drawback: Can be viewed with browsers' "page source" menu items.

Example:

<div style="display:none;">
[Information to hide]
</div>

Hide With HTML

HTML comment tags can be used to keep stuff from publishing on the web page.

Advantage: Works for any web page.

Drawback: Can be viewed with browsers' "page source" menu items.

Example:

<!--
[Information to hide]
-->

Hide With PHP Comment Tags

PHP comment tags can be used to totally remove comments before they reach the browser.

Advantage: Totally removes comments because PHP code is not sent to the browser.

Drawback: Works only on PHP web pages.

Example:

<?php /*
[Information to hide]
*/ ?>

Hide With PHP if() Colon Syntax

PHP if(false) with colon syntax and endif statements can be used to totally remove comments before they reach the browser. (This page describes colon syntax for control structures.)

Advantage: Totally removes comments because PHP code is not sent to the browser.

Drawback: Works only on PHP web pages.

Example:

<?php if(false): ?>
[Information to hide]
<?php endif; ?>

Those are a few ways to hide information within the source code of web pages.

There are other ways, like setting opacity to 0 or using transparent color for text that, in my opinion, are less workable for simply hiding text within the source code of a web page. So those aren't addressed.

Probably at least one of the methods presented above will work for you. I generally use one or another of the PHP methods.

(This content first appeared in Possibilities newsletter.)

Often, affiliate link URLs contain parameter information. It's how the destination page knows which affiliate provided the link that was clicked.

This article is for those of you who use affiliates for at least some of the products you sell.

A link with a parameter can appear to be an affiliate link. There are people who avoid tapping on affiliate links — or resist buying if they realize they were "tricked" into tapping.

Before we continue, let me define something. Most likely, you know what a url parameter is. For those who don't, a parameter is a "?" character and other text appended to a regular URL.

As an illustration, here is a URL without a parameter and one with a parameter.

https://example.com/page.php
https://example.com/page.php?name=Will

What seems not to be widely known is that the parameters can be removed from the URL in the browser's address bar.

This is the code.

<script type="text/javascript">
history.replaceState(null,'',document.URL.replace(/\?.*$/,''));
</script>

Pop that into your web page and browsers arriving with a URL parameter will have the parameter removed after they arrive.

The JavaScript to remove the URL parameter from the browser's address bar won't affect PHP. You see, PHP runs before the page loads. By the time the page is loading, the PHP will have obtained the information it needs from the URL parameter.

If you have JavaScript that also uses the URL parameter (JavaScript and URL Parameters is an example), then put the above parameter-removing JavaScript somewhere below that.

Other than the condition mentioned in the previous paragraph, parameter-removing JavaScript can be placed anywhere on the page. If you are uncertain, put the URL parameter-removing JavaScript at the bottom of the page. Even below the closing </html> code will work.

Now you know how to change the URL in the browser's address bar. It is malleable with JavaScript. It can be changed without reloading the page.

If affiliates link to your product web site, it may comfort potential buyers if they don't see a link that appears to be an affiliate link.

(This content first appeared in Possibilities newsletter.)

The URL in the browser's address bar may have a "?" character followed by keyboard characters. When that is the case, what follows the "?" can be used to determine what content to publish or not to publish on that web page.

Let's suppose we have a web page at https://example.com/page.php and we want to publish certain content when ?gift is appended to the URL.

This is the code to use.

<?php if( isset($_GET['gift']) ): ?>
special text when .../page.php?gift is 
in the browser's address bar.
<?php endif; ?>

Something else that can be done is to publish certain content only when the ?gift is missing from the URL in the browser's address bar.

Here is an example.

<?php if( ! isset($_GET['gift']) ): ?>
special text when .../?gift is missing from 
the URL in the browser's address bar.
<?php endif; ?>

The only difference in the two examples is the ! character in the second example. In PHP, ! means "not" when applied to variables.

That's how simple it is.

Of course, it doesn't have to be ?gift that is appended to the URL. It can be any other value following the "?" character. Like ?AnythingElse

The Amateur Feedback page is an example. I was coding that page and I thought, "Hmm, I bet Possibilities readers would like to know this technique."

The page has two versions. There is a major section that is included in both versions.

One version includes content above and below the main section. That is for artists. .../amateurfeedback.php

When ?feedback is appended to the URL, only the major section remains. That is for folks who want to know how best to provide feedback to artists. .../amateurfeedback.php?feedback

It is simple code. And is handy to have in a developer's toolbox, whether you only develop your own website or you also help others.

(This content first appeared in Possibilities newsletter.)

HSL stands for Hue Saturation Luminosity. It is the easiest way I know of to adjust colors when you already know the basic color you prefer.

HSL can be mighty handy for adjusting shades of a color. When you know the hue you want, you can adjust the saturation (how much of the color is in it) and the luminosity (how dark or light the color is) for the best possible result.

The Color Selector for the Color Blind generator can be used to select a hue appropriate for your project.

Let's use blue as the example for this article. With HEX color specification, the color is #0000ff. With RGB color specification, the color is rgb(0,0,255).

With HSL, the color is hsl(240,100%,50%). This is how the color looks on the device where you are viewing this article.

The first number of the hsl color specification is the hue number. A hue can be any number from 0 through 360. For the blue of the example, 240 is the hue number.

For example code, the above is made with CSS background-color:hsl(240,100%,50%); for the background color and color:white; for the text color.

<div style="width:2in; background-color:hsl(240,100%,50%); color:white; font-weight:bold; padding-top:16px; padding-bottom:16px; line-height:100%; text-align:center; font-size:18px;">
hsl(240,100%,50%)
</div>

The second number of the HSL designation specifies the saturation. In the above example, the color saturation is 100%. Let's halve the saturation to 50% to see the result.

Notice the result is a color with less blue in it. The saturation number can be any percentage from 0% through 100%.

The third number specifies the luminosity. In the very first example in this article, the color luminosity is 50%. Let's make two examples, one with luminosity at 25% and one with luminosity at 75%.

Notice the result of the first example is a darker color. It has less luminosity. The second example is a lighter color. It has more luminosity. Luminosity can be any percentage from 0% (which results in black) and 100% (which results in white).

The Color Selector for the Color Blind article features an HSL generator. The generator features comparison swatches for up to four colors.

When the desired hue is known, a wide range of compatible colors can be published by adjusting the saturation and luminosity numbers of the HSL color specification.

(This content first appeared in Possibilities newsletter.)