First, let's examine what's in the <head> area of my current site. Note that whatever's wrapped in {{ }} tags is Craft CMS code.
<!DOCTYPE html>
<html lang="{{ craft.app.language }}">
<head>
<!-- Internet Explorer? Well, won't need this! -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Next part is pretty standard. -->
<meta charset="utf-8" />
<title>{{ siteName }}</title>
<meta http-equiv="Content-Type" content="text/html; charset={charset}" />
<meta name="description" content="{{ craft.app.globals().getSetByHandle('siteInfo').siteDescription }}" />
<meta name="keywords" content="Wade, Winningham, Wade Winningham, Updrift, Ruby on Rails, PHP, MySQL, Craft CMS, HTML" />
<meta name="author" content="Wade Winningham" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="referrer" content="origin-when-cross-origin" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="manifest" href="/site.webmanifest">
<!-- Links to rss/atom feeds for those who use RSS Readers -->
<link rel="alternate" type="application/rss+xml" href="{{ url('feed.rss') }}">
<link rel="alternate" type="application/atom+xml" href="{{ url('feed.atom') }}">
<!-- Link to an Adobe webfont. I'll drop this in the redesign. -->
<link rel="stylesheet" href="https://use.typekit.net/mbc8gkz.css">
<!-- CraftCMS embedding the css file -->
{% set stylesheet = rev('main.css') %}
{% if stylesheet %}
<link rel="stylesheet" href="/{{ rev('main.css') }}">
{% endif %}
<!-- The rest of this is page view tracking for Matomo -->
<!-- which I host myself rather than use Google -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//updrift.com/matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
</head>
Referrer
Based on the info in this article on referrer best practices, one meaningful change I can make is to set my referrer policy to strict-origin-when-cross-origin for the reasons within that post.
While that seems to be the default for most browsers today, it's not guaranteed, so seems best to be explicit.
Viewport
The viewport value is stale. Been forever since I'd have set that. One item, the user-scalable=no can be bad as the documentation indicates it can cause accessibility issues. Which makes sense as it doesn't allow for scaling the screen for those with visibility issues.
So I'll reset that to a safer value of width=device-width, initial-scale=1 and can adjust it if necessary when I get more into the layout and design later.
Manifest
A site.webmanifest file isn't required, but nice for Android devices. So I'll keep it basic.
{
"name": "Updrift",
"short_name": "Updrift",
"description": "A blog from Wade Winningham on tech, development, and building web sites and appliations.",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Last year, I had the intention to re-launch this website.
Here we are at the end of 2023 and that didn't happen. I'm a year late now. Another year won't pass me by with no action, so I'm cranking this side project up.
What kind of content will be on this site?
Updrift has always been intended to be my work-side. What do I do for work? I'm a developer, which would imply this site would have developer related posts.
The topics will be varied. Programming related mostly, but I'll probably write about my search for a new office desk, as well.
What's first?
First up, is a new logo. My original one feels a bit outdated to me and the orange-y color doesn't lend itself well to both light and dark backgrounds.
Old Updrift Logo
The icon was reminiscent of a wave or swirl of wind.
Introducing the new Updrift logo, which makes use of Dan Cederholm's Cartridge Font available at simplebits.com. My wife, Pamela Winningham, came up with the new icon which is patterned after a parachute riding the air currents. She also hand-kerned a few of the letters.
New Updrift Logo
What's next?
Soon, I'll strip away the styles on this website completely and start building a fresh site design step-by-step. Documenting everything here along the way.
My goals are:
Hand coded CSS. No frameworks like Bootstrap, Foundation, or Tailwind.
Limited Javascript. At first I was thinking absolutely none, but I would like to keep track of simple metrics like web views. That typically entails some javascript or possibly some hidden image. May use some to colorize code examples, as well.
Accessible. I'm amazed more business sites don't pay attention to making their sites and applications easier to use by everyone. Individual developers tend to pay more attention to it. Businesses mainly seem to care after a lawsuit is initiated.
That's mainly it. So expect a mess for a while. I'm sure once I start, it'll be slow going.
I plan to stick with using CraftCMS which I'm still happy with.
As mentioned in my previous post, I'm still in the middle of converting my old Expression Engine version of this site over to CraftCMS.
Local Development
I've kicked the tires on CraftCMS a few times before. Each time they had a different method of getting a local development environment set up. The fluctuation of varying methods seems like it would be irritating, but I've seen how much easier each one has made things. Therefore, I find it refreshing that they're always willing to move to something better rather than getting stuck with stale technology.
The current method entails using Docker with DDEV, which has made it really easy to set up a local environment.
I already use Docker for work, so it feels right to use it here. Starting up is as simple as moving into my local directory and typing this:
ddev start
This sets up a local URL where I can view and work with my site pretty much the same as it looks completely live, just how you'd expect and want it to work.
When I'm finished, whether that's updating templates, trying a new plugin, or setting up a new section, I type the following to shut things down.
ddev stop
Deploying
I set up a new cloud server at Vultr. I've hosted with them for a while and don't have any complaints.
Here's the general overview of the steps I went through.
I used manual server setup instructions which I wrote for myself from past installations. This includes setting up the basics like the database, PHP, Apache (I'm just more used to it than Nginx).
Created a backup of my local database that I then imported into the server's databases.
Copied files from my local installation.
This got me almost completely functional except for one thing.
I only use a few plugins for this site, but I couldn't enable them. The admin area allowed me to and reported that they were enabled but they never actually flipped to being actually enabled.
The solution was to simply re-install the plugins using composer. That did the trick, and the entire site seemed functional afterward. I just finished up this post leaving the absolute last step, which is to point my domain over to the new server.
Manually copying files?
Wondering why I'm not setting this up with some fancy Github automated deployment? Well, I probably should, but it's just a small site I can easily back up. Any changes, I'll just work on the live site. I know.
What's Next?
Pagination. Since I'm just starting out, I don't really need it yet. I'll add it after I post some more.
Excerpts for the home page. Maybe. I don't plan to write monster posts. On the fence right now about this one.
