Ravi S. Iyer: Software Development

Last updated on 12th July 2025 I am trying to quickly get an idea of Playwright which seems to be a very useful automated testing tool for web apps. An interesting aspect about Playwright is the automated test code generator - part of  Playwright Inspector - that Playwright has (like a macro recorder but smarter). So for straightforward tests, one may be able to easily generate test code for various test cases and thus have a test suite without doing any direct coding oneself (and have ability to tweak that test code with direct coding for more intricate tests). Playwright is free and seems to be backed by Microsoft. I think it is open source but I have not checked that. What is Playwright? (🎭 Playwright introduction tutorial, features & demo), https://www.youtube.com/watch?v=wGr5rz8WGCE , around 12 mins., pub. Jun 2021. To skip install stuff jump to: https://youtu.be/wGr5rz8WGCE?t=236 . Covers generating test code using Playwright Inspector (Like macro recorder but smarter I...

Google Firebase Studio In 23 Minutes, https://www.youtube.com/watch?v=Rd6F5wHIysM , around 22 mins, published May 2025. It shows development of a single page web app using AI (some pokemon or something clone which I did not understand). The author uses vibe coding mostly without getting into code changes herself with one or two exceptions. The tech stack of the app includes NextJS, React and Firebase. The interesting feature of Firebase studio as compared to what I did when I developed the Timestamp Tracker using  ChatGPT and Gemini is that the former has a VSCode based editor integrated with Gemini. The app development did run into some issues which is similar to my experience with Timestamp Tracker development. At some point, the author changed the model to what seems to be a paid one. Firebase studio has an interesting feature of being able to modify the screen directly and ask Gemini to generate the code for it.  Firebase studio also provides an integrated publish (for we...

This post is a continuation of:  Notes on learning stage of developing my own React Native education app using Expo Framework - Part 1 . Main tutorial used for learning: Simon Grimm: Build Your Own MASTERCLASS clone in React Native, https://www.youtube.com/watch?v=fO3D8lNs10c , 4 hrs. 42 mins, Mar. 2025,  Possibly on 4th or 5th of July 2025 I had started viewing the above video perhaps in April 2025 but then felt I need to get some exposure to React Native and Expo. So I migrated an earlier Dave Gray tutorial CrudApp which IIRC used only React Native, to React Native and Expo. That work is covered in the above post and that was done from 18 Apr (2025) to around 21/22 Apr Key periods reflected in above post dates: Phase 1: 18 Apr (2025): Beginning tutorial but switching to Dave Gray app work mentioned above quite quickly. Probably just a day or so of this activity. Phase 2: 21/22 Apr to 25 Apr. This was followed by a break of around 3 weeks. Phase 3: 15 May to 24 May ---------...

I have deployed the  Blogger Posts Lister Web App covered in previous post on GitHub Pages. I noticed that even an addition of a Readme.md file to the GitHub repo's main branch triggered an unnecessary GitHub Pages deployment (with source branch setting as main). I wanted to have a manual control over when deployment will happen which was independent of commits I made to the main branch. In that context, I had an exchange with Gemini and tried out some approaches. This post captures key points from that interaction and work. One suggestion was: Work on a Separate Branch (like dev) and Merge Manually (with main which will trigger deploy). Given an option, I prefer not to mix the git branches for development facility with such side effects. Many times, I want to commit on main branch in local git repo and push to main branch on GitHub, as an incremental update approach. Being forced to do this on a dev branch simply because main branch push will result in a deploy was something...

Last updated on 4 Jul 2025 Quick Info Deployed site on GitHub Pages GitHub public repo This Blogger Posts Lister web app lists all post titles of any public Blogger blog using its URL or ID, and a user specified Google API Key. It is an HTML, CSS and JavaScript web app. Above screenshot pics show the app listing contents of this blog. [On PC desktop/laptop, to open pic in larger resolution (if available), right-click on pic followed by open link (NOT image) in new tab/window. In new tab/window you may have to click on pic to zoom in.] **Important:** The user specified API Key may be optionally remembered by storing it in user's browser local storage for convenience. The user is responsible for the key's security and usage quotas. The key needs access only to Blogger API and the key's 'Application restrictions' settings should permit access to blogs (websites) whose posts user wants to list. The details section covers why user has to specify API key. To list all post...

Given below are extracts from a recent chat with Gemini. The context is a Blogger page with Javascript code that makes Blogger v3.0 API calls which need a Google API key. I had introduced restrictions on the key like websites it can be used on and that it is enabled only for Blogger API. Me: While with above restritions the API key is less exposed to misuse, I am still quite uneasy about having the API key so easily accessible. In this context, I am curious whether if we convert this into a React project and use the API key as an environment variable, will that prevent the API key from getting exposed to the user? Gem:  You've hit upon a critical distinction in web development security! While using environment variables in a React project is a great practice for managing API keys during development and deployment, it generally does not prevent the API key from being exposed to the end-user's browser if the code runs entirely on the client-side. Let's break this down: 1. En...

Last updated on 8 Jul 2025 Summary Using DML as extended monitor to DPC with Wireless Display My Windows 10 Dell Mini Laptop (DML) can be used as an extended monitor to my Windows 11 Desktop PC (DPC) using Wireless Display. DML can use either its 11.6 in. internal monitor or my 15.4 in external monitor using HDMI cable, as an extended monitor to DPC. Wireless Display optional feature has been set up on both DPC and DML. DPC and DML can be connected using Mobile Hotspot of Samsung phone. On DML, Settings -> Project to this PC -> Launch connect app. On DPC Win + K -> Choose DML. Now DML will act as extended monitor to DPC. Performance seems to be good enough even for Youtube video streaming on DML extended monitor. A performance improvement possibilties is:  Better WiFi adapters at least on DPC if not both DPC and DML. Wired LAN setup using old Netgear router did not help as that wired network was not used for Wireless Display. Other options for extended monitor USB 3.0 to H...