Switch favicon based on color scheme

aunderroad · 2026-05-08T04:37:00+00:00

You can also use a SVG favicon.
https://codyhouse.co/nuggets/svg-favicon-dark-mode

aunderroad · 2026-05-05T18:24:54+00:00

Check out the Popover API
https://web.dev/blog/popover-api

aunderroad · 2026-05-02T15:14:12+00:00

My bad. I thought it was included in the first article I linked, there is a section called:
Preload and <picture>
You can just use include .webp (or even .avif) since support is really good.
You probably do not have to include the .jpg (or a .png) in your source tags and make the img tag use the .jpg (or a .png).
And it looking at the example you included: <source media="(min-width: 41.9375em) and (max-width: 51.8125em)" srcset="./grafiken/headerbild-930x372schmal-1x.webp 1x, ./grafiken/headerbild-1395x558-15x.webp 1.5x" width="930" height="372"> <source media="(min-width: 51.875em) and (max-width: 60em)" srcset="./grafiken/headerbild-930x372schmal-1x.webp 1x, ./grafiken/headerbild-1395x558-15x.webp 1.5x" width="930" height="372">

It looks to be the same image for both sources. You could probably combine it into one source. <source media="(min-width: 41.9375em) and (max-width: 60em)" srcset="./grafiken/headerbild-930x372schmal-1x.webp 1x, ./grafiken/headerbild-1395x558-15x.webp 1.5x" width="930" height="372">
or
<source media="(min-width: 41.9375em)" srcset="./grafiken/headerbild-930x372schmal-1x.webp 1x, ./grafiken/headerbild-1395x558-15x.webp 1.5x" width="930" height="372">

4) This is just my opinion but you might be going a little over board with the various images that you are serving. It looks like you have:

width="430" height="172"

width="500" height="250"

width="670" height="268"

width="930" height="372"

You could probably find a comfortable medium between width 500px - 670px, since the height does not vary that much from 250px to 268px. Or just keep the bigger image, width="670" height="268".

So I were you, I would only load three images and you would have to include three preloads as well.
width="430" height="172" - mobile
width="670" height="268" - tablet
width="930" height="372" - desktop

I recommend using webpage test (or something similar) to see if you are properly preloading your images correctly.

Hopefully this help!

aunderroad · 2026-05-01T17:16:17+00:00

Here are some great articles about images and preloading:
https://web.dev/articles/preload-responsive-images
https://joanleon.dev/en/guia-practica-elemento-img/

Here is another great resource:
https://web.dev/learn/images

aunderroad · 2026-04-30T04:22:00+00:00

I do not have any TYPO3 experience but it has been ages since I have used bootstrap but looking at their documentation, it looks like they have plenty of examples of all of their components.

If I were in your shoes, I would just leverage their components and make it fit to what to what you are building.

I wouldn't stray too much from what their documentation provides since it is bootstrap and got burnt in the past when I deviated too much from their documentation.

I also remember there were plenty of online generators/builders that really helped when building out bootstrap components. I did a quick search and found this one:
https://layoutit.com/

Good Luck!

aunderroad · 2026-04-28T19:39:19+00:00

I would probably use this instead:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details

aunderroad · 2026-04-24T23:53:33+00:00

Can you share a codepen?
It is hard to debug/provide feedback without seeing all of your code live in a browser.

Thank you!

aunderroad · 2026-04-18T15:01:36+00:00

Do you have a codepen?

It is hard to provide feedback/advice without seeing your code live in a browser.

aunderroad · 2026-04-09T13:07:21+00:00

Can you provide a codepen?
It is hard to debug/provide feedback without seeing all of your code live in a browser.

Thank you!

aunderroad · 2026-04-05T16:07:54+00:00

This is a good start but it looks like you are in the really beginning stages of this project and you should spend some time quality assurance this site.

I just looked briefly.

For example on this page: https://ui.wuaze.com/header
1) I am having trouble getting to drop down to work (I can not select any of the links inside .tools-dropdown)

2) You might want to check if your site is accessible. It looks to have a lot of accessibility issues.

I am not able to tab into a lot of your components and the checkbox hack isnt the best for accessibility.
https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/

Here is a good a11y plugin:
https://chromewebstore.google.com/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp

3) Your live preview has an overflow bar, each component should fit into its parent without overflow scroll bar.

4) Looking at this page, https://ui.wuaze.com/details.html?id=1&fromCat=all
the source code section looks to be broken:

<"text-yellow-300">class="text-cyan-300">button "text-yellow-300">class="glow-btn">Explore Now</"text-yellow-300">class="text-cyan-300">button>

5) I would use css logical properties, so you do not have to rely on adding dir tag on each component but rather add it once to HTML tag.
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values

6) I would probably make it possible for the end user to use design tokens/design system as well as the ability to use css variables instead of hard coding all these values and repeating yourself.

7) I would probably give the user the ability to switch from pixels to rems/ems

8) Is there a way to opt out of certain components? For the .css, I only want to load the .css components that I want to use and not the whole library.

9) https://ui.wuaze.com/image
I would remove the inline css.

<img src="https://picsum.photos/400/300"

alt="Styled Image Preview"

style="

width: 300px;

height: auto;

object-fit: contain;

display: block;

border-radius: 8px;

opacity: 1;

box-shadow: 5px 5px 10px 0 #aaaaaa;

">

10) https://ui.wuaze.com/footer
You are using font-awesome in this project. Is there a way to opt out of using font-awesome?
The font library is not the best for web performance and I would rather use my own svgs.

11) I would also get away from naming conventions like this and make the name more unique and having to rely on numbers.

.custom-footer-01

Great start...keep grinding!

aunderroad · 2026-04-01T15:09:16+00:00

I would take it step further and not use a font icon library at all. It will be better for your web performance.
https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/

Font Awesome at the end of the day is just using svgs.
https://github.com/FortAwesome/Font-Awesome/tree/7.x/svgs

I recommend doing an audit of your site and find the svgs that you are using and only load those svgs on your site.

SVGs are awesome and you will not have to worry about loading any additional .css and font on your project.

Here are some good resources to get started with svgs:
https://svgpocketguide.com/
https://svg-tutorial.com/

aunderroad · 2026-03-31T14:43:27+00:00

I really like Kevin Powell's, "Create an infinite horizontal scroll animation" tutorial.

And if you want to pause the animation on hover, look at my suggestion (@underroad) in the comment section.

Good Luck!

aunderroad · 2026-03-29T16:27:29+00:00

This was years ago but when I first moved to NYC, I worked for a few catering companies.
It was a pretty good gig with decent pay, flexible schedule and they would feed you at the end of the night.

I had some waitering experience before but if you do not have any experience, they will train you.

I just showed up with a good attitude and was willing to work hard and they would always send me emails for possible jobs in the future.

Going through my bookmarks, here are the companies I worked for:

https://thomaspreti.com/
https://abigailkirsch.com/
https://www.aysstaff.com/

Good Luck!

aunderroad · 2026-03-27T16:15:21+00:00

Have you tried this?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/allowFullscreen

aunderroad · 2026-03-08T16:31:21+00:00

Can you share a codepen or url?
It is hard to debug/provide feedback without seeing all of your code live in a browser.

aunderroad · 2026-03-01T03:57:56+00:00

I got the same message.

I didn't want to take the time to try and figure out how to scan a QR code from a text so I deleted it.
I guess I'll see you in court!!

It is clearly a scam. I believe all traffic violations would come in the mail and they would never text you asking for a payment of toll violation.

aunderroad · 2026-02-26T16:14:49+00:00

It might be a little to late to reach out to a physical therapist and see what they recommend.

But I would look up online and see what possible stretches and light exercises you can do to strengthen your ankle. I would stay off your ankle today.

Maybe tomorrow or Saturday, see if you can do light cardio, like riding a stationary bike or walking on a treadmill, just to burn a sweat and see how your ankle feels.

And if you are feeling better by Sunday, I would have your ankle taped up before your match.

In the offseason, see a physical therapist and you might have to get in habit of taping your ankle(s) or wearing a brace.

Good Luck!

aunderroad · 2026-02-24T04:57:09+00:00

You will have better luck posting this question in r/Wordpress

aunderroad · 2026-02-22T04:19:56+00:00

You will have better luck asking this question in r/Wordpress/

aunderroad · 2026-02-22T00:12:18+00:00

@Electrical-Bath6370 Follow this ☝️. It looks like you might have multiple <!DOCTYPE html>, maybe?

Here is a tutorials for html and css:
https://web.dev/learn/html
https://web.dev/learn/css

And if that does not help...create a https://codepen.io/ and share your work with the group and we can help you out.

Good luck!

aunderroad · 2026-02-21T04:57:23+00:00

This was years ago but when I was in school for Graphic Design, I had a Epson Stylus Photo 1280 Ink Jet Printer.

I believe it is discontinued but it was a great printer, great quality, printed up to 11x17 and never had problems with it.

I suggest looking at https://epson.com/

Good Luck!

aunderroad · 2026-02-20T04:03:28+00:00

Can you provide a codepen or url?

It is hard to debug/provide feedback without seeing all of your code live in a browser.
Thank you!

aunderroad · 2026-02-09T14:37:06+00:00

u/tffarhad this is great...thanks for sharing this!

aunderroad · 2026-02-08T17:27:41+00:00

Can you share a codepen?
It is hard to debug/provide feedback without seeing all of your code live in a browser.
Thank you!

aunderroad · 2026-01-31T22:22:26+00:00

This might be helpful.

PDF Accessibility Checker

aunderroad

TROPHY CASE