Astro - how to pass data from the server- to the client-side JavaScript
I'm sorry for not providing any code but I have doubts on whether my code would be even relevant in light of my question. Also, I have no idea which part of the code could be helpful, so, when asked for, I'll provide the requested part of the code, probably using some playground.
I'm coding a relatively simple website, using Astro, and I seem to have an issue with passing data between the server- and client-side JavaScript.
The thing is, I'm fetching some data inside the server-side JavaScript (Front Matter) and need those inside my client-side JavaScript, to simply filter them....
Curve in the end for the last navigation link
SUMMARY: I have an idea to add a small curve to each link at the bottom, but I'm facing an issue with the last one. I added a background image to the body tag, and this is where the problem arises.
PROBLEM: Green section that should be transparent. However, when I add transparency, the curved effect disappears (due to the negative margin-left).
TRIED: I attempted to use a border-left, but it didn't work....
Weather App
I'm building a simple weather app project. Current, I'm using open-meteo.com's API for weather data. One of the parameters I'm using is weather interpretation codes. The variable documentation is attached (see picture)
My question is, what's the best method at converting code into description? I know there's multiple ways, such as if/else if, case, sets, etc. (I'm assuming using Key / Value)
What would you recommend? Thanks....
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 : ...
