
## What is it?

All websites now require that annoyingly little box that says you "must accept cookies to use the site" - we've seen them everywhere, so lets not get into the politics 
of wether these are beneficial or just annoying, and lets just face the fact that we should put one on our site and forget about it.

We are going to use localStorage to save the users acceptance of the agreement, although you've probably heard of it being called the "Cookie-Law" it's actually the 
[Privacy and Electronic Communications Directive 2002/58/EC](https://en.wikipedia.org/wiki/Privacy_and_Electronic_Communications_Directive_2002) and relates to the storing of all 
information regardless of wether it's a cookie, localStorage or a note attached to a pigeon! Also it makes the code below a bit smaller and neater. We are also ignoring older browsers. 

Lets create a file called `CookieAcceptance.tsx`

```js
import { useEffect, useState } from "react";

export default function CookieAcceptance() {
  const [show, setShow] = useState(false);

  const handleAcceptClick = () => {
    setShow(false);
    window.localStorage.setItem("cookie_agreement", Date.now().toString());
  };

  useEffect(() => {
    if (typeof window.localStorage !== "undefined" && window.localStorage.getItem("cookie_agreement") === null) {
        setShow(true);
    }
  }, []);

  return (
    show ? <>
      <div className="fixed left-0 bottom-0 right-0 px-4 py-2 pb-4 bg-white border-2 w-72 md:w-96 m-5 rounded-lg">
        <h3 className="text-lg text-gray-900">Cookie Notice</h3>
        <div className="text-base text-gray-500">
          This website uses cookies to store information, by using this website
          you agree to its terms.
        </div>
        <button
          className="bg-cyan-800 text-white px-4 py-1 rounded border border-cyan-900 block mt-3 ml-auto"
          onClick={handleAcceptClick}
        >
          I Accept
        </button>
      </div>
    </> : null
  );
}
```

Now include this on your websites footer across all pages and hey presto you've got yourself a cookie acceptance banner. 


Simple NextJS & Tailwind Accept Cookies Banner


## Using TailwindCSS's colors and creating a color picker

So I'm now a big fan of TailwindCSS, I won't go into detail on why that is in this article, but lets just say I love it. I'm also a big fan of it's
color schemes, and, as a developer, I find it's definitely a case of less is more.

Instead of having to choose from a standard pallette
of all 16,777,217 Hexadecimal colors, it's actually quite nice to be limited to just 220 colors!

So in this article I'll explain how I used those colors to create a color picker tool for use in my [3dnames.co](https://www.3dnames.co) website

## First off - get the colors from Tailwind source code

I'm assuming here that you are using a Tailwind CSS project, and that you are using NPM modules, if so open up `node_modules/tailwindcss/colors.js`
and in here you'll find your current versions list of the colors as an object. 

For me it looks like this:

```js
var _default = {
    inherit: 'inherit',
    current: 'currentColor',
    transparent: 'transparent',
    black: '#000',
    white: '#fff',
    slate: {
        50: '#f8fafc',
        100: '#f1f5f9',
        200: '#e2e8f0',
        300: '#cbd5e1',
        400: '#94a3b8',
        500: '#64748b',
        600: '#475569',
        700: '#334155',
        800: '#1e293b',
        900: '#0f172a'
    },
    gray: {
        50: '#f9fafb',
        100: '#f3f4f6',
        200: '#e5e7eb',
        300: '#d1d5db',
        400: '#9ca3af',
        500: '#6b7280',
        600: '#4b5563',
        700: '#374151',
        800: '#1f2937',
        900: '#111827'
    },
    zinc: {
        50: '#fafafa',
        100: '#f4f4f5',
        200: '#e4e4e7',
        300: '#d4d4d8',
        400: '#a1a1aa',
        500: '#71717a',
        600: '#52525b',
        700: '#3f3f46',
        800: '#27272a',
        900: '#18181b'
    },
    neutral: {
        50: '#fafafa',
        100: '#f5f5f5',
        200: '#e5e5e5',
        300: '#d4d4d4',
        400: '#a3a3a3',
        500: '#737373',
        600: '#525252',
        700: '#404040',
        800: '#262626',
        900: '#171717'
    },
    stone: {
        50: '#fafaf9',
        100: '#f5f5f4',
        200: '#e7e5e4',
        300: '#d6d3d1',
        400: '#a8a29e',
        500: '#78716c',
        600: '#57534e',
        700: '#44403c',
        800: '#292524',
        900: '#1c1917'
    },
    red: {
        50: '#fef2f2',
        100: '#fee2e2',
        200: '#fecaca',
        300: '#fca5a5',
        400: '#f87171',
        500: '#ef4444',
        600: '#dc2626',
        700: '#b91c1c',
        800: '#991b1b',
        900: '#7f1d1d'
    },
    orange: {
        50: '#fff7ed',
        100: '#ffedd5',
        200: '#fed7aa',
        300: '#fdba74',
        400: '#fb923c',
        500: '#f97316',
        600: '#ea580c',
        700: '#c2410c',
        800: '#9a3412',
        900: '#7c2d12'
    },
    amber: {
        50: '#fffbeb',
        100: '#fef3c7',
        200: '#fde68a',
        300: '#fcd34d',
        400: '#fbbf24',
        500: '#f59e0b',
        600: '#d97706',
        700: '#b45309',
        800: '#92400e',
        900: '#78350f'
    },
    yellow: {
        50: '#fefce8',
        100: '#fef9c3',
        200: '#fef08a',
        300: '#fde047',
        400: '#facc15',
        500: '#eab308',
        600: '#ca8a04',
        700: '#a16207',
        800: '#854d0e',
        900: '#713f12'
    },
    lime: {
        50: '#f7fee7',
        100: '#ecfccb',
        200: '#d9f99d',
        300: '#bef264',
        400: '#a3e635',
        500: '#84cc16',
        600: '#65a30d',
        700: '#4d7c0f',
        800: '#3f6212',
        900: '#365314'
    },
    green: {
        50: '#f0fdf4',
        100: '#dcfce7',
        200: '#bbf7d0',
        300: '#86efac',
        400: '#4ade80',
        500: '#22c55e',
        600: '#16a34a',
        700: '#15803d',
        800: '#166534',
        900: '#14532d'
    },
    emerald: {
        50: '#ecfdf5',
        100: '#d1fae5',
        200: '#a7f3d0',
        300: '#6ee7b7',
        400: '#34d399',
        500: '#10b981',
        600: '#059669',
        700: '#047857',
        800: '#065f46',
        900: '#064e3b'
    },
    teal: {
        50: '#f0fdfa',
        100: '#ccfbf1',
        200: '#99f6e4',
        300: '#5eead4',
        400: '#2dd4bf',
        500: '#14b8a6',
        600: '#0d9488',
        700: '#0f766e',
        800: '#115e59',
        900: '#134e4a'
    },
    cyan: {
        50: '#ecfeff',
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63'
    },
    sky: {
        50: '#f0f9ff',
        100: '#e0f2fe',
        200: '#bae6fd',
        300: '#7dd3fc',
        400: '#38bdf8',
        500: '#0ea5e9',
        600: '#0284c7',
        700: '#0369a1',
        800: '#075985',
        900: '#0c4a6e'
    },
    blue: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a'
    },
    indigo: {
        50: '#eef2ff',
        100: '#e0e7ff',
        200: '#c7d2fe',
        300: '#a5b4fc',
        400: '#818cf8',
        500: '#6366f1',
        600: '#4f46e5',
        700: '#4338ca',
        800: '#3730a3',
        900: '#312e81'
    },
    violet: {
        50: '#f5f3ff',
        100: '#ede9fe',
        200: '#ddd6fe',
        300: '#c4b5fd',
        400: '#a78bfa',
        500: '#8b5cf6',
        600: '#7c3aed',
        700: '#6d28d9',
        800: '#5b21b6',
        900: '#4c1d95'
    },
    purple: {
        50: '#faf5ff',
        100: '#f3e8ff',
        200: '#e9d5ff',
        300: '#d8b4fe',
        400: '#c084fc',
        500: '#a855f7',
        600: '#9333ea',
        700: '#7e22ce',
        800: '#6b21a8',
        900: '#581c87'
    },
    fuchsia: {
        50: '#fdf4ff',
        100: '#fae8ff',
        200: '#f5d0fe',
        300: '#f0abfc',
        400: '#e879f9',
        500: '#d946ef',
        600: '#c026d3',
        700: '#a21caf',
        800: '#86198f',
        900: '#701a75'
    },
    pink: {
        50: '#fdf2f8',
        100: '#fce7f3',
        200: '#fbcfe8',
        300: '#f9a8d4',
        400: '#f472b6',
        500: '#ec4899',
        600: '#db2777',
        700: '#be185d',
        800: '#9d174d',
        900: '#831843'
    },
    rose: {
        50: '#fff1f2',
        100: '#ffe4e6',
        200: '#fecdd3',
        300: '#fda4af',
        400: '#fb7185',
        500: '#f43f5e',
        600: '#e11d48',
        700: '#be123c',
        800: '#9f1239',
        900: '#881337'
    },
}
```

So using this object of colors we can build yourself a neat little color picker UI component, 
below is a simple React, Tailwind & TypeScript version I've written. You can simply replace the 
useState functionality with your own callbacks, and safely ignore or delete whats in the `<h4></h4>` Tags

If you want to ignore a set of colors from the list, simply update the `ignoreList` with the names of the 
tailwind color schemes you don't want to use. For example: `const ignoreList = ["slate","orange","green"]`


`ColorPicker.tsx`
```ts
/**
 * This is a simple React based color picker tool, it uses TailwindCSS's color object as it's source of colors.
 * Source of colors: node_modules/tailwindcss/colors.js
 * The <h4></h4> Feedback and useState functionality is for demo purposes only... you probably want to delete this and use your
 * own callback functionally instead. 
 * Joe Gilmore, www.joemore.com 21/06/2022
 */

import { useState } from "react";

export default function ColorPicker(){

    const [ pickedHex, setPickedHex ] = useState('');
    const [ pickedTW, setPickedTW ] = useState('');
    const setPickedHandler = (colorHex : string, colorTW : string) => {
        setPickedHex(colorHex);
        setPickedTW(colorTW);
    }
    
    return (
        <div>
            <h4 className="my-2">
                {pickedHex && pickedTW ? 
                    <>
                    You Picked: 
                    <span className="ml-3 px-2 py-0 border-md inline-block rounded" style={{backgroundColor : pickedHex}}>
                        {
                            parseInt(pickedTW.split('-')[1],10) < 500  
                            ? <span className="text-black">{pickedHex}</span>
                            : <span className="text-white">{pickedHex}</span>
                        }
                    </span>
                    <code className="ml-3 text-xs">bg-{pickedTW}</code>
                    </>
                :
                    <>
                    Pick a color:
                    </>
                }
            </h4>
           
        {
            Object.keys(colors).map((key, index) => {
               console.log(typeof colors[key])
                if( 
                    typeof colors[key] === 'object' && ignoreList && ignoreList.indexOf(key) === -1
                    || !ignoreList &&  typeof colors[key] === 'object'
                    ){
                    return <div 
                    key={key}
                    className="flex">
                        {
                            Object.keys(colors[key]).map( (key2 : any)  => {
                                                
                                const color = colors[key][key2]
                                return (
                                    <div key={key+'-'+key2} 
                                    className="w-8 h-4 cursor-pointer hover:opacity-70 hover:border-gray-500 hover:border-b-2" 
                                    style={{backgroundColor : color}}
                                    onClick={() => setPickedHandler(
                                        color,
                                        key+'-'+key2
                                    )}>
                                        
                                    </div>
                                )
                            })
                        }
                    </div>
                }
                
            })
        }
        </div>
    );

}


export interface IColorObj {
    [key: number | string]: string;
}
export interface IColors {
    [key: string]: string | IColorObj;
}

// Ignore any colors here:
const ignoreList = ["none"]

// Our list copied directly from `node_modules/tailwindcss/colors.js`
const colors : IColors = {
    inherit: 'inherit',
    current: 'currentColor',
    transparent: 'transparent',
    black: '#000',
    white: '#fff',
    slate: {
        50: '#f8fafc',
        100: '#f1f5f9',
        200: '#e2e8f0',
        300: '#cbd5e1',
        400: '#94a3b8',
        500: '#64748b',
        600: '#475569',
        700: '#334155',
        800: '#1e293b',
        900: '#0f172a'
    },
    gray: {
        50: '#f9fafb',
        100: '#f3f4f6',
        200: '#e5e7eb',
        300: '#d1d5db',
        400: '#9ca3af',
        500: '#6b7280',
        600: '#4b5563',
        700: '#374151',
        800: '#1f2937',
        900: '#111827'
    },
    zinc: {
        50: '#fafafa',
        100: '#f4f4f5',
        200: '#e4e4e7',
        300: '#d4d4d8',
        400: '#a1a1aa',
        500: '#71717a',
        600: '#52525b',
        700: '#3f3f46',
        800: '#27272a',
        900: '#18181b'
    },
    neutral: {
        50: '#fafafa',
        100: '#f5f5f5',
        200: '#e5e5e5',
        300: '#d4d4d4',
        400: '#a3a3a3',
        500: '#737373',
        600: '#525252',
        700: '#404040',
        800: '#262626',
        900: '#171717'
    },
    stone: {
        50: '#fafaf9',
        100: '#f5f5f4',
        200: '#e7e5e4',
        300: '#d6d3d1',
        400: '#a8a29e',
        500: '#78716c',
        600: '#57534e',
        700: '#44403c',
        800: '#292524',
        900: '#1c1917'
    },
    red: {
        50: '#fef2f2',
        100: '#fee2e2',
        200: '#fecaca',
        300: '#fca5a5',
        400: '#f87171',
        500: '#ef4444',
        600: '#dc2626',
        700: '#b91c1c',
        800: '#991b1b',
        900: '#7f1d1d'
    },
    orange: {
        50: '#fff7ed',
        100: '#ffedd5',
        200: '#fed7aa',
        300: '#fdba74',
        400: '#fb923c',
        500: '#f97316',
        600: '#ea580c',
        700: '#c2410c',
        800: '#9a3412',
        900: '#7c2d12'
    },
    amber: {
        50: '#fffbeb',
        100: '#fef3c7',
        200: '#fde68a',
        300: '#fcd34d',
        400: '#fbbf24',
        500: '#f59e0b',
        600: '#d97706',
        700: '#b45309',
        800: '#92400e',
        900: '#78350f'
    },
    yellow: {
        50: '#fefce8',
        100: '#fef9c3',
        200: '#fef08a',
        300: '#fde047',
        400: '#facc15',
        500: '#eab308',
        600: '#ca8a04',
        700: '#a16207',
        800: '#854d0e',
        900: '#713f12'
    },
    lime: {
        50: '#f7fee7',
        100: '#ecfccb',
        200: '#d9f99d',
        300: '#bef264',
        400: '#a3e635',
        500: '#84cc16',
        600: '#65a30d',
        700: '#4d7c0f',
        800: '#3f6212',
        900: '#365314'
    },
    green: {
        50: '#f0fdf4',
        100: '#dcfce7',
        200: '#bbf7d0',
        300: '#86efac',
        400: '#4ade80',
        500: '#22c55e',
        600: '#16a34a',
        700: '#15803d',
        800: '#166534',
        900: '#14532d'
    },
    emerald: {
        50: '#ecfdf5',
        100: '#d1fae5',
        200: '#a7f3d0',
        300: '#6ee7b7',
        400: '#34d399',
        500: '#10b981',
        600: '#059669',
        700: '#047857',
        800: '#065f46',
        900: '#064e3b'
    },
    teal: {
        50: '#f0fdfa',
        100: '#ccfbf1',
        200: '#99f6e4',
        300: '#5eead4',
        400: '#2dd4bf',
        500: '#14b8a6',
        600: '#0d9488',
        700: '#0f766e',
        800: '#115e59',
        900: '#134e4a'
    },
    cyan: {
        50: '#ecfeff',
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63'
    },
    sky: {
        50: '#f0f9ff',
        100: '#e0f2fe',
        200: '#bae6fd',
        300: '#7dd3fc',
        400: '#38bdf8',
        500: '#0ea5e9',
        600: '#0284c7',
        700: '#0369a1',
        800: '#075985',
        900: '#0c4a6e'
    },
    blue: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a'
    },
    indigo: {
        50: '#eef2ff',
        100: '#e0e7ff',
        200: '#c7d2fe',
        300: '#a5b4fc',
        400: '#818cf8',
        500: '#6366f1',
        600: '#4f46e5',
        700: '#4338ca',
        800: '#3730a3',
        900: '#312e81'
    },
    violet: {
        50: '#f5f3ff',
        100: '#ede9fe',
        200: '#ddd6fe',
        300: '#c4b5fd',
        400: '#a78bfa',
        500: '#8b5cf6',
        600: '#7c3aed',
        700: '#6d28d9',
        800: '#5b21b6',
        900: '#4c1d95'
    },
    purple: {
        50: '#faf5ff',
        100: '#f3e8ff',
        200: '#e9d5ff',
        300: '#d8b4fe',
        400: '#c084fc',
        500: '#a855f7',
        600: '#9333ea',
        700: '#7e22ce',
        800: '#6b21a8',
        900: '#581c87'
    },
    fuchsia: {
        50: '#fdf4ff',
        100: '#fae8ff',
        200: '#f5d0fe',
        300: '#f0abfc',
        400: '#e879f9',
        500: '#d946ef',
        600: '#c026d3',
        700: '#a21caf',
        800: '#86198f',
        900: '#701a75'
    },
    pink: {
        50: '#fdf2f8',
        100: '#fce7f3',
        200: '#fbcfe8',
        300: '#f9a8d4',
        400: '#f472b6',
        500: '#ec4899',
        600: '#db2777',
        700: '#be185d',
        800: '#9d174d',
        900: '#831843'
    },
    rose: {
        50: '#fff1f2',
        100: '#ffe4e6',
        200: '#fecdd3',
        300: '#fda4af',
        400: '#fb7185',
        500: '#f43f5e',
        600: '#e11d48',
        700: '#be123c',
        800: '#9f1239',
        900: '#881337'
    },
}
```



Tailwind Color Picker Tool


### May 22nd, 2022

Today my niece Olivia was born while I'm visiting my Sister and her Husband in Sydney, Australia, so I thought I'd celebrate the moment by taking some photos of Bondi Beach and the Opera House.

Olivia - here was Sydney on the day you were born! 





<blogimage id="2022-05-22-olivias-day-of-birth/DSC05925" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05925.jpg" target="_blank">here</a>
</small>



<blogimage id="2022-05-22-olivias-day-of-birth/DSC05876" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05876.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05968" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05968.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05997" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05997.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06005" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06005.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06420" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06420.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05872" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05872.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05859" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05859.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05869" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05869.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05866" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05866.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05880" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05880.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05860" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05860.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05919" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05919.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05916" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05916.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05932" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05932.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05890" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05890.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05921" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05921.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05946" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05946.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05949" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05949.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05955" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05955.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05966" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05966.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05993" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05993.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05991" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05991.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06000" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06000.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05996" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05996.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05903" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05903.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05894" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05894.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05936" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05936.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05959" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05959.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05945" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05945.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05927" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05927.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05972" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05972.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05986" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05986.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05987" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05987.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05957" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05957.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05979" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05979.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05969" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05969.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05984" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05984.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06011" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06011.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06008" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06008.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06007" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06007.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05964" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05964.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC05977" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC05977.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06009" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06009.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06428" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06428.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06432" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06432.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06417" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06417.jpg" target="_blank">here</a>
</small>

<blogimage id="2022-05-22-olivias-day-of-birth/DSC06422" mb="0"></blogimage>

<small>
    Full size image is: 6000px x 4000px &amp; 2.6Mb, download it <a href="https://cdn.3dnames.co/uploads/joemore.com/blogs/2022-05-22-olivias-day-of-birth/DSC06422.jpg" target="_blank">here</a>
</small>

On this day - May 22, 2022

## The HTML &lt;picture&gt; element

Not so long ago, there was either JPEG, PNG, GIF! Those were you main choices, and even I remember a graphic design friend of mine once wondering why his website was so slow when he was using pure BMP images 😅

Today, we are starting to see much wider use of better image compression algorithms for images. 
2 of the main contenders are currently <a href="https://developers.google.com/speed/webp">WEBP</a> 
and <a href="https://en.wikipedia.org/wiki/AVIF">AVIF</a>

Unfortunately, just like the old VHS vs BetaMax wars of the 80's or the Blue-way vs HD DVD wars of 2000's - we do not know which of the above 2 formats will be the ultimate winner (maybe both will!) and in order to fully support older browsers (who the f*ck still uses an old browser anyhow???) we still need to make sure our older formats can still be used! 

### So... Introducing the &lt;picture&gt; tag

Lets jump straight into some code: 

```html
<picture>
    <source srcSet="orange-lg.jpeg" media="(min-width: 1280px)" />
    <source srcSet="green-md.jpeg" media="(min-width: 640px)" />
    <source srcSet="red-sm.jpeg" media="(min-width: 0px)" />
    <img className="mx-auto" src="mud-lg.jpeg" alt="Demo Image" width="1280" height="800" />
</picture>
```

And here's the result:

<picture>
    <source srcSet="https://cdn.joemore.com/format-demos/ps26-lg.jpeg" media="(min-width: 700px)" />
    <source srcSet="https://cdn.joemore.com/format-demos/ps09-md.jpeg" media="(min-width: 420px)" />
    <source srcSet="https://cdn.joemore.com/format-demos/ps21-sm.jpeg" media="(min-width: 0px)" />
    <img className="mx-auto" src="https://cdn.joemore.com/format-demos/ps28-lg.jpeg" alt="Demo Image" width="1280" height="800" />
</picture>

**Hint:** Resize your browser to see the different images loaded.

We are essentially using 4 different images here:

* orange-lg.jpeg = 1280x800 **18,316 bytes**
* green-md.jpeg = 640x400 **8,897 bytes** 
* red-sm.jpeg = 320x200 **3,970 bytes**
* black-lg.jpeg = 1280x800 **8,047 bytes** *(This is our catch all image for older browsers)*

I'm using these coloured images as I simply want to demonstrate how when we resize our browser we get given a different image as each of the breakpoints
so give it a try (if you're on a mobile device then sorry you'll just have to take my word for it!)

We are taking advantage of the &lt;picture&gt;'s &lt;source&gt; element, and if you notice our original &lt;img&gt; element remains intact but for 
any modern browser this elements src will essentially be ignored, and only our images within the matching media query &lt;source&gt; above it will load. 

Mobile devices (most of them anyhow) will load the yellow smaller image only, and only as we increase the screen width will the larger images load. 
A larger screen size generally speaking means we are more likely to be dealing with a Desktop type device where speed isn't necessarily as critical, and
we can happily load a bigger resolution image.

## Modern Formats:

So far in the examples above we have only used JPEG images, but if we also convert them to WEBP and AVIF formats we see some significant savings:

<table>
    <thead>
        <tr>
            <th>Image Name</th>
            <th>Format</th>
            <th>Size</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>orange-lg.</td>
            <td>JPEG</td>
            <td>18,316 bytes</td>
        </tr>
        <tr>
            <td>orange-lg.</td>
            <td>WEBP</td>
            <td>10,928 bytes</td>
        </tr>
        <tr>
            <td>orange-lg.</td>
            <td>AVIF</td>
            <td>4,739 bytes</td>
        </tr>
    </tbody>
</table>

Using these modern formats does always produce better results when optimizing images.

So what does it look like to include these? Well take a look at the following:

```html
<picture>
    
    <source srcSet="orange-lg.avif" media="(min-width: 700px)" type="image/avif" />
    <source srcSet="green-md.avif" media="(min-width: 420px)" type="image/avif" />
    <source srcSet="red-sm.avif" media="(min-width: 0px)" type="image/avif" />
    
    <source srcSet="orange-lg.webp" media="(min-width: 700px)" type="image/webp" />
    <source srcSet="green-md.webp" media="(min-width: 420px)" type="image/webp" />
    <source srcSet="red-sm.webp" media="(min-width: 0px)" type="image/webp" />
    
    <source srcSet="orange-lg.jpeg" media="(min-width: 700px)" type="image/jpeg" />
    <source srcSet="green-md.jpeg" media="(min-width: 420px)" type="image/jpeg" />
    <source srcSet="red-sm.jpeg" media="(min-width: 0px)" type="image/jpeg" />
    
    <img className="mx-auto" src="orange-lg.jpeg" alt="Demo Image" width="1280" height="800" />
</picture>
```

This will mean that browsers that support AVIF formats will load them (Chrome, Opera Firefox, Edge), browsers that do not support AVIF but support WEBP will load the WEBP and then browsers that only support JPEG will load those, finally, browsers that do not even support the &lt;picture&gt; tag will load our default image!


<picture>
    
    <source srcSet="https://cdn.joemore.com/format-demos/ps26-lg.avif" media="(min-width: 700px)" type="image/avif" />
    <source srcSet="https://cdn.joemore.com/format-demos/ps09-md.avif" media="(min-width: 420px)" type="image/avif" />
    <source srcSet="https://cdn.joemore.com/format-demos/ps21-sm.avif" media="(min-width: 0px)" type="image/avif" />
    
    <source srcSet="https://cdn.joemore.com/format-demos/ps26-lg.webp" media="(min-width: 700px)" type="image/webp" />
    <source srcSet="https://cdn.joemore.com/format-demos/ps09-md.webp" media="(min-width: 420px)" type="image/webp" />
    <source srcSet="https://cdn.joemore.com/format-demos/ps21-sm.webp" media="(min-width: 0px)" type="image/webp" />
    
    <source srcSet="https://cdn.joemore.com/format-demos/ps26-lg.jpeg" media="(min-width: 700px)" type="image/jpeg" />
    <source srcSet="https://cdn.joemore.com/format-demos/ps09-md.jpeg" media="(min-width: 420px)" type="image/jpeg" />
    <source srcSet="https://cdn.joemore.com/format-demos/ps21-sm.jpeg" media="(min-width: 0px)" type="image/jpeg" />
    
    <img className="mx-auto" src="https://cdn.joemore.com/format-demos/ps26-lg.jpeg" alt="Demo Image" width="1280" height="800" />
</picture>
<p class="note">👆 Depending on your browser you'll see either AVIF, WEBP or JPEG Imqages in the example above</p>


As you may have noticed... the HTML for this is a bit of a mouthful, so lets try and create a shorthand version of this:

**TO BE**<br/>
**CONTINUED...**

How to use the HTML Picture Tag

# NextJS and Dynamic Sitemap.xml file.

I absolutely love NextJS, as a React developer it allows you to rapidly build your website/application much quicker than a bare-bones React app, and with it's built in routing
system creating dynamic pages is a walk in the park. 

A small issue I recently ran into however was on this website while building my dynamic blog pages, I use [Markdown files to generate each blog page](/blogs/markdown-blogs-with-nextjs) - and I needed a way of having a sitemap.xml file that picked up these pages dynamically as well, on top of that I wanted my sitemap.xml file
to also show the correct Date in the `<lastmod></lastmod>` tag whenever I edit one of my markdown files. 

NextJS allows us to easily create static files by placing them into the `/public/` folder, so what we are going to do here is utilize webpack to generate our
`/public/sitemap.xml` file on either our `yarn dev` or `yarn build` commands locally, and then it can easily be pushed to our repo ready to be built server side. 

### NextJS Config Update

First we need to look at updating our `next.config.js` file with the following (See START and END):


```js
const nextConfig = {
  reactStrictMode: true,
  // START
  webpack: (config, { isServer }) => {
    if (isServer) {
      require("./lib/sitemap-generator");
    }
    return config;
  },
  // END
}
module.exports = nextConfig
```

### The Sitemap Generator

Now create a new file called `sitemap-generator.js` and place the following contents into it like this: 

```js
const fs = require('fs');
const path = require('path');
const matter = require('gray-matter');

const fsPromises = fs.promises;
const SITE_ROUTE = 'https://www.mywebsite.com';

const postsDirectory = path.join(process.cwd(),'markdown-blogs')

const getBlogsFiles = () => {
    return fs.readdirSync(postsDirectory)
}
const getBlogData = ( postIdentifier ) => {
    const postSlug = postIdentifier.replace(/\.md$/,'') // removes file extension
    const filePath = path.join(postsDirectory, `${postSlug}.md`)
    const fileContent = fs.readFileSync(filePath,'utf-8')
    const { data, content } = matter(fileContent)
    const postData = { slug: postSlug , ...data, content, }
    return postData
}
const getAllBlogs = () => {
    const postFiles = getBlogsFiles();
    const allBlogs = postFiles.map(postFile => {
        return getBlogData(postFile)
    })

    const sortedBlogs = allBlogs.sort( (blogA , blogB ) => blogA.date > blogB.date ? -1 : 1 )
    return sortedBlogs
}
    
const getFileLastMod = async (PAGE ) => {
    try{
        const filePath = path.join(process.cwd(),PAGE)
        const stats = await fsPromises.stat(filePath);
        return await new Date(stats.mtime).toISOString();
    }catch(err){
        console.log('🤬',err);
        return new Date().toISOString();
    }
    
}

const regularPages = async (route) => {
    const pages  = {
        'pages/index.tsx' : '/',
        // ... add other static pages here... e.g.
        'pages/about.tsx' : '/about',
        'pages/contact.tsx' : '/contact',
        'pages/blogs/index.tsx' : '/blogs',
    }
    const output = await Object.keys(pages).map(async (file) => {
        const path = pages[file]
        const lastmod = await getFileLastMod(file);
        if(lastmod){
            return `
                <url>
                <loc>${route + path}</loc>
                <lastmod>${lastmod}</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
                </url>
            `
        }else{
            return ``
        }
    })
    return await Promise.all(output);
}

const listBlogsSitemaps = async (route) => {
    const blogs = getAllBlogs();
    const formatted = await blogs.map( async ( blog ) => {
        return `<url>
                <loc>${route}/blogs/${blog.slug}</loc>
                <lastmod>${await getFileLastMod(`markdown-blogs/${blog.slug}.md`)}</lastmod>  
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
            </url>`;
        });
    return await Promise.all(formatted);
}  

const generateSitemap = async () => {
    fs.readdirSync(path.join(process.cwd(), 'markdown-blogs'), 'utf8');
    const regPages = await (await regularPages(SITE_ROUTE)).join('')
    const blogs = await (await listBlogsSitemaps(SITE_ROUTE)).join('');
    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            ${regPages}
            ${blogs}
        </urlset>
    `;
    fs.writeFileSync('public/sitemap.xml', sitemap)
    return {
        props: {
        },
    };
};
generateSitemap();

```

<p class="note">
<b>Please note</b> - annoyingly for now the <code>sitemap-generator.js</code> file must be 
JavaScript and not Typescript - this is due to the NextJS <code>next.config.js</code> file itself being JavaScript. There is more info about this <a href="https://github.com/vercel/next.js/issues/5318">here</a> - this means that some functions are repeated in stead of re-used from our blogs-util.ts if you've been following along to my other article <a href="/blogs/markdown-blogs-with-nextjs">Markdown Blogs with Next JS and Typescript</a>
</p>

The 2 main functions in this file are first the `regularPages()` function, which contains an object with File paths along with the route name, these are our static files 
we wish to add to our sitemap. 

The 2nd function of concern is the `listBlogsSitemaps()` function - this file reads our Markdown blog files, and creates the xml for the sitemap dynamically. 

Now when you either run `yarn dev` or `yarn build` the sitemap.xml file will be generated and placed into the `/public/sitemap.xml` folder ready to be served by https://www.yourwebsite.com/sitemap.xml along with the correct <lastmod> tags for each of your blog articles.

Happy blogging!

NextJS Sitemap with Dynamic Content


<p class="note">
📝 <b>Please note</b> - these scripts have all been written to run on a Mac, I've not had chance to test them or edit them for Windows &amp; Linux machines. They should only require small alterations to run however!
</p>

😱 **A quick warning!**  Be careful when using any of these scripts as incorrect use could potentially delete files or make them un-useable! You have been warned!


## 1. Using Node JS to list files

So lets gets started with a really basic NodeJS script, one that can be run anywhere on your machine and doesn't require any packages to be installed. The script below
simply lists files in a given directory. To use it save it somewhere on your computer as `listing-files.js` then run it with `node listing-files.js` in your terminal:

```js
const fs = require('fs');
const path = require('path');

//List files within in a directory 
function listFiles(dir, callback) {
    fs.readdir(dir, (err, data) => {
        if (err) { return callback(err); }
        callback(null, data);
    });
}

listFiles('~/MyFolder', (err, data) => {
    if (err) { console.log(err); }
    console.log(data);
});
```

🤔 By the way... did you know that if you run your node js script like this: `node listing-files.js > output.txt` it will save the console logs to a file called "output.txt" instead of the console, and if you'd like both a text file and the console use `node listing-files.js 2>&1 | tee output.txt`

## 2. Renaming files sequentially with NodeJS:

In the first example we simply read files within a directory, in the next example we are going to expand on this and rename all of the files it finds but for 
safety reasons place the renamed files in a new folder and keep the original in-tact! Please note the destination must exist other wise an error will be thrown. 
I've also included an optional zeroPad function so the file names will look like `000001.jpg` etc.

```js
const fs = require('fs');
const path = require('path');

// Function to zero pad a number (optional but recommended)
function zeroPad(num, places) {
    var zero = places - num.toString().length + 1;
    return Array(+(zero > 0 && zero)).join("0") + num;
}

//Copy then rename files sequentially with a prefix
function copyRenameFiles(folderPath, newFolderPath, prefix) {
    fs.readdir(folderPath, (err, files) => {
        if (err) throw err;
        files.forEach((file, index) => {
            fs.copyFile(path.join(folderPath, file), path.join(newFolderPath, prefix + zeroPad(index+1,6) + '.jpg'), (err) => {
                if (err) throw err;
            });
        });
    });
}

copyRenameFiles('~/MyFiles', '~/MyRenamedFiles', 'myPrefix_')
```

## 3. Find and replace filenames with NodeJS 

What if we have hundreds of files and there is something just not quite right with the filenames... instead of manually going through each file one by one (c'mon who hasn't done that at least once) instead we can use a script to rename our files in a much better way. In this instance I'm scanning a directory and replacing any files containing the string "ReplaceMe" with "NewString"

```js
const fs = require('fs');
const path = require('path');

//Function to rename files in a given directory (But leaving the extension untouched)
function renameFilesSearchAndReplace(dir, search, replace) {
    fs.readdir(dir, function(err, files) {
        if (err) {
            return console.error(err);
        }
        files.forEach(function(file, index) {
            const ext = path.extname(file);
            const filenameNoExtension = path.basename(file, ext);
            const renamed = filenameNoExtension.replace(search, replace);
            if( !ext ){ return; }
            fs.rename(path.join(dir, file), path.join(dir, renamed + ext ), function(err) {
                if (err) {
                    return console.error(err);
                }
            });
        });
    });
}

renameFilesSearchAndReplace('~/MyFolder/', 'ReplaceMe', 'NewString');
```

## 4. List images within a given directory and create HTML Markup:

OK, this next example is a bit more complex as it includes an npm module: `npm install exifreader` and doesn't actually rename any files, but instead demonstrates how we can use NodeJS to list images with a given directory and create some basic HTML Markup for each image. Ideal for a blog article with some random images. 

Simply replace the console.log with the HTML Markup you want to output and run the script:

```js
const fs = require('fs');
const path = require('path');
const exifReader = require('exifreader');


//function to read list of images in a directory and read the filesize and image dimensions 
function readImages(dir) {
    const bytesToMegabytes = bytes => (bytes / 1024 / 1024).toFixed(2);
    fs.readdir(dir, function(err, files) {
        if (err) { return console.error(err); }
        files.forEach(function(file, index) {
            const filePath = path.join(dir, file);
            const dimensions = {};
            fs.stat(filePath, function(err, stats) {
                fs.readFile(filePath, function(err, data) {
                    const exifData = exifReader.load(data);
                    if(exifData['Image Width']){
                        dimensions.width = exifData['Image Width'].value;
                        dimensions.height = exifData['Image Height'].value;
                    }
                    console.log(`Filename: ${file}: Size: ${bytesToMegabytes(stats.size)}Mb, Resolution (WxH) : ${dimensions.width}px X ${dimensions.height}px`);
                })                
            });
        });
    });
}
readImages('~/MyPhotos/')
```

<hr/>

As you can see by using NodeJS we can easily manipulate file names on our Machine to do literally anything we want, the power behind running your own scripts to rename files is immense. But as Peter Parkers Uncles says "With great power comes great responsibility" - and that is especially true here! You can easily F🤬ck up big time, so be ultra careful.

## Some things to note: 

* I had to write a script for my [3dnames.co](https://www.3dnames.co) website that created over 3 million files, I found I kept getting errors such as "Error: EMFILE: too many open files" and in the end I used this [node-graceful-fs](https://github.com/isaacs/node-graceful-fs) module as a drop in replacement for **fs**: `const fs = require('graceful-fs');` and it definately seemed to handle it better than the regular **fs** module. For smaller lists of files however you'll find **fs** works fine.
* Combining NodeJS scripting with a Service like `AWS.S3()` sync can be absolutely amazing if you fancy writing your own powerful backup scripts with cost effective savings!



NodeJS Re-naming Files scripts


# AWS Amplify Studio and NextJS

This article will guide you through the steps required to link up your NextJS front end website to an AWS Amplify Studios backend. 

**Warning** - I am going to keep the front end extremely basic with zero frills for the sake of this tutorial, so the UI itself won't be very interactive or pretty at all... that part is entirely up to you as a developer and/or designer. 

<hr>

Amplify has 2 main parts the first being Hosting for your frontend, and the second being Studio which is the backend. I have already written a guide about how you can [host your NextJS website with Amplify](/blogs/nextjs-websites-hosted-with-amplify) so assuming you are now a master at that part lets show how we can add the Amplify Studio backend into a bare bones NextJS Website. 

*Please note I'm currently using Next **V12.0.8** due to a bug with Amplify at the time of writing because the NextJS /api/ doesn't work with the latest version.*

1. First lets create a new NextJS App: `yarn create next-app@12.0.8 --typescript`
2. Now in our Amplify App lets click on "Backend environments" and then "Get started" 

![Deploy Studio](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/1-lg.jpg)

3. Your Amplify Studio will be created in the Background:

![Deploying Studio](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/2-lg.jpg)

4. Once finished click on "Launch Studio" - this opens up our Amplify Admin Interface to administer our backend:

![Studio Created](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/3-lg.jpg)


<p class="note">
👆🏼 Please note - this is how we will access our Studio Admin portal, so either note the URL it takes you to or remember this step.
This Admin portal is unique to your Apps backend, and you can provide users access to it, this is especially great for allowing colleagues/clients access to a backend without the security worry of creating them a separate ISM account, and save you building your own Admin interface as well! Very cool indeed! 
</p>

Right, now we have our Studio enabled we are going to do 3 things: 

1. We will setup User Management  - this effectively uses Cognito in the background
2. We will also add File Storage - this effectively uses S3 in the background
3. We will create a Content Model - this uses AppSync and DynamoDB in the background.

<p class="note">
🤓 If you are an advanced AWS user then you've probably setup DynamoDB, Cognito, S3 Buckets, Appsync etc yourself so this is effectively a layer on top controlling those services, but if you have no experience with these then not to worry these will all be done in the background for you. 
</p>

### User Management:

For this example we are going to use the absolute default settings, so click "User management" on the left menu and without editing anything lets just press deploy: 

![Studio User Management](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/4-lg.jpg)

...it will start deploying for you

![Studio User Management being deployed](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/5-lg.jpg)

Once finished, it will have created everything we need to allow our front end site to fully authenticate users with registration, forgot password, login etc. So at the top right you will either say something like "Deployment Successful" or show "Local Setup Instructions" and give you a command that you can copy into your command line: 

![Studio User Management Local Setup Instructions](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/6-lg.jpg)

Copy this and enter it into the command line for your NextJS Website.

* It will first open up a browser window and authenticate with Studio - click Yes and then return to the CLI *(this is so only we can use the command!)*
* Follow the prompts to complete you setup in my case I selected 
    * Choose your default editor: **Visual Studio Code**
    * Choose the type of app that you're building: **JavaScript**
    * What javascript framework are you using: **React**
    * Source Directory Path:  **.**
    * Distribution Directory Path: **.next**
    * Build Command:  **npm run-script build**
    * Start Command: **npm run-script start**
    * Do you plan on modifying this backend? **Yes**

Now our front end will add a file called `aws-exports.js` and a new directory/folder called `amplify` and we are ready to start using the backend services in our front end.

<p className="note">
Please note: in the following examples I am writing code that you would never put into production as there is no user interaction with forms etc and I'm hard coding email address and passwords directly, this is simply to make this tutorial easier to follow, you would need to expand on these examples for your production site 
</p>


First install the 'aws-amplify' module using `npm i aws-amplify`

### Registration Page

Now lets create a new NextJS file called `register.tsx`, and add these contents: 

```js
import type { NextPage } from "next";
import { useEffect, useState } from "react";
import config from '../aws-exports'
import Amplify, { Auth } from 'aws-amplify'
Amplify.configure({
    ...config,
    ssr: true,
})

const fakeEmail = 'fake@example.com';
const fakePassword = 'FakePassword123!!';

const Register: NextPage = () => {
    const [output, setOutput ] = useState('')
    const onFormSubmit = async () => {
        try{
            const result = await Auth.signUp({ username: fakeEmail, password : fakePassword})
            console.log(result)
            if( result ){
                setOutput(`User signed up OK - a verification code will have been sent via ${result.codeDeliveryDetails.AttributeName} to ${result.codeDeliveryDetails.Destination}`)
            }
        }catch(err : any){ 
            console.error(err)
            setOutput(err.message)
        }
    }

    // This would be done via a interactive form in production... do not do this in the real world!
    useEffect( () => { onFormSubmit() },[])

    return <p>{output}</p>;
};

export default Register;
```

Change the `fakeEmail` and `fakePassword` to ones of your own - it will need to be an email address you actually have as a verification code will be sent there.

Now if you run your NextJS site and visit the page at `localhost:3000/register` it should register the user and the message should say:

> User signed up OK - a verification code will have been sent via email to f***@e***.com


### Verify Code Page

So next check your email inbox, and  make a note of the 6 digit code that the backend system will have emailed you.

Next add the following code to a page called `verify-code.tsx`:

```js
import type { NextPage } from "next";
import { useEffect, useState } from "react";
import config from '../aws-exports'
import Amplify, { Auth } from 'aws-amplify'
Amplify.configure({
    ...config,
    ssr: true,
})

const fakeEmail = 'fake@example.com';
const fakeCode = '123456';

const VerifyCode: NextPage = () => {
    const [output, setOutput ] = useState('')
    const onFormSubmit = async () => {
        try{
            const result = await Auth.confirmSignUp( fakeEmail, fakeCode )
            setOutput('Code was confirmed!')
        }catch(err : any){ 
            console.error(err)
            setOutput(err.message)
        }
    }

    // This would be done via a interactive form in production... do not do this in the real world!
    useEffect( () => { onFormSubmit() },[])

    return <p>{output}</p>;
};

export default VerifyCode;
```

Change `fakeEmail` to be your email, and set the `fakeCode` to be the code that was emailed over to you. Now when you run this page by visiting `localhost:3000/verify-code` it should output **"Code was confirmed!"**

### Login Page:

So far so good, we have registered our user account and verified our email is real by entering the code, then next step is to log the user in, so our final page is going to be called `login.tsx` and it's contents are as follows:

```js
import type { NextPage } from "next";
import { useEffect, useState } from "react";
import config from '../aws-exports'
import Amplify, { Auth } from 'aws-amplify'
Amplify.configure({
    ...config,
    ssr: true,
})

const fakeEmail = 'fake@example.com';
const fakePassword = 'FakePassword123!!';

const Login: NextPage = () => {
    const [output, setOutput ] = useState('Loading...')
    const onFormSubmit = async () => {
        try{
            const result = await Auth.signIn({ username: fakeEmail, password : fakePassword })
            setOutput('Great - you are now logged in!')
        }catch(err : any){
            console.log(err)
            setOutput(err.message)
        }
    }
    // This would be done via a interactive form in production... do not do this in the real world!
    useEffect( () => { onFormSubmit() },[])

  return <p>{output}</p>;
};

export default Login;
```

Again... change the `fakeEmail` and `fakePassword` to the same ones we registered, and run the page at `localhost:3000/login` and hey presto! We should be logged in! 😎

If we now visit our Amplify Studio user management page, we should see our freshly created user:

![Studio User Listed](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/7-lg.jpg)

### Adding the rest of the Auth parts

OK, so we have Register, Login, and Verify Code parts, but what about the rest, well if you take a look at the [Amplify Docs](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/) this will give you all the information you need, and will show you how you can invoke these other functions:

* Auth.resendConfirmationCode()
* Auth.signOut()
* Social sign-in (OAuth) for Amazon, Apple, Facebook, Twitter etc
* Adding MFA with Auth.setupTOTP() &amp; Auth.verifyTotpToken()
* Auth.forgotPassword() &amp; Auth.forgotPasswordSubmit()
* Auth Events
* Deleting users

<hr>

## Next up: Lets add File Storage

Right then... now that we have our User registered and logged in now is the perfect time to add in File Storage so they can upload an image, video or literally any file they like. However, In this example I'll be sticking to just image uploads

So to start, open up your Studio Admin portal again, and in the left hand menu click Storage, and check the boxes for Upload, View and Delete under "Signed-in Users" and then press "Create bucket"

![Studio Adding Storage](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/8-lg.jpg)

...it will then deploy:

![Studio Deploying Storage](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/9-lg.jpg)

Once it's finished we can click the "Local Setup Instructions" link on the top right again and get copy the `amplify pull` command and paste it into our NextJS terminal, once finished it'll inform you we now have Storage available:

```bash
┌──────────┬───────────────────────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name                             │ Operation │ Provider plugin   │
├──────────┼───────────────────────────────────────────┼───────────┼───────────────────┤
│ Auth     │ yourprojectname                           │ No Change │ awscloudformation │
├──────────┼───────────────────────────────────────────┼───────────┼───────────────────┤
│ Storage  │ s3yourprojectnamestorage95a8f38e          │ No Change │ awscloudformation │
└──────────┴───────────────────────────────────────────┴───────────┴───────────────────┘
```

Now that this is ready, lets create a new NextJS page called `image-upload.tsx` to test an image upload and then view the image once it's uploaded. 

This page lets the user select an image from their computer and it will upload it to their protected bucket and give them a signedURL to view the image afterwards.

```js
import type { NextPage } from "next";
import { useEffect, useState } from "react";
import config from '../aws-exports'
import Amplify, { Auth, Storage } from 'aws-amplify'
Amplify.configure({
    ...config,
    ssr: true,
})

const ImageUpload: NextPage = () => {

    const [ userAuth, setUserAuth ]  : any = useState(null) 
    useEffect( () => {
        isAuthed()
    }, [])

    async function isAuthed(){
        try{
            await Auth.currentAuthenticatedUser()
            setUserAuth(true)
        }catch(err){
            setUserAuth(false)
        }
    }

    const [ progress, setProgress ]  : any = useState(null) 
    const [ signedImage, setSignedImage ] : any = useState( null )
    const handleFileInputChange = async ( e : any ) => {
        setSignedImage(null)
        const file = e.target.files[0];
        const imageName = Date.now() + '-' + file.name
        const uploadResult = await Storage.put(imageName, file, {
            level: 'protected',
            contentType: file.type,
            progressCallback(progress) {
                setProgress(`Uploading ${Math.round(progress.loaded/progress.total * 100)}%`);
            },
        });
        const signedURL = await Storage.get(uploadResult.key, {level: 'protected'});
        setSignedImage(signedURL)
        setProgress(null)
    }
    return (
        userAuth === null ? <p>Loading...</p> : 
        userAuth === true ?
        <>
            <label htmlFor="file" >
                <div>Select an Image </div>
                <input id="file" name="file" type="file"  onChange={ handleFileInputChange }  accept="image/jpeg,image/gif,image/webp,image/png"/>
            </label>
            { progress && <p>{progress}</p> }
            { signedImage &&  <div className="max-w-lg shadow-lg m-5">
                <img src={signedImage}  alt='Uploaded image' />
            </div>
            }
        </> 
        : <p>You are not logged in!</p>
    )
};

export default ImageUpload;
```

There we go we have Amplify able to let our users upload images! 

<hr>

## Next up: Lets add a Content Model

OK, going back to our Amplify Studio, click on "Data" in the left menu, then "+ Add Model" and lets create a really simple ToDoList with just "id" and "task" as it's columns:

![Studio Deploying Storage](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/10-lg.jpg)

Now Click "Save and Deploy" wait for the deployment, and then run the `amplify pull` command again. You are now ready to start using your Content Model locally.

So lets create a new file called `to-do-list.tsx` with the following content:

```js
import type { NextPage } from "next";
import { useEffect, useState } from "react";
import config from '../aws-exports'
import Amplify, { Auth } from 'aws-amplify'
Amplify.configure({
    ...config,
    ssr: true,
})

import { DataStore } from '@aws-amplify/datastore';
import { ToDoList } from '../models';

const ToDoListPage: NextPage = () => {

    const [ userAuth, setUserAuth ] : any = useState(null) 
    const [ userEmail, setUserEmail ] : any = useState(null) 
    const [ items, setItems ] : any = useState([]) 

    async function isAuthed(){
        try{
            const resp = await Auth.currentAuthenticatedUser()
            setUserEmail(resp.signInUserSession.idToken.payload.email)
            setUserAuth(true)
        }catch(err){
            setUserAuth(false)
        }
    }

    const addToDoItem = async () => {
        await DataStore.save(
            new ToDoList({
                "task": `${userEmail} - ${new Date()} - ${navigator.userAgent}` //Just users email, date string and useragent to test with
            })
        );
    }

    const getItems = async () => {
        try{
            const dataFromAmplify = await DataStore.query(ToDoList);
            setItems(dataFromAmplify)
        }catch(err){
            console.error( err )
        }
    }
    const deleteItem = async ( id : string ) => {
        try{
            const toDelete : any = await DataStore.query(ToDoList, id);
            DataStore.delete(toDelete);
        }catch(err){
            console.error( err )
        }
    }

    // Observe data in realtime for changes (do not use await on this since it is a long running task and you should make it non-blocking)
    useEffect( () => {
        isAuthed()
        getItems()
        DataStore.observe( ToDoList ).subscribe( () => {
            getItems()
        })
    },[]);
    
    return (
        userAuth === null ? <p>Loading...</p> : 
        userAuth === true ?
        <>
            <h3>To Do List</h3>
            <button onClick={addToDoItem} className="py-2 px-4 border rounded-lg m-2 bg-slate-300">+ Add To Do Item</button>
            <div>
                <ul className="max-w-4xl">
                    {items.map( (item : any) => {
                        return <li key={item.id} className={'border p-3 m-1 text-xs'}>
                            ITEM: {item.task} <button className="text-right float-right" onClick={(e : any) => {deleteItem(item.id)}}>🗑</button>
                        </li>
                    })
                    }
                </ul>
            </div>
        </> 
        : <p>You are not logged in!</p>
    )
};

export default ToDoListPage;
```

Now when we visit `localhost:3000/to-do-list` we should have a button we can press to add an item (it'll populate with the users email, a date string and their useragent for demonstration sake) and we should see it appear in realtime thanks to the `DataStore.observe()` we are running on our ToDoList model!

We can press the 🗑 delete icon to easily delete any rows we add!

![Studio User Listed](https://cdn.3dnames.co/uploads/joemore.com/blogs/amplify-studio-nextjs/11-lg.jpg)

### Next Up: Securing the items per user.

So one thing I love about Amplify Studio is how quickly it allows you to get a site with a database up and running. The one thing I absolutely hate about it, is how complicated it is to 
get the permissions correct. So in this next part of this article I'll explain how... 

**TO BE**<br/>
**CONTINUED...**

Amplify Studio and NextJS


# Webpack Starter Kit With Typescript

You can find the files for this article in my [Webpack Starter Kit GIT repository](https://github.com/joemore/webpack-typescript-starter-kit)

If you are a React/NextJS/Vue/Angular/Svelte or any of the other amazing JavaScript front end framework developer then you might already using be using something Webpack in the background (many of them do) 
and although these frameworks do a fantastic task of minifying their code foot print, have you ever wanted to create it as small as you possibly can? Or have you ever wanted out of just pure curiosity to create a bare bones vanilla JS script?

Well this is where you might want to consider using just Webpack on it's own, and this starter kit can be used as either a template to start from, or just something to learn how it works. 

I've deliberately kept it smallish in size but with enough functionality to demonstrate it's core functionality. 

### Using Typescript

I've also purposely used Typescript instead of plain JavaScript in this example, the reason behind this is that if we are using Webpack that we **can** use Typescript in our source files as it will compile to Vanilla JS anyhow. You've probably heard how any developer who has switched to Typescript finds it so much nicer to work with once they have figured out how it all works, and I now love it. So I've included it in this example. If you haven't learnt how to use it, then I suggest you just start trying... you'll soon be thanking me! 

### Lets get Webpacking...

Ok, so once you've [downloaded the repository](https://github.com/joemore/webpack-typescript-starter-kit) there is a directory called `./dev/` and it contains the following files:


```linux
├── dev
│   ├── assets
│   │   ├── css
│   │   │   ├── custom1.css
│   │   │   └── style.css
│   │   └── js
│   │       ├── custom1.ts
│   │       ├── custom2.ts
│   │       └── index.ts
│   └── index.html
├── package.json
├── tsconfig.json
└── webpack.config.js   
```

(I've ignored any readme or Licence files in the above)

Everything within our `./dev` directory is where we can start editing files. So to start lets first install the NPM modules that are listed in our package.json file:

`yarn install` (or npm works fine) - installs all the bits and bobs

Then once done run `yarn dev` - this should open up our index.html file at http://localhost:3000 in a browser, and our CSS files and TypeScript files will be compiled into a main.mss and bundle.js files respectively.

If we then run `yarn build` a new directory `./dist/` will be created and contain just 3 files:

```bash
└── dist/
    ├── bundle.js       (357 bytes)
    ├── index.html      (601 bytes)
    └── main.css        (298 bytes)
```

These are all minified, and as you can see are tiny files. Hey presto we've just built our first pure Vanilla JS/TS application using Webpack to bundle and compress our files!

### What does this application do?

Well... nothing really, it's purely a demo. It simply outputs a HTML page with a h1, p, ul, & li tags, and outputs some console logs. The point is that this is a starter package for you to do with as you please! 

### Further Editing

Webpack is a beast once you get into it, and I suggest you take a look at the full documentation over at [https://webpack.js.org/](https://webpack.js.org/) if you want to really get your hands dirty with it. But let me show you one quick addition we can make to our starter kit. 

Lets say we had some extra files that we wanted to include in our production build (you could always load them externally, but lets say in this case we want them locally) - first off uncomment these lines within the `webpack.config.js` files:

```js
    new CopyPlugin({
      patterns: [
        {from: "dev/assets/img", to: "assets/img"},
        {from: "dev/robots.txt", to: "robots.txt"},
        {from: "dev/assets/js/third-party-library.js", to: "assets/js/third-party-library.js"},
      ],
    }),
```

Now lets add in 2x images, a robots.txt file and a fake script called `third-party-library.js` like this:

```bash
├── dev
│   ├── assets
│   │   ├── css
│   │   │   ├── custom1.css
│   │   │   └── style.css
│   │   └── js
│   │   │   ├── custom1.ts
│   │   │   ├── custom2.ts
│   │   │   ├── index.ts
│   │   │   └── third-party-library.js
│   │   └── img
│   │       ├── image1.jpg
│   │       └── image2.png
│   ├── robots.txt
│   └── index.html
├── package.json
├── tsconfig.json
└── webpack.config.js   
```

We can then include these files by adding them into our HTML manually like this:

```html
<img src="./assets/img/image1.jpg" /> 
<img src="./assets/img/image2.png" />
<script src="./assets/js/third-party-library.js"></script>
```

And when we run `yarn build` our files will be copied over to our production folder! This example is not perfect, but merely used to demonstrate how we can tweak our Webpack config to tailor it to our needs!

Happy Webpacking & enjoy!

Webpack Starter Kit

# Tailwind Tips you should know

Tailwind is an amazing utility first CSS framework... it will no doubt take you a little bit of getting used to when you first use it, but I think it's safe to say that once you start to use it you'll be pleasantly surprised at how nice it can be. Here are some of my top tips when using it. 


### 1. Always think about component separation

I've placed this rule at the beginning, as to me this is the number 1 rule I wish I taught myself about tailwind as soon as I started out with it. 

I have to admit coming from a mainly Bootstrap CSS background I got used to the fact that my HTML markup was always much easier to read semantically than it is with Tailwind, and that is true with any HTML where you can name your classes to anything you like. Tailwind unfortunately doesn't have this unique class naming ability and therefore you really need to think a bit more about splitting up your JavaScript components instead. 



All modern JS frameworks are built around component separation and you can see why Tailwind was designed as a utility first CSS framework, once you stat using it, and ou start to split up your components neatly it really starts to pay off! 

### 2. Tailwind supports per pixel amounts

Padding, margins etc can be defined as pixel values and not just their pre-defined amounts such as pt-1 or pt-5 etc - for me this was a pleasant surprise when I first found out, because I thought what a limitation it might end up being if I was trapped to only use tailwinds default margin/padding sizes. It's only rare you might need to use this syntax but super useful to know.

```html
<div className="pt-[17px]">
    I have a top padding of exactly 17 pixels
</div>
```

### 3. Use clsx utility to join classes neatly in your JS code

One problem with tailwind is that your semantic HTML can get long, and hard to read, plus changing different classes depending on your state can get a bit horrible as well, this tiny utility can really help to make that problem easier to deal with, install it with `yarn add clsx` or view full code and documentation here: [https://github.com/lukeed/clsx](https://github.com/lukeed/clsx)

It can be used to make your longer classes names a bit more readable by splitting onto new lines, or using a ternary statement so your UI updates depending on the state
```js
<div className={ clsx('text-white border-2 p-3', 
    myCondition ? 
        'bg-red-400' 
        : 
        'bg-green-400'
    )
}/>
```

clsx also supports conditions for objects and arrays, so you could have something like the following, great when dealing with large objects that might control your UI:
```js
<div className={ clsx('text-white border-2 p-3', {
        'bg-red-400': true,
        'bg-green-400': false
    })
}/>
```

### 4. Add your own custom classes with the @apply 

Generally speaking you should consider splitting your markup into separate components, however there are times when it might be beneficial to create your own classes that you can use 
within your projects, instead of writing your own CSS you should consider looking at using the `@apply` method within your `globals.css` file like this:

```css
@layer components {
  .btn {
    @apply py-2 px-4 bg-cyan-500 text-white font-semibold rounded-lg shadow-md hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-opacity-75;
  }
}
```

You can then re-use this within your code simply by using: `<div className="btn"></div>` each time! Sweet! - However, as stated, try to avoid this and use good component splitting design instead! It's better in the long run!

### 5. Animate your UI components using the hover method

This tip shows you how you can add a animated hover effect to a button, in this example we are making use of our @apply created btn about

```html
<div className="btn rounded-3xl hover:rounded-xl transition-all duration-300 ease-linear">HELLO</div>
```

### 6. DarkMode - either manual of based on your OS

These days most operating systems come with a Dark mode toggle, and we can pick this up as a CSS media query with `prefers-color-scheme` - we can read this to change the display of tail wind by applying
different colors for text, background etc. 

**A word of warning** - this can be a tedious task to add dark mode to a pre-existing site, so I recommend you doing this early on.

Here's the basic tailwind syntax for a button that changes from a light to darker appearance if DarkMode is enabled:

```html
<div className="btn bg-gray-400 text-gray-800 dark:bg-gray-800 dark:text-gray-200"></div>
```

### 7. Make use of pre-built components

I'm one of those developers that doesn't mind getting my hands dirty with a bit of design, but I find myself spending way too much time tweaking on stupid bits instead of getting on with the job at hand, i.e. nudging pixels 1 at a time until it's perfect, and then coming back and nudging it some more. 

Anyhow, I'd recommend using ay one of these sites as they have some great Pre-built components. Some free, some paid:

* [https://tailwindcomponents.com/](https://tailwindcomponents.com/) 
* [https://kitwind.io/](https://kitwind.io/products/kometa/components)
* [https://www.tailwindtoolbox.com/](https://www.tailwindtoolbox.com/)
* [https://tailblocks.cc/](https://tailblocks.cc/)

...any of these links above will be able to save you a lot of time.

### 8. You can add !important flag to your tailwind globally

If you use a lot of 3rd party libraries that come with their own CSS then it's likely you'll have a few conflicts along the way, this can screw up the look of your site (to be fair this isn't always the fault of sloppy coding by the 3rd party, but more of design bug with CSS in general in my opinion) - anyhow to fix this you can always "put your foot firmly down" by appending the `!important` keyword
to all of your classes globally, simply edit your `tailwind.config.js` file like this:

```js
module.exports = {
  important: true,
};
```

This will then update your CSS file so that all classes now look like this:

```css
.pt-1 {
  padding-top: 0.25rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 0.75rem !important;
}
```

**A word of warning** - Try to avoid this only as a last resort, the `!important` is a get out of jail card that can only really be used once!

### Do you prefer Pixels instead of REM values?

Please note - this will 100% mess up your pre-existing tailwind site, but you can change the spacing to be pixels instead of rem units if you so wish:

```js
module.exports = {
  theme: {
    spacing: {
      "1": "8px",
      "2": "12px",
      "3": "16px",
      //etc...
    },
  },
};
```

Tailwind Tips you should know


# NextJS Websites Hosted with Amplify

If you have a website written using the NextJS framework, then you might be looking at various hosting platforms out there. Vercel is one of my favorite platforms to host NextJS sites and rightfully so as they are the guys who wrote NextJS in the first place. However, if like me you use AWS then you might also find it beneficial to host some of your projects using AWS's Amplify service, this guide shows you how. 

**Please Note:** - At the time of writing this article (29th March 2022) there are currently 2 bugs I've found with Amplify that might affect the NextJS `/api/` path. The first is that environment variables must all be prefixed with "NEXT_PUBLIC_" when within the api directory contents (going against the rules of NextJS) and secondly, Amplify does not work at all with the `/api/` on Version 12.1.0 - I had to revert back to v 12.0.8 to get it working. I.e. `yarn remove next` and then `yarn add next@12.0.8`

### Before you start

In this example we will be using a NextJS app version 12.0.8, saved in a Github repo. I am using AWS region `eu-west-2` but you can use any region of your choice

* Make sure you have a NextJS website ready, if needs be start a new one with `npx create-next-app@12.0.8`
* Add it to your Github account (can be private and temporary)

### Lets go: 

1. Login to your AWS Account, and go to the [Amplify Console](https://eu-west-2.console.aws.amazon.com/amplify/home), click get started

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/1-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/1-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/1-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/1-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

2. We want to choose Amplify hosting not Studio (that's a backend part and I'll be writing another guide about that soon!)

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/2-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/2-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/2-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/2-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

3. Now choose Github (or another GIT repository)

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/3-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/3-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/3-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/3-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

4. Now sign-in to your GitHub account and authorize Amplify to access either all your repos, or specific ones.

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/4.1-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/4.1-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/4.1-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/4.1-md.jpg" alt="NextJS Amplify Setup Guide" width="600">
</picture>

5. Enter your password to confirm

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/5-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/5-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/5-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/5-md.jpg" alt="NextJS Amplify Setup Guide" width="400">
</picture>

6. You should now be able to choose your repo from the list 

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/7-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/7-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/7-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/7-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

7. We now need to create a new backend role, this is what NextJS requires to process things like images, SSR and the /api/ folder. So click "Create New Role" 

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/8-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/8-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/8-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/8-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

8. It will open up a new window with the selected options already selected for you, choose "Next: Permissions"

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/9-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/9-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/9-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/9-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

9. This show the policy name, you can expand it if you wish to see whats happening, Click "Next: Tags" and click next again (FYI - I've not included the tags screenshot)

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/10-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/10-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/10-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/10-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

10. Finally you can name your role here, and edit the description (or just use the defaults) and click "Create role" 

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/11-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/11-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/11-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/11-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

11. Once you return to Amplify you'll be able to select the newly created role, and on this page review the build settings

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/12-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/12-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/12-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/12-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

12. We are then taken to a page where we can review our Amplify setup, click "Save and Deploy"

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/13-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/13-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/13-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/13-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

13. Our NextJS Website will then be deployed, built and hosted and once ready

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/14-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/14-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/14-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/nextjs-amplify-guide/14-md.jpg" alt="NextJS Amplify Setup Guide" width="800">
</picture>

...and that's it, we now have a fully hosted NextJS website, that re-builds automatically when you push content into your GitHub repo. 

### Further improvements:

* Click on Domain Management" on the left to add a domain you own in route53 to your website, if you wish to just use a subdomain, then make sure you press the "exclude root" button on setup
* Notifications - allows you to be emailed whenever a new build is in progress, excellent if you have team members all working on the same repo. 
* Environment variables - Add key/value pairs to display/use in your NextJS App
* Access control - add a username and password to protect your site until it's ready for public viewing.
* Amplify Studio - Add a full backend system to administer your website, the power of AWS with the simplicity of Amplify.

For more reading please see the [AWS Amplify Documentation](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) 


NextJS Websites Hosted with Amplify

# Amazing A.I. Tools you can use today



### synthesia.io

First off on the list is the [synthesia.io](https://synthesia.io) website that allows you to create your own super high quality text to speech videos but also with a super realistic AI character speaking them out. Check out the video below for one that I made for this webpage:

<div style="position: relative; overflow: hidden; padding-top: 56.25%;"><iframe src="https://share.synthesia.io/embeds/videos/e6d33fff-28b3-4cb5-b004-57bf0a079d12" loading="lazy" title="Synthesia video player - Your AI video" allow="encrypted-media; fullscreen;" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0; overflow:hidden;"></iframe></div>
<hr>


### otter.ai

This tool at [otter.ai](https://otter.ai/) is absolutely fantastic for recording a meeting and then letting their AI transcribe what was said into easily readable meeting note. It tries to distinguish between each speaker as well, so you end up with a conversation looking something like this:

<small>

* Person 1: "Ok, lets begin the meeting, Bruce can you introduce us all?" 
* Person 2: "Yes thanks Tony, I'd like to welcome in to this meeting Steve, Natasha and Peter"
* Person 3: "Hi Everyone"
* Person 4: "Good morning! Nice to see you all again"
* Person 1: "Great, thanks everyone, ok starting with topic 1 we are discussing the origin of the stones"

</small>  

You can then go through and fine tune the names of the Persons and edit any inconsistences or incorrect words/phrases it finds and fix them manually. I've used this tool before to take down meeting notes, and it's super handy! 

### AIVA.ai

This website [aiva.ai](https://aiva.ai) uses AI to create you unique music tracks to use in your sites/videos/games etc - and the paid version allows you to own the copy right to the downloaded track so you can happily use it in your videos with full monetization enabled! Very Very cool indeed. 

![](/images/blogs/amazing-ai-tools/ai-aiva.ai.jpg)

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/ai-aiva.ai-2-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/ai-aiva.ai-2-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/ai-aiva.ai-2-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/ai-aiva.ai-2-md.jpg" alt="AIVA.ai" width="800">
</picture>

<hr>





### Artflow.ai

Visit [artflow.ai](https://artflow.ai/) and create a free account, you can then start typing out a description and let the AI do the rest and start making your ANIME photos for you! Very cool indeed!


<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/artflow.ai-2-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/artflow.ai-2-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/artflow.ai-2-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/artflow.ai-2-md.jpg" alt="Artflow.ai" width="800">
</picture>

<hr>



### deepdreamgenerator.com

Want to feel like you're Johnny Depp in Fear and Loathing, then try out [deepdreamgenerator.com](https://deepdreamgenerator.com/) - upload a photo and get back really surreal looking images! 

![Me as a DeepDream AI Image](https://cdn.3dnames.co/uploads/joemore.com/blogs/deepdream-joe.jpg)
<hr>


### Hotpot.ai

This is a fantastic website to help you easily restore old photos and colorize them take a look at [https://hotpot.ai/](https://hotpot.ai/) - below is an actual photo of my Grandma taken sometime around 1930-1940 - I used hotpot.ai to restore the photo and bring out the colors.

![My Grandma restored using AI](https://cdn.3dnames.co/uploads/joemore.com/blogs/hotpot-ai-nanna2.jpg)


<hr>

### sketch.metademolab.com

This is is super fun [sketch.metademolab.com](https://sketch.metademolab.com/) - go ask your kids, or niece/nephew for a hand drawing (or just draw something yourself on a piece of paper), then use this awesome website to bring it to life and animate it back to them! They'll love you for it! 

I found this drawing on the fridge of my friends house I'm currently staying at,! I ran it through sketch.metademolab.com and hey presto here's the result! Very neat indeed!


<table>
<tr>
<td style="width:35%">
<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/sketch.metademolab.com-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/sketch.metademolab.com-md.webp 800w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/sketch.metademolab.com-md.jpg" alt="sketch.metademolab.com" width="800">
</picture>
</td>
<td style="width:65%">
<div className="relative">
    <video width="720" height="496" controls>
        <source src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/sketch.metademolab.com.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

<small>Drawing by Peggy Waites, aged 9</small>


</td>
</tr>
</table>

<hr>

### namelix.com

At [https://namelix.com/](https://namelix.com/) these guys have created a bit of AI powered branding and logo generator, plug in some keywords and checkout the results, maybe you find your next cool logo here!

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/namelix.com-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/namelix.com-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/namelix.com-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/namelix.com-md.jpg" alt="namelix.com" width="800">
</picture>

<hr>

### affinelayer.com/pixsrv

This is funny [https://affinelayer.com/pixsrv/](https://affinelayer.com/pixsrv/) - let the AI turn your awful drawings into as real objects as it possibly can, to be fair it does a good job of my pathetically bad drawings!

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/affinelayer.com-pixsrv-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/affinelayer.com-pixsrv-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/affinelayer.com-pixsrv-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/affinelayer.com-pixsrv-md.jpg" alt="affinelayer.com pixsrv" width="800">
</picture>

<hr>

### removal.ai

[https://removal.ai/](https://removal.ai/) - removes the background from a photo, pretty great results each time I've tested it to be fair!


<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/removal.ai-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/removal.ai-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/removal.ai-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/removal.ai-md.jpg" alt="removal.ai" width="800">
</picture>

<hr>

### tldrthis.com

For any of you lazy people out there, this AI tool is great, [https://tldrthis.com/](https://tldrthis.com/) it lets you copy a chunk of text or a URL and it will try and summarize what it find into an easily digestible couple of paragraphs. Wish I had this when I was at school!

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/tldrthis.com-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/tldrthis.com-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/tldrthis.com-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/tldrthis.com-md.jpg" alt="tldrthis.com" width="800">
</picture>

<hr>

### [this-person-does-not-exist.com](https://this-person-does-not-exist.com/)

Want to create randomly generated faces completely from AI? Then try out [https://this-person-does-not-exist.com/](https://this-person-does-not-exist.com/) - each face generated is made from AI and that person does not exist! Scary stuff!

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/this-person-does-not-exist.com-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/this-person-does-not-exist.com-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/this-person-does-not-exist.com-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/this-person-does-not-exist.com-md.jpg" alt="this-person-does-not-exist.com" width="800">
</picture>

<hr>

### thesecatsdonotexist.com

All of the cats you see on this page are AI generated [https://thesecatsdonotexist.com/](https://thesecatsdonotexist.com/) - if you look hard some are pretty obvious as they have weird glitches, but some are just simply amazing!

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/thesecatsdonotexist.com-sm.webp 320w,
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/thesecatsdonotexist.com-md.webp 800w, 
    https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/thesecatsdonotexist.com-lg.webp 1200w" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/blogs/ai-tools/thesecatsdonotexist.com-md.jpg" alt="thesecatsdonotexist.com" width="800">
</picture>

Amazing A.I. Tools


# What is Lighthouse?

First off, if you do not know what Lighthouse is yet, and you're a web developer then Oh Boy! Are you in for a nice treat to add to your website list of tools.

To access it it, open your webpage in an incognito window (to minimize plugins loading) then right click in the webpage, choose "Inspect" and up will pop the console tab, click the "Lighthouse" tab at the top and you are now ready to run a report:

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-1.1.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-1.1.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-1.1.jpg" alt="Lighthouse Ready To Start" width="800" height="329">
</picture>

For now lets skip the "Progressive Web App" and "Publisher Ads" and just focus on the ones shown selected in the image above... now choose either mobile and Desktop and hit the "Generate Report" button!

## What score should I be aiming for? 

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-2.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-2.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-2.jpg" alt="Lighthouse Performance Score" width="800" height="580">
</picture>

I think you know the answer... 100 for everything is what you need to be aiming for, but the question is how important is this? 

Lets look at scores of the homepages of some of the worlds biggest companies:

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-amazon.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-amazon.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-amazon.jpg" alt="Lighthouse Amazon Score" width="600" height="155">
</picture>

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-apple.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-apple.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-apple.jpg" alt="Lighthouse Apple Score" width="600" height="156">
</picture>


<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-facebook.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-facebook.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-facebook.jpg" alt="Lighthouse Facebook Score" width="600" height="158">
</picture>

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-tesla.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-tesla.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-tesla.jpg" alt="Lighthouse Tesla Score" width="600" height="155">
</picture>

<picture>
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-google.avif" type="image/avif">
    <source srcset="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-google.webp" type="image/webp">
    <img className="shadow-lg mx-auto" src="https://cdn.3dnames.co/uploads/joemore.com/lighthouse-google.jpg" alt="Lighthouse Google Score" width="600" height="159">
</picture>


...So all not bad, but heck not even Google got themselves 100% in each area! Why is this you may ask? Well for a start, and let's face it, these sites are so god dam big that they don't need to have perfect scores, they are not starting out and need to worry about tweaking to perfection in order to get 100 in each section, also, and more importantly there could be business critical components/functionality of their pages that have a significantly higher impact to a) their business and b) the users experience that override any impact of a "not quite perfect" Lighthouse Audit.

For businesses that are already established you can see how scores such as these are justifiably good enough!

### Yes but what about me? 

Well, you my friend, if you are just beginning on your web development journey then having a high a score as possible really matters if you want to start getting noticed by the big search engines. 
Google now includes these lighthouse scores into their page ranking algorithms so on top of making sure you have good quality content, meta tags and back links you now need to stay on top of these vitals as well. 

Whenever it comes to search engines you always have to think of it like this:

> When I'm browsing the internet on my sofa how impatient am I? 

...I bet like 99.99% of people if you click on a link, and you get a blank page, that flickers a bit, loads the top menu, judders, flicks on and off again... and 5 seconds in it's still only loaded an advert and you've not even got close to what you're looking for then you'll immediately get fed up and be annoyed as f🤬ck!

Well Googles job is to try and please as many users as possible, that's why they make so much money you see! The better they make your searches, the more you use them and the more money they make! It's that simple, so all the time they are constantly trying to weed out the shit websites and only serve up the websites that gives their users the info they want and as quickly as they can get it! 

By focusing on getting as high a Lighthouse score as possible, and trying to always keep it high as you make updates to your websites will be 1 extra significant step in keeping your website listed just above everyone else out there! 

### How do I do this? 

Well, this article was written to mainly answer the question of if I need a high lighthouse score or not (which is Yes of course!) and the Lighthouse Audit itself will give you hundreds of useful tips 
on how to fix any of the parts it finds need attention, but my overall advice to anyone would be start with these:

1. Use a decent front end framework such as React and NextJS to build your main pages at build time
1. Try and reduce unused CSS by using a framework such a [TailwindCSS](https://tailwindcss.com/) 
1. Host in a cloud provider that can copy your front end code to multiple Edge locations around the globe such as [AWS Amplify](https://aws.amazon.com/amplify/), [Microsoft Azure](https://azure.microsoft.com/en-gb/), [Google Cloud](https://cloud.google.com/), [Vercel](https://vercel.com/) etc - or even use a Service such as [CloudFlare](https://www.cloudflare.com/) on top of your existing server. 
1. Optimise all your images as much as possible making sure to have the latest formats supported such as .webp and .avif and use the &lt;picture&gt; tag to let supported browsers load the format they prefer:

```html
<picture>
    <source srcset="example.avif" type="image/avif">
    <source srcset="example.webp" type="image/webp">
    <img src="example.jpg" alt="Do I need a high Lighthouse Score?" width="800" height="600">
</picture>
```

5. Focus on reducing image size above quality... I know it's tempting to try and make each image look as crisp as you can on your lovely retina screen, but remember most users don't care as much as you do about that! Speed is king!

...these are just a tiny handful of pointers, and I could spend hours talking about many more, but I'll leave this here as a starting block for you! 

Enjoy!



Do I need a high Lighthouse Score?


# Should I still use jQuery?

Ok, first a bit of history about my background (if you've not read my about page) - I've been developing websites for the last 22 years, and looking back to when I used to have to design an entire website
using just HTML &lt;table&gt;'s and vanilla JS was the norm. To find a script, there was no stack overflow, just something like [http://dynamicdrive.com/](http://dynamicdrive.com/) - check it out, it's
still there and looks like it's not been touched since 2001! And the vanilla JS you had to write was always so long and complex.

Anyhow, in Jan 2006, jQuery came along, created by John Resig, I remember first using it and I fell in love with how much quicker it meant I was able to write my JavaScript code. No longer did I 
need to write big complex vanilla JS code (and quite frankly, very ugly and not robust at all!) and instead was able to write much neater smaller code that was way more robust and had almost "set it and forget it" browser support. 

Around 2010 we saw the first iteration of Angular, and then a year later in 2011 the team at Facebook started creating their own internal framework they could use within their own Ads and newsfeed, this was the birth of React.

### Fast forward to 2016

Around 2016 React started to become mainstream, although it had been around since 2011, and initially released to the public in 2013 it was only around 2015-2016 where it started to really gain a big community and the start of richer features. Today in 2022 it's even more feature rich, and one of the most popular developer frameworks around. Along with Angular and Vue developing websites using a front end framework is now the norm.

![jQuery usage](https://cdn.3dnames.co/uploads/joemore.com/jquery-usage.jpg)

As you can see it's only just starting to decline in it's usage after a very long time! <small>Image Source: [https://trends.builtwith.com/javascript/jQuery](https://trends.builtwith.com/javascript/jQuery)</small>


### So what's the answer about jQuery then? Should I still use it? 

Well to quote Arnie in his most recent terminator film "Old but not obsolete" - wether you like it or hate it, jQuery is still used in a ton of websites around the globe. In my opinion it's also awesome for prototyping single page apps (and I mean actual single page apps) that are like literally on one single `index.html` page. Not a bunch of files in a repo that require all sorts of NPM modules to be run. 

#### Let me show you an example:

If you have heard of jQuery then you've probably also heard of Bootstrap - it too has been around for over a decade, and if you combine the 2 into a single basic HTML file like this and source them via a CDN and write all your code in this one file, you have something like this:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Super Basic jQuery Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
<style>
.card{padding:10px;}
</style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-body">
            <div class="row"></div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
    [...Array(50).keys()].forEach( val => {
        $('.row').append(`<div class="item col-md-1 col-2 alert alert-primary text-center">${val+1}</div>`)
    })
    $('.row').on('click','.item',function(){
        $(this).fadeOut(300,function(){
            $(this).remove();
        })
    }) 
});
</script>
</body>
</html>
```

This is a super basic example that simply outputs 50 boxes into the page, and you'll notice it's only 5 lines of JavaScript or jQuery code. Click here to open this directly 
[using this link](/basic.html)

The big benefit of working with these files like this is for *quick and easy prototyping*, you can easily run this code by saving it to a `basic.html` file and simply opening it in your browser - Or like I prefer to do is use the [Visual Studio Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) plugin to run it from VS code and see live updates. 

### Could I simply not just write the above in Vanilla JS?

Well yes you could, but the point of this was to show you a super basic demonstration example, when it comes to prototyping stuff quickly having something like jQuery and Bootstrap really helps you to knock something up extremely quickly compared to writing longer vanilla JS. JavaScript has made huge improvements in the last 20 years and is arguably much better to write in vanilla than it used to be, but I still believe there is a place for jQuery. 

### What about using it in my main sites then?

So if I think it's great for prototyping, what about in my main production websites? Well I do personally believe that jQuery has probably now had it's day for production websites, especially so when working with bigger teams. It does also suffer from big performance issues and it can be a nightmare to contain and keep a clean codebase in larger projects! So no my advice is try to avoid it in any of 
your larger projects, but and this is a big but, as you can see from my prototyping demonstration it still has it's uses to help you as a developer with smaller tasks.

Finally - the internet is still rife with jQuery in so many big sites, learning how to use it can help you to identify issues quicker and make you a better developer! 

### Can you show me any more cool one pagers? 

If you want to take a look at some cool 1 page index.html Bootstrap/jQuery sites then take a look at what the guys over at [https://bootstrapmade.com/](https://bootstrapmade.com/) have to offer! I find these are super useful templates for helping knock up a great looking prototype in no time! 


Should I still use jQuery?


# Contact Us Emails with AWS SES

> Easily link up your websites contact us form to send you emails from verified users.

If you have ever developed a website, then you'll know there are always those standard types of pages that you always add to the menu first i.e. "Home", "About", &amp; of course "Contact Us" - then that last one, the contact us page generally always has a simple web form that users can send you messages through. You can use 3rd party services to handle this for you, you could link this up to a database
or you could process it using say PHP on your web server. 

However with todays frontend frameworks such as NextJS we can easily build our own cost effective (very very cost effective) by simply making use of AWS "Simple Email Service" or SES as it's known and providing API end point(s) to link our form up to.

Technologies used: AWS, SES, Lambda, API Gateway, Serverless, NextJS, Typescript, Google ReCaptcha - For this guide you'll need basic knowledge about AWS and should already have an IAM account and credentials ready.

All files in this guide are available in my [Github Repo](https://github.com/joemore/serverless-aws-ses-lambda-emails) 

### Users Perspective

As far as the user is concerned they will perform these actions:

1. They visit the website
1. They go the contact us page
1. They enter their email address, name and a message
1. They tick the "I'm not a robot" box
1. They hit the send button
1. Email gets sent! 👏 

### Developer Perspective

1. User submits their name, email, message and Google ReCaptcha Token
1. Axois posts this to the NextJS /api/send-email/ path
1. NextJS API then forwards this to our API Gateway End point
1. Lambda file checks the ReCaptcha Token, and users details then sends to email using SES service
1. Sends back SUCCESS message once email has been sent. 

### Lets get started...

So in order to get this up and running we are going to make use of the [ServerLess.com](https://www.serverless.com/) framework, that lets us deploy our AWS infrastructure from a single bit of code (I will be adding another blog article about that soon) - but if you haven't heard of Infrastructure as Code (IaC) before then I suggest you checkout some CloudFormation, ServerLess or Terraform tutorials. 

So if you haven't installed it then [follow the steps here](https://www.serverless.com/framework/docs/getting-started), and then you will also need to have your AWS IAM credentials stored in your `~/.aws/credentials` file like this:

```powershell
;This is a comment
[YourProfileName]
aws_access_key_id = KEY_GOES_HERE
aws_secret_access_key = SECRET_GOES_HERE
```

### Google reCAPTCHA

Next we want to create ourselves a Google reCAPTCHA key and secret for our website, this is fairly easy, you just need to go to [https://www.google.com/recaptcha/admin/](https://www.google.com/recaptcha/admin/) and add your domains, I'm using the V2 checkbox in this example. For now also add your localhost domains if you'd like to test locally (just remember to remove these afterwards)

![Google reCAPTCHA](https://cdn.3dnames.co/uploads/joemore.com/google-recaptcha.webp)

...Hit submit, and then copy down the Key and Secret it gives you. 

### SES Register Email/Domains

Now in your AWS account navigate to your [Simple Email Service](https://eu-west-2.console.aws.amazon.com/ses/home?region=eu-west-2#) (Note: I'm using region `eu-west-2` in this example) - and 
add either the email addresses you wish to send from and to, or simply add your entire domain. I won't go into depth here on how to do this, but it's fairly easy to follow the steps within the AWS console. 

### Now run our ServerLess Script

Ok, now we have all the bit's required, we can now deploy our Lambda function with API End Point using the serverless script, so once you've downloaded the git repo from above, create a `.env` file in 
`./serverless/contact-form/.env` and edit it's contents:

```powershell
REGION=eu-west-2
IAM_PROFILE=YourProfileName
FROM_EMAIL=contact@yourdomain.com
TO_EMAIL=you@yourdomain.com 
RECAPTCHA_SECRET=your-google-secret-key
```

Next, make sure you're in the `./serverless/contact-form/` directory, and edit the `serverless.yml` file "service" to change testwebsite-contact-form to something more descriptive and to match your website name i.e. I changed mine to `joemore-com-contact-form` (For some reason these could not be set in the .env file! Maybe a bug at the time of writing 🤷‍♂️)

Now, rum `npm i` to install any dependencies, and then run `sls deploy` to deploy it to your AWS account. It should take a few minutes to deploy, but once its done it should return you back an endpoint URL like this:

```powershell
Serverless: Stack update finished...
Service Information
service: joemore-com-contact-form
stage: dev
region: eu-west-2
stack: joemore-com-contact-form-dev
resources: 11
api keys:
  None
endpoints:
  POST - https://xxxyyyzzz.execute-api.eu-west-2.amazonaws.com/dev/contact-us
functions:
  contactUs: joemore-com-contact-form-dev-contactUs
```

Now we have our backend AWS/SES/Lambda system ready to send us emails once we send it the correct information. We also have our reCAPTCHA key - using both of these we can now plug this into our Front End website. In my repo I've included a demo NextJS site that makes use of the NextJS `/api/` path, as this allows us to effectively hide our AWS endpoint. You can either use this demo frontend site as a basis for you're own or write a new one from scratch!

I built this websites [contact us page](/contact/) using a similar method... although I expanded to code a bit more to do extra error checking and handling.

Good luck, and please let me know if you have any improvements suggestions? 

Joe


"Contact Us" Emails with AWS SES



NextJS is a cool **framework for ReactJS**. It allows you to build sites using the familiar React framework, but instead of having a single page application that is poor for SEO
it instead allows you to generate all pages as static endpoint .html files, once your user lands on that page it becomes your starting point to run the rest of your website as 
a React application so you get the best of both worlds! Yay!

Whats also great is that because NextJS can build your pages it can make use of things such as the `fs` filesystem so we can read .md markdown files at build-time
and convert them into HTML files for our website.

**Please note - these examples are using TypeScript**

### Plugins Required

In order to get this setup, we first have to install a few plugins: `gray-matter`, `react-markdown` & `react-syntax-highlighter` - once installed we can begin by first creating a file that reads our .md files:

```js
import fs from 'fs'
import path from 'path';
const postsDirectory = path.join(process.cwd(),'markdown-blogs')
export function getBlogsFiles(){
    return fs.readdirSync(postsDirectory)
}
```

...This picks up all of blog files within our `./markdown-blogs` folder, this uses the gray-matter plugin in order to pre-process our markdown files. So next lets take a look at a sample 
markdown file called: `sample-file.md` :


```markdown
---
title: 'Sample Blog File'
date: '2022-01-01'
imageUrl : 'https://images.unsplash.com/photo-1533090161767-e6ffed986c88?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80'
authorName: Joe Gilmore
excerpt: 'This is a very simple and basic markdown file used as an example!'
isFeatured: false
readingTime: 1 min
authorName: Joe Gilmore
authorURL: https://www.joemore.com/
authorImageURL: /images/avatars/account-avatar-profile-user-01-svgrepo-com-cropped.svg
---

# Heading 1

A simple paragraph goes here... and you basically just keep wiring content for your blog... You can **bold** text and *italicize* text and everything else you can think of with markdown!
```

...so next we create a function that parses this markdown file using gray-matter plugin to process the content and the metadata inside of the --- and closing --- hyphens:

```js
import matter from 'gray-matter'
export function getBlogData( postIdentifier: any ) {
    const postSlug = postIdentifier.replace(/\.md$/,'') // removes file extension
    const filePath = path.join(postsDirectory, `${postSlug}.md`)
    const fileContent = fs.readFileSync(filePath,'utf-8')
    const { data, content } = matter(fileContent)
    const postData = { slug: postSlug , ...data, content, }
    return postData
}
```

With our blog articles all in this format we can then use a page to display them by mapping over our array of articles, and then finally to display
the actual blog content we can use the `react-markdown` plugin to parse our Markdown and turn it into HTML for us. For an extremely basic output
we can can simply do the following:

```js
import ReactMarkdown from 'react-markdown'
export default function BlogContent( {BlogData} ) {
    return <>
        <h1>{BlogData.title}</h1>
        <ReactMarkdown>{BlogData.content}</ReactMarkdown>
    </h1>
}
```

However, if you want to take advantage of adding some nice styling to your blog article page, this is where making use of the `react-syntax-highlighter` comes into play,
you essentially create a `customRenderer` object and pass this into your `<ReactMarkdown>` component like this:


```js
import ReactMarkdown from 'react-markdown'
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'
const customRenderers = {
        code: ( {node, inline, children, className, ...props} : any ) => {
            const match = /language-(\w+)/.exec(className || '')
            return !inline && match ? (
            <SyntaxHighlighter 
                style={atomDark} 
                language={match && match[1] || ''} 
                children={children} {...props}>
            </SyntaxHighlighter>
            ) : (
                <code className="bg-red-100 text font-mono text-red-800 px-1 rounded-md"{...props}>
                {children}
                </code>
            )
        }
    }
export default function BlogContent( {BlogData} ) {
    return <>
        <h1>{BlogData.title}</h1>
        <ReactMarkdown components={customRenderers}>{BlogData.content}</ReactMarkdown>
    </h1>
}
```

In the example above we are using the `SyntaxHighlighter` to highlight our `<pre><code></code></pre>` and our singular `<code></code>` tags 

Enjoy blogging in Markdown!!



From the blog