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="">

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.

Fuck Figma

I just like the alliteration in the headline. I don’t have any beef with Figma because I have never used it. I design directly in HTML and CSS for all of my web works. I feel like an old school web designer, but David Heinemeier Hansson and Shamsi Brinn seem to agree. Designing for the web using the web native languages is still the way to go. So fuck Figma—just kidding.

Bootstrap It for $32K

The first part of CMS migration is to develop 5 HTML pages based on provided mock-ups from a designer. With the cost of $32,000, I thought they would deliver pages in pure HTML, CSS, and JavaScript. Unfortunately, the 5 HTML pages will be developed using Bootstrap. Do they need the entire framework to create 5 simple pages? Bootstrap will be overkilled; therefore, the final site will be bloated.

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: of the site’s server follow by the domain name:

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


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:

 	/* Your password */
	 $password = 'yourpassword';

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

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

	/* 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);

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">

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

	/* Your password */
	$password = 'yourpassword';

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

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.

Beacon of HOV