Breaking From a Parent Element in CSS

On my individual case study page, I had the responsive screenshot image breaking out of its parent element to make it span the entire width of the browser.

In the HTML, I just needed to wrap a div class around the image:


<div class="full-width">
   <img src="screenshot.png" alt="">
</div>

In the CSS, this is what I need:


.full-width { 
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
   }

That works, but you will get the horizontal scroll. To get rid of the scrollbar, you need to add the following lines at the top of your CSS:


 html, body { 
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   overflow-x: hidden;
   }

It worked, but felt a bit hacky. I removed it from my case study pages, but reposted it just in case I need to get back to it later.

Security Awareness Training

I just completed the “2023-2024 Mandatory IT Security Awareness Training” for work in less than 10 minutes . I took the pre-check test and scored 25/27. If you want to check your answers, visit Quizlet. Make sure that you do not close or refresh your browser or else Quizlet will blur out the answers.

How to Edit the Hosts File on Your Mac

Editing the hosts file on your Mac allows you to test your site before it goes live. Launch Terminal, copy and paste the following command:

sudo nano /etc/hosts

Add the IP address (example: 123.45.67.89) of the site’s server follow by the domain name:

123.45.67.89 visualgui.com

Save the file by pressing Ctrl+O then exit with Ctrl+X.

Flickity

Hero-banner sliders on homepages, particularly on university websites, are obnoxious and a waste of bandwidth. Though sliders can be useful for other purposes. Recently I needed a photo gallery for a personal webpage and I revisited Flickity developed by David DeSandro. It is still one of the best carousels I have used. The documentation is easy to follow. It is definitely worth 25 bucks for a license.

Taking Care of My Client’s Site

Yesterday I noticed Everlasting Eye Care website was not working. I called the hosting provider on my client’s behalf. The technician wouldn’t do anything without the site’s owner verification. I called the owner, but she didn’t pick up the home. I had to ended the call with the hosting technician.

I logged into the cPanel to see if I could figure the issue myself. I noticed that the SSL/TLS status page showed warning errors. I reset the name servers from Cloudflare back to the hosting provider’s defaults. The site worked again without HTTPS. I went back to the SSL/TLS status page and ran AutoSSL. The site worked on HTTPS again.

I did all of this for my client on a Sunday evening without charging a penny. It just felt right to take care of my client’s site. The site owner is a good friend and I am terrible at doing business.

How to Password-Protect a Website

Last year when I designed and developed our family book, I needed an easy way to password-protect the entire site. My aunt, who is the author, doesn’t want the book to be public. She just wants to share it with family members. I can’t remember the resource I used; therefore, I would like to document it here just in case others find it useful.

Place the follow code at the top of the page you want to be password-protected:

<?php
 	/* Your password */
	 $password = 'yourpassword';

	 if (empty($_COOKIE['password']) || $_COOKIE['password'] !== $password) {
	 // Password not set or incorrect. Send to login.php.
	 header('Location: /login.php');
	 exit;
         }
?>

Create a login page (login.php). It should live on the top directory. Here’s the PHP code:

<?php
	/* Your password */
	$password = 'yourpassword';

	/* Redirects here after login */
	$redirect_after_login = 'index.php';

	/* Will not ask password again for */
	$remember_password = strtotime('+7 days'); // 7 days

	if (isset($_POST['password']) && $_POST['password'] == $password) {
	setcookie("password", $password, $remember_password);
	header('Location: ' . $redirect_after_login);
	exit;
	}
?>

Create HTML log-in form in login.php:

<form method="POST">
	<input type="text" name="password" placeholder="Enter password">
	<input type="submit" name="Submit" value="Submit" class="button">
</form>

The webpage is set to expired in 7 days. If you want a logout link, create a logout.php page with the following codes:

<?php
	/* Your password */
	$password = 'yourpassword';

	if (empty($_COOKIE['password']) || $_COOKIE['password'] !== $password) {
	// Password not set or incorrect. Send to login.php.
	header('Location: /login.php');
	exit;
        }
?>

Indicate an Active Link with ARIA

To indicate an active link in my main navigation, I used a class name as follow:


<li class="active"><a href="/about/">About</a></li>

The issue with using a class name is that screen readers don’t recognized it. Fortunately ARIA has the aria-current="page" attribute to solve the issue (learn more from Manuel Matuzović’s “Building the main navigation for a website”). I switched all my main navigation as follow:


<li aria-current="page"><a href="/about/">About</a></li>

Add PHP function to make the active page dynamic:


<li<?php if ($thisPage=="About") echo " aria-current=\"page\"";?>><a href="/about/">About</a></li>

Style the active link with CSS:


nav li[aria-current="page"] a {color:red;}

Balancing Headlines

I recently implemented the new CSS feature to balance the headings on this blog:


h1, h2, h3, h4, h5, h6 { 
   max-inline-size: 50ch;
   text-wrap: balance;
}

Today, I noticed it works on Chrome. More explanation from Adam Argyle over at Chrome Developer Blog.

Lazy Loading

I updated all my photo galleries with the browser’s built-in loading="lazy" attribute:

<img src="image.png" loading="lazy" alt="">

Learn more at web.dev. I didn’t realize lazy loading has been widely supported in the browsers; therefore, I am a bit late. I love it when browsers implement elements like this so we don’t have to rely on JavaScript to do the job.

The Cost to Switch CMS

How much does a migration from a free, open-source CMS to a proprietary CMS cost? Here’s the breakdown:

  • Deliver 5 HTML pages based on provided mockups: $32,000
  • Implement a homepage, a landing page, a content page: $21,000
  • Implement 2 additional custom-page templates: $11,600
  • Implement events calendar: $10,000
  • Implement and customize employee directory: $9,600
  • Implement Google Custom Search and a sitemap: $4,000
  • Migrate pages from current CMS: $28,000
  • Import catalog: $20,000
  • Post-implementation support: $8,000
  • CMS license: $20,000 a year
  • Production servers: $20,000 a year

The total migration costs $184,200. CMS license, servers, and support could cost $60,000 a year. Even with so many great open source alternative, proprietary CMS is still a lucrative business.