Month: March 2020

As I mentioned in the previous posts, I’m using W3Schools to review HTML, CSS, and PHP in order to create some exercises. Here are a few things that I didn’t know about PHP or want to remind myself about.

When sending users to specific pages I often use numbers to indicate which page they should go to. Spambots will frequently put in random junk so I do some tests before I process the request. PHP has some odd behaviour with some of the functions. For example,

// Invalid calculation will return a NaN value
$x = acos(8);
echo is_nan($x);     --> 1
echo var_dump($x);   --> float(NAN)
echo is_null($x);    --> expect 0 but get a blank line, so only works on numbers—not NAN
echo is_finite($x);  --> blank line, so only works on numbers—not NAN

echo is_finite("Hello");     --> Warning: is_finite() expects parameter to be a float
echo is_finite(10);          --> 1
echo is_infinite(10);        --> expect 0 but get a blank line
echo is_infinite(10e1111);   --> 1

// $hello not defined
echo var_dump($hello);       --> NULL
echo is_nan($hello);         --> blank line
echo is_null($hello);        --> 1
echo is_finite($hello);      --> 1
echo is_infinite($hello);    --> expect 0 but get a blank line
echo is_int($hello);         --> expect 0 but get a blank line

var_dump(is_numeric($hello)); --> bool(true) 
is_numeric($hello);           --> expect 0 but get a blank line

I never gave constants much thought when developing web pages, but i’m thinking that they might come in handy when making interactive games. If I access the database and grab a bunch of data that will be displayed but won’t change, it should go into a constant array which is then accessible to any function on the page. Note that both constant arrays and variables are referenced by their name without a $ before the name.

define("cars", [
    "Alfa Romeo",
    "BMW",
    "Toyota"
]);
echo cars[0];  --> Alfa Romeo

function arrayDisplay() {
  foreach (cars as $value) {
        echo "$value ";
    }
}
arrayDisplay();  --> Alfa Romeo BMW Toyota

If you use a variable array, the array isn’t available to functions.

$cars = array(
    "Alfa Romeo",
    "BMW",
    "Toyota"
);
var_dump($cars);  -->  array(3) { [0]=> string(10) "Alfa Romeo" [1]=> string(3) "BMW" [2]=> string(6) "Toyota" }

function arrayDisplay() {
  foreach ($cars as $value) {
        echo "$value ";
    }
}
arrayDisplay(); -- > Warning: Invalid argument supplied for foreach() … 

As I mentioned in the previous post, I’m using W3Schools to review HTML and CSS in order to create some exercises. Here are a few things that I didn’t know about CSS or want to remind myself about.

“Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element!”

Padding (outline, margins, and border) in CSS is added to the width of an element. So div { width: 300px; padding: 25px;} will have a width of 325 pixels. To keep the width at 300 px you need to add the declaration box-sizing: border-box; inside the brackets.

Occasionally I want to add whitespace and end up using   a bunch of times. There is a descriptor, white-space: pre; that will work.

This is a paragraph that has a bunch of spaces before the last word.

There are a bunch of ways to control elements based on where they appear in relation to other elements. I haven’t made much use of these selectors, but mostly because I’m not familiar with them. You can explore them at this W3Schools page.

The column-count:n property is something I wish I had known about. It can be used to divide a div (or p) into columns.

Here’s another property that can come in handy in association with justify, margin-right: 20%; -webkit-hyphens: auto; -ms-hyphens: hyphens: auto. You need all three to handle different browsers.

I just learned about display: flex; justify-content: center; when laying out the previous two paragraphs. I first put them in a div and did a float: left and float:right to get them to display next to each other. Then I manipulated the margins to get them closer to the center. This works better and I just need to make sure there is enough padding so that they don’t brush up against each other.

It’s been a while since I have looked at the code for my websites so I popped over to W3Schools to review the HTML5 standards and tested my sites in Validator. A couple of things are different and/or I never knew.

You can use either single or double quotes in tag attributes. I prefer single quotes since I often write code in HTML and then generalize it with PHP and PHP uses double quotes in echo statements.

They recommend using <html lang=”en-US”> in the header instead of just <html lang=”en”>.

The type=”text/javascript” code in no longer used in links to javascript or for inline javascript.

By default strong and b display the same on the screen but they are semantically different. <b> is a style – we know what “bold” is supposed to look like.

<strong> however is an indication of how something should be understood. “Strong” could (and often does) mean “bold” in a browser, but it could also mean a lower tone for a speaking program like Jaws (for blind people).

The abbreviation tag <abbr title=”Abbreciation name”> is useful for screen readers and search engines but it does ODD things in WORDPRESS.

Commenting HTML can be useful for debugging and is done with <!– Write your comments here –> which can span multiple lines. Keep in mind that while the browser doesn’t display comments, they are viewable in the page source. The page source displays the comments as a single line.

It turns out that there are 140 color names in HTML5.

The draggable attribute in combination with some simple javascript can be useful if you are working on interactive games. Links and images are draggable by default which explains why you can drag them to the desktop.

If you are writing a page that test spelling, you probably want to turn off spellcheck.
<p contenteditable="true" spellcheck="false">This is a paragraph that is not spell checked.</p>

I wish more websites used tabindex when designing forms. It’s especially frustrating when you tab and go to a button instead of the next input field or when you jump around on the form.