Svelte Posts – Hack Club Scrapbook

I finally got my scrapbook account fixed, bummed custom domain's don't work, but it is ok. Today I started another new project. The name, mutter, is tbd but the idea is a user friendly way to generate subtitles using whisper (whisperx or whisper.cpp). I know there are a few of these out there but none of them seem to be maintained or plug in play enough for my liking. The tech stack I have decided on is Tauri + SvelteKit + TypeScript, tauri will allow the app to be packaged in a small binary and svelte will make the ui interactive and pretty. This will be a great way for me to try to learn rust too.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/812b2ba2-0f9c-4490-b406-9be1fdeb820c-8d1e0bce-d742-43d6-b691-0a4722441a00.png

Using Svelte and Scss For The First Time.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/dfd47548-793a-4d1c-b28e-3606efa95a84-image.png

finally returning to the scrapbook - today I properly began work on my first project for Shipwrecked, a playlist migration tool that transfers playlists between streaming services! First step was getting the Spotipy python module working with my Flask back-end and Svelte front-end.

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/de44d7d6-b907-4ba5-9b49-1cc73c33a880-image.png

I've added theming to Modulo! If you recall at the very start, I made an update about figuring out how to change the Tailwind theme on-the-fly. This is why! I used a color picker library called svelte-awesome-color-picker, and hooked its onInput event to a function that updates the theme's CSS variable.

git.new/modulo-682a6c7

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/9dfbd9d9-f28e-421a-acd2-de25b8734e1f-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d77a7f69-4e07-4dda-9838-dd218c7a3290-da61d6b2-78e4-48e8-8ff7-ef88a1af83a1.png

been kinda demotivated yesterday and today

but i made the current dot highlighted and since my code was getting messy i moved the dot into its own Svelte component - this'll make it much easier to add the dot logging feature tomorrow 👀 git.new/modulo-bb8c0b0

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/59ef96dd-d37a-48b6-b913-5c09cf4e9d28-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/494326cf-2766-473d-a8f2-f638db2415ea-3c928d1f-6f6b-4eb1-ab84-13d1f5b37a5a.png

I made the board from 11x7 instead of 11x11 so the games won't feel so boring at the start. I have added in the ability to attack other pieces, as well as the main goal, to move the core pieces next to eachother. I will release the official ruleset soon

Working on my new chess-like game, it doesn't have a name yet but I want to prove that the game is playable before I get attached to it

allmost finished my svete js app

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/88ee2688-a443-46e1-a000-87119f911975-image.png

working on links animation for my svelte js protifolio

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/aef7a540-b31b-4dbd-bf18-68957c3d2462-image.png

working on ui for my svelte js portifoilo

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/e731f455-43aa-441c-8caa-365836b30f03-image.png

links are fidex in my svelte js protifolio

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/620ed0a4-6c8c-46ed-9f52-95efd95fddcd-image.png

lets see how my svelte js portifolio turns out!!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/542faa88-55a6-4474-b8a7-89b206a39622-image.png

workingon svelte js app

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/1033feed-0a20-42de-9ab2-b978bd6451e8-image.png

coding in js the new svelte and learing svelte

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/7f94b98b-1862-441a-bf82-c22ef6f4adac-image.png

Today is day #C07TTG7NVPX| of #C045S4393CY| (i took a 1 day break yesterday), today i worked on the site for #C08EL3G9K2B| Uses svelte, and stuff uh idk. I spent a lot of time making shit work cause it kept on breaking

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/58be6e1f-e0d3-4ba3-b13d-b8f7fba55774-image.png

fixed a few bugs, updated boards styling, and started working on removing the flash on load in Codeboard today. also did some research on how i could implement jumpstarts, but i didn't find much. (day 9? of #C045S4393CY|)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f9fcf187-f3c0-420c-a861-561b982d7e77-image.png

DAY 3 of #C045S4393CY|! I decided to create two new programs in a repo, one in raw html and the other in Svelte, both create a simple button and counter but DAMN is the svelte one shorter and simpler, there is no going back lol! Repo: github.com/Dumbhog/15-Days-In-Public/tree/main/2.%20Svelte%20Button%20Test

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/b2c2f001-b0d4-4249-8886-c707056dc626-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d82e49ed-e9f1-4b9d-affb-16029e830c55-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/0179e8a3-daf5-4557-beb4-27e543e480b4-65ed68aa-42c4-41ce-a4d4-5e14e7eade50.png

hai scrapbook, i'm back! today I migrated my dashboard for getting things done, Mosaic (name still pending) to use

Svelte components, and implemented

widget dragging! Because of the blur I applied to the windows they make this glassy effect which I quite like!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a8b96899-cc50-49c1-9db7-8f3760c5ea2f-image.png

not too much work today in terms of features, it's mostly fixes and cleaning up code a bit. example here with using svelte's snippet feature to reduce the code needed for the same thing!

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/bb6467a7-110b-426d-a6dd-0e5319548bb3-after_snippet.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/5a85c5ce-67e4-4b1a-9a9f-b52a202a2df0-before_snippet.png

Today I moved a slack bot over to the raspberry pi I setup yesterday & started reading through svelte's demo "sveldle" to get an understanding how svelte kit works more

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a914cfd3-c13e-4be2-9236-156064580056-screenshot_2024-11-11_at_8.45.29___pm.png

MILESTONE: Shadcs inspired UI library Written in svelte Desc: This is a ui library that was written in svelte and inspired by the Shadcn ui library. I have just finished prototyping all of the 20+ components and still need to add the picture previews on the github. The library will be available for use soon. Repo: github.com/Anant-raj2/ui-lib

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/649b3923-fb04-4cbe-9319-d2d153de58ca-3cd2a5b6-a37c-4ed6-830d-deafc1569e31.png

Cool little autoclicker I made in Svelte & Tauri sadly linux wouldn't build and I couldn't run it on my Macbook I never could figure out how to fix anything... github.com/mavdotjs/lambda-autoclicker

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/f46000c0-8ee2-4d4a-9e93-241db8453d50-43995aeb-63ed-45b6-a29d-fc7971ae4a36.png

Made a TypeScript Svelte template/placeholder website Repository: github.com/qualk/coming-soon

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6573fa05-9462-487d-a93e-915cfb797560-f24aa777-3f87-4b35-bab9-23396830a0e5.png

I've made a product comparing website using GPT-4o Vision API and Svelte. You can simply give it images of two similar / different products then it'll give you pros and cons of it. Finally there's a meter recommending which you should choose. Website Github

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/709eccd7-2440-407e-ab17-f988e6eff583-ac938372-081c-4025-bc0f-981d7678749f.png

#C06SBHMQU8G| fixed some bugs with ui and other stuff for my Svelte URL shortener GitHub: github.com/intercepted16/zipyy/tree/dev

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/a7129d90-986d-4de0-9082-0438e69266e2-b2e2c5b5-1ba0-4a3f-b5e7-fd8b5c69bc6c.png

I made an autoclicker with tauri github.com/mavdotjs/lambda-autoclicker/releases/tag/0.0.1 Linux build just straight up doesn't work, so no linux yet, but I expect it to be fixed soon 😅

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/5bd1f54f-70e7-4df4-888e-277747ee3cc4-eeb95f75-ebcc-4123-89b0-7a4f224a4a3b.png

Finished and published the new version of my team's robotics website I made for fun with svelte. Was a lot of fun to make it for the arcade especially making it look clean with the gradients. Still have plans to make two more pages, competition and robots, which will look cool and possibly have 3d models! Github: github.com/SaMoTechRobotics/SaMoTechRobotics-Website. Website: samotechrobotics.com

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c2985a02-0758-4953-a18d-14de578ccaf4-2d2d04cc-7042-403e-a165-1b4e362e123a.png

Created a zoom clone! Made this to learn react and nextjs to eventually migrate my own project over and was following this great tutorial: www.youtube.com/watch?v=R8CIO1DZ2b8 Overall, a great intro to next js especially learning about useState and useEffects. For sure migrating my svelte site over to react for more reactivity. Also learnt how to use this great video and audio messaging service and Clerk auth. Really amazing tutorial and I recommended anyone trying to get into react and next js to make this! github.com/Aaryan-N/Zoom_Clone

https://scrapbook-into-the-redwoods.s3.amazonaws.com/2d410bbd-57c1-49c1-8ef9-0aed710a0ecf-screenshot_2024-08-11_054134.png

https://scrapbook-into-the-redwoods.s3.amazonaws.com/48df0b65-841b-49b1-965b-762aefdf77e0-image.png

https://scrapbook-into-the-redwoods.s3.amazonaws.com/b347355c-8315-4b28-8ef0-99f2a85446c2-image.png

https://scrapbook-into-the-redwoods.s3.amazonaws.com/8dc74caa-8357-4ea6-ba8e-eabea41cbd6b-image.png

I put up a quick personal site built with svelte and tailwind! owenwang.dev

https://scrapbook-into-the-redwoods.s3.amazonaws.com/69f80f1f-4a99-4584-a454-8624e1c4df7d-image.png

Discord oAuth flow implemented. Now you have to build the svelte app first and then run server.js for everything to work properly! github.com/Aaryan-N/Fira_Svelte/releases/tag/v0.1.3

https://scrapbook-into-the-redwoods.s3.amazonaws.com/6179a722-afb9-4bff-b692-11d69f89bfd2-image.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/ff12785e-a058-48da-b0b1-2e2873faf37c-e5f7c13e-2f8a-489f-a401-1563a68cef93.png

built a todo app with svelte and tailwind! github.com/skyfallwastaken/svelte-todo (somewhat old project, but i forgot to submit the session)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/cf3f7446-5f14-48c9-aed3-87bdad68fd49-137d2f30-99c8-4ef4-a6a1-50d63fffce77.png

Making a school website that is easy to use and has modern UI with Svelte and SvelteKit, has features such as user accounts, permissions, user settings and so on... I'm posting this because of the 25 hour limit since this is a quite more ambitious project and takes longer than I originally have thought. Github repo: github.com/NotRewd/proclass-website/tree/master

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/6f666a6a-7e4d-4d53-b614-2674966e1596-f96ccbdf-0a8c-49ab-9296-e84d8f575d73.png

Flexi is a web app made with SvelteKit and Supabase designed for a school to manage flex periods and share opportunities with students. It aims to make the process of signing up for flex classes easier for both students and teachers, removing the unnecessary and incredibly time-consuming process currently associated with the current outdated and costly system. It also allows for school-wide announcements and featured flex opportunities to be shared with students. Flexi is still in active development, here is the link: github.com/BrandonKirbyson/Flexi

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/d6f36b1c-77f3-4326-b022-75444c8d2a92-8b5a6924-a9fc-47d6-839b-cb96d04941fa.png

Started work today on rewriting my front-end in Rust! Progress is really slow, and I really miss the comfort and DX of Svelte, but this will allow me to implement secure auth so it's kinda worth it. github.com/4f48/semail

https://scrapbook-into-the-redwoods.s3.amazonaws.com/18a87b09-77d2-4f9b-be9b-3b5374b60135-image.png

I just finished a Tic Tac Toe website. This was my first Next JS project, and I definitely learned a lot about how Next JS works, and how it differs from React and Svelte. I hope you guys like it! Here’s a link to the repo: github.com/SkywardSyntax/TicTacToe-NextJS/tree/main?tab=readme-ov-file Here’s a link to the live website: skywardsyntax.github.io/TicTacToe-NextJS

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/da2f42e5-bf94-4f99-9516-1a3a6c6f8edd-0344f34e-15f4-4031-a536-c198708e4aa0.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/1fab0ded-524b-4556-b02c-75f70f7c0663-5dc71b23-beb0-4ef0-924d-8a71f8782b06.png

Today, I completed my URL shortener. For this, I did some experimenting with SvelteKit and Django (I realized later that I should have just used regular Svelte but oh well). It's nothing too complicated, just a simple sqlit3 file that keeps a record of all of the urls and sends that url back to the svelte application. I have the sveltekit and the django running on 2 different ports. GitHub: github.com/CrazeXD/URL-Shortener

Today, I finished the backend API for my URL shortener website. For the backend, I am using Python's Django as a REST Framework. I still need to complete the integration with the frontend, which I am developing in Svelte. This project is very experimental, since I have never worked with Node.js or any JS framework in the frontend, and instead of using Django's inbuilt template rendering system, I decided to integrate it with Svelte even though it isn't really necessary. github.com/CrazeXD/URL-Shortener

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/47c225f7-52c8-4271-aae7-3e3201195ae2-a42154f6-55a7-4c41-bbf6-f9297b0b4f4b.png

I am done with my first portfolio, made using Svelte. In this journey I learnt how to use svelte, it was my first time with it. For js framework I only tried react once earlier and that's it. I learned a lot in this project :). In the upcoming days I'll make it responsive for mobile devices and larger devices too. This is the GitHub repo:- github.com/AnkushRoy-code/Anksite And this is where it is hosted:- anksite.vercel.app Hope you like it :)

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/729e3ffc-7c41-4ccf-bce4-0ccde3aef05b-d5fe6867-5152-454f-87a4-983954aa5e62.png

https://scrapbook-into-the-redwoods.s3.us-east-1.amazonaws.com/c7e9f65d-d09b-4079-961c-2a904cf60339-779a8851-6f1e-4fc0-8fc7-429a868391c8.png

Created a Meme Generator Using Svelte Just a simple website with the goal to learn a new framework. iambodha.github.io/Meme-Generator

https://scrapbook-into-the-redwoods.s3.amazonaws.com/19082bfe-8ea5-4e58-b28c-ae3a4e287e41-image.png

#arcade I made a budget tracking web application/website with svelte. This was my first svelte project, so I apologize if its unoptimized. I initially started out this project using plan html, css, and js, and I quickly realized I need to use a framework to maintain my sanity. I was initially thinking of using react, but I wanted to give svete a try, because I haven’t used it before, and I heard it was a pretty user friendly framework. I also learned a decent bit of creating resources on Azure to host this application, here’s the link to it. finance.centralindia.cloudapp.azure.com Thank You!

https://scrapbook-into-the-redwoods.s3.amazonaws.com/8dd49014-0173-4dd2-85ee-b0d740100883-image_7-6-24_at_1.03___am.jpg

#arcade I made a budget tracking web application/website with svelte. This was my first svelte project, so I apologize if its unoptimized. I initially started out this project using plan html, css, and js, and I quickly realized I need to use a framework to maintain my sanity. I was initially thinking of using react, but I wanted to give svete a try, because I haven’t used it before, and I heard it was a pretty user friendly framework. I also learned a decent bit of creating resources on Azure to host this application, here’s the link to it. finance.centralindia.cloudapp.azure.com Thank You!

https://scrapbook-into-the-redwoods.s3.amazonaws.com/aa143efa-d37d-40aa-8750-31ea08f2a67d-image_7-6-24_at_1.03___am.jpg

Finally finished a MVP of my website redesign! Old: Python Flask + Firebase + Bootstrap New: Svelte + Tailwind + shadcn/ui Now it doesn't require a server (free hosting?), and I think Tailwind/shadcn looks a lot cleaner and cooler than stock bootstrap. GitHub: github.com/krishnans2006/website-shadcn

https://scrapbook-into-the-redwoods.s3.amazonaws.com/7ea58dab-1f03-409f-8c07-7bd411e0df5b-image.png

#arcade added back & forward buttons on my /auth route for Svelte URL shortener GitHub: github.com/intercepted16/zipyy

https://scrapbook-into-the-redwoods.s3.amazonaws.com/e4ea2f76-276f-479a-b808-53ca459e4aa2-image.png

I started working on a youtube-dl app using Svelte and Rust (tauri), as of now it can fetch youtube videos title from url.. My second rust project!

https://scrapbook-into-the-redwoods.s3.amazonaws.com/4ee2d819-76f9-4d38-823a-faac21014108-image.png

Today I’ve built the todo app in two new frameworks: • Svelte • Next (With prisma and drizzle) I’ve probably finished the ideas of new frameworks

https://scrapbook-into-the-redwoods.s3.amazonaws.com/fa1fe0b5-caac-4707-8b7d-c97c75452f30-img_9963.png

i created a basic image gallery using

:

https://scrapbook-into-the-redwoods.s3.amazonaws.com/b16e6178-4219-4426-966a-dde7552943f9-23-06-2024_-__13_57_11_3777.jpg

making a ring of vocabulary tool using svelte and firebase. this name is "ankage" from japanese "anki" (means remember) and "strage" firebase is a hobby plan so im sad to not able to ship for using by other people... github.com/shiki-01/ankage/commit/c7f470d60a72d643d732ba07edf07f97e46748eb

Glowsquid now has basic account management! This took a huge amount of effort since all the state is handled on the backend, which means I have a pretty interesting solution for state management: • Tauri/rust opens the Svelte app • Svelte listens for state_change events, and then emits a sync_ready event. Svelte internally stores a reactive state map of all state objects and their keys, which is used to identify them on both sides • Tauri then recieves the sync_ready event and creates and sends the state objects down to the frontend. The state objects themselves are smart, and whenever they're updated they send an event to the frontend saying they were updated with a new value • The end result: State being perfectly synced to the frontend 100% of the time

All of this is completely typesafe as well thanks to specta . I also had to update the internal copper Minecraft library to allow serialisation of the Minecraft profiles it gets