June 16, 2025
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.
Slack bot that lets you make matrices of emojis!
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.
I redesigned my personal website to make it more personal and interesting!
I worked on the project a bit today. I researched the CUPS API and IPP, and switched to Bootstrap because I want to focus more on the backend than the frontend until the main functionality works.
Today I created the initial base of the BerryPrint project. It is a SvelteKit project using Tailwind for styling. Also, I thought and researched about the architecture of the whole project and how each component needs to work together for it to work (especially CUPS, which is what is used for printing on Linux).
I got the idea for this project because I wanted to have a modern, easy-to-use, and secure way to print files from my laptop without having to connect it to the printer with a USB cable each time I needed to print something.
P.S. The screenshotted code is from the Lucia auth template that was added when I created my SvelteKit project, I haven't actually worked on it yet!
This was widely regarded as a great move by everyone.