Chris Bolson
Chris Bolson
PostsComments
KPCKevin Powell - Community
Created by ℳ𝒽𝓮𝓮𝓉𝓾 ✔ on 11/12/2024 in #front-end
Radial Progressbar w/Rounded Square Caps?
Using SVG circles you could create 3 circles for the "progress", giving the outer 2 a stroke-linecap="round"and the center one a stroke-linecap="butt" (flat). You would need to adjust the radius and stroke-dasharray of each of the circles to create the illusion of a single bar with the "rounded square" caps you require. A demo using JS to calculate the different stroke-dasharray: https://codepen.io/cbolson/pen/abeXJGv
11 replies
KPCKevin Powell - Community
Created by theseeker on 11/11/2024 in #front-end
Image Positioning
you could also use clip-path to hide it.
10 replies
KPCKevin Powell - Community
Created by Nibelung Valesti on 11/7/2024 in #front-end
Two Column Layout, but the other one goes to edge.
It would be best if you shared your code on Codepen or similar. Other wise it is just guess work. Sorry, I miss-read this post.
7 replies
KPCKevin Powell - Community
Created by peterpumkineaterr on 11/7/2024 in #front-end
how to center a <div> ?
You have a couple of issues which are preventing this from happening and nothing that would actually enable it to happen. On the .logo you have 
display: flex;
flex: 1;
display: flex;
flex: 1;
This is telling the logo to take up all of the available space so it is pushing the "time" element right over as far as possible. Then, in your media query for screens over 968px you have this: 
 justify-content: center;     /* Center items horizontally */
 justify-content: center;     /* Center items horizontally */
As your comment correctly indicates, this is pushing them to the center, however it is attempting to push both of the elements (logo and time) to the center which is not what you want (it is currently failing to do this due to the previous issue with the logo extending to fill the full available space). Note - in your media queries you don't need to redefine properties that don't change. As with most things, there are several ways that you could achieve this. For example, to continue with flex, you could an "empty" element after the time element. This could be added as a pseudo element so as to avoid adding extra markup. Then `justify-content: between;' should place the time element in the center. Note - You would need to ensure that this "empty" element had the same width as the logo. Alternatively you could use grid, giving it 3 columns. This would avoid the need to add any extra markup or pseudo element, something like this on the .header (in your max media query block): 
display: grid;
grid-template-columns: 1fr 2fr 1fr;
align-items:center;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
align-items:center;
4 replies
KPCKevin Powell - Community
Created by Faker on 11/6/2024 in #front-end
How to prevent an array storing items from local storage from initializing each time
You need to check if the localstorage array contains data rather than just declaring an empty array, something like this: 
let array_of_items = JSON.parse(localStorage.getItem('array_of_items')) || [];
let array_of_items = JSON.parse(localStorage.getItem('array_of_items')) || [];
17 replies
KPCKevin Powell - Community
Created by empty on 11/5/2024 in #front-end
how to select the last div that has class 'visible' in a container using CSS selector?
So changing that "1" to a "2" would select the penultimate element with the class .visible, interesting! I need to explore the "of" syntax more 🤔 
.container > :nth-last-child(2 of .visible){
  color:red;
}
.container > :nth-last-child(2 of .visible){
  color:red;
}
9 replies
KPCKevin Powell - Community
Created by Vito on 11/6/2024 in #front-end
How does uniqlo maintain video placement on their site while vertically resizing?
From your video capture that just looks like position: fixed
3 replies
KPCKevin Powell - Community
Created by Faker on 11/3/2024 in #front-end
How to fetch images from online stock image website like unsplash and use them
Take a look at https://picsum.photos, that might suit your needs.
4 replies
KPCKevin Powell - Community
Created by Faker on 11/3/2024 in #front-end
How does the object-fit property works on images
Just to add to Jochems answer, both “cover” and “contain” maintain the original aspect ratio of the image. That is to say, the image won’t be distorted.
51 replies
KPCKevin Powell - Community
Created by peterpumkineaterr on 11/3/2024 in #front-end
how to make this div responsive ?
You can achieve this with flex
10 replies
KPCKevin Powell - Community
Created by peterpumkineaterr on 10/31/2024 in #front-end
I accidentally made complex portfolio design, i don’t know how i should develop it in css.
Something like this should work: 
a{
  text-decoration: none;
}
.active,
a:hover{
  text-decoration: underline;
  text-underline-offset: 10px;
}
a{
  text-decoration: none;
}
.active,
a:hover{
  text-decoration: underline;
  text-underline-offset: 10px;
}
// select links - this may well need to be more specific
const links = document.querySelectorAll("a");
links.forEach(link  => {
 link.addEventListener("click", () => {
    // remove class from current active link    
    const activeLink = document.querySelector("a.active");
    if (activeLink) activeLink.classList.remove("active");
    
  // add "active" class to clicked link
    link.classList.add("active");
  })
})
// select links - this may well need to be more specific
const links = document.querySelectorAll("a");
links.forEach(link  => {
 link.addEventListener("click", () => {
    // remove class from current active link    
    const activeLink = document.querySelector("a.active");
    if (activeLink) activeLink.classList.remove("active");
    
  // add "active" class to clicked link
    link.classList.add("active");
  })
})
40 replies
KPCKevin Powell - Community
Created by peterpumkineaterr on 10/31/2024 in #front-end
I accidentally made complex portfolio design, i don’t know how i should develop it in css.
you will probably need JS for that.
40 replies
KPCKevin Powell - Community
Created by jsv_1991 on 11/1/2024 in #front-end
Mobile Landscape View Text Issue
I suggest that you put the relevant code in a Codepen or similar so that it will easier for somebody to identify the issue.
9 replies
KPCKevin Powell - Community
Created by peterpumkineaterr on 10/31/2024 in #front-end
I accidentally made complex portfolio design, i don’t know how i should develop it in css.
You can define the underline offset distance with: 
text-underline-offset: 10px;
text-underline-offset: 10px;
40 replies
KPCKevin Powell - Community
Created by R.I.P on 10/28/2024 in #front-end
random number and tracking them / sending signal via keyframes
This is why it would so much simpler to move the whole element and not the center of the gradient but if that is what you want/need to do....
33 replies
KPCKevin Powell - Community
Created by R.I.P on 10/28/2024 in #front-end
random number and tracking them / sending signal via keyframes
With this code it "jumps" from one position to another (maybe that is what you mean by "teleport". This may be fine. However, as you have mentioned keyframes several times, I imagine that what you really want it to do is to move across the screen to the new position. To be able to do that (if you want to continue updating the gradient start position) you are going to have to use keyframes, defining the new X and Y position at for each step/keyframe.
33 replies
KPCKevin Powell - Community
Created by R.I.P on 10/28/2024 in #front-end
random number and tracking them / sending signal via keyframes
Bear in mind that none of this will resolve the transition aspect - the "ball" will still be jumping around the container from point to point. As you say, for that you are probably going to have to generate keyframes between the 2 points (last and new) dynamically.
33 replies
KPCKevin Powell - Community
Created by R.I.P on 10/28/2024 in #front-end
random number and tracking them / sending signal via keyframes
Note - you would also need to remove the animation "infinite" as otherwise it will never end and the eventlistener won't be fired, and then start it again with the JS once the new X and Y postions have been defined
33 replies
KPCKevin Powell - Community
Created by R.I.P on 10/28/2024 in #front-end
random number and tracking them / sending signal via keyframes
However, this may still have issues with the timing as the new positions may well not coincide with the animation loop itself. To fix that, rahter than using a fixed setInterval, you could use the "animationend" eventlistener on the "app" element. Once it detects the end of the animation, it will call the function again.
33 replies
KPCKevin Powell - Community
Created by R.I.P on 10/28/2024 in #front-end
random number and tracking them / sending signal via keyframes
OK. So, returning to your code (at least the one that you posted here), as I understand it you have 2 main issues: 1. Returning to start point after each change 2. Not transitioning between points, rather it is jumping. 3. (ocasional) the timing is sometimes off To address the first issue, this is due to the way that the animation works. You have defined both the 0% and the 100% to have the x and y positions of 50%. This is what is sending the "ball" back to the center. You could store the new randomly defined x and y positions and use them for the successive start point at 0% and make the new x and y the end point at 100%. Something like this: 
@keyframes aa1 {
  0% {
    --at9: var(--at-start-x);
    --at10: var(--at-start-y);
  }
  100% {
    --at9: var(--at11);
    --at10: var(--at12);
  }
}
@keyframes aa1 {
  0% {
    --at9: var(--at-start-x);
    --at10: var(--at-start-y);
  }
  100% {
    --at9: var(--at11);
    --at10: var(--at12);
  }
}
and the JS something like this: 
let lastX = 0, lastY = 0;

function set1() {
  let newX, newY;
  // define new random X and Y  
  newX = Math.floor(Math.random() * 100);
  newY = Math.floor(Math.random() * 100);
  
  // define animation start X and Y based on previous values
  r.style.setProperty("--start-x", lastX + "%");
  r.style.setProperty("--start-y", lastY + "%");
  
  // define animation end X and Y with new random postions
  r.style.setProperty("--end-x", newX + "%");
  r.style.setProperty("--end-y", newY + "%");

  // store new positions for next start piings
  lastX = newX;
  lastY = newY;
}
let lastX = 0, lastY = 0;

function set1() {
  let newX, newY;
  // define new random X and Y  
  newX = Math.floor(Math.random() * 100);
  newY = Math.floor(Math.random() * 100);
  
  // define animation start X and Y based on previous values
  r.style.setProperty("--start-x", lastX + "%");
  r.style.setProperty("--start-y", lastY + "%");
  
  // define animation end X and Y with new random postions
  r.style.setProperty("--end-x", newX + "%");
  r.style.setProperty("--end-y", newY + "%");

  // store new positions for next start piings
  lastX = newX;
  lastY = newY;
}
33 replies