bibamann
bibamann
KPCKevin Powell - Community
Created by bibamann on 4/10/2024 in #front-end
Vue / JavaScript in general: prevent blur / focusout if you clicked something special
Update: I made it somehow work with:
<input type="text"
v-model="search"
@click="showResults = true"
@keyup="emitSearch"
@blur="onBlur"
/>

<div v-for="speaker in speakers">
<div v-html="formatHighlighted(speaker.name)" @click="onClickSpeaker(speaker)" />
</div>
<input type="text"
v-model="search"
@click="showResults = true"
@keyup="emitSearch"
@blur="onBlur"
/>

<div v-for="speaker in speakers">
<div v-html="formatHighlighted(speaker.name)" @click="onClickSpeaker(speaker)" />
</div>
onBlur() {
setTimeout(() => {
this.showResults = false;
}, 200)
}
onBlur() {
setTimeout(() => {
this.showResults = false;
}, 200)
}
But it feels dirty. And I can't use "$nextTick" or "requestAnimationFrame" - even using 2 ($nextTick(() => $nextTick(() => ... ))). And a timeout of just 100ms isn't enough -> the click event doesn't trigger. And maybe on slower machines 200ms isn't enough either. So any better solutions?
2 replies
KPCKevin Powell - Community
Created by NZAA on 3/16/2024 in #front-end
overflow-x scroll without scrollbar
you can scroll with JS with scrollTo() or scrollBy() for example. If you want to always hide the scrollbar use overflow-x: hidden
2 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
yea... I can't see where to edit the tags (using discord on browser)
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
how can I set this to "solved"?
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
this Kevin guy is scary
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
I had it on the parent - it must be on the "starting time" one
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
🙂
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
I don't understand it, but it works.
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
... thx
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
I can do a jsfiddle on it if it helps
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
yes and there nothing happens
22 replies
KPCKevin Powell - Community
Created by bibamann on 3/15/2024 in #front-end
Make just an child-element sticky
<div class="entry">
<div>Starting Time</div>
<div>Sessions</div>
</div>

.entry {
position: sticky;
top: 100px;
display: flex;
}
<div class="entry">
<div>Starting Time</div>
<div>Sessions</div>
</div>

.entry {
position: sticky;
top: 100px;
display: flex;
}
is the 2nd video. putting sticky on the div with "starting time" is basically the first one - nothing happens
22 replies
KPCKevin Powell - Community
Created by مقتدى on 1/3/2024 in #back-end
send a notify to specific user
https://supabase.com/realtime - isn't this document somewhere? (I don't know supabase) - but websockets are the way to go.
2 replies
KPCKevin Powell - Community
Created by alshadab on 1/2/2024 in #front-end
React SEO
The main issue with react pages and seo are that they mostly just consist of one line of html (div id="app"). Google recognizes this and comes back later with another "specialized" bot, but doesn't crawl the site immediately. When this "later" is, nobody knows. Or at least I don't. But for news pages it's something bad. That's why people use NextJs which renders a react page server side so the bot sees the page as "full html". Otherwise, there's no special SEO optimization needed according to this guy from google: https://www.youtube.com/watch?v=rKgF0rf009c
4 replies
KPCKevin Powell - Community
Created by bibamann on 12/18/2023 in #front-end
Is there a way to prevent these border-radius shine-through's?
Hm, yes. This is basically my attempt in my initial post. but I struggled with the calc to get it transparent / filled on top and bottom. so thanks for this!
32 replies
KPCKevin Powell - Community
Created by bibamann on 12/18/2023 in #front-end
Is there a way to prevent these border-radius shine-through's?
No description
32 replies
KPCKevin Powell - Community
Created by bibamann on 12/18/2023 in #front-end
Is there a way to prevent these border-radius shine-through's?
32 replies
KPCKevin Powell - Community
Created by Vanilla on 12/16/2023 in #back-end
sockets issue
Phew - I'm currently doing a socketserver PHP wise with a Vue client. But can't you see by all your logs where's it's hanging?
5 replies
KPCKevin Powell - Community
Created by Anil on 11/2/2023 in #front-end
Require Animation on scroll up/down.
haha, went to thefwa as well? It's not all canvas, but tons of js as well, like I did this custom scrolling here https://codepen.io/Christian-Lorenz/pen/jOdPmjN canvas is mainly used for this animation play on scroll.
5 replies
KPCKevin Powell - Community
Created by bibamann on 10/25/2023 in #front-end
Scrolling of 2 lists with one "somehow" fixed
@Jochem @MarkBoots Finally made it https://codepen.io/Christian-Lorenz/pen/jOdPmjN
16 replies