These sessions exist all over the place, with a multitude of working directories, and I often forget which tool I started a session with.

So I built opensession – a simple TUI for managing your past chat sessions – making it easy to recall a session and jump right back in.

Install

curl -fsSL https://jwww.me/opensession/install | bash

Support

It currently supports:

• Claude Code
• OpenAI Codex
• Cursor
• Gemini
• OpenCode

Check it out on GitHub. Open a PR if you want to add another app!

I've had glasses for as long as I can remember. I don't think there's a moment of my life when I remember waking up and just simply "seeing". I've tried contacts and never enjoyed them as they didn't feel like a full vision correction. As a matter of fact, I've actually always loved glasses – I probably have a dozen pairs or so.

However, I wanted to experience the feeling that so many people do without even thinking about it, so I scheduled a consult.

Initially, my consult ruled out LASIK due to thinner corneas, but after my final in-depth assessment, I was deemed eligible for either LASIK or PRK. I settled on PRK, partly due to this being my initial choice, and partly for some of the dry-eye, night vision, and corneal strength benefits.

I found myself approaching the surgery with nonchalance – and when the actual procedure came about, my feelings felt validated. It truly doesn't feel like a surgery at all. Everything was pretty much a walk in the park.

0 day - Slept for about 45 minutes right after the procedure, woke up feeling pretty good. Iced my eyes for 15 minute intervals to prevent swelling. Rigorous drop schedule. Eyes feel gritty and vision is not great.

+1 day - Piece of cake. made some soup, went to a company Christmas event. Eyes are still gritty. Continuing with the drop and icing regimen.

+2 days - This was the only truly bad day. There were moments I regretted the whole thing. My surgeon swapped the protective contact bandage and there was a fuzz or some debris under it that was causing my pain. Once he removed it (which was an ordeal – nearly passed out), I had immediate relief.

+ 3 days - Got the protective contact lens removed today. Vision feeling decent, no grittiness.

+7 days - One week consult. Vision test showing good results and re-growth of the corneal epithelium. I was able to get my driving license restriction removed and can now drive again!

+14 days - Vision is feeling like it's stabilizing a bit more but still has some room to improve.

Late last week, I was looking through my desk and stumbled across an older Raspberry Pi 3 B model. Not a particularly powerful unit but I thought I could possibly still make use of it.

Ghost recently released their Docker (preview) in version 6, and I've been looking for an excuse to try it. So I cooked up this idea to host a Ghost version of my site on the Raspberry Pi.

My Requirements

• No new hardware - I could easily get a $5 VPS and run it there, but that's no fun.
• Offline tolerant - the Raspberry Pi is not intended to be production grade and could go offline at any time. The same could be said about my home internet connection.
• Maintains existing structure - my website is a weird mix of PHP running on Vercel, basically an SSR-markdown-powered static site. I'd like to keep that for now.

Plan

Here's where I landed. There's probably better ways to do a lot of this, but this is what it looked like after spending a couple hours on it over the weekend.

The Raspberry Pi would run the Ghost instance, which is made available to the outside world using the excellent Cloudflare Tunnel (could also use Tailscale). Even if the RPi was offline, it wouldn't matter as it's not actually serving the site – it's simply used for authoring.

The Ghost instance would have a webhook configured to target the Vercel webhook. On publish, the webhook would initiate a GitHub action, which in turn would export the content from Ghost, convert to Markdown, and it commit to the Git repository. This commit would trigger a new Vercel build, which would subsequently be deployed.

Outside of the GitHub action, there is no further requirement for the Ghost server to be online – I can disable the tunnel any time with no consequence for the running website. Plus, I can still author content using plain markdown; I just have to run the upload script to sync it back to Ghost whenever the server is back online.

Installing Ghost

Honestly, this was the most trivial part of the step. The new Docker setup is super simple, and I had very little trouble getting it going.

// docker-compose.yml
volumes:
  ghost_content:

services:
  ghost:
    image: ghost:5-alpine
    platform: linux/arm64/v8
    ports:
      - "2368:2368"
    environment:
      NODE_ENV: development
      url: ${GHOST_URL}

      database__connection__filename: /var/lib/ghost/content/data/ghost.db
      security__staffDeviceVerification: "false"
    volumes:
      - ghost_content:/var/lib/ghost/content

The one caveat is that I wanted the simplest, most portable Ghost install possible, so I'm running it in development mode. This way, my database is just a simple SQLite file. I also had to disable staffDeviceVerification as the device is unable to send email.

Creating the Import Script

The conversion of Markdown to Ghost-friendly HTML is pretty straightforward. However, I'm using some non-standard CommonMark extensions in PHP and I wanted to make sure those things were handled both on the Markdown→Ghost import as well as the Ghost→Markdown export. This section really just discusses the setup of getting my posts into Ghost – if you're more curious about the publishing workflow, keep scrolling.

:::image-half

I'm using a CommonMark Attributes extension to allow me to create Markdown blocks like this:

<figure class="kg-card kg-gallery-card kg-width-wide">
  <div class="kg-gallery-container">
    <div class="kg-gallery-row">
        <div class="kg-gallery-image">
          <img src="img/image1.jpg" width="1200" height="800" loading="lazy" alt="" />
        </div>
        <div class="kg-gallery-image">
          <img src="/img/image2.jpg" width="1200" height="800" loading="lazy" alt="" />
        </div>
    </div>
  </div>
  <figcaption>First image caption | Second image caption</figcaption>
</figure>

Ghost doesn't natively support a layout like that, but they do have a gallery block. However, their galleries don't support videos and photos mixed, so we have to handle those a bit differently. Here's what I landed on to parse those Markdown blocks to galleries:

function imageHalf(md: string) {
  // :::image-half \n ![...](...) \n ^^^ caption \n ![...](...) \n ^^^ caption \n :::
  return md.replace(
    /:::image-half\s*\n([\s\S]*?)\n:::/g,
    (_m, content) => {
      // Check if content contains video elements or video file references
      const hasVideo = content.includes('<video') || /!\[[^\]]*\]\([^)]*\.(mp4|webm|mov)\)/i.test(content);

      if (hasVideo) {
        // Preserve as markdown block if videos are detected
        return `\`\`\`markdown\n:::image-half\n${content}\n:::\n\`\`\``;
      }

      const images: { src: string; alt: string; caption?: string }[] = [];

      // Split content into lines and process
      const lines = content.split('\n').map(line => line.trim()).filter(Boolean);

      for (let i = 0; i < lines.length; i++) {
        const line = lines[i];

        // Check if this line is an image
        const imgMatch = line.match(/!\[([^\]]*)\]\(([^)]+)\)/);
        if (imgMatch) {
          const [, alt, src] = imgMatch;

          // Check if the next line is a caption (starts with ^^^)
          const nextLine = lines[i + 1];
          let caption: string | undefined;

          if (nextLine && nextLine.startsWith('^^^')) {
            caption = convertMarkdownCaptions(nextLine.replace(/^\^\^\^\s*/, ''));
            i++; // Skip the caption line since we've processed it
          }

          images.push({ src, alt, caption });
        }
        // Skip standalone ^^^ lines that aren't image captions
      }

      if (images.length === 0) return _m; // Return original if no images found

      // Create Ghost gallery card HTML structure
      const galleryImages = images.map(img =>
        `<div class="kg-gallery-image">
          <img src="${img.src}" width="1200" height="800" loading="lazy" alt="${img.alt}" />
        </div>`
      ).join('\n        ');

      // Combine all captions for overall gallery caption
      const galleryCaption = images.map(img => img.caption).filter(Boolean).join(' | ');

      return `<figure class="kg-card kg-gallery-card kg-width-wide">
  <div class="kg-gallery-container">
    <div class="kg-gallery-row">
        ${galleryImages}
    </div>
  </div>${galleryCaption ? `\n  <figcaption>${galleryCaption}</figcaption>` : ''}
</figure>`;
    }
  );
}

For blocks that have videos and photos mixed, we actually just preserve the Markdown as a Ghost markdown block, so that our export script can simply export it as-is. Feels like a bit of a workaround, because it is!

Images & Captions

These were pretty easy! We'll need to make sure we also preserve image caption Markdown. Here's a Regex that targets captions but excludes Ghost Markdown blocks.

function mdCaptionToFigure(md: string) {
  // Convert ![alt](src)\n^^^ caption to <figure><img /><figcaption>... or <figure><video /><figcaption>...
  // But skip content inside markdown code blocks
  return md.replace(
    /```markdown\n([\s\S]*?)\n```|!\[([^\]]*)\]\(([^)\s]+)\)\s*\n\^\^\^\s*([^\n]+)/g,
    (match, codeContent, alt, src, cap) => {
      // If this is a markdown code block, return it unchanged
      if (codeContent !== undefined) {
        return match;
      }

      // Otherwise process the image/video caption
      const isVideo = /\.(mp4|webm|mov)$/i.test(src);
      if (isVideo) {
        return `<figure><video src="${src}" controls></video><figcaption>${convertMarkdownCaptions(cap)}</figcaption></figure>`;
      } else {
        return `<figure><img alt="${alt}" src="${src}" /><figcaption>${convertMarkdownCaptions(cap)}</figcaption></figure>`;
      }
    }
  );
}

Processing Pipeline

There's a few steps to transforming the Markdown to Ghost-ready content. Some is handled with my own custom parsing functions, the majority is then converted using micromark, and finally converted to Lexical format using Ghost's own @tryghost/kg-html-to-lexical package. The sequence roughly follows this progression:

1. Read the Markdown files (I pass a directory as an argument to the script)
2. Parse the front matter and title, slugify it (I should probably use the Ghost slug function instead of my own, but I don't have any collision issues yet)
3. Start converting the content to HTML
4. Handle :::image-half
5. Handle image captions
6. Convert to HTML using micromark
7. Absolute-ize the images (since they live in the GitHub repo and not on Ghost)
8. Convert to Lexical format
9. Upload to Ghost using the Ghost Admin API JavaScript client

That's it! All of my existing content is now in Ghost.

Export Script

Now that the content is all in Ghost, we can get to work with the publishing flow. Since we've already built the import functionality, we simply need to work in reverse to create the export functionality.

Unfortunately, it's not quite that simple, but here's a couple of solutions I ended up with.

Lexical Content

Some types of content felt a bit easier to parse directly from the Lexical format, such as code blocks and images.

function processLexicalContent(lexicalStr?: string): { videos: Array<{src: string, caption: string, alt: string}>, markdownBlocks: string[] } {
  const videos: Array<{src: string, caption: string, alt: string}> = [];
  const markdownBlocks: string[] = [];

  if (!lexicalStr) return { videos, markdownBlocks };

  try {
    const lexical = JSON.parse(lexicalStr);

    function processNode(node: any) {
      // Handle video blocks
      if (node.type === 'video') {
        videos.push({
          src: node.src || '',
          caption: node.caption || '',
          alt: node.alt || node.fileName || ''
        });
      }

      // Handle code blocks that might contain preserved markdown (both 'code' and 'codeblock' types)
      // We're using this to support :::image-half blocks that contain videos (workaround since Ghost doesn't support videos in galleries)
      if ((node.type === 'code' || node.type === 'codeblock') && node.language === 'markdown') {
        markdownBlocks.push(node.code || '');
      }

      // Recursively process children
      if (node.children && Array.isArray(node.children)) {
        node.children.forEach(processNode);
      }
    }

    if (lexical?.root?.children) {
      lexical.root.children.forEach(processNode);
    }
  } catch (e) {
    console.error('Error processing lexical content:', e);
  }

  return { videos, markdownBlocks };
}

We'll re-use the result of this function later.

Galleries

While the Ghost gallery block was an excellent solution for my :::image-half blocks, unfortunately Ghost does not support captions on a per-image basis for these. Thankfully, we just saved our caption with a pipe | separator in our import script, so we can now easily just split it on that.

Since we're going to re-process the HTML later, we'll add placeholders for all of the converted content so it's easier to find our place again. For example, for our :::image-half component:

function preprocessGhostGallery(html: string): { html: string, placeholders: Record<string, string> } {
  const doc = parse(html);
  const nhm = new NodeHtmlMarkdown();
  const placeholders: Record<string, string> = {};

  const galleryCards = doc.querySelectorAll('figure.kg-gallery-card');
  galleryCards.forEach((figure, index) => {
    const images = figure.querySelectorAll('img');
    if (images.length === 0) return;

    // Extract and convert gallery caption to markdown if it exists
    const figcaption = figure.querySelector('figcaption');
    let galleryCaption = '';
    if (figcaption) {
      // Convert caption HTML to markdown to preserve formatting
      galleryCaption = nhm.translate(figcaption.innerHTML).trim();
    }

    // Split caption by | for individual images
    const splitCaptions = galleryCaption ? galleryCaption.split('|').map(c => c.trim()) : [];

    let result = ':::image-half\n';

    images.forEach((img, imgIndex) => {
      // Start each image block with ^^^
      result += '^^^\n';

      const src = img.getAttribute('src') || '';
      const alt = img.getAttribute('alt') || '';
      result += `![${alt}](${src})\n`;

      // Add caption if exists (this also serves as the closing ^^^)
      const caption = splitCaptions[imgIndex] || '';
      if (caption) {
        result += `^^^ ${caption}\n`;
      } else {
        // No caption, but we still need the closing ^^^
        result += '^^^\n';
      }
    });

    result += ':::';

    // Create a unique placeholder
    const placeholder = `GHOSTGALLERY${index}`;
    placeholders[placeholder] = result;

    // Replace the figure with a paragraph containing the placeholder to preserve spacing
    const placeholderNode = parse(`<p>${placeholder}</p>`);
    figure.replaceWith(placeholderNode);
  });
}

Putting it all together

I won't go into all of the details – if you want to check out the source code, you can see the Ghost export script here.

The sequence is basically this:

1. Fetch all posts from Ghost
2. Process Lexical content (videos, markdown blocks that contain videos)
3. Download and rewrite images (these need to be in the repo as that's how they get added to the public site)
4. Pre-process HTML (images, captions, markdown code blocks)
5. Convert to Markdown using node-html-markdown
6. Replace placeholders and our Markdown video blocks
7. Final post-processing of Markdown (some node-html-markdown escaping quirks that didn't match the format
8. Save or update .md files in the GitHub repo

Publishing Flow

Now that we've got all of the pieces, let's put them together!

First, we'll create the GitHub Action:

// .github/workflows/sync-blog.yml
name: Sync blog (Ghost → MD)

on:
  workflow_dispatch:
    inputs:
      event_type:
        description: 'Event Type'
        required: true
        default: 'ghost-publish'
        type: string

jobs:
  export:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v4
      - uses: oven-sh/setup-bun@v2

      - run: bun install

      - name: Export posts → content/blog
        run: bun tools/ghost-export-md.ts
        env:
          GHOST_URL: ${{ secrets.GHOST_URL }}
          GHOST_CONTENT_KEY: ${{ secrets.GHOST_CONTENT_KEY }}
          GHOST_ADMIN_KEY: ${{ secrets.GHOST_ADMIN_KEY }}

      - name: Commit changes (if any)
        run: |
          git config user.name "ghost-bot"
          git config user.email "ghost-bot@users.noreply.github.com"
          git add content/blog public/img
          git diff --cached --quiet || git commit -m "chore: export blog"
          git push

This action will setup Bun and directly execute the export script, which will cause any changed or new posts to be added to VCS. The commit and push will automatically trigger a Vercel deployment.

Now, we need a webhook. I'll create a new file in the /api directory of my repository, which Vercel will automatically turn into a serverless function:

// /api/ghost-hook.mjs

export default async function handler(req, res) {
  if (req.method !== "POST") return res.status(405).json({ error: "Method not allowed" });

  try {
    const repo = process.env.GH_REPO;
    const token = process.env.GH_TOKEN;
    if (!repo || !token) {
      return res.status(500).json({ error: "Missing GH_REPO or GH_TOKEN environment variables" });
    }

    const response = await fetch(`https://api.github.com/repos/${repo}/actions/workflows/sync-blog.yml/dispatches`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/vnd.github.v3+json',
        'Content-Type': 'application/json',
        'User-Agent': 'vercel-webhook'
      },
      body: JSON.stringify({
        ref: 'main',
        inputs: {
          event_type: 'ghost-publish'
        }
      })
    });

    if (response.status === 204) {
      console.log('Workflow triggered successfully');
      return res.status(200).json({ success: true, message: "Workflow triggered" });
    } else {
      const errText = await response.text();
      console.error('GitHub API error:', response.status, errText);
      throw new Error(`GitHub API returned ${response.status}: ${errText}`);
    }
  } catch (error) {
    console.error('Error triggering workflow:', error);
    return res.status(500).json({ error: error.message });
  }
}

Let's hook this up to Ghost. In the Ghost admin, we can create a new "custom integration". This is also where we'll get the Content API Key and the Admin API Key that are needed by our import and export scripts.

I created a webhook for the Post published and Post updated events, but I could add more if needed.

That's it!

Now, I hit publish on Ghost, which fires that webhook (the Vercel serverless function). In turn, that function triggers the GitHub Action that will export the Ghost content, add it to VCS, and create a new commit. Finally, that commit automatically triggers the new Vercel build.

You can check out the full code on GitHub.

In this particular case, I'm configuring React, but you could use Vite to configure any other frontend framework.

This website has a bit of an unconventional setup, so I thought I'd share how I added a React application within the site. The concepts in this article could be applied to most PHP-based websites, where you handle the routing and rendering of the page on the server side.

First, we'll need Vite. I was already using TailwindCSS on the project, but using the Tailwind CLI, so let's replace that with Vite. We'll also use the new Tailwind v4 beta. Let's install these new dependencies.

npm i vite tailwindcss@next @tailwindcss/vite@next

We'll need to create a vite.config.ts file in the root of the project to handle the build process.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  build: {
    // we'll need the manifest so that we can load the assets into the PHP template
    manifest: true,
    rollupOptions: {
      input: {
        // handle the styles for the whole website
        style: resolve(__dirname, 'src/style.css'),
        // handle the styles for the playground
        playground: resolve(__dirname, 'src/playground/index.tsx'),
      },
    },
    outDir: 'dist',
    emptyOutDir: false,
  },
  server: {
    origin: 'http://localhost:5173',
  },
})

Vite's documentation for this is very good, but I just thought I'd get into a specific PHP example.

I'm going to assume you already have a React application created. Put that application in the src/playground directory, where index.tsx is the entry point for the application. If you're moving an existing application into this project, you'll need to update the index.tsx file with the module preload polyfill.

import 'vite/modulepreload-polyfill'

// ...existing react application code

We're going to create a PHP function that loads the Vite server and returns the HTML for the application in development mode.

<?php

function dev_load_vite_module($path) {
  $vite_host = 'http://localhost:5173';
  $response = @file_get_contents($vite_host . $path);

  if ($response === false) {
    http_response_code(404);
    return;
  }

  if (str_contains($path, '.css')) {
    header('Content-Type: text/css');
  } else {
    header('Content-Type: application/javascript');
  }

  foreach ($http_response_header as $header) {
    if (str_contains(strtolower($header), 'access-control-')) {
      header($header);
    }
  }

  echo $response;
}

Hook this function into our router, perhaps with something like this:

<?php

if (isset($_ENV['DEV'])) {
  dev_load_vite_module($_SERVER['REQUEST_URI']);
}

// ...existing template code

This will load the Vite server and return the HTML for the application in development mode.

Now we'll need to create a function to handle the assets in production mode.

<?php

function vite_assets() {
  $isDev = isset($_ENV['DEV']);

  if ($isDev) {
    return [
      'css' => 'http://localhost:5173/src/style.css',
      'js' => 'http://localhost:5173/src/playground/index.tsx'
    ];
  }

  $manifest = json_decode(file_get_contents(__DIR__ . '/../dist/.vite/manifest.json'), true);

  return [
    'css' => '/dist/' . $manifest['src/style.css']['file'],
    'js' => '/dist/' . $manifest['src/playground/index.tsx']['file']
  ];
}

Update your root template to include the Vite assets in the <head> tag. You'll also need to add a root element for the React application to mount into.

<?php $assets = vite_assets(); ?>
<head>
  <?php $isDev = isset($_ENV['DEV']); ?>
  <?php if ($isDev): ?>
  <script type="module" src="http://localhost:5173/@vite/client"></script>
  <?php endif; ?>
  <link rel="stylesheet" href="<?= $assets['css'] ?>" />
</head>
<body>
  <div id="root"></div>
  <?php if ($isDev): ?>
  <!-- since it's a react application, we need to load the react refresh runtime for development. -->
  <script type="module">
    import RefreshRuntime from 'http://localhost:5173/@react-refresh'
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
  </script>

  <script type="module" src="http://localhost:5173/@vite/client"></script>
  <script type="module" src="http://localhost:5173/src/playground/index.tsx"></script>
  <?php else: ?>
  <script type="module" src="<?= $assets['js'] ?>"></script>
  <?php endif; ?>
</body>

Since TailwindCSS v4 uses CSS for configuration, you'll want to update your root src/style.css file to use the new directives. You'll also want to add the @source directive to include the PHP files and the React application files.

@import 'tailwindcss';

@source '../**/*.php';
@source './playground/**/*.tsx';

Now, simply update your package.json to use Vite.

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

Now you can run npm run dev to start the Vite server and npm run build to build the application. You should see the playground running on your site.

That's it! You can see my React application in action here: Last.fm Listening Stats

The great thing about using Vite is that you could easily swap out the React application for another frontend framework. For example, you could use Solid or Vue instead of React and the same setup would work.

Haves

While travel was definitely a highlight, we also spent a lot of quality time at home. We did a lot bike riding, a bit of skiing, and enjoying those glorious Manitoba summers in the backyard.

It was a really mild winter, so skiing was super scarce, but thankfully we got some good snow starting in November, so 🤞 for this season. The mild winter led into a mild spring, so I was able to get out on the bike earlier. Plus I got a new bike this year which was a lot of fun!

In addition to the usual work trips, we were fortunate to be able to get away for a few family vacations, as well as two couples trips. We got away to Cancun, Revelstoke, and Vancouver with the kids, aside from other more local getaways and camping outings. The two of us managed to get away to Toronto and New York City for two different long weekends as well.

As I'm writing this, I'm looking back at my year and I'm realizing there was a lot of new places! My first time at:

• Universal Studios
• New Mexico
• New York City
• Revelstoke
• Toronto
• Winnipeg

Maybe not mind-blowing destinations but surprising to me that I've never been to any of these places before. Here's to more new places in 2025!

We were fortunate to be able to visit a couple of restaurants that I've been wanting to try for a while.

• Prime Seafood Palace - Toronto
• SAGA - NYC
• Osteria Giulia - Toronto

The interior of Prime Seafood Palace is gorgeous.

SAGA has a set menu, and there was a couple of winners in there. The atmosphere and view are what really sets it apart.

Went to React Miami in April which was probably the best conference I've ever attended. Met a lot of internet friends and made some new ones. Looking forward to attending again in 2025.

Have Nots

I wasn't able to reach my running goal, but managed to get in a couple of runs (mostly while travelling - somehow it's easier when you're not at home).

I have not blogged at all, but that's okay. I was more active on Twitter but I'm not sure that counts. It's fun though!

Have not redesigned my website! This is probably a good thing to have on the have nots list.

We didn't do a lot of camping this year. We did a few small trips closer to home, but nothing extensive. Planning out something bigger for 2025.

I'm not yet fluent in French, but I'm improving. I still don't believe in Duolingo's method (it's mostly a game), but I did break a 365 day streak in fall.

We have not yet resumed our Hawai'i tradition (it was interrupted by the pandemic). We were going strong for 8 years, but time just hasn't allowed for it. Perhaps in 2025.

Favourites of 2024

Things I enjoyed this year.

Favourite Bar - Milky Way - Montreal

Tried a variety of cocktails here. Drinks were excellent but the vibes were immaculate.

Favourite Dish - Cabbage w/ BBQ Chicken Skin at Prime Seafood Palace - Toronto, or the Pomelo Salad at Bar Accanto - Winnipeg

Unfortunately I don't have any photos of these, but they were both excellent.

Favourite Ride - LTV Cider Cycle - RM of Stanley.

Not a long ride but so fun taking all of the LTV owners out for a ride.

Most Surprising Place - Las Cruces, New Mexico.

First time in New Mexico (also in west Texas to get there), and I had zero expectations. It was a great surprise. Will be back.

Favourite Podcast - The live episode of Syntax.fm at React Miami.

I'm not a podcast listener (like, at all), but I used to listen to Syntax.fm a lot. It was a blast to participate in this live – Wes and Scott are true gems and great hosts.

Best Paddleboarding - Revelstoke Reservoir - Revelstoke, BC.

Spent the best day paddling with the family and some friends on the Revelstoke Reservoir.

Best Late-Night Snack - seared scallops w/ brown butter and broccolini

Most Insane Lasagna - Porzia's - Toronto

Favourite Song - Backfire by Wild Rivers. We were in Toronto to see them play at HISTORY. I also had Two Friends on the speakers a lot this year, especially out on the golf course.

Favourite Apps

• Halide Camera. - This is by no means a new app, but I got into using it again. Just makes taking photos fun again.
• Overseer - This is a fantastic tool for managing your media library requests (especially if you have a Plex server).

Favourite Movies

• Wicked - 🤷‍♂️
• The Fall Guy
• White Bird

Favourite TV Series

• The Bear
• The Day of the Jackal
• Little Drummer Girl - not from 2024 so it doesn't really count
• Death and Other Details
• Silo - only season 1 though

Favourite Books

I surpassed my reading goal of 32 books. Here's my top picks:

• Hyperion by Dan Simmons (and the rest of the series)
• The Midnight Feast by Lucy Foley
• Observer by Robert Lanza, Nancy Kress
• The Three Body Problem by Cixin Liu
• Wool by Hugh Howey

I read three full series this year, and all of them were excellent.

The documentation has some hints of "using @vercel/og without Next.js" but there is no real documentation for it.

After some scouring, I discovered unstable_createNodejsStream in the TypeScript definitions

First, let's setup the route in the vercel.json config file. This step is optional, depending on your configuration. Since I have PHP endpoints in my /api directory as well, I need to make sure that accessing /api/og points to the right place.

// vercel.json
{
  "routes": [
    {
      "src": "/api/og",
      "dest": "/api/og.mjs"
    }
  ]
}

Now, let's install the dependencies.

npm install @vercel/og -S

We're going to use the undocumented unstable_createNodejsStream method to generate our OG images. This is at odds with some of what the documentation says:

@vercel/og only supports the Edge runtime. The default Node.js runtime will not work.

However, a different page of the docs say that the Node.js runtime is supported 🤷‍♂️

I'd prefer to use the documented ImageResponse method that runs on Vercel Edge Functions, but I wasn't able to get it working locally without Next.js. Using unstable_createNodejsStream allowed me to work with it both locally and in production.

We'll setup our function handler and some of the base config stuff first. From the @vercel/og documentation:

If you're not using a framework, you must either add "type": "module" to your package.json or change your JavaScript Functions' file extensions from .js to .mjs

// api/og.mjs
import fs from 'fs'
import path from 'path'
import { unstable_createNodejsStream } from '@vercel/og'

export default async function handler(req, res) {
  try {
    const searchParams = new URL(req.url, `https://${req.headers.host}`).searchParams

    // this will look for the title query param as such ?title=<title>
    const hasTitle = searchParams.has('title')
    const title = hasTitle ? searchParams.get('title')?.slice(0, 100) : 'Blog Title'

    // since we're using the Node.js runtime, we can read fonts using fs
    const fontBold = fs.readFileSync(path.resolve('./public/fonts/Font-Bold.ttf'))
    const fontRegular = fs.readFileSync(path.resolve('./public/fonts/Font-Regular.ttf'))

    // setup the stream. the `html` variable will be undefined so far
    const stream = await unstable_createNodejsStream(html, {
      width: 1200,
      height: 630,
      fonts: [
        {
          data: FontBold,
          name: 'Sans Bold',
          style: 'normal',
        },
        {
          data: FoldRegular,
          name: 'Sans Regular',
          style: 'normal',
        },
      ],
    })
    res.setHeader('Content-Type', 'image/png')
    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
    res.statusCode = 200
    res.statusMessage = 'OK'
    stream.pipe(res)
  } catch (e) {
    console.error(e)
    console.log(`${e.message}`)
    return new Response('Failed to generate the image', {
      status: 500,
    })
  }
}

Both the unstable_createNodeJsStream and ImageResponse methods expect a JSX ReactElement property to be passed. However, we're not using Next.js here, and we don't have React installed in the project. Luckily, we can simply manually create the structure of the expected JSX output:

const html = {
  type: 'div',
  props: {
    children: [
      {
        type: 'div',
        props: {
          tw: 'pl-10 shrink flex -mt-20',
          children: [
            {
              type: 'div',
              props: {
                tw: 'text-white text-8xl',
                style: {
                  fontFamily: 'Sans Bold',
                },
                children: title,
              },
            },
          ],
        },
      },
      {
        type: 'div',
        props: {
          tw: 'absolute left-12 bottom-12 flex items-center pl-12',
          children: [
            {
              type: 'div',
              props: {
                tw: 'text-white text-4xl',
                style: {
                  fontFamily: 'Sans Bold',
                },
                children: 'Josiah Wiebe',
              },
            },
            {
              type: 'div',
              props: {
                tw: 'px-2 text-4xl text-white',
                style: {
                  fontSize: '30px',
                },
                children: '—',
              },
            },
            {
              type: 'div',
              props: {
                tw: 'text-4xl text-gray-200',
                children: '@josiahwiebe',
              },
            },
          ],
        },
      },
    ],
    tw: 'w-full h-full flex items-center relative px-12 rounded-3xl',
    style: {
      background: 'linear-gradient(230deg, #f0ecc1 0%, #f2787c 100%)',
      fontFamily: 'Vulf Sans Regular',
    },
  },
}

The library also supports TailwindCSS through the use of the tw property, so we can simply pass any desired Tailwind classes there.

Put that all together, then access /api/og?title=Your Title Here and it should return a PNG of your freshly minted on-demand OG image!

To add this OG image to your HTML, simply include this HTML in the <head> of your page:

<meta name="og:image" content="/api/og?title=Using @vercel/og without Next.js" />

That's it!

If you have any questions about this implementation, hit me up on Twitter or Mastodon.

A quick disclaimer. This article is not intended to disparage Next.js – I work with Next.js every day, and really quite enjoy it. This is simply a study in using an outsized solution for a trivial problem.

In 2023, I decided to re-create my personal website using Next.js. I even wrote about it. The building process was a lot of fun, and I even built a fun personal Twitter feed alternative.

Unfortunately, when it came to updating the blog, things didn't quite go so well. It can be hard enough to motivate yourself to write on your blog (especially if you're just getting back into it), and having a site that doesn't build correctly due to a dependency issue or a platform issues doesn't make it any easier.

For example, I recently tried to update the Twitter authentication (used solely by me to post statuses to the aforementioned feed page) to use Mastodon. This meant I had to update NextAuth.js, which meant I had to rewrite most of the session config for the whole site. The latest version of NextAuth.js is in beta, and I ran into a number of bugs that prevented me from proceeding.

This sentiment kind of echos my overall experience of using the Next.js App Router has been – feels like beta and a lot of unreconcilable issues. I'm not the only one. I'm a huge fan of their Pages Router though, and will continue to use and recommend it.

I love JavaScript. I love Deno, Express, Remix, Bun, Vite, and jQuery. I love Next.js. I might even say I love TypeScript. Those, and so many more JavaScript frameworks, tools, and libraries have pushed the web forward, along with my career. However, it didn't make a whole lot of sense to me to use a JS based tool to build and serve my website – particularly since this site has no client facing JS.

In the end, I rewrote the blog in PHP, hosted on Vercel using the unsupported vercel-php runtime. It's probably brittle and is not really production battle-tested, but I don't forsee running into a whole lot of scaling issues on my personal website.

This was a lot of fun. This made me feel like developing for the web felt like when I started two decades ago. No frameworks or metaframeworks, just a few PHP files and a PHP dev server. Sure, there was some platform quirks I had to work around (a result of my own architectural choice), and I reached for a few libraries to simplify the process, but overall, it felt a bit closer to bare metal that I have been for a while.

Props to the Next.js team for the work they've done to make developing full-stack applications as simple as possible (in their own flavour) in a world jam-packed with tools, practices, and tutorials.

This is goodbye, but not really.

During this time, Keychron had another Kickstarter launch, this time for a low-profile mechanical keyboard. Since I didn't enjoy the experience of the K8, I thought that maybe the transition to a low-profile mechanical would be easier (I was using a Magic Keyboard at the time). So I backed this project as well. I ordered the K3 with the RGB backlight and white optical hot-swappable switches.

Since this keyboard has been out for a few years and has been essentially replaced in the product lineup by the K3 v2, the K3 Pro, and the K3 Max, I'm not going to thoroughly review it. I'll consider this more of a "post-mortem".

Firstly, this was my first real try at a mechanical keyboard. I'm not counting the K8 because I sold it so quickly and didn't really give it a chance. This K1 was my daily driver for nearly three years – so it's safe to say this is what sold me on mechanical keyboards.

First Impressions

This keyboard is light. The body is aluminum framed with a plastic body. I wouldn't say it feels overly solid, but it's nice and portable – you can easily tuck it into your backpack or bag for moving to/from the office.

Since this is the first version, it doesn't have adjustable feet – just taller rubber bumpers on the top edge. I prefer to use my keyboard with a bit of an incline, so this isn't ideal, but has been corrected with the K3 v2.

Swapping the switches and keycaps is as easy as one would expect. The MX-style stem on the switches and keycaps makes it easier to customize your K3 as well.

The battery is rated for 130 hours on Bluetooth or 68 hours with the backlight on, but I never really tested that capability as I use it almost exclusively plugged in.

Since this keyboard doesn't support QMK, I re-programmed some of the keys using Karabiner-Elements. It works quite well, but is dependent on that software being running on your computer. For example, I moved the delete key to a non-standard location, so if I tried to use the keyboard with a different computer, that key would not work as expected.

Switches

This was the biggest regret about buying the optical hot-swappable version. Since this was my first keeb, I didn't really know what I was getting into. Knowing that now, I probably should have bought the Gateron fully mechanical switch version – there's simply very few optical switch options out there.

1. Optical White Switches - a very light force linear switch.
2. Optical Brown Switches - my first tactile switch. I found them mushy and too noisy for the office.
3. Optical Black Switches - another linear switch, but requiring a bit more force. I used these for a long time.
4. Optical Mint Switches - an early bump tactile switch that requires a bit more operating force. My personal favourite – a good balance between feeling and noise level. This is what I currently have installed.

^^^ Changing the switches from the optical white to the optical black, as well as replacing the default ABS keycaps with double shot

Keycaps

The keycaps that came with the keyboard were PBT shine-through. They were terrible – the finish started rubbing off of a handful of the keys within a few months. Thankfully, Keychron released a low-profile double shot keycap set, so I ordered those on my next switch order.

Layout

I've always used a full-sized keyboard, and largely with a number pad, so I expected this to be a difficult shift. I didn't really have time to get used to the tenkeyless format of the K8, but this is basically a more compact version of that layout. The most challenging adaptation for me was the right shift key size – it's about 2/3 the size of a full sized shift. Once I got used to that, I've decided that 75% is the perfect format for me. I'd also like to try some even smaller formats in the future.

Overall

There's a number of folks who have done foam or tape mods to the K3. Unfortunately, I only discovered these a few months ago, but I did end up implementing a foam mod. Basically, I just opened the case and put one of the foam pieces that shipped in the box inside the case. It made a fairly reasonable difference in the pitch of the keyboard sounds.

If you're thinking about getting a mechanical keyboard for the first time, I would definitely recommend trying the Keychron K3. It's a solid entry-level mechanical keyboard that is perfect for transitioning into (somewhat daunting) world of mechanical keyboards. With the exception of the adjustable feet, the K3 V2 seems like it's pretty much the same experience. For QMK programming ability as well as compatibility with the wider range of low-profile Gateron hot-swappable switches, I'd recommend giving the K3 Pro a try. The K3 Max also has acoustic foam which addresses some of the mods, as well as 2.4GHz connectivity for faster polling rates and reduced interference.

I've since replaced it with the NuPhy Air75 V2.

This article is going to be a multi-part series. I'm going to be building a personal blog using Next.js 13, Tailwind CSS, next-mdx-remote, Planetscale, and Prisma. I'm going to be writing about the process of building the site, as well as the tools I'm using.

1. Getting Started with Next.js 13
2. Building the Blog (this post)
3. Creating a Personal Feed with Planetscale and Prisma
4. Adding Authentication with Next-Auth.js

In my next post, I'll walk through the method I used to setup the blog and pages routes. I'll also show you how I use next-mdx-remote to render the blog posts and pages, combined with the power of dynamic catch-all route segments.

To keep up to date with my latest posts, you can follow me on Twitter or Mastodon, or subscribe to my RSS feed.

At Leisure Travel Vans, we've been using a custom build system to compile our SCSS and JS files for our Wordpress themes, as well as custom plugins we've developed. We've been using this system for a few years now, and it's worked well for us. However, with modern browser support aligning well with our user demographic, I wanted to move to a more modern build system, ideally with less dependencies and a faster build time. I also wanted to be able to use modern JS features like ES6 modules, and I wanted to be able to use SCSS.

I'm going to walk through the steps I took to get this working, and I'll also share some of the challenges I ran into along the way.

Why Vite?

1. Vite is fast. It's a lot faster than our previous build system, which was based on Webpack.
2. Vite is easy to use.

Getting Started

The sale of Twitter had folks thinking about "owning their own platform" and I was no different. In late 2022, I decided to re-vitalize my website by building my own personal feed. Next.js 13 had just launched with the new appDir beta, and I thought it would be a a great opportunity to test out some new tools.

Getting Started with Next.js 13

This article is going to be a multi-part series. I'm going to be building a personal blog using Next.js 13, Tailwind CSS, next-mdx-remote, Planetscale, and Prisma. I'm going to be writing about the process of building the site, as well as the tools I'm using.

1. Getting Started with Next.js 13 (this post)
2. Building the Blog
3. Creating a Personal Feed with Planetscale and Prisma
4. Adding Authentication with Next-Auth.js

The Stack

• Next.js 13 (using appDir beta)
• Tailwind CSS
• Planetscale
• Prisma
• Next-Auth.js
• Vercel

The Process

Setup Next.js 13

My personal website was already built using Next.js, so the first step was to upgrade to Next.js 13. I followed the upgrade guide and everything went smoothly. They allow you to move to the new appDir beta incrementally by adding a next.config.js file to the root of your project.

module.exports = {
  experimental: {
    appDir: true,
  },
}

With that configured, I could start to move my pages directory into the app directory. I would also start converting my components to React Server Components.

I was previously using the @next/mdx package for MDX support, but I wanted some additional flexibility to be able to work with MDX in a more dynamic way. I also wanted to be able to use traditional Markdown style front-matter. I decided to use next-mdx-remote instead. As a result, I removed the withMDX config from my next.config.js file.

Since I was already using Tailwind CSS on the site, the only change I had to make to tailwind.config.js was to add the app directory to the content array.

module.exports = {
  content: [
    './app/**/*.{js,jsx,ts,tsx}', // added this line
    './pages/**/*.{js,jsx,ts,tsx}',
  ],
},

Converting Pages to React Server Components

Setting Up The New app Directory

In previous versions of Next.js, you created a file in the pages directory and exported a React component. With Next.js 13, you can now create a file in the app directory and export a React Server Component.

With this new approach, routes are defined using folders rather than files, and you can continue to use the pages directory for other things like API routes.

You can also create "route groups" using folder names with (parentheses). This is a great wya to organize your files in a meaninful way, without affecting the routing.

Here's how my pages directory looked before:

/pages
├── _app.tsx
├── index.tsx
├── uses.mdx
├── posts
│   ├── post-name.mdx
│   └── another-post.mdx

And here's how it looks now:

/app
├── head.tsx
├── layout.tsx
├── page.tsx
├── blog
│   ├── [...slug]
│   │   ├── head.tsx
│   │   └── page.tsx
│   ├── head.tsx
│   └── page.tsx
├── (pages)
│   ├── [...slug]
│   │   ├── head.tsx
│   │   └── page.tsx
│   └── denied
│       └── page.tsx

Note the layout.tsx, and page.tsx files at the top of the directory. These are the bare minimum files you need to create a React Server Component route. I've also used the head.tsx special file to define the <Head> component for each route.

If there is no layout.tsx file in a folder, it will bubble up to the root layout in the app directory. If there is no page.tsx file in a folder, it will bubble up to the root page in the app directory.

Also note the (pages) directory. Since this one is wrapped in parentheses, it will not be used for routing. It's just a way to organize your files.

I used dynamic catch-all segments with a [...slug] for the blog sub-routes as well as the pages sub-routes. This allows me to create a single page.tsx file for each route, and then use the slug parameter to determine which page to render.

Converting Pages to React Server Components

Now that the new directory structure has been configured, it's time to start converting the pages to React Server Components.

I started with the root layout file, since this is going to define the overall base layout for the site. For brevity, I'm not going to post the entire contents of these files, but you can find the full source code on GitHub.

import '@styles/styles.css'
import Link from 'next/link'

const getYear = () => {
  const now = new Date()
  return now.getFullYear()
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <body class='mx-auto my-0 p-4 max-w-5xl font-sans text-black bg-white'>
        <header class='mb-8 pb-4 border-b'>
          <h1>
            <Link href='/' class='text-black no-underline'>
              Josiah Wiebe
            </Link>
          </h1>
        </header>
        <main>{children}</main>
        <footer class='mt-12 pt-8 w-full'>
          <p>&copy; 2011—{getYear()} Josiah Wiebe. All rights reserved.</p>
        </footer>
      </body>
    </html>
  )
}

Note the {children} prop. This is where the content for each page will be rendered.

Next, I created the page.tsx file for the root route. This will be our index page. Just like the convention for the previous pages directory, this file should simply export a React component.

export default async function IndexPage() {
  return (
    <section class='page-content grid items-center'>
      <div class='flex flex-col gap-4'>
        <h1 class='text-2xl font-bold'>Hello, world!</h1>
        <p class='text-lg text-gray-500'>Welcome to my brand new website, built with Next.js 13.</p>
      </div>
    </section>
  )
}

The head.tsx file is a special file that will be used to define the <Head> component for the route. This is where you can define the title, meta tags, and other things that will be rendered in the <head> element of the page.

I created a custom PageHead component that will be used to define the <Head> component for each page. This component will accept a title prop, and will automatically append the site name to the end of the title.

interface PageHeadProps {
  params: {
    title: string,
  };
}

export default function PageHead({ params = { title: '' } }: PageHeadProps) {
  const title = `${params.title} - Josiah Wiebe`

  return (
    <>
      <meta charSet='utf-8' />
      <title>{title}</title>
      <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
      <meta name='viewport' content='width=device-width, initial-scale=1' />
    </>
  )
}

Now we can load that component in the head.tsx file for the root route.

import PageHead from '@components/page-head'

export default function Head() {
  return <PageHead params={{ title: 'Josiah Wiebe', overrideTitle: true }} />
}

Since we'll want each page to have a unique title, we'll have to create a head.tsx special file in each route directory. We can re-use the PageHead component, but we'll need to pass in the title for each page. This is probably my least favourite convention with the new appDir directory structure, but creating a reusable component makes it easier.

That's all for the base layout and index page. At this point, we should have a functioning site.

In my next post, I'll walk through the method I used to setup the blog and pages routes. I'll also show you how I use next-mdx-remote to render the blog posts and pages, combined with the power of dynamic catch-all route segments.

To keep up to date with my latest posts, you can follow me on Twitter or Mastodon, or subscribe to my RSS feed.

Since I have to make up for publishing exactly zero blog posts in 2022, this is a pretty long post. TL;DR: 2022 was a great year, and I'm looking forward to 2023.

In 2022, I began to settle into my new role at Leisure Travel Vans as the Marketing Manager. Travel, both for business and personally, started trickling back. Our oldest started kindergarten and our youngest turned two. We had a lot of quality family time, and lamented the departure of some of our closest friends.

First Quarter

Winter felt a little bit more challenging than past years, but we made the most of it and got outside almost daily, regardless of the weather. We typically like to break up our winter with a Hawaiian vacation (this was an ongoing tradition pre-pandemic), but we didn't quite feel ready for travel at that time – Olsen was still 1yo and travel was still in a bit of a state of disarray.

We spent a lot of time trekking through my parents woods, just exploring and enjoying the natural beauty of winter. There's always a few deer or foxes to be seen, and plenty of sunshine (even though it is a bit cold).

Skating on our frozen rivers and creeks is a truly Canadian pastime, and we take advantage to the fullest. Lainey loves to skate, and Olsen was content to just enjoy the ride in the stroller.

Second Quarter

As the spring came, along with it came a lot of hope for the year. The snow starts to melt, and with the flowing water washes away all of the challenges of winter. I was able to take my first work trip in a couple of years, where I visited one of our Travelers Clubs in the Outer Banks, North Carolina.

I had the opportunity to plan a new office for myself in our marketing space, as we planned to grow the team in within the year. I was able to get my hands dirty with some of the design and ideation, and I'm quite pleased with the end result.

I also (reluctantly) became a truck owner, taking delivery of the model I had ordered the previous December. We were planning on taking a long road trip in the summer and needed something more substantial than our XC90 to pull the camper.

Spring felt like it settled in nicely, and we took full advantage of the outdoors whenever we could. Olsen was still waking up very early, so I started taking advantage of that time and took him golfing with a friend and their son.

We took a family trip down to Minneapolis for the May long weekend – our first family trip for the year. It was a great little getaway, and the hotel pool was a hit with the kids. Minneapolis is a fantastic city, I'd liken it to a Portland of the Midwest.

Third Quarter

Settling into the full swing of summer. The kids (meaning me) got Katie a paddleboard for Mother's Day, so we spent a lot of time out on the water with it. I continued my 6am golf dates with Olsen.

We planned and booked a camping trip out to Vancouver for the end of summer, so I began eagerly working on some upgrades to our camper. We have a 2021 Winnebago Micro Minnie 2100BH. Most of the sites we booked were unserviced, so I wanted to do some power upgrades to ensure we had enough capacity to handle our off-grid sites. You can read more about those upgrades in the logbook entry.

I spent some time on my bicycle throughout the summer, but not as much as previous years. I tried to balance that deficit out with some running. Even still, I made the most of my time in the saddle and got a few solid rides in.

Top purchase for 2022 was probably our Arctic Spas Summit hot tub. It really helps makes our backyard into even more of an oasis. We enjoy a soak in it every evening, bring the Kindles and read a few chapters when the kids are in bed.

Summer is also when things get into full swing at Leisure Travel Vans, as we have to take advantage of the limited good weather that we get in southern Manitoba. Our video team headed out on our annual product video shoots, which tend to take us all around Manitoba.

We also launched two all-new products this year, and we made a plan to head to Kelowna to shoot the launch videos.

In August, we headed out on a three-week family camping trip, intending to end up in Squamish, BC. Our plans changed a little bit due to the extreme heat of the Okanagan Valley combined with a lack of serviced campgrounds, but I think the trip was better for it. We ended up spending a bit less time in Kelowna, and then made our way directly to Vancouver Island, to reconnect with the friends that had just moved away. I'll detail the trip in a logbook entry soon.

Highlight of the trip was probably the Triple Ferry Ride, starting in Victoria, BC. It's a 120 kilometre bike ride that takes you on three different ferries, from Vancouver Island to Salt Spring Island, and then back to Vancouver Island. A full day affair and an absolute blast — wine tasting, coffee stops and all.

If you made it this far, thanks for reading. I hope you enjoyed the review, and I hope you have a great 2023. I'm looking forward to breathing new life into my personal site, and I hope you'll join me.

You can also follow me on Twitter/Mastodon and Instagram.

2022: In Statistics

Travel:

• 26,014 kilometres flown on 22 flights
• 6,500+ kilometres driven with the camper, across three provinces
• Stayed at 13 different campsites
• Commuted over 300 kilometres via e-scooter (I have the Apollo Phantom v2)

Activity:

• Cycled 1,201 kilometres
• Ran 91 kilometres
• Walked 2,708,130 steps (about 2,400 kilometres)

Media:

• Read 24 books
• Listened to as little podcasts as possible
• Wrote 0 blog posts (but that changes now)
• Listened to 7,481 songs

We wanted to do something special to launch this new twin floorplan, so we came up with a plan to create some video content and host a live launch at the Hershey RV Show in Hershey, PA.

In summer, we shipped the coaches to Fraserway RV, one of our selling dealers. Our team flew to the Okanagan to film a product walkthrough video on each model, as well as capture some scenic aerial and car-to-car driving shots.

We like to keep our gear loadout lean and portable, and we've fine-tuned our setup pretty well over the years.

For our walkthroughs, we have two each of the following:

• Canon R5
• Canon EF 14mm f/2.8L II - the widest rectilinear lens in the Canon lineup
• Canon RF 50mm f/1.2L USM - for the tight angle
• DJI Ronin-S2

For this shoot, we recorded audio onto two independent on-talent recorders. Our audio setup has changed since this shoot – we're now using:

• Rode Wireless Go
• Zoom F2-BT Field Recorder - for on-talent recording
• Zoom F3 Field Recorder - connected to the Rode system for remote recording with live monitoring

For aerial and car-to-car, we use the following:

• DJI Mavic 2 Pro
• Tilta Hydra Alien Car Mount

The beauty of this setup is that it all fits into two Pelican cases, making it super easy to transport, and we can get it all set up in under 20 minutes.

14 May 2021

Took delivery.

17 May 2022

Received our Westinghouse iGen4500 Inverter Generator. This is a 4500W inverter generator that runs on gasoline. It's a bit larger than I would have liked, but it's the only one that can run the air conditioner. I have yet to discover that later upgrades will allow me to run the A/C off of a smaller generator.

** Test fitting the generator in the rear storage compartment **

26 May 2021

Installed this rear camera on the back of the trailer. Easily tied into the running lights of the trailer for power.

27 May 2021

Our first trip with the camper. We took it to Falcon Lake, Manitoba for a long weekend.

3 Feb 2022 - Memory Foam Mattress

Replaced the mattress with this one.

17 April 2022 - Lithium Battery

Purchased a Renogy 200aH Smart Lithium battery, with no real plan for how to implement it yet.

10 May 2022 - 2000W Inverter

Acquired a Xantrex Freedom XC 2000W Pure Sine Wave Inverter. Still planning on the right battery configuration as well as how to wire it up.

15 June 2022 - Inverter & Battery Install

Dry mounted the inverter and battery in the rear storage compartment. With the help of my very knowledgeable coworker Brian, we sketched out a few scenarios and landed on this one.

One of the challenges we had to overcome was the assumption by Winnebago that the battery would be mounted on the trailer tongue (standard on most travel trailers). We wanted to limit the interruption of the existing wiring as much as possible.

Looking at the Winnie Owners forums, it seems that many folks decided to install their equipment in the pass through storage under the primary bed at the front. So we had two options:

1. Pass-through storage

• Pro: closer to 12V distribution on tongue
• Pro: shorter DC cable runs (less voltage drop)
• Con: fan noise from inverter directly below primary bed
• Con: takes up our most valuable storage area
• Con: un-conditioned space

2. Rear storage

• Pro: closer to 120V shore power input
• Pro: inverter fan far from primary bed
• Pro: conditioned space - can use in sub-zero temperatures
• Con: long 12V DC cable run

In the end, we settled on the rear storage area. Using 2 AWG cable over a 13 metre cable run only results in a 1% voltage drop at 10 amps, well within acceptable range. We ended up using 4 AWG as there was no 2 AWG available, but even that resulted in only 1.65% voltage drop.

The Freedom XC has a pass-through mode, which will simply allow it to operate as a (relatively) neutral part of the circuit when plugged into shore power once the battery is fully charged. To accomplish this, we split the shore power wire where it entered the trailer and installed a junction box. From this box, we connected the shore power wire to the inverter IN, then ran a cable from the inverter OUT which connected inside the junction box to the wire we originally split (which continues on to our distribution and breaker panel).

Here's what the final installation looks like. There's enough space to easily accommodate an additional 200aH battery beside this one, which could prove useful in the future.

13 July 2022- MicroAir Easy Start

Due to the nature of the way I installed the inverter, it allowed the entire trailer to run off of inverter power. That meant that every component that normally relied on 120V shore power would be able to run off of battery power, via the inverter.

One component I was really hoping to test was the air conditioner. Our summer had already been extremely hot, and we knew we would need the A/C as we headed west to the Okanagan. Theoretically, I should be able to run this air conditioner via the inverter (it's a GE 13k BTU ARC13AACBL), but I wanted to test it.

I acquired a MicroAir Easy Start (soft start capacitor) and set about installing it. Specifically, the ASY-364-X36-BLUE model.

After a few tests, I was able to successfully run the air conditioner off of battery power! It ran at about 5.5A, so that only gave me about 2 hours of run time, but that didn't matter. I simply wanted to be able to do it, and have the option available to me in a pinch.

:::image-half

10 August 2022 - IRVWPC

After seeing numerous installations of them at the LTV Quebec Rally in June, I was inspired to install my own IRVWPC. This allows my water pump to run virtually silently, without the usual knocking and banging you get from an RV pump.

Made in Canada, this control board sits between the 12V DC power supply and your water pump, and slowly ramps the supplied voltage up and down as a means to control the speed of the pump.

The Big Island of Hawaii has always been a very special place for us. We first visited in 2012 and returned every single year after that, up until the COVID-19 pandemic.

This document is intended to be living document, documenting our favourite places and things to do on the Big Island – designed with the intention of being shared with friends and family.

Contents

• Background
• Regions
• Activities
• Hikes & Activities
• Beaches
• Snorkelling & Paddleboarding
• Happy Hour
• Restaurants & Groceries

Background

• The primary airport (KOA) is located on the Kohala Coast, about 15 kilometres (30 minutes) north of Kona. A few options:
  • Rent a car - this is pretty much required on the Big Island
  • Taxi
  • Hitchhiking (mixed results, but can be fun)
• Trespassing & private property. The Big Island is a very special place, but keep in mind that you are a visitor on native Hawaiian land. Respect the land and the people.
• Kona coffee isn't all that good 😅 People think that it is, but they are wrong. Still fun to go on a free coffee tour though.
• The Big Island has eight of our planet's 13 different climate zones. Be prepared for all of them.

Regions

It's simplest to divide the Big Island up into a few distinct regions:

• Kona
  • the most popular region, known for its beaches, coffee, and the town of Kona.
  • the Kailua-Kona town area extends a fair ways down the western coast, and includes Kailua-Kona proper, Kealakekua Bay, Captain Cook, etc
• Kohala
  • the northernmost region, known for its beaches, golf courses, and the town of Waimea.
  • includes the Waikoloa Beach resort area (not to be confused with Waikoloa Village), the Mauna Lani Resort, and the Hapuna Beach State Recreation Area.
  • home to some of the best beaches and sunny weather on the island.
  • the town of Waimea is also in northeast Kohala - Hawaii's "cowboy" town.
• Hamakua
  • the easternmost region, known for its waterfalls, rainforests, and awe-inspiring views.
  • rolling green hills as well as the summit of Mauna Kea, the tallest mountain in the world.
  • massive Jurassic Park-like cliffs and waterfalls on the north side, including Waipio Valley.
• Hilo
  • the second most popular region, known for its rainforests, waterfalls, and the town of Hilo.
  • the town of Hilo is the second largest city on the island.
  • this is the wettest, or "windward" side of the island, with the most rainfall.
  • waterfalls (including Akaka Falls) and lush rainforests.
• Puna
  • the eastern side of the island, between Hilo and the active lava flows in the National Park.
  • the Puna side of the island is quite rural, with a lot of farmland and the town of Pahoa.
  • a number of black sand beach, including (clothing optional) Kehena Beach.
• Ka'u
  • the southernmost region, probably the least popular region.
  • the Ka'u side of the island is the most remote, with a lot of farmland and the town of Ka'u.
  • home to South Point, the southernmost point in the United States.
  • also home to Papakolea Beach, one of four green sand beaches in the world.

Activities

Hikes & Activities

Big Island Hiking is a decent resource for hiking on the Big Island.

Volcanoes National Park

• has a number of interesting day hikes, lava fields and lava tubes included
• spend the day here just exploring if you need a break from the beach

Waimea Reservoir hike

• One of our favourite hikes is in the Waimea area called the Waimea Reservoir hike. It starts here
• You'll have to climb over a gate at the beginning with some warning signs
• There are these irrigation tunnels and chutes that you can walk through, as well as slide down
• GPS route - 8km out and back, 105m elevation gain

Pololu Valley

• lush valley
• sometimes you can see whales from the shore here
• you can keep going on and on – there's no real "destination"
• GPS route - 5km+ out and back, 275m elevation gain

Waipi'o Valley

• this is an amazing valley, but you shouldn't really drive down – it's too steep for most cars.
• the view even from the top is impressive
• you can try hitching a ride down from some locals or walking down the road. You'll feel like a champ if you walk back up.
• there used to be a hike to Hi’ilawe Falls at the back of the valley, but it crossed through private property and is no longer accessible. Do not attempt it.

Kiholo Bay

• pretty much guaranteed to see turtles here
• two options
  1. Park by the highway and hike down on gravel
  2. Park near the sea and hike along soft sand
• we generally choose to hike down from the highway, parking right here
• GPS route - 4km one way, nominal elevation gain

Mauna Kea Summit

• it's a long drive, but the views are absolutely incredible. 4WD is recommended, and your car might struggle with the altitude.
• go at sunset for the best views.

Black Sand Beach

Black sand beaches are common on the Big Island, due to the volcanic activity. They are great to visit, but be sure to wear sandals or water shoes as the sand gets extra hot.

49 Black Sand Beach

• this is a small black sand beach, but very accessible in the Kohala coast
• it's public, but requires access via private property
• get a pass from the guard shack at the gate, then proceed to the beach (see map)

Punalu'u Beach

• located in Ka'u, this beach has a very "old Hawaii" vibe to me
• a bit out of the way, but if you're in the area, it's worth a visit
• not the best for swimming
• Kehena Beach
  • this beach is in Puna, and clothing optional
  • it's a fairly steep walk down to the beach

Snorkelling & Paddleboarding

Snorkelling

The lava rock really attracts sea urchins, so be careful. It's best to wear some sort of water shoes when walking around lava rocks, otherwise you have a pretty good chance of getting pierced (lava is also very sharp!).

Two Step (Pae'a)

• one of our favourite spots
• we're often able to swim with dolphins here (best chance is earlier in the morning) - don't touch them!
• quite popular so arrive early
• you can park on the road and walk down

Kealakekua Bay (Captain Cook)

• this is a popular destination for boat tours, but you can also hike down - it's not too difficult of a hike
• park on Napoopoo Road, near the trailhead (you'll probably see other cars parked)
• go early in the morning to beat the heat
• bring lots of water and food – there's no real shade or services

Other snorkelling

• If you want to do any snorkelling or scuba diving, I'd recommend Jack's Diving Locker - they are a great local company.
  • night snorkelling with Manta rays is a truly unforgettable experience

Kahaluu Beach Park

• you can take the Kona Trolley here if you're staying in town
• good spot to see turtles as well

Paddleboarding

We last rented from Ali'i Adventures in Kona. It's simple to rent for a week and just strap it to the roof of your car.

Our top spot for paddleboarding is actually just the Kona Bay. It's relatively calm, and you're pretty much guaranteed to see dolphins at some point. You can also bring your paddleboard to any of the beaches that are easy to access by car.

Happy Hour

• Don's Mai Tai
  • claims to have invented the Mai Tai
  • happy hour from 4–6 p.m.
• Kona Brewing Company
  • no happy hour, but they have a good selection of beers
  • daily tours at 10:30 a.m. and 3 p.m.
• Tropics Ale House
  • located in Waikoloa Beach
  • happy hour from 2–5 p.m.
  • excellent mai tais

Restaurants & Groceries

The Big Island of Hawaii is not a foodie destination, but here's a few spots we've enjoyed.

Groceries

• Costco
  • best place to pick up groceries for your stay
  • also a great opportunity to stock up on booze – cheapest place on the island
• downtown Kona hosts a small open-air market from Tuesday–Sunday, 7am–4pm
  • there's a lot of trinkety crap but you can usually find some decent produce for reasonable prices
• Target on the northwest side of Kona is a good bet
• Safeway is also an option

Restaurants

• Fosters Kitchen
  • nicer place to eat
  • location in downtown Kona and Waikoloa Beach
• Umeke's Poke
  • this is raw fish and it's SO GOOD
  • make sure to get a Ho'io salad on the side
• Hayashi's (You Make The Roll)
  • massive rolls for a bargain
  • not amazing but good value
• Kamana Kitchen
  • great Indian food option
• Tex Drive In
  • famously known for malasadas - a type of Hawaiian/Portuguese "doughnut"
  • they do run out, so you might be disappointed
  • I've been known to make the late night trek for these
• Basik Cafe
  • the best damn acai bowls
• Island Lava Java
  • great eggs benedict
• Ken's House of Pancakes
  • if you make the trek to Hilo, you'll want to stop here

I’ve been reminsicing about my trip to Iceland for the past week, so I thought I’d share some of the photos I took there.

They were all taken with a Nikon FM using Fujifilm Xperia 400 film.

Check them out on Exposure.

If you've been following The Newsprint, you'll have noticed how much Josh likes to tinker with his site. In the short span of a year, he's gone from Squarespace to Ghost; updated the typography countless times, and tested numerous new layouts. I can still recall when cloud.typography was released, and him drooling over the excellent Hoefler & Co typefaces — Ideal Sans in particular. Regardless of the piece of advice that I was giving, there was always one little thing that came up that was limited by the system that Josh was currently using. As a result, Josh often voiced his desire for me to build him a custom site, eventually.

As the first year anniversary of the site was coming up, Josh thought it would be good timing to rebuild the site. He sent me a text telling me that he was looking into it and wasn't sure if I'd be able to do it for him, based on timeline. Immediately after receiving that text, I decided to do a quick mockup in Sketch, pretty much just for the fun of it. He had talked often of the style of site that he enjoyed, so I based the mockup off of those discussions.

I sent it over to him, and he immediately thought that it was almost exactly how he had imagined it in his mind. It's pretty awesome when your design can align so well with client expectations so quickly. I spent a bit of time tweaking things; refining the main brand colour, tweaking the typography, and cleaning up the layout.

I decided that the mockup was close to what I was looking for, so I jumped into Sublime Text to start building. This is the first site that I've built with Jekyll, but I'm already very familiar with the Liquid syntax because at Collectif we've primarily been using the fantastic Siteleaf CMS.

The first thing that I had to do was get the content over from Josh's existing Ghost instance. I exported the Ghost data in JSON format from Ghost's debug menu. I used the excellent jekyll_ghost_importer gem to convert the posts from JSON to individual Markdown files. This process went very smoothly.

With all of the posts imported, I still needed to ensure they displayed properly. One of Josh's biggest complaints about previous CMS limitations was their support for proper link posts. I decided to start with this. I merely created a link layout, then added the necessary YAML headers to link posts:

---
layout: post
title: 'Example Title'
date: 2 December 2014
link: http://example.com/link
---

To show the permalink icon and make the title link, I added an if statement to the post waterfall. I also wanted to show the entire post's content if it was a link post, rather than the standard excerpt. I also used a simple Unicode circle for the permalink to ensure cross-compatibility.

<h2 class="post-title">
   <a href="
      {% if post.link %}
         {{ post.link }}
      {% else %}
         {{ post.url }}
     {% endif %}">{{ post.title }}</a>
   {% if post.link %}
      <span class="permalink">
         <a href="{{ post.url | prepend: site.url }}">&#9679;</a>
      </span>
   {% endif %}
</h2>
{% if post.link %}
  {{ post.content }}
{% else %}
   {{ post.excerpt | strip_html }}
{% endif %}

Link posts are now a reality!

Since I was going to roll a CDN for the media, I needed it all in the same folder structure to make things easier. Hosted Ghost instances are pretty limited in what you have access to, so I had Josh request a structured media archive from Ghost support. I decided that was taking too long, so I just used SiteSucker to download all of the media from the existing Ghost site. This also went rather smoothly.

For the CDN, I chose Amazon CloudFront and S3 for storage. Working with AWS is always a pleasure, and I had the CDN up and running smoothly within minutes.

At this point, the structure of the site and design was pretty much complete. The project was now at a critical stage: how would Josh create new posts. Generally, using Jekyll requires a bit of Terminal.app usage, combined with Git (if you're using GitHub Pages). This can be daunting for new users. Since I knew Josh uses the excellent Editorial app, both for iPad and for iPhone, I decided to build a few workflows for him.

The first workflow generates the necessary YAML header data for Jekyll to display the correct layout, title, and post date. This workflow is public, and you can download it here. Once the post is all written out, we needed to post it to the correct branch (gh-pages) of the GitHub Pages repository (thenewsprint/thenewsprint.co). I found part of a Python script somewhere and adapted and tweaked it to fit Josh's needs. You can see the script here.

That's it!

If you're curious, the entire site lives on this GitHub repository. Feel free to browse the code and let me know how I can improve it!

I’m sure most of my semi-regular readers have already abandoned me, but I thought I’d give a quick update here anyway.

My wife and I are currently living in Hawaii, volunteering at the YWAM base here. During this time, I won’t really be writing about much here. I’ll be continuing to work on Collectif projects during my time here. We do have some availability at the moment, so get in touch if you’re interested.

I’m keeping family and friends updated on our time here over at our family website, so feel free to follow along if you please.

Mahalo for now!

I’ve always loved the dot-grid for my sketches, but I think that the blank page will be good for me. I often have little sketches or diagrams that accompany my notes, and it will be interesting to try not having them inline with the actual notes.

My only gripes are the ruled pages and size choice. I find the ruling to be too large for my tiny scrawlings. I’ve always thought it odd that they didn’t choose the standard B7 for their notebooks (standard passport size); it seems that trying a new size would be a good opportunity to go to a standard.

In any case, I’ll be eagerly awaiting my Arts & Sciences pack (whilst trying to fill my existing Colors editions).

Firstly, I'd like to apologise for my lack of keeping up-to-date. It's not like I haven't been writing; Josh got me into Field Notes, but it's primarily been for Collectif or for trip planning.

I've chosen a web-presence! In the near future, I'll be saying good-bye to Svbtle as my primary blog and moving all of my online presence over to a site built using Siteleaf (the domain will still be jwie.be).

Jon and I have been using Siteleaf over at Collectif for quite some time now, and we love developing with it.

The site is coming along fairly well, I'm really focusing on the typography and simplicity of the site. Here's a screenshot of the style-guide for your viewing pleasure.

I hope to launch the new site in mid-May, but it will depend on whether my upcoming trip plans interfere with that or not.

If you'd like to keep up-to-date, you might find me over on Twitter as @josiahwiebe, where I may post the occasional update.

Thanks for stopping by!

I’ve been working for this business for quite a while.

It started in 2008; I was in high-school and was interested obsessed with the workings of computers. I started part time at Something Digital, where I worked a junior technician. My dad, Tim, had just left the business to go back to teaching, and I got to work with a number of amazing people (some of whom are still working at Co-op@Home). Things seemed to spiral up from there.

A number of positions and several years later, I’m finishing with a bang as their web & graphic designer. It’s been an amazing couple of years and it pains me to leave such an amazing team, but I’m eagerly anticipating some of the opportunities to come.

I’m excited to join the team at Pixels this coming Monday as the Creative Director.

A special thanks to everybody who helped make my time with Co-op an amazing time!

– Josiah

Over the years, I’ve had my personal web presence hosted on a myriad of platforms and services. Things have changed a lot since Geocities.

I’ve experimented with a few different publishing platforms, and hope to commit to a few services for my specific needs.

jwie.be is my primary personal & tech presence on the web. It’s currently hosted on Svbtle. I’ve been enjoying the format so far, but as a designer, I feel constricted by the lack of customisation options. I could just as easily use josiah.svbtle.com and point jwie.be to something else.

josiahwiebe.net currently points to my Tumblr, which has been around for quite some time. I’ve gone through many theme changes and upgrades. It seems to be more of a gathering place; I collect images, post random thoughts, links, etc. Not all of the content is original (and this seems to be the norm for the common Tumblr user). This could easily use josiahwiebe.tumblr.com and use josiahwiebe.net for something else.

My requirements:

1. Easy to use

• It’s not difficult for me to operate complex CMS setups. I just don’t want to. One of the things I’ve loved about Svbtle so far is the focus on pure writing. No fluff.

1. Markdown Editor

• Since I’ve started using Markdown, I don’t think I can go back. Beautifully simple syntax.

1. Customisation

• I like using third-party services on my websites. It needs to be simple to integrate things such as Cloud.typography and Bigfoot.js.

1. Portfolio

• None of my current web presences have my portfolio displayed; it’s currently scattered across Bēhance, Dribbble and Collectif.

1. Price

• This isn’t a key factor, but I don’t really want to spend too much. Svbtle and Tumblr are both currently hosting my sites for free. Hosting a static website on Siteleaf & AWS can be very cost effective.

I’ve narrowed my options down to four services; Svbtle, Tumblr, Siteleaf / Statamic (static file CMS) or Squarespace. Here’s a brief table of some of the pros & cons.

I’ve decided that there are two routes to take:

Unified Website

This would display both the blog, portfolio, contact info, etc all on one site. I could use any of my existing domains or purchase an additional one. We’re currently using Siteleaf for a number of sites at Collectif, and it’s proven to be amazing. The developers are wonderful and it’s just a joy to use.

Services: Siteleaf, Statamic or Squarespace

Separate Entities

Implement a static site for my portfolio, cheaply hosted on S3 and keep my blog on a hosted platform.

Services: Siteleaf or custom build + Svbtle or Tumblr

I’m currently leaning toward the Unified option, but my time is limited and I’m still finishing up my new family website, so it might have to wait. Another post detailing the development and deployment of that site is in the works, so stay tuned!

I feel like there’s a lot on the table here– so many good options to choose from. I haven’t made a decision yet, but I hope to soon. Let me know what your thoughts at hi [at] jwie.be or on Twitter @josiahwiebe.

Social features are both a negative and a positive. They can be nice, but also intrusive.

I was recently reading about meal logging with Day One & Launch Center Pro on The Newsprint. I’m not very disciplined at digital journaling, and Josh got me thinking. I began to devise a few of my own actions, generally based around menial events that had a daily significance.

Most of these actions are based around things that I’ve enjoyed throughout the day– a good glass of wine, a favourite beer, a perfect coffee or a great book. In fact, I compiled so many actions that I created a dedicated group in Launch Center Pro; Input. Here’s what it looks like right now:

It’s far easier for me to keep on top of documenting these very tangible things throughout my day. My Daily Summary action has a very important “Physical Notebook Reference” field at the end. This is because I still primarily write my thoughts down on physical paper, usually in Field Notes Brand notebooks or Moleskine Cahiers. This field allows me to easily make reference to which notebook I’ve written in that day (thanks to Josh for giving me this idea).

The list so far:

• Daily Summary - intended to give a brief summary of my day. I’ll refine it a bit more, perhaps to abandon the table format.
• Book Log - via The Newsprint
• Meal Log - via The Newsprint
• Cocktails Log
• Film Log - a movie entry action
• Wine Log
• Beer Log - via Jeff Mueller
• Coffee Log - adapted from Ben Tsai’s coffee log

Edit:

Upon Josh’s request, I’ve added a Sleep Log.

I had a rare Twitter username, @N. Yep, just one letter. I’ve been offered as much as $50,000 for it. People have tried to steal it. Password reset instructions are a regular sight in my email inbox. As of today, I no longer control @N. I was extorted into giving it up.

A slightly terrifying account of how Naoki Hiroshima’s Twitter account; @N, was stolen. It’s astounding how one weak link in your digital identity (PayPal in this case) can allow access to everything.

I took the time to turn on two-factor authentication for as many accounts as possible a while back. It does take some time, but I think it’s well worth it. I also moved everything over to iwantmyname months ago, and all of my MX records are (slightly) safer with a TTL of 604800. I still have yet to leave PayPal. Stripe covers a lot of ground for me, but PayPal seems to remain a necessary evil.

Naoki has received an astonishing amount of press for his account; other tales of similar situations arose following his story. I like to hope that Twitter would do something to rectify the situation, but I don’t have too much faith.

My earliest memories of “creating websites” began in the year 2004. I was an avid Redwall fan and had just started learning about the web. I believe I started with Geocities, where there was an avid Redwall community springing up. I decided to start a “fact” website. There was a great deal of fan-fiction sites springing up, as well as countless numbers of phpBB forums. What I thought the community really needed was a wiki type site that would allow fans to find information about any Redwall character. This was before the actual Redwall wiki was started, and it was fairly well received by the community. I continued to move from technology to technology, always trying something new. I learned HTML, CSS, PHP, basic JavaScript and so on. My first non-GeoCities site used frames (yikes!), and then I moved to CSS divs (that was amazing). I tried out WYSIWYG editors, including RapidWeaver, iWeb etc. I probably spent almost every waking moment on this project, called “Redfacts.” That’s fascinating, because I can hardly find a trace of it anywhere these days. Most of the sites I frequented every day have all long since been removed from their servers. I don’t think I even have any archived versions of my site.

It’s amazing how the web has changed since then. We’ve seen the death of frames, Flash, and so on. It’s been a grand adventure so far, and I cannot wait to see what will happen next.

I’ll always be grateful for Redwall for igniting the creativity in me and spurring me to create websites.

There’s been heaps of mockups that have surfaced following the release, notably this one by Leo Drapeau. iOS 7 is almost entirely devoid of shadows; these new mockups are still “flat” but retain depth and clarity through the use of shadows and other methods.

This method of flat design has been popular for quite some time; it’s a style many designers are familiar with and employ often. After the announcement of iOS 7, “re-design mockups” began to surface almost immediately.

How can freelance designers churn out a beautiful product in such a short span, while it takes Apple’s assumed crack team so much longer? How can Apple’s product look so much different than the theme persisting throughout the design community?

This is not a complaint, merely an observation. I’m excited to see how iOS develops further. Feel free to respond.