I just purchase Dan Cederholm’s Twenty Bits I Learned About Making Fonts and Twenty Bits I Learned About Making Websites (use FALLBOOKS promo code for 30% off). I downloaded the epub files to my MacBook Pro and imported them to Apple’s Books.

I preferred reading e-books on the phone; therefore, I opened up the Books app on my iPhone. I waited and waited, but the new books didn’t synced on my iPhone. I checked my iCloud to make sure the Books app was activated on both devices. Still, no new books showed up on my iPhone. I googled a bit and still couldn’t find the solution. I ran into this issue in the past and it frustrated me that Apple couldn’t just make this integration works.

The hack I came up was emailing myself the epub files. I opened up the message I sent to myself on Apple Mail, tabbed to download the files, tabbed it again to active the share screen, and select Books. That was it. I shouldn’t have to do this, but that was how I solved the issues. Now I can read the ebooks on my iPhone.

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.

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.

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.

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.

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.

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;
        }
?>

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;}

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.

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.