Ravi S. Iyer: Software Development

Last updated on 2 April 2024 I have put up an HTML and JavaScript modified (and simplified) version of Google Apps Script based  bloggerToEbook . Key feature of this barebones blogger blog feed to set of posts (book) HTML & JS program is bypassing CORS restriction/error using cors-anywhere.herokuapp.com. For more on latter, see section '4. Using CORS-anywhere' in https://codedamn.com/news/javascript/javascript-cors-error-handling . You can use the program by simply downloading the index.html and script.js files and then opening index.html in a browser like Chrome. A server like Live Server (VSCode extension) is not needed. To save the dynamically rendered HTML in Chrome browser, I am using  Save Rendered HTML Chrome extension  but that seems to need a server like Live Server. Print as PDF can also be used to save rendered page as PDF. Chrome browser's Save As ... command used with 'Save as type:' specified as "Webpage, Single File (*.mhtml)" results...

Faced a strange issue few days back with direct search on this sw dev. blog which uses Contempo Light theme. The search for (without quotes) "REACT_", "REACT_A" and "REACT_AP" gave 0 results whereas "REACT_APP" gave one result! A further complication was that searching for "REACT_APP" on blogger dashboard (Posts) gave 3 results! The Blogger results seem to be correct (do not want to invest too much time on this matter now). The learning seems to be that Contempo Light theme search widget (don't know if the same search widget is shared across themes; probably yes) does a poor job of searching posts. For reliable results, I should search directly on Blogger Dashboard instead. Need to investigate this later when I have the time for it. 

margin-left pushes bullet to the right. Useful if CSS reset is used which seems to cancel out (override) default bullet margins. .toplevelbullet li {   list-style-type: disc;   /* padding-left: 1rem; */   margin-left: 2rem;   margin-top: 0.5rem;   margin-bottom: 0.5rem; } 

To ensure page-break before an HTML element, when printing HTML to pdf in Chrome, use style="page-break-before: always" . Example:      <h2 style="page-break-before: always">       Technical Areas worked on while in Software Industry from 1984 to 2002     </h2> ---- Ref: https://www.evopdf.com/demo/HTML_to_PDF/Page_Breaks/Insert_Page_Breaks_Before_After_Using_CSS.aspx ... Customizing the header and footer while using print to PDF in Chrome does not seem to be possible. Ref: https://superuser.com/questions/1185459/modify-page-header-and-footer-when-printing-in-chrome ... The HTML can be edited in Word 2007, after which page breaks can be inserted and footer with page number (predefined option) can be chosen. Page number insert is greyed out. Don't if footer edit works. But basic need to page break and page number seems to be possible with Word. Could not get easy option to do this with free online HTML to PDF utils. ... https://www.ilov...

Last Updated On: 2 Oct. 2024 Full Stack (Next.js, MERN) Web Developer (part time, work from home); Former Software Consultant; Former Visiting Faculty (Software) Email: riyer02@gmail.com Résumé / biodata (short) Objective Exploring opportunities for web application development (Next.js, MERN stack) as well as suitable technical consultant work, in part time, work from home mode. Software Development Field Experience Overview 16 months part time (June 2023 to September 2024) : Returned to software development work after gap of around ten years, developed an open source  Bhagavad Gita frontend app  using Next.js, React, Tailwind, TypeScript and GraphQL, developed a  Blogger Blog Feed to HTML Book  open source, plain vanilla JavaScript app (HTML, CSS and JavaScript), developed an open source  Blogger blog backup to book software  in VB.Net, learned Next.js, Tailwind, TypeScript and MERN (MongoDB, Express, React.js and Node) full stack web develo...

Last updated on 1 Oct. 2024 Please visit  https://ravisiyer.github.io/biodata/ .

Last updated on 1 Oct. 2024 This free resource (blog posts) may be of help to some poor students in rural India (including in Puttaparthi) or even in urban India, who are determined and dedicated to self-learn full stack (MERN) web development beginner level using a roadmap, free video and text tutorials, and extensive notes. Note that the free tutorials are published by others (not me) but I have prepared the roadmap and finished two rounds of it. In the course of these two rounds, I have prepared extensive and well organized notes. [1 Oct. 2024 Update: Later I did a third round and put up notes on it.] These notes may be a very helpful aid to the student as he/she goes through the course.  The associated blog posts are: Roadmap to Learning Full Stack (MERN) Web Development Beginner Level Through Free Online Tutorials: https://raviswdev.blogspot.com/2024/01/roadmap-to-learning-full-stack-web.html Learning Full Stack (MERN) Web App Development through Free Online Tutorials – Organ...

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  . https://reactrouter.com/en/main Building React Router part of Dave Gray tutorial,  https://raviswdev.blogspot.com/2024/03/building-react-router-part-of-dave-gray.html Perhaps it may be better to skip React Router part of Dave Gray tutorial as it covers v5 and then updates it to v6. Instead we can use the following tutorial which is directly on v6: React Router 6 – Tutorial for Beginners,  https://www.youtube.com/watch?v=59IXY5IDrBA , 1 hr 17 mins, published on May 4, 2022 by freeCodeCamp.org. Source code:  https://github.com/john-smilga/react-router-6-tutorial  . NavLink,  https://reactrouter.com/en/main/components/nav-link The final version App does not show images. That can be fixed by renaming final data.js to something else (to ...

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  .   Using the State Hook,  https://legacy.reactjs.org/docs/hooks-state.html In React why do we need state variable when we have local variable ?,  https://www.linkedin.com/pulse/react-why-do-we-need-state-variable-when-have-local-sohil-lalakiya/  . From the above, “React requires state variables as it does not keep track of local variables, so when you attempt to modify them, React does not re-render the DOM.” I modified the Dave Gray tutorial code to demonstrate that change in local variable does not change the HTML display in React. I also created a plain Javascript version where the code directly updates the HTML and so change in local variable results in change in HTML display.  About setting state variables (in a function) not ha...

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  .   How to check whether a project folder's contents (excluding .git folder if any) is the same as a Github repo? Clone the github repo onto PC Run WinMerge to compare project folder with cloned Github repo project folder with following Options: Edit->Options->Compare->General: Checked: "Ignore carriage return differences (Windows/Unix/Mac)" Edit->Options->Compare->Folder: Unchecked: "Include unique subfolders contents" See WinMerge comparison report Using WinMerge to modify files of a version of project to ***partially*** sync with another version. WinMerge's feature of copy from one pane to another (copy to left/copy to right) can be very helpful to modify files that need to be modified to partially or fully match another...

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  .   Modified the blog app to use local storage instead of axios and json-server as I wanted to deploy the app to netlify. Followed the main steps detailed earlier in this post covering tutorial Grocery List app deployment to netlify. The specifics were slightly different. Besides the boilerplate unused packages uninstall, I had to uninstall some other packages not used by the modified app including axios and json-server. In netlify Team Overview page, I had to choose Add new site -> Import an existing project. Also I specified a sitename of ravisiyerblog ( https://ravisiyerblog.netlify.app ). The app got deployed without any hiccups. The url/link for the app is: https://ravisiyerblog.netlify.app . I tried it out on Chrome on desktop as well as on mob...

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  .   Procedure followed by tutorial to deploy to GitHub pages which I tried to repeat 1) Run npm i gh-pages -D 2) Add to package.json after version: "homepage": "https://{username}.github.io/{reponame}", I added: "homepage": "https://ravisiyer.github.io/react_deploy_gh", 3) In package.json, before start property, add predeploy and deploy properties to scripts: I added: "predeploy": "npm run build", "deploy": "gh-pages -d build", 4) Ensure that .gitignore file is present and setup properly. Then run: git init git add . git commit -m "first commit" 5) In GitHub, create new repository with same name as reponame in package.json entry added earlier. I created react_deploy_gh repo in GitHub....

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 tutorial deploys one of its earlier lesson projects which uses local storage and not JSON server (as JSON server usage would not be suitable for deployment). In the video, “11tut” is the name in the project’s package.json file but I could not find the associated project source files in the tutorial source download links. The closest project source files I found were react_json_server-main directory files which seem to be the starter files before modification to use JSON. Its package.json file has the name “09tut”. In my test deployment, I am using this react_json_server-main directory/project files but without the data directory (which has db.json file). I used the steps in the “Procedure to build tutorial project from its source files” section given in...

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  . Easy Peasy v5, https://easy-peasy.vercel.app/ Quick Start tutorial: https://easy-peasy.vercel.app/docs/tutorials/quick-start.html . This quick start tutorial seems to be enough to cover most of the easy peasy usage in the React tutorial. Additional info. needed: helpers and helpers.getState: https://easy-peasy.vercel.app/docs/api/thunk.html A more detailed tutorial: https://easy-peasy.vercel.app/docs/tutorials/primary-api.html . I have not gone through it as of now. May do so later. To refactor my code variation to use easy-peasy, I used cawv-1101-blog-useContext folder source code (which uses useContext but does not have DataProvider class) as the base. I don’t think thunks are required in my code variation as the functions to add, delete and update post...

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  . How to find Icon names for Font Awesome to import with React?, https://stackoverflow.com/questions/56351531/how-to-find-icon-names-for-font-awesome-to-import-with-react Above post has advice in one response, to use react-icons package instead of using @fontawesome package, the latter being the package recommended by font awesome website. Note that the tutorial also uses react-icons package instead of @fontawesome package. The response states, “React-icons is nice because it provides ES6 support for various popular icons, allowing one to only include the icons actually being used within your react project.” https://www.npmjs.com/package/react-icons npm install react-icons –save List of icon collections: https://react-icons.github.io/react-icons/#/icons/fa Li...

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 blog app in react_router_v6-main folder in the tutorial has 5 state variables whereas in my variant I used only 2 state variables (posts (array) and searchPosts (string)). I passed these two state variables to all the key pages SinglePost, EditPost, NewPost, SharedLayout etc. That may be a poorer OO design as all these components have access to all the key data and can change it. However it simplified the code. Also I implemented the add, update and delete post functions in the components having the UI for them as the components had access to posts and setPosts, wherease in the tutorial code these functions (add and delete as update functionality is not provided at this stage but is provided later) in App.js and passes the functions as props to relevant...

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  . node command line program creates a “REPL” session. From Read–eval–print loop, https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop , “A read–eval–print loop (REPL), also termed an interactive toplevel or language shell, is a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user; a program written in a REPL environment is executed piecewise.” Executing a simple console.log statement in node command prints out the expected data but that is followed by another line having “undefined”. It seems that the return value of console.log is printed and that is undefined. Ref: node.js displays “undefined” on the console, https://stackoverflow.com/questions/8457389/node-js-disp...

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  . For storing datetime in JSON file I first tried out following in node program in console: console.log(JSON.stringify(new Date())); It gave the output similar to what is given below (but I had done it a little earlier and so time was a little earlier) "2024-01-28T09:02:30.882Z" I used this in the JSON data file as follows: const posts = [   {     id: 1,     datetime: "2024-01-28T08:49:12.133Z",     title: "Test Post 1 title",     body: "Test Post 1 body",   }, ... ] ... Then in the React component I used this code to display the datetime:               <p>Post datetime: {new Date(post.datetime).toString()}</p> This code displayed: Post datetime: Sun Jan 28 2024 1...

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  . CSS selectors, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors While exploring a website structure of header (incl. nav), main and footer where the header is fixed to top and footer to bottom of window, when using flexbox, I came across this implementation of it: From https://jsfiddle.net/RnBhH/2/ In this implementation the CSS has the following lines at the beginning: html, body {   margin:0;   height:100%;   min-height:100%; } When I was trying out the same approach in my test html file, I ignored the html part of the CSS and used only the body part. Somehow I had the impression that we can ignore the html element CSS if we apply the same CSS to the body. I was wrong! If we modify https://jsfiddle.net/RnBhH/2/ CSS to remove ...

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  . How to Use JSON Server for Front-end Development,  https://www.freecodecamp.org/news/json-server-for-frontend-development/ When I did npm install json-server, the latest version (I think it was 1.0.0-alpha.21) got installed. It did not support an option to print the request it gets. It listed very few options when I used npx json-server –help. The Dave Gray tutorial json-server prints out the request it gets which is quite useful. JSON Server (json-server), https://www.digitalocean.com/community/tutorials/json-server , published in Aug. 2022 shows json-server version 0.8.10 supporting much more options with a -q option to suppress log messages from output (so log messages printed seems to be the default for this version). So I uninstalled the latest ve...

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 related code is given below and later the usage is analyzed: const apiRequest = async (url = '', optionsObj = null, errMsg = null) => {     try {         const response = await fetch(url, optionsObj);         if (!response.ok) throw Error('Please reload the app');     } catch (err) {         errMsg = err.message;     } finally {         return errMsg;     } } ...   const addItem = async (item) => {     const id = items.length ? items[items.length - 1].id + 1 : 1;     const myNewItem = { id, checked: false, item };     const listItems = [...items, myNewItem];     setItems(listItems); ...