Skip to content

Instantly share code, notes, and snippets.

View ravisiyer's full-sized avatar

Ravi S. Iyer ravisiyer

1 follower · 0 following
View GitHub Profile
@ravisiyer
ravisiyer / App.js
Last active February 8, 2024 07:59
Notes on React useEffect - App.js
import { useEffect, useState } from "react";
const TestForm = ({ handleSubmit }) => {
const [formPostTitle, setFormPostTitle] = useState("");
const [formPostBody, setFormPostBody] = useState("");
useEffect(() => {
function cleanUp() {
console.log("TestForm:useEffect cleanUp fn. invoked");
}
@ravisiyer
ravisiyer / index.css
Last active February 8, 2024 07:52
Notes on React useEffect - index.css
* {
margin: 0;
box-sizing: border-box;
}
#root {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@ravisiyer
ravisiyer / AppCustomHookStateRerender.js
Created February 12, 2024 10:30
React custom hook state change causes linked component (App) re-render
import "./App.css";
import { useEffect, useState } from "react";
const useGetData = (dummyDataURL) => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = (url) => {
console.log("useGetData: useEffect: Just before calling setData()");
setData(["AE1", "AE2", "AE3", "AE4", "AE5"]);
@ravisiyer
ravisiyer / Snippets App.js
Last active February 14, 2024 08:04
useAxiosGet custom hook for axios get requests only: version with cleanupAbort and axiosGetInProgress variables
import "./App.css";
import { useEffect, useState } from "react";
import Home from "./Home";
// lines snipped
import useAxiosGet from "./hooks/useAxiosGet";
function App() {
const [posts, setPosts] = useState([]);
const [arePostsLoading, setArePostsLoading] = useState(true);
const [searchPosts, setSearchPosts] = useState("");
@ravisiyer
ravisiyer / Snippets App.js
Last active February 14, 2024 15:39
useAxiosGet custom hook for axios get requests only: version using controller.signal.aborted
//lines snipped
function App() {
const [posts, setPosts] = useState([]);
const [arePostsLoading, setArePostsLoading] = useState(true);
const [searchPosts, setSearchPosts] = useState("");
const {
data,
isLoading: isDataLoading,
axiosGetError,
@ravisiyer
ravisiyer / jsonbin.html
Last active February 21, 2024 09:38
Tests out programmatic copying of Local Storage (LS) item to JSON BIN io and the reverse. Uses axios get and put
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/renderjson@1.4.0/renderjson.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js"
integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ=="
@ravisiyer
ravisiyer / pre-tag-width.html
Created February 26, 2024 12:34
HTML Pre tag: Wrapping content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
pre {
/* overflow-x: auto; */
white-space: pre-wrap;
@ravisiyer
ravisiyer / NestedLists-IndentedText.html
Last active March 9, 2024 13:48
Blogger: Creating lists or indented text within ordered lists optionally with additional text after nested list - HTML code
<p>
This post is based on a detailed note-cum-log I wrote as I was creating the
Node Express &amp; MongoDB tutorial Blog API. I think it may be useful for
others who are using the
<a href="https://raviswdev.blogspot.com/2024/01/roadmap-to-learning-full-stack-web.html">roadmap to full stack web development</a>
that I have provided.
</p>
<p>
The steps I followed to successfully create a Node Express &amp; Mongo DB
tutorial Blog API which worked with the React tutorial Blog application after
@ravisiyer
ravisiyer / index.html
Last active March 30, 2024 09:56
Barebones blogger blog feed to set of posts (book) using JavaScript and bypassing CORS using cors-anywhere.herokuapp.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<main id="main"></main>
<!-- <div id="bodydiv"></div> -->
@ravisiyer
ravisiyer / app.js
Created March 30, 2024 09:48
Barebones blogger blog feed to set of posts (book) using JavaScript and bypassing CORS by using a Node Express proxy server
const express = require("express");
const cors = require("cors");
const { createProxyMiddleware } = require("http-proxy-middleware");
const app = express();
app.use(cors());
app.use(
"/",
createProxyMiddleware({
target: "https://sathyasaiwithstudents.blogspot.com",