francis Posts - Answer Overflow

francis

•Created by francis on 10/29/2024 in #front-end

State

why does the alert does not get the latest value while the 2nd setter function does?

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
      setNumber(number => number + 5);
      setNumber(number => number + 5);
      alert(number);
      }}>+5</button>
    </>
  )
}

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
      setNumber(number => number + 5);
      setNumber(number => number + 5);
      alert(number);
      }}>+5</button>
    </>
  )
}

1 replies

KPCKevin Powell - Community

•Created by francis on 8/11/2024 in #front-end

nested scss, css

why does the nested scss not working but plain css does? working

            .text-container {
                &:hover {
                    .text-container__name {
                        background-color: blue;
                    }
                }
            }

            .text-container {
                &:hover {
                    .text-container__name {
                        background-color: blue;
                    }
                }
            }

not working

            .text-container {
                &:hover {
                    &__name {
                        background-color: blue;
                    }
                }
            }

            .text-container {
                &:hover {
                    &__name {
                        background-color: blue;
                    }
                }
            }

6 replies

KPCKevin Powell - Community

•Created by francis on 8/9/2024 in #front-end

Failed to resolve component

Anyone can help me what's the problem? It's working fine but when i go to the console this error show

[Vue warn]: Failed to resolve component: Section
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <AboutUs> 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <SimmerStudios onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[Vue warn]: Failed to resolve component: Section
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <AboutUs> 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <SimmerStudios onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[Vue warn]: Failed to resolve component: Section
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <LastSection> 
  at <SimmerStudios onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

[Vue warn]: Failed to resolve component: Section
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <LastSection> 
  at <SimmerStudios onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Routes

    {
      path: '/simmer-studios',
      name: 'simmer-studios',
      component: () => import('../views/SimmerStudios/SimmerStudios.vue'),
      children: [
        {
          path: '',
          name: 'simmerStudiosHome',
          component: () => import('@/components/SimmerStudios/Home/HomeView.vue')
        },
        {
          path: 'works',
          name: 'simmerStudiosWorks',
          component: () => import('@/components/SimmerStudios/Works/WorksView.vue')
        }
      ]
    },

    {
      path: '/simmer-studios',
      name: 'simmer-studios',
      component: () => import('../views/SimmerStudios/SimmerStudios.vue'),
      children: [
        {
          path: '',
          name: 'simmerStudiosHome',
          component: () => import('@/components/SimmerStudios/Home/HomeView.vue')
        },
        {
          path: 'works',
          name: 'simmerStudiosWorks',
          component: () => import('@/components/SimmerStudios/Works/WorksView.vue')
        }
      ]
    },

SimmerStudios.vue

<template>
  <MainNav />
  <main class="main">
    <RouterView />
    <LastSection />
    <FooterSection />
  </main>
</template>

<script>
import MainNav from "@/components/SimmerStudios/MainNav.vue";
import LastSection from "@/components/SimmerStudios/LastSection.vue";
import FooterSection from "@/components/SimmerStudios/FooterSection.vue";

export default {
  components: {
    MainNav,
    LastSection,
    FooterSection,
  },
};
</script>

<template>
  <MainNav />
  <main class="main">
    <RouterView />
    <LastSection />
    <FooterSection />
  </main>
</template>

<script>
import MainNav from "@/components/SimmerStudios/MainNav.vue";
import LastSection from "@/components/SimmerStudios/LastSection.vue";
import FooterSection from "@/components/SimmerStudios/FooterSection.vue";

export default {
  components: {
    MainNav,
    LastSection,
    FooterSection,
  },
};
</script>

1 replies

KPCKevin Powell - Community

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

Nested Routes

Based on this example, when I visit the '/user' path, nothing is displayed unless I go to one of its children, like '/users/eduardo' do i need to define a separate route for '/user'.?

import { createRouter, createWebHistory } from 'vue-router'
import User from './views/User.vue'
import UserHome from './views/UserHome.vue'
import UserProfile from './views/UserProfile.vue'
import UserPosts from './views/UserPosts.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/users/:username',
      component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /users/:username is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /users/:username/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /users/:username/posts is matched
        { path: 'posts', component: UserPosts },
      ],
    },
  ],
})

import { createRouter, createWebHistory } from 'vue-router'
import User from './views/User.vue'
import UserHome from './views/UserHome.vue'
import UserProfile from './views/UserProfile.vue'
import UserPosts from './views/UserPosts.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/users/:username',
      component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /users/:username is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /users/:username/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /users/:username/posts is matched
        { path: 'posts', component: UserPosts },
      ],
    },
  ],
})

1 replies

KPCKevin Powell - Community

•Created by francis on 8/3/2024 in #front-end

Favicon Not Updating in Google Search Results

I recently published my website with Vercel and am using a Hostinger domain. The favicon is working on the site, but in Google search results, it still shows the default Vue favicon. Why? I published it a day ago my code:

<link rel="icon" type="image/png" href="/favicon.png" />

<link rel="icon" type="image/png" href="/favicon.png" />

6 replies

KPCKevin Powell - Community

•Created by francis on 8/2/2024 in #front-end

robots.txt is not valid

4 replies

KPCKevin Powell - Community

•Created by francis on 6/8/2024 in #front-end

How do I prevent the css in home route from affecting the css in another route component

So i have "/" with multiple components and now i will create new route "/simmer". The problem is the css of home route is affecting the component(s) in "/simmer", how do i prevent it? any suggestions or best practices?

4 replies

KPCKevin Powell - Community

•Created by francis on 5/30/2024 in #front-end

Dark Mode with Vue

Hello guys, is it good idea that i use class binding in dark mode feature with vuejs? Any Suggestions, Recommendations, Opinions?

1 replies

KPCKevin Powell - Community

•Created by francis on 5/28/2024 in #front-end

CSS prefix

Hello everyone, I need some opinions or suggestions. How do you determine when to use CSS prefixes? Which approach is more commonly used by developers: manually adding vendor prefixes or using a third-party tool like Autoprefixer

4 replies

KPCKevin Powell - Community

•Created by francis on 4/20/2024 in #front-end

Media query not working

any one can explain, why it is not working?

// my styles
.style{
  h1{
    color: blue;
  }
}

// media query not working wihtout !important
@media (max-width:900px) {
    h1{
        color: red;
        // color: red !important;
    }
}

// my styles
.style{
  h1{
    color: blue;
  }
}

// media query not working wihtout !important
@media (max-width:900px) {
    h1{
        color: red;
        // color: red !important;
    }
}

10 replies

KPCKevin Powell - Community

•Created by francis on 4/17/2024 in #front-end

v-bind modifiers

I know this is not code related problem but i want to know, how to use or when to use the v-bind modifiers .camel, .prop, .attr. I am still confuse about it Can y'all provide example code of it

2 replies

KPCKevin Powell - Community

•Created by francis on 4/6/2024 in #back-end

npm json-server

Hello guys, currently i am using fake api of npm json-server. How can i create a custom endpoint because in my db.json i have nested object array and i want to have an endpoint to the child array of my db.json because i only have endpoint to the parent object array I'm Noob, correct me if i use wrong term

{
  "users": [
    {
      "id": 1,
      "name": "John",
      "age": 30,
      "posts": [
        {
          "id": 101,
          "title": "First Post",
          "content": "This is the content of the first post."
        },
        {
          "id": 102,
          "title": "Second Post",
          "content": "This is the content of the second post."
        }
      ]
    },
    {
      "id": 2,
      "name": "Alice",
      "age": 25,
      "posts": [
        {
          "id": 103,
          "title": "Another Post",
          "content": "This is another post by Alice."
        }
      ]
    }
  ]
}

{
  "users": [
    {
      "id": 1,
      "name": "John",
      "age": 30,
      "posts": [
        {
          "id": 101,
          "title": "First Post",
          "content": "This is the content of the first post."
        },
        {
          "id": 102,
          "title": "Second Post",
          "content": "This is the content of the second post."
        }
      ]
    },
    {
      "id": 2,
      "name": "Alice",
      "age": 25,
      "posts": [
        {
          "id": 103,
          "title": "Another Post",
          "content": "This is another post by Alice."
        }
      ]
    }
  ]
}

2 replies

KPCKevin Powell - Community

•Created by francis on 3/29/2024 in #front-end

http request, json-server

hello guys, using http patch how can i modify only certain todo items within the todo array? Example i want to update only the taskName of the 1st array of todo I am using axios Endpoint: http://localhost:3000/tasks/1

{
  "title": "title",
  "todo": [
    {
      "taskName": "task 1",
      "checked": false
    },
    {
      "taskName": "task 2",
      "checked": false
    }
  ],
  "id": 1
}

{
  "title": "title",
  "todo": [
    {
      "taskName": "task 1",
      "checked": false
    },
    {
      "taskName": "task 2",
      "checked": false
    }
  ],
  "id": 1
}

4 replies

KPCKevin Powell - Community

•Created by francis on 3/22/2024 in #back-end

Patch request Error, json-server

Anyone can help me what is the problem of this: The get request is working using the user_num property as identifier and not the id. but when i use it in patch it returns 404 not found Get Request: axios.get('http://localhost:3000/users?user_num=US24-18') .then(function (response) { // handle success alert('sucess') console.log(response); }) .catch(function (error) { // handle error console.log(error); }) Patch: axios.patch('http://localhost:3000/users?user_num=US24-18', { userStatus: 'active' }) .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); });

4 replies

KPCKevin Powell - Community

•Created by francis on 3/19/2024 in #front-end

Frontend Development

Hello guys, Any suggestions which approach offers better readability, maintainability, and faster performance in front-end development: using plain CSS, a CSS preprocessor, or a CSS framework?

34 replies

KPCKevin Powell - Community

•Created by francis on 2/19/2024 in #front-end

Sass/SCSS

Hey everyone, I'm just starting out and trying to wrap my head around Sass/SCSS. So far, I've gathered that it helps make CSS more structured and readable. But am I missing something? Is there more to it than just a syntax tweak for better readability?

6 replies

KPCKevin Powell - Community

•Created by francis on 2/17/2024 in #front-end

Content Width on Websites

I'm curious why content on certain websites doesn't expand beyond a certain width on larger screens. Is this intentionally designed as part of responsive design, or is there another common practice for controlling the maximum width of content?

8 replies

KPCKevin Powell - Community

•Created by francis on 2/11/2024 in #front-end

flexbox

In flexbox, whats the difference between setting justify-content to flex-start and start?

2 replies

Gaming

Programming