Notes

A collection of notes and photos made by myself, and links from the web.

  1. 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.

  2. The Nopia

    Every single sound in this video is pure bliss

  3. Xkcd's development notes

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

  4. 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.

  5. 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.

  6. How a Mahjong table works

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

  7. Realtime Colors

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

  8. 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

  9. (Starlink) Sattelite map

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

  10. 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.

  11. Finally a sunny day

  12. 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.

  13. 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.

  14. Longboarding season has started

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

  15. Sophie Koonin - This website is under construction

    Sophie Koonin gave a really nice talk about personal websites.

  16. Barry is back with Season 4 on HBO

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

  17. 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

  18. 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