CDL Posts - Answer Overflow

CDL

Explore posts from servers

CC#KPCKevin Powell - Community NNuxt CDCloudflare Developers

•Created by CDL on 4/30/2025 in #help

React -> Vue Comparison

import CoreConcept from './CoreConcept.jsx';
import { CORE_CONCEPTS } from '../data.js';

export default function CoreConcepts() {
    return (
        <section id="core-concepts">
            <h2>Core Concepts</h2>
            <ul>
                {CORE_CONCEPTS.map((conceptItem) => (
                    <CoreConcept key={conceptItem.title} {...conceptItem} />
                ))}
            </ul>
        </section>
    );
}

import CoreConcept from './CoreConcept.jsx';
import { CORE_CONCEPTS } from '../data.js';

export default function CoreConcepts() {
    return (
        <section id="core-concepts">
            <h2>Core Concepts</h2>
            <ul>
                {CORE_CONCEPTS.map((conceptItem) => (
                    <CoreConcept key={conceptItem.title} {...conceptItem} />
                ))}
            </ul>
        </section>
    );
}

<template>
  <section id="core-concepts">
    <h2>Core Concepts</h2>
    <ul>
      <CoreConcept
        v-for="concept in CORE_CONCEPTS"
        :key="concept.title"
        v-bind="concept"
      />
    </ul>
  </section>
</template>

<script setup>
import CoreConcept from './CoreConcept.vue'
import { CORE_CONCEPTS } from '../data.js'
</script>

<template>
  <section id="core-concepts">
    <h2>Core Concepts</h2>
    <ul>
      <CoreConcept
        v-for="concept in CORE_CONCEPTS"
        :key="concept.title"
        v-bind="concept"
      />
    </ul>
  </section>
</template>

<script setup>
import CoreConcept from './CoreConcept.vue'
import { CORE_CONCEPTS } from '../data.js'
</script>

41 replies

KPCKevin Powell - Community

•Created by CDL on 4/30/2025 in #help

Web Dev concepts/tools - what's essential, and what's optional?

I won't lie, this is an LLM effort (you can see that by reading it), though I've given it as much input as I can... SO... because reading into this is getting overwhelming.. let's discuss! High Priority HTML5 – Semantic structure, forms, accessibility basics. CSS3 – Flexbox, Grid, media queries, responsive layouts. JavaScript (ES6+) – Variables, functions, promises, async/await, DOM manipulation. Git & GitHub – Version control, commits, branches, pull requests. React (or Vue) – Components, props/state, hooks (useState, useEffect), JSX. Basic Terminal Use – Navigating folders, running build/start commands. APIs & Fetching Data – fetch, handling JSON, loading states. Browser DevTools – Inspect element, network tab, JS debugging. Responsive Design – Mobile-first, breakpoints, testing different screen sizes. Medium Priority CSS Framework or Utility Library – Tailwind CSS (recommended), Bootstrap, or Sass. Form Handling – Controlled inputs, validation (React Hook Form or similar). Understanding HTTP & REST – Status codes, methods, headers. React Router (or equivalent) – Page routing and navigation. Component Libraries – shadcn/ui, Material UI, Radix UI. Package Management – npm, yarn, package.json. Environment Variables – .env, configuring per environment. Lower Priority Accessibility (a11y) – ARIA roles, focus management, keyboard navigation. Basic Testing – Unit testing (Jest), component testing (React Testing Library). Authentication Concepts – JWT, sessions, protected routes. State Management – Context API, Redux, Zustand, or React Query. Figma Basics – Inspecting designs, measurements, colors, spacing. Understanding Build Tools – Vite (preferred), Webpack, bundling basics. Simple Backend Knowledge – Node.js + Express, REST API basics.

20 replies

KPCKevin Powell - Community

•Created by CDL on 4/19/2025 in #help

Is this how Props work in React...?

Max just blew my mind and I'm not sure if that's an inexperience thing my end, or if he's doing something wonky.. He's created a button with an onClick event in TabButton.jsx, that function takes children and onSelect as props, there's then a function in app.jsx, handleSelect that displays the output, and the component is in app.jsx as <TabButton onSelect={handleSelect}>Components</TabButton> Am I going crazy here, or is this standard practise? lol - I removed some of the code in App.JSX as it wasn't relevant to the question TabButton

export default function TabButton({ children, onSelect }) {

    return (
        <li>
            <button onClick={handleSelect}>{children}</button>
        </li>
    );
}

export default function TabButton({ children, onSelect }) {

    return (
        <li>
            <button onClick={handleSelect}>{children}</button>
        </li>
    );
}

App.jsx

function App() {
    function handleSelect() {
        console.log('Hello World! - selected!');
    }
    return (
<menu>
    <TabButton onSelect={handleSelect}>Components</TabButton>
    <TabButton>JSX</TabButton>
    <TabButton>Props</TabButton>
    <TabButton>State</TabButton>
</menu>
    );
}

function App() {
    function handleSelect() {
        console.log('Hello World! - selected!');
    }
    return (
<menu>
    <TabButton onSelect={handleSelect}>Components</TabButton>
    <TabButton>JSX</TabButton>
    <TabButton>Props</TabButton>
    <TabButton>State</TabButton>
</menu>
    );
}

29 replies

KPCKevin Powell - Community

•Created by CDL on 2/20/2025 in #front-end

CDL's weekly question! - Positioning of Card items

4 replies

KPCKevin Powell - Community

•Created by CDL on 2/17/2025 in #front-end

Grid/Flex positioning - Image Grid?

10 replies

KPCKevin Powell - Community

•Created by CDL on 2/15/2025 in #os-and-tools

Hosting Godaddy(Yes, I know) domain on cloudflare.. issues once activated.

25 replies

KPCKevin Powell - Community

•Created by CDL on 1/24/2025 in #resources

git corruption when trying to add/commit/push - this works for me

find .git/objects -type f -empty -delete

git repack -a -d
git prune

git fetch --all

find .git/objects -type f -empty -delete

git repack -a -d
git prune

git fetch --all

TL:DR it'll clean the files, clean the repo then fetch the code again

2 replies

KPCKevin Powell - Community

•Created by CDL on 11/13/2024 in #resources

Git tutorial from Primeagen/Bootdev

https://www.youtube.com/watch?v=rH3zE7VlIMs

10 replies

NNuxt

•Created by CDL on 11/4/2024 in #❓・help

Following a code-along to learn Nuxt, seem to continuously encounter issues when installing modules?

Hey! I'm following a video on using nuxt with shadcn, it's only a few months old so I imagine it should be updated, however I appear to be receiving quite a lot of "npm warn" when installing modules, and I wondered if I can continue with this, or if i I need to be doing something to amend it..

8 replies

KPCKevin Powell - Community

•Created by CDL on 10/29/2024 in #ui-ux

Figma designs -> CSS code. Linear-fill background?

4 replies

KPCKevin Powell - Community

•Created by CDL on 10/29/2024 in #ui-ux

Styling Forms, Cards, and Navbars - opinions/helpful tips please :)

With or without a framework/lib, can y'all please help a newb out with some styling on these specific components, as I'm getting nowhere 😅 Can use my portfolio as an example of my current attempts at all 3. https://callum-laing.com/

29 replies

KPCKevin Powell - Community

•Created by CDL on 10/23/2024 in #os-and-tools

"bad object HEAD" when trying to commit changes to my git repo

140 replies

KPCKevin Powell - Community

•Created by CDL on 10/18/2024 in #front-end

Help a fella make his project section look better?

2 replies

KPCKevin Powell - Community

•Created by CDL on 8/14/2024 in #front-end

Trying to wrap my head around this example of list rendering in VueJS

I understand id starts at 0, there's a state variable for newTodo, and todos. In the function addTodos I can see we're pushing into the todos array with and id, and a new todo value.. the bit I'm confused on there is literally that array..

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

I understand id: id++, it's adding 1 to the value of id, so every time you add a todo, it'll be a number higher than the previous... but where/why is text: there and not just newTodo.value++ or something? and then why am I making newTodo.value = an empty string after the push method?

<script setup>
import { ref } from 'vue'

// give each todo a unique id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

// give each todo a unique id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

10 replies

KPCKevin Powell - Community

•Created by CDL on 7/26/2024 in #front-end

mobile view - scuffed?

6 replies

KPCKevin Powell - Community

•Created by CDL on 7/25/2024 in #ui-ux

Color combos for a site containing multiple inputs/buttons

9 replies

KPCKevin Powell - Community

•Created by CDL on 7/15/2024 in #front-end

CSS Grid - Span

6 replies

NNuxt

•Created by CDL on 7/10/2024 in #❓・help

new to Nuxt, are folders created manually after init?

I’m used to Next and Sveltekit, usually when I init a new project I start off with a pages/routes folder, src folder etc… however with nuxt I appear to start with files only, is this correct? If so, am I to create the pages and src folders and carry on as usual? Another question is regarding state, when should I learn Pinia? (Btw is this also used in vue??) seems like it’s the go-to for working with dynamic/reactive state, so I wondered if I should just go into it straight away, or learn the basics through the official docs first and then jump into it.

7 replies

KPCKevin Powell - Community

•Created by CDL on 7/2/2024 in #front-end

VueJS Navbar

42 replies

KPCKevin Powell - Community

•Created by CDL on 6/25/2024 in #os-and-tools

How to work on a project on 2 local machines?

I'll be working on projects on my laptop and desktop. I initially started it on my laptop. If I now fork/clone the github repo onto my desktop, make changes, then commit them, am I still doing the below on my desktop? git add . git commit git push -u origin master or is there something else I do on desktop, vs laptop?

23 replies

Gaming

Programming