4h 8m 28s logged

Devlog 2: What Makes a Terminal a Terminal?

After a few hours of work, I was able to rewrite how commands work for TermTab. Before, commands were hardcoded into the execute() method in the Terminal class, which itself was integrated as part of the Terminal component. Now, the Terminal class is its own svelte.ts file and commands are fetched dynamically using Vite’s import.meta.glob().

I also added/modified a few commands including: time, info, and help. help now uses a dynamic fetching system, with each command managing its own help menu with command parameters as a string[].

As before, if you have any suggestions, feel free to comment!

Open comments for this post

@bhlcusd on TermTab · 4 days ago

3h 46m 21s logged

Devlog 1: Making Something Familiar

Just began on my second project for Stardance. I started very late, but I want to complete this and the basic OS missions before Stardance is over.

Currently, I created a class in TypeScript to manage input and output and implemented a few programs. The input is directly taken from DOM listeners instead of an element because some functionality, like ctrl+c wouldn’t work with basic input. Besides, the custom code wasn’t a lot, with most of it dedicated to parse() which uses a simple switch statement.

Currently, there isn’t much in the way of interactivity, but I plan on implementing a few programs:

weather (fetches current weather based on IP address or inputed zip code/city)
calc (currently similar to eval(), but likely a custom dual stack calculator)
snake (what can I even say?)

If you have another ideas for programs, feel free to share/comment.

Ship

@bhlcusd on Brandon's Site · 6 days ago

Hey there! This is my spin on the personal site. This project took much longer than expected, with much of that time dedicated on learning the ropes of using Svelte, GitHub Pages, and a little bit of Bun. Overall, I enjoyed this project since it’s actually got me to publish my work to a larger audience. Anyways here’s the main gist of the site:

Quick Start Guide

Explore the website: Try It Now!

Features

Simple, Yet Modern Design - Rounded borders and dark mode support
About Me - Concise information about the developer
Contacts - Easy-to-see icons to the developer’s social media pages
Flexible - Designed to be scalable onto any form factor

Technicals

Built on Svelte - Chosen for its balance between bog-standard HTML & CSS and its compatibility with more complex build systems (like Bun). Even though TypeScript is not used in this project, using Svelte gives more flexibility for the developer to extend the website later in the future.
TailwindCSS - Instead of writing CSS classes by hand, TailwindCSS was used to pre-define the generic CSS classes needed for this relatively simple project
Mobile-First Design - Throughout the project, mobile-first design was implemented (i.e. make the website scale outwards to larger screens); experimented with Flexbox and Grid layouts to scale properly without too much wasted space
Customized GitHub Actions Runner - Due to the dynamic nature of Svelte, the default github-pages runner does not interface well with Svelte. Instead, the project bundles a new deploy.yml file that automatically installs all dependencies, builds the project, and loads the static files for GitHub Pages.

Acknowledgements

Svelte & SvelteKit Documentation - Assisted in the setup process and converting it into a static webpage using adapter-static.
TailwindCSS Documentation - Assisted in finding corresponding CSS tags

1 devlog
5h

Try project → See source code →

Open comments for this post

@bhlcusd on Brandon's Site · 6 days ago

5h 24m 40s logged

Devlog 1: My Personal Website Is Now Complete!

For what seems like years, I finally got my foot in the door with web development. Although this isn’t my first project concerning web development, I think this is my most refined website yet!

Quick breakdown:

I used Svelte & SvelteKit to provide scaffolding if I want to extend this project in the future; gives me access to dependencies using Bun
TailwindCSS was used for all styles; I found it easier to use than coding my own styles (CSS really sucks sometimes…)
The website can dynamically scale with the viewport due to TailwindCSS dynamic tags (no need for other views for mobile/tablets)
Modern-ish design; I wanted to have more kinetic energy but I have other things to do (and my animation skills in Blender isn’t the best)
Custom GitHub Actions runner to build & upload the Svelte project as static files

For my first Hack Club project, I’m quite proud!