Xavier Shilo Saputra

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)