Published

Thoughts on LAMP vs JAMstack content management systems

Chris Coyier recently published a CSS-Tricks post titled “WordPress and Jamstack”. It’s a great rundown of the pros and cons, and I’m in agreement on the whole.

The most important point for my own use cases is from the section titled “CMS and End User UX”.

Sometimes, we developers are building sites just for us (I do more than my fair share of that), but I’d say developers are mostly building sites for other people. So the most important question is: am I building something that is empowering for the people I’m building it for?

I really enjoy working on JAMstack (JavaScript, APIs, Markup) sites, the dev environment can be spectacular. It’s wonderful to not worry about deployment, HTTPS, caching. BUT. I haven’t yet found a JAMstack content management system (CMS) that I love, so it’s not something I feel super comfortable reaching for in the majority of my client work.

Read more

Published

Commonplace WordPress theme

I’ve been gradually updating the WordPress theme that powers this site with the help of a very talented designer and thinker, my friend Bec Worth.

It began with conversations about overhauling her own site. She had a few disparate Tumblrs with a ton (and I really do mean a ton) of great references, photos, and more that had accumulated over the years. All of them had fallen in to disuse for one reason or another, but she still felt like some sort of outlet for collecting these sorts of snippets and longer-format writing would be really useful. She brought up the Commonplace book as a particular inspiration. I’d never come across it before but it really resonated.

We continued talking about her site, and I started to restructure my old color-heavy Notebook theme (view in Wayback Machine) to strip out the less necessary functionality, improve the accessibility, etc. I wanted to make it something that could be more widely useful to not just me and Bec, but others as well. The early version of this new theme used variable Work Sans (view in Wayback Machine)

She liked where it was going, so we got her set up on a WordPress instance and used the Tumblr importer to pull in all of that old content. Since then, we’ve been using her log and my site to test out ideas and continue pushing the idea of what a Commonplace Book could be on the web. For more along these lines, I recommend reading her post “What would a Commonplace Book feel like on the web?

What’s next

It’s far from finished. The type is nowhere near as tight as Bec’s designs, I need to spend a bit more time on that! Amongst other things, I need to clean up the table of posts, add a thumbnail view, and improve the gallery block styles. We’re also going to figure out a way of highlighting work and other projects, something that draws a bit more attention than normal posts.

And color! We’d like to make it possible for people to select preferred text colors, maybe on a post-by-post basis or per category. Color is tricky though, I’d like to preserve some baseline of legibility and I’m not sure how much I could do as the developer to enforce that. Also, how do we handle this if we introduce dark mode support? The HSL or LCH color spaces might be helpful.

I’m not planning to submit this to the WordPress theme directory. Right now, this means that installation and updates are pretty manual, the theme has to be uploaded via FTP before it can be installed. Because of that, I’ll eventually set up an update server so that anyone using the theme can perform one-click updates from the WordPress admin area. Note to self: see this article for more on how to do this.

Realistically, people using the theme might want to change up certain aspects of the theme to be more “them”. Instead of adding a ton of theme options like font pickers and that sort of thing, I’d like to encourage people to tinker with it themselves. This is going to require a bit of documentation to point people in the right direction. I’ll probably start with how someone with little-to-no CSS experience could go about changing the font (i.e. upload font files in the Media library then add the necessary CSS lines in the Customizer, or setting up a child theme).

Clearly, it’s a work in progress!

But anyone is welcome to give it a try for themselves. I recommend it if you’ve been looking for a place to keep important references or get thoughts out of your head. Head to the commonplace-wp-theme GitHub repository to download it and read a bit more.

If you do end up using it, we’d love to know.

Published

Sorting out WordPress error “Updating failed. Error message: The response is not a valid JSON response”

I moved a brand new WordPress site on to new hosting recently and was confronted by an “Updating failed. Error message: The response is not a valid JSON response” error. Seemed kind of inexplicable, not a lot of info in the console either. I’ve done the same thing a bajillion times with this and other hosting providers and have never run in to this error, so it seems kind of weird.

This issue on GitHub outlines a lot of the potential causes, but this comment specifically sorted out my problem. Turns out you just need to flush the permalinks? Another off-then-on-again type of fix.

I think the WordPress devs might eventually create a more helpful error message for this, but in the meantime this is worth keeping in mind.

Published

WordPress “Upgrade database” process hangs on Laravel Valet

I’m working on a WordPress site for a client that involves importing a whole bunch of their legacy content. I decided to work with a copy of their old database for this. I set it up locally in Sequel Pro, accessed /wp-admin, and was met (as expected) with a “You must upgrade this database”-style screen. I clicked the button and… nothing. Eventually I had a 504 error.

I use Laravel Valet to develop PHP sites locally on my MacBook Pro, so I checked the NGINX error log ~/.config/valet/Log/nginx-error.log for hints about what was going on. I repeatedly saw an error along these lines (highlighted bits are altered by me to be more generic):

YYYY/MM/DD HH:SS:MM [error] 52486#0: *14 upstream timed out (60: Operation timed out) while reading response header from upstream, client: 127.0.0.1, server: , request: "GET /favicon.ico HTTP/1.1", upstream: "fastcgi://unix:/Users/username/.config/valet/valet.sock", host: "hostname"

I searched online and found a bunch of suggestions, about checking the valet.sock file, about increasing the fastcgi settings in the NGINX config, etc. Nothing seemed to work.

I then came across this issue which sounds super similar, and they seemed to resolve it with a reboot.

Worked for me too. Turn it off and on to the rescue again. Wanted to mention it here in case anyone else is banging their head against the wall at some point.

Published

Enabling Imagick extension with Laravel Valet

Edit 4 February 2021: I was just revisiting this and realized that an important bit of the mkdir command below was partially missing. 😅 Apologies to anyone who ran in to confusion because of that!

After setting up Laravel Valet and MySQL with Homebrew a while ago, local development has been pretty smooth sailing. Today though, I ran in to some trouble getting the Imagick extension up and running. After some searching online, this discussion thread got me going in the right direction.

I had Homebrew and pkg-config installed already, so the first thing I did was install ImageMagick with Homebrew by running brew install imagick. Next, I installed the Imagick extension with PECL by running pecl install imagick. It’s worth keeping an eye on the output related to this installation. At the very end of the output, I got this error:

ERROR: failed to mkdir /usr/local/Cellar/php@7.2/7.2.19_1/pecl/20170718

Someone else in the discussion thread ran in to a similar problem, so I roughly followed their directions.

I ran pecl config-get ext_dir to get the extensions directory that the PECL config expects, then I copied that output and ran mkdir -p copied_directory (of course please replace copied_directory width your output) to create the necessary directory myself. I then ran pecl install imagick again, and this time there were no errors, likely since it no longer had to create the directory. Note that the output from this successful installation ended in Extension imagick enabled in php.ini.

To wrap it all up, I ran valet restart and then ran php -i | grep Imagick to check that Imagick Imagick in the PHP configuration. It returned a few lines in relation to classes and the ImageMagick version indicating that everything was set up as necessary.

Note that this only applies to the PHP version that is currently in use by Valet. I use a few different versions depending on the project, so I’ve repeated the pecl install imagick step for each of those versions as well.

Published

New site for a Barcelona-based architecture practice

We launched a new site for architecture practice Barozzi Veiga about a month ago. It was a pleasure to work with Adrien Vasquez at John Morgan studio during the development process and to work with the Barozzi Veiga folks as we fine-tuned things. The site launch coincided with the announcement that Barozzi Veiga had been selected to take on a major renovation of the Art Institute of Chicago (read more).

barozziveiga.com

Published

Setting up Laravel Valet + MySQL via Homebrew

After far too much delay, I’ve finally ditched MAMP Pro. 🎉

I’m now trying Laravel Valet + MySQL via Homebrew for local PHP development on my MacBook Pro. The notes below are an account of the steps I took for future reference. There were some fiddly points getting started and I expect there to be more, but I’m pretty pleased with the swap overall.


0. Back up databases

The pre-step is to back up any preexisting databases so that you can set them up later if needed. Personally, I use Sequel Pro for all local and some remote database management, so I pulled my necessary exports from there.

1. Install and configure Laravel Valet

The first step is to install Laravel Valet. Their installation docs are pretty much all that is needed. The only caveat is that I’d be a little careful about updating Homebrew or Composer willy nilly, just be wary if you already have it installed and need your preexisting version for any reason. While completing the installation steps, pay attention to the warnings! Complete any recommended steps if you can, they pop up for a reason.

If all went well, at this point you should have an Apache server so you’d be ready to work on a file-based website such as one that uses Kirby CMS or a static site generator (Hugo, Gatsby, Jekyll, etc).

2. Install and configure MySQL with Homebrew

To work on a database-driven site like a Craft CMS or WordPress build, the next step is to install MySQL via Homebrew.

The Laravel Valet docs mention this step, but for me it was nowhere *near* as simple as their two-command recommendation. I think there was likely a conflict with my preexisting MAMP-specific MySQL setup and possibly an old Homebrew installation. I ran the commands from the Valet docs to install MySQL v5.7 and run it, but I would get the error The server requested authentication method unknown to the client [caching_sha2_password] on the front-end. This error indicated that it was actually running MySQL v8 (read more). Sure enough, mysql --version returned mysql Ver 8.0.16 for osx10.14 on x86_64 (Homebrew). To sort it out, I had to reinstall and restart the MySQL service.

To remove MySQL, I followed these instructions. (Be careful with those commands, they remove a lot of stuff.)

After I’d gotten rid of MySQL, I ran the Homebrew commands below to install, link, and start the service.

brew install mysql@5.7
brew link --force mysql@5.7
brew services start mysql@5.7

Note that I tried doing this without the link but consistently ran in to the error Can't connect to local MySQL server through socket '/tmp/mysql.sock' when trying to connect in the next steps. Linking seemed to sort it.

The Homebrew installation command recommended a step involving mysql_secure_installation which sets the root user’s password. We need this for phpMyAdmin and Sequel Pro (coming up below), so I completed this step as well.

3. Set up and / import databases

Once MySQL is set up and running, it’s time to set up your databases. Check out this article for some useful instructions on how to create a user and database on the command line. To import one of your SQL exports from earlier, run mysql -u [username] -p [databasename] < [filename.sql] replacing the bits in brackets with your username, database, and filename. When prompted, enter the password you set up via mysql_secure_installation.

Otherwise, you can do add your database via a UI such as phpMyAdmin (see Laravel Valet-friendly steps) or Sequel Pro.

4. Adjust PHP settings (optional)

I usually adjust my PHP settings (e.g. memory_limit, max_execution_time, post_max_size, etc.) to something that is similar most of my sites’ production hosting environments. Ideally this would be less manual (Docker? Ansible?), but that’s exploration for another day.

I thought that changing the PHP settings would be as simple as adjusting the php.ini file that is specified in the “Loaded Configuration File” value returned by phpinfo(). I edited /usr/local/etc/php/7.2/php.ini and then ran valet restart to restart the server and… it didn’t work. One of my changes was respected according to phpinfo(), but the rest weren’t.

I checked the “Additional .ini files parsed” value and saw that the file /usr/local/etc/php/7.2/conf.d/php-memory-limits.ini was also in use. After I edited this file to include my preferred settings and restarted Valet, all was well.

5. Adjust Nginx config (optional)

Valet’s default Nginx config should normally be sufficient, but you might have to tweak it for certain edge cases.

My edge case was the British Earways site (read more). I was working with it locally and suddenly ran in to a 413 Request Entity Too Large error when attempting to upload a very large audio file. To get around this, I needed to raise the client_max_body_size Nginx directive.

To adjust the Nginx configuration, I first had a look at the main config file by running /usr/local/etc/nginx/nginx.conf. Scanning through that, I saw a few includes:

include "/Users/[username]/.config/valet/Nginx/*";
include servers/*;
include valet/valet.conf;

I had a look at /Users/[username]/.config/valet/Nginx/valet.conf, found client_max_body_size and changed that value to suit my requirements, and then restarted the server by running valet restart.

Other useful things

Run brew services list to find out which services are running. This is useful for troubleshooting if you’re having PHP or mySQL errors.

If you’re adjusting the PHP settings in a .ini file, run valet restart, and then suddenly start seeing only an “It works!” screen where your site should be, you probably have to stop Apache first before restarting Valet. Most guidance online recommends running apachectl stop, but I had trouble with this (see related StackOverflow thread). Instead, I ran valet stop, sudo killall httpd, then valet start. This worked smoothly.

Here’s a list of MySQL commands.

For more info about what $PATH is and why it’s important, see this Unix & Linux Stack Exchange thread or notes on the command line geared towards beginners.

I usually use redirect rules to use media from production when developing locally, for example when working on the WordPress theme that powers this site. Laravel Valet doesn’t seem to play nice with the normal .htaccess method, maybe because it’s actually an Nginx server. See “Proxying images to a remote host on Laravel Valet” for an effective alternative using a local driver.

On an image-heavy project using Craft CMS, I ran in to a 504 error brick wall at one point. Could not for the life of me figure out the problem, even after pouring over the error logs. Ultimately I uninstalled and then reinstalled valet, and that seemed to do the trick.


Edit 10 July 2019 – Added further notes based on working with Laravel Valet the past few days, including the PHP and Nginx config adjustments.

Edit 04 October 2019 – Various small wording adjustments and additional reference links. Used these notes for reference when working with SB to adjust his own setup, and it was clear that some bits could use clarification.

Edit 18 October 2019 – Added note regarding 504 errors.

Published

britishearways.com

Screenshot of britishearways.com

Last month, I completed a major overhaul of the British Earways website. The design by Valerio di Lucente of Julia is almost entirely unchanged, the adjustments were largely performance-related and under the hood, geared towards modern browsers. Here’s brief rundown of the changes:

  • Style the full-window player layouts using CSS Grid Layout + 100% height (not 100vh since that can lead to unexpected behaviour on mobile browsers), and use CSS Scroll Snap w/ polyfill for scroll behaviour
  • Achieve flexible typography and spacing with “CSS Locks
  • On non-touch screens, implement invisible DragDealer instances so that each player’s scrubber can be dragged
  • On touch screens, add click event listeners that advance the relevant scrubber to the click target
  • Use styled HTML5 progress elements for each player since these are easily manipulated via their max and value attributes and don’t require adjustment if the window is resized
  • Use the Web Audio API to initialise each audio file and trigger the necessary state changes as the time updates
  • Switch the audio preload attribute from auto to metadata to reduce the size of the page when it initially loads
  • Update CMS to Kirby 3 (this was a joy, IMO the panel layout options make v3 much more client-friendly)
  • Adjust post_max_size, memory_limit, max_execution_time, and upload_max_filesize to allow upload of large (150MB+) audio files

I ran in to one issue that isn’t yet resolved. Kirby copies all uploaded media from the private /content folder to the publicly-accessible /media folder. This copying normally happens almost instantly, even with very large files. On the BE site however, the copy is pretty slow. Since the site pulls the audio duration from the audio file itself via the Web Audio API, the displayed duration is incorrect until the file has finished copying. This is almost certainly related to some rate limiting done by the shared hosting company, a legacy from the preexisting site. It isn’t a huge deal since the copying always finishes eventually, but it isn’t the best behaviour. I’d like to raise the issue with the hosting company but don’t have high hopes, shared hosting providers use rate limiting for a reason.

At any rate, I’m really looking forward to seeing how DB uses the site over the next year and listening to the new mixes.

Published

Site update: a new taxonomy index and a11y improvements

Just pushed an update to this site.

The Browse page is now mainly an index of taxonomies and archives (years, post formats, categories, tags). This new index replaces the opacity-based tag cloud. I kind of miss it, but it was problematic. Very hard to digest, and the lighter greys were way too low-contrast.

Besides the index, most of the changes are related to accessibility. I focused on making the tabbing experience a bit better, introducing a couple skip links. Note that I haven’t totally ironed out the tabbing… Most of my manual testing for this update was done in Chrome. I checked it briefly in Safari and it’s pretty weird, but I think it may have to do with the default Safari settings. I haven’t adjusted these yet, read more about Safari tab settings on a11yproject.com. Besides the tabbing, I also had a handful of links that weren’t suitably descriptive, particularly on the new term index. I added more aria-label attributes where I could. See the “Using aria-label for link purpose” page on the WCAG wiki for more info.

I’m trying to work on accessibility a bit more on an ongoing basis. Need to take a little dive in to this Hacker News thread, via this tweet.

See also:

There are probably a million a11y optimisations I can / should still make on this site. Suggestions are very welcome.

Edit 08.11.19 – Added Mozilla accessibility blog post