DEV Community: kelseyroche

React Day 2025 – Hot Takes, Deep Dives & the Future of UI Engineering

kelseyroche — Tue, 29 Apr 2025 18:58:40 +0000

React Day by Front End Nation delivered exactly what every React dev craves: unfiltered opinions, real-world insights, and a glimpse into the future of building for the web.

🚀 Kicking Off With Kent C. Dodds: AMA Style

We opened the day with a live Ask Me Anything with Kent C. Dodds, creator of EpicReact.dev and one of the most influential voices in the React world. It was engaging, real, and packed with thought-provoking insights:

Most controversial opinion? The browser might not be the future. AI clients and MCP-like servers could take over.
Biggest shift in mindset? Burnout is real. Slowing down can be the best move for sustainable impact.
Favorite patterns? Composition over everything (compound components too!).
Testing tools? He recommends Playwright over Cypress, Vite Test (V-test) over Jest, and skipping JSDOM entirely.

Kent also touched on the React Compiler, advising caution unless you’re solving major performance challenges. For newbies moving from vanilla JS? His answer: start with the free resources at EpicReact.dev.

🎤 Top Talks

💥 Maya Shavin – “We Are React-ing Wrongly”

Think you’ve mastered React? Think again. Maya challenged us to let go of assumptions, dig deeper, and question how we use React daily—especially with the docs still evolving.

🧠 Tejas Kumar – “UI Engineering for the AI Age”

This wasn’t just futuristic fluff. Tejas walked us through how to design resilient UIs with streaming data, server components, and partial JSON handling—skills every dev will need as AI becomes more integral to front-end development.

⚡ Leah Thompson – “Using React with Inertia.js”

Leah broke down Inertia 2.0 and showed how it brings speed to your frontend dev without sacrificing control. If you haven’t explored Inertia yet, now’s the time.

🦻 Shruti Kapoor – “Building Accessible Web Applications in React”

Shruti made it clear: accessibility isn’t an afterthought. It’s a core part of quality development. Her talk included practical strategies and real-world examples to bake inclusion into your workflow from the start.

🎯 Key Takeaways

The React ecosystem is evolving fast. Tools like Inertia.js and concepts like React Server Components are redefining what’s possible.
AI will reshape our roles. We’ll soon be orchestrating logic, not just writing components.
Accessibility and sustainability aren’t optional. They’re non-negotiable for modern development.

React Day wasn’t just a conference—it was a call to level up. Whether you’re just starting out or years deep into React, the future is here—and it’s time to build smarter, not just faster.

Discover Your Dragon with the Threshing Quiz: A Journey into Coding and Fantasy

kelseyroche — Tue, 22 Apr 2025 20:39:20 +0000

What do you get when you mix React, a dash of fantasy logic, and a whole lot of dragon energy? A custom personality quiz that tells you exactly what kind of dragon you’d bond with in the world of Fourth Wing.

Let’s be real—if you’ve devoured Rebecca Yarros’ Fourth Wing, you’ve definitely wondered whether you’d survive the Rider’s Quadrant… and more importantly, which dragon would choose you. Clubtail or Scorpiontail? Fiery Red or fiercely loyal Brown? I needed answers. So, I built a quiz to find out.

I wanted to create a “Which Dragon Would Bond With You?” quiz that didn’t just slap a label on you after a few shallow questions. I wanted this to feel immersive, a little chaotic (like any day in Navarre), and actually rooted in logic and personality mapping.

Each answer choice ties to a series of traits—things like:

Cunning, bold, empathetic, or ruthless
Which then map to…
Dragon colors and tail types

After you answer all 15 questions, your most dominant traits determine your dragon bond. You get a final result like:

Dragon Color: Black
Tail Type: Scorpiontail
(aka: you’re probably terrifying in the best possible way)

⚙️ The Tech Under The Talons

This quiz was built using:

React for building reusable components like QuestionCard and Result
Framer Motion for animations that bring the questions to life with smooth transitions
State management via useState to track current questions and accumulate trait data

At its core, each answer has an array of trait strings (e.g., ["intelligent", "cunning"]). Here’s how it works:

const handleAnswer = (traits) => {
  setUserTraits((prev) => [...prev, ...traits]);
  // move to the next question or show the result
};

Then, when the quiz is over, we count how often each trait appears and map those to color and tail options:

const traitToColor = {
  loyal: ["Brown"],
  bold: ["Orange", "Red"],
  intelligent: ["Green", "Black"],
  // etc...
};

const traitToTail = {
  strong: "Clubtail",
  deadly: "Scorpiontail",
  bold: "Daggertail",
  // etc...
};

Finally, the calculateResult() function returns the most frequent match in each category to determine your dragon.

✨ Little UX Touches

I added Framer Motion animations to each question card so it doesn’t just feel like flipping through a list. Instead, the quiz feels alive, like a mini Trial by Flame. Here’s the snippet that makes each transition buttery smooth:

<motion.div
  key={currentQuestionIndex}
  initial={{ opacity: 0, x: -100 }}
  animate={{ opacity: 1, x: 0 }}
  exit={{ opacity: 0, x: 100 }}
  transition={{ duration: 0.5 }}
>

🧪 What I Learned

This project was more than just a fun fangirl moment—it pushed me to:

Structure complex decision logic based on user input
Think modularly about UI and data flow
Practice DOM animations in React with Framer Motion
Design a dynamic, magical user experience with a whole lot of custom logic

If you’re curious about how I built this quiz or want to take it yourself to find your bonded dragon, check out the live site here! And remember: some of us are meant for Gold dragons, others for poison-wielding Black ones. Either way, you better have the grit to back it up.

“Fly or die,” right?

A Beginner’s Guide to Drag-and-Drop with DnD Kit in React

kelseyroche — Mon, 24 Feb 2025 21:57:29 +0000

Drag-and-drop functionality can enhance user interactions by allowing elements to be moved dynamically within a UI. In this guide, we'll explore how to implement drag-and-drop using DnD Kit, a lightweight and flexible React library.

🏗 Why Use DnD Kit?

DnD Kit offers:

✅ A modern, unopinionated API for drag-and-drop.

✅ Lightweight (smaller than alternatives like react-beautiful-dnd).

✅ Keyboard support for accessibility.

✅ Customizable sensors (mouse, touch, and keyboard).

Let's dive into the setup and implementation!

🚀 Setting Up DnD Kit

First, install DnD Kit:

npm install @dnd-kit/core
or with Yarn:

yarn add @dnd-kit/core

🛠 Basic Drag-and-Drop Example

We’ll create a simple example where users can drag and drop items between two lists.

1️⃣ Setting Up the Context

In DnD Kit, we wrap our app with a DndContext, which manages drag-and-drop events.


import React, { useState } from "react";
import { DndContext } from "@dnd-kit/core";

function App() {
  const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);

  return (
    <DndContext>
      <div>
        {items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    </DndContext>
  );
}

export default App;

At this stage, nothing is draggable yet. Next, we’ll make the items draggable.

2️⃣ Making Items Draggable

To make items draggable, we use useDraggable from @dnd-kit/core.


import { useDraggable } from "@dnd-kit/core";

function DraggableItem({ id, children }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id,
  });

  const style = {
    transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined,
  };

  return (
    <div ref={setNodeRef} {...listeners} {...attributes} style={style}>
      {children}
    </div>
  );
}

Then, update App.js to use DraggableItem:


<DndContext>
  {items.map((item, index) => (
    <DraggableItem key={index} id={index}>
      {item}
    </DraggableItem>
  ))}
</DndContext>

Now, items can be dragged but not yet dropped!

3️⃣ Enabling Droppable Areas

To allow items to be dropped, use the useDroppable hook:


import { useDroppable } from "@dnd-kit/core";

function DroppableArea({ id, children }) {
  const { setNodeRef } = useDroppable({ id });

  return (
    <div ref={setNodeRef} style={{ padding: 20, border: "2px dashed #ccc" }}>
      {children}
    </div>
  );
}

Wrap DraggableItem inside DroppableArea:

<DndContext>
  <DroppableArea id="drop-zone">
    {items.map((item, index) => (
      <DraggableItem key={index} id={index}>
        {item}
      </DraggableItem>
    ))}
  </DroppableArea>
</DndContext>

4️⃣ Handling Drag Events

To update state when an item is dropped, use onDragEnd inside DndContext:

function App() {
  const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);

  function handleDragEnd(event) {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      setItems((prev) => {
        const updatedItems = [...prev];
        const [movedItem] = updatedItems.splice(active.id, 1);
        updatedItems.splice(over.id, 0, movedItem);
        return updatedItems;
      });
    }
  }

  return (
    <DndContext onDragEnd={handleDragEnd}>
      <DroppableArea id="drop-zone">
        {items.map((item, index) => (
          <DraggableItem key={index} id={index}>
            {item}
          </DraggableItem>
        ))}
      </DroppableArea>
    </DndContext>
  );
}

Now, when an item is dropped, the list updates dynamically! 🎉

🎨 Styling the Drag Effect

To enhance the UI, apply styles:

.draggable {
  padding: 10px;
  margin: 5px;
  background: #f4f4f4;
  border-radius: 5px;
  cursor: grab;
}

🔥 Advanced Features to Explore

• Sorting Lists → @dnd-kit/sortable

• Drag Constraints → Limit draggable areas

• Custom Animations → Smooth transitions

• Keyboard Accessibility → Improve usability

🏁 Wrapping Up

DnD Kit is a lightweight, flexible solution for adding drag-and-drop to React apps. By using DndContext, useDraggable, and useDroppable, you can create interactive and accessible interfaces with minimal effort.

🚀 Try it out in your next project!

💬 Have questions? Drop a comment below!

💡 If you found this helpful, share it and follow me for more React content! 🚀

Making Your CLI Applications Pop with Styled Outputs

kelseyroche — Fri, 10 Jan 2025 16:29:43 +0000

Console apps don’t have to be boring! Sure, they’re often thought of as plain and functional, but adding a bit of color, bold text, and style can make a world of difference. With Python libraries like colorama and rich, it’s surprisingly easy to give your CLI tools some personality. Let’s check out how you can bring them to life!

Why Style Your CLI Outputs?

Improve Usability: Highlight important messages like errors or warnings.
Enhance Readability: Use color coding to organize output.
Make It Fun: Add personality to your application with creative styling.

colorama

colorama is a lightweight library that enables ANSI color codes on Windows and other platforms, making it a great choice for simple styling needs.

Installation:

pip install colorama

Basic Usage:
Here’s how to use colorama to style your console outputs:

from colorama import Fore, Back, Style, init

Initialize colorama

init()

print(Fore.RED + "This is red text")
print(Back.YELLOW + "This has a yellow background")
print(Style.BRIGHT + "This text is bold")
print(Style.RESET_ALL + "Back to normal style")

Output:

Red text
Yellow background
Bold text
Reset to normal

Use Case: Highlight error messages:

print(Fore.RED + "Error: Invalid input!" + Style.RESET_ALL)

rich

If you want more advanced features, like tables, progress bars, and markdown support, rich is an excellent choice.

Installation:

pip install rich

Basic Styling:

from rich.console import Console

console = Console()

console.print("[bold magenta]Hello, World![/bold magenta]")
console.print("[red]Error:[/red] Something went wrong.")

Output:

Bold magenta text
Red text with “Error” label

Use Case: Formatting a table:

from rich.table import Table

table = Table(title="Sample Table")

table.add_column("Name", style="cyan")
table.add_column("Age", justify="right", style="green")
table.add_row("Alice", "30")
table.add_row("Bob", "25")

console.print(table)

Combining colorama and rich

You can combine the simplicity of colorama for basic styling and the advanced features of rich to create a dynamic CLI experience.

Example:

from colorama import Fore, Style, init
from rich.console import Console

Initialize colorama

init()

Create a rich console

console = Console()

print(Fore.YELLOW + "Welcome to the Styled CLI App!" + Style.RESET_ALL)
console.print("[green]Let's get started![/green]")

Tips for Effective CLI Styling

Use Color Consistently: Assign specific colors to warnings, errors, and success messages.
Don’t Overdo It: Too much color or bold text can overwhelm users.
Test for Readability: Ensure your colors are readable on light and dark terminal themes.
Provide a Plain Mode: Offer a way to disable styling for users who prefer plain text.

Conclusion

Styling your CLI outputs can significantly enhance user experience, making your applications more functional and fun. Whether you use colorama for lightweight color support or rich for advanced formatting, Python makes it easy to create visually appealing console tools.

Have you tried adding styles to your CLI apps? Let me know your experiences in the comments!

Resources:
https://pypi.org/project/colorama/
https://www.geeksforgeeks.org/introduction-to-python-colorama/
https://rich.readthedocs.io/en/stable/introduction.html
https://www.geeksforgeeks.org/installing-and-using-rich-package-in-python/

6 Beginner Mistakes in Python and How To Fix Them

kelseyroche — Mon, 30 Dec 2024 17:10:46 +0000

1. Misusing Indentation

The Mistake:
Python is strict about indentation, and early on, I accidentally mixed tabs and spaces in my code.

The Fix:
I configured my code editor to use spaces instead of tabs (4 spaces per indentation level). I also enabled a “show whitespace” option to catch accidental formatting errors early.

Lesson Learned: Always be consistent with your indentation style.

2. Confusing Mutable and Immutable Data Types

The Mistake:
I tried to modify a tuple, only to get a TypeError. Later, I accidentally modified a list that I didn’t mean to, leading to unexpected behavior in my code.

The Fix:
I learned the distinction between mutable (e.g., lists, dictionaries) and immutable (e.g., tuples, strings) data types. When I needed to keep data unchanged, I started using tuples or frozenset.

Lesson Learned: Understand the difference between mutable and immutable types to avoid unintended consequences.

3. Forgetting to Initialize Variables

The Mistake:
I attempted to use a variable before assigning it a value, which caused a NameError.

The Fix:
To prevent this, I adopted a habit of initializing variables with default values when declaring them. For example:

Instead of:

print(total)  # NameError: name 'total' is not defined

Do this:

total = 0  
print(total)

Lesson Learned: Always initialize variables before using them.

4. Overwriting Built-In Function Names

The Mistake:
I named a variable list in one of my scripts, which overwrote Python’s built-in list function. This caused issues when I later tried to use list() to create a new list.

The Fix:
I became more mindful of variable names and avoided using names that clash with Python’s built-in functions. Tools like linters also helped me catch these mistakes before running the code.

Lesson Learned: Avoid using Python’s reserved words and built-in function names as variable names.

5. Not Using List Comprehensions

The Mistake:
I used long, nested for loops to create new lists, which made my code harder to read and less efficient.

The Fix:
I learned about list comprehensions and started using them for concise and readable code. For example:

Instead of:

squared_numbers = []  
for num in range(10):  
    squared_numbers.append(num ** 2)

Do this:

squared_numbers = [num ** 2 for num in range(10)]

Lesson Learned: Embrace Pythonic constructs like list comprehensions for cleaner and faster code.

6. Not Using F-Strings for String Formatting

The Mistake:
I used older string formatting methods like % or .format(), which were less readable and sometimes error-prone.

The Fix:
I switched to f-strings for cleaner and more intuitive formatting. For example:

Instead of:

print("Hello, {}!".format(name))

Do this:

print(f"Hello, {name}!")

Lesson Learned: F-strings (introduced in Python 3.6) are a game-changer for readable and efficient string formatting.

Final Thoughts

Mistakes are an essential part of learning, especially when it comes to programming. While these early missteps were frustrating, they helped me grow as a Python developer. If you’re just starting out, remember to embrace your mistakes—they’re stepping stones to success.

What beginner mistakes have you made while coding? Share your experiences in the comments below!

One-to-Many and Many-to-Many Relationships in Python with SQLite

kelseyroche — Sun, 29 Dec 2024 21:06:06 +0000

When working with databases in Python, understanding relationships between tables is crucial. Two of the most common relationships you’ll encounter are one-to-many and many-to-many. Let’s use a WNBA example to explore what these relationships are, how they work in SQLite, and how to implement them using Python.

What Are One-to-Many and Many-to-Many Relationships?

One-to-Many

A one-to-many relationship means that one record in a table is associated with multiple records in another table. For example, in a database of teams and athletes:

One team can have many athletes.
Each athlete belongs to only one team.

Many-to-Many

A many-to-many relationship occurs when multiple records in one table are associated with multiple records in another table. For example, in a database of athletes and sponsorship deals:

An athlete can have deals with many brands.
A brand can have deals with many athletes.

To implement many-to-many relationships in SQLite, you need a junction table (also known as a bridge or association table) to link the two main tables.

Implementing Relationships in Python with SQLite

Setting Up the Database

First, let’s create a database to demonstrate these relationships.

import sqlite3

Connect to the SQLite database (or create one if it doesn't exist)

conn = sqlite3.connect("sports.db")
cursor = conn.cursor()

Create tables

cursor.execute("""
CREATE TABLE IF NOT EXISTS Team (
    id INTEGER PRIMARY KEY,
    name TEXT NOT NULL
)
""")

cursor.execute("""
CREATE TABLE IF NOT EXISTS Athlete (
    id INTEGER PRIMARY KEY,
    name TEXT NOT NULL,
    team_id INTEGER,
    FOREIGN KEY (team_id) REFERENCES Team (id)
)
""")

cursor.execute("""
CREATE TABLE IF NOT EXISTS Brand (
    id INTEGER PRIMARY KEY,
    name TEXT NOT NULL
)
""")

cursor.execute("""
CREATE TABLE IF NOT EXISTS Deal (
    id INTEGER PRIMARY KEY,
    athlete_id INTEGER,
    brand_id INTEGER,
    FOREIGN KEY (athlete_id) REFERENCES Athlete (id),
    FOREIGN KEY (brand_id) REFERENCES Brand (id)
)
""")

conn.commit()

One-to-Many: Teams and Athletes

Let’s add data to demonstrate the one-to-many relationship between teams and athletes.

Insert a team and athletes

cursor.execute("INSERT INTO Team (name) VALUES (?)", ("New York Liberty",))
team_id = cursor.lastrowid

cursor.execute("INSERT INTO Athlete (name, team_id) VALUES (?, ?)", ("Breanna Stewart", team_id))
cursor.execute("INSERT INTO Athlete (name, team_id) VALUES (?, ?)", ("Sabrina Ionescu", team_id))

conn.commit()

To query all athletes on a team:

cursor.execute("SELECT name FROM Athlete WHERE team_id = ?", (team_id,))
athletes = cursor.fetchall()
print("Athletes on the team:", athletes)

Many-to-Many: Athletes and Brands

Now, let’s add data to demonstrate the many-to-many relationship between athletes and brands using the Deal table.

Insert brands

cursor.execute("INSERT INTO Brand (name) VALUES (?)", ("Nike",))
brand_id_nike = cursor.lastrowid

cursor.execute("INSERT INTO Brand (name) VALUES (?)", ("Adidas",))
brand_id_adidas = cursor.lastrowid

Insert deals

cursor.execute("INSERT INTO Deal (athlete_id, brand_id) VALUES (?, ?)", (1, brand_id_nike))
cursor.execute("INSERT INTO Deal (athlete_id, brand_id) VALUES (?, ?)", (1, brand_id_adidas))
cursor.execute("INSERT INTO Deal (athlete_id, brand_id) VALUES (?, ?)", (2, brand_id_nike))

conn.commit()

To query all brands associated with an athlete:

cursor.execute("""
SELECT Brand.name 
FROM Brand
JOIN Deal ON Brand.id = Deal.brand_id
WHERE Deal.athlete_id = ?
""", (1,))
brands = cursor.fetchall()
print("Brands for Athlete 1:", brands)

Conclusion

By defining relationships with foreign keys in SQLite and using Python to manage data, you can create robust databases with clear connections between tables. Understanding one-to-many and many-to-many relationships is essential for structuring data effectively.

This simple example scratches the surface, but you can expand it to handle more complex relationships.

Theming with Styled-Components

kelseyroche — Fri, 06 Dec 2024 16:21:34 +0000

Introduction:

You know that satisfying feeling when you switch an app to dark mode and it just works? Theming does that—it makes things feel personal and polished. And the good news? Adding themes to your React app is way easier than you think, thanks to styled-components. In this post, I’ll show you how to use the ThemeProvider to set up light and dark themes so your app looks great no matter what your users prefer.

Why Theming Matters:

Theming is more than just making things look nice. For some people, dark mode helps with eye strain, while others love the clean, bright feel of light mode. It’s all about giving your users options and showing you care about their experience. Plus, let’s be real—apps with themes just feel more modern and professional.

Setting Up Styled-Components for Theming:

Install styled-components:
npm install styled-components

Create a Theme Object:
Define light and dark themes in a theme.js file:


export const lightTheme = {
    background: '#ffffff',
    color: '#000000',
};

export const darkTheme = {
    background: '#000000',
    color: '#ffffff',
};

Set Up the ThemeProvider:
Wrap your application in the ThemeProvider and pass the theme as a prop:

import { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme } from './theme';

function App() {
    const [isDarkMode, setIsDarkMode] = useState(false);

    return (
        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
            <button onClick={() => setIsDarkMode(!isDarkMode)}>
                Toggle Theme
            </button>
            <YourAppComponents />
        </ThemeProvider>
    );
}

Access Theme Properties:
Use the props.theme object in your styled-components:

import styled from 'styled-components';

const Container = styled.div`
    background-color: ${(props) => props.theme.background};
    color: ${(props) => props.theme.color};
`;

Conclusion:

And that’s it—your app now has themes! With styled-components and ThemeProvider, you can quickly set up dynamic theming without breaking a sweat. It’s a small change that makes a big difference to your users. So go ahead, try it out, and give your app that extra bit of love. Who doesn’t like a good dark mode, anyway?

Resources:

https://mui.com/material-ui/customization/theming/

Step-by-Step Guide: Parent/Child Components and Lifting State

kelseyroche — Fri, 22 Nov 2024 21:13:55 +0000

In React, components often need to share information. To do this, we use parent/child relationships and sometimes need to “lift state” so components can communicate effectively. Here’s a simple guide to get you started.

Summary

Parent-to-Child Communication: Pass data using props.
Child-to-Parent Communication: Use functions passed as props to update the parent’s state.
Lifting State: Move state to the nearest common parent to share it between sibling components.

1. Parent and Child Components

Think of a parent component and child components quite literally as a parent and their children. The parent manages the house and passes chores down to the children.

Let’s create two components: Parent and Child. The parent will pass data to the child using props.

Parent Component:

import React from 'react';
import Child from './Child';

function Parent() {
  const message = "Hello from Parent!";

  return (
    <div>
      <h1>Parent Component</h1>
      <Child message={message} />
    </div>
  );
};

export default Parent;

What do you think is the prop we will pass down to the Child?

Child Component:

import React from 'react';

function Child({ message }) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{message}</p>
    </div>
  );
};

export default Child;

When you render Parent, the child will display:

Hello from Parent!

2. Lifting State Up

Sometimes, a child component needs to send data back to its parent. This is where we “lift state.”

Here’s an example where the child sends a message to the parent:

Parent Component:

import React, { useState } from 'react';
import Child from './Child';

function Parent() {
  const [childMessage, setChildMessage] = useState("");

  const handleMessage = (message) => {
    setChildMessage(message);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Message from Child: {childMessage}</p>
      <Child onSendMessage={handleMessage} />
    </div>
  );
};

export default Parent;

Child Component:
What props do you think we will be passing down to the Child function?


import React from 'react';

function Child({ onSendMessage }) {
  const sendMessageToParent = () => {
    onSendMessage("Hello from Child!");
  };

  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={sendMessageToParent}>Send Message to Parent</button>
    </div>
  );
};

export default Child;

Now, when you click the button in the child component, the parent updates its state and displays:

Message from Child: Hello from Child!

3. Why Lift State?

If two child components need to share data, the parent can manage the state and pass it to both children.
It avoids redundant state logic across components.

Example: Sibling Communication

import React, { useState } from 'react';
import ChildOne from './ChildOne';
import ChildTwo from './ChildTwo';

function Parent ()  {
  const [sharedState, setSharedState] = useState("");

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildOne setSharedState={setSharedState} />
      <ChildTwo sharedState={sharedState} />
    </div>
  );
};

export default Parent;

ChildOne Component:

import React from 'react';

function ChildOne ({ setSharedState }) {
  return (
    <div>
      <h2>Child One</h2>
      <button onClick={() => setSharedState("Message from Child One")}>
        Send to Child Two
      </button>
    </div>
  );
};

export default ChildOne;

ChildTwo Component:

import React from 'react';

function ChildTwo ({ sharedState }) {
  return (
    <div>
      <h2>Child Two</h2>
      <p>{sharedState}</p>
    </div>
  );
};

export default ChildTwo;

When ChildOne sends a message, ChildTwo automatically receives it via the parent.

Reactify Your Resume! Build a Basic Online Portfolio in React

kelseyroche — Wed, 20 Nov 2024 15:47:03 +0000

Having a personal portfolio is essential in today’s job market, especially in tech. With React, you can create a dynamic and professional online portfolio that showcases your skills, projects, and personality. This guide will walk you through building a simple portfolio site step by step. In the future I will post a walkthrough for something a little more advanced, but this tutorial is great for beginners!

1. Set Up React

Make sure Node.js is installed. If not, download it from Node.js official site.
Create a React Project with Vite:
Run:
npm create vite@latest my-portfolio --template react
Navigate to Your Project Folder:
cd my-portfolio
Install Dependencies:
npm install
Start the Development Server:
npm start

1. Plan Your Portfolio Layout

Think about the sections you want:

Header: Your name, a tagline, and navigation links.
About: A short bio and your skills.
Projects: A showcase of your work.
Contact: Links to email and social media.

Here’s an example of the folder structure for components:

2. Build Your Components

Header Component

Create Header.js for your navigation and name:

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
  );
};

export default Header;

About Component

Write your bio and skills in About.js:

import React from 'react';

const About = () => {
  return (
    <section id="about">
      <h2>About Me</h2>
      <p>Hi, I’m [Your Name], a budding software developer with a passion for [your interests].</p>
      <h3>Skills:</h3>
      <ul>
        <li>JavaScript</li>
        <li>React</li>
        <li>CSS</li>
        <li>Node.js</li>
      </ul>
    </section>
  );
};

export default About;

Projects Component

Showcase your work in Projects.js:

import React from 'react';

const Projects = () => {
  const projectList = [
    { name: "Project 1", link: "https://github.com/yourproject1" },
    { name: "Project 2", link: "https://github.com/yourproject2" },
  ];

  return (
    <section id="projects">
      <h2>My Projects</h2>
      <ul>
        {projectList.map((project, index) => (
          <li key={index}>
            <a href={project.link}>
              {project.name}
            </a>
          </li>
        ))}
      </ul>
    </section>
  );
};

export default Projects;

Contact Component

Provide contact options in Contact.js:

import React from 'react';

const Contact = () => {
  return (
    <section id="contact">
      <h2>Contact Me</h2>
      <p>Email: <a href="mailto:youremail@example.com">youremail@example.com</a></p>
      <p>
        Find me on: 
        <a href="https://linkedin.com/in/yourprofile">LinkedIn</a> | 
        <a href="https://github.com/yourgithub">GitHub</a>
      </p>
    </section>
  );
};

export default Contact;

4. Assemble Your Portfolio in App.js

Import and organize your components:

import React from 'react';
import Header from './Header';
import About from './About';
import Projects from './Projects';
import Contact from './Contact';

function App() {
  return (
    <div className="App">
      <Header />
      <main>
        <About />
        <Projects />
        <Contact />
      </main>
    </div>
  );
}

export default App;

5. Style Your Portfolio and Deploy!

Stay tuned, I am planning to write another blog post about CSS styling and launching your website via GitHub.

Would you like to see this project’s code in a GitHub repository? Let me know!

Creating My Pokémon Collection App: Local Data, Interactivity, and JavaScript Events

kelseyroche — Thu, 14 Nov 2024 20:00:11 +0000

Introduction

When I started this project, my goal was simple: to create a Pokémon collection app where users could explore Pokémon and their details. By combining JavaScript, Node.js, and local data, I built an interactive app that allows users to view Pokémon images, abilities, and types—all while refining my skills with event listeners, dynamic content updates, and more. While I worked on this with a partner, I am going to focus on my work specifically. Here’s how it came together!

Project Overview

This app is designed to showcase a collection of Pokémon images and stats, making it easy for users to click on each Pokémon to view details and switch between main and alternate images with hover interactions. I served the Pokémon data locally, which allowed me to focus on how to render, update, and interact with the data within the app itself.

Setting Up Local Data with `db.json`

Instead of pulling from an external API, I created a local db.json file with Pokémon data, including attributes like name, type, ability, and image paths. Running a local server on http://localhost:3500/pokemon, I could fetch this data using the fetch method in JavaScript. The simplified setup allowed me to build and test the app entirely offline.

Code Walkthrough

Here’s a look at how I approached key parts of the project.

Fetching Data: The first step was to fetch Pokémon data from the local server. I created a getAllPokemon function to handle the fetch request and return the Pokémon details in JSON format.

   function getAllPokemon() {
     return fetch(pokemonURL).then(response => response.json());
   }

This function pulls in the Pokémon data from http://localhost:3500/pokemon, which I then use to dynamically render each Pokémon.

Displaying Pokémon: To populate the collection, I used a displayPokemons function that iterates through the fetched Pokémon data and renders each item as an image. I also added a click event listener on each image, which opens up the Pokémon details when selected:

   const displayPokemons = () => {
     getAllPokemon().then(pokemonArr => {
       pokemonArr.forEach(renderPokemon);
       handleClick(pokemonArr[0]); // Display first Pokémon by default
     });
   }

The renderPokemon function creates an image for each Pokémon, adds styling, and attaches a click event to display details.

Event Listeners: Adding Interactivity I used two main types of event listeners in this project: a form submit listener for adding new Pokémon and mouseover/mouseout events to toggle between images. These listeners made the app more engaging and user-friendly.

Form Submission:

To add a new Pokémon, I set up a submit listener on the form, which gathers values from input fields and adds the new Pokémon to the collection. This new Pokémon is rendered without needing to refresh the page:

 pokemonForm.addEventListener("submit", event => {
   event.preventDefault();
   const newPokemon = {
     name: event.target.name.value,
     type: event.target.type.value,
     ability: event.target.ability.value,
     image: event.target.image.value,
     altImage: event.target.altImage.value,
   };
   renderPokemon(newPokemon);
   event.target.reset();
 });

Here, event.preventDefault() stops the form from reloading the page, ensuring a smooth user experience.

Mouseover Event for Alternate Images:

When users hover over the Pokémon’s image in the details section, it switches to an alternate image, simulating an evolution or transformation. The mouseover event triggers this switch, while mouseout reverts it back:

 function handleClick(pokemon) {
   const detailImage = el('detail-image');
   detailImage.src = pokemon.image;
   el('detail-name').textContent = pokemon.name;
   el('detail-type').textContent = pokemon.type;
   el('detail-ability').textContent = pokemon.ability;

   detailImage.addEventListener('mouseover', () => {
     detailImage.src = pokemon.altImage;
   });
   detailImage.addEventListener('mouseout', () => {
     detailImage.src = pokemon.image;
   });
 }

This effect gives users a fun way to interact with each Pokémon and visually explore its characteristics.

Challenges and Learning Points

One challenge was structuring the JavaScript to keep it modular and manageable, as event listeners and dynamic elements can quickly become hard to track. I learned to compartmentalize my code into smaller functions and to use event listeners selectively to optimize performance and readability.

Wrapping Up

This Pokémon collection project was an exciting way to apply JavaScript, experiment with local data fetching, and add engaging event-driven interactivity. Building this app from scratch gave me valuable experience with both front-end and back-end concepts, leaving me inspired to explore more interactive projects in the future.

Check out my project on GitHub!:

https://github.com/kelseyroche/phase-1-project-pokemon

Callback Functions

kelseyroche — Wed, 30 Oct 2024 16:54:39 +0000

Is learning about callback functions making you feel just like Sharpay?

Well, before we get into the technical stuff let's think about it in a more theoretical way: with cake! 🎂

Imagine you want to bake a cake for your friend's birthday. The day before their birthday you follow a recipe for the icing and put it in the fridge to sit overnight. Here, the recipe for the icing is the callback function. You're not using the icing yet, but it's waiting to be called on later!

The day of the birthday party you decide to pull up the cake recipe. It calls for flour, water, eggs, sugar, baking powder, salt, milk, and icing.

This recipe, or function, is using a bunch of variables and also that recipe, or function, for icing. It's calling back on that recipe you already created, or declared, earlier.

Ok enough about cake (sadly), let's get into the technical stuff:

At this point we are used to passing variables as arguments in a function. In Javascript, we can also use functions to pass as arguments in a new function. The first function is the callback function and that is the one being passed as an argument through the new function.

For example:

//callback function
function icing ( ) {
console.log("vanilla icing")
}

//new function
function cake (flavor, callback) {
console.log("My cake flavor is " + flavor);
callback();
}

//using the callback function as an argument
cake ("pumpkin", icing);

What do you think the result is here?

At the bottom of the code you can see that we called the cake function. Because we are passing through "pumpkin" as the first argument, we know that the console is going to log "My cake flavor is pumpkin"

The second part of this function uses the second parameter to call that function. When we are calling cake, we see that the second parameter we are calling is the icing function. The icing function wants us to console.log "vanilla icing."

Therefore, our console should read:

My cake flavor is pumpkin
vanilla icing

And there is our recipe for the callback function, enjoy!

Extra Challenge:
Try writing a function called decorate that takes a callback function to add decorations to a cake!

Other Materials:

https://www.programiz.com/javascript/callback
https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

DEV Community: kelseyroche

React Day 2025 – Hot Takes, Deep Dives & the Future of UI Engineering

🚀 Kicking Off With Kent C. Dodds: AMA Style

🎤 Top Talks

💥 Maya Shavin – “We Are React-ing Wrongly”

🧠 Tejas Kumar – “UI Engineering for the AI Age”

⚡ Leah Thompson – “Using React with Inertia.js”

🦻 Shruti Kapoor – “Building Accessible Web Applications in React”

🎯 Key Takeaways

Discover Your Dragon with the Threshing Quiz: A Journey into Coding and Fantasy

⚙️ The Tech Under The Talons

✨ Little UX Touches

🧪 What I Learned

A Beginner’s Guide to Drag-and-Drop with DnD Kit in React

🏗 Why Use DnD Kit?

🚀 Setting Up DnD Kit

🛠 Basic Drag-and-Drop Example

1️⃣ Setting Up the Context

2️⃣ Making Items Draggable

3️⃣ Enabling Droppable Areas

4️⃣ Handling Drag Events

🎨 Styling the Drag Effect

🔥 Advanced Features to Explore

🏁 Wrapping Up

Making Your CLI Applications Pop with Styled Outputs

Why Style Your CLI Outputs?

colorama

rich

Combining colorama and rich

6 Beginner Mistakes in Python and How To Fix Them

1. Misusing Indentation

2. Confusing Mutable and Immutable Data Types

3. Forgetting to Initialize Variables

4. Overwriting Built-In Function Names

5. Not Using List Comprehensions

6. Not Using F-Strings for String Formatting

Final Thoughts

One-to-Many and Many-to-Many Relationships in Python with SQLite

What Are One-to-Many and Many-to-Many Relationships?

One-to-Many

Many-to-Many

Implementing Relationships in Python with SQLite

Setting Up the Database

Connect to the SQLite database (or create one if it doesn't exist)

Create tables

One-to-Many: Teams and Athletes

Insert a team and athletes

To query all athletes on a team:

Many-to-Many: Athletes and Brands

Insert brands

Insert deals

To query all brands associated with an athlete:

Conclusion

Theming with Styled-Components

Introduction:

Why Theming Matters:

Setting Up Styled-Components for Theming:

Conclusion:

Resources:

Step-by-Step Guide: Parent/Child Components and Lifting State

Summary

1. Parent and Child Components

2. Lifting State Up

3. Why Lift State?

Reactify Your Resume! Build a Basic Online Portfolio in React

1. Set Up React

1. Plan Your Portfolio Layout

2. Build Your Components

4. Assemble Your Portfolio in App.js

5. Style Your Portfolio and Deploy!

Creating My Pokémon Collection App: Local Data, Interactivity, and JavaScript Events

Introduction

Project Overview

Setting Up Local Data with db.json

Code Walkthrough

Challenges and Learning Points

Wrapping Up

Check out my project on GitHub!:

Callback Functions

Setting Up Local Data with `db.json`