Ravi S. Iyer: Software Development

Last updated on 29 Apr. 2024 In  Blogger Feed To HTML Book App  (BFTB), the updated key CSS code (as of 28 Apr. 2024) in blogbook page to minimize appearance of horizontal scrollbar in blogbook window is as follows (blogbook is the class used by body element; body element has one main element and two script elements; main-book is the class used by the main element; blogbook page source code ):       .blogbook {         padding-left: 20px;         padding-right: 20px;         display: flex;         align-items: center;         word-break: break-word;         word-wrap: break-word;       } ...       .main-book {         max-width: min(100%, 1200px);         margin: auto;       }       .main-book img {         max-width: 100%;       }       .main-book a {         margin-left: 0 !important;         margin-right: 0 !important;       }       .main-book pre {         overflow-x: auto;         white-space: pre-wrap;         word-wrap: break-word;       }       .main-book span {         white-s

This post currently simply captures some notes I have made on this issue and one solution for it. These notes are not organized. Time permitting I will try to improve organization of this post. For images with 640px width specification in a blog post, in  Blogger Feed To HTML Book App  (BFTB) when blogbook page CSS has a 'max-width: 100%' declaration for img elements, the blogbook page shows a horizontal scrollbar at window width less than around 700 px. If the blogbook page CSS declaration for img elements is changed to 'max-width: 90%', the horizontal scrollbar appears at only below around 160px width! Ideally the app. should not show horizontal scrollbar at 360px and above as then the app. will display in most mobile portrait mode screens without horizontal scrollbar. Earlier I did not have time to investigate why exactly the above was happening, and so was going with 'max-width: 90%' in the BFTB app. Recently I spent some time to investigate the issue and th

Last updated on 26 Apr. 2024 26 Apr. 2024 Update I think I now understand when such errors could happen. window.opener may be non-null but not the index page! I am not sure of the exact conditions when that can happen. But I think it can happen. I did some tests on localhost and I think I was able to recreate the same error but do not have the clear sequence of my actions. If window.opener is not null and not the index page then there may not be a updateBlogbookPage() function in it and so this error would happen. I am testing out various possibilities using a test project. I think the solution lies in naming the index page window and then checking whether the window.opener.name is the name of the index page window before invoking updateBlogbookPage() function. Error conditions and associated key log statements Background: https://developer.mozilla.org/en-US/docs/Web/API/Window/open states "If the browser successfully opens the new browsing context, a WindowProxy object is return

Last updated on 26 Apr. 2024 Quick-Info : To show only cur-dir in a particular VSCode Terminal: Run following command in terminal: Function Prompt { "$( ( get-item $pwd).Name )> " } In Powershell to retrieve function commands history, use: func[F8] ... F8 can be pressed multiple times to go further back in commands history ------- Sometimes my directory path for a VSCode project is very long and so when VSCode Terminal shows the whole path as part of its prompt, it is a distraction and tends to come in the way of viewing the terminal window contents. The notes below capture my efforts to solve the issue. So far, it is not fully successful.  Ref: Hiding the full file path in VSCode Terminal, https://anjikeesari.com/articles/hide-full-path/ But following above procedure to edit $Profile resulted in this error in VSCode every time I opened a Terminal window: . : File C:\Users\Ravi-user\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1 cannot be loaded https:/go.mic

Last updated on 27 April 2024 Quick-Info display:flex declaration followed by justify-content:center declaration applied to body element of blogbook through CSS class blogbook, is the cause of left side cut-off/clipping issue. Solution is to drop justify-content:center declaration in CSS class blogbook and apply auto margins (margin: auto declaration) to the item inside flex which is the main element with associated CSS class main-book. -------------------------------------- While the Blogger Blog Feed to HTML book (BFTB) App now prevents horizontal scroll for window width less than 360px, due to images (by setting max-width to 90%), pre elements (using specific CSS for that) or long words (similarly using specific CSS), every once in a while I come across a blog book case where some HTML in it results in horizontal scrollbar appearing and sometimes a portion of the window on left side getting cut-off or clipped such that the scrollbar cannot bring it into view. The latest case is a p

Last updated on 1 May 2024 Today I tripped up on my standard routine ( as captured in this post of mine ) of creating a local git repository, followed by creating a public repository on Github and then pushing contents of local git repo to remote Github repo.  The trip-up started with me opting to choose a license file in Github as I was creating a new public repo there. That resulted in Github doing an initial commit to the repo with the license file. But now I was not shown the git commands to  “…or push an existing repository from the command line” on Github! I could not locate where these commands could be seen on Github. 24 Apr. 2024 Update: This post of mine lists the git commands to  “…or push an existing repository from the command line” on Github that I had used for one project. These commands were: git remote add origin https://github.com/ravisiyer/react_deploy_gh.git git branch -M main git push -u origin main I think the 2nd command simply renames the local git branch to ma

Recently I faced a horizontal scrolling issue when I created a whole blogbook of this raviswdev blog using Blogger Feed To HTML Book App . I tried to use this suggestion of using the following CSS: * {         outline: 1px solid red; } ---- But that did not work out. I think the display flex CSS was tripping it up. So I commented out the display flex (and justify-content and align-items) CSS statements for .blogbook class in a saved blog book HTML file (and not BFTB app). That made the right impact. Now after careful viewing of the suspected post, I could spot the line crossing the window width. See below pics. [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.] The solution was to use the following CSS for pre tag:       .main-book pre {         overflow-x: auto;         white-space: pre-wrap;         word-wrap: break-word;       } --

Last updated on 14 May 2024 https://unsplash.com/s/photos/web-design https://stockcake.com/ https://emojipedia.org/ HTML escape characters: Hamburger icon (trigram for heaven):  https://graphemica.com/%E2%98%B0  (HTML entity decimal: ☰)   Royalty free pics: https://www.pexels.com/ Free Logo creator: LogoMakr.com A simple, fast and free image placeholder service., https://placehold.co/

Last updated on 21 Apr. 2024 Interesting short video giving a fast-paced coverage of pros and cons of Tailwind CSS:  Tailwind CSS is the worst…,  https://www.youtube.com/watch?v=lHZwlzOUOZ4 by Fireship, around 4 mins, Jan. 2023.  Seems to be by the same author as above video but has useful quick coverage:  Tailwind in 100 Seconds,  https://www.youtube.com/watch?v=mr15Xzb1Ook by Fireship, 2 min. 20 secs, Aug. 2021. Official site:  https://tailwindcss.com/  . The explanation part of Tailwind code seems to start with this page:  https://tailwindcss.com/docs/utility-first . Steps I followed to make my first Tailwind (test) project: In an empty directory, ran 'npm init' and accepted defaults for all except index.js which I changed to index.html As per  https://tailwindcss.com/docs/installation , ran 'npm install -D tailwindcss'. I think I missed out running, 'npx tailwindcss init'. Plan to try that out in a new project later. Created 'tailwind.config.js' fi

Last updated on 8 May 2024 2 May 2024: Have started with the offical Next.js tutorial:  https://nextjs.org/learn . Was able to setup and run the example app. -  https://nextjs.org/learn/dashboard-app/getting-started  - without any issues. TypeScript plug-in for VSCode: https://nextjs.org/docs/app/building-your-application/configuring/typescript#typescript-plugin import '@/app/ui/global.css'; - What does the @ symbol do here? It seems to refer to project root. @ symbol does not seem to part of JS but is added on by other package(s). In this tutorial case, it seems to be added on by Tailwind package. Ref: What does the @ symbol do in javascript imports?,  https://stackoverflow.com/questions/42711175/what-does-the-symbol-do-in-javascript-imports  . clsx - "A tiny (239B) utility for constructing className strings conditionally.",  https://www.npmjs.com/package/clsx  ; Documentation:  https://github.com/lukeed/clsx . Next.js claims that if one uses its next/font, it mana

This post captures some of my current as well as old notes in this regard. Note that the overall intent is to free up more disk space on C drive (system drive). 19 Apr. 2024: I wanted to confirm that Windows on my PC now had my AppData\Roaming folder on D drive (due to Location change done in early March this year). %AppData% in Start Search box opened up D drive AppData\Roaming! Ref: https://www.freecodecamp.org/news/appdata-where-to-find-the-appdata-folder-in-windows-10/ Now I think I can temporarily move all C drive AppData\Roaming to D drive and after some days delete it if the system works properly. Did that but Microsoft directory failed to be moved and NetSpeedMonitor had kept one file open and that could not be moved. So some programs seem to still look at C drive AppData\Roaming directory. Will need to see if other programs complain or do not work properly in which case I may have to copy their directories from the temp directory back to C drive AppData\Roaming directory. But

Transferring Github to D drive #66767, https://github.com/orgs/community/discussions/66767 I chose to try out move of Github Desktop directory from C drive AppData\Local to D drive AppData \Local. Note that it has all the program files and packages. Then I ran the program from D drive AppData \Local. It seems to work!  This has freed up significant amount of disk space in C drive.

Changing location of Postman's data directory, https://stackoverflow.com/questions/51135010/changing-location-of-postmans-data-directory I followed suggestion from above post's linked post - https://community.postman.com/t/installation-directory-windows/217/4 - to simply move the folder from C drive to another (D) drive. Ran Postman from D drive folder (AppData of Postman has the exe too) and it worked. Surprisingly running Postman from Start button also works though the icon doesn't show. Postman shows the old Collections and Requests data that I had saved. This has freed up significant amount of disk space in C drive.

https://docs.npmjs.com/cli/v6/using-npm/config#cache https://docs.npmjs.com/cli/v6/commands/npm-cache Commands  Get cache path : npm config get cache Output: C:\Users\Ravi-user\AppData\Local\npm-cache Clear cache : npm cache clean Asks for --force to be used to delete cache. I used that. It reduced cache directory size (on C drive) from over 1 GB to 17.6 MB! Set cache path : npm config set cache=D:\Users\Ravi-user\AppData\Local\npm-cache No output but immediately after running: npm config get cache gave output: D:\Users\Ravi-user\AppData\Local\npm-cache So it seems to have done the job of changing the config info. for npm cache location. Need to see whether npm now works properly and uses this cache. Testing npm by copying src data of working React program -node-modules to temp directory and then running npm install in temp directory. The program's running slowly but is populating the new directory location (D drive) cache. It completed successfully. Then I could run the React prog

Last updated on 20 Apr. 2024 The official tutorial, it seems:  https://reactnative.dev/docs/getting-started  .  Provides a working web view and  "The code is live and editable, so you can play directly with it in your browser."  which makes it very interesting. The Android view is very slow as one has to wait in some "Account-based queue". I think this tutorial would be very worth it as even if I don't see the Android view (or iOS view) due to it being stuck in the queue, I get exposure to the coding and see the web view. So I may get a good feel of React Native by going through this tutorial. I followed the steps in 'Expo Go Quickstart' in Setting up the development environment,  https://reactnative.dev/docs/environment-setup to see if I could have a test React Native project shown on my Samsung M21 Android phone. I was successful in that! Key steps I followed were: Ran 'npx create-expo-app AwesomeProject' Opened AwesomeProject folder in VSCode

Last updated on 2 May 2024 Bootstrap Very interesting video with advice that struck me as quite sensible: Do You Really Need Bootstrap or Tailwind?,  https://www.youtube.com/watch?v=omWmWu1XO8U  , 8 min. 27 secs. by Lama Dev, March 2022 Bootstrap 5 Crash Course: https://youtu.be/Jyvffr3aCp0 , by Web Dev. Simplified, around 1 hr. 10 min, Aug. 2022 Covers a small website creation and so quite interesting: Learn How to Code Using Bootstrap 5 Tutorial 2023!, https://www.youtube.com/watch?v=g9b4LjYrsUQ , by Coding With JayBird, 19 mins., Mar. 2023 https://getbootstrap.com/docs/5.0/getting-started/introduction/ Use HTML CSS Support VSCode extension:  https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css  . Use instructions (.vscode/settings.json related) provided in above page for extension to pick up Bootstrap stylesheet classes. I used the same url of Bootstrap CDN that I am using in my pages checking out Bootstrap classes. Next.js Very fast but covers a CRUD Notes a

I created a test post and published it. Immediately after publishing (without any updates being made to it), I used BFTB  app/program to view last 5 posts. The test post was listed at the top with an updated date-time which was 59 seconds after published date-time! But I had not updated the post at all - only published it. Here's the post output in the blog book (as text not HTML): Test post Published: Tue Apr 16 2024 12:08:00 GMT+0530 (India Standard Time) Updated: Tue Apr 16 2024 12:08:59 GMT+0530 (India Standard Time) Test post related to published date & updated date  --- end post output --- If this is the way Blogger handles all newly published posts which have not had an update, then if I choose to list default number of posts (25) updated in past 1 or 2 or 3 days, I should get all posts published or updated in the specified number of days (unless I have done lot of blog publishing/updates due to which number of matching posts is > 25 and in which case I can use up to

Firstly, the solution using flex which handles the issue of vertically centering the link: ...     <style>       div {         background: #dbdbdb;         display: flex;         justify-content: space-between;         align-items: center;       }     </style> ...   <body>     <div>       <h2>H2</h2>       <a href="#">Some link</a>     </div> ... --------------- Related HTML page code   My earlier attempts were using float for the link element. [I wanted to use float to get some exposure to it as the CSS tutorial I went through did not cover it IFIRC or maybe had very short coverage of it. Note that the tutorial has extensive coverage of flex and grid.] Putting link on same line with H2: Code that partially worked for me:         <div>           <h2>Blogger Blog Feed to HTML Book</h2>           <a             href="https://raviswdev.blogspot.com/2024/04/barebones-blogger-blog-feed-to-html.html&quo

setTimeout does NOT require a clearTimeout unless you want to cancel it before it fires (the first and only time). I checked that out with a small variation of an example given in MDN . My variation is: set-clearTimeout.html (put it up as a Gist). In my variation , console log (as well as page content) can be checked to confirm that setTimeout fires only once and does not fire indefinitely. The comments in this article seem to be correct (you don't need a clearTimeout unless you want to cancel it): When using setTimeout do you have to clearTimeout? . In the article: JavaScript clearTimeout() & clearInterval() Method, https://www.geeksforgeeks.org/javascript-cleartimeout-clearinterval-method/ , the statement, "when we use setTimeout() and setInterval() in any JavaScript program then it must clear the time used in those functions so we use the clearTimeout() and clearInterval() methods." seems to be incorrect in the context of setTimeout. It may be correct in the conte

In my on-going  Blogger Blog Feed to HTML Book program , I earlier used the approach of opening a new window for the blogbook with a placeholder page, waiting for 1 second for the new window to be loaded (using setTimeout function), and after 1 second had passed, updating the document body contents of the blogbook page (in the new window) with the generated blogbook contents. I later explored better solutions to knowing when the new window page had been loaded than the timeout which is a trial-and-error method. Comment: "put an onload handler on the popup window which can call a function on the parent telling it that it is loaded" (posted 18 years ago!) in  how to tell if a popup has fully loaded , seems to provide a solution. It worked when I tried it out in a test program . But the solution in section  Accessing popup from window in this article , of having a handler function for new window's onload event in the parent window JS code, did not work when I tried it out. I