How would you animate this sidebar toggle?
As you can see I try to use display: none, and it's working fine, because mainMenu expands to full width, but when i use display: none, it doesn't animate smoothly, I have transition: translate 200ms ease-in-out; in my sideMenu element
how to change the color to red in Material UI ?
Anybody knows how I can change the color like in the picture ?
Horizontal layout webpage
I am building horizontally separated site.
It has 2 columns, left one and right one.
The left section is suppose to be 40vw and 100vh.
The right section is 60vw and 100vh....
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?
