My first three weeks in open source

After meeting some amazing @tangled.org and @npmx.dev people at Local-First Conf in Berlin this year, I felt invigorated to finally start contributing to projects, particularly in the atmosphere. Here's a list of my submissions, and some reflections at the end.

Tangled

At Local First Lab Day, they hosted a session where we could use custom javascript to modify the punchcards on our Tangled profiles. I replaced mine with an RSS-like feed of my Bluesky activity

Add wilb.me.js #2002

Hello from Local-First Conf!

Fixed a bug in Tangled where the browser would repopulate text inputs after submitting and reloading:

appview: disable autocomplete in markdownEditor and issue title to avoid browser repeating submitted content #2110

Resolves [#698](https://tangled.org/tangled.org/core/issues/698)

Implemented drag-and-drop image uploads to Tangled issues/PRs

appview: drag-and-drop image upload in markdown editor for issues and PRs #2115

Implements [#304](https://tangled.org/tangled.org/core/issues/304) This PR adds Github-style image upload by drag-and-dropping an image onto the markdown editor in images and PRs. To do this, I added a new `blobs` field to the issue and pull lexicons, referencing the blobs to avoid them being garbage collected. This is additive, and doesn't break existing records / decoders. I also added an upload proxy, as the client side is not allowed to upload to the PDS directly. `getBlob` doesn't work on not-yet-referenced blobs, so in order for the markdown preview to work, render the blob through `URL.createObjectURL`. Low quality gif of it working in the local environment: ![img](https://eurosky.social/xrpc/com.atproto.sync.getBlob?did=did:plc:oxdlsmnvpk2riyyuvq5jtdkd&cid=bafkreiezivbquv6xlje7ajfj2lzntgy3gdt2o56g4jgf64w67byozwifyi)

The biggest one: added pull request event types to Tangled pipelines

api,lexicons,spindle,workflow: add pull request event types #2157

[issue#696](https://tangled.org/tangled.org/core/issues/696) Allows filtering the pull_request trigger in a workflow based on if the PR is opened/closed/reopened/merged. Example: ```yaml when: - event: pull_request types: [opened, reopened] ```

Atmosphere Community

Fixed a CSS bug in @atmosphere.community

Flex PostCard meta content vertically on mobile to make it readable. #9

Resolves [#7](https://tangled.org/atmosphere.community/atmosphere.community/issues/7) Before: ![img](https://eurosky.social/xrpc/com.atproto.sync.getBlob?did=did:plc:oxdlsmnvpk2riyyuvq5jtdkd&cid=bafkreidoop4pnfkrbeceh5okilycgkfr3j4vr4ssmd3ombv6vwnkcsivnm) After: ![img](https://eurosky.social/xrpc/com.atproto.sync.getBlob?did=did:plc:oxdlsmnvpk2riyyuvq5jtdkd&cid=bafkreih5wvgtdq5nxtb6hfmbtbhqyixwppxx4dm2dkj7w3ijyyqwjjdiqa)

I was looking for ways to contribute there, and one issue talked about adding preview deploys. It seemed like Tangled was missing the required workflow filters for creating/destroying ephemeral environments, which lead to the last PR in the previous section.

npmx

At the npmx "hack day" meetup after Local-First, I took the opportunity to grab an interesting issue and work on it

feat(ui): add easy way to copy package version by WilhelmBerggren · Pull Request #3044 · npmx-dev/npmx.dev

🔗 Linked issue Resolves #2646 (but of course more could be done) 🧭 Context The linked issue describes the desire to have a quick way to copy the version number. Right now there is a quick way to co...

I later fixed a bug I introduced (sorry) which appeared when scoped package names were encoded in the URL path

fix: docs tab repeats the package name twice in the header by WilhelmBerggren · Pull Request #3101 · npmx-dev/npmx.dev

🔗 Linked issue Resolves #3100 🧭 Context In #3044, we began showing the version of a package next to its name when viewing package/&amp;lt;name&amp;gt;/v/&amp;lt;version&amp;gt;. When navigating to ...

Later, I fixed a bug where user profiles always showed zero published packages in their OG images

fix: user profile open graph image showing zero packages by WilhelmBerggren · Pull Request #3085 · npmx-dev/npmx.dev

🔗 Linked issue Resolves #2920 🧭 Context The OG image for /~username was always showing package count as zero due to a data loading issue 📚 Description Added a separate UserProfile.takumi.vue compon...

Finally, I messed around with making a TUI version of npmx

If you like the idea, here's an issue about it

[feature]: npmx CLI / TUI · Issue #3090 · npmx-dev/npmx.dev

Describe the feature Expose npmx.dev as a command-line interface and/or terminal user interface. This would bring the superior npm browsing experience to the terminal, making it easier for devs to ...

Keytrace

Added reverse-lookup to @keytrace/claims

Add reverse lookup to claims package by WilhelmBerggren · Pull Request #39 · orta/keytrace

Resolves #38 Adds reverseLookup to &amp;#39;keytrace/claims package. Usage: import { reverseLookup } from &amp;#39;@keytrace/claims&amp;#39;; const { total, matches } = await reverseLookup(&amp;#3...

Discussed claiming npm orgs. Orta added ability to claim publish rights in an npm org. I'm trying to make the case that an entire org should be claimable

Claim keytrace npm org · Issue #37 · orta/keytrace

Hi, I was looking for examples of npm org claims, and noticed keytrace.dev account hasn't claimed the @keytrace npm org. Perhaps that would be useful? Lead by example? 😄

Fun

Made a pastebin clone while live on @stream.place . @chris.pardy.family joined in and we raced to see who would complete theirs first

wilb.me/atmob.in

A pastebin clone for atproto

I also threw together a headless CMS that stores its data on your PDS, after watching @tyler.fun talk about doing this for a friend's artist page at the @atproto.la meetup stream

wilb.me/pds-cms

A little headless CMS that stores models and content in your PDS

Reflections

Overall a fun couple of weeks! I'm back at work from vacation, so likely won't be able to keep up the same cadence.

The biggest thing I want to improve at is to properly contribute beyond code. Discussions, issues. But this is particularly daunting as I'm not accustomed to what is appropriate. As a stranger, it seems fine to open issues. Critiquing someone else's issue, slightly less fine. Reviewing someone's PR (as a non-maintainer)? Grating.

I'm also scared of doing "drive-by" PRs. Some PRs I've opened an issue immediately and started working on without anyone telling me a PR would be welcome. Is that just creating work for a maintainer? An obligation to respond? Am I overthinking this? Probably yes.

Gonna keep at it though! Maybe I'll do another update like this again. Thanks for reading :)

PS: I'm soon going to be looking for developer work in Los Angeles (around Pasadena ideally). Send me your leads!

Wilhelm Berggren (@wilb.me) | Sifa ID

Senior Software Engineer · Backend Developer: Senior Engineer I at Humly