Hide Header on Scroll Down

Fixed position headers/menus have many benefits. The main advantage is that they never leave the screen when a user scrolls, thus making the menu/navigation easy to access. This is especially helpful on long scrolling pages with a great deal of content.

The main disadvantage is that fixed navigation will always take up a portion of your valuable screen real-estate and thus hide other content. This is an even bigger problem on small screens or mobile devices.

It would be better if one could hide the menu/header when a user scrolls down, but then show it again when a user scrolls up.

You can see an example of this in action on this site. Right now, scroll up slightly. Notice that the header/navigation slides down from the top and back into view. Scroll down and watch it slide off the top of the page. We will make a simplified version of this approach, such as seen at drsteveanderson.com/scroll-nav.html.

Making this happen will require CSS3 transitions and a little JavaScript. We will set the default header position to fixed. When the user scrolls down, we'll use JavaScript to add a class to move the header up and out of the viewport. Then, we'll remove the class to show the header again on scroll up.

Shape Dividers

Shape dividers allow you to create shapes (such as waves or triangles) between panels on a page. By default, boxes or DIVs on a page stack one on top of the other. Creating something other than a horizontal separation between boxes requires a little trickery using an SVG (Scalable Vector Graphic) that is inserted between the two page elements.

The images below illustrate how an SVG can be used to make a shape.

NO SHAPE DIVIDER
Normally, the division between two page elements (the black and white panels) is a straight horizontal line.

"WAVE" SHAPE DIVIDER
There is now a wavy line separating the black and white panels.

Below are links to four examples.
- Wave Divider
- Wave Dividers with Opacity Changes
- Tilted Divider
- Triangle Divider

Creating SVGs can be a bit complicated. Luckily, there is a resource that allows us to easily create the shape we want and it will generate both the HTML and CSS we need to implement it on our own sites.

FOLLOW THE STEPS BELOW

Go to the following website: shapedivider.app.

1. Make adustments to the elements shown below, along with the height and width.

2. Download the code using the cloud icon.

We will make the example above that uses a wave divider. The code in BLUE was derived from the website above.

NOTE: There is a problem in Chrome for Windows where the browser puts an extra line of space at the top of the shape. The problem is illustrated below and then a fix is shown.

CHROME WINDOWS PROBLEM
Notice the narrow horizontal space that looks like a red line.

CHROME WINDOWS FIXED
The problem is fixed by adding a negative margin as shown below.

User Preferences

In this section, we'll look at two of the newest CSS features that give users the power to determine how they want content on the page displayed based on settings in their operating systems. Media Queries Level 5 introduced so-called "preference media features" that use media queries to detect a user's preferred way to display content.

Two new media queries are shown in this lesson. The first one allows users to reduce or eliminate movement on their screens such as animations, transitions, and transforms. The second one allows users to switch from "light mode" to "dark mode" and vice versa. Browser support is relatively good for both features.

See: https://caniuse.com/?search=prefers-reduced-motion
See: https://caniuse.com/?search=prefers-color-scheme

1. Prefers Reduced Motion

Not everyone appreciates fancy animations and transitions. Too much animation and parallax scrolling can be overwhelming and distracting. In some cases, people may even get motion sickness from too much movement on the screen. Motion sensitivity disorders may cause dizziness, migraine headaches, and even nausea.

Fortunately, there is a "reduce motion" setting in most operating systems. Those with motion sensitivity and those who simply want less motion can enable the setting in their device's preferences or settings.

Using Reduced Motion on macOS.
System Preferences > Accessibility > Display > Reduce Motion

Using Reduced Motion on Windows.
Start > Settings > Ease of Access > Display > Simplify and personalize Windows > Show animations in Windows (turn off).

Enable the setting on your device, then look at my portfolio home page to see how it removes the animations and the parallax scrolling effect. drsteveanderson.com

In order for the setting to work, web developers need to create pages that enable a new CSS media query known as prefers-reduced-motion. Note the @media (prefers-reduced-motion: reduce) media query in the lesson below.

The code above could be added to every page. Those who want animation will still see it, but those who prefer a non-amination experience will have that as well.

2. Prefers Color Scheme

There has long been a bias against webpages with dark backgrounds. Light backgrounds have been considered cleaner and more professional. However, webpages with dark backgrounds can be elegant or dramatic and have been favored by entertainment (films, music, theater) sites that want to convey a sense of drama and excitement.

Dark backgrounds can actually be easier on the eyes and help you focus on your work. (Source) It's even been proposed that use of electronic devices before bedtime can lead to difficulty sleeping and shorter sleep duration. Using dark mode may help limit these problems.

Pages with dark backgrounds tend to draw less power and therefore lengthen battery life. That also means using less electricity for recharging. Power savings can be up to 60 percent. (Source)

Some websites have utilized a "dark mode" toggle switch allowing users to change between dark and light mode on their sites. This has generally been done with differential CSS and JavaScript. (Example)

Thanks to the new preference media features, one can now create pages that don't require a toggle and instead can deliver a light or dark color scheme based on a user's preference setting within their device's OS.

Users can enable light mode or dark mode in their device's preferences or settings, as shown below.

Light or Dark Mode on macOS.
System Preferences > General > Appearance (light or dark)

Light or Dark Mode on Windows.
Start > Settings > Personalization > Colors > Choose your color (light or dark).

NOTE: In order for the changes to take effect on Edge for Windows, you need to tell the browser's default theme to use the "system default". (Edge: Settings and more (Alt+F) > Settings > Appearance > Default theme > System default).

Web developers need to create pages that enable a new CSS media query known as prefers-color-scheme. Note the @media (prefers-color-scheme: light) and @media (prefers-color-scheme: dark) media queries in the code below.

Visit any of the other pages on this site (such as the London, England page), then change the setting from light mode to dark mode on your device to see how the page can change. The difference is illustrated below.

Page in Light Mode

Page in Dark Mode

In this lesson, we'll learn how to create a page with a few simple changes between dark and light. An example of what we'll create can be seen at: drsteveanderson.com/prefers-color-scheme.html.

Custom Properties/Variables

The code base for this could be difficult to maintain without a smart implementation strategy. The use of "CSS custom properties" (or "variables") will help. Variables contain specific values that can be reused throughout a document. They are set using the following notation (--primary-color: red;) and are accessed with the var()function. See how variables are used in the CSS code below.

Note: Besides the values "dark" and "light", an earlier version of the spec included a third value, "no-preference". It was meant to indicate that the user has made no preference known to the system. Since no operating system or browser ever implemented it, the value was removed.

See the "Accessibility" section of http://css-tricks.com/a-complete-guide-to-css-media-queries for more preference media features.

Contact Form with CAPTCHA

The contact form on this site is located at the bottom of each page..

In this lesson, we'll learn how to create an HTML form where the form information is sent via email to a particular recipient or recipients. Due to concerns about spamming robots hijacking your form, we'll also add a CAPTCHA feature.

Spammers are constantly looking for exploitable web forms. At best, an unprotected form will simply mean your own spam will increase. At worst, the spammers can alter your email headers to send bulk unsolicited emails (known as "email injection") from your hosting account to thousands of others. This may result in a warning from your hosting company and they could even ban your site.

To avoid these problems, you'll want to enable form validation via CAPTCHA. CAPTCHA stands for Completely Automated Public Touring test to tell Computers and Humans Apart." The system requires that someone take some action, such as clicking a "I'm not a robot" checkbox, or correctly evaluating a sequence of letters or numbers contained within a distorted image. Another system has a user identify the areas of an image that contains certain objects (such as traffic lights). The form information will be sent only if the correct choices are made.

An even newer version (version 3) works transparently for website visitors. There are no challenges to solve. Instead, it continuously monitors the visitor’s behavior to determine whether it’s a human or a robot. Web developers need to decide which action to take depending on the score. Getting this configuration right is difficult for even the most experienced web developer. (Source)

Setting Up reCAPTCHA

Google provides a free CAPTCHA integration service known as reCAPTCHA. To set it up, simply login to your Google account and go to: http://www.google.com/recaptcha/admin. From there, you will need to "Register a new site."

Google reCAPTCHA Screen One

On this screen, you can give your site a label. It's not important what you call it. This is only for distinguishing from among multiple sites. Give it a name that makes sense. You can choose as "reCAPTCHA type" the option reCAPTCHA v2. You can use the option "I'm not a robot" Checkbox. (Feel free to change these options and experiment later). Under "Domains", enter the domain name for the site you want to add reCAPTCHA to. The owner will be the email address you logged into Google with. Hit the submit button and it will take you to the next screen.

Google reCAPTCHA Screen Two

This page lists both your "SITE KEY" (aka public key) and your "SECRET KEY" (aka private key). I have blurred my keys so that the secret key won't be known to others. You'll need this information when you start coding.

Using PHP

Creating the HTML form is simple. Making the form send the data via email could be simple as well as long as the form action uses what's called a "mailto" action, as shown below.

<form action="mailto:[email protected]" method="POST">

The problem with using the "mailto" action is that once a user clicks on the submit button, they need to have their device set up to launch their email client application in order to send the form data. If the user has not done that or perhaps they are using someone else's device, the approach won't work.

To solve this problem, we'll use PHP to send the form data. PHP is a server-side scripting language meaning that in order for it to work, the PHP file (ending in .php) needs to be on a web server online. The submitted form data goes first to the PHP file which then formats it and sends it to the intended recipient (or recipients) as email. It can also work in conjunction with a MySQL database to store the data online.

NOTE: PHP stands for "PHP Hypertext Processor." It is what's called a recursive acronym in that the acronym refers to itself.

Using PHP will require a different form action, as shown below.

<form action="formsubmit.php" method="POST">

Notice that instead of using "mailto", the form action now forwards the form data to another file we've called formsubmit.php.

The diagram below shows how the process works. First, the user fills out the form (form.html) and hits submit. Next, the data from the form is passed along to a PHP file called formsubmit.php. Finally, the PHP file uses a built-in mail function to send the data via email to the specified recipient and it arrives in their in-box.

As you go through this lesson, remember that your HTML file and PHP file will need to be online to make the form work. All hosting companies (such as ionos.com or godaddy.com) should now make PHP available. Simply create form.html and formsubmit.php then upload them to your hosting account using an FTP application such as FileZilla.

We will create a basic form with reCAPTCHA like this one drsteveanderson.com/form.html

Hiding Email Addresses

Another spam issue you'll want to consider is the harvesting of your email address that appears with your contact information. Most people will want to provide an email address as another way for people to get in touch with them. Email harvesting robots are constantly searching the web for valid addresses. If you leave yours unprotected, you'll end up with a significant amount of new spam.

There are a number of ways to protect this information from spam bots. Options include putting your email address into an image, replacing the address with a PHP script, or using HTML character entities. We'll focus on the latter two.

Option 1: Replace Email Address with PHP Script

Instead of displaying your email address on the page, you simply provide a link to a PHP script that then loads the mailto for the address. Spam bots won’t be able to see the email address and if you ever need to change the email address, you'll only need to change it in the one PHP file.

You can see how it works at: drsteveanderson.com/email-hiding.html. Notice that even if you "View Source" on the page in your browser, the email address doesn't show up. You can't see it and neither can the spam bots.

Option 2: HTML Character Entities

With this method you'll change your ASCII email address into its equivalent decimal entity. You are essentially just encoding the characters of your email adress through the use of what are called "HTML character entities." (See https://www.w3schools.com/html/html_entities.asp). In this situation the ASCII character @ becomes &#064;. The ASCII character for the lower-case letter a becomes &#097;.

The characters of the email address [email protected] become...
&#112;&#101;&#114;&#115;&#111;&#110;&#064;&#101;&#120;&#097;&#109;&#112;&#108;&#101;&#046;&#099;&#111;&#109;

Luckily, you don't have to look up all those substitutions yourself. Here's a website that will do it for you: http://wbwip.com/wbw/emailencoder.html. Just enter the text you want to convert, hit the encode button, and it will give you the HTML character entities you need.

Below is how you would make the email address [email protected] into a mailto link using HTML character entities.

Although it looks funny, it will look correct in the browser and will work fine in the client email application.

Using HTML character entities isn't as good a solution. Unfortunately, spam bots have gotten wise to this work-around and can automate the replacements.