Notes

    How a backpack is made

    How a Backpack is Made : Every Step on the Production Line

    From start to end. They have so. many. parts!

    Web Components

    Slowly getting the hang of this Web Components thing. The idea is to replace the little Javascript I have with 3-2 web components, so I can render them in the front-end, and in my CMS, knowing everything looks the same.

    The Nopia

    Introducing Nopia

    Every single sound in this video is pure bliss

    Xkcd's development notes

    A nice behind-the-scenes look at how they made the "Gravity" and “Escape Speed” exploration comics.

    Beepberry

    Bought a Beepberry, impulse buying ftw! No idea what I'll do with it, but it just looks too cool to not have it.

    Thank you

    Someone emailed me to thank me for an article I wrote and it made my day.

    If you read an interesting article, email the author and let them know!

    This is especially true for personal blogs.

    How a Mahjong table works

    how automatic mahjong table works

    I've always wondered how these worked. The answer, of course, is magnets!

    Realtime Colors

    Such a neat way to pick a color palette: https://realtimecolors.com

    3d printed automatic screw packaging

    To get rid of plastic bags with screws, this maker has designed a way to insert the screws into the (3d-printed) final product.

    In order to do this he made a complete system that can sort screws and nuts, dispense them in the right amount, and place them into the (paused) 3d print, really cool to see

    Robotic placement - 3d printed automatic screw packaging #003

    (Starlink) Sattelite map

    I never realised there were already so many Starlink satellites in space: https://satellitemap.space/

    Modern CSS is awesome

    Michelle Barker – Modern CSS Layout is Awesome! – btconf Düsseldorf 2023

    Really nice talk showcasing new CSS features

    Hong Kong’s Kai Tak Airport

    A nice video about the former Kai Tak Airport, situated in the heart of Hong Kong. It would have been so cool to see in real-life.

    It's been 25 years since the closure, and in two weeks. I'll visit it's successor: Hong Kong International Airport for a week-long stay in Hong Kong.

    Was Hong Kong’s Kai Tak the world’s scariest airport?

    Finally a sunny day

    Publishing notes through Telegram

    There's a lot of friction in writing short-form content on a mobile device. I have to log in to my Pocketbase instance, create a note and trigger a redeploy of the site when I'm done.

    This meant I mostly didn't bother, or Telegram myself the link/content to do it later when I was behind my computer (and promptly forgot). Instead of writing content, I made a Telegram bot to make it easier for me to push content.

    No more logins, fighting the text editor on my mobile, or forgetting to trigger a new build. Just write the content and end with the publish command.

    Vincas Stonys - Un-Suck Your React Components

    A super helpful video about composable React components. Stop adding a million props, and use the context API to create super composable components.

    Longboarding season has started

    After months of rain and wind the first day with sunshine and a light breeze has finally come around.

    Sophie Koonin - This website is under construction

    Sophie Koonin gave a really nice talk about personal websites.

    Barry is back with Season 4 on HBO

    It includes one of the best side-characters ever; SoHo Hank

    Set FontAwesome NPM registry on GitHub Actions

    A little while ago, my GitHub actions were failing because of the following error: 

    error An unexpected error occurred: "https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/0.1.15/react-fontawesome-0.1.15.tgz: Request failed \"401 Unauthorized\"".
info If you think this is a bug, please open a bug report with the information provided in "/home/runner/work/appsignal-status/appsignal-status/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: Process completed with exit code 1.

    The reason is we use FontAwesome and our action didn't have access to the (private) FontAwesome repo.

    In order to fix this we need to make Yarn/NPM aware of this private repo and to do that we'll create a CI environment under the GitHub Repository settings.

    Under that CI environment we'll add a FONTAWESOME_NPM_AUTH_TOKEN "Environment secret" (Not variable, secret!) which we can use in the GitHub Actions runner.

    To actually expose this secret, we'll have to tell the GitHub Actions runner to use this CI environment, and we'll have to set the NPM config to use the private registry.

    For example; this is a linting job that uses the private repository. 

      linting:
    runs-on: ubuntu-latest
    environment: CI # << Set the CI environment
    steps:
    - uses: actions/checkout@v2
    - name: Install dependencies
      run: |
        npm config set "@fortawesome:registry" https://npm.fontawesome.com/
        npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}"
        yarn install
    - name: Run ESLint
      run: yarn lint

    GitHub will replace the value with *** on an actual run: 

    Run npm config set "@fortawesome:registry" https://npm.fontawesome.com/
  npm config set "@fortawesome:registry" https://npm.fontawesome.com/
  npm config set '//npm.fontawesome.com/:_authToken' "***"
  yarn install

    Add CMS content to bridgetownrb

    It took me a while to figure out where to place the code that loads data from an external CMS and makes it available in bridgetownrb.

    The idea is to place a builder in the builders folder. This builder is called each time the site is... built. 

    plugins/builders/posts_builder.rb

    This file should contain a class with a build method. Bridgetown exposes a get method that allows you to fetch any data without having to worry about using a specific HTTP client. It also parses the JSON for you, if present.

    In my case I'm getting data from a pocketbase instance and for each item, I'm adding a resource to bridgetown. 

    class Builders::PostsBuilder < SiteBuilder
  def build
    get('https://pocketbase/api/collections/blog_posts/records?sort=-date&perPage=1000&expand=files&filter=(public=true)') do |data|
      data[:items].each do |post|
        add_resource :posts, "#{post[:slug]}" do
          ___ post
          layout :post
          permalink '/blog/:slug.html'
        end
      end
    end
  end
end

    The first argument is the collection (in this case posts), and the second argument the "id" of the resource. You can alter the layout and permalink by using the DSL.

    You can now call this resource anywhere in your bridgetown code: 

    site.collections.posts.resources

    Add webfinger to bridgetown.rb

    Adding a webfinger to your own domain lets you keep one point of truth for your social media handle. You can tell people to just follow social@matsimitsu.com for example, and through this webfinger file Mastodon will know where to look for your actual profile.

    Bridgetown lets you create files with permalinks anywhere. In my case this file is in: 

    src/webfinger.erb

    The contents contain references to my ruby.social account, where my actual Mastodon profile lives, which I can change at any time and anyone using my social@matsimitsu.com reference will end up on the correct instance. 

    ---
sitemap: false
permalink: ".well-known/webfinger"
---

{
  "subject":"acct:matsimitsu@ruby.social",
  "aliases":
  [
      "https://ruby.social/@matsimitsu",
      "https://ruby.social/users/matsimitsu"
  ],
  "links":
  [
      {
          "rel":"http://webfinger.net/rel/profile-page",
          "type":"text/html",
          "href":"https://ruby.social/@matsimitsu"
      },
      {
          "rel":"self",
          "type":"application/activity+json",
          "href":"https://ruby.social/users/matsimitsu"
      },
      {
          "rel":"http://ostatus.org/schema/1.0/subscribe",
          "template":"https://ruby.social/authorize_interaction?uri={uri}"
      }
  ]
}

    The Fable: The Killer Who Doesn't Kill (Japanese)

    The Fable (Japanese title: ザ・ファブル 殺さない殺し屋) is apparently the second movie about a hitman. I still have to watch the first one 🤦.

    It’s about a legendary hitman named Akira who has to lay low and can’t commit any murders for a while. He works a menial job at a graphic design studio, and of course, things happen that make it really hard for him not to kill.

    It’s a fun action-comedy that starts off slow but gains speed halfway through and has a nice ending.

    Good for a boring night in COVID isolation, and it’s available on Netflix

    The Eight Hundred (Chinese)

    I recently flew from Amsterdam to Amman, Jordan, with Turkish Airlines, and one thing I always like to do is skip all the blockbuster films and look for the “world movies” category. You can find some great movies there that you weren’t going to see otherwise.

    This time it was The Eight Hundred; a film about the famous battle of the Sihang warehouse on November 1, 1937. This battle was during the Japanese occupation of China but before the second world war broke out.

    Japan

    Japan was still trying to play nice to the Americans and British, and part of Shanghai was known as “concessions,” a place that couldn’t be invaded or even shot at by Japan in fear of retribution from the US and Britain.

    Next to this “concession” was a warehouse occupied by the remaining 800 soldiers in Shanghai, trying to defend it to the last man to give the rest of the Chinese army time to prepare better defenses outside the city.

    The movie follows these soldiers (actually about 400, the number was inflated by the Chinese commander) in their defense. This story is based on actual events and follows them quite accurately, albeit with more dramatization.

    As far as war movies go, it’s a nice film, and the quality is pretty good with sound special effects. It’s a nice view if you’re stuck in an airplane for 4 hours.

    Still Human (Hong Kong)

    When I first came to Hong Kong , I was surprised by the scene of hundreds of people crowding the streets and overpasses on cardboard boxes. Only later I found out that this is a weekly occurrence on Sunday when the thousands of (mostly Filipino) maids living in Hong Kong have their day off, which they use to socialise with fellow maids.

    Still Human revolves around Leung Cheong-wing, a paralysed and hopeless man living in a social housing flat in Hong Kong and Evelyn Santos, a Filipino domestic worker who came to the city to make a living.

    It portrays the (often precarious) lives of Filipino workers in Hong Kong and how they are treated without becoming too heavy. The movie focuses on the brittle relation between Leung and Evelyn and is mostly shot inside the cramped apartment of Leung.

    I really enjoyed the movie, the acting is amazing and the pace is just right. It manages to balance heavy subjects and light-heartedness and for me it was one of those movies that makes you think about the subject for the next couple of days.