Will Bontrager Blogs Website Techniques

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

The size of the viewport sometimes is the size of the screen. But not always.

A viewport is the size of the browser's window where a web page is displayed.

There is a way to place something, a div for example, in an exact position within a viewport — regardless of viewport size.

The CSS position:fixed; is used. It places the div within the viewport and keeps it in position no matter how much the web page is scrolled.

But the div must still be told where to be. Using exact pixel measurements is not the way. Example:

position:fixed; top:150px; left:300px;

While the above might work for some viewport sizes, it is unlikely to work with all.

To specify a position valid within any viewport, let's use the vh and vw measurements. Example:

position:fixed; top:15vh; left:30vw;

That would work for any viewport size.

The 15vh value specifies 15% of the viewport height. Thus, top:15vh; places the div down from the top by the distance that equals 15% of the viewport's height.

Similarly, the 30vw value specifies 30% of the viewport width. Thus, left:30vw; places the div in from the left by the distance that equals 30% of the viewport's width.

The reason it would work for any viewport size is because vh and vw measurements are percentage of viewport height and percentage of viewport width, respectively.

Use vh and vw for good cross-device and cross-browser positioning within the viewport.

Let's finish this article with a technique for centering something within the viewport, regardless of the viewport's dimension.

The width and height of the div to be centered needs to be known. For this example code, let's assume the div's dimensions are 100px high and 150px wide.

To center the div, we use the CSS calc feature.

To calculate for the vertical centering, we calculate one-half height of the viewport minus one-half height of the div.

Similarly, for horizontal centering, one-half viewport width minus one-half div width.

Here it is:

<div style="width:200px; height:100px; background-color:rgba(0,0,255,.2); 
position:fixed; top:calc(50vh - 50px); left:calc(50vw - 75px);"></div>

The blue-colored parts in the above code are where the calculations take place.

Using the vh and vw CSS measurements lets you position web page content within any viewport size.

(This content first appeared in Possibilities newsletter.)

CSV stands for Comma Separated Values. It is a plain text format that can be used to store data. The format can also be used to transfer information from one software to another.

Here is the format:

• The values within a CSV file is separated with a comma.

• If any value itself contains a comma or a linefeed, the value is delimited with quotation marks (which means the value has a quotation mark at its beginning and at its end).

• Further, if the value itself contains a quotation mark, it is delimited with quotation marks and quotation marks within the value are escaped with either a backslash character or another quotation mark.

Records are separated with a linefeed.

All that can sound confusing. Here is an example CSV file with three records.

red,white,"also, white",blue
"blue, too","and also ""grayish"", next to the blue"
green,yellow,purple

Let's address each of the above records separately (one line per record).

The first record has four value items:

1. red
   [the value contains no comma or quotation mark]
2. white
   [the value contains no comma or quotation mark]
3. also, white
   [in the CSV file, the values are delimited with quotation marks because the value contains a comma.]
4. blue [the value contains no comma or quotation mark]

The second record has two value items:

1. blue, too
   [in the CSV file, the value is delimited with quotation marks because the value contains a comma.]
2. and also ""grayish"", next to the blue
   [in the CSV file, the value is delimited with quotation marks because the value contains a comma and also because the value contains at least one quotation mark. Quotation marks within the value are doubled to distinguish them from the delimiting quotation marks.]

The third record has three value items:

1. green
   [the value contains no comma or quotation mark]
2. yellow
   [the value contains no comma or quotation mark]
3. purple
   [the value contains no comma or quotation mark]

Although they can be created manually, CSV files generally are created with software.

CSV files can be somewhat readable by humans. However, the files generally are meant to be read by software.

You now know how CSV files are formatted.

Rows of values are one record per line. Values are separated with a comma. Values that contain a comma, a linefeed, or a quotation mark are delimited with quotation marks. Quotation marks within values are doubled to distinguish them from the delimiting quotation marks.

(This content first appeared in Possibilities newsletter.)