Anthony McLin

Statically generate a markdown-based blog using NextJS

I've begun the process of moving my site from Drupal to a custom-built React application stack using NextJS. As part of this, I'm moving content to markdown files kept with the source code, rather than maintaining a CMS for simple content storage. Let me take you through the process of how you can use NextJS to efficiently render markdown files as static HTML for fast performance, quick build times, and maximum SEO.

Leveraging opacity to improve UX on a list of blog posts

When I built the theme for this site, browsers did not have fast Javascript execution and redraw frames were universally slow. So my original vision for fading out a list of blog posts wasn’t really achievable while still maintaining a usable experience. Instead I compromised my design intent with sequential transparency effect as the blog posting list got long. Modern browser capabilities have resolved my original concerns, so follow along as I take you through the steps of implementing a blog list that fades out as the items scroll off screen.

CSS-only solution for Flash of Invisible Text using font-display

My recently article on resolving the Flash of Invisible Text in Drupal left me wanting. It was never fully resolved since I was using Google Web Fonts, and they haven’t specified the CSS font-display property in their stylesheets. Using a pure CSS solution will have much better performance than Javascript, so I decided to do deeper investigation to see if this is solvable without self-hosting the webfonts.

There’s three things I want to test:

Drupal Performance: Significant Improvements for Little Effort

Website performance is arguably the single most important area where you can invest your development time and resources. No matter how unique your marketing message is, or how empowering your product, you will not see conversions if your site is slow to load. Mobile users on fast connections are still subject to network intermittencies. Peak traffic congestion can degrade the speeds that visitors normally connect with. Even disregarding dialup users, plenty of your desirable segment of visitors may be browsing from airports, traveling internationally, or at a coffee shop.

Enabling PWAs on Drupal

Progressive Web Apps are a great way to improve the performance of a website. Besides the functional behaviors that they provide, making a website feel more like a native app, they are predicated on leveraging service workers to improve site caching and offline support so the site can still be viewed even if the visitor has an intermittent (or unavailable) network connection. Follow along as I use Google's Lighthouse audit to enable Progress Web App capabilities on my Drupal-based website.

Drupal Performance: Eliminating the Render-Blocking resources

One of the biggest factors in page performance is render-blocking assets. These are assets that prevent the page from being rendered while they load. Typically this is Javascript and CSS in the head of the document. When you're using a CMS like Drupal, you often don't have much control over how these are structured since the CMS does its own management for combining various files into cached versions depending on what components or modules exist on a given page.

Drupal Performance: Eliminating the Flash of Invisible Text

Today there are a plethora of fonts available for use on the web. All major browsers support web font technologies, and there are many foundaries and freely licensed fonts available for making a site look just so. We no longer have to deal with the extremely limiting set of baseline fonts installed on visitors' computers. However, the rise of webfonts also means that there is a performance impact to using them. When the browser loads the site, it also has to load the fonts, just like any other static asset.

Cleaning up a compromised Drupal site

When running a web-based CMS like Drupal or WordPress, it is not uncommon to have your site compromised by hackers who inject malicious files to use your site as a hosting platform for spaming, botnets, or other malicious activies. If this happens to you, don't fret, as it is very unlikely you were specifically targeted. Instead, it's most likely your site was found with automated scanners and targeted simply because it was identified as being out of date with security patches. To protect yourself, there's a few things you should do:

Solving Lighthouse's inefficient cache policy warning on Drupal websites

While working to improve the performance of my website, I have been using Google's Lighthouse to audit the page performance and looking for quick wins. One that comes up frequently, and is easily solved, is improving the cache policy on static assets. When running Lighthouse against my Drupal site, I get the warning "Uses inefficient cache policy on static assets". This will always occur on a Drupal site, but is really easy to improve the site performance to fix this:

Moving a Drupal site to HTTPS

As part of improving the performance of my site, and bringing it up to date with modern best practices, one step is to switch over to HTTPS instead of HTTP to secure the site. This is a required condition for a Progressive Web App, but it's a good practice in the modern age.