MODX Support Team Rocks!

The MODX Support Team had proved once again to be indisputable in customer service. Their team members assisted us every step of the way to migrate the Scalia Law School’s CDN and WAF from StackPath over to CloudFlare Enterprise. We ran into a few obstacles during the process, but they were patience, responsive, and diligence in making sure that we succeeded in the migration.

If you need a CMS that offers flexibility, durability, and security, MODX is the solution. If you need a rock-solid hosting with top-notch support, MODX Cloud is the way to go. The Scalia Law School Website has been powered by MODX for more than 15 years and hosted by MODX Cloud for more than 3 years.

In the CMS space, MODX beats WordPress, Drupal, Joomla, and Cascade to the pulp. Hats off to Jay, Liz, Garry, Ryan, and Jimmy. You all rock!

My Reports & Responses to User Testing Acceptance

My response on server configurations:

Hi D,

For the global elements, using include files make sense, but it is also too heavy-handed to rely on PHP or ASPX for these tasks.

For caching, not just images, but also HTML, JS, CSS, PDFs, DOCX, XLSX, PPTX, Font Files, etc. It is good that your server optimizes images for the web before they hit the sites, but furthermore, it should serve responsive images (small size for mobile, medium size for tablet, and large size for desktop). All the codes should also be compressed for optimization.

For the quotes on CDN and failover, I defer to my supervisor who will also have the final words on caching strategy and the server configurations for the global elements.

Thank you for your response and patience.

My response on Service Worker:

In our initial meeting, we asked for Service Workers API and M had agreed to implement it. The test page shows no registration and the pages do not work offline.

I am surprised to learn that your company had never implemented Service Workers. Registering the entire site would be too much, but just a handful of important pages such as PeopleFinder, Admissions, Course Offerings, etc. would be doable.

Getting a quote to implemented Service Workers is above my pay rate. I defer to my supervisor.

My response on no JavaScript:

As I had mentioned in our initial meeting, we would like our site to be built with progressive enhancement; therefore, our site should work even without JS to accommodate all type of users. JS should enhance the user experience and should not hinder basic functionality. The HTML pages provided are not working with JS turned off. Please fix this issue.

We received many complaints in the past that our site didn’t work with Javascript turned off. They didn’t want JS pop-up ads. They didn’t want JS third-party trackings. These are valid points; therefore, we had to make our site work without JS. Of course, we had to use JS for things like table sorting and such, but the tables still work without the sorting functions.

Our standard practice doesn’t depend on technologies. Our standard practice is to make our website as accessible and usable as possible. Our mission is to provide an inclusive, not exclusive, experience. We use JavaScript as an enhancement, not a requirement. If users have JavaScript turned on, they will get the enhanced interactive experience. If they don’t, they are not excluded from our content. The new test pages rely heavily on JavaScripts. Even if users have JavaScript enabled, they would also be blocked from accessing the website if JavaScripts failed to load.

As I had pointed out, we received complaints about our current site not being accessible without JavaScript and we had to rework our codes to make it work without JS first. It was easier for us to recode our site because we built everything from scratch and not relying on any frameworks that depended heavily on JavaScripts.

As a developer, I understand this is a daunting task, but my responsibility is to report the issues. My supervisor will make the final decision on how we should proceed.

My response on tables not display in full:

On large screens, especially desktops, the table should display in full and not cut off. This limitation will cause accessibility and usability issues. It’s my supervisor call.

My response on variable fonts:

Since Montserrat is a huge family. Using static fonts wastes too much bandwidth. Please switch to VF fonts.

Not just loading, but also adding extra fonts that we might never use. I am pretty sure we will never use hairline and thin weight or bold italics and black italics. Right now you are loading 18 font files. With variable fonts, you only need 2. You can cut down 16 files. VF is much more flexible. You can choose an infinite number of weights. For instance what if I want the text to be thinker but not too bold. With static fonts, I can choose either 400 or 500. With variable font, I can choose anything between 400-500.

My response on indicators for linking to documents:

This issue is reported by our IT Accessibility Expert. I concur with her and strongly recommend that we have an icon indicator for each linking file type to improve accessibility. We currently apply this practice on our current site. I defer to my supervisor if we need to continue this practice or not on the new site.

My response on header issue with nav links wrapped:

UI is best set in a sans-serif typeface. If we were to choose another sans serif, I wouldn’t keep Montserrat. Using 2 sans-serif typefaces would cause confusion. Furthermore, it would make us looks amateurs. If you want to keep Montserrat, we would need to find a different solution for the nav, which is to move it to the top.

That’s just my suggestion. My supervisor will make the call.

My response on layout options:

I am not seeing any layout options for the main text area. Is it always main content on the left and sidebar on the right? Is there a full-width option? Is there a split 2-2 option? 1-3 option?

We did talk about flexible layouts with Brad. We even showed examples.

I defer this to my supervisor.

My response on site performance:

The point of performance score is based on internet connections, images, assets (css, js, etc); therefore, the goal is to optimize for the sites for these circumstances. It is not related to your CMS, but definitely related to front-end development.

I have all of these issues written down for the record. I pointed out the problems and made the suggestions. I don’t have the power to make the final decisions. If the site wouldn’t work as expected later on, it would not be my fault.

Pretty Text Wrap

I just learned about a CSS feature that would prevent orphans on text blocks. Of course, I applied it to this blog:

.content {text-wrap: pretty;}

This will make my body text less lonely (no orphans left behind). Thanks to Robin Rendle and Stephanie Stimac for the tip.

Install 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, but update the package lists first:

sudo apt-get update

Run the installation:

sudo apt-get install php8.2 php8.2-cli php8.2-common

Install additional PHP modules

sudo apt-get install php8.2-mysql php8.2-soap php8.2-bcmath php8.2-xml php8.2-mbstring php8.2-gd php8.2-curl

Disable PHP 8.0:

sudo a2dismod php8.0

Enable PHP 8.2:

sudo a2enmod php8.2

Restart Apache:

sudo systemctl restart apache2

Source: Based on instructions by Bobby Iliev

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.


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

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.