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

props in vue

```js <script setup> import { ref } from 'vue' import BlogPost from './BlogPost.vue' ...

Opinions about a design

I was looking through the projects I did during the odin project and I came across this. https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-homepage There are design photos given in the step one. I didn't question it at the time but doesn't this seem quite nightmareish from a dev perspective?...
No description

Thinking globally vs. specifically

Hi guys, I had an interesting discussion on Reddit about styling. The discussion was about thinking globally (styling all h1s, p, etc. the same) vs. using more specific selectors / approaches like BEM, scoped CSS, or utility classes. I was of the opinion that we should try to think globally first, and let the styles cascade down. If we have a component library, we can hope that most of the h1s will be similar, so they should share the same styles. If we need variations, like for a blog, we can give it a utility class: .h1--blog. The other commentor was of the mind that using global styles led to a lot of overrides and specificity issues down the road when building a large application. Especially when thinking about headings, there can be many variations and changing the global heading can have unintended side effects (I have this happen a lot actually)....

Dart Sass - Partial not included in Source Map

Hello guys, I'm using Dart Sass via the CLI to compile SCSS files to CSS. I have a setup like so: functions.scss:...

CDL-Workout - Looking for some help with styling this "portfolio project"

Yo! https://github.com/callum-laing/cdl-workout I've been messing with this for a few days as the original styling was horrendous (see image for screenshot from my portfolio)....
No description

How to recognise when we need the use of await keyword

Hello, consider this code: ```js async function onSubmit() { const url = "https://pokeapi.co/api/v2/ability/?limit=5&offset=5";...

¿How to have a transparent background on an `<object>` embedded SVG?

When SVGs are embedded into the page using an <img> tag, scripts don't run and user interactions don't work. Using an <object> tag fixes those issues, but causes the element to have a white background, regardless of the color-scheme value. What I'd really like is to allow SMIL & CSS user interactions, but limit script execution since I'll be displaying images from unknown sources. I know <iframe> has some sandboxing options, but also doesn't allow compositing....
No description

Template tag in HTML and its uses

Hello, didn't know that template was an html tag until now. Just read a bit about it. From what I've understood, we can think of it like a normal div element, it will be in the DOM ect except that its content won't be visible to the users. In order to make it visible, we must use javascript and "clone" it I think and this way it will be visible? Can someone confirm if the above statement is correct pls, feel free to add up to it if needed. Also, what about its use case? Why not just use a div with display being changed each time we need to make something visible or not pls...

How to truncate an element's title based on the contents' width?

I am working on a collaborative file system and am attempting to base part of the UI roughly on the Nautilus file manager from Gnome on Linux. I've only got bare bones functioning at the moment, but I'm having difficulty when the file name is long, and I would like to truncate it. I've got the style:...
No description

[Graphs?] Struggling figuring out the algorithm

Task: create the most city road repair plan with the least steps. Can only repair up to 2 roads at a time. If road disconnects any of the places it cannot be repaired. Input in u3.txt side result on the other....
No description

Webpage Accessibility Checker Tool

Hello, does anyone have any suggestions for a webpage Accessibility Checker Tool to check the Accessibillity Compliance of the webpages you build?

Is it better to have reusable classes or a single class for each element?

Should I make classes like bg-blue, padding-10px, etc., or group all properties of one element in one class? I tried to do the reusable classes approach but sometimes I need to do something that's specific to the element I'm working on. Should I do both? So an element can have some of these reusable classes and if needed, add a special class.

Git Branching - Sanity check my assumptions on how to action this?

I'll spend some time with Git Branching this week as I still haven't ever done it in a project. So far I know that I run the below code to create and move onto the branch
git checkout -b feature/add-todo
git checkout -b feature/add-todo
and once I'm happy with that, I then commit and push the code into the branch ```git commit -m "yay stuff"...

Newsletter subscription

Stupid question, but this email (see screenshot) is not correct, I did confirm, that I want to receive the newsletters, now it tells me I didn't. From this second email I did confirm it again. I click on the confirmation link, and it tells me "Your subscription preferences are updated" (last time and now the same way, so it looks like it works). Please, make sure that I am not getting unsubscribed, I absolutely want to keep receiving your newsletter....
No description

Portfolio hero section

Hey guys, I'm redesigning my portfolio. Now that I have some YOE under my belt, I kind of wanted to go for a more 'higher end' feel without being too over the top. It's not like I'm some $1m+ web dev agency lol. I really love the idea of adding motion inside these hero sections. I was thinking some type of b roll videos I can put in a ~10 second loop. I was thinking I could get some footage of myself coding or in a meeting etc., just showcase I'm a real human being. But I don't really have great lighting for this and I don't think it would look that great doing it myself....

Best way to learn.

Will simply just making projects that get progressively more difficult make me a better dev? I heard that the best learning comes from need based learning. I obviously know that I have to code code code, till my fingers grow callus(sarcasm... maybe). But is just simply making more and more projects going to actually make me better?

Grid layout - make last item span to the last column

I was thinking if there was a way to make dynamically the last element in a given grid to span to the last column of at the end there are some empty slots. I know that using ```css...

Design for a product and checkout page

Hello, I need to create a website based on a product and checkout page. I don't need to have a login, just a product page and checkout page (yeah it's weird but it's the requirements)... I was looking for a design for a product and checkout page. Here is what I've got, feel pretty nice, just wondering if there is anything I can modify in the image, what I can add/remove/modify please. What I need from the product page is the search bar, filter option and list of products. I was thinking of adding concept of pagination , only change list of middle products. For the track order and price details, I found this a bit useless, no? Can I add something else there? I don't have a design for the cart/checkout page yet....
No description

figma equivalent to col-span ?

i wanna know if there is an equivalent of col span, in case you don't know what that means, say for example i have a container that i want to divide on 3 cols, and i want the content of the second col to take width of 2 columns, so it takes col 2 and col 3 spaces, i know that i can divide it on 2 columns and simple resize the first col to be smaller, but i want it to be more dynamic so i dont have to resize columns manually , thanks