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.
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/hostsAdd the IP address (example: 123.45.67.89) of the site’s server follow by the domain name:
123.45.67.89 visualgui.comSave 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.
How much does a migration from a free, open-source CMS to a proprietary CMS cost? Here’s the breakdown:
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.
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: