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

Browser Compatiablity

Is there a offline programs for Linux to check and show browser compatible with html&css code? I write in vs code and I check chrome browser and everything looks great. I go into Mozzila Fire Fox and everything is blow up. Fonts are larger, sections,div's nav's all get completey messed up. Any ideas what I can do or use for testing. I seen 10 products online, but they only address the devices and OS that they are running on. Is there a way to see a side by side comparison of both browsers...

how to center this? n00b question

Hi, I am a newbie to this, honestly, and i've come across this issue in css, seen in the image, where the icon isn't properly aligned with the text. How can I bring the icon font down to the center and raise the text font up? ```html <div> <div class="sidenav">...
No description

Favicon does not change, ans is saved as URI

In my project, I am doing the following <link rel="icon" href="/static/images/favicon.png" type="image/png"> but when I start the dev server and open page in browser I get this instead in the href attribute data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAA… RHf7T5+kcoOj13A0fAeYfXiVAltLHyZcAAAAASUVORK5CYII=...

how to add a max width for td and th?

Hi everyone, I have a table like the image, I want to add max-width to label column, but it does not work. Is there any solution to solve this problem?
No description

Nested `:has()` alternative

I'm hitting a bit of a roadblock. I'm building an obsidian theme, and I want to make a little bit of an out-of-spec "markdown feature". The problem I'm running into is conditionals with css selectors. I'm a huge fan of the :has pseudo-selector but it doesn't support nesting, which makes that I'm running into the following. Let: - An "empty line" is a line (.cm-line) with only one child of type br - An "overline" is a blockquote (.HyperMD-quote) surrounded by empty line siblings, followed by any heading (.HyperMD-header)...

Aria-pressed vs role="switch"

I have been reading about these a lot and I can determine the difference between these two. mdn says aria-pressed is supposed to be used for toggle "x" context, while switch is for specifically on and off semantic but these feel the same to me. ```js...

Use grid for this card component layout with tricky logo positioning

Hi there. I have been trying to convert a small component I use currently to use grid and wondered if people could help. Basically I ahve a small card, it contains an image at the top, and some text content underneath. I also have a logo which needs to be positioned 50% on and 50% the bottom of the image vertically with spacing left and right. The middle line of the logo should always sit on the bottom of the image. The image should be square and there should be enough space to each side of the logo. Approx 25% of the width of the component. In my demo codepen here : https://codepen.io/rctneil/pen/zxvbodx?editors=1100 - the logo should be approx 100px but it needs to all be flexible so it can flex if placed in slightly wider containers....

Runtime environment

I wanted to know what is a runtime environment, and why nodejs is called runtime environment for js. Don't c and cpp languages use it. And also is there a way I can improve my basic knowledge that includes these terms

Header components, z-lists and gaps

I'm creating a React component for a header, to be used in a page layout. It's going to be slightly glassy, and pinned to the top of the page. I would like there to be a gap at the top of the page so that on page load the top of the content is not hidden under the header. I've not done this before (I've had a roughly 20 year gap in doing web stuff), so I don't know if there's a convention for doing this. Is this usually done as part of header? This appeals to me because it's then encapsulated together. Is it usually done as 2 parts - the header and a gap for the header at the top of the content area? Does the answer depend on the rest of the layout? Does the answer depend on other things that I haven't even considered? (honestly, the most likely option). I think maybe the question is "what is it that I need to think about in order to answer this question?"...

Can there be pages without an H1 tag but multiple h2,h3 so on tags?

In the following image there isn't a main heading that can be h1. But all the articles have headings which can be h2 since h1 should only be used once per page from what I read on mdn. My question is that, is this good? or Should there just be an h1 heading titles Articles at the top...
No description

How to set up workspace (VSCode, Firefox / Dev Tools, etc.)?

This is a very basic question about setting up a convenient workspace. I'm a VSCode newbie but started using it instead of Phoenix because it seems a lot more powerful. Right now, I haven't figured out how to do "Live Preview" and I'm also thinking about starting to look at my work in Firefox because I want to start taking better advantage of Dev Tools. What I'm doing now is using VSCode, and then using Chrome to open the files as I work in the browser. This seems a little clunky. Is there a way to preview a site using Firefox "within" VSCode? ...

Problem with responsive image layout

Hi everyone, I’ve attached 2 pictures from a larger landing page that looks like a blog post. I’m coding this with vanilla CSS and I’m having trouble with the image layout. Here’s what I want: ...
No description

Element not taking up full width at lower sizes

How do I fix this. whenever I shrink my page down with the inspect element, instead of taking up the whole viewport everything just completely shrinks down. I've been working nonstop at trying to fix this. At first I thought the layout was the culprit but that doesn't seem to be the cause at all. This has been bugging me for a couple hours now. Does anyone have a solution for this?
No description

help with full page loader

hello there, i would like to know how I can implement the full page loader you can see in websites like this: https://v4.brittanychiang.com/ in NextJS, using Tailwind additionally, is there a way to use this in page transitions?...

CSS style tag question

i'm new with coding and just try github in github, i want to add css i do put file.css on the name so the question is, do i need put <style></style> or no in that css file???...

NodeJS API -> req.url.match initially only returned the else, but now only returns users[2]

```js import { createServer } from 'http'; const PORT = process.env.PORT; const users = [...
No description

NodeJS API -> Exact match on req.url.match not finding the users.id

```js import { createServer } from 'http'; const PORT = process.env.PORT; const users = [...

Running POSTMAN Post/Get Requests in a Node.js server - issues with app crashing

``` import http from 'http'; const PORT = process.env.PORT; const server = http.createServer((req, res) => {...
No description

Dev site vs. production site

These are some very, "You are clearly new at this," kinds of questions, but I have never had the opportunity to get hands-on experience in a proper dev/production environment. I've only had experience with my own projects, so I've just been doing things my own way. At the moment, when I want to make a change to my website, I do what I need to locally, and then to "push to production" I just drag and drop the relevant folders onto the server and carefully avoid adding anything to the production site that's specific to my local dev version of it. This is obviously not how you do that, but I don't know what the alternative is or how to set it up. ...

Stop Safari Auto Zooming Form Fields

Is the only way to prevent safari from auto zooming on form fields to set the font size of the fields to be at least 16px? I tried adding the meta tags as suggested here https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone but auto zooming still continues to happen It seems slightly ludicrous to me that increasing the font size is the only solution...