CDL Posts - Answer Overflow

CDL

Explore posts from servers

CC#KPCKevin Powell - Community NNuxt CDCloudflare Developers

Posts Comments

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?

1 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

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

KPCKevin Powell - Community

•Created by CDL on 5/27/2024 in #os-and-tools

setting up Git/Github on 2nd console?

Pick up my laptop Wednesday, obviously want to try get everything synced as much as possible, with the GitHub repository I’ll have to clone them all onto the laptop so I get the local files; Is there anything I do with git? It’s been like 2 years since I’ve had to mess around with the config for GitHub or Git 😅

4 replies

CC#

•Created by CDL on 5/26/2024 in #help

best place to get started learning C# for web dev?

I’ve been learning C# fundamentals for a little while now and I’m trying to find a reliable tutorial or documentation (preferably a video tutorial) on building and learning C# for web dev. I get a little confused over which version it’s currently in, assuming because of my tag that it’s ASP.NET CORE? Also.. am I fine writing this one VSC, or is there an advantage to using VS? I write mostly react right now so I live in VSC. Thanks!

9 replies

KPCKevin Powell - Community

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

centering content inside a grid container?

6 replies

KPCKevin Powell - Community

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

React/Vite -> Trying to connect routes & components together through App.jsx

https://github.com/callum-laing/react-test-proj Clicking the Link at the bottom of the page does move us from http://127.0.0.1:5173 to http://127.0.0.1:5173/transition so the route is working, but the content isn't changing.. I thought it would show the component's content as I have the route path correct (I think) Edit: Is it to do with the content that is already on the page? does this need to perhaps be in a component and then rendered in also?

function App() {
  return (
    <Router>
      <div>
        <div className="intro">
          <h1>The Playground</h1>
          <p>Where we "test" whatever comes to mind.</p>
        </div>
        <div>
          <Link to="/transition">Transition Example</Link>

          <Routes>
            <Route path="/transition" element={<TransitionExample />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

function App() {
  return (
    <Router>
      <div>
        <div className="intro">
          <h1>The Playground</h1>
          <p>Where we "test" whatever comes to mind.</p>
        </div>
        <div>
          <Link to="/transition">Transition Example</Link>

          <Routes>
            <Route path="/transition" element={<TransitionExample />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

66 replies

KPCKevin Powell - Community

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

React + Vite Builds -what do you style in index.css and app.css?

1 replies

Gaming

Programming