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 11 July 2024 https://unsplash.com/s/photos/web-design https://stockcake.com/ https://pixabay.com Royalty free pics: https://www.pexels.com/ https://search.creativecommons.org/ A Comprehensive Guide to Finding Free Pictures Without Copyright, https://www.ask.com/news/comprehensive-guide-finding-free-pictures-without-copyright Free and Clear: Where to Find Stunning Images without Copyright Restrictions,  https://www.consumersearch.com/technology/free-clear-find-stunning-images-without-copyright-restrictions ... https://emojipedia.org/ HTML escape characters: Hamburger icon (trigram for heaven):   https://graphemica.com/%E2%98%B0  (HTML entity decimal: ☰)   Free Logo creator:  LogoMakr.com A simple, fast and free image placeholder service.,  https://placehold.co/

Last updated on 29 Jun. 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. [29 Jun 2024 update: 'npx tailwindc

Last updated on 1 Oct 2024 Note: Third round done in Sept. 2024 is covered in  Notes on 3rd round of Next.js official tutorial . First round 2 to 8 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/pa