MarkBoots Comments - Answer Overflow

Topics

MarkBoots

KPCKevin Powell - Community

•Created by roycube. on 12/15/2024 in #front-end

Grid that is max 4 cola but can expand

can you provide us an example. what kind of content are those items. maybe a demo codepen

3 replies

KPCKevin Powell - Community

•Created by vinicius! on 12/14/2024 in #front-end

Closures works only because of lexical scope and scope chain?

So, lexical scope allows for a inner function access its parent scope whenever it wants bcs “remembers” that it was declared inside that scope
and scope chain allows the inner function to use variables up in the scope hierarchy 
and those behaviors it’s what we call closures

So, lexical scope allows for a inner function access its parent scope whenever it wants bcs “remembers” that it was declared inside that scope
and scope chain allows the inner function to use variables up in the scope hierarchy 
and those behaviors it’s what we call closures

yes. unless someone has anything else to add, i think you're spot on

5 replies

KPCKevin Powell - Community

•Created by Kida Sacheil on 12/15/2024 in #front-end

Dealing with content on a moving colored background

Firstly. it's the designers job to show what they want in this scenario. I could think of different ways. for example: - Set the background of the title to the same blue color - Give the text a stroke/shadow - Play around with blend-modes And secondly. please provide us a codepen so we we can see what you are working with.

7 replies

KPCKevin Powell - Community

•Created by althepal78 on 12/13/2024 in #front-end

using php to make a asnc fetch then pass the results if good to js so I can hide the api_key

could be a simple script though. just fetch to your backend and let it get the rss, parse it and send it back

15 replies

KPCKevin Powell - Community

•Created by althepal78 on 12/13/2024 in #front-end

using php to make a asnc fetch then pass the results if good to js so I can hide the api_key

and if so, then just fetch it at the back end and only pass the format you need. much cleaner

15 replies

KPCKevin Powell - Community

•Created by althepal78 on 12/13/2024 in #front-end

using php to make a asnc fetch then pass the results if good to js so I can hide the api_key

the rss has a same origin policy. so that would require a proxy

15 replies

KPCKevin Powell - Community

•Created by althepal78 on 12/13/2024 in #front-end

using php to make a asnc fetch then pass the results if good to js so I can hide the api_key

true, but dont know what op wants. just pointing it out

15 replies

KPCKevin Powell - Community

•Created by althepal78 on 12/13/2024 in #front-end

using php to make a asnc fetch then pass the results if good to js so I can hide the api_key

think the rss feed will only return a max of 15? Kevins channel; https://www.youtube.com/feeds/videos.xml?channel_id=UCJZv4d5rbIKd4QHMPkcABCw

15 replies

KPCKevin Powell - Community

•Created by serkan on 12/10/2024 in #front-end

Moving some element with range input, no javascript

maybe look at this pen from Temani Afif. He uses anchor and timeline to add labels to a range slider. You could probably tweak it to fit your purpose (im not comfortable with it enough to explain it in detail) https://codepen.io/t_afif/pen/BagmGPy

3 replies

KPCKevin Powell - Community

•Created by snxxwyy on 12/10/2024 in #front-end

:has() alternatives

well... with a little trickery... and only in certain occasions... (not recommended)

div{
  position: relative;
  p::after{
    content: "";
    position: absolute;
    inset: 0;
    background: red;
    z-index: -1;
  }
}

div{
  position: relative;
  p::after{
    content: "";
    position: absolute;
    inset: 0;
    background: red;
    z-index: -1;
  }
}

but indeed, you'l need javascript

20 replies

KPCKevin Powell - Community

•Created by Patrik on 12/9/2024 in #front-end

Border inside grid (animated if possible)

with grid and some psuedo's you could do something this. but not sure about the points yet have to think about it a bit more https://codepen.io/MarkBoots/pen/YPKWWpE there will be (i think) in the future ways to style the grid rulers. (hopefully not to long from now)

8 replies

KPCKevin Powell - Community

•Created by Highly Nonexistent on 12/8/2024 in #front-end

Are you unable to use numbers on CSS font family names?

Not sure, but did you try putting extra quotation marks around it?

dogzoneTitle.style.fontFamily = `"${dogzondeFonts[index]}", system-ui`

dogzoneTitle.style.fontFamily = `"${dogzondeFonts[index]}", system-ui`

5 replies

KPCKevin Powell - Community

•Created by Faker on 12/8/2024 in #front-end

Why image appears "pixelated" despite object-fit cover used

maybe not so up-to-date anymore, but i remember sharing this a while back (over 3 years back, time flies)

16 replies

KPCKevin Powell - Community

•Created by Faker on 12/8/2024 in #front-end

Why image appears "pixelated" despite object-fit cover used

16 replies

KPCKevin Powell - Community

•Created by Faker on 12/8/2024 in #front-end

Why image appears "pixelated" despite object-fit cover used

another nice resource for royalty free images that I like to use https://www.pexels.com/

16 replies

KPCKevin Powell - Community

•Created by Naimus on 12/4/2024 in #front-end

If 1 element has 2 animations, can I set the play-state for each animation individually?

So if you want to do it with js, update the animation-playstate for both. Andwith the use of custom properties, it makes it even easier

4 replies

KPCKevin Powell - Community

•Created by Naimus on 12/4/2024 in #front-end

If 1 element has 2 animations, can I set the play-state for each animation individually?

yea, you can comma seperate them for example https://codepen.io/MarkBoots/pen/KwPVpjw

#square {
  animation: 
    rotate 2s infinite linear var(--rotate, running),
    flip 2s infinite linear var(--flip, paused);
}

@keyframes rotate { to { rotate: 360deg } }
@keyframes flip { to { transform: rotateY(360deg)} }

#square {
  animation: 
    rotate 2s infinite linear var(--rotate, running),
    flip 2s infinite linear var(--flip, paused);
}

@keyframes rotate { to { rotate: 360deg } }
@keyframes flip { to { transform: rotateY(360deg)} }

rotateBtn.addEventListener("click", ()=>{
  square.style.setProperty('--rotate', 'running');
  square.style.setProperty('--flip', 'paused')
})
flipBtn.addEventListener("click", ()=>{
  square.style.setProperty('--rotate', 'paused');
  square.style.setProperty('--flip', 'running')
})

rotateBtn.addEventListener("click", ()=>{
  square.style.setProperty('--rotate', 'running');
  square.style.setProperty('--flip', 'paused')
})
flipBtn.addEventListener("click", ()=>{
  square.style.setProperty('--rotate', 'paused');
  square.style.setProperty('--flip', 'running')
})

4 replies

KPCKevin Powell - Community

•Created by Lexi on 12/3/2024 in #front-end

CSS Grid question (first row with 3 columns, second row with 4 columns)

No description

4 replies

KPCKevin Powell - Community

•Created by Lexi on 12/3/2024 in #front-end

CSS Grid question (first row with 3 columns, second row with 4 columns)

this is the way i do it, (which for me isn't strange, maybe just getting used to it)

.grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  gap: 1rem;
  > .item {
    background-color: blue;
    grid-column-end: span 2;
    &:nth-child(7n+1){
      grid-column-start: 2;
    }
  }
}

.grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  gap: 1rem;
  > .item {
    background-color: blue;
    grid-column-end: span 2;
    &:nth-child(7n+1){
      grid-column-start: 2;
    }
  }
}

https://codepen.io/MarkBoots/pen/wBwKBWq

4 replies

KPCKevin Powell - Community

•Created by Donald on 12/2/2024 in #front-end

Lining a button up alongside text

No description

109 replies