Web Site Building: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
Created page with "=Introduction= This is a page for capturing thing that are website related =Dark Mode= When looking at implementing this be aware there is system, light and dark usually. Only if you go incognito do does the get switched off. I think it is held in LocalStorage somewhere =Sites= ==Components== Aceternity is a good place for NextJS components. You get the code and can change the components yourself. https://ui.aceternity.com/ here ==Generating Gradients== Go here to ge..."
 
No edit summary
Line 8: Line 8:
==Generating Gradients==
==Generating Gradients==
Go here to generate your own gradient. [[https://cssgradient.io/ cssgradient]
Go here to generate your own gradient. [[https://cssgradient.io/ cssgradient]
=Changing Flex Direction=
So wanted to see how to do this dynamically. And finally settled on this. In this example it monitors to the child to be less than 50% and sets the flex direction appropiately based off isChildMoreThan50
<syntaxhighlight lang="ts">
    const containerRef = useRef<HTMLDivElement>(null);
    const childRef = useRef<HTMLDivElement>(null);
    const [isChildMoreThan50, setIsChildMoreThan50] = useState(false);
    const [childWidthPct, setChildWidthPct] = useState(0);
    const updateFlexDirection = () => {
        const container = containerRef.current;
        const child = childRef.current;
        if (!container || !child) return;
        const containerWidth = container.offsetWidth;
        const childWidth = child.offsetWidth;
        console.log("Container Width:", containerWidth);
        console.log("Child Width:", childWidth);
        // Update state based on size comparison
        setIsChildMoreThan50(childWidth > containerWidth * 0.5);
        setChildWidthPct((childWidth / containerWidth) * 100);
    };
    useEffect(() => {
        const resizeObserver = new ResizeObserver(() => {
            updateFlexDirection();
        });
        const container = containerRef.current;
        const child = childRef.current;
        if (container) resizeObserver.observe(container);
        if (child) resizeObserver.observe(child);
        // Initial calculation
        updateFlexDirection();
        // Cleanup
        return () => {
            resizeObserver.disconnect();
        };
    }, []);
</syntaxhighlight>

Revision as of 21:09, 3 April 2025

Introduction

This is a page for capturing thing that are website related

Dark Mode

When looking at implementing this be aware there is system, light and dark usually. Only if you go incognito do does the get switched off. I think it is held in LocalStorage somewhere

Sites

Components

Aceternity is a good place for NextJS components. You get the code and can change the components yourself. [here]

Generating Gradients

Go here to generate your own gradient. [cssgradient

Changing Flex Direction

So wanted to see how to do this dynamically. And finally settled on this. In this example it monitors to the child to be less than 50% and sets the flex direction appropiately based off isChildMoreThan50

    const containerRef = useRef<HTMLDivElement>(null);
    const childRef = useRef<HTMLDivElement>(null);

    const [isChildMoreThan50, setIsChildMoreThan50] = useState(false);
    const [childWidthPct, setChildWidthPct] = useState(0);

    const updateFlexDirection = () => {
        const container = containerRef.current;
        const child = childRef.current;

        if (!container || !child) return;

        const containerWidth = container.offsetWidth;
        const childWidth = child.offsetWidth;

        console.log("Container Width:", containerWidth);
        console.log("Child Width:", childWidth);

        // Update state based on size comparison
        setIsChildMoreThan50(childWidth > containerWidth * 0.5);
        setChildWidthPct((childWidth / containerWidth) * 100);
    };

    useEffect(() => {
        const resizeObserver = new ResizeObserver(() => {
            updateFlexDirection();
        });

        const container = containerRef.current;
        const child = childRef.current;

        if (container) resizeObserver.observe(container);
        if (child) resizeObserver.observe(child);

        // Initial calculation
        updateFlexDirection();

        // Cleanup
        return () => {
            resizeObserver.disconnect();
        };
    }, []);