Open Source Contributions

Open Source Contributions

A list of my contributions accross multiple open source projects

Tech Stack

  • TypeScriptTypeScript
  • Next.jsNext.js
  • Prisma ORMPrisma ORM

1. Ilalang -- Mengabadikan Ingatan

https://ilalang.drepram.com

ilalang.drepram.com_.png
Seperti ilalang yang tidak diinginkan petani di ladang mereka, dalam situs ini dihimpun sajak‐sajak dari para "ilalang" dalam semesta sejarah puitika Indonesia.

1.1 Performance Improvements

Page loads were significantly increased from ~500ms to almost instantaneous.

A few days before the release, Andre, a friend of mine asked for help on how to optimize the site he was building. Each entry page on the site was taking a slow time to load. After a quick investigation, the problem was that each page was using the SSR (server-side rendering) method, in which, the server performs database fetching for each request received. The solution was to change the rendering method to Next's ISR (incremental static regeneration) feature. The addition of this caching mechanism brought a significant performance improvement, where each navigation felt instantaneous.

1.2 SEO Improvements

SEO was improved by adding dynamic meta tags and OpenGraph images.

og ilalang.webp

Another important optimization involved implementing dynamic meta tags for SEO and social sharing. Initially, all pages had static meta tags, which meant that search engines and social media platforms displayed the same generic information for every page. To fix this, we leveraged Next.js’s getServerSideProps to fetch dynamic metadata at request time for key pages while using next/head to inject the appropriate title, description, and Open Graph tags. This ensured that each page had unique and relevant metadata, improving search rankings and engagement on social media.