Adding Latest posts…


Greetings!

In this post we will be building on the site created in the first two articles, and demonstrating the benefit of having re-usable components, to add your latest *Posts* to your home page.

## Steps 1 - Get the correct data

Open your *./pages/index.js* file and add the following to the end of the file.

```jsx
export async function getStaticProps() {
	// fetches all the post data from your published article folder
    const webpackContext = require.context('../posts', true, /\.\/.*\.md$/);
    // console.log('webpackContext', webpackContext.keys())

    // the list of file names contained inside the "posts" directory
    const keys = webpackContext.keys();

	// reverse the array of posts so the newest one is first
    const reverseKeys = keys.reverse();
    // console.log('keys', keys)

    const values = reverseKeys.map(webpackContext);
    // console.log('values', values)

    // getting the post data from the files contained in the "posts" folder
    const posts = reverseKeys.map((key, index) => {
        // dynamically creating the post slug from the file name
        const slug = key
            .replace(/^.*[\\\/]/, '')
            .split('.')
            .slice(0, -1)
            .join('.');

        // console.log('slug', slug)
        // getting the .md file value associated with the current file name
        const value = values[index];
        // console.log('value', value)

        // parsing the YAML metadata and markdown body contained in the .md file
        const document = matter(value.default);
        // console.log('document', document.data)

        return {
            frontmatter: document.data,
            markdownBody: document.content,
            slug,
        };
    });
    // console.log('posts', posts);

	// cut the list of posts down to the first 4 in the array e.g. the latest 4 
    const topPosts = posts.slice(0, 4);
    // console.log('topPosts', topPosts)

	// export the data for the 4 latest posts
    return {
        props: {
            latestPosts: topPosts,
        },
    };
}
```

If you encounter issues I recommend using the console logs, already written in, to see where the issues are.

Assuming there are no errors you are now ready to move on to Step 2.

## Step 2 - Use the data

Now that you have the data for the posts, that you want displayed, it can be used to display on your home page.

There are only a few changes required to do this which are shown in the following code.

```jsx
import Head from 'next/head';
import Image from 'next/image';
import Layout from '../components/Layout';
import Introduction from '../components/Introduction';
import AnimatedSplash from '../components/AnimatedSplash';
// Change 1 - import the BlogList component, if not already done
import BlogList from '../components/BlogList';
import Contact from '../components/Contact';
import styles from '@/styles/Home.module.css';
// Change 2 - import grey-matter
import matter from 'gray-matter';

// Change 3 - change "props" to "latestPosts" to directly access the export data from Step 1
export default function Home({ latestPosts }) {
    return (
        <Layout>
            <Introduction />
            <AnimatedSplash />
			// Change 4 - add the BlogList component and pass in latestPosts
			// consider adding a heading before the component
            <BlogList allBlogs={latestPosts} />
            <Contact />
        </Layout>
    );
}
```

## Step 3 - View the data

Now that we have got the correct data, and passed it into the correct component, we are ready to see the result.

- Navigate to the *root* folder of your project
- Run `npm run dev`
- Now go to [http://localhost:3000](http://localhost:3000) in your browser

You should now see something like the following.

![Latest Posts!](https://res.cloudinary.com/xenos-design/image/upload/v1690470282/Post_Content/nextjs-md-latestPosts/latestPosts_kmlyxv.png)

And that’s it for now… you have now updated your blogging site, using Next’s and Markdown, and enhanced the experience of your readers. Hopefully, you found this article useful and will continue your journey.

Thanks for stopping by…

Filtering your Markdown posts


Welcome back!

Following on from my previous post [Create a NextJS blog using Markdown](https://www.stevengodson.com/blog/2023-06-15-nextjs-md-blog), I will now show you how to add Category filtering to your blog so that your ordinance can choose to see all posts of a particular type.

Before we begin you will need to have followed the installation steps in Part 1 of this series

## Key Files

The key files that we will be updating or creating are as follows.

**./components/BlogFiltersCategory.js** - this is the component that will render the interactive filter choices in the ./pages/blog/categories/index.js page.

**./components/BlogFiltersMain.js** - this is the component that will render the interactive filter choices in the ./pages/blog/index.js page.

The above two components are essentially the same apart from the href in the Link element, which points to different places.

**./components/BlogList.js** - this will need to be updated to show the categories against each posts card in the list.

**./pages/blog/categories/index.js** - this is the page that will filter your posts, based on the category selected, and render the list.

**./pages/blog/index.js** - this is the main blog page which will require minor updates to enable the filtering.

**./pages/blog/[slug].js** - this will need to be updated to show the categories against each post.

**./global.css** - This is where the styling for the dynamic components will be added.

The posts themselves will require an update to include the appropriate data into a unique entry against which the filtering can take place.

## Creating your filter
### Post Meta Data

The first thing that we will do is look at the metadata, which is at the front of each post, and amend it from this:

![Meta Data!](https://res.cloudinary.com/xenos-design/image/upload/v1687195278/Post_Content/nextjs-md-filters/001_gvyewg.png)

to this:

![Meta Data!](https://res.cloudinary.com/xenos-design/image/upload/v1687195278/Post_Content/nextjs-md-filters/002_bojc8s.png)

It is worth investing some time to consider what categories you want to use on your posts so that you have as complete a list as possible before we continue.

## Creating new files
Now we will create the new files needed to make this work.
### BlogFiltersMain.js

Create this file in the /.\/components/ folder and copy in the following code.

```jsx
import React from 'react';
import Link from 'next/link';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function BlogFilters() {
    const filters = ['Technology', 'Business', 'Freelancing', 'Personal'];

    return (
        <Row>
            {filters.map((filter, index) => (
                <Col md={6} lg={3} key={index}>
                    <Link href={`./blog/categories?category=${filter}`}>
                        <div className={`filterTag_${filter}`}>{filter}</div>
                    </Link>
                </Col>
            ))}
        </Row>
    );
}

export default BlogFilters;
```

Some key points to explain are:
* I have used /react-bootstrap/ for the row and column control
* There is an array of *strings* in this file, this needs to represent all of the categories that you want to actively use. This has been used in place of a table that would typically be used database or CMS-based blog. To avoid duplication you could store these values in a /.env/ file
* The /href/ in the /Link/ component points to one of the new files, that we will create later in this exercise, and passes in the filter name as a URL query so that it can be picked up from the context using getServerSideProps()
* The className content is also set dynamically with the styling controlled from the /global.css/ file

### BlogFiltersCategory.js

Create this file in the /.\/components/ folder, copy in all of the content from the /BlogFiltersMain.js/ files, and simply change the following.

```jsx
<Link href={`./blog/categories?category=${filter}`}>
	<div className={`filterTag_${filter}`}>{filter}</div>
</Link>
```

to

```jsx
<Link href={`./categories?category=${filter}`}>
	<div className={`filterTag_${filter}`}>{filter}</div>
</Link>
```


### Categories index.js

Now we will create the page where the filtered list will render.

Create the following folder /.\/pages/blog/categories\// and created an *index.js* file.

Now copy in the following code.

```jsx
import React from 'react';
import Link from 'next/link';
import matter from 'gray-matter';
import Layout from '../../../components/Layout';
import BlogList from '../../../components/BlogList';
import BlogFilters from '../../../components/BlogFiltersCategory';
import styles from '../../../styles/Blog.module.css';

function Categories({blogData}) {
    return (
        <Layout>
            <h1 className={styles.heading}>Tales from the deep...</h1>

            <hr />
            <h5 className={styles.heading}>Filter by Category or <Link href="../../blog">Back to Full List</Link></h5>
            <BlogFilters />
            <hr />

            <BlogList allBlogs={blogData} />
        </Layout>
    );
}

export default Categories;

export async function getServerSideProps(context) {

    const { req } = context;
    const passedURL = req.url;
    let filterName = passedURL.split('=');
    filterName = filterName[1];

    const webpackContext = require.context('../../../posts', true, /\.\/.*\.md$/);
    const keys = webpackContext.keys();
    const reverseKeys = keys.reverse();

    const values = reverseKeys.map(webpackContext);

    const posts = reverseKeys.map((key, index) => {
        const slug = key
            .replace(/^.*[\\\/]/, '')
            .split('.')
            .slice(0, -1)
            .join('.');

        const value = values[index];
        const document = matter(value.default);

        return {
            frontmatter: document.data,
            markdownBody: document.content,
            slug,
        };
    });

    const filteredPosts = (posts, filterName) => {
        const data = posts.filter((post) => post.frontmatter.category === filterName);
        return data;
    };

    let data = filteredPosts(posts, filterName);

    return {
        props: {
            blogData: data,
        },
    };
}
```

This file is very similar to the main *index.js* in the ./pages/blog/ folder. 

The key differences are:

* The use of *getServerSideProps* instead of *getStaticProps*. The reason for this is so that we can access the *context* API and pull the filter name that is passed from the filter components. This gets stripped from the request URL and passed into the *filteredPosts* function so the list of all posts can be filtered
* Use of the BlogFiltersCategory.js functionality. This ensures that a user clicking on categories after the initial filter will not be thrown back to the main blog page
* Reuse the BlogList component so there is a consistent look and feel to the site

### global.css

If you want to follow the same styling approach then copy the following into the *./styles/global.css* file.

```css
.tag_Technology,
.tag_Freelancing,
.tag_Personal,
.tag_Business {
    text-align: center;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 0.2rem 0;
    letter-spacing: 2px;
    font-size: 1.5rem;
}
.tag_Freelancing {
    background-color: #00796b;
}
.tag_Personal {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
.tag_Business {
    background-color: darkblue;
}

.slugTag_Technology,
.slugTag_Freelancing,
.slugTag_Personal,
.slugTag_Business {
    text-align: center;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 0.2rem 0;
    letter-spacing: 2px;
    font-size: 1.5rem;
    min-width: 250px;
    border-radius: 5px;
    margin-bottom: 2rem;
}
.slugTag_Freelancing {
    background-color: #00796b;
}
.slugTag_Personal {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
.slugTag_Business {
    background-color: darkblue;
}

.filterTag_Technology,
.filterTag_Freelancing,
.filterTag_Personal,
.filterTag_Business {
    text-align: center;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 0.2rem 0;
    letter-spacing: 2px;
    font-size: 1.5rem;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1rem;
    cursor: pointer;
}
.filterTag_Freelancing {
    background-color: #00796b;
}
.filterTag_Personal {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}
.filterTag_Business {
    background-color: darkblue;
}
```

If you are using another approach e.g. SASS, Bootstrap, or TailwindCSS then you can skip this section.

## Updating the existing document

Now that we have created the new pages and components we can move on to updating the existing pages and components to bring it all together.

### Blog index.js

Update the *./pages/blog/index.js* page to include the *BlogFilterMain.js* component as shown below.

![Blog Index!](https://res.cloudinary.com/xenos-design/image/upload/v1687195278/Post_Content/nextjs-md-filters/003_aonw61.png)

### BlogList.js

Now we update the BlogList component to render out the category name that has been added to a blog. I have done this as a conditional statement but, if you are sure it will always be added, you can add it without the conditional.

![Blog List!](https://res.cloudinary.com/xenos-design/image/upload/v1687248085/Post_Content/nextjs-md-filters/004_ua3j8o.png)

### Blog [slug].js

Finally, we will update the page, where all the content of an individual post is shown, to show the category name as well.

![Blog Slug!](https://res.cloudinary.com/xenos-design/image/upload/v1687195278/Post_Content/nextjs-md-filters/005_lww0os.png)

## Let's fire it up…
We are now ready to run the project and see our content. To do this you simply need to:

* navigate to the root folder in your terminal and run `npm run dev`
* open your browser navigate to *[http://localhost:3000/blog](http://localhost:3000/blog)*

The following should be visible on the screen.

![Working Blog!](https://res.cloudinary.com/xenos-design/image/upload/v1687248198/Post_Content/nextjs-md-filters/006_bagl8o.png)

And that’s it for now… you have now updated your blogging site, using Next’s and Markdown, and enhanced the experience of your readers. Hopefully, you found this article useful and will continue your journey.

In the next post of the series, we will be adding further functionality to your main *index.js* page by adding functionality for * latest posts*.

Thanks for stopping by…


Creating a NextJS blogging website using Markdown


Greetings!

In this article, the first in a series, I will take you through creating your own blogging website using the NextJS framework and Markdown files for the content.

A preview of the site can be seen at [https://nextjs-13-markdown-blog-website.vercel.app/](https://nextjs-13-markdown-blog-website.vercel.app/).

The advantage of this approach versus using a CMS backend e.g. Strapi, Ghost etc, is that you can build and deploy your site using Vercel without incurring any costs.

Being open there are limitations / compromises with this model, which I will talk about later on, but having built many CMS-based sites I like the simplicity of this approach.

## Now, let’s get started!

Firstly, you will need to clone the template repo that I have created for this article. This repo contains all you need to get started.

So create your project folder and navigate to it in a terminal. Then run the following.

```
git clone https://github.com/wookiehunter/nextjs-13-markdown-blog-website.git
```

Once the clone is complete, run the following to install the project's dependencies and start the project.

```
npm install && rpm run dev
```

Then, in your browser, navigate to [http://localhost:3000](http://localhost:3000) and you will be able to see the following front screen.

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830042/Post_Content/nextjs-md-blog/001_kne8bm.png)

We are now ready to move on and look at the project folder and file structure.

## Project Structure

If you haven’t already, open the project using your chosen Code Editor / IDE. I use [Visual Studio Code](https://code.visualstudio.com/) for all Node.js/ReactJS projects.

### Folder Structure

The repo that I have provided comes with the following folder structure.

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830043/Post_Content/nextjs-md-blog/002_ivlaou.png)

/*Components*/ - this is where the reusable React components will be kept.

/*MD\_Templates*/ - used to store any templates that you want to use to create your content.

/*node\_modules*/ - this doesn’t come with the repo as it is created when you run the `rpm install` command.

/*Pages*/ - this is the folder where you create the structure and pages for your NextJs project.

/*Posts*/ - this is where we will store the Markdown documents that will be used for your blog posts.

/*Public*/ - this is the folder where NextJs needs files that will be presented by your website kept, assuming you are not using separate storage or a CDN, such as images and Favicon files.

/*Styles*/ - CSS files are kept here. I have used CSS module files, but you can use any approach you are comfortable with e.g. Tailwind CSS, SASS, or Bootstrap.

/*Utils*/ - used to store utility functions used by your project. I have included one for Google Analytics as an example.

### Key Files

The key files that we will be focusing on are:

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830042/Post_Content/nextjs-md-blog/003_nxeabp.png)

/*Components/BlogList.js*/ - this is the component that will render your list of posts.

/*Pages/blog/\[slug\].js*/ - when you click o a post in your list, this is the page that will control how the post content is displayed.

/*Pages/blog/index.js*/ - this is the page that renders when you click on the Blog navigation link. You don’t need to use this if you want to show all of your posts on your home page pages/index.js

/*Posts/0001-my-first-post.md*/ - example of a post.

/*Next.config.js*/ - we need to add a specific config to this the project works correctly.

## How it works…

### Webpack Configuration

The following needs to be added to the next.config.js file. This allows Webpack to use [raw-loader](_https%3A//www.npmjs.com/package/raw-loader_) on .md files and create the arrays of Posts that you will showcase on your website.

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830042/Post_Content/nextjs-md-blog/004_gdpwc7.png)

### Using Markdown to create content

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830043/Post_Content/nextjs-md-blog/005_aepw3c.png)

The above shows the format used in the example Markdown post. There are two key sections in the file.

The first section, shown below, is written in [YAML](https://yaml.org/) and can be thought of as metadata. This specific format is used by the [gray-matter](_https%3A//www.npmjs.com/package/gray-matter_) dependency package and allows us to use dot notation to access the values e.g. frontmatter.title etc.

```yaml
---
title: 'My first post..?'
author: 'Your Name'
date: '2021-06-01T12:00:00.000Z'
hero_image: /magic.png
intro: "I did a thing..."
keywords: ""
read: 3
---
```

/Note: when adding images, you can either point to content in the public folder of the project, as shown in the example, or use a URL to content in a CDN, Image site e.g. [Freepik](_https%3A//www.freepik.com_) or [Unsplash](_https%3A//www.unsplash.com_), or cloud-based storage./

The second section is the content of your post and can be written using Markdown syntax, see [https://www.markdownguide.org/basic-syntax/](https://www.markdownguide.org/basic-syntax/) for a basic guide.

Another key consideration is the naming convention that you use for your post .md files.

The repo that I have provided has the following code, in the /*posts/index.js*/ file, which reverses the array of keys that Webpack creates when it interrogates the /*posts*/ folder.

```jsx
export async function getStaticProps() {
    const webpackContext = require.context('../../posts', true, /\.\/.*\.md$/);
    // the list of file names contained
    // inside the "posts" directory
    const keys = webpackContext.keys();
    // this reverses the order of the posts to show the most recent first or alphabetically descending order
    const reverseKeys = keys.reverse();
    const values = reverseKeys.map(webpackContext);
    // getting the post data from the files contained
    // in the "posts" folder
    const posts = reverseKeys.map((key, index) => {
        // dynamically creating the post slug
        // from file name
        const slug = key
            .replace(/^.*[\\\/]/, '')
            .split('.')
            .slice(0, -1)
            .join('.');
        // getting the .md file value associated
        // with the current file name
        const value = values[index];
        // parsing the YAML metadata and markdown body
        // contained in the .md file
        const document = matter(value.default);
        return {
            frontmatter: document.data,
            markdownBody: document.content,
            slug,
        };
    });
```

This is because I use a naming convention that allows for the newest posts to be shown at the top of the web page (the specific format I use is [yyyy-mm-dd-post-name.md](http://yyyy-mm-dd-post-name.md)). If you want to show your posts in alphabetical or some other order, you can amend the code easily.

Just replace the above with.

```jsx
export async function getStaticProps() {
    const webpackContext = require.context('../../posts', true, /\.\/.*\.md$/);
    // the list of file names contained
    // inside the "posts" directory
    const keys = webpackContext.keys();

    const values = keys.map(webpackContext);
    // getting the post data from the files contained
    // in the "posts" folder
    const posts = keys.map((key, index) => {
        // dynamically creating the post slug
        // from file name
        const slug = key
            .replace(/^.*[\\\/]/, '')
            .split('.')
            .slice(0, -1)
            .join('.');
        // getting the .md file value associated
        // with the current file name
        const value = values[index];
        // parsing the YAML metadata and markdown body
        // contained in the .md file
        const document = matter(value.default);
        return {
            frontmatter: document.data,
            markdownBody: document.content,
            slug,
        };
    });
```

At this point, it would be a good idea for you to create some test posts for yourself.

## Showing your content on your website

Now that we have content we can discuss how it is shown on the website.

There are three files that are key to creating, showing, and reading the posts in this project.

The first two are the blog/index.js file

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830044/Post_Content/nextjs-md-blog/006_wrlcdh.png)

And the components/BlogList.js file

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830043/Post_Content/nextjs-md-blog/007_ql0hpn.png)

The first uses Webpack to get the post data and passes it to the second so it can render on the screen.

/Note: you can easily move the code from the first file to your root index.js file if you don’t want a separate posts page./

The third and final file is /*pages/blog/\[slug\].js*/ which shows all of a post's content, at least that which you choose to show when a post is clicked on in the list.

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830042/Post_Content/nextjs-md-blog/008_rep2aw.png)

As you can see this has both the frontmatter data and markdownBody content passed into it so that you have access to all of the content in your .md files.

I have used a combination of react-bootstrap and CSS to create a layout and style the content. As mentioned before you are free to use whatever styling approach works for you.

## Let's fire it up…

We are now ready to run the project and see our content. To do this you simply need to:

* navigate to the root folder in your terminal and run `npm run dev`
    
* open your browser and navigate to /[*localhost:3000*/](http://localhost:3000/)
    

The following should be visible on the screen.

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1686830042/Post_Content/nextjs-md-blog/009_kfxxuk.png)

Now click on the Blog link at the top and…

![NextJS Markdown Blog](https://res.cloudinary.com/xenos-design/image/upload/v1689967164/Post_Content/nextjs-md-blog/11_rv0td8.png)

Your posts are showing on your blog page and the content is accessible.

In Part 2 of this series we will be looking at the filters, discussing how these are used and how best to implement them.

5 things to consider for your business website


As a business owner in this modern world of ours, you want to be able to engage with as wide an audience as possible to maximise your potential revenue.

There are many ways in which you can achieve this but most, if not, in reality, all, rely on having an internet presence. So what should this presence be?

Social media is an obvious place to start. Huge audiences, ready-built platforms, global reach etc. However, whilst social media platforms are superb for marketing and customer/client engagement, they are enhancements rather than a replacement for a website/app.

The benefits of your business having a dedicated website are;

- bespoke styling and theme to match your businesses brand

- having the User Experience (UX) that you need to be driven through the User Interface (UI) that you want

- order lifecycle control from basket creation through to payment and order status management

- integration with your payment service

- you can share specialised content behind a secure login

So you have decided that your business deserves a website. What do you need to consider? the simple answer is \"Lots!\" but there are a number of key areas that will help get you started and ensure success. An overview of each of these areas and what they mean to you is summarised below.

## Where should I host my site?

This decision very much depends on a number of factors.

- how much control do you want to have over the look and feel of your website?

- do you want to build/maintain the website yourself or get a professional to do the work?

- how much traffic are you expecting?

- how frequently will your website structure or functionality, not content, be likely to change?

- what technologies do I want my website built with?

The specifics of which hosting provider you ultimately go with is a decision between you and, assuming you are not self-building, your web developer. The two high-level choices are;

### Hosted Service

This is where you use a service such as Wix.com, GoDaddy.com, WordPress.com et, there are many to choose from, and build your website using their templates, 'wizards' etc.

These are a, relatively, painless approach to building a website, especially for the non-technical, and you can be up and running in a fairly short period of time.

There is, however, a trade-off.

Using one of these services means you have less control over how and where your website/data is hosted, as well as having to live with the constraints that the service provider places upon you in terms of what can and cannot be achieved within their service.

This may be perfectly acceptable to you and your business, especially when starting out where you want something quick and easy, but be mindful of the future when your business is growing rapidly and you need to migrate to a more functionally rich solution.

### Self Hosted

The title of this option is somewhat misleading in that you do not have to build your own data centre, networks etc, rather that you take responsibility, albeit sub-contracted out to cloud providers and professionals, for where and how your website/app is hosted as well as the maintenance of the solution.

This opens up a cornucopia of possibilities and technology choices which, as a business owner, you may not want to spend time on. This is absolutely fine as you can leave a lot of these decisions to your trusted professionals who should be able to guide you down the right path depending on what business outcomes you want to achieve.

There is, of course, a trade-off. See what I did there...

By implementing your website/app in this way it is quite possible that it will be more expensive than using a Hosted Service.

However, the benefits from this approach, which in my experience outweigh the costs, are;

- flexibility

- scalability

- speed of change

- ability to try out new technologies

- ability to swap out providers to get better prices or enhanced services

## Domain name

So firstly \"What is a domain name?\"...

![Domains!](https://res.cloudinary.com/xenos-design/image/upload/v1650973009/Post_Content/web_domain_illustration_15756c7010.png 'Domains')

This is a key decision as the domain name you choose needs to be;

- **Memorable** - choose something that will stick in the memory

- **Meaningful** - relate to your business name or what your business does

- **Available** - you need to make sure that the domain name you want is available

It is also worth considering whether you want to register, although not necessarily use, multiple top-level domains, such as .com, .co.uk, .uk etc.

This is usually done to safeguard your business against competitors from trading under a similar web address and capitalising on your brand and hard work. These can be registered altogether, some Registrars provide bulk discounts, or later on as your business grows.

The one thing to be mindful of is that domain name registration is an ongoing cost, frequency-dependent on which Registrar you choose, and needs to be maintained otherwise you lose rights to the domain name(s) and your website will no longer be reachable.

## SEO / Analytics - putting you on the map, and keeping you there

Search Engine Optimisation (SEO) is all about getting to Page 1 on a Google search (other search engines are apparently available) and can be seen as a form of wizardry at times.

There are many articles that can be found online that go into this subject in much greater depth than I would want to in this article. Suffice to say that there are a few key considerations that you need to give consideration to when thinking about a website/app for your business.

- **Metadata** - this is the, mostly, unseen content in you site that search engines look for and index for users to search against. the main three are;

- **Title** - the text that appears in your browser tab

- **Description** - tells search engines what your site or page is for

- **Keywords** - the words that you specifically would like search engines to include your site in searches for

- **Sitemaps and Robots.txt** - these are files that need to be created and stored in the root directory of your website/app and are specifically there to help search engines by telling what content is important and what can be ignored

All this is great but unless you proactively monitor your performance and adjust accordingly your website is unlikely to rise to the heady heights of Page 1.

There are many, free and paid for, services and tools that will help you do this. My recommendation is that you start off with a free one, such as Google Analytics, and see how you get on before progressing to a paid tool.

If you are time-poor, understandable as you are building the next mega-corporation, then outsourcing this to a professional who will do the monitoring and maintenance for you is a great way to take the stress away.

## Images - stock vs owned

Depending on what your business does or is trying to market with a website then you will need to consider where your images come from and whether you want to pay a license fee or provide your own images, assuming you own the rights to use them and have these on the site.

I always look at it like this.

Am I showing a proprietary product or service that I want to have specific images of on my website?

If **YES**, then either hire a professional photographer to take the images you want (make sure the price includes you owning the right to own/use) or, if you are a budding photographer, take the images yourself and store them securely.

If **NO**, then using stock images, from services such as Getty or Unsplash, is a great way to go. Just make sure you read the licensing terms and understand whether you need to add a 'credit' against each image or somewhere on your website.

**Content / Copy**

Similar to images the written content on your website/app also needs to be considered and either outsourced to professionals or, if you have the experience necessary qualifications/experience/skills, do the job yourself.

Consideration should be given to bringing in professionals for the following areas;

- Legal and Commercial

- Sales and Marketing

- Technical Writing

- Content creation e.g. articles or blogs

## Summary

All of this can seem quite daunting, especially if you don't come from a technical background, so it is always worth speaking with a professional who can guide you through the process and help you make the right decisions for your business.


Securing your Media in WordPress


It may sound like a contradiction, but there are times when you upload content to your web fronted Content Management System but do not want it to be publicly visible.

Business use cases for this scenario include;

- legal services, where the content may be sensitive or covered by legislation such as GDPR
- creative or artistic content, where you have to show your work but do not want anyone to steal it
- members or subscribers only content, where you want to make the content visible to select or fee-paying subscribers

This article will address each of these scenarios and identify options for achieving the desired outcome. The choices I talk about are WordPress specific, but the context and principles are relevant to any technology.

## Legal Services

When your business provides legal services and your CRM uses WordPress, it is vital to keep the documents (images, PDFs) hidden from general view.

If you do not take specific action to secure your data, it will be indexed by search engines and can be accessed via the directory of your website e.g. _<a target=\"\_blank\" rel=\"\" href=\"http://www.example.com/wp-content/[$filename]\">www.example.com/wp-content/[$filename]</a>_.

This means you are unlikely to comply with local data protection regulations e.g. GDPR in the EU. Not to mention being open to litigation from clients who find their data is open to the world!

There are two specific actions you can take to negate these issues. Each has different layers of complexity depending on what needs to be delivered.

## Creative and Artistic Content

If your website is there to showcase your talent you do not want visitors to download it without permission.

Failure to protect your work can have the following consequences:

- Loss of revenue – if you sell your art through your website, and it is not under your control, you are potentially losing revenue.
- Intellectual property – your art is your intellectual property and should be protected against theft.

## Private or Paid for Content

If you produce content and want to monetise it or only make it available to who you want, you need to ensure that it is only accessible to those who should have access.

## So what can you do…?

Depending on your specific use case(s) three options available to you are:

_robots.txt file_

Adding a ‘robots.txt’ file to your website is a way of discouraging search engine crawlers (think leaf cutter ants, collecting info and returning with it to the hive) which URLs on your site they can access.

This is by no means foolproof and is not a guarantee of your content not appearing on search engine results.

**_Redirect_**

Adding redirect functionality to your website is a way of ensuring that direct access to your content, media files etc, is restricted to logged-in users.

In essence, it performs a check against content type and whether the browser trying to access it has an active session. If both conditions are not met, it redirects the browser to a specified URL (typically the home or login page).

This tends to be an “all or nothing” approach and does not differentiate between user roles. It also does not have any impact on search engine indexing.

**_Plugins_**

If you need a more robust solution, then there are plugins available for WordPress that will give you the following:

- Media file protection
- File type protection
- Role-based access to media files
- disable right-click functionality
- Prevent hot-linking to your content
- Enhanced redirects
- Block search engine indexing of media files
- Media file encryption
- Manual or automated creation of private links so you can share media files, with timed expiry capability
- Bulk protection functionality, if you have a lot of existing content you want to protect
- Integration with other plugins to provide enhanced capability

## Summary

Ensuring that your business is compliant with the relevant legislation and industry standards is critical to its continued success in building trust.


Efficiency through automation


In today's fast-paced world, businesses need to have a range of tools to ensure they are current with contacts from potential clients, partners or employees.

A key challenge is the greater the number of tools, the greater the complexity. So how should businesses address this challenge?

A great way to get around this is to integrate priority business systems. This ensures a clear flow of information and alerts to the appropriate communication channels.

I recently completed a project with a fantastic client, addressing this very issue.

Their starting position was quite typical. They had three web forms that sent data to a content management system. The client then took this data and copied it to a CRM. Not very efficient.

![Design 1!](https://res.cloudinary.com/xenos-design/image/upload/v1650975932/Post_Content/JR_1_a51220fe2c.png 'Layout')

Thankfully my client is dynamic and always looking to improve how they work.

This is the point where I got involved with the project. The brief? Integrate our web forms (NextJS/Formik) with our CRM (ClickUp) and messaging tool (Slack).

![Design 2!](https://res.cloudinary.com/xenos-design/image/upload/v1650975858/Post_Content/JR_2_636b77aa4a.png 'Layout')

Once I had reviewed the documentation and experimented with the integration options, the way forwards became clear.

The agreed solution was to integrate the web forms to ClickUp using its REST API to POST the data, as new tasks, to specific 'Lists'.

Then, using its native functionality, integrate ClickUp with Slack so that notifications would be generated, in the correct channels, when a new ClickUp task was created.

![Design 3!](https://res.cloudinary.com/xenos-design/image/upload/v1650975858/Post_Content/JR_3_8fc663b939.png 'Layout')

This took relatively minimal effort. The most time-consuming part was refactoring the functions in the web forms, to the structure for ClickUp and then testing the end to end data flow.

My client was thrilled by the improved workflow and how much time it saved them in manual effort.

Automation can improve customer engagement, improve employee efficiency and reduce operating costs. It doesn't have to be a large project or cost a fortune.

If you want to improve your business's efficiency, get in touch to discuss your requirements.


Using images on your website


It is absolutely true to say that using images on your website is a great way to make it more interesting, break up large sections of text and generally improve the user experience. In this post, I will share some of my experiences to hopefully make you better informed.

## **When should I use images?**

When considering whether an image should be used you should ask yourself the following design question.

_“Will it improve what is already there in some way…?”_

Some great reasons to say yes are:

- You are marketing a product, want to show it off and demonstrate how it works
- You are creating content and want to illustrate it with relevant imagery
- You want to include images that are relevant to your business or brand&nbsp;

If the answer is no, then look no further. However, if your answer is yes, then read on.

## **Where should I get my images from?**

This depends on your answer to the following question.

_“Am I showing a proprietary product or service that I want to have specific images of on my website?”_

If YES, then either hire a professional photographer to take the images you want (make sure the price includes you owning the right to own/use) or, if you are a budding photographer, take the images yourself and store them securely.

If NO, then using stock images is a great way to go. Just make sure you read the licensing terms and understand whether you need to add an ‘attribution’ against each image or somewhere on your website.

Most stock image websites will have ‘free’ content where only attribution is needed as well as ‘premium’ content that you have to pay for on either a subscription or per-image basis.

Examples of stock image sites are:

- [https://www.unsplash.com](https://www.unsplash.com)
- [https://www.istockphoto.com](https://www.istockphoto.com)
- [https://www.stock.adobe.com](https://www.stock.adobe.com)
- [https://www.freepik.com](https://www.freepik.com)
- [https://www.shutterstock.com](https://www.shutterstock.com)
- [https://www.pexels.com](https://www.pexels.com)
- [https://www.gettyimages.co.uk](https://www.gettyimages.co.uk)

## **What is image optimisation?**

Image optimisation is all about ensuring that you only use the largest image needed on your website. The size of an image impacts two things:  
Speed – how fast your website loads when a user has lower bandwidth for their internet connection, and  
Quality – generally the small the image size the worse the quality of the image that is seen.

_Example: a 300 x 300 pixel is unlikely to look great if stretched to 1200 x 1200._

One of the great things about using WordPress is that it will, when you upload an image to the media gallery, automatically create, assuming your image is large enough, a number of different versions of the image in different sizes.

So when you go select an image, to include on a page or in a post, it will present you with these options.

This is the point where you need to think about where you are placing the image and how big it is likely to be on a screen. If the image will be nested within text then there is little point in selecting a high-resolution version. The opposite is also true, if you want the image to be the width of a page you need to select a suitably large image resolution.

If the standard resolutions that WordPress provides, as standard, are not enough do not worry. Custom image sizes can be added with a little development.


Dynamic Metadata in NextJS


## Introduction

If you have ever wondered how you can introduce dynamic metadata into your projects using NextJS, then this article is exactly what you’ve been looking for!

I have recently built this into this very site, which is built using NextJS and Strapi CMS.

The same principle will work with any NextJS project that consumes data from a CMS.

## Getting Started

The first thing I did
approached trying to do this was to ensure that I had the correct setup in my Layout component.

This is the component that wraps all of the content within the pages of this site and uses the Head component of NextJS to allow for the passing of different values for the metadata e.g. title, description and keywords which are the main three used.

![Layout!](https://res.cloudinary.com/xenos-design/image/upload/v1650971173/Post_Content/nextjs_layout_9688014fb9.png 'Layout')

Although it is not essential, it is a good idea to add default props layout values for the metadata that you want to cover. This is shown at the bottom of the screen.

Following that, I updated the [slug] page, which is the page that displays an individual article when you click on the card, specifically where you can see that I find it in the title, description and keywords and pointed the value to 3 unique fields within the post content that is being extracted from the Strapi CMS.

![Layout!](https://res.cloudinary.com/xenos-design/image/upload/v1650971173/Post_Content/nextjs_slug_93d0e48f50.png 'stuff')

This allows me to pass in the values that I want, which are stored within each individual article record in the database.

By doing this you can create unique titles for each of your articles, which allows your audience to save them with meaningful titles without having to type something in.

You can also add in whatever page description and keywords they want, therefore making each individual article more usable to search engines.

Once this was done all I needed to was to create the three fields within the article record structure in Strapi CMS (metaTitle, metaDesc and metaKey). The name of the fields does not really matter, as long as it is meaningful to you and to whoever you may be getting to support implementation going forwards.

## Results

At this stage, you are in a position to test your code works as expected. I recommend using the Chrome dev tools. If you implement this correctly you should see the following:

![Results!](https://res.cloudinary.com/xenos-design/image/upload/v1650971173/Post_Content/nextjs_title_ed9402e5d0.png 'Results')

and

![Results!](https://res.cloudinary.com/xenos-design/image/upload/v1650971173/Post_Content/nextjs_meta_94e4f3704f.png 'Results')

as you will see each of my articles on this site have their own unique titles and metadata.

I hope you found this useful and gives you some inspiration to implement into your own projects. If you get stuck and need some advice for free contact me via email or Twitter.


Intro to Regex


So I thought it was about time I did some discovery and learned about the use of RegEx and what it can bring to a project.

To ensure that I got a structured introduction I undertook the course called **_REGULAR EXPRESSIONS FOR BEGINNERS – UNIVERSAL_** on Udemy by Edwin Diaz, which I thoroughly recommend as Edwin is great at boiling the essence of a topic down into something that is easily understood.

The following are the notes that I took while working through the course along with some worked-out examples, some of which were derived from the course and some of which I’ve implemented in other projects.

Hopefully, this will be of some use to you and give you a broad understanding of RegEx.

I recommend that you use an online tool for working through this as it will help bring it to life. Personally, I use https://RegEx101.com/ as it will work with a number of languages, has a dictionary of syntax and will actually explain to you what your expression is doing as you write it out.

## REGEX OPTIONS

In its most basic form RegEx will match against a specified set of characters within a target string:

Example:

_/car/g_ - will search for every instance of the string “car” within a target string of text.

_/car/gi_ - will do the same as the above but will be case insensitive.

_/car/gim_ - will do the same as above but will search across multiple lines of text.

_/car/s_ - will search within a single line using a full stop/period to identify the end of the line.

_/car/imgu_ - will be case insensitive, search across multiple lines, will search globally and look at Unicode characters.

It is important that you get the setting of these options correct in your expressions to ensure that you're matching against exactly what you want.

## META CHARACTERS

_/c.r/i_ - adding a full stop/period anywhere in your string is essentially adding a wildcard. This means that, under this example, the expression will match against anything that starts with the letter c and ends with the letter r. It will not care if there is a letter or a symbol in between them, so be careful if you specifically want to search for an actual full stop/period.

## ESCAPING

_/c\\.r/g_ - so if you want to search specifically for full stop/period, or if your search string includes something like a “/” because you are searching a URL for example, then you will need to escape that particular character. This is done by adding a “\\” in front of the character so as you will see an example the expression of only return matches to “c.r” some language engines will automatically escape characters so RTFD…

## MORE CHARACTERS

escaping can also be used to match against a whole host of different characters or actions within your RegEx expression for example _/C\\n\\t\\R/_ will specifically look for C, then a new line, then a tab and then an R.

But be mindful that the characters work in different ways depending on what language engine you are working with e.g. JavaScript or.net or PHP et cetera so refer to the documentation.

## RANGES

_[car]_ - treats this as a range of letters to search for and will return every instance of each individual letter.

_[a-z]_ - search for every alphabetical letter and return every match. This is case sensitive so example only search for lowercase letters whereas [A-Z] will only search for uppercase. They can both be combined in the same range. [0-9] will also do the same thing, but for the range of numbers zero and nine. The ranges do not have to start or finish as stated above just as easily be [b-f]&nbsp;for example.

_[abdq]werty_ - search for all of the letters within the range as well as anything that matches “werty”.

The range, start and endpoint can be anything you want it to be as long as it is separated by a [-] within square brackets.

## NEGATION

negation is when you tell the expression to exclude something and this is done using the ^ symbol (shift + 6 on Windows keyboard). An example of this would be _[^cat]_ which would tell your expression to ignore any of the letters within the range.

## SHORTHAND

so shorthand is, and don’t shout at me for this, a bit like a macro or short name function as you can type in \\ followed by a specific character or letter and it will produce the equivalent of typing out a longer expression range. I have added a couple of examples below but for full details refer to the documentation language engine;

_\\s_ - looks for any whitespace character.

_\\S_ - looks for any non-whitespace character.

_\\d_ - looks for any digit.

_\\D_ - looks for any non-digit.

_\\w_ - looks for any word character.

and the list goes on. What is good about this is that you combine them within ranges and negation to make your code shorter.

But be mindful as some of them produce slightly odd results such as _\\b_ which looks at the boundary of what it considers to be a word but will include digits e.g. it would match against all of Lettuce468.

These can also be used to create a pattern against which to match if you need to be very specific, for example;

_[\\w\\w\\w\\w\\w\\w@xenos\\-design\\.co\\.uk]_ would match against my email address, or any email address under the same domain where the word in front of the @ symbol is six characters long.

**REPETITION**

Quantifiers – these are meta characters when added tell you expression to select varying amounts of the character that proceeds it, for example;

_a?_ - will match zero or one of a, where a represents what you want to match against.

\*a\*\* - will look for from 0 to more of a. I have also seen as described as the Greedy quantify because it will match as many times as possible.

_a+_ - will look for one or more of a.

_a{x}_ - will look for the specified number of a where x equals a number.

_a{x,}_ - will look for xc or more of a where x is a number.

_a{x,y}_ - will look for the number of a’s between x and y.

_a\*?_ - This will match a from zero or more times, but as few times as possible. This is known as a lazy or reluctant quantifier.

These can be combined to create an expression that will search for a pattern, an example of this would be _\\d {5}-\\d {4}_ would match any set of values that look like this 12345-6789 an obvious use case for this could be if you’re searching for telephone numbers in a dataset where there is a specified format. The same could obviously be done for text strings as well or indeed combinations of both.

## GROUPING

must be done outside of the character/range set otherwise parentheses will just be escaped, however, characters set/range can be put inside grouping so _([0-9])_ will work but _[()]_ will not.

An example of how this would work is save(d)? which makes ‘d’ optional and therefore would match against both ‘save’ and ‘saved’.

## ALTERNATION

the use of the pipe symbol ‘|’ (shift + \\ on a windows keyboard) effectively works as an OR statement. However, some nuances of it are;

- whatever is written on the left takes precedence.
- global needs to be switched on for it to work.
- it can be used as many times as needed.

A more effective way to use this is to include grouping i.e. (Bat|Super)man will return against both ‘Superman’ and ‘Batman’.

Example to work in – _(\\w+|file\\d {3}\_export\\. file201_export._ remember that the right of the pipe sign takes precedence and will be classed as an eager function as is looking for all words so would return against an underscore but not a hyphen or a full stop.

Alternation can also be used in a nested group i.e. (soup (bowl|spoon)) will return against ‘soup bowl’ and ‘soup spoon’, be mindful of the spacing as this is quite key to a working.

## ANCHORS

_^s_ - will look for the first ‘s’ in a string e.g. it has to be at the beginning of the string.

_s$_ - as above but at the end of the string.

_^[a-z]_ - will look for any texturing that starts with a lowercase letter.

## WORD BOUNDARIES

_\\b_ - this will match up to the boundary of each word or word character.

_\\B_ -&nbsp;this will match twin non-word boundary, which is somewhat confusing, as it will not match on any string of less than three-word characters but on a string of more than three characters it will match as follows ‘test’ as it treats the beginning and the end characters as the boundaries themselves rather than the spaces around them as the boundary.

## BACK REFERENCES

is a way of referring to the string of text or digits within a grouping.

Typically most engines let you save up to 9 back-references, shown as follows day(light) \\1&nbsp;with the ‘\\1’ being the reference to the “variable”. This would only match if the texturing it is searching is written as follows&nbsp;daylight light.

## NON-CAPTURING GROUP

In this example we see yet another way a ‘?’ can be used to do something different within your expression.

(food) and (?:travel) and \\1 will match against “food and travel and food” because is repeating the first variable, whereas&nbsp;(?:food) and (travel) and \\2 will match against “food and travel and travel” because it is repeating the second variable which is travel.

Using the “?:” switches off that variable.

## POSITIVE AND NEGATIVE ASSERTIONS

_[A-Za-z]+(?=,)_ - this will search for any upper or lowercase letter that is followed by a comma.

_[A-Za-z]+(?!,)_ - this literally does the reverse (if != ,) e.g. does not equal comma and so will match every string of upper and lowercase letters that do not end with a comma.

## POSITIVE AND NEGATIVE LOOKAHEAD

_[A-Za-z]+(?&lt;=,)_ - very similar to the previous section except that by adding the “&lt;” you’re telling the expression to look at what comes before e.g. under this example it would look for every texturing that is preceded by a comma.

_[A-Za-z]+(?-_ - again, literally the reverse, where you are looking for everything that is not preceded by comma.

## MULTILANGUAGE SYMBOL SUPPORT

RegEx includes support for Unicode, so no matter what language you are searching against you will be able to use Unicode to create a match in your expression.

You can find the full Unicode listings at [https://home.unicode.org/](https://home.unicode.org/).

If it is to be included it in your ReEex expression as follows \\u2022 using the “\\” to escape the u so that it is turned into the Unicode character.

## EXAMPLES

Password Validation –&nbsp; the following is an example of an expression that could be used to validate against contents of the users chosen password to ensure that it matches against the policy in place on our project.

Expression: _/^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[!$£#])\\S{5,20}$/gm_

_(?=.\_[A-Z])\\_ – this validates against the password having at least one upper case character.

_(?=.\_[a-z])\\_ – this validates against the password having at least one lowercase character.

_(?=.\_\\d)\\_ – this validates against the password having at least one number.

_(?=.\_[!$£#])\\_ – this validates against password having at least one of the identified symbols within the square brackets.

_\\S{5,20}_ – this validates him the password being a minimum of 5 and a maximum of 20 characters.

Pretty URLs – the following example is something that I have deployed myself and is commonly seen on websites to make the URL in the browser more human readable. This example is specific to PHP running on an Apache server.

**_Step One_** - ensure your Apache server has the rewrite engine switched on.

**_Step Two_** - create a new file called .htaccess in your website’s root directory.

**_Step Three_** - opening with your code editor and add the following:

**_Step Four_** - RewriteEngine on, this switches the rewrite engine on

RewriteRule _^post/(\\d+)$ post.php?p_id=$1 [NC,L]_ -&nbsp;this tells the server to replace anything with a post.php?p_id=$1, where $1 equals the number identified in the group, and replaces it with post/post number e.g.&nbsp;domainname.com/posts/178, with the&nbsp;NC denoting that it is case insensitive and the&nbsp;L denoting but this is the last rule that should be processed.

## SUMMARY

Hopefully, this brief introduction to RegEx has sparked your interest to go and explore more for yourself and understand how this very powerful tool could be used in your projects.

I’ve enjoyed learning about something that seemed to be quite daunting before but now seems quite simple once you understand the syntax.

I have added some references below to language-specific documentation and a couple of tools that I found useful during this learning process.

## REFERENCES AND RESOURCES

[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/)

[https://www.php.net](https://www.php.net)

[https://RegEx101.com/](https://RegEx101.com/)


Tech tales from the deep...