Weeknotes 2020/51 - NPM packages, GitLab CI, SwiftUI, architecturing

This week was broken into a number of small projects, mainly around Slipmat development. I also worked on various pieces of tooling that helps with this blog and various project dashboards.

I had a birthday on Thursday, I played my radio show in Friday, and I managed to take one whole day off, so this week was much less productive in general than last week.

Fetching Tweets to a Hugo blog with GitLab CI

I published not one but two NPM packages this week. Both of these were needed for this TIL blog of mine, but they also are the first steps for starting collecting my own data in JSON format for something like Simon Willisons dogsheep.

tweets-to-json is a simple package that does what it says on the tin. I tried to make it flexible but there’s plenty of room for improvements still. To be able to update the tweets to this blog via the GitLab CI, I also wrote push-to-repo which is a small node wrapper for GitLab API that updates a single file from CI to back the repo. Together I can use these to update and rebuild this blog with a scheduled CI script.

Automatically updating and displaying Tweets with a Hugo blog

Now that I have a CI script that periodically fetches my Tweets as a JSON file, I wanted to link them to these TIL-posts based on hashtags and username mentions. The latter is still a work in progress but I managed to update the blog templates to include latest related tweets to these posts. The relevant template code:

first, selet tweets whose tags intersect the post tags:

{{ $related_tweets := where $.Site.Data.tweets ".tags" "intersect" .Params.tags }}

then, if there were related tweets, show an aside:

  {{if gt (len $related_tweets) 0}}
  <aside class="md:w-5/12">
    <h2 class="my-4 text-lg font-semibold">
      Latest related tweets from <a href="https://twitter.com/uninen">@Uninen</a>
    </h2>

    {{ range first 5 $related_tweets -}}
    <div class="mb-4">
      {{$pubdate := time (int .timestamp)}}

      {{ .text | markdownify }}

      <a href="https://twitter.com/uninen/status/{{ .id }}"><time class="block font-mono text-sm leading-tight text-gray-400" datetime="{{ dateFormat "2006-01-02T15:04:05-07:00" ($pubdate) }}">
          {{ $pubdate.Format "Jan 2, 2006 15:04" }}
        </time></a>
    </div>
    {{ end }}
  </aside>
  {{end}}

I seem to use @-mentions more than hashtags in my tweets so I need to figure out a way to link Twitter usernames to tags and then filter with them as well.

Misc

Dove in to the new Apple SwitUI tutorial, and while I didn’t manage to complete it, I did manage to do some minor updates to the experimental Slipmat iOS Mobile app.
Continued last weeks UI design experiments and wrote two new page layouts for Slipmat Live Page for dektop and mobile. The current page is only months old but it’s complex enough to grow into a beast when trying to acommodate both mobile and desktop views with the same markup so I decided that it makes more sense to split the design and write two good templates instead of one almost good. The new layouts are just empty placeholders with pure TailwindCSS that demo the idea and they seem to work pretty well on all browsers. More tuning needed, tho.
After lots of pondering about the next small Slipmat project, I re-started Slipmat Polls app in order to maybe get an MVP in production next week. We’ll see.
Hunted down an old architecture drawing of the current Slipmat project and doodled a new one from the frontends where every big component sits in their own repo. Not sure if I want to keep everything in their own repo or combine them in a single monorepo but having smaller separate projects for different parts of the site seems absolutely the best way to go now that we have a common UI library on NPM.
Have lots of ideas for end of the year posts both from personal and Slipmatio POV. Hopefully I have the stamina to write at least one of those. I’ve been working non-stop for months now. I think I’m going to try to take a week or two off at some point, but not sure when exatly yet.