Skip to content

Commit

Permalink
fix: thomas name
Browse files Browse the repository at this point in the history
  • Loading branch information
ArmanNik committed Mar 8, 2024
1 parent dbe8476 commit 3ca79f8
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ author: laura-du-ry
category: engineering
---

Do you remember the Appwrite [Cloud cards](https://dev.to/appwrite/how-we-implemented-the-card-animation-in-appwrite-cloud-public-beta-4npb)? They were an absolute hit and filled our entire timeline for days. For Init, we wanted to create a new card, or better yet, a ticket to celebrate in style. So, we created three types of tickets that are unique to you with the help of your GitHub contributions and the tribe customization.
Do you remember the Appwrite [Cloud cards](https://dev.to/appwrite/how-we-implemented-the-card-animation-in-appwrite-cloud-public-beta-4npb)? They were an absolute hit and filled our entire timeline for days. For Init, we wanted to create a new card, or better yet, a ticket to celebrate in style. So, we created three types of tickets that are unique to you with the help of your GitHub contributions and the tribe customization.

As always, we want to share our learning so you can create your own tickets with GitHub OAuth and grid integration.

# Ticket design inspiration

Let’s start with the inspiration for the tickets. A few team members went to GitHub Universe in November 2023 and received a unique, customizable event badge with a grid on the side. These physical [event tickets](https://twitter.com/didier_lopes/status/1724925458762936817) inspired our very own Init tickets that would convey the feeling of a real ticket to an event.
Let’s start with the inspiration for the tickets. A few team members went to GitHub Universe in November 2023 and received a unique, customizable event badge with a grid on the side. These physical [event tickets](https://twitter.com/didier_lopes/status/1724925458762936817) inspired our very own Init tickets that would convey the feeling of a real ticket to an event.

We took this idea, made it our own, and created three different types of tickets that would celebrate Init. The different types are categorized into:

Expand Down Expand Up @@ -53,7 +53,7 @@ An essential part of the ticket is that we wanted to emphasize the importance of

As you can see on each side of the ticket, a grid resembles your unique GitHub contributions over the past year, just like on your GitHub profile. You can choose to add the grid with a toggle, but to do so, you need to connect your GitHub account.

Now, in case you would like to know how you can do this, we asked the engineer in charge, [Thomas G Lopez](https://github.com/TGlide), to explain the process.
Now, in case you would like to know how you can do this, we asked the engineer in charge, [Thomas G Lopes](https://github.com/TGlide), to explain the process.

## Associating your GitHub account with your ticket

Expand All @@ -67,17 +67,16 @@ By following our [documentation on OAuth](https://appwrite.io/docs/products/auth

Now that the association part is done, it’s time to integrate the more interesting part, the GitHub contributions grid.

There are two ways to achieve this. The first one, is using the GraphQL API. [This article](https://medium.com/@yuichkun/how-to-retrieve-contribution-graph-data-from-the-github-api-dc3a151b4af) was initially used as a source of inspiration when implementing this feature. However, with this data, you only get the number of contributions but not the actual chart.
There are two ways to achieve this. The first one, is using the GraphQL API. [This article](https://medium.com/@yuichkun/how-to-retrieve-contribution-graph-data-from-the-github-api-dc3a151b4af) was initially used as a source of inspiration when implementing this feature. However, with this data, you only get the number of contributions but not the actual chart.

In GitHub's chart, each square can have a level from 0 to 4, where each level is brighter than the other, indicating more contributions. We need a way to convert those numbers of contributions to levels, but unfortunately, that algorithm is not exposed by GitHub.
In GitHub's chart, each square can have a level from 0 to 4, where each level is brighter than the other, indicating more contributions. We need a way to convert those numbers of contributions to levels, but unfortunately, that algorithm is not exposed by GitHub.

We wanted the contribution chart to be as close to reality as possible. So, we arrived at our second solution: getting the chart from the source!

Our website is developed with SvelteKit, which is a full-stack framework. TL;DR, we have control over both the server and the client. So, when someone requests their ticket, we can make the server directly access your GitHub profile page and read the chart! We used a library called `node-html-parser` to deal with the HTML data.
Our website is developed with SvelteKit, which is a full-stack framework. TL;DR, we have control over both the server and the client. So, when someone requests their ticket, we can make the server directly access your GitHub profile page and read the chart! We used a library called `node-html-parser` to deal with the HTML data.

We then can generate a matrix that representes the contribution chart. Each array of the matrix will represent a week, and each item of said array will contain the contribution level for that particular day.


```ts
const res = await fetch(`https://github.com/${gh_user}`);

Expand Down Expand Up @@ -168,7 +167,7 @@ export const load = async () => {
};
```

Then, with SvelteKit, we can show the contributions as soon as they're ready.
Then, with SvelteKit, we can show the contributions as soon as they're ready.

```svelte
{#await contributions then c}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ To kick off, the very first Appwrite employee, [Eldad Fux](https://github.com/el

After the first funding round, there was financial power to hire the first engineers of Appwrite. Here is an overview of the very first engineers who joined the team and how they stood out.

[Christy Jacob](https://github.com/christyjacob4) is currently the Lead Engineer building out Appwrite Cloud. But before that, he was one of the very first active contributors to Appwrite, and at only 23 years old, he joined the team as a Founding Engineer. After being hired, he went above and beyond to help Appwrite grow. Besides coding, he handled social channels and took care of most of the copywriting work, as well as other marketing and growth-related work.
[Christy Jacob](https://github.com/christyjacob4) is currently the Lead Engineer building out Appwrite Cloud. But before that, he was one of the very first active contributors to Appwrite, and at only 23 years old, he joined the team as a Founding Engineer. After being hired, he went above and beyond to help Appwrite grow. Besides coding, he handled social channels and took care of most of the copywriting work, as well as other marketing and growth-related work.

[Damodar Lohani](https://github.com/lohanidamodar) is a Flutter enthusiast, and in his search for a proper Backend-as-a-Service, he discovered Appwrite. Not much later, he dedicated an entire [YouTube channel](https://www.youtube.com/@appwriters) to videos on Appwrite and Flutter and contributed to Appwrite’s Flutter SDK. If you want to know what to do to get hired by Appwrite, or any other OSS company, he is a leading example. Making contributions in both code and content definitely gets you noticed.

Expand All @@ -43,7 +43,7 @@ If you know Appwrite, you know [Steven Nguyen](https://github.com/stnguyen90). N

# Contributing in general

Now, we don’t only hire people from our own community. We, and other tech companies, appreciate contributing in general. [Thomas G Lopez](https://github.com/TGlide/), a front-end dev, is one of the people who has made notable contributions within the Svelte community. He even built [Melt UI](https://melt-ui.com/docs/introduction), an open-source collection of accessible and customizable component builders for creating user interfaces with Svelte. His contributions earned him the notable title of an official Svelte Ambassador.
Now, we don’t only hire people from our own community. We, and other tech companies, appreciate contributing in general. [Thomas G Lopes](https://github.com/TGlide/), a front-end dev, is one of the people who has made notable contributions within the Svelte community. He even built [Melt UI](https://melt-ui.com/docs/introduction), an open-source collection of accessible and customizable component builders for creating user interfaces with Svelte. His contributions earned him the notable title of an official Svelte Ambassador.

If you have been around the Appwrite community, you must know [Aditya Oberai](https://github.com/adityaoberai) by now. He actively participates in the larger tech and hackathon community and stumbled across Appwrite by chance on X. Now, one thing you need to know about Aditya is his unfair advantage: he is a networker. So when he discovered Appwrite, he noticed that he already knew many other contributors, which drew him in further and helped him land a job at Appwrite.

Expand All @@ -53,7 +53,7 @@ If you have been around the Appwrite community, you must know [Aditya Oberai](ht

# How to stand out from the crowd

Finding the right team members is crucial for tech start-ups. When you are still building your company, there is little room for error, especially when building your team. Hiring the right people determines future success. So it’s about finding the needle in the haystack for employers like Appwrite, and for you to be that needle, you need to shine brighter than the rest.
Finding the right team members is crucial for tech start-ups. When you are still building your company, there is little room for error, especially when building your team. Hiring the right people determines future success. So it’s about finding the needle in the haystack for employers like Appwrite, and for you to be that needle, you need to shine brighter than the rest.

Now, this is not an unhealthy testimony to working day and night, every day, no fun, or any of that. On the contrary, we stand for healthy life balance and will force you to take leave if you like it or not. To stand out is to deliver quality work consistently, not quantity, to be eager to learn, receptive to feedback, and supportive of others. And if you missed this point, one thing is for sure: contributing to open source increases the chances of getting hired into a tech job.

Expand Down

0 comments on commit 3ca79f8

Please sign in to comment.