Xavier Shilo Saputra

This is a relatively short and minor update compared to the previous updates or ships. However, with the Flavortown program nearing its end. I wanted to ship this project one last time and get long-term feedback or suggestions for this project.

In this update, I fixed some bugs to make the site more mobile-friendly, and I also enabled single and double quotes in the terminal to mimic real git commands more closely. (Shoutout to a Hack Clubber who recommended this fix in the last ship feedback!) In the prior version, only the command git commit -m "Recovered fragment" worked, but now both git commit -m "Recovered fragment" and git commit -m 'Recovered fragment' worked nicely. However, non-matching quotes won’t work (i.e., git commit -m "Recovered fragment' or git commit -m 'Recovered fragment")

Additionally, I also followed a suggestion in the previous ship and fixed the devlogs formatting to remove the “single text box” impression and make the whole text easier to read and comprehend. I am not really sure of what to add in the next updates since this project is already so well-developed and complete. So please share your suggestions or feedback for this project if you have any so I can further develop and improve this project. Thankyou <3

In this update, I further improved the mobile view by adding a run button beside the terminal input line to fix the bug where the submit button wasn’t appearing in mobile view. I also decided to remove the animation on/off button as there is already a similar button for the typewriter effect.

Another bug I fixed is the drag and drop question type. Previously, the drag and drop questions were less intuitive with no position indicator when the user dragged the chips and hovered over a certain position. With the addition of the new indicator, users can see where the chips will snap into place when they release. Moreover, the chips are now clickable, so clicking them will add them to the last position and clicking them from the answer box will return them back to the container area.

For the technicalities of this project, I added a new file named ARCHITECTURE.md in the GitHub repository inside the docs/ folder. You can read that documentation file to get a general idea of how the entire system works without needing to read all the code. Please note that I used AI tools and grammar correction tools to help fix my grammar and sentences since my poor grammar can make it hard for people to understand my writing. However, I wrote the original file manually and rechecked all the updated text.

First of all, I’d like to thank everyone for voting for my project and giving amazing feedback on the previous ships. Those feedback helped me find some edge case bugs, suggested new features, and gave me actual feedback into the learning experience. When I read the feedback from the last ship, a major concern was that the lessons were hard to follow for beginners even if the method is already engaging and interesting. To verify this, I tested the project with some of my firends (actual beginners) and they indeed had a hard time following the lessons. To rectify the problem, I’ve now added lessons before the review questions so users actually get the materials before being given a question. However, a side effect of this system is that it makes the review questions feel a bit too easy and less challenging. I overcame that by adding some test questions every once in a while with higher shard rewards and more tricky, thought-provoking questions to keep the challenge alive.

Another key update in this version is the improved mobile view to keep the site usable (at least for now). I’ll try to revamp it into a neat and seamless mobile-first app in the future so using it on a phone is more natural. I also finally fixed a ridiculously stubborn bug where the prologue overlay appears and blocks the question page on page refresh from the question page, making everything get stuck. For context, this was a very, very hard bug to fix (it took me around 3 days to do trial and error before finally fixing it) and I’m really proud of myself! I also fixed another edge case bug where users could click the hint button multiple times and get their shards deducted several times even when the hint was already shown. I blocked the hint button after the first click to fix this.

Another bug I fixed in this update is the map overlay and map sidebar. Previously, the map overlay only showed a list of all the levels and highlighted the completed levels, but now it works like a proper level shifter that allows people freely move back and forth as long as the level is unlocked. Unlocked levels are defined as the highest level completed plus one. We add one to the highest level to ensure that when people complete a level, they don’t need to repeat that same level just to continue their progress. This fix is also shown in the map sidebar in the desktop view.

This is my first update in a while. In this update, I have massively refactored the code and project structure of GitGud. For context, GitGud was initially intended to help people learn Git in an interactive way (in celebration of Git’s birthday). However, it turned out much better than I expected, so I decided to transform it into a fully customizable platform to help people learn any topic.

To make the whole project more maintainable/scalable, I refactored the project to use engine.js and config.js files instead of the prior script.js and chapters.js. The task splitting between those two files remains largely similar; the engine.js file handles the main computing and logic of the game, while the config.js file handles the content and learning materials.

The key difference is in the config.js file because it now stores styling data, such as CSS variables and colour palettes, in addition to stories and questions. This means anyone can use the project as a learning platform template by only modifying the config.js file to create their own questions and stories. (No need to modify the base JS logic or HTML document besides some minor changes)

Another change I made in this update is the improved onboarding tour highlight to dynamically adapt to the highlighted UI element (the previous version was not neat and had inconsistent border-radius). For the next update, I plan to improve some of the UX and UI to make the flow more seamless and more customizable (e.g., advanced controls like typing animation speed, and on/off in the settings panel). I’m also still continuously doing bug fixes to make the site more reliable.

In this update, I improved the spotlight effect for the onboarding process. It now has a highlight and shadow cutout to make the visuals look much better. I also fixed some bugs with the typewriter animation. Before this, the text got scrambled often because the recursive function was called incorrectly, but it is fixed now.

I also patched a bug where the overlay stayed on the screen and got stuck when the page was refreshed. Along with those fixes I did minor UI changes like adjusting the spacing and alignment of buttons and elements.

There is a new settings option where you can restart the lesson or the site onboarding. You can also delete all your current progress and restart from the basics by using the reset option and clicking the confirm button.

Right now the game only supports single player and does not have online data storage. This means all data and settings are saved in local storage. It is persistent so your data will not be lost when you close the browser tab. For the next update I will try to implement multiplayer support and add more learning paths. Based on feedback from the last ship, I also plan to add a direct language option. This will keep the same story but use simpler language to help people follow the narrative without needing advanced reading skills.

In this update, I added some more questions to help people master Git, and also added platform onboarding to help beginners use this website. In addition to extended questions and onboarding, I also fixed some bugs, such as the icon rendering errors in the website. In the next update, I plan to improve the onboarding visuals to create a better spotlight effect of the onboarding process.

In this update, I added more questions and expanded the story to include more topics and learning materials. I am also experimenting with different question types to keep the quiz fun and interactive. You will find some non-typical styles like matching, sorting or sequencing, and drag and drop alongside the usual (common question types) multiple choice, fill in the blanks, and terminal commands.

In the next update, I plan to add more visualizations of the process so people get a better understanding of how branches and Git operations actually work. I am also planning a multiplayer mode with a leaderboard. Though I still need to do some research and learn how to implement that part properly. Finally, I want to add a GitHub learning path as a related complement to the Git material.

This is the first devlog of GitGud. GitGud is a simple, story-based learning platform that teaches people how to use git in a fun and interactive way. I made this project to celebrate the 21st birthday of Git and to encourage more people to use it. This website is built using HTML, CSS, and JS, with questions embedded in the middle of the story. There are also explanations and examples after the user has submitted their answers to provide detailed, accurate information on the use of git. Moreover, there is also a field notes section on the side to help people with past topics as we progress through the story (to ensure players don’t forget basic commands in advanced levels). You can use this website by clicking the demo button directly.

In this update, I’ve added more themes (System, Light, Dark, Sepia) for the site. The System mode will automatically follow your browser/device theme settings (light or dark), while Sepia gives a yellowish, calm, and moody theme across your workspace. I’ve also edited the documentation overlay to maintain a constant size across different tabs for better UX. In addition to the documentation on the main site, you can now find the complete documentation on the GitHub repository (https://github.com/xaviershilosaputra/SnapTex/blob/main/docs/documentation.md).

All contributions are welcome! This project is licensed under the MIT license, so you are free to modify, remix, or build upon this project. In terms of accessibility, all overlays in this site can be closed by clicking the area outside the panel, using the close button, or using the Esc key.

I initially experienced some difficulty in setting up React and Vite since it’s my first time using those tools, and I didn’t have any background with KaTeX or advanced LaTeX. However, I managed to overcome those issues by watching tutorial videos and reading documentation, and I learned a lot about LaTeX along the way. (It was not that easy!) But that actually shows that this project solves a real problem and makes me motivated to develop this project so that LaTeX editing becomes easy for everyone (as easy as using Google Docs or Scratch/Pictoblox).

This is my first devlog of SnapTex! SnapTex is a web-based LaTeX editor designed to be snappy and easy to use by using prebuilt snippets. This LaTeX editor tool is built with React 18 and Vite, as well as KaTeX for the LaTeX engine. One of the core features of this editor is the toolbox, or sidebar, that allows people to easily create a math expression using LaTeX and tab autocomplete, just like the one in VS Code. You can type shorthands like \fr or \al and hit Tab to expand them instantly.

I’ve also included a quick-insert toolbar for common symbols and a searchable “All functions” grid to help you find any shorthand you need. It also has some quality-of-life features, such as autosave every 2 seconds, manual version history snapshots, and a live preview that renders everything in real time. There is even a “Recently used” section so you never have to hunt for the same symbol twice. Everything is saved in LocalStorage, so no account, server, or setup is needed beyond cloning the repo. It all survives a page refresh. You can also export your work as a PDF, SVG, or a .tex file whenever you’re done.

For future updates, I’ll add more snippets covering physics and chemistry and support for additional text formatting (just like a combination of Google Docs and Overleaf). I’m also planning to improve mobile support and I’m even considering adding drag-and-drop “block coding” style writing to help beginners use LaTeX.

Completed a major update! I finally got the basic C++ terminal tracker app and successfully tracked flights and weather using the “search ” and “weather ” commands. It also has other basic commands & features similar to the web-based CLI app, such as opening files, history, tab autocomplete, and arrow-key history. You can download the latest release of the CLI app using the download button on the demo website, or go directly to https://github.com/xaviershilosaputra/OpenAero/releases. (You will need a C++ compiler installed and set up on your device before being able to run the application)

I also refactored the JS of the web-based tracker to a much more efficient and maintainable system using cache.js to remove redundancies and messy duplicates of assets and logical systems between the GUI and CLI pages. I also implemented a cache system to store tracking data from the same tracking session to remove redundant API calls and memory usage. This system results in more maintainable code and reduced bundle size & memory overhead. In the next update, I plan to add more tracking features (or objects) and integration with other services such as maps or other navigation tools to help people travel.

In this update, I implemented some improvements based on my last ship feedback and added the weather and METAR feature. On the last ship, I received feedback regarding a broken link in the README.md file and updated the light theme CLI to fix the “blinding” issue.

I also added the weather and METAR feature, and it shouldn’t display N/A unless the data is really unavailable. Please note that the METAR report is only for hobby purposes and should never be relied on as the only source of information for navigation or high-stakes tasks. The METAR data can also be fetched from the terminal interface by using the command weather <ICAO/IATA> (e.g., weather WSSS/SIN). I’m really happy with how the weather/METAR data feature turns out, and I’m considering to make a real CLI app using C++ after this.

In this update, I finally got the terminal to work as intended and improved the overall UI design of the CLI. It looks like a real terminal now! I also added a bunch of new commands like cd, ls, cat, sudo, ping, whoami, history, and neofetch. This updated terminal also has real CLI features like autocomplete, arrowkey command history, and really cool typing animations. As for the technical side of things, most changes occur in the JS, with additional commands and enhanced security against XSS. Overall, I’m really satisfied with how the terminal mode turns out, and I plan to work on the METAR information after this.

Terminal View (CLI) is almost done! I have successfully implemented all the basic terminal commands such as help, search , guide , theme , clear, and exit. However, I still found the current UI ugly and messy. To make it look like a real terminal interface, I plan to change the font styles and color, along with background color adjustment, to improve the terminal interface UI. I also plan to add more commands for advanced searching and detailed information gathering.

Command Description:
search - Track flight (e.g. SQ322)
guide - Learn aviation data (topics: metar, flight, status (more will be added in the future))
theme - Change theme (dark/light)
clear - Clear terminal
exit - Return to main interface
help - Show this message

In the next update, I plan to improve the terminal UI by refactoring the current style.

This is my first day of making OpenAero, an all-in-one flight tracker site with multiple exciting tools for aviation enthusiasts and avgeeks. (Yes, this project is built by an Avgeek) This project uses HTML, Tailwind CSS, and JavaScript to display information fetched from free public APIs such as aviationstack. So far, I’ve created the base homepage and completed basic features such as theme selection toggle, input form for entering flight numbers, and links to external sites such as Flightradar24, Planespotters.net, LiveATC, FlightAware, and SkyVector. After this, I plan to create the terminal or CLI site for viewing flight information in a “Hacker-like” UI. (And of course some other behind the scenes stuff like SEO or mobile support)