Bookmark Beat: EP 13

Contributing more to open source + a Svelte Newsletter showcase rewind ⏪

Happy new year, y'all. It's been a minute. I've been enjoying the Denver weather. It's freezing (well, below freezing) and my little chihuahuas have to spend 15 minutes putting on 4 layers of clothing just to go outside. But it's beautiful here, so I'd say it's worth it.

This beat, we'll be looking back on the last few years of my newsletter writing, how it's changed the way I thought about open source contributions, and I share some sweet sweet links curated by popularity with the newsletter's subscribers.

But first, an intro…

Like this beat? Then it's probably a good time to check out the archive and, if you haven't already, subscribe on Substack 📬

An intro: Everyone is a Designer Information Architect

This week, Abby Covert (the amazing author of Stuck? Diagrams Help. and How to Make Sense of Any Mess) wrote about how authors can leverage information architecture skills to make writing much much easier:

In terms of books, an information architecture is the structure and language the author chooses to describe the content they have to present, and the arrangements they then present that content in… Now all these years later, I see how my approach to writing [a] book as if it was a system is a major part of its strength and clarity with readers.

The whole post is worth a read, especially for non-fiction writers. What I especially loved about it was the perspective that ‘Information Architecture’ can be, should be, and often is applied everywhere.

Whether you're organizing your kitchen or writing a book, it's important to remember that the way things are named, grouped and referenced is a skill. It's OK to be bad at it at first. And there's lots of prior art to leverage when making decisions.

Anyway…

Let's talk about my other newsletter

I've always been a proponent of open source software. In design school, I made posters about it. In my spare time, I would read (and sometimes write) open source code to wrap my head around concepts that engineers would throw around. And I, like the billions of people in the world who use software every day, constantly reap the benefits of freely-available solutions to many of the world's problems.

I, for one, would not want to have to write a TCP-compatible network interface every time I wanted to see pictures of my nephew. So thank you, random strangers on the internet, for solving that problem so I (or, more likely the people who make Google Photos) don't have to.

But, unfortunately, a lot of open source projects are either unsustainable or funded directly by huge companies. Which is why I was surprised, when shopping around for an easy-to-use frontend framework, I found a successful project that was totally community-driven: Svelte.

After building a few tools and websites with it, I became interested in who else was making things with Svelte and what was next for the framework. It was around the same time that I heard one of the Svelte Society community members, Swyx, mention on the Svelte Radio Podcast that the community didn't “make a big [enough] deal about new features” since things move so incrementally.

I put two and two together and started The (Unofficial) Svelte Newsletter.

Over the course of the few months, I stuck with it - collecting changes, resources and new projects within the Svelte community and sharing them on the first of every month. I'd like to think that it was my consistency (and lack of self-promotion) that made members of the community and Svelte maintainers comfortable with me committing my newsletter to the main Svelte site.

Since October of 2021, I've been cross-posting the content on the Substack and Svelte blog.

Last year, I was invited by the amazing Brittney Postma to talk about this journey, if you're interested. But the point of all this is to say, if you're looking to contribute to a community - look for opportunities in open source! No coding is necessary. Literally my only contributions to Svelte have been the newsletter and I'm perfectly okay with that. I really don't want to write a compiler.

TL;DR start with something you're interested in and follow it to the nearest GitHub contribution. You'll learn a lot and meet some lovely people along the way.

I figured the best way to tie together this story with the rest of today's beat would be to go through all the posts of Svelte Newsletter's past and pull out the most clicked links.

I've split these into the same sections I use in the newsletter. I hope this gives you a sense of the other stuff I write about as well as a look into all the cool things the Svelte community has been doing online 🌐

If you're not a Svelte developer, you might only be interested in the first section, that's cool! I won't be offended if you scroll past the resources and libraries 😉

Apps & Sites built with Svelte

  • HousesOf.World is a Sapper site built with Svelte, Anime.js and CSS transitions (Jul 2020)
  • vidu is a minimal web analytics collector and dashboard (Jun 2021)
  • SvelteThemes is a curated list of Svelte themes and templates built using Svelte, SvelteKit, ElderJS, Routify etc. (Jul 2021)
  • Svelte Commerce is an advanced frontend platform for eCommerce based on SvelteKit (Aug 2021)
  • FLAYKS is the portfolio site for Félix Péault made with SvelteKit, Sanity, and Anime.js (Oct 2021)
  • Tangent is a clean and powerful notes app for Mac & Windows (Nov 2021)
  • awesome-svelte-kit is a list of awesome examples of SvelteKit in the wild (Feb 2022)
  • SvelteStorm is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application (Mar 2022)
  • Launcher is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind (Apr 2022)
  • Svelte Terminal is a terminal-like website (Aug 2022)
  • PocketBase is an open source Go backend with a single file and an admin dashboard built with Svelte (Aug 2022)
  • Svelte-In-Motion lets you create Svelte-animated videos in your browser (Oct 2022)
  • straw.page is an extremely simple website builder that lets you create unique websites straight from your phone (Sep 2022)
  • DECK is powerful and high performant local web development studio for MacOS, Ubuntu and Windows (Nov 2022)

Learning Resources

Libraries, Tools & Components

  • Renderless Svelte is a bring-your-own styling component library whose goal is to encapsulate common behavior so you don’t have to implement your own Carousel, Modal, Notifications, Tabs or Tooltips (Sep 2020)
  • svelte-zoom brings “nearly native” pan-and-zoom to images on desktop and mobile (Oct 2020)
  • svelte-query is a collection of helpful hooks for managing, caching and syncing asynchronous and remote data (Jan 2021)
  • svelte-headlessui is an unofficial, complete Svelte port of the Headless UI component library (Jan 2022)
  • threlte v5.0 is a completely new developer experience that is faster, more powerful, and incredibly flexible (Dec 2022)

Wow! A lot of throwbacks in there. Some projects that made it… and others that became stepping stones for those that came after them. There were also a few “most clicked” links that no longer resolve to their original project or have just gone down since posting.

Feel free to take a moment of silence to remember those popular projects and sites that are no longer with us 🪦

Coda: From pixel-perfect tiles to perfectly-timed jumps

Welcome skimmers! And welcome back everyone who clicked all the links above and got lost in an internet rabbit hole for a couple of hours…

Here's your coda.

Aran P. Ink (software engineer, artist, musician, and game developer) broke down all the complex colors, pixels and math required to make one of the most beautiful games of the last decade: Celeste.

As an aspiring game designer and person who loved this puzzle-platformer, I spent wayyy too long reading and re-reading this post. Aran does a great job explaining even the most complex math-y parts in way that I can understand:

In the original screenshot, we can see four different kinds of solids: brown dirt, blue rocks, gray metal beams, and green-gray stones (hiding at the top-right). These represent our tilesets — batches of similar tiles that are combined to form larger structures.

So grab your favorite beverage and start blasting the best soundtrack ever, because this is a post to sit with!

Until next time… catch ya next beat 🥁😎🥁