Devarsh

I started work on Hackpaper, a shared wallpaper system for Hack Clubbers! I want to add a wallpaper gallery full of artwork/photography made by Hack Clubbers as well as a program that will change your wallpaper to a random one from the gallery every so often (synchronised with everyone else using Hackpaper)!

I implemented the Clear Set button in the Mathex editor! I encountered a few issues with putting an AlertDialog in a Menubar but I managed to fix them (not the cleanest solution, but it works :D) This fixes issue #3 in the GitHub repo

The last time I worked on this project was around July 2024. There have been many updates to the dependencies of the website since then, so I have had to update so much of the code to use Svelte 5, Tailwind 4, and the new shadcn-svelte components!! I ran into quite a few roadblocks but I resolved most of the bugs! Now I am going to make the website look a lot better and add more features to the Mathex simulator.

I have started a new project called QuackPack! It will be a browser extension that improves the experience of using Slack. I want it to be like how Vencord improves the Discord experience and how Scratch Addons improves the Scratch experience. I am building it using WXT and Svelte, and the repository is configured as a Turborepo so that I can add easily add a documentation site in the future. Here is an image showing the current state of QuackPack (there's just a popup window so far - I mainly spent this session working on the project structure):

I wanted to make it easier for users to see the link between the Slack channel and the website, so I added a button to the website's homepage that links to the channel. I also made a few changes to the code and README :D

I added a search bar to the website, so now you can quickly find the sticker you are looking for in the sticker gallery!

I implemented the 'like' functionality! Now you can click on the like button in the sticker gallery and it will be added to the list on the dashboard for quick access. I also fixed a few bugs here and there.

There was a big problem with the Sticker Gallery that has just been fixed! Previously, the gallery would load each emoji of each sticker from cachet.dunkirk.sh, but there were many problems with this approach. For example, each emoji request would need to go to cachet, and then cachet would redirect to the URL of the emoji on Slack's servers, causing lots of latency. Also, when a new sticker was created, it wouldn't load properly on the gallery because cachet takes time to update its internal emoji index. To solve this, I created a relatively basic caching layer that allows the emoji index to be refreshed by my code. The code of the caching layer is available at https://www.val.town/x/webdev03/emojicache and it's hosted on val.town because it's quite easy to use. Now the sticker gallery is super speedy!! (it's not perfect in the video but it's much better than it was before)

I added icons to the header with Lucide, fixed a few bugs, and added a short post to the website announcing the redesign!

I added a button that allows the user to copy the sticker to their clipboard from the website! Then they can paste it in Slack and it will appear. I also changed the theme of the website (again) using the tweakcn.com tool.

I noticed that the animated images on the Sticker Gallery weren't synchronised, so I added some code that waits for all of the images to load and then starts them all at the same time! Now they are properly synchronised.

After quite a bit of trial and error, it deploys again! I also made a few more changes in this session.

I added a command that allows users to search for stickers in the database!

I added a sticker gallery! Now the website shows a gallery of all stickers, sorted in reverse-chronological order with infinite scroll!

I set up the Slack OAuth for the website! Now, you can sign in with your Slack account and use it to access the website, but it doesn't have much on it yet. This took a while because I tried (and failed) to use another JS authentication library and had to resort to taking the implementation from a project I made before. Then I encountered many weird errors because I got mixed up between the API secrets :heavysob: Also, I made a basic navbar with shadcn-svelte components to show the authentication state shown in the attached image.

@techwithanirudh told me about a really cool technology called Turborepo, so I learned how to use it and migrated the whole repository to use it! This is because I need to have the Slack bot and the bot's website (which I am about to start working on) in the same repository and Turborepo helps a lot with that.

I set up a database! It uses the Drizzle ORM and Neon for hosting.

You've probably seen websites with these kinds of gradient backgrounds before, I think they look quite good. So I did a lot of research and found an amazing website called https://mshr.app that can let you generate these kinds of gradients and export them to CSS. After a few iterations I landed on the gradient shown in the image. It has some noise on top of it to make it look more visually interesting. I asked one of my friends for feedback and they said that I should get rid of the footer and move the social/contact links to the header, so I did that. I think it looks amazing! Next I'm going to fix the gradients on the rest of the pages (they look a bit odd right now) and then improve the landing page.

Hi everyone! I originally created this project for the #journey event, but I'm now continuing it to add many new features! I have been working on it for the past few days which is why this devlog has nearly 4 hours logged, so here's the summary of what I did since SoM started: I added progress updates when users create stickers, improved the image compression system (especially for animated stickers), added support for WebP, and a few more features to improve the quality of the bot for users. I have attached an image showing an example of the bot in use.

I added a rounded navbar, and also did a few other behind-the-scenes things such as adding a new <meta> tag and removing extraneous code

For this project, I am going to revamp my personal website! I started by updating the dependencies, as I haven't touched the project in a while, and setting up my IDE. To show my progress, I have attached an image of what the website currently looks like.