Latest Blog Posts

Nextjs is a meta framework for React. Nextjs includes static site generation, sever site rendering (ssr), api routes, and many other features. We will explore all these ideas and more in this blog.  

What is nextjs?

# What is Next.js?

Next.js (or next or nextjs however you choose to say it) is a popular meta-framework for [React](https://reactjs.org/ "React "). In the past few months, nextjs has sky-rocketed in popularity. Don't believe me just check out the npm downloads.  👇

![nextjs npm downloads](https://i.imgur.com/YkIYzgy.png "Next cpm downloads")

It has received overwhelming growth since 2020.  Now let's get into some of the features and why someone might use this over traditional client-side react in the browser.

_**Note: This blog post is meant for folks who are already familiar with react and javascript. If you are not I would suggest you read up on those before tacking nextjs. Further, the goal of this article is not to teach you nextjs but to give one an understanding of what it is.**_

## Static Site Generation

[Static site generation](https://wsvincent.com/what-is-a-static-site-generator/#:\~:text=Static%20Site%20Generators%20are%20a,into%20static%20files%20for%20deployment.) is when a website is built once and then the raw HTML is served to the user at request time. This is contrary to how React typically runs. Normally, when using a tool like [CRA](https://reactjs.org/docs/create-a-new-react-app.html) or something similar the content of the pages is all encoded in javascript. This javascript is then sent to the client and must be rendered in the client browsers. Why is this an issue? Two reasons.

1. Speed
2. Search engine optimization

Although Google says that does process the javascript when crawling a site it may not be able to see valuable information, such as hyperlinks, quickly. This can have an effect on how the pages ranks.

Next, and probably more important is speed. When your react app made with CRA is pulled down from the server as stated before it must run all the js to get the content. This takes time and can slow down how fast your website content is displayed to the user. What if we could send down the HTML already rendered so the client would not have to when the page is loaded for the first time. Well, we can and this is one form of static site generation.

Nexjs will render all of your pages and generate the HTML for them. (It does so at build time) After the site is built when the page is requested is sends the pages HTML already rendered. This makes the site much faster to load for the first time.

## Server-side rendering

Server-side rendering is the same thing as static site generation but instead of happing at build time it happening at request time. Nextjs provides a hybrid approach and allows one to choose if they want server-side rendering or static site generation. This is done by the use of `getStaticProps` and `getServerSideProps`. Let's say you have a blog and you want to statically render all your blog pages. Ito would it look something like this.

```js
export async function getStaticProps(context) {
  const posts = await getPosts()
  return {
    props: {posts: posts}, // will be passed to the page component as props
  }
}
```

Now in our page react components we can use the posts.

```js
const BlogPage = ({posts})=>{
// use posts
}
```

**Note:** this happens server-side at build time. Nextjs also code splits all of this code out so it will never be sent to the client. Because of this, we can use secrets (API keys, database passwords, etc) in `getStaticProps` or `getSevereSideProps` and it will remain secret and safe.

## API routes

API routes allow one to make an API in their nextjs applications. The API route is generated from the filesystem so for example if we made a new file called `pages/api/new-route` that looks like.

```js
export default function handler(req, res) {
  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.json({food: ['pizza', 'rice', 'salad']})
}
```

Now we can make requests to `/api/new-route`. The cool thing is these can be deployed as a standalone server or as serverless functions.

## Final thoughts

We have seen some of the basic features of nextjs but there are many more like typescript support or Incremental Static Regeneration. Overall I nextjs is a fantastic choice for a static site renderer for React and an amazing choice for production react application.

As someone who is in their fourth year of a double major in math and computer science I want to answer the question Does a math degree help one in the field of software engineering?

Does a Math Degree Help in Software Engineering

# Does a Math Degree Help in Software Engineering

I am currently in my fourth year of completing a double major in math and computer science at the University of Prince Edward Island. As such, I am in a unique position to comment on my thoughts on whether or not a math degree will help one in software engineering. I have also been working in software development positions both, part-time and full-time, for about two years.

## What a math degree offers

In a math degree, you will start by learning calculus, linear algebra, and other algorithmic-based learning. As you progress, most of the math becomes [proof-based](https://en.wikipedia.org/wiki/Mathematical_proof). Generally, you are given a set of axioms (true statements) and using those you have to contract some proof to show some proposition to be true. This forces you to think outside the box as no two problems are the same. You can't just apply an algorithm to solve your problem. Some of these courses are [real analysis](https://en.wikipedia.org/wiki/Real_analysis), [group theory](https://en.wikipedia.org/wiki/Group_theory) and [measure theory](https://en.wikipedia.org/wiki/Measure_(mathematics)).

## Will you use what you have learned

If you are going into university and wondering if a math degree will be useful for a future in software engineering,  in terms of practical use, the answer is, probably not. If your goal is to be a general software engineer and write code for web dev or a similar field that you most likely will not use any of the facts or knowledge that a math degree offers. There are some exceptions. If you think you might want a future in machine learning, cryptography, research, programming software bundlers, and the list goes on and on. These are some of the many fields where you will use the knowledge and skills of a math degree in practice. If you are thinking of going into one of these fields, a math degree or possibly a minor will help you out tremendously. I have used many skills I have learned in my math courses as I complete my honours this year in machine learning.

## Does it help you work as a software engineer?

Math courses challenge one in a way that traditional computer science courses do not. In math courses, specifically upper-year proof-based courses (which are almost all of the higher-level math courses), really challenges one's problem-solving skills in a way that you don't see in typical computer science courses. For example, as I talked about before making a proof comes down to when given a set of axioms (truth facts) you must manipulate those facts to prove a given proposition. This is a skill that is rarely used in your computer science courses. From my experience, a lot of CS courses are about memorizing facts or algorithms and then using those facts or algorithms through coding assignments, general assignments and exams. This type of learning rarely comes up in a software engineering position. No one is going to ask you to memorize the typescript syntax and then test you on it. You may learn it by using it but no one is going to sit you down and drill you with obscure abuse questions on the subject. What you will have to do a lot is problem-solving. You will be given many problems or tasks and you will have to break them down, understand them and finally solve them. This sounds simple but in practice can be very challenging. Math courses challenge you in a way that is similar to this. Many times, you are given a question that you have never seen anything like it before and are forced to practise and learn problem-solving techniques and skills.

## Final thoughts

If you are going into university and are faced with picking a math degree or computer science this can be a hard choice. A math degree will teach you problem-solving skills and some practical skills depending on what kind of field in software you wish to enter. A CS degree will probably teach you more practical skills for software engineering but may lack problem-solving skills and depth of knowledge for some fields. Overall, you should pick the field that interests you most. If you think you like math more, pick that, and you think programming and computers sound more interesting pick that. Overall, if you do what interests you more you will find the field or job that will be more enjoyable.

Thanks for hearing my thoughts, Logan Anderson

How to add a new action to a tinaCMS form. This brief tutorial will show you how to make a new action specifically,  a delete action.

How to add a new action to a tinaCMS form


# How to make a form action

In this post, I will be going over how to make a [form action](https://tinacms.org/docs/plugins/forms/#form-configuration) in tinaCMS. In my case, I want to make an action so that I could delete blog posts from my website.

A form action in TinaCMS is just a react component that loads within the alt menu of the form. See below.

In my example I an using [open authoring with nextjs](https://tinacms.org/guides/nextjs/github/initial-setup/) and a GitHub backend. This blog is hosted on vercel and takes advantage of there [api serverless functions](https://nextjs.org/docs/api-routes/introduction).

## A simple action

> Note: for my examples, I will be using typescript. But everything should also work in javascript (just take out the types)

Let's say we wanted a picture of a lama to show up in our actions (because who doesn't like lamas). This would be pretty simple let's just create a react component that contains an image of a lama.

```tsx
import { Form } from "tinacms";
import * as React from "react";

export default function Lama({ form }: { form: Form }) {
  return (
    <img
      crossOrigin="anonymous"
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Llama_lying_down.jp	g/1024px-Llama_lying_down.jpg"
      alt="Llama lying down.jpg"
      width="836"
      height="559"
    />
  );
}
```

and then on our page, we can do

```js
const formOptions = {
  actions: [lamaAction],
  label: "Home Page",
  fields: [
    {
      label: "Subtitle",
      name: "posts_title",
      component: "text",
    },
  ],
};
const [data, form] = useGithubJsonForm(file, formOptions);
usePlugin(form);
```

😀 look at that 🎉
![](https://i.imgur.com/XFDv4vs.png)

Note for other frameworks we may have to switch `useGithubJsonForm` to `useForm`. (`useGithubJsonForm` calls `useForm` internaly)

## Getting started

Ok, let's get to make the `delete action`.

First, we are going to use the tinaCMS buttons and modal to the skelton of our delete action.

```tsx
import * as React from "react";
import {
  ActionButton,
  useCMS,
  Form,
  Modal,
  ModalPopup,
  ModalHeader,
  ModalBody,
  ModalActions,
} from "tinacms";
import { Button } from "@tinacms/styles";

const DeleteAction = ({ form }: { form: Form }) => {
  const cms = useCMS();
  const [active, setActive] = React.useState(false);
  const open = () => setActive(true);
  const close = () => setActive(false);
  const title = "temp title";
  const filePath = "./some/file/path";

  return (
    <React.Fragment>
      <ActionButton onClick={open}>{`Delete ${title}`}</ActionButton>
      {active && (
        <Modal>
          <ModalPopup>
            <ModalHeader close={close}>{`Delete ${title}`} </ModalHeader>
            <ModalBody>{`Are you sure you want to delete ${title}`}</ModalBody>
            <ModalActions>
              <Button
                onClick={async () => {
                  try {
                    close();
                    await cms.alerts.info(`${filePath} was deleted`);
                  } catch (error) {
                    close();
                    cms.alerts.error(`Error in deleting ${filePath}`);
                  } finally {
                    window.history.back();
                  }
                }}
              >
                Yes
              </Button>
              <Button onClick={close}>No</Button>
            </ModalActions>
          </ModalPopup>
        </Modal>
      )}
    </React.Fragment>
  );
};

export default DeleteAction;
```

In our blog post file, we can add this

```js
import  DeleteAction  from  "../../plugins/delete-test";
//...
 const formOptions = {
    label: "Edit doc page",
    actions: [DeleteAction],
    fields: [
      {
        name: "frontmatter.title",
        label: "Title",
        component: "text",
      },
      //...
 }
const [data, form] = useGithubMarkdownForm(props.file, formOptions);
usePlugin(form);
//..
```

Now we have a popup and button, lets make it do something.

Next, we are going to get access to our tinaCMS client and call delete on it when the `"yes"`button is clicked. To do this we are going to use a factory function to allow us to change the way we access the form title and path.

```tsx
import * as React from "react";
import {
  ActionButton,
  useCMS,
  Form,
  Modal,
  ModalPopup,
  ModalHeader,
  ModalBody,
  ModalActions,
} from "tinacms";
import { Button } from "@tinacms/styles";

const getTitleDefault = (form: Form) => {
  return form.name;
};

interface options {
  getTitle?: (form: Form) => string;
  getFilePath?: (form: Form) => string;
}

export const createMarkdownDeleteAction = (
  { getTitle = getTitleDefault, getFilePath = getTitleDefault }: options = {
    getTitle: getTitleDefault,
    getFilePath: getTitleDefault,
  }
) => {
  const DeleteAction = ({ form }: { form: Form }) => {
    const cms = useCMS();
    const [active, setActive] = React.useState(false);
    const open = () => setActive(true);
    const close = () => setActive(false);
    const title = getTitle!(form);
    const filePath = getFilePath!(form);

    return (
      <React.Fragment>
        <ActionButton onClick={open}>{`Delete ${title}`}</ActionButton>
        {active && (
          <Modal>
            <ModalPopup>
              <ModalHeader close={close}>{`Delete ${title}`} </ModalHeader>
              <ModalBody>
                {`Are you sure you want to delete ${title}`}
              </ModalBody>
              <ModalActions>
                <Button
                  onClick={async () => {
                    try {
                      close();
                      await cms.api.github.delete!(filePath);
                      await cms.alerts.info(`${filePath} was deleted`);
                    } catch (error) {
                      close();
                      cms.alerts.error(`Error in deleting ${filePath}`);
                      console.error(error);
                    } finally {
                      window.history.back();
                    }
                  }}
                >
                  Yes
                </Button>
                <Button onClick={close}>No</Button>
              </ModalActions>
            </ModalPopup>
          </Modal>
        )}
      </React.Fragment>
    );
  };

  return DeleteAction;
};
```

Since we are using a factory function our blog file will look slightly different.

```diff
- import  DeleteAction  from  "../../plugins/delete-test";
+ import  {createMarkdownDeleteAction}  from  "../../plugins/delete-test";
//...
+ const deleteAction = createMarkdownDeleteAction()
 const formOptions = {
    label: "Edit doc page",
    actions: [DeleteAction],
    fields: [
      {
        name: "frontmatter.title",
        label: "Title",
        component: "text",
      },
      //...
 }
const [data, form] = useGithubMarkdownForm(props.file, formOptions);
usePlugin(form);
//...
```

![](https://i.imgur.com/CE7Q8me.png)

Look at that! we just made a pretty cool action and it was pretty simple to do so!

If this is interesting you should

- [Checkout out tinacms](https://tinacms.org/)
- [Checkout my other blog posts](https://logana.dev)


How to add an RSS feed for blog posts into a nextjs site. Simple and easy. 

RSS Feeds in a nextjs site

# Adding an RSS feed to a nextjs Site

Recently, I took on the task of adding an **RSS feed to a nextjs site** (this site). After searching around Google for a solution I quickly realized that all the solutions were outdated or not in dept. Frustrated, I noted that [nextjs.org](https://logana.dev) has an RSS feed so I looked around there code to see how they dogfood nextjs and more importantly how they added an RSS feed. I am posting my finding here to document them and to save others the Saturday morning I spent doing this.

## The process

### 1. Make a function to generate the RSS feed

If you want to read over the [RSS standards](https://en.wikipedia.org/wiki/RSS) and generate everything your self Feel free! Personally, I used the [RSS npm package](https://www.npmjs.com/package/rss) to help me deal with the details of an RSS feed. You can install this package with `yarn add rss` or `npm i --save rss`. In my case, the function looked like this. We are also going to use ts-node to run this script (you could also just use node and ignore the types). So in my case I will add this packaged by running `yarn add --dev ts-node`

```typescript
import { Post } from "../interfaces";

const fs = require("fs");
const RSS = require("rss");
const getPostsSync = require("../utils/getPostsSync");

function dateSortDesc(a: any, b: any) {
  const date1 = new Date(a.data.frontmatter.date);
  const date2 = new Date(b.data.frontmatter.date);
  if (date1 > date2) return -1;
  if (date1 < date2) return 1;
  return 0;
}

function generate() {
  const previewItems = getPostsSync();
  const feed = new RSS({
    title: "Logan's blog",
    site_url: "https://logana.dev",
    feed_url: "https://logana.dev/feed.xml",
  });

  previewItems.sort(dateSortDesc).map((post: Post) => {
    feed.item({
      title: post.data.frontmatter.title,
      guid: post.fileName,
      url: `https://logana.dev/blog/${post.fileName}`,
      date: post.data.frontmatter.date,
      description: post.data.frontmatter.description,
      author: post.data.frontmatter.author,
    });
  });

  const rss = feed.xml({ indent: true });
  fs.writeFileSync("./public/feed.xml", rss);
}

generate();
```

You will have to make your own function to get the blog posts and all of their metadata. (It will be different or every use case) You can take a look at the one I [used for this blog](https://github.com/logan-anderson/blog-nextjs-tina-tailwind/blob/master/utils/getPostsSync.ts) as an example.

Notes:

* the function is synchronous (it does not have to be though)
* Write output to `./public/feed.xml` 

### 

### 2. update build scripts

Finally, you need to update the build scripts so all of the goodness we just wrote will actually happen. In my case I updated the `package.json` to look something like this

```json
//...
"scripts": {
    "build": "yarn build:rss && next build,
    "build:rss": "ts-node ./scripts/generate-rss.ts",
    //...
  },
//...
```

This will generate the RSS feed, write it to the public folder and then build the site.

Now just run `yarn build` or `npm run build` and you should see the feed.xml. If you run `yarn start` and go you localhost:3000/feed.xml you should see your RSS feed.

If you prefer to just see the code you [**can see the PR for all of this code here**](https://github.com/logan-anderson/blog-nextjs-tina-tailwind/pull/3). Feel free to leave a comment there if you run into an issue or [open a GitHub issue](https://github.com/logan-anderson/blog-nextjs-tina-tailwind/issues/new).

**Note: This blogpost was recently updated as nextjs 10 broke some of the behaviour. [Here is the PR went from the old code to the new code](https://github.com/logan-anderson/blog-nextjs-tina-tailwind/pull/46)**

Thanks for reading. As always if you see anything wrong with this post feel free to edit this site (button below) and make a PR!

What is Markdown

# .MD?

While browsing through **GitHub** or **GitLab** you may have noticed styled README files with a strange `.md` file extension. The MD stands for Markdown. If that is strange or new to you you’re in the right spot! Keep reading and you will learn more about what Markdown is and how to use it!

## What is Markdown?

Markdown is similar to HTML in that it is a [standard](https://commonmark.org/) for structuring documents. Markdown and HTML both fall under the umbrella of languages called **markup languages.** A markup language is just a way to structure a document or file and tell a system how to display it. In the case of HTML, it tells the browser how to display the content. Markdown is no different; it allows one to write things with "_tags_" and tell a Markdown transcompiler how to display the text.

## Why bother with Markdown?

As mentioned Markdown is used when writing documents with GitHub or GitLab, but some of the syntaxes are also supported in Google Docs, Slack, and many many other platforms. You can even use [Pandoc and Markdown together](https://pandoc.org/MANUAL.html#pandocs-markdown "Pandoc and Markdown together") to make beautiful documents, and even presentations if you use a tool like Beamer. I am even writing this blog in Markdown.

## Ok, let's learn some stuff.

> Although there are different flavors/standards of Markdown, they all of the same basic structure.

Headings are simple just a "#" followed by the text you want your heading to me. More #s the smaller the heading

Example

```md
# heading one
## heading two
### heading three
...
###### heading 6
```

This will look like

# heading one

## heading two

### heading 3

...

###### Heading 6

Lists are also easy just use a "-" or "*" of unordered lists and numbers for an ordered list.

```md
- This
- is
- a
- list
```

would look like

* this
* is
* a
* list
  and

```md
1. thing one
2. thing two
3. thing three
```

would look like

1. thing one
2. thing two
3. thing three

Links are also easy the basic syntax is

```md
[This is the link to the source code of this page](https://github.com/logan-anderson/blog-nextjs-tina-tailwind/blob/master/content/blog/markdown.md)
```

looks like

[This is the link to the source code of this page](https://github.com/logan-anderson/blog-nextjs-tina-tailwind/blob/master/content/blog/markdown.md)

But the **Best thing of all** is code syntax highlighting
just put

```md
    ```{name of language}
    code goes here
    ```
```

So for example

```md
    ```js
    const logan = new Person();
    let age = 20;
    if(logan.isBirthday()){
        age++;
    }
    ```
```

would look like

```js
const logan = new Person();
let age = 20;
if( logan.isBirthday() ){
    age++;
}
```

This is not a complete list you can do so much more with Markdown for a full cheatsheet of all the cool stuff you can do [look here](https://www.markdownguide.org/cheat-sheet/).

Hi 👋 Im Logan! I enjoy _

Latest Blog Posts

What is nextjs?

Does a Math Degree Help in Software Engineering

How to add a new action to a tinaCMS form

Hi 👋 Im Logan!
I enjoy _