wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: reorg pages

Browse source
This commit is contained in:
Devin Haska 2024-03-22 16:40:28 -07:00
parent 0e3ef370c7
commit 593f20560d
16 changed files with 8 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/pages/404.html Normal file
View file

@ -0,0 +1,14 @@
---
permalink: /404.html
title: 404 - Can't Find That Frog
youtube: true
---
<section class="[ flow ]">
<h1>404 🍞</h1>
<p>Couldn't find what you're looking for. But would you like some bread for your journey home? 🥖</p>
{% youtube "GQw-aEk05qY", "Call 1800 Tobë ( Bread Ad )" %}
<p>
<a href="{{ meta.url }}">👈 I have my bread and I'm ready to go home.</a>
</p>
</section>

49
src/pages/about.md Normal file
View file

@ -0,0 +1,49 @@
---
title: About
---
# About me
Hello! Ahoj! Welcome to my site!
My name is **Devin Haska** and this is my little slice of the internet I call home.
Here's a non-exhaustive list of topics you'll find here: web development, music, reading, video games, politics, and intersections of all of the above.
I really like frogs, like a lot. So I made myself a mascot. They don't have a name yet, but perhaps you can think of one?
{% image "https://cdn.wonderfulfrog.com/logo.svg", "A pixel art version of a frog. They are currently unnamed.", "What should we call them?" %}
## Professional
I'm currently working at [Metalab][metalab] as a Web Engineer, and I've been working here for 4 years.
I have a Bachelor of Science degree with a major in Computer Science from the [University of Victoria][uvic].
Technologies I have focused on in the last few years include:
- React
- React Native
- TypeScript
- NextJS
I have a passion for the intersection of development and design. A title I associate with would be **Creative Developer**. I'm happiest when I'm at the front of the front-end, getting into nitty-gritty details with an emphasis on motion. CSS is my homebase (and yes, it's a programming language).
I try my best to champion accessibility wherever I can. I incoporate accessibility testing tools into my workflow while carrying out my day-to-day work.
## Hobbies
I tend to hop from interest to interest, fully engrossing myself and then moving on after a few weeks. That said, I do have some mainstays that I have a regular interest in, such as:
- Playing video games
- Discovering new music
- Tinkering with small electronics
- Using web dev to make things (hey, you're looking at one such thing!)
- Journaling
- Painstakingly researching the piece of gear I'm thinking about getting
- Reading
- Home DIY (building furniture, home repair and upgrades, that sort of thing)
- Making pixel art
[metalab]: https://metalab.com
[uvic]: https://uvic.ca

22
src/pages/blogroll.html Normal file
View file

@ -0,0 +1,22 @@
---
title: Blogroll
---
<section class="[ flow ]">
<h1>Blogroll</h1>
<p>A collection of my favourite sites, in no particular order.</p>
<p>
If you're looking for more cool sites, visit <a href="https://blogroll.org"
target="_blank"
rel="external noreferrer noopener">blogroll.org</a>!
</p>
<ul>
{% for item in blogroll %}
<li>
<a href="{{ item.url }}"
target="_blank"
rel="external noreferrer noopener">{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</section>

24
src/pages/catalogue-type.html Normal file
View file

@ -0,0 +1,24 @@
---
pagination:
data: collections.catalogueByType
size: 1
alias: type
filter:
- catalogue
eleventyExcludeFromCollections: true
permalink: /catalogue/{{ type | pluralize | slugify }}/index.html
eleventyComputed:
title: Catalogue - {{ type | pluralize | capitalize }}
---
{% from "macros/catalogue.njk" import yearList %}
<h1>Catalogue: {{ type | pluralize | capitalize }}</h1>
{% include "partials/catalogue-types.html" %}
{% set itemsByYear = collections.catalogueByType[type] | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">
{% for year in years %}
{% set itemsInYear = itemsByYear[year] %}
{{ yearList(itemsInYear, year, false) }}
{% endfor %}
</section>

16
src/pages/catalogue.html Normal file
View file

@ -0,0 +1,16 @@
---
title: Catalogue
---
{% from "macros/catalogue.njk" import yearList %}
<h1>Catalogue</h1>
<p>A collection of my thoughts on various forms of media that I consume.</p>
{% include "partials/catalogue-types.html" %}
{% set itemsByYear = collections.catalogue | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">
{% for year in years %}
{% set itemsInYear = itemsByYear[year] %}
{{ yearList(itemsInYear, year) }}
{% endfor %}
</section>

91
src/pages/colophon.md Normal file
View file

@ -0,0 +1,91 @@
---
layout: "layouts/base"
title: Colophon
---
# Colophon
A little bit of everything regarding how this site was built and its origins.
## Technology
The site is powered by [11ty][11ty], using a mixture of [Nunjucks][nunjucks] and [Markdown][markdown] content.
A large part of this site was based on the principles established in the [eleventy-excellent][eleventyexcellent] starter.
Markdown is processed using [markdown-it][markdownit]. I am using a few plugins:
- [markdown-it-abbr][markdownitabbr] - Adds support for abbreviations.
- [markdown-it-anchor][markdownitanchor] - Automatically adds anchor ids to titles (h1, h2, etc).
- [markdown-it-footnote][markdownitfootnote] - Adds support for footnotes.
- [markdown-it-prism][markdownitprism] - Adds syntax highlighting to code blocks.
A minimal amount of [PostCSS][postcss] is used as a developer convenience, othwise pure CSS is used. Any utility classes I've created myself.
Responsive images are generated by [eleventy-img][eleventyimg].
Media is hosted on [bunny.net][bunnynet].
RSS is generated by [eleventy-plugin-rss][eleventypluginrss].
Date formatting uses [dayjs][dayjs].
Code formatting is applied by [Prism][prismjs] and uses a tweaked version of the [Tokyo Night][tokyonight] colour scheme.
## Design
Headings are using the [Anek Latin][aneklatin] font, and the body font is [iA Writer Quattro][iawriterquattro]. Monospace font is [IBM Plex Mono][ibmplexmono].
The colour palette is viewable on the [styleguide][styleguide] page.
Icons are from the [Chunk Icons][chunkicons] set by [Noah Jacobus][noahjacobus].
Lots of inspiration (and sometimes direct code) from [Every Layout][everylayout].
## Wonderful Frog?
I happen to really like frogs, like a lot. I used to have be part of a group called "Wonderful Failure", and happened to really like the adjective "wonderful" so I kept it. It coincidentally still abbreviates to "WF", so I'm keeping the spirit going! As we used to say: "ngu!" or "never give up!"
## Current URL
wonderfulfrog.com (2023 - Present)
## Previous URLs
My site has changed URLs over the years, and was previously found at the following URLs:
- devinlumley.com (2020 - 2023)
- devinlumley.me (2016 - 2020)
- devinwl.github.io (??? - 2016)
## Licensing
All text content inside of `src/posts` and `src/catalogue` is &copy; Devin Haska - you may not use it without permission.
Any code (excluding content, for example, code inside `.js`, `.css`, `.njk` files) is published under an [MIT][mit] license - you're free to use it how you see fit. If you feel like attributing me, that'd be swell.
I've done my best to show where I found any code I did not write myself.
[11ty]: https://11ty.dev
[markdown]: https://daringfireball.net/projects/markdown/syntax
[nunjucks]: https://mozilla.github.io/nunjucks/templating.html
[markdownit]: https://github.com/markdown-it/markdown-it
[markdownitabbr]: https://github.com/markdown-it/markdown-it-abbr
[markdownitanchor]: https://github.com/valeriangalliat/markdown-it-anchor
[markdownitfootnote]: https://github.com/markdown-it/markdown-it-footnote
[markdownitprism]: https://github.com/jGleitz/markdown-it-prism
[postcss]: https://postcss.org
[eleventyimg]: https://www.11ty.dev/docs/plugins/image
[bunnynet]: https://bunny.net
[eleventypluginrss]: https://www.11ty.dev/docs/plugins/rss
[dayjs]: https://day.js.org/en
[aneklatin]: https://fonts.google.com/specimen/Anek+Latin
[iawriterquattro]: https://github.com/iaolo/iA-Fonts
[styleguide]: /styleguide
[chunkicons]: https://www.figma.com/community/file/1327310800295849271
[noahjacobus]: https://noahjacob.us
[mit]: https://opensource.org/license/mit
[eleventyexcellent]: https://eleventy-excellent.netlify.app
[everylayout]: https://every-layout.dev
[prismjs]: https://prismjs.com
[tokyonight]: https://github.com/folke/tokyonight.nvim
[ibmplexmono]: https://fonts.google.com/specimen/IBM+Plex+Mono

28
src/pages/links.md Normal file
View file

@ -0,0 +1,28 @@
---
title: Links
---
# Find me online
Other places I have an online presence.
## Socials
- [Mastodon][mastodon]
- [Last.fm][lastfm]
- [GitHub][github]
- [Apple Music][applemusic]
- [LinkedIn][linkedin]
- [Backloggd][backloggd]
[mastodon]: {{ meta.social.mastodon }}
[lastfm]: {{ meta.social.lastfm }}
[github]: {{ meta.social.github }}
[applemusic]: https://music.apple.com/profile/wonderfulfrog
[linkedin]: https://www.linkedin.com/in/devin-haska-bb90a7253
[backloggd]: https://www.backloggd.com/u/wonderfulfrog

47
src/pages/now.html Normal file
View file

@ -0,0 +1,47 @@
---
title: /now
---
{% set recentTrack = lastfm.recentTracks[0] %}
<h1>/now</h1>
<p>What am I doing right now? Everything on here is automatically generated from various data sources.</p>
<p>
🎶 <a href="{{ recentTrack.url }}"
target="_blank"
rel="external noreferrer noopener">{{ recentTrack.artist }} - {{ recentTrack.track }}</a>
</p>
<h2>💿 Albums</h2>
<ul class="[ media-grid square ][ p-0 ]" role="list">
{% for album in lastfm.recentAlbums %}
<li>
<a href="{{ album.url }}"
target="_blank"
rel="external noreferrer noopener">
{% set textContent %}
{{ album.artist }} - {{ album.album }}
{% endset %}
<p class="[ visually-hidden ]">{{ textContent }}</p>
{% image album.imageUrl, "", "", "", textContent %}
</a>
</li>
{% endfor %}
</ul>
<h2>🍿 Movies</h2>
<ul class="[ media-grid poster ][ p-0 ]" role="list">
{% for movie in letterboxd %}
<li>
<a href="{{ movie.url }}"
target="_blank"
rel="external noreferrer noopener">
{% set textContent %}
{{ movie.title }}
{% endset %}
<p class="[ visually-hidden ]">{{ movie.title }}</p>
{% image movie.imgSrc, "", "", "" , textContent %}
</a>
</li>
{% endfor %}
</ul>
<p class="[ font-size-s mt-2 ]">
What is a `/now` page? Check out <a href="https://nownownow.com/about">nownownow.com</a>.
</p>

5
src/pages/pages.json Normal file
View file

@ -0,0 +1,5 @@
{
"layout": "layouts/base",
"permalink": "{{ page.fileSlug }}/index.html",
"tags": ["page"]
}

76
src/pages/styleguide.html Normal file
View file

@ -0,0 +1,76 @@
---
title: Styleguide
---
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<p>Paragraph text</p>
<p>
<strong>Bold text</strong>
</p>
<p>
<em>Emphasized text</em>
</p>
<p>
<strong>
<em>Bold and emphasized text</em>
</strong>
</p>
<p>
An abbreviation: <abbr title="Hypertext Markup Language">HTML</abbr>
</p>
<hr />
<div class="[ flex ]">
<div class="[ size-2 ]" style="background-color: var(--color-primary)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-secondary)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-background)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-surface)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-border)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-text)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-fadeText)"></div>
<div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
</div>
<hr />
<a href="#">A link</a>
<a href="/">A visited link</a>
<hr />
<blockquote>
<p>A blockquote</p>
<p>Here is some more text</p>
<p>And even more!</p>
</blockquote>
<hr />
<p>An unordered list</p>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<hr />
<p>An ordered list</p>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
<hr />
<aside>
<p>An aside block</p>
</aside>
<hr />
<figure>
<img src="/assets/images/logo.svg" alt="" />
<figcaption>A fig caption.</figcaption>
</figure>
<hr />
<p>
This text contains usage of a <mark>mark element, and here it is</mark>.
</p>
<div style="background-color: var(--color-surface);
border: 1px solid var(--color-border);
padding: 1rem">A card-type component.</div>
<hr />
<div style="box-shadow: 2px 2px 8px hsl(var(--shadow) / 0.34);
padding: 1rem">This box has a shadow</div>

23
src/pages/tag.html Normal file
View file

@ -0,0 +1,23 @@
---
pagination:
data: collections.postsByTag
size: 1
alias: tag
filter:
- post
permalink: /tags/{{ tag | slugify }}/index.html
---
{% from "macros/posts.njk" import yearList %}
<h1>Tag: {{ tag }}</h1>
<p>
All posts tagged with "{{ tag }}", or go back to <a href="/tags">all tags</a>.
</p>
{% set itemsByYear = collections.postsByTag[tag] | reverse | organizeByDate %}
{% set years = itemsByYear | keys | sort("desc") %}
<section class="[ flow ]">
{% for year in years %}
{% set itemsInYear = itemsByYear[year] %}
{{ yearList(itemsInYear, year) }}
{% endfor %}
</section>

15
src/pages/tags.html Normal file
View file

@ -0,0 +1,15 @@
---
title: All tags
---
{% set tags = collections.post | allTagCounts %}
<section class="[ flow ]">
<h1>{{ title }}</h1>
<ol class="[ cluster p-0 gap-0.5 ]" role="list">
{% for tag in tags %}
<li>
<a href="/tags/{{ tag.tag | slugify }}" class="[ pill ]">{{ tag.tag }} <span class="[ pill-count ]">{{ tag.count }}</span></a>
</li>
{% endfor %}
</ol>
</section>

181
src/pages/uses.md Normal file
View file

@ -0,0 +1,181 @@
---
title: /uses
---
# Uses
Last updated on **February 19th, 2024**.
A list of my favourite software, tools, gear, configurations, and everything else between.
More lists like this are available at [uses.tech][usestech].
There are no affiliate links.
## Development
My editor of choice is [Neovim][neovim], which uses a [very opinionated setup][neovimsetup].
My preferred terminal is [iTerm2][iterm2] on macOS, or [Windows Terminal][windowsterminal] on Windows.
Wherever possible I use the [Tokyo Night][tokyonight] colour scheme.
My favourite font is [Operator Mono][opmono]. I have modified it with [Nerd Font][nerdfont] glyphs to power up my terminal views.
I use a mixture of [Prettier][prettier] and [ESLint][eslint] when developing my own projects, and encourage teams to use it if they aren't already. It takes code style and formatting out of code review discussions and keeps everything consistent.
I use the latest version of macOS for my work, but am comfortable doing web development on Windows 11 too.
My favourite frameworks are [React][reactjs] for JavaScript and [Tailwind][tailwindcss] for CSS. Lately though I find myself gravitating to things that don't require as much tooling. Modern React confuses the hell out of me, and feels like a solution to a problem that no longer exists - JavaScript has come a _long_ way since 2013. For CSS I love utility classes, but get bogged down with the sheer number of them in Tailwind (class name soup is real, but not a reason to avoid Tailwind). I find myself looking toward solutions that work for years to come and introduce as few breaking changes as possible.
When it comes to mobile development my tool of choice is [React Native][reactnative]. Unlike its web counterpart, the React Native space continues to get better and better. I love using tools like [Reanimated][reanimated] to make fluid and beautiful animations. [Expo][expo] has changed the game and makes development a breeze. There is certainly some magic going on under-the-hood.
## Gear
My monitor is a [Dell U3423WE][u3423we] ultra-wide monitor. It has a built-in KVM switch that lets me swap between my work and gaming computer effortlessly. My only complaint is that the Ethernet port is flaky, so I can't use it.
My keyboard is a [Keychron Q4][keychronq4] with Gateron G Pro Red switches. Right now I have their white PBT keycaps with an OSA style.
My mouse is a [Keychron M3][keychronm3]. It love it because there is zero branding on the top part of the mouse, and it works very well. It's a cheap, no nonsense mouse.
My desk is the [Autonomous SmartDesk Pro][smartdesk] with a 53" bamboo top. It's a solid desk, but their customer support burned me pretty hard so I've sworn off the company.
My speakers of choice are a pair of [Sonos One SL][sonosonesl]s mounted to my walls. They're expensive, but work extremely well with AirPlay 2. And I can seamlessly add other Sonos speakers to my listening experience.
## Music
I've tried every streaming service out there that's available in Canada (RIP to [Rdio][rdio], you were the real one), and I've given up and settled with [Apple Music][applemusic]. At least it integrates decently well with the ecosystem.
I'm one of those weirdos that likes to buy music, so my favourite platform is [Bandcamp][bandcamp] ([for now][bandcamplayoffs], at least). If an artist isn't on Bandcamp, I'll try other online stores like [7digital][7digital].
Speaking of buying music, I need a way to keep it organized. Enter [beets][beets], which does an amazing job. It ships with a bunch of opinionated defaults that line up with my own opinions, which worked great for me. Can be tweaked and tinkered with to your heart's content.
I use [Plex][plex] as a media server. It does a fine job with serving music.
When it comes to playing music from the Plex server, I like [Prism][prismapp].
I use the [Sony WH-1000XM3][wh1000xm3] headphones. Unparallelled noise cancelling and long battery life. Just wish it could swap devices easier. I've had these for over 5 years and they keep going. One day I might upgrade to a recent model that handles device switching better, but these are great.
For wired headphones I have my [Sony MDR-7506][sonymdr7506]s. Just plain good sound. I wish they still made the MDRv6, though.
I use [Last.fm][lastfm] for tracking my music listening history. They've been around for a long time. I find their reports insightful and chock-full of interesting data. I love being able to go back several years and see what I was listening to.
[MusicBox][musicbox] is a wonderful app for keeping track of music to listen to later. It supports tagging and rating, and integrates well with iOS's Share Sheet. Supports Apple Music and Spotify. You can add songs, albums, and even playlists!
[Sleeve][sleeveapp] for showing what music is playing. Integrates with Last.fm for easy scrobbling, and syncs my loved tracks on Apple Music and Last.fm.
## Photography
My camera camera is [FUJIFILM X-E4][fujifilmxe4]. I find that any picture I take looks great right out of the camera, no tweaks required. There are a lot of fun film options to choose from.
When I don't have my X-E4, whatever phone I've got is my camera (something something the best camera is the one you have with you). It's currently an iPhone 13 mini, and my only tweak to the camera app is always starting with a -0.3 exposure. Try it out, it makes a noticable difference for me.
Photo management is all done through [Photos][photosapp] on macOS.
## Storage and Backups
All of our media is stored on our [Synology DS218j][ds218j], and served by [Plex][plex]. I have two 2TB drives in there configured using RAID 1 (mirrored).
Offsite backups are sent to [Backblaze B2][backblazeb2].
Photos are the exception, and are stored using [iCloud][icloud]. I wish there were an easy way to back up photos to a different technology.
## Email
My email host is [Fastmail][fastmail]. So far I've migrated from Gmail to ProtonMail, and then to Fastmail, and then to a friend's mail server, and back to Fastmail. Email is the one thing I want to be as close to 100% reliable as possible. It should Just Work™.
I use Fastmail's web client on desktop, and the stock [Mail app][mailapp] on iOS.
## Software
My favourite pieces of software not mentioned elsewhere.
For password management I use [1Password][1pass].
[Dark Noise][darknoise]. I have a hard time falling asleep without some kind of white noise. Beats keeping a fan running all the time.
[Feedbin][feedbin] for managing my feeds. No matter what anyone has said, RSS is _not dead_. If anything, they are flourishing even more.
[Reeder][reeder] for consuming my feeds. A beautiful interface with intuitive gestures. It makes reading fun, plain and simple. It also periodically downloads copies of your feed, so connectivity isn't required to read.
[Ivory][ivoryapp] for consuming Mastodon feeds.
[Obsidian][obsidianmd] for all of my note-taking. It's cross-platform and supports plugins. Built-in support for wikilinks. I don't have a complex organization strategy for my notes - just a basic set of folders. It's very easy to get caught in the rabbit hole of "best way to organize your thoughts".
I use the [Template][obsidiantemplate] plugin quite a bit - helps with notes with a common structure.
The [Actions URI][obsidianactions] plugin integrates well with iOS's Shortcuts, which lets me create a note and populate it with data from a single tap!
[Figma][figma] for all things design. It's the industry standard.
[Raycast][raycast] for doing computer-related things. I love using it for launching apps, currency conversions, word definitions, window management, joining meetings, and I'm sure something else I'm forgetting. I couldn't care less about the AI junk, but it does everything else great.
## Other Gear
I don't know where else to put these. Things I enjoy using to help organize my life, or maybe just have some fun.
My favourite notebook is the [Hobonichi Techo][techo]. I use it as a journal and catch-all for life events. It's well-suited to tracking emphera like movie tickets or receipts. I adore the paper - it's a thin, delicate paper with a wonderful texture. It's somehow strong enough to resist fountain pen bleed-through. There is a whole category of accessories and covers to personalize your Techo. They also offer a variety of other notebook formats that all use the same paper. If you're not careful, you'll find yourself dumping money into the hobby.
My favourite pen is my [TWSBI ECO-T][twsbi] in the mint-blue colour. The transparent style evokes a feeling of nostalgia. I love seeing my ink well full of beautiful colours. I use a fine nib. I find the thickness just right.
Another favourite fountain pen is the [Lamy Safari][lamysafari]. As a starter pen, you can't go wrong here. There are such a wide variety of nibs and colours to choose from.
I use a [Fjallraven High Coast Hip Pack][hippack] as my everyday carry. It's just big enough that I can fit all of my things without feeling cumbersome. I honestly don't know why it took me so long to embrace the bag life.
For better or worse, I love [AirTag][airtag]s. Makes it easy to find stuff that I often misplace.
[usestech]: https://uses.tech
[neovim]: https://neovim.io
[neovimsetup]: https://github.com/wonderfulfrog/neovim
[iterm2]: https://iterm2.com
[windowsterminal]: https://apps.microsoft.com/detail/9N0DX20HK701?hl=en-US&gl=US
[tokyonight]: https://github.com/folke/tokyonight.nvim
[opmono]: https://www.typography.com/blog/introducing-operator
[nerdfont]: https://github.com/ryanoasis/nerd-fonts
[prettier]: https://prettier.io
[eslint]: https://eslint.org
[u3423we]: https://www.dell.com/en-ca/shop/dell-ultrasharp-34-curved-usb-c-hub-monitor-u3423we/apd/210-bfou/monitors-monitor-accessories
[keychronq4]: https://www.keychron.com/products/keychron-q4-qmk-via-custom-mechanical-keyboard?variant=40097511669849
[keychronm3]: https://www.keychron.com/products/keychron-m3-wireless-mouse?variant=40294351929433
[smartdesk]: https://www.autonomous.ai/standing-desks/smartdesk-2-business?option_code=Smartdesk2Business-FrameSmartDesk2_DeskFrame.White,Model.Proframe-Surface_DeskDesign.53x29Classic,DeskTop.NoTop
[rdio]: https://www.theverge.com/2015/11/17/9750890/rdio-shutdown-pandora
[applemusic]: https://music.apple.com/us/browse
[bandcamp]: https://bandcamp.com
[bandcamplayoffs]: https://variety.com/2023/music/news/bandcamps-layoffs-songtradr-1235758123
[7digital]: https://ca.7digital.com
[beets]: https://beets.io
[plex]: https://www.plex.tv
[prismapp]: https://prism-music.app
[wh1000xm3]: https://www.sony.com/ug/electronics/headband-headphones/wh-1000xm3
[sonymdr7506]: https://www.rtings.com/headphones/reviews/sony/mdr-7506
[fujifilmxe4]: https://fujifilm-x.com/global/products/cameras/x-e4
[photosapp]: https://www.apple.com/ca/macos/photos
[ds218j]: https://global.download.synology.com/download/Document/Hardware/DataSheet/DiskStation/18-year/DS218j/enu/Synology_DS218j_Data_Sheet_enu.pdf
[backblazeb2]: https://www.backblaze.com/cloud-storage
[icloud]: https://www.icloud.com
[fastmail]: https://fastmail.com
[mailapp]: https://apps.apple.com/us/app/mail/id1108187098
[techo]: https://www.1101.com/store/techo/en
[lamysafari]: https://www.lamy.com/en/lamy-safari
[twsbi]: https://www.twsbi.com/collections/fountain-pens/products/twsbi-eco-t-mint-blue-fountain-pen
[hippack]: https://www.fjallraven.com/ca/en-ca/bags-gear/backpacks-bags/travel-bags/high-coast-hip-pack
[airtag]: https://www.apple.com/ca/airtag
[1pass]: https://1password.com
[darknoise]: https://darknoise.app
[lastfm]: https://last.fm
[feedbin]: https://feedbin.com
[reeder]: https://reederapp.com
[ivoryapp]: https://tapbots.com/ivory
[obsidianmd]: https://obsidian.md
[obsidiantemplate]: https://help.obsidian.md/Plugins/Templates
[obsidianactions]: https://github.com/czottmann/obsidian-actions-uri
[figma]: https://figma.com
[musicbox]: https://apps.apple.com/us/app/musicbox-save-music-for-later/id1614730313
[reactjs]: https://react.dev
[tailwindcss]: https://tailwindcss.com
[reactnative]: https://reactnative.dev
[reanimated]: https://docs.swmansion.com/react-native-reanimated
[expo]: https://expo.dev
[raycast]: https://www.raycast.com
[sleeveapp]: https://replay.software/sleeve
[sonosonesl]: https://www.sonos.com/en-ca/shop/one-sl-b-stock-shadow