Umitomo

Posted on Jun 26 • Edited on Jun 27

Weekly Dev Log 2026-W11

Umitomo · 2026-06-26T21:04:23Z

🗓️ This Week While reviewing the code for the minimum-feature iOS app that Codex implemented for ToneDrill , I started coming up with many ideas for small improvements 💡. When I first started building the iOS app, I thought it would be enough to recreate the web version I had casually built before. However, once the app started taking shape, I naturally began wanting to add more features and improve the design 🌋. At the same time, this is my first time building an iOS app , so I often do not know the best way to move forward . Human curiosity and ambition are interesting 😅. Because of that, I discussed my ideas with ChatGPT, separated them into short-term tasks and medium- to long-term ideas , and organized a realistic development plan in Notion🗃️. For now, I decided to focus on completing the minimum-feature version implemented by Codex . I changed the app layout from the default portrait orientation to landscape orientation and organized several UI ideas🦾. I reviewed the program that Codex implemented last week based on my Figma design. I learned more about React Router v7 features and several CSS functions . Worked on the AI System Reconnaissance room from the AI Security Learning Path on TryHackMe this week 🤖. 📱 iOS (SwiftUI) Organized feature ideas I would like to add to ToneDrill in Notion and separated them into short-term tasks and medium- to long-term tasks. Changed the app layout from the default portrait-oriented design to a landscape-oriented design. Planned the next UI improvement for the app: replacing horizontal scrolling with left and right buttons to switch the visible fret range. Explored a design direction for a SwiftUI-drawn guitar fretboard background before using a real image background. Worked with ChatGPT to define the direction for a fretboard-style UI in SwiftUI, organized the required display elements, and prepared them as a specification for Codex. Prepared a concrete Codex prompt for generating a Figma draft based on the design task document and reference image. 🌐 Web Development Posted my weekly dev log on Dev.to 📝. Reviewed the structure of the portfolio home page created with React Router v7. Checked how root.tsx , routes.ts , and home.tsx work together to render the top page. Studied how the loader function passes page data to the home component. Looked through home-page-layout.tsx and checked how the main area and profile sidebar are arranged. Reviewed app.css to understand the layout, responsive design, and light/dark color settings. Looked up grid-template-columns , minmax() , clamp() , and @media using MDN and ChatGPT. 🔐 Security (TryHackMe) Worked on the AI System Reconnaissance room, part of the AI Security Learning Path on TryHackMe. 💡 Key Takeaways 📱 SwiftUI Learning Learned how to configure an iOS app to support landscape orientation. Learned how to adjust the UI layout so it fits neatly on the screen in landscape mode. Learned that a SwiftUI-drawn fretboard background is a safer first step than placing buttons directly on top of a real guitar image. Learned that building the fretboard UI with separate background and button layers will make it easier to replace the background with an image later. Learned that Codex should first explain its planned Figma structure before actually creating or modifying the design. Learned that giving Codex a task document, a reference image, and clear constraints helps reduce unexpected changes. 🌐 Web Development Learning Learned that root.tsx provides the base HTML layout, and child routes are rendered through <Outlet /> . Learned that loader prepares data before the page component is rendered. Learned that home-page-layout.tsx mainly controls the page structure, while app.css controls most of the visual design. Learned how CSS Grid is used to create a two-column layout with a flexible main area and a fixed-width sidebar. Learned that grid-template-columns defines the width rules for each grid column. Learned that minmax() sets the minimum and maximum size of a grid column. Learned that clamp() lets a value change flexibly within a minimum and maximum range. Learned that @media rules can be used for different CSS conditions. In this project, they are used to change the layout based on the screen width. Learned how media queries change the layout from three-column cards to two columns, and then to one column on smaller screens. Learned how CSS variables are used to manage colors for light mode, dark mode, and portfolio-specific design tokens. 🔐 TryHackMe Learning AI System Reconnaissance Task 2: The AI Infrastructure Stack I learned that AI infrastructure is not just a single AI model or server, but a collection of specialized services that support the whole machine learning lifecycle. I understood that AI systems often expose unfamiliar ports and APIs, so traditional network scanning alone may miss important AI-related services. I learned that services such as model serving endpoints, experiment tracking tools, vector databases, model registries, Jupyter notebooks, MinIO, and Prometheus can all become important reconnaissance targets. Although there were many new terms and I could not fully understand every single one, I was able to understand the main purpose of this task: building a mental map of AI infrastructure components and their common ports. Through the exercise, I learned how to compare AI-specific ports with traditional service ports and identify which hosts are likely running AI infrastructure. 🚀 Next Week Design the UI structure for the minimum-feature version of ToneDrill in Figma. Finish reviewing the program that Codex implemented last week based on my Figma design and deepen my understanding of how the code works. Continue working on the AI Security Learning Path. 🌈 Goals for This Year 📱 iOS (SwiftUI) Build a solid foundation in SwiftUI and create at least one iOS app. 🌐 Web Development Continue posting learning logs on Dev.to and eventually turn them into a portfolio site using React Router v7. 🔐 Security (TryHackMe) Continue learning cybersecurity on TryHackMe.

#beginners #devjournal #security #swift

Managing feature creep with AI and Notion

🗓️ This Week

While reviewing the code for the minimum-feature iOS app that Codex implemented for ToneDrill, I started coming up with many ideas for small improvements💡.
When I first started building the iOS app, I thought it would be enough to recreate the web version I had casually built before. However, once the app started taking shape, I naturally began wanting to add more features and improve the design🌋. At the same time, this is my first time building an iOS app, so I often do not know the best way to move forward. Human curiosity and ambition are interesting 😅.
Because of that, I discussed my ideas with ChatGPT, separated them into short-term tasks and medium- to long-term ideas, and organized a realistic development plan in Notion🗃️.
For now, I decided to focus on completing the minimum-feature version implemented by Codex. I changed the app layout from the default portrait orientation to landscape orientation and organized several UI ideas🦾.
I reviewed the program that Codex implemented last week based on my Figma design.
I learned more about React Router v7 features and several CSS functions.
Worked on the AI System Reconnaissance room from the AI Security Learning Path on TryHackMe this week 🤖.

📱 iOS (SwiftUI)

Organized feature ideas I would like to add to ToneDrill in Notion and separated them into short-term tasks and medium- to long-term tasks.
Changed the app layout from the default portrait-oriented design to a landscape-oriented design.
Planned the next UI improvement for the app: replacing horizontal scrolling with left and right buttons to switch the visible fret range.
Explored a design direction for a SwiftUI-drawn guitar fretboard background before using a real image background.
Worked with ChatGPT to define the direction for a fretboard-style UI in SwiftUI, organized the required display elements, and prepared them as a specification for Codex.
Prepared a concrete Codex prompt for generating a Figma draft based on the design task document and reference image.

🌐 Web Development

Posted my weekly dev log on Dev.to 📝.
Reviewed the structure of the portfolio home page created with React Router v7.
Checked how root.tsx, routes.ts, and home.tsx work together to render the top page.
Studied how the loader function passes page data to the home component.
Looked through home-page-layout.tsx and checked how the main area and profile sidebar are arranged.
Reviewed app.css to understand the layout, responsive design, and light/dark color settings.
Looked up grid-template-columns, minmax(), clamp(), and @media using MDN and ChatGPT.

🔐 Security (TryHackMe)

Worked on the AI System Reconnaissance room, part of the AI Security Learning Path on TryHackMe.

💡 Key Takeaways

📱 SwiftUI Learning

Learned how to configure an iOS app to support landscape orientation.
Learned how to adjust the UI layout so it fits neatly on the screen in landscape mode.
Learned that a SwiftUI-drawn fretboard background is a safer first step than placing buttons directly on top of a real guitar image.
Learned that building the fretboard UI with separate background and button layers will make it easier to replace the background with an image later.
Learned that Codex should first explain its planned Figma structure before actually creating or modifying the design.
Learned that giving Codex a task document, a reference image, and clear constraints helps reduce unexpected changes.

🌐 Web Development Learning

Learned that root.tsx provides the base HTML layout, and child routes are rendered through <Outlet />.
Learned that loader prepares data before the page component is rendered.
Learned that home-page-layout.tsx mainly controls the page structure, while app.css controls most of the visual design.
Learned how CSS Grid is used to create a two-column layout with a flexible main area and a fixed-width sidebar.
Learned that grid-template-columns defines the width rules for each grid column.
Learned that minmax() sets the minimum and maximum size of a grid column.
Learned that clamp() lets a value change flexibly within a minimum and maximum range.
Learned that @media rules can be used for different CSS conditions. In this project, they are used to change the layout based on the screen width.
Learned how media queries change the layout from three-column cards to two columns, and then to one column on smaller screens.
Learned how CSS variables are used to manage colors for light mode, dark mode, and portfolio-specific design tokens.

🔐 TryHackMe Learning

AI System Reconnaissance

Task 2: The AI Infrastructure Stack

I learned that AI infrastructure is not just a single AI model or server, but a collection of specialized services that support the whole machine learning lifecycle.
I understood that AI systems often expose unfamiliar ports and APIs, so traditional network scanning alone may miss important AI-related services.
I learned that services such as model serving endpoints, experiment tracking tools, vector databases, model registries, Jupyter notebooks, MinIO, and Prometheus can all become important reconnaissance targets.
Although there were many new terms and I could not fully understand every single one, I was able to understand the main purpose of this task: building a mental map of AI infrastructure components and their common ports.
Through the exercise, I learned how to compare AI-specific ports with traditional service ports and identify which hosts are likely running AI infrastructure.

🚀 Next Week

Design the UI structure for the minimum-feature version of ToneDrill in Figma.
Finish reviewing the program that Codex implemented last week based on my Figma design and deepen my understanding of how the code works.
Continue working on the AI Security Learning Path.

🌈 Goals for This Year

📱 iOS (SwiftUI)

Build a solid foundation in SwiftUI and create at least one iOS app.

🌐 Web Development

Continue posting learning logs on Dev.to and eventually turn them into a portfolio site using React Router v7.

🔐 Security (TryHackMe)

Continue learning cybersecurity on TryHackMe.

Top comments (5)

FrancisTRᴅᴇᴠ (っ◔◡◔)っ • Jun 26 • Edited

Hey Umitomo! Great work so far and glad you are keeping it consistent.

I would love to see more posts about what you did in detail. For example, a whole post about cybersecurity that you learned recently in detail and your thoughts about it. It would be nice to see diversity! I notice you also mention that in your weekly logs, but it would be nice to see in a formal article if that make sense.

Again, nice work so far :D

Umitomo • Jun 27

Thanks for your thoughtful comment, Francis😁!

I’m really glad you noticed that I’ve been keeping this up consistently. Your reactions, like hearts and unicorns, also really motivate me to keep posting, so I truly appreciate them✨

You’re right — in my weekly logs, I usually only touch on what I learned briefly. I’d like to try writing a more detailed article focused on one specific topic, especially as a way to organize my understanding and share my own thoughts more clearly.

Thanks again for the great suggestion!

𝑻𝒉𝒆 𝑳𝒂𝒛𝒚 𝑮𝒊𝒓𝒍 • Jun 27

Really enjoyed this ❤️ great work Umitomo!!!

Umitomo • Jun 27

Thank you so much, 𝕋𝕙𝕖 𝕃𝕒𝕫𝕪 𝔾𝕚𝕣𝕝😁!

I’m really happy to hear that, and thank you for the ❤️ reaction too 😊

If my honest learning journey can have a positive impact on someone in some small way, that would make me really happy ✨

VoltageGPU • Jun 27

Interesting mix of iOS and web dev this week! I'm curious how you're handling secure data flows on mobile — have you considered using WebAssembly modules for sensitive logic, maybe with some SGX-like isolation? On the GPU side, I've seen similar patterns where VoltageGPU helps keep ML inference private, but that's a different stack.