Upgrade to PHP 8.2 on DigitalOcean Droplet’s Ubuntu

Perform update and upgrade to the current Droplet.

List all the installed PHP version:

ls /etc/php/

The latest version should appear on the list.

7.4 8.0 8.1 8.2

If PHP 8.2 doesn’t exist, install it. If 8.2 exists, disable 8.0:

sudo a2dismod php8.0

If the error message (ERROR: Module php8.0 does not exist!) occurred, install:

sudo apt install libapache2-mod-php8.0

Enable version 8.2:

sudo a2enmod php8.2

If the error message (ERROR: Module php8.2 does not exist!) occurred, install:

sudo apt install libapache2-mod-php8.2

Restart Apache:

sudo service apache2 restart

If WordPress throws PHP MySQLi Extension error, install:

apt install php8.2-mysql

Restart Apache:

sudo service apache2 restart

Check WordPress’s Site Health. If the optional imagick module occurred, install:

sudo apt install php-imagick

Restart Apache:

sudo systemctl reload apache2

Upgraded to MODX 3.0.4

Just upgraded Scalia Law website to MODX 3.0.4. The upgrade process in MODX Cloud is simply a click of a button. This could be the last MODX upgrade. The new site is under development in a new CMS. It is expected to launch in March, 2024. We’ll see.

Directing vs. Doing

I have been using DigitalOcean Droplets to host my sites for over two years now. Setting up the cloud servers was a great hands-on learning experience. The Droplets has been stable and solid. The only downside is that I have to do the update and upgrade every few months. I am fine doing it for now, but what will happen when I am gone?

I just read blog post from Matt Mullenweg on “Preserving Harvard’s Blogging History” and Pressable seems like an ideal solution for WordPress in the long run. Pressable will take care of all the maintenance to make sure my WordPress site up-to-date. The prices are reasonable; therefore, I might consider moving my blog to it in the future. For now, I just continue to do the updates myself to keep myself up-to-date on the backend technologies.

As Director of Design and Web Services at Antonin Scalia Law School, I am doing more of directing than doing myself. I actually enjoying it. Our leader outsources all designs and developments to outside vendors; therefore, my job is to make sure that they meet our requirements. From design, accessibility, accessibility, typography, front-end development, to back-end administrations, I know exactly what we need each step of the way. I have been asking lots of questions and making lots of requests. They might get annoyed with me, but I am just doing my job.

It feels nice to be on the directing side instead of the doing side. I just need to know what the fuck I am talking about.

Sass?

Do web designers and developers still use Sass? I am still using it everyday, especially for nesting. That might change once CSS Nesting gets more support in the browsers.

How to Put ePub Files into Books on iPhone

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.

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.