Continuous text change depicting encryption/security using code
I want to achieve an effect like this using code. Will start from random and finish at a specific sentence like "Security @ Apple" (without the background effect)
Icon inside Button
I've made a button component which I than used somewhere else. I placed
fontawesome 6 icon <i></i> inside it and it's well aliged with the text in the button. As it was little bit bigger I changed the font-size of it. Now the icon is not vertically aligned. I tried using svg which works fine and it's alignment is not affected by the font-size of the button. Why is that. Picture and codepen link are given.
CODE PEN:
font-size on line 37.
https://codepen.io/Arslan-Akbar/pen/oNJMNqY...
Struggling with the new view transitions API
Hi! I am exploring the View transitions API. I have a simple demo with just a box that changes background-color and width on click. Since I see some things I don't understand (the height also changes during animation) I wanted to try to debug/replay it in the browser dev tools.
EDIT: I kinda solved it, but I am struggling with the API itself. Please jump down to the latest reply
I open the Animations drawer, I click the box, I record the animation, I see it right there. But I cannot figure out how to "replay it". When I click play, change speed, or draw manually, nothing happens in the main browser window. I don't understand. What do I have to do to actually see the animation being replayed....
Button positioning
Pls how do I make this buttons stay on the same position regardless of how the paragraphs words wrap?
I've googled & chatgtp how to do it and the answers see don't work, probably because Google doesn't understand my question precisely...
NextJS,
I have a Next.js application where I've replaced React with Preact. In the profiler, I notice that the rendering time for the Portal, specifically for the 'next-route-announcer,' ranges from 1.5 to 3 seconds. I'm trying to identify the root cause of this delay. What areas should I investigate to pinpoint the issue?
Instead of the background color "light blue" , I want to turn it light green for right and red
Red for wrong. I am using the document.body.style but its not working for some reason. Is there any other way I can get this done?
JavaScript question
So apparently the correct answers is 3. I don’t get why there are 3 loops before the code stops. In the 3rd loop i = 2 and x = 3. Shouldn’t there be 1 more loop since i < 3 . I get why x = 3 what I don’t get is my the loops stops there at i = 2 and x = 3 . i still smaller than 3
Question on CSS Cascade algorithm
I was learning about css cascade algorithm and when trying it out in browser i saw a weird behaviour.
for any css property - an user agent stylesheet is specified as !important cannot be overriden by author style sheet. which is true and correct.
take this example : ...
Content is too tall compared to its parent and overflows
Hi everyone!
I have no idea how to solve this. If I make the viewport bigger, <main> tag which is the main container here becomes bigger too, and overflow stops as after a certain point <main> grows bigger then it's content (like it should) and content starts to grow accordingly (second picture is what happens when height is bigger).
It only happens after the screen becomes wider then 800px, which is my breakpoint for media query. ...
