|
| 1 | +--- |
| 2 | +title: "GSoC '25 Week 3 Update by Elwin Li" |
| 3 | +excerpt: "Weekly progress report for JSEditor updates" |
| 4 | +category: "DEVELOPER NEWS" |
| 5 | +date: "2025-06-21" |
| 6 | +slug: "2025-06-21-gsoc-25-Elwin-Li-week03" |
| 7 | +author: "@/constants/MarkdownFiles/authors/elwin-li.md" |
| 8 | +tags: "gsoc25,sugarlabs,week3,javaScript editor" |
| 9 | +image: "assets/Images/GSOC.png" |
| 10 | +--- |
| 11 | + |
| 12 | +<!-- markdownlint-disable --> |
| 13 | + |
| 14 | +# Week 3 Progress Report by Elwin Li |
| 15 | + |
| 16 | +**Project:** [Advanced JavaScript Editor with MusicBlocks Interactions](https://github.com/sugarlabs/musicblocks/tree/config_driven_conversion/elwin) |
| 17 | +**Mentors:** [Walter Bender](https://github.com/walterbender), [Anindya Kundu](https://github.com/meganindya), [Devin Ulibarri](https://github.com/pikurasa) |
| 18 | + |
| 19 | +**Reporting Period:** 2025-06-14 - 2025-06-21 |
| 20 | + |
| 21 | +--- |
| 22 | + |
| 23 | +## Goals for This Week |
| 24 | + |
| 25 | +- **Goal:** Start on debugger for musicblocks and JS editor. |
| 26 | + |
| 27 | +--- |
| 28 | + |
| 29 | +## This Week’s Achievements |
| 30 | + |
| 31 | +**Made Working Debugger** |
| 32 | + |
| 33 | +This week, I made a working debugger tool for Music Blocks JS editor. I added a button in the JS editor that is a toggle for the debug mode. On debug mode, users are able to add a breakpoint in any line of the code using buttons on the side of the line numbers. When the user then converts the code back to blocks, there are new debugger statement blocks that shows up. |
| 34 | + |
| 35 | +Then, when the user runs their code, execution will be paused at every debugger statement, and a status block with all the user defined and musicblocks defined variables up till that point will appear, showing the user those values, making it easy to debug. The user can then choose which variables they want to keep, and continue execution. This tool works perfectly with the run slowly and run step by step buttons, in order for more careful debugging. |
| 36 | + |
| 37 | +Also, I made block highlights contrast much more from original block colors, for easier tracking of which block is being executed. |
| 38 | + |
| 39 | +[youtube: jEJuXpyQbS8] |
| 40 | + |
| 41 | +--- |
| 42 | + |
| 43 | +## Challenges & How I Overcame Them |
| 44 | + |
| 45 | +- **Challenge:** Status blocks default to a set macro of variables |
| 46 | + |
| 47 | + **Solution:** Was able to go through the blocklist and single out needed variables to put in the status block instead |
| 48 | + |
| 49 | +--- |
| 50 | + |
| 51 | +## Key Learnings |
| 52 | + |
| 53 | +- Deepened understanding of how music blocks execution works |
| 54 | +- Improved skills in **debugging**, **code design**, and **collaboration workflows**. |
| 55 | + |
| 56 | +--- |
| 57 | + |
| 58 | +## Next Week’s Roadmap |
| 59 | + |
| 60 | +- Finish debugger project (fix bugs) |
| 61 | +- Add syntax highlighting to JSeditor code |
| 62 | + |
| 63 | +--- |
| 64 | + |
| 65 | +## Acknowledgments |
| 66 | + |
| 67 | +Thank you to my mentors, the Sugar Labs community, and fellow GSoC contributors for ongoing support. |
| 68 | + |
| 69 | +--- |
0 commit comments