Day 36
> More DSC contract tests
> went through Discord.js + some automation tool
> Peeked into some LLM APIs
was meant to stay on the contract... ended up chasing side project ideas instead 🤷♂️
#100DaysOfCode #buildinpublic
Day37 #100DaysOfCode
Started the Programming with JavaScript course today 💻
Just went over the basics and re-learnt variables 🔁
And it is the same idea from the Java OOP course I took back in school
Day 63: #100DaysOfCode
I completed the ‘Build a Product Landing Page’ lab. I had fun doing this lab and learnt new skills.
#freeCodeCamp #WebDevelopment
Some concepts come easy. Some take time. But that "aha" moment? Worth it every time.
For me, recently, this was understanding TLS termination. What was your recent "aha" moment?
#DevOps #learnk8s #100DaysOfCode #100DaysOfDevOps #homelab #kubernetes #Linux #Tech #TechWithX
Locked in since 5:24 am for the next 4 hours. Making the most of coding time!
If anyone is up, drop a question or topic—let’s chat or brainstorm together :)
#BuildInPublic #ReactJourney #100DaysOfCode
Absolutely agree! The journey of #100DaysOfCode transformed my development process by leaps and bounds. Keep going!
Your dedication and consistency are inspiring, Shay! Keep pushing forward, success is inevitable. #100DaysOfCode
#100DaysOfCode
Dia 54 - Brinquei com o bubble tea do golang, projetinho bem maneiro ainda tô tentando pegar o jeito pra trabalhar nele por que eu tinha a expectativa de funcionar como webcomponents, também implementei um clone simples do cat em c++.
CryptoKnight23 retweeted
The Machine Learning Roadmap. #BigData #Analytics #DataScience #AI #MachineLearning #IoT #IIoT #PyTorch #Python #RStats #TensorFlow #Java #JavaScript #ReactJS #GoLang #CloudComputing #Serverless #DataScientist #Linux #Programming #Coding #100DaysofCode
buff.ly/46jD9p1
Day 86 of #100DaysOfCode
Topic: How Data Fetching Works in React ⚙️
Today I explored one of the most important parts of dynamic React apps, data fetching.
Data fetching allows React components to pull live data from APIs or databases and render them dynamically on the UI.
🔹 React’s Approach to Data Fetching
React is not opinionated about how you fetch data. That means you can use:
Fetch API (built into browsers)
Axios (a popular promise-based HTTP client)
SWR (a powerful React hook by Vercel for data fetching and caching)
🔹 Using the Fetch API
To fetch data, I used useState and useEffect hooks:
import { useState, useEffect } from "react";
const FetchPosts = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const res = await fetch("jsonplaceholder.typicode.com…");
if (!res.ok) throw new Error("Network response was not ok");
const data = await res.json();
setData(data);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>{error.message}</p>;
return (
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
};
export default FetchPosts;
This handles loading, success, and error states — a key concept for user experience.
🔹 Fetching Data with Axios
Axios simplifies requests by automatically parsing JSON:
import axios from "axios";
useEffect(() => {
const fetchData = async () => {
try {
const res = await axios.get("jsonplaceholder.typicode.com…");
setData(res.data);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
No need for res.json() — Axios does it for you!
🔹 Fetching Data with SWR
SWR stands for Stale While Revalidate — it’s a React hook from Vercel that makes data fetching, caching, and revalidation super efficient.
import useSWR from "swr";
const fetcher = (url) => fetch(url).then((res) => res.json());
const FetchTodos = () => {
const { data, error } = useSWR(
"jsonplaceholder.typicode.com…",
fetcher
);
if (!data) return <h2>Loading...</h2>;
if (error) return <h2>Error: {error.message}</h2>;
return (
<>
<h2>Todos</h2>
{data.map((todo) => (
<p key={todo.id}>{todo.title}</p>
))}
</>
);
};
SWR automatically handles:
Caching
Revalidation
Focus re-fetching
Error retries
All without writing complex logic!
🔹 Bonus: Creating a Custom Hook 🪝
For reusable data fetching logic across components:
import useSWR from "swr";
const fetcher = (url) => fetch(url).then((res) => res.json());
const useFetch = (url) => {
const { data, error } = useSWR(url, fetcher);
return {
data,
loading: !data && !error,
error,
};
};
export default useFetch;
Now you can call it anywhere:
const { data, loading, error } = useFetch("jsonplaceholder.typicode.com…");
Day 85 of #100DaysOfCode
Weekend Review: JavaScript Libraries, Frameworks & React Fundamentals
This weekend, I revisited the foundations that power most of modern frontend development, JavaScript libraries, frameworks, and React basics.
Here’s what I covered 👇
🔹 Libraries vs Frameworks
Libraries are focused and flexible. You call their functions when you need them, e.g., jQuery for DOM manipulation or React for UI components.
Frameworks provide structure and rules. They call your code, not the other way around, e.g., Angular or Next.js.
Frameworks are ideal for building full applications, while libraries give you the freedom to structure things yourself.
🔹 Single Page Applications (SPAs)
SPAs load once and dynamically update the page as users interact — no full reloads.
Built with frameworks like React or Angular, they’re fast and smooth but come with tradeoffs:
Accessibility issues for screen readers
Navigation and bookmarking challenges
Slower initial load
🔹 React Essentials
React is a JavaScript library for building reusable UI components.
It works by keeping a virtual DOM and re-rendering components only when state or props change.
Components are the core of React, small, reusable functions that return UI:
function Greeting() {
const name = "Anna";
return <h1>Welcome, {name}!</h1>;
}
🔹 Importing & Exporting Components
React projects are modular, each component can be exported and imported across files:
// City.js
export default function City() {
return <p>New York</p>;
}
// App.js
import City from './City';
🔹 Setting Up a React Project with Vite
Vite makes React project setup fast:
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
Your app runs at http://localhost:5173, and you’re ready to code.
🔹 Passing Props
Props (short for properties) are how data flows from parent to child components.
They make components dynamic and reusable:
function Child({ name }) {
return <h1>Hello, {name}!</h1>;
}
You can also use the spread operator to pass multiple props easily.
🔹 Conditional Rendering
React lets you conditionally render content using:
Ternary operators → {isLoggedIn ? "Welcome" : "Please log in"}
Logical AND (&&) → {user && <h1>Hi, {user.name}</h1>}
if statements for more complex logic
🔹 Rendering Lists
When you have an array of data, you can render lists dynamically using map():
<ul>
{names.map((name, index) => (
<li key={index}>{name}</li>
))}
</ul>
Always include a unique key to help React optimize rendering.
🔹 Inline Styles
You can style JSX elements directly using JavaScript objects:
<h1 style={{ color: "blue", fontSize: "20px" }}>Hello!</h1>
or conditionally:
const styles = {
color: isImportant ? "red" : "black",
};
🧩 Takeaway
This week’s review reinforced how React builds on core JavaScript principles, components, data flow, and reactivity, while frameworks like Next.js extend those ideas for full-scale app development.
Next up: diving deeper into state management, side effects, and data fetching in React.
Day 13/100 - #100DaysofCode Challenge
✅ Made the dashboard page dynamic (Fetch real content from the database)
#codewithmukhiteee
🔥 Day 90 of #100DaysOfCode 🔥
Leveling up with C++ DSA 🚀
✅ Solved “Find Kth Largest Element” using frequency mapping & logic-based iteration.
🔍 Focused on optimizing reasoning over brute force — understanding how counting frequencies can replace sorting.
#CPlusPlus #DSA
Better CallBot retweeted
Good morning, Saturday crypto keepers! Guard your digital treasures with vigilance and valor! 🗝️💖
I'm following all the bros who say it back and follow me.
#financialfreedom #trader #freemint #100DaysOfCode #DASH
Day 48 of #100DaysOfCode
Today :
• 10 Push-Ups and Squats ✅️
• 10 Min Meditation ✅️
• Read a book.
• Studied some college subjects.
#buildinginpublic #winterarc #react
Ene retweeted
Data Science in a Nutshell. #BigData #Analytics #DataScience #AI #MachineLearning #IoT #IIoT #PyTorch #Python #RStats #TensorFlow #Java #JavaScript #ReactJS #GoLang #CloudComputing #Serverless #DataScientist #Linux #Programming #Coding #100DaysofCode
geni.us/What-is-DSci
