francis Posts - Answer Overflow

francis

•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