Kevin Powell - Community

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

help

Does chrome support the preloading of tiff images ??

i want to know does the chrome support the preloading of tiff images like any other image format jpg png

Simple Sass @extends and % issue

I'm probably doing something stupid, but I have the following code: ```css %list { @include mixins.reset-list();...

Timer is BUGGED

Hey, I am trying to build a Pomodoro clock. When I click in the "start" button everything works perfectly and the times begin from 25:00min until 00:00. And when I click in the "paused" button, it pauses as expected. BUT, if I click multiple times in the start/paused button, it starts behavior strangely, like the timer start and stop rapidly or skips over parts of the countdown altogether, mostly in the seconds... How can I solve it? https://codepen.io/ssstephanyyy/pen/vYVydRz...

optimized way to create a multiple modal/popup

i have about 2-3 modal and 5/6 pop up in my project. How would you design them? stack all on top of each other ? or stack them in a single page and take advantage of display block/none?

vanilla javascript to make component-based UI

I'm working on a side project at the moment, which is a boardgame. I already implemented the complete game to be usable via CLI but now I want to make a web-interface as well. I was wondering whether it'd be feasible to make that component-based without any of the big frameworks (angular/react/vue/svelte) as long as i combine it with RxJS to handle the events and DOM manipulation. And if feasible, how you would approach building these components (e.g. regular HTML files scattered all over the place, ...)...

Javascript for different pages.

I've a single file of js with multiple scripts for different pages. Issue is I'm getting one element on a page that is not available on the other page, because of that the script of that page doesn't work. What should be the approach here. Make a different js files for different pages. Or is there another way.

Writing modular Sass professionally

Hey! I have some questions regarding writing professional Sass in terms of being readable, maintainable, and scalable. I'm at that point in CSS where I can make a lot of different layouts and websites, but writing it professionally is the hardest part. I try to make everything reusable with mixins but I'm just finding it really hard to think about all the different use cases when I'm writing them. I know you shouldn't over-engineer things before you've even written code, but I'm finding mysel...

How do I approach this?

Please, anyone who can help me out on how to approach the right side of the hero section. And to also make it responsive. Thanks

Sticky footer

Im trying to follow one of Kevins tutorials but I'm yet again, to dense to figure out what I'm doing wrong. My footer gets sent to the bottom screen, but when i scroll down, it stays: https://codepen.io/d0kefish/pen/eYPdqqJ ...

Is it possible to change the styling of a parent element when focusing on a child element?

I'm trying to change the background-color of the parent element when focus is applied to a child <input> element. When looking around I've only found solutions that involve changing an element that comes after the first element. My code: ```css <div class="checker-input">...

overflow-x on the body element does not work

Hey! I have been working on this project: https://64401877a3e55700863fec85--super-daffodil-7196e0.netlify.app/ (You should view it in responsive mode at 375px preferably to see the issue)...

position fixed and width of element

I am struggling with the width of my element which makes website background blurry. I created animation with p5js and wanted to blur it, so I added a div which covers the entire page using this code: ```css #app { display: grid; flex-wrap: wrap;...

whats wrong with this. background-color: rgba(var(--label-blue), 0.2);

i saw this type of code in stackoverflow and thought it was a best idea to implement it in my project but for someone reason its not working. browser support is limited or did i made mistake somewhere ?...

How to fix outline overlap?

HTML ``` <div> <button>A</button> <button>B</button>...

QUICK poll on multiple class names for same element

quick poll guys. recently i have been using multiple classes for same element eg <div class= "parent flex fd" > where flex and flex-direction properties are defined on css. the idea was to reduce the coding by reusing properties like bootstrap. someone said its really bad practice and you have give each properties on css so some other developer wont have to suffer Anyone else does stuff like this?...

How do I structure the HTML for this?

I'm not able to decide how to proceed with the HTML sturcure. If I use left wrapper for headings and right wrapper for description , in mobile view these two wappers are switching to single wrapper with heading and description on top of each other. Should I hide the hide the headings in desktop and make them visible in mobile?...

How can I create this layout?

I want to have a layout which in desktop has 2 columns on the left side there are some texts, fields and is a submit button, on the right side just some texts but I want on small screen to have just one column where the right column would go between the texts and submit button of the left side, In this example I can't make the button go right below the red section and not have all that space in between. Here is also the link to the sandbox https://codesandbox.io/s/peaceful-pare-jttq33?file=/src/styles.css...

Rating stars on svg

Good day! wanted to know how to fix svg rating issue. 1) Filling the stroke with a different color than specified in the styles 2) Clipping stroke along with the star 3) The offset of the gradient is different from the example with 5 stars https://codepen.io/Mister-Eighth/pen/KKGgPPp...

Keep rotated object inside parent on X axis

Hi all. I'm struggling with this rotated DIV inside it's parent. On the Y axis it's okey for the child to overflow. But on the X axis I want the child to stick to the right border. How can I achieve this? https://codepen.io/commproNL/pen/gOBMeNX...

How to create restrict absolute positioned element from leaving grandparent's boundary?

I have an element that displays a value range and a text bubble above it that communicates where the value lies in the range. When the value is in the middle of the range, I would like the text centered on its pointer and if it is near the edge, I would like the text to shift to contain itself within the grandparent's boundary. How can I contain the grandchild within the grandparent's boundary? This is what I have so far. I can get what I need it to do until the value is near the boundaries where I need the text to be off-center of the arrow ```...