CDL Posts - Answer Overflow

Topics

CDL

Explore posts from servers

CC#KPCKevin Powell - Community NNuxt CDCloudflare Developers

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

No description

4 replies

KPCKevin Powell - Community

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

Grid/Flex positioning - Image Grid?

No description

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.

No description

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

•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?

No description

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

No description

140 replies

KPCKevin Powell - Community

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

Help a fella make his project section look better?

No description

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?

No description

6 replies

KPCKevin Powell - Community

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

Color combos for a site containing multiple inputs/buttons

No description

9 replies

KPCKevin Powell - Community

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

CSS Grid - Span

No description

6 replies

•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

No description

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

KPCKevin Powell - Community

•Created by CDL on 6/25/2024 in #front-end

svelte logic (if else) - can you write this in the js? (potential very dumb question)

Basically I want to put a conditional in here so if count is == 0 then the decrement button vanishes (haven’t coded it as on phone).. I figured that’d be a conditional in the decrement function, and if it is do I write it as a typical js conditional, or a svelte conditional? ‘’’js <script> let count = 0; function increment() { count += 1; } </script> <button on:click={increment}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> {#if count > 10} <p>{count} is greater than 10</p> {:else} <p>{count} is between 0 and 10</p> {/if}’’’js

7 replies

KPCKevin Powell - Community

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

Grid layout to cover spacing with Header/Footer/Content

This is my attempt with a very basic layout... I have a flex version which I think is ok, but this is how I've managed the grid version.. https://codepen.io/Laing91/pen/dyEzGLo I realized the elements were stacking without flexbox, so I've flexed the child elements of the grid container so that they default to row and can be spaced out etc.. flex version if interested: https://codepen.io/Laing91/pen/WNWvagz

3 replies