KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

Sumanraj Bera

11/17/2024

Please review my responsive design layout

I recently completed building the responsive layout for the assignment from Kevin's Course Here's the github link: https://github.com/Samtheblackdragon/Responsive-Design-Layout-1.git And here's the webpage link: https://samtheblackdragon.github.io/Responsive-Design-Layout-1/ It has two media queries as suggested in the assignment which are at 700px and 1100px. Your input/review will help me improve ....

Faker

11/17/2024

How to use Fetch API in JS

Hello guys, sorry to disturb you all; I have just learnt about the fetch API in JavaScript. I understand what it does in terms of asynchronous loading, like having new content displayed on a web page without having to reload the page but I don't really know how to use it, like the arguments it take, what we can do etc... Is there a small project that I can do just to make me more comfortable with that please. Also, while digging into the fetch API, I came across the term "axios"; is that a library that is more performant than the fetch API ?...

Faker

11/17/2024

What is the difference between text node and textContent ?

Hello guys, sorry to disturb you all; I was just reading about some DOM APIs and came across text node; what is it? is it the same thing as textContent ?

Xan

11/17/2024

Nesting media queries in non-media query

I see https://developer.mozilla.org/en-US/docs/Web/API/CSSNestedDeclarations#css does this, but "CSSNestedDeclarations" is only supported by less than 50% of browsers. (https://caniuse.com/mdn-api_cssnesteddeclarations) Is it ok to put a media query inside the declaration block of another regular selector? ```css nav {...

baba

11/16/2024

Facing Issues with @container query or container-type

I am trying to create a message bubble where i was testing out what if the message is one-liner so i've noticed that one of the pseudo elment was overflowing out of the div which is because of its absolute postion which is mandatory too, to have the rounded corners, however I wanted to fix it using @container query where i can see that it is not getting the auto height because of which query that i added is also failing. here's the codepen thought Thanks in advance friends!! codepen: https://codepen.io/raj-shukla/pen/zYgXqrY?editors=1100...

fatihinn

11/15/2024

React reducer giving error

Although the value returned to me should be 8 categories, the returned value is undefined and returns 0. When called with an action of type "GetCategoriesSuccess", the slice reducer for key "categoryListReducer" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined. actionTypes.js...

FROSTYTIPS

11/15/2024

Scrolling to an element on the same page - screen size issues

Hi all, I'm creating a navbar that scrolls to items on the same page, i.e. 'contact' will scroll to the #contact section, 'about' to #about etc. I haven't started yet but I remember this being messy, having to implement scroll-margin-top/similar js solutions when the snap was off slightly - this would get even messier when having to accommodate for different screensizes. ...

snxxwyy

11/15/2024

dl vs ul/ol

Hey, could somebody please explain the difference between a description list and general list and common use cases for a dl? Is the only difference that dl should be used for list items with a description? Thanks in advance....

forlorn_died

11/15/2024

User info across pages

I just want to ask an advice on how to consistently have the users info across pages, in my ways currently on each page/component I query on database to get some information, and just pass the idea of the user for querying, so maybe there could be another way

Faker

11/15/2024

Cookies, Sessions and Tokens

Hello guys, sorry to disturb you all; I'm trying to make sense of those terms but they are not that clear. From what I have understand: - Cookies: Use to store some data like user preference (like dark/light mode) - data persist even though browser is closed because data is stored on local machine; this has an expiry date. - Session: Use to store data while the user is browsing; keep track of what user is doing such as logging in/shopping etc. (I'm still confused about that though, when we say keeping track of what user is doing, this seems vague)...

Raheel

11/15/2024

Using different resources to style pages #

For styling HTML/web pages, can we use different libraries/resources at the same time? For example, we may like to use navbar from bootstrap and use tailwind CSS to style other components and at the same time use pure CSS for other components on the same page. Will this be possible or will it create conflicts?

Simon

11/15/2024

CSS – building a cohesive spacing economy in website projects

This is a principle and etiquette question. -# kind of like the mobile-first topic A thing that bugs me with every project is setting ground stones for default CSS properties that come with HTML elements. Do I eliminate all vertical spacing, do I only remove e.g. margin-bottom, on which elements do I remove them, how do I deal with first- and/or last-child ~...

snxxwyy

11/15/2024

inset behaviour

Hey, I have a position: fixed; header and a .wrapper class for this example. I wanted to center the header on the page with the inset property (top, bottom, left, right works too). However when i use inset: 1em auto 0 auto; which i assume to have the top, bottom, left and right order, it doesn't work, instead i have to do inset: 1em 0 auto 0 which doesn't make sense to me. the 1em is to space it from the top of the page but since i don't want any space at the bottom i would put 0 instead of auto but that stretches it for some reason which also confuses me. That only works if the .wrapper class is directly applied to the header. If it's wrapped in it my flex on header doesn't work and the content seems to get really long if you hover over it in dev tools. I'd appreciate any help explaining this. Thanks in advance....

vic

11/15/2024

how to calculate border values based on height and width in css for loaders

https://codepen.io/Vicky-clowdy/pen/GRVeYqy In this code i set 50px for height and width and set 8px for border So currently I create basic loaders for my project in react as re usable so I can reuse ...

Lexi

11/15/2024

CSS Grid not resizing on media query with new grid-template-columns

Full disclosure: I'm working in react using react.modules.css file structure. I originally set up my grid-template-column as 1fr 1fr auto 2fr and I'm trying to change it to just a 1fr 1fr structure at smaller screen sizes. Not entirely sure what I'm doing wrong. https://cherished-moments.vercel.app/ current deployed version of the code....

Jono Lewarne

11/14/2024

Could these scalable backgrounds be made with css?

I'm pretty inexperienced with css backgrounds and it always amazes me what people who are experienced with them can create. So I'm curious whether the top 3 shapes could be made in a way that easily scales to accommodate the content like in the two examples beneath the 3 shapes without the need for magic numbers etc

smackalpha

11/14/2024

How to make text color adapt to progressbar

I am making a custom progress bar. In the center of bar, text is center. As the progress fill, text color should be black on filled side and white on unfilled side. is that possible? i have attached the figma image and my output image. I dont know how to make that text color change based on background. Can anyone help me Codesandbox Link: https://codesandbox.io/p/sandbox/react-new?utm_source=dotnew ...

FROSTYTIPS

11/14/2024

Responsively fitting text to full width of container

I want to create a title where the font size dynamically increases/decreases to fit the full width of the container, which also responds to changes in screen size. After poking about on stackoverflow and not really finding a one size fits all solution, I'm wondering instead if there is a package for this? Thanks a lot!...

Samson Ameh

11/14/2024

What approach can I use to achieve this using tailwindcss in my react project?

I have tried using positioning but the spacing between the contents and shapes are not matching the design especially when I tried designing for the tablet screen size. Thanks in advance for your assistance

Dev_HK

11/14/2024

why isn't overflowX:hidden isn't being applied when toggling device toolbar

so i want to test the design breakpoints so that i can apply the different break points; but something bugs me; the device toolbar (the thing that had a laptop & mobile icon in the chrome devtools) isn't respecting the overflowX:hidden; rule applied in body; i wanna do responsive but i don't know how to do it if i can't focus...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.