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.

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.

I was skeptical of a recent SmashingMagazine article about building a webapp in 45 minutes. So I decided to follow along and see if I could replicate their success. I have never used Meteor before, or any server-side Javascript processing (aka Node.JS) for that matter. Usually I rely on Apache and PHP for the server side, so this will all be a new learning experience for me.

In the past I've written about Facelift Image Replacement (FLIR), a technology for providing fonts to web pages when visitors don't have the font installed. Unfortunately, the project homepage no longer exists, and the author Cory Mawhorter doesn't seem to have moved it anywhere else.

Since the project was released under a GPL 2.0 license, I've rebuilt version 1.2 (the latest copy I had) from source code within a project I was working on. I've made it publicly available as a repository on GitHub.

My JQuery lockScroll script is now available on GitHub for easy forking. and contributions.

If you have any problems, just leave a note below.

Shortly after creating my JQuery LockScroll plugin, I was given a site design to implement that happened to require that functionality. Talk about fortuitous circumstance! However, an extra wrinkle existed in the site design. Not only did an element need to switch states between fixed and scrollable, but at another point while scrolling down the page, it needed to change contents as well. This could easily be achieved by using the LockScroll plugin twice on the element with different offsets... but I needed some way of distinguishing the 3 different possible states caused by doing this. The best way of doing this was by toggling classes, which the plugin now does. Read on for details of what's new.

I was browsing around, doing some css research, and I stumbled across a really cool effect at CSSWizardry.com. When you scroll down the page, the menu and logo stay fixed. Not a big deal, but the metadata for comments pokes out of the main column and risks overlapping the menu. Watch what happens when the comments section and the menu intersect.

Wow.

Read on to see how I duplicated and enhanced this effect.

Q: How do you load up a bunch of images in a slideshow without causing long page load times?

A: Load the images on-demand. Here's an example of how to load images on demand when using JQuery Cycle to run a slideshow.

I'm happy to say that my previous post about using a modern version of MooTools in Joomla no longer applies. With the latest update to Joomla (1.5.20) a new plugin was added, providing MooTools 1.2.4, with backwards compatibility for Joomla extensions that relied on MooTools 1.1. This update came just in time for me as I was updating a client's site from Joomla 1.0 and had a lot of Javascript to rewrite with new dependencies and conflicts to avoid.

For upgrade installs, this plugin is not enabled by default.

I was just wrapping up a new website, when to my <sarcasm>big suprise</sarcasm> I found that it was broken in Internet Explorer 8. After doing various tricks to optimize and troubleshoot the code, I discovered that one feature in particular was working just fine in IE7, but was throwing javascript errors in IE8.

I'm utilizing the JQuery plugin MapHighlight to generate a fancy border/highlight effect on an interactive floorplan feature. It turns out, that in IE8, Microsoft removed support for a wildcard selector when creating VML objects. Luckily, this was a relatively easy fix, as someone already did the tough work for us.

Here's how to apply the fix yourself: