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

Splexh

1/7/2024

Creating a Language Selector with Image Display Issue in HTML - Seeking JavaScript or CSS Solution

Hi, I'm working on creating a language selector where users can choose a country. Unfortunately, the images aren't showing up because HTML doesn't support displaying images in selection fields. Is there a way to overcome this using JavaScript or CSS to ensure the images are visible? Thanks in advance! <select name="" id=""> <option value=""><img src="images/germany.png" alt=""></option> <option value=""><img src="images/dominican-republic.png" alt=""></option>...

Ozzo

1/7/2024

How use Google Calendar API to insert an event in end-user's calendar with Next.js

Hello, I'm trying to setup a call to Google Calendar API to insert an event in end-user with Next.js but I'm drowning in the documentation. I'm stuck on the authentication of the end-user. Here what I've done till now : - I created a OAuth 2.0 ID Client from Google Cloud Console - Imported the .json file in my Next.js application...

☀🌸el capysarah🌸☀

1/7/2024

Why is the image getting chopped?

The image is getting stuck behind the scrolling div, i want it to pop infront of the scrolling div.. ` <div class="main-content"> <div class="main-content-scroll">...

1/6/2024

gradient text input outline border-radius?

Do you have a technique for giving a text input a gradient outline on focus that has a matching border-radius with the text input? I found a solution for the gradient outline using border-image on focus but this doesn’t allow a border-radius here is the CodePen with border-image, this is the effect I’m looking for I just want the gradient outline to have a border radius as well https://codepen.io/jq712/pen/KKEzmJK

Tenkes

1/6/2024

Next.js | What to use for icons?

Should I use <Image /> component from 'next/image' for icons or should I use something like react-icons for that instead?

One Feather

1/6/2024

Best way to "reorder" elements differently at different breakpoints

I have the following design I made for my portfolio hero and now that I'm going about coding it, I realize I made a bit of a problem for myself. In my desktop view, my CTA button arrives before my social links and the hand image is in its own layout section. In the mobile view, the social links seem like they would arrive first in the HTML and the CTA button after. I've decided I should switch over to trying to do my mobile side first today, as I had pretty much completed my hero focusing on the desktop view first. Here's the relevant HTML and SCSS, which works on desktop: ```html <section id="hero-section">...

Tamimul Islam

1/6/2024

How to achieve this effect? and what is the name of the effect?

hey there, I'm trying to achieve this effect with html, css. can you please tell me what is the name of this effect? and how to achieve this effect? can you provide any useful resource? thanks in advance....

Pi, a future fluent jp speaker

1/6/2024

Get ride of commas

I'm doing an english dictionary app, a problem I'm running into is: because of the map function, the code is displaying commas. I want to get ride of the commas, I thought about using "replace" but I'm afraid it will also replace the commas from the examples and definitions texts. Does anyone know how to do this or how to display the content in a better way?

𝓣 𝓪 𝓷 𝓬 𝓸 𝓿 𝓮

1/5/2024

How do do somethign liek that

How to do soemthign liek that

Nikita

1/5/2024

Why subscribe doesn't work with zustand?

why when state gets update subscribe doesn't work? ```ts const useCartStore = create(subscribeWithSelector(cartStore)) useCartStore.subscribe(...

AlgernonWasp (IGN: AlgernonWasp)

1/5/2024

How to only target text content of element?

I have a div that contains a number of spans as its children and also a bit of text. The text is not surrounded by any tags, something which I cannot change. How can I target (i.e. style) only the text contents of the div, but leave any children of the div untouched? (I hope I'm not overlooking something very obvious here...)...

Pat66

1/5/2024

Rebuild an animation

HI everyone I want rebuild this animation...

Samir Ghataney

1/5/2024

In flutter, Help me to extract data from qr scanner result

i used this plugin https://pub.dev/packages/mobile_scanner in my case it's works but here is my code ...

Racheal

1/5/2024

Request for a personal mentor

Hello, am Racheal and I have been struggling quite a bit with responsive design. My goal is to get better this year,so I need someone to guide me. Like maybe give me a task,then we can review it after a day or 2 . I feel like I learn better this way. And I am able to stay accountable and focused. I'd appreciate your help. Thanks...

Pat66

1/4/2024

About height in css

Hi everyone Sometime when I post some codepen and when I wrote his ```css...

1cec0ld

1/4/2024

CSS for variable length list to create new columns at a max count

I have a site that is fetching a list of items. That list can be 0, or up to 20 items, rarely more, the most I've seen is 42. I'm trying to organize them into a div such that if there are more than 10 items in the column, it starts a second column. At 20 items, it would start a third column. To further complicate things, each item consists of 3 "pieces" (ID, Description, Flag) that I'd like to align with the others in that column. ``` -------------------List Heading-------------------- ID1 Desc1 Flag1 ID11 Desc11 Flag11...

ASTRICK

1/4/2024

<hr/> turned to dot when render on website. How to fix it?.

jyotiogennavar

1/4/2024

how do I recreate this scroll animation in this website - https://musho.ai/

How can I create the smooth scroll animation which seems to slide on top of the hero section like in this website - https://musho.ai/

crazycatpot

1/4/2024

iPads/iPhones: problem with my Homepage

Hello everyone, first time poster here! So I'm a potter who has some html/css/js experience and I decided to challenge myself and redo my website from scratch, often following Kevin's tutorials for support.
Anyway, it's online and working pretty good except that my homepage has content that can't be scrolled on iPads and iPhones. There is content under an image slider that serves as my hero section, as well as the footer. I don't have either of those Apple devices, but I was able to confirm the problem with several friends who do. I thought it might be Safari, but the problem exists in other browsers as well! However it's not a problem on Android tablets or phones as far as I can tell, my homepage behaves as expected. On the iPads and iPhones the other pages of my site work as intended: the content is scrollable all the way to the footer.
I have no idea what could be causing this since it works on many other devices including iMacs and other Mac laptops. The address is https://www.patrickduclos.ca/en/index.html Any clues or insights you may have would be greatly appreciated as I am at a loss here. I checked using the devtools on my Win PC or Apple products emulator websites, but they all show my homepage as working fine....

Matt

1/3/2024

Collapse Nav (Broken)

Here's my current code: https://codepen.io/Matt-CopOffMatt/pen/eYXJBpN Currently, I'm having issues with my functionality for collapsing by clicking outside of the menu. The following check: ```...

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 🙂.