Ravi S. Iyer: Software Development

Last updated on 22 Apr. 2024 Quick-Info : CSS solution for wrapping content of HTML pre tag:       pre { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } Recently when I was using my VBA code to create a blog book of one of my WordPress blogs -  https://ravisiyer.wordpress.com/ - I faced a horizontal scrollbar appearing in output HTML blog book problem. As the HTML file was a long one, when I tried to spot the lines that are overflowing by vertically scrolling through the HTML page rendered in Chrome browser, I was not able to spot them. Though I did think that at times while scrolling fast through the long page/document, I passed some horizontal overflow text but trying to zero in on it had not worked. How to find the cause of horizontal scrollbars, https://polypane.app/blog/strategies-for-dealing-with-horizontal-overflows/ helped me to locate the cause of the horizontal scrollbars by using "* {outline: 1px solid red;}" style specification. It was  some ca

Last updated on 7 Mar 2024 Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log,  https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html  . I want to know if I can very quickly create a simple backend API server for posts used in my code variation of the React tutorial blog app and connect the blog app deployed on netlify to the backend. A simple database would have to be used to store the posts data. This post captures the info. I am gathering about the above. In case, node.js is not installed, download and install the LTS version:  Node.js download .  From Express Getting Started  : For bare-bones starter project: Create empty directory Run 'npm init' accepting defaults except for entry point which may be changed to app.js. This creates package.json file which can be modified later on, if default values used by npm init have to be changed. If express is not installed, run

Last updated on 22 Mar. 2024 Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log,  https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html  . I am simply curious about whether for tutorial/learning kind of non-critical projects like learning React projects, whether we can switch from localhost json-server to an online json-server which allows us to do CRUD operations and persist the data. In the React tutorial the author/teacher drops the json-server related api data and code tutorial lesson (blog) when the tutorial gets to deploying the app. online (netlify or github pages) and switches to a Grocery List app. which uses local storage to store the data. If I recall correctly, he says that we cannot use json-server when we deploy online. That triggered this curiousity about knowing if there are online json-servers we can use which persist our data (different from fake json-servers w

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log,  https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html  . What is CDN in context of JS library? This is answered quite well by https://developer.mozilla.org/en-US/docs/Glossary/CDN . "CDNs are used widely for delivering stylesheets and JavaScript files (static assets) of libraries like Bootstrap, jQuery etc. Using CDN for those library files is preferable for a number of reasons: ..." This seems to be an excellent article on CDN and how to use them, including specifying version numbers to prevent future versions of libraries used causing bugs in one's program: How to Import JavaScript and CSS from a Public CDN, https://www.freecodecamp.org/news/import-javascript-and-css-from-a-public-cdn/ . It has a section on "npm-driven CDNs" which can be used for JS libraries that are deployed only to npmjs. These np

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log,  https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html  . I was curious to know that if I am using or testing a tutorial React app or my code variation of that which uses local storage, how do I make a copy of that data from local storage (managed by browser) to a file in my personal folders (managed by me) and also restore that data from file in my personal folders into local storage. As an example, as I was testing out my code variation of the blog React tutorial app., I wanted to save the posts data into a file before I tried out deleting or modifying the posts. Later if I want to restore the posts data, rather than recreate the posts, I wanted to simply copy the data from my file into the posts local storage variable. I tried searching on the net for some web page code that I could copy-paste and use but I did not find a su

Last updated on 15 Feb. 2024 Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log,  https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html  . The React tutorial video I am referring to is:  React JS Full Course for Beginners | Complete All-in-One Tutorial | 9 Hours, 8 hr 49 min, published on Sep 10, 2021 by Dave Gray. It is part of my  Roadmap to Learning Full Stack Web Development Beginner Level through free online tutorials . This post is a longish one detailing some of the doubts I had and issues I faced with the useAxios custom hook and how I resolved them. I am giving below the final version of my code variation of the the useAxios hook (called useAxiosGet) for readers who want to view that first or view that only and skip the rest of the post. App.js snippets and useAxiosGet.js source code on gist:  https://gist.github.com/ravisiyer/5760479a3bb4d4c70fe3c12ec2d66835  ... Also

Chrome (and blogger posts displayed in Chrome) interprets HTML code inside <pre> </pre>  or <code> </code> tags unless they are escaped. If the HTML code shown below under xmp tag is used as is (not escaped) within code or pre tags, Chrome shows "Test document" in large font and bold (so the h1 tag is interpreted). The xmp tag shows the HTML source code properly for Chrome and Blogger posts displayed in Chrome! However it is deprecated. See  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp  . The page has useful info. in the context of pre and code tags: "Use the <pre> element or, if semantically adequate, the <code> element instead. Note that you will need to escape the '<' character as '&lt;' and the '&' character as '&amp;' to make sure they are not interpreted as markup." The contents below show some HTML code snippets using xmp (deprecated), pre and code ta

Display code snippet in blogger, https://www.dotnetexample.in/2018/09/display-code-snippet-in-blogger.html  . The article covers how to use Github gist facility to create code snippets/files and that on save, it provides an embed link (script tag) which can be inserted in blogger post (in HTML mode). When I tried it first, Blogger complained that the HTML is invalid but on saving it, it worked. However, later I did not face such errors when I replaced the script tag or added a new script tag. As I was trying out code and pre tags earlier on, perhaps it was some of that code that triggered the Blogger warnings. On switching to Compose mode, the script tag and associated code are not shown but can be viewed by switching back to HTML mode (preview post shows the code snippet). On viewing the blogger post, the script tag does a great job of showing the associated code and a link to view the code file (raw) in a separate window. While there is no copy code button shown on the blogger post,

Last updated on 21 Mar. 2024 Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log,  https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html  .   Learn React Hooks: useEffect – Simply Explained!,  https://www.youtube.com/watch?v=-4XpG5_Lj_o  , 14 min. 6 secs. https://react.dev/reference/react/useEffect has a good explanation of useEffect in general. Given below are the sections of the page that I found to be very useful: * Good explanation of useEffect dependencies: https://react.dev/reference/react/useEffect#examples-dependencies * Good explanation of when useEffect setup and cleanup functions are called in the context of chat room component: Connecting to an external system, https://react.dev/reference/react/useEffect#connecting-to-an-external-system It states: --- start short extract --- React calls your setup and cleanup functions whenever it’s necessary, which may happen multip

Last updated on 22nd Mar. 2024 Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log,  https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html  . My understanding so far about how html and body tags' height and min-height properties values of 100% or "" (not specified) impact the vertical scrollbar on whole page is given below. Note: I am excluding max-height in this discussion and presuming it is not specified. What is the height of the html document that is being shown in the browser? Can we query that value using JavaScript? It seems that we don't have a straightforward answer. document.documentElement.offsetHeight seems to be one answer.  From https://developer.mozilla.org/en-US/docs/Web/API/Document : (Instance Property) Document.documentElement "Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTMLHtmlE