Skip to main content

How to Find Open Source Projects to Contribute To

· 6 min read
Bekah Hawrot Weigel
Developer Experience Lead

One of the top questions I get is “How do I find an open-source project to contribute to?” It’s a fair question because there’s a lot of encouragement to contribute, but not a clear path to find the right issue for you. The truth is that maybe you shouldn't be looking for a place to contribute at all. Maybe you need to understand what your real goals are and start by building something you need, understanding open source projects and communities, and approaching contributions with a goal to improve the project rather than improving your resume.

How to Assess Your Skill Level Before Contributing to Open Source

· 7 min read
Bekah Hawrot Weigel
Developer Experience Lead

Recently, I was in a group that was talking about personal projects and growing your developer skills. Nick made a good point when he said that you wouldn’t expect to be an expert at the guitar when you picked it up for the first time. It takes time, practice, and understanding. And when we’re giving people advice, it can be hard to tell them where to start or how to find the “perfect issue” - although good first issues don’t exist - because everyone starts at different levels. For example, a person who’s learning the guitar but also plays the piano will likely have an easier time learning the instrument than someone who has never tried to play an instrument before. This is why understanding your own skill level can be incredibly important to find an open-source project and issue to work on.

Creating Open Source Connections

· 3 min read
Bekah Hawrot Weigel
Developer Experience Lead

As it stands today, the open source ecosystem can feel disconnected. Theoretically, we know that there are maintainers, contributors, and projects out there that are incredibly talented and innovative, but finding them can feel like searching for stars in a cloudy night sky. Sometimes you need to have that information – and fast – to be able to maintain your own projects.

Nurturing the Future Maintainers of Open Source

· 6 min read
Bekah Hawrot Weigel
Developer Experience Lead

The world runs on open source, but we know the challenges of burnout, the need for support, and loneliness. Despite all those challenges, new open source projects are appearing every day. We need to support new maintainers as they learn to maintain in the fast-paced open source ecosystem experienced maintainers are accustomed to. If we want growth, innovation, and solutions to our problems, we’ll need to have a supportive environment for new maintainers. And this is why we need to educate and support new maintainers.

Creating an OG image using React and Netlify Edge Functions

· 4 min read
Nick Taylor
AI Engineer

Open Graph (OG) images are a must if you're sharing content on the Internet. From sites like X/Twitter, to Slack or Discord, a great OG image makes your link share pop.

Examples

I recently built out a couple of OG images for Open Sauced for a couple of features we've rolled out over the past couple of months, Workspaces and Repository pages. They're great features that I encourage you to check out, and I encourage you to share them on socials so our beautiful OG images pop.

For example, here's an OG image for a workspace for jsr. JSR is the new JavaScript registry from the folks from Deno.

OG image for the OpenSauced workspace for jsr

And here's the OG image for a repository page for huggingface/transformers.

OG image for the huggingface/transformers repository

Looking at the image for the jsr workspace, there is a template for the image, but there are several dynamic portions to the image.

All the sections denoted by green outlined squares are dynamic.

OG image for the OpenSauced workspace for jsr with sections outline in green squares denoting dynamic portions of the image

This dynamic info gets pulled in for the most part from the OpenSauced API.

Other parts are pulled in from the URL, like 30 for the day range, and the description comes from the query string in the OG image URL.

browser dev tools view of the metadata section of the head with OG image URLs outlined by green squares

React to generate an image

So, how do we use React to generate an image?

We're using og_edge from my old co-worker Matt Kane (@ascorbic), but og_edge is a direct port of @vercel/og that works on Deno and Netlify Edge Functions which run on Deno.

https://github.com/ascorbic/og-edge

Under the hood, og_edge and @vercel/og use the Satori library.

Satori: Enlightened library to convert HTML and CSS to SVG.

https://github.com/vercel/satori

The API for the og_edge module is pretty straightforward. It exposes an ImageResponse constructor with the following options and that's it.

{% raw %}
new ImageResponse(
element: ReactElement,
options: {
width?: number = 1200
height?: number = 630
emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat' = 'twemoji',
fonts?: {
name: string,
data: ArrayBuffer,
weight: number,
style: 'normal' | 'italic'
}[]
debug?: boolean = false

// Options that will be passed to the HTTP response
status?: number = 200
statusText?: string
headers?: Record<string, string>
},
)
{% endraw %}

Code snippet above care of the official og_edge API reference.

To build out these OG images, we have a background image, some icons, like a star and fork icon, and we also pull in the repository organization or user's avatar. With a bit of vanilla CSS, we can position things just right. We also pull in the Inter font as that's what we use at OpenSauced.

As far as I know, og_edge does not support Tailwind like @vercel/og does. Not a dealbreaker at all, but just something to be mindful of.

One other thing we do is set cache headers as these are dynamic images where the data changes over time. Having said that, some social networks cache OG images very aggressively.

{% raw %}
headers: {
// cache for 2 hours
"cache-control": "public, s-maxage=7200",
"content-type": "image/png",
},
{% endraw %}

Show me the code

Here's the pull requests for the initial work on these two OG images.

https://github.com/open-sauced/app/pull/2939 https://github.com/open-sauced/app/pull/3117

Wrapping up

Beautiful and dynamic OG images are a must if you're looking to stand out when sharing links on socials, and og_edge and @vercel/og are great options if you also want to leverage your existing React skill set.

Now go out and build your own OG images! 🖼️

Stay saucy peeps!

If you would like to know more about my work in open source, follow me on OpenSauced.

Meet the New AI Engineers

· 5 min read
Bekah Hawrot Weigel
Developer Experience Lead

Chances are, you've heard of Devin, the AI software engineer that's "going to take your job." No one will argue that AI is changing the way things are happening in tech. But now it's a little different. Now, AI isn't just helping software engineers, it's becoming an engineer - doing things that only humans used to be able to do. So has it already grown beyond a tool? Is it now a partner in the engineering process? We're seeing examples of this with Devin, Devika, and OpenDevin – all AIs claiming to be really good at software engineering. Here's the big question: can AI actually write secure code all by itself? Is the future of coding in the hands of AI?