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.

Scalia Law’s Dynamic Pages

To get the number of pages for the dynamic portions, I logged into MODX admin and started with the Faculty Working Papers. The record shows 1,404 pages. Since SiteImprove crawled 2,098 pages and the Faculty Working Papers alone take 70% of the total pages, I wanted to dig a bit further into the database. The MySQL table for content shows a total of 5,164 pages (these included everything from public to hidden to unpublished pages).

Here are the numbers for the current dynamic portions:

Auto Upgrade Ubuntu

Every few months I have to perform an upgrade on Ubuntu. My WordPress droplet usually has about 80 updates that can be applied immediately. The upgrade process is not so bad. I have to power down the server and make a snapshot of the droplet, which takes about five minutes to complete. Two days ago, I did the upgrade and removed unused packages. WordPress’s Site Health gave me 4 errors, including the failure of scheduling post and some caching issues. I ended up restoring an old backup from four days ago. I will not remove unused packages in the future. In any rate, I wish I could enable automatic minor and security updates for Ubuntu so I don’t have to do the updates myself. I did the AutomaticSecurityUpdates, but it didn’t seem to work. If you have any suggestions, please let me know.

Focus on the Websites

One of the recurring themes from Computers in Libraries 2023 was the focus on the websites. Speakers talked about site design, user experience, and content strategy. They also discussed about quitting social media.

For Libraries, websites remain our homebase. Unlike social media networks, our library websites have no ads, no privacy issues, and definitely no misinformations. As a result, we should not send our users to social media, but the other way around. We have control of our sites, not social media. We provide accurate information on our site and we have no idea what type of information being pushed on social media.

I am glad to hear that librarians put their focus and effort into their websites instead of someone else’s. Library websites are still trustworthy online presence for institutions and organizations.

In my current role, I am no longer in charge of the Law School or Law Library social media. My focus is primarily on our websites. We are about to embark on a whole new direction for our main site. I don’t know how that will play out.

In my personal space, I focus only on my websites, particularly this blog. I haven’t posted anything on social media in a while. I have been tempted to deactivate them all. I also don’t have any desire to try another social media platform.

At least at the moment, my career in web design is still good. Social media networks come and go, but our sites will stay for a while. That’s my take from the conference.

Switching from em to rem

In addition to changing the wordmark, I made the switch from em to rem unit for my typographic control after a Slack discussion with my former colleagues at Vassar. I used em for scalability and inheritance, but em could cause compounding sizing. Using rem seems to avoid the headache; therefore, I might as well making the switch.

After reading Robin Rendle’s note, I added this new CSS element on all my headings:

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

I am not seeing the effect yet, but I hope it will just work in the future once browsers support it. It’s not a big deal. I still like to tinker around this site as often as I could.

I am in the middle of listening to John Gruber talking with Jason Kottke about web design, Movable Type, and web development. I have tremendous respect for them on how they could turn their blogs into full-time jobs. I am not sure about Jason, but John is doing pretty darn well with the sponsorships on both his site and podcast. I don’t subscribe to their RSS feeds. I just check their homepages every once in a while. I can’t keep up with John’s podcast either. I only check in once in while for something special, like the latest episode about Kottke.org turns 25. That is quite a milestone. Congrats, Jason.

Persistent Object Cache

WordPress’s Site Health suggests that I should be using persistent object cache for this blog. Last night I tried to install and secure Redis on Ubuntu 22.04 on my DigitalOcean Droplet, but I couldn’t get Redis to work. I restored my snapshot then tried to install and secure Memcached. That didn’t work either. I restored my snapshot again. I am not sure what I was doing wrong.