I started this post thinking it would be a prescriptive look at what it takes to be a good leader for a team. This excerpt from [Parables of Leadership](https://hbr.org/1992/07/parables-of-leadership) summarized perfectly the roadblocks I faced. 

>The essence of leadership cannot be reduced to a series of personal attributes nor confined to a set of particular roles and activities. It is like the challenge of describing a bowl: we can describe a bowl in terms of the clay from which it is made. But a true picture must include the hollow that is carved into the clay—the unseen space that defines the bowl’s shape and capacity.


This post is a reflection from my own experience (as an engineering manager, tech lead, and lead for numerous projects) for how I approach leading teams and like to be led. I have been on teams with different leadership styles - and have witnessed how those styles have either uplifted or completely dismantled teams.

## "While washing the dishes one should only be washing the dishes"

This is a quote from Thich Nhat Hanh's book "[The Miracle of Mindfullness](https://www.goodreads.com/book/show/95747.The_Miracle_of_Mindfulness)" that I return to constantly. 
It's a simple reminder to be fully present in our daily acts so that we can clear our mind and focus on the experience. You'll find even mundane tasks can bring you joy.

This can be incredibly difficult as an engineer - where our stress levels and focus fluctuate from constantly shifting between priorities.  I will be the first to admit that I still have days where I struggle as well, but I've worked out ways to cope and manage.

Practicing mindfulness during work has transformed the way I deal with the complexities of leading a team. It's enabled me to relax and clear my mind of clutter and anxieties. By doing so, I am open to think clearly to make decisions that are free of judgement and to give the attention my teammates deserve.

Before meetings, one-on-one's, reviewing technical docs or PR's I take a pause to remind myself of this simple mantra.



## “In the beginner’s mind there are many possibilities; in the expert’s mind there are few.”


This quote is a favorite of mine from "Zen Mind, Beginner's Mind" by Shunryu Suzuki. I like to discuss this with teammates because it helps frame the way for how we evaluate our own success and approach work.

There was a point in my career where worked consumed my entire life. I was obsessed with being perfect, having all the right answers, trying to outperform myself and others.  I obsessed about code quality and pr reviews, I pulled all nighters in attempts to master something new, I agonized whether I said the right things in meetings.

This is what I thought was expected of an engineer and it paid off.  I earned the praise and recognition: 360 reviews were all positive, I got the promotions I deserved. But the reality is I ended up burning out and feeling trapped by my own unstustainable expectations of what it took to be the best engineer, to be an expert..


With a beginner's mind, I learned to slowly unravel and let go of the need to always be right. Instead, I learned to approach situations as an opportunity to learn something new free from expectations.

I like to share this personal lesson with members of my team
- to encourage them to let go of their egos and be willing to make mistakes
- to measure their success by how much they've learned - not in comparison to others
- to remind them to stay curious

I think this lesson is especially important for high performant members of teams who are normally trusted to carry out complex projects.


## “All that you touch You Change. All that you Change Changes you."

After reading Octavia Butler's "Parable of the Sower, " I was inspired by what positive energy I could bring to the world and how my own actions could affect others for good. 

I didn't realize how important leadership was until my own team lead left, who I looked up to, and was replaced by the most senior engineer on the team (as is the case with most organizations). Within months I went from feeling confident to full blown imposter syndrome. I was affected by the new leadership top down militant style of communication and delegation, that ended up creating a less collaborative environment, a culture of blame.

From that point on I learned what type of leader I wanted to be.

- One who sets the bar high - but meets each individual where they are and sets a sustainable path to where they want to be.
- One who does everything in their power to create the best working conditions and inspires them to be the best versions of themselves.

I realize this sounds like very obvious boilerplate. Let me get specific.

To my two points, "meeting individuals where they are at" and "creating the best working conditions" means setting a tone of empathy, trust, and encouragement. This gives engineers the mental space they need to focus on creative problem solving instead of cluttering their minds with external pressure and internal anxiety. Remember beginner's mind?

This also means setting clear expectations from the beginning. My usual tenents, which I practice myself are: 
- Don't make the same mistake twice (synthesize the information before moving on)
- Communicate when you are stuck - your teammates are here to support you
- Distribute the knowledge - (documentation or a walk through of what you've learned)

I've found, and I'm sure you have too, that I have done my very best work when I'm in environments where I feel trusted, when mistakes are made - it's used as a learning opportunity.


## Golden Ball of Light

Whenever I am incredibly stressed one way I ground myself is by thinking of the vastness of space. There is a meditation practice I do often where I imagine there's a tiny golden ball of light in the middle of my mind. I slowly watch it expand - seeing the edges of the glowing ball scan the items in the room - to eventually further and further out into the universe.



Reflecting back on teams I have been on - the highes levels of strains have come during times of quick change. When Covid hit, the number of users at Schoology surged to over 1M concurrent users seemingly overnight. Teams were put under enormous strain during our efforts to scale the site.

During this period we made a safe space for the team to be open about their own personal struggles. 
I asked openly on teams how this was affecting them, how they manage stress and made sure to lead by example by being the first to answer.

The aim was to set an open tone for the team -- for being open and to be okay with vulnerability. To be honest with themselves when they needed mental health days. This helped the team let go of their own egos 
-  to ask for help even when the question seemingly has an obvious answer
- to be the first to admit when they've made a mistake 
- to be empathetic and uplift when their teammates struggled.

Ultimately to know that problems they faced were not the sole responsiblity of the individual - but of the team as a whole.

## Conclusion

Thanks for joining me in this mind dump. I know my views will further evolve with more experience. I look forward to that change.



Meditations on being a Lead

Let's first start out with why I chose NextJS and Strapi CMS for my personal website. The process without NextJs or Strapi would look something like this:

- I would used `create-react-app` to quickly scaffold a boilerplate but ready to use React application.
- Import all the fun stuff not included, like `@react-three/fiber`, `@react-spring/three`, `@react-three/drei` which was used to build the visualization on the main page
- Create all the separate pages for the different routes (for which there are many!) and inject all the content into the jsx itself or maybe store the blog content in a separate json file.
- Use Tailwind.css for all the styling markup.
- Then I'd build the application and stick all the statically generated files onto an s3 bucket connected to my domain.
- Call it a day.

The main reason I chose to use NextJS is because React is what I'm most proficient in and I wanted an easily maintainable site with all the content stored in Stapi CMS. Otherwise, I would have to update any content within the jsx itself. This is crucial, especially for maintaining a blog.

Thankfully the developer experience is a breeze to get you up and running for fast. We will first set up Strapi then jump over to NextJS

## Setup Strapi CMS

For more context you can check out the [documentation](https://docs-v3.strapi.io/developer-docs/latest/setup-deployment-guides/installation/cli.html#creating-a-strapi-project)

```
npx create-strapi-app portfolio-backend --quickstart
```

This should start up the server at `http://localhost:1337` if it doesnt. 
```
$ cd portfolio-backend
$ yarn develop
```
You should see a login page where you can enter your credentials. You'll enter this everytime you rerun the server in dev mode.
The strapi architecture itself is very user-friendly.

I'll step through how I set up posts which I use in the front-end application. 
Under Plugins click Content-Type-Builder -> create-new-collection-type.
Create a new collection type called post
![Screen Shot 2022-03-22 at 3.31.27 PM.png](/uploads/Screen_Shot_2022_03_22_at_3_31_27_PM_02fd6e6f09.png)

Create all the fields you need. (eg: title, content, slug, excerpt, image)
![Screen Shot 2022-03-22 at 3.48.05 PM.png](/uploads/Screen_Shot_2022_03_22_at_3_48_05_PM_b53de7417b.png)

You'll then need to set access for the endpoint. 
![Screen Shot 2022-03-22 at 3.32.39 PM.png](/uploads/Screen_Shot_2022_03_22_at_3_32_39_PM_3401b621a5.png)

Then head over to Content Manager -> Posts and create your posts!

The beautiful thing about strapi is that once your posts are created you can access the data via api 

```
http://localhost:1337/api/posts
```
or play around with the data with GraphQL. For this you will need to install @strapi/plugin-graphql
```
$ cd portfolio-be
$ yarn add @strapi/plugin-graphql
```
Then in your browser header over to http://localhost:1337/graphql

To see all your posts you can enter the query
```
{
 posts {
    data{
      attributes {
        title,
        content,
        slug,
        excerpt,
        img {
          data {
            attributes {
              url,
            }
          }
        }
      }
    }
  }
}
```
If you want to filter by a specific slug
```
  posts (filters: { slug: { eq: "${slug}" } })
```

Ok, now that we have our data set up. Let's do some fun stuff in NextJs.

## Setup NextJS

If you want more context, head over to the [official documention](https://nextjs.org/learn/basics/create-nextjs-app)

```
$ npx create-next-app portfolio-fe
$ cd portfolio-fe
$ yarn dev
```
Hopefully you'll see the NextJS welcome page!

## Pages

The pages directory acts as our router.
Meaning when a file is added to the pages directory, it is automaticall available as a route. 

We want our users to see all our posts when they navigate to `/posts`. 

>In reality as our blog grows and grows we'll want some pagination or lazy loading which I won't be going into.

>I'll also be showing GraphQL queries for our endpoint methods but you can easily just call the `/api` endpoint.

## Setup Api 

Create a directory called `lib` and create a new file called api.js

```
async function fetchAPI(query, { variables } = {}) {
  const res = await fetch(`${process.env.STRAPI_API_URL}/graphql`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  })

  const json = await res.json()
  if (json.errors) {
    console.error(json.errors)
    throw new Error('Failed to fetch API')
  }

  return json.data
}

export async function getAllProjects() {
  const query = `
    {
      projects {
        data{
          attributes {
            title,
            content,
            meta,
            github,
            link
          }
        }
      }
    }
  `
  const data = await fetchAPI(query, {})
  return data?.projects?.data
}
```

## Set up Posts page

Let's set up our `/posts` page which will show all posts. In `pages` directory create a new folder called `posts` and create a new file `index.js`

Within pages/posts/index.js we can use the `getStaticProps` method which is run during build time the props returned from this method is used as props for the Index component.

```javascript
export default function Index({ allPosts }) {
  return (
     <div>
        {allPosts.map((post, index) => {
          // here you would format what info you want to show
          return <h1>{post.attributes.title}</h1>
        })}
     </div>
  )
}

export async function getStaticProps() {
  const allPosts = await getAllPostsForHome()
  return {
    props: { 
      allPosts
    },
  }
}
```

## Set up Individial Post Page

The routing for individual pages is pretty neat. In /pages/posts create a new file

```
[slug].js
```
This creates a new route for our a standalone post for example
```
http://localhost:3000/posts/how-i-built-my-portfolio-site-with-nextjs-and-strapi
```
where `how-i-built-my-portfolio-site-with-nextjs-and-strapi` is the slug we included in the Strapi backend.

The pre-rendering of a post page is similar to rendering of all the posts - both use getStaticProps. However, in order for NextJS pre-render and know about all of our individual post paths it uses `getStaticPaths`.

`getStaticPaths` returns an array of all of our url parameters, in our case, an array of slugs.

In /lib/api.js lets create our api method to get post data

```

export async function getPostAndMorePosts(slug) {
  const query = `
    {
      posts (filters: { slug: { eq: "${slug}" } }) {
        data{
          id,
          attributes {
            title,
            content,
            slug,
            excerpt,
            img {
              data {
                attributes {
                  url
                }
              }
            }
          }
        }
      }
    }
  `
  const data = await fetchAPI(
    query,
    {}
  )

  return data
}
```
In [slug].js - Create your render method and include these two methods at the bottom.

```
export default function Index({ post }) {
  return (
     // here you would format the content you want to show
     <div>
       <h1>{post.attributes.title}</h1>
     </div>
  )
}

export async function getStaticProps({ params, preview = null }) {
  const data = await getPost(params.slug, preview)
  
  const post = data.posts.data[0]
  const { content } = post.attributes
  const postContent =  await markdownToHtml(content)

  return {
    props: {
      post: {
        ...post.attributes,
        content: postContent,
      }
    },
  }
}

export async function getStaticPaths() {
  const allPosts = await getAllPostsWithSlug()
  
  return {
    paths: allPosts?.map((post) => {
      return `/posts/${post.attributes.slug}`
    }) || [],
    // this is set to false for SSG
    // you can set to true for SSR
    fallback: false,
  }
}
```



How I built my portfolio site with NextJS and Strapi

I have been working with Shaders for a while now, and I still find them difficult to grasp.

According to [The Book of Shaders](https://thebookofshaders.com/01/):


If you already have experience making drawings with computers, you know that in that process you draw a circle, then a rectangle, a line, some triangles until you compose the image you want. That process is very similar to writing a letter or a book by hand - it is a set of instructions that do one task after another.

Shaders are also a set of instructions, but <u>the instructions are executed all at once for every single pixel on the screen</u>. That means the code you write has to behave differently depending on the position of the pixel on the screen. Like a type press, your program will work as a function that receives a position and returns a color, and when it's compiled it will run extraordinarily fast.

The incredible things is this fact:
- **the instructions are executed all at once for every single pixel on the screen**

I just love everything about shaders. You can see more in action at [ShaderToy](https://www.shadertoy.com/)

But let's get into some code:

## This post walks you through:
- generating a scene in react-three-fiber
- creating a mesh - with a plane geometry and shader material
- playing around with the shader code for some dynamic animations

Note: this post assumes you know how to create a React Application. If you want to get started quickly - you can run 
```
npx create-react-app my-app
```


## First lets install some packages we'll need

```bash

yarn add @react-three/fiber @react-three/drei  glslify glsl-noise

```

Create a file called `Grid.js`
Here we will set up the basic elements of creating a r3f (short for react three fiber) scene.


```javascript
import { Canvas } from @react-three/fiber

export default function Grid() {
  return (
    <Canvas>
      <pointLight position=[{10,10,10}] />
      <mesh>
        <planeBufferGeometry args=[{10,10}] />
        <meshStandardMaterial color="gray" />
      </mesh>
    </Canvas>
  )
}

```

You should see a gray square box on the screen.

## Let's add some shader material code


```javascript
import { extend, Canvas } from '@react-three/fiber'
import { shaderMaterial } from '@react-three/drei
import glsl from 'glslify'

const WaveShaderMaterial = shaderMaterial(
  // Uniform
  {},
  // Vertex Shader
  glsl`
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  // Fragment Shader
  glsl`
    void main() {
      gl_FragColor = vec4(0.0, 0.4, 1.0, 1.0);
    }
  `
)

extend({ WaveShaderMaterial })

export default function Grid() {
  return (
    <Canvas>
      <pointLight position=[{10,10,10}] />
      <mesh>
        <planeBufferGeometry args=[{10,10}] />
        <waveShaderMaterial />
      </mesh>
    </Canvas>
  )
}
```

## Let's break down some important concepts in the code above

### Uniforms

Uniforms allow us to pass data from our javascript code into our shader code. The shader code consists of both a Vertex and Fragment shader. Examples include passing in mouse position, time, colors, textures, etc. 

### Vertex Shader

In a nutshell, the vertex shader takes in attributes then calculates and manipulates the positions of the vertices of a geometry. This shader runs first before the fragment shader.

### Fragment Shader

Where vertex shader deals with vertices, fragment shader handles setting the color of each pixel (or fragment). 

```
void main() {
  gl_Position = projectionMatrix * modelViewMatrix *  vec4(position, 1.0);
}
```

###  **gl_Position** 
This is the position of the vertex on the screen

###  Matrices
#### **projectionMatrix**
Transforms collected coordinates and displaces the final clipping space

#### **modelMatrix**
Applies all transformations related to the mesh (scale, rotation, movement are all contained and applied to position)

#### **viewMetrix** 
Applies all transformations related to the camera so it correlates with the mesh (scale, rotation, movement of the camera are all contained and applied to position)

#### **modelViewMatrix** 
A combination of modelMatrix & viewMatrix

### type vec4
stores 4 values (x,y,z or a) can also take vec2 or vec3
```
vec4 a = (1.0, 2.0, 3.0, 4.0)
vec2 a = (1.0, 2.0)
vec4 b = (a, 3.0, 4.0)
```

## Let's play around with changing color

Now lets play around passing in a color value from our jsx code set in our uniform object that will be used in our fragment shader. Remember fragment shaders handle coloring the pixels on the screen.

First we'll need to import three
```
import * as THREE from 'three'
```

Update our uniform object to take in a color with black set as default
```
  {
    uColor: new THREE.Color(0.0, 0.0, 0.0)
  },
```
Then in the jsx code update waveShaderMaterial to take in a uColor prop and pass in a color
```
<waveShaderMaterial  uColor={"pink"}  />
```

## How do we create a gradient?

First we need access to our coordinates for the geometry - those coordinates are uv coordinates - you may have seen this as uv Mapping. Access to uv coordinates are only accessible in vertex shader but for updating color we need a way to access them in our fragment shader. In order to do that we can use the varying type - which allows us to send data from vertex to our fragment shader

```

varying vec2 vUv; // v tells us this is a varying type

vUv = uv;

```

Now let's use reacts useFrame to play around with animating color

```
// import useRef, Suspense, and useFram

import React, { useRef, Suspense } from 'react'
import { extend, Canvas, useFrame } from '@react-three/fiber'

// create a component to hold our mesh
const Wave = () => {
  const ref = useRef()
  useFrame(({clock}) => {
    return ref.current.uTime = clock.getElapsedTime()
  })

  return (
    <mesh>
      <planeBufferGeometry args={[10,10]} />
      <waveShaderMaterial
        uColor={"pink"}
        ref={ref}
      />
    </mesh>
  )
}

// then update canvas to render Wave component
      <Canvas>
        <pointLight position={[10,10,10]} />
        <Suspense fallback={null}>
          <Wave />
        </Suspense>
      </Canvas>
```

## Playing with uTime for animations

Let's add a uTime to our uniforms. Then we need to update our Fragment Shader to consume uTime

```
  // Uniforms
  {
    uColor: new THREE.Color(0.0, 0.0, 0.0),
    uTime: 0
  },
    // Fragment Shader
  glsl`
    precision mediump float;

    uniform vec3 uColor;
    uniform float uTime;

    varying vec2 vUv;

    void main() {
      gl_FragColor = vec4(sin(vUv.x + uTime) * uColor, 1.0);
    }
  `/
```

Woo! we have an animated gradient. Play around with the values in gl_FragColor.
Want it to animate vertically? replace vUv.x with vUv.y

## Now Lets get some motion!

Remember anytime we want to manipulate position of the geometry we do this in the vertex shader.

```
precision mediump float;

varying vec2 vUv;

uniform float uTime;

#pragma glslify: snoise3 = require(glsl-noise/simplex/3d);
    
 void main() {
    vUv = uv;
    
    vec3 pos = position;
    float noiseFreq = 1.5;
    float noiseAmp = 0.25;
    vec3 noisePos = vec3(pos.x * noiseFreq + uTime, pos.y, pos.z);
    pos.z += snoise(noisePos) * noiseAmp;
    
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
  }
```

Working with Shaders and react-three-fiber

Since data fetching is an inevitable task we all need to do in applications I wanted to see how to do it in React.



## Let's start with React's componentDidMount

React's `componentDidMount` lifecycle method is called after the component has been mounted into the DOM tree and where we would normally fetch data. It is important to remember that componentDidMount only executes on the first render.

```
class BoredApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
    	boredData: []
    };
  }
  
  async componentDidMount() {
  	const result = await fetch('https://www.boredapi.com/api/activity')
    const boredData = await result.json()
    this.setState({boredData})
  }

  render() {
    return (
    	<p>{this.state.boredData.activity}.</p>
    );
  }
}


```

## Let's look at React's useEffect Hook

Reacts `useEffect` hook is where we would make network requests. It takes a callback as well as a possible array of dependencies as its second argument.

The second argument determines when the hook gets called during renders (when the component is mounted into the DOM)


1. Passing an empty array means we only want it to execute once on initial rendering, similar to componentDidMount

```
  useEffect(() => {
    // do some operation here
  }, [])

```

2. Passing an array with variable(s) indicates we want the hook to execute when the prop changes.

```
  useEffect(() => {
    // do some operation here when prop value changes
  }, [prop])

```

## Making asynchronous data fetching calls with useEffect hook

When migrating over to using react hooks, you might be tempted to make async calls like below, which is exactly what I tried when first using useEffet.

```javascript
const [boredData, setBoredData = useState([])

// this will result in an error
useEffect(async () => {
  	const result = await fetch('https://www.boredapi.com/api/activity')
    const boredData = await result.json()
    setBoredData(boredData
}, [])

```

Instead what you can do is

```
  useEffect(() => {
    const fetchBoredData = async () => {
      const result = await fetch('https://www.boredapi.com/api/activity')
      const boredData = await result.json()
      setBoredData(boredData
    }

    try {
      fetchBoredData()
    catch (error) {
      // handle error
    }
  })



```

Data Fetching in React

Discussions about promises come up frequently in my 1:1's especially with junior engineers, though in certain scenarios I find it can trip up even the most seasoned engineers, including myself. 

As per MDN documentation:


>A Promise is a proxy for a value not necessarily known when the promise is created. 

> A Promise is in one of these states:

    pending: initial state, neither fulfilled nor rejected.
    fulfilled: meaning that the operation was completed successfully.
    rejected: meaning that the operation failed.


What helped solidify the concept for me was a story told by Kyle Simpson author of the excellent book series ["You Don't Know JS"](https://github.com/getify/You-Dont-Know-JS). I'm going to paraphrase but it goes something like this:

Imagine you are at a coffee shop (He uses a fast-food chain example. You can imagine you are there too). You go up to the counter, order a coffee, and pay. You've now entered into a contract with the barista - They've promised to make this coffee for you.


##### <u>Pending State </u>
In the meantime, while you wait, you're free to do other things, normally this might include checking your phone, or if you're like me - stare into the void and daydream of something interesting. When the barista is done:


##### <u>Fulfilled State</u>
They'll call your name out with the coffee made. 


##### <u>Rejected State</u>
Or have an apology stating they ran out of coffee and couldn't make it.

This in a nutshell is how Promises work. It's a promise to return a value at some point in the future.


##### Let's look at a simple example

``` javascript

function getAsyncCoffee() {
  return new Promise((resolve, reject) => 
  {
    // some heavier operation would happen here
    let isGettingCoffeeToday = true;

    isGettingCoffeeToday
      ? resolve("Here's your coffee, Enjoy!")
      : reject("Sorry, we ran out of coffee")
  })
}

const coffeeResult = getAsyncCoffee()
  .then(result => console.log('result', result))
  // import to always terminate w/ a catch
  .catch(error => console.log('error', error.message))
```

##### Now lets see it return w Async/Await

The import part to remember is that anytime you stick an async in front of a function - that function will return a promise.

```javascript
// async keyword indicates this function
// will return a promise
async function coffeeResultAwait() {
	try {
  	const result = await getAsyncCoffee()
    return result;
  } catch (error) {
  	return error;
  }
}

(async () => {
  console.log(await coffeeResultAwait())
})();

```

##### What about resolving multiple promises?

At times you may have multiple async calls you need to make. Below is a very simple simulation - but you might be tempted to reach for map to resolve your promises.

```
const arr = [1,2,3,4,5];

const results: number[] = await arr.map(async (item): Promise<number> => {
  await callAsynchronousOperation(item);
  return item + 1;
});
```

This issue with map is that it is a synchronous operation that does not return a promise.  You need to await something that returns a promise. Furthermore, the above code is awaiting an array of promises rather than a promise itself.

When an object that is not a Promise is passed to await - await just returns the value as is instead of trying to resolve it.

To solve, we can utilize Promise.all.  This takes an iterable - in our case the array and returns a single Promise which can then be awaited (or resolved)

```javascript
const arr = [1, 2, 3, 4, 5];

const results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));

```

Here's a real world example I needed for converting markdown to html

```javascript
const postContent = await Promise.all(blocks.map(async block => {
    let contentToConvert = '';
    if(['ComponentSharedRichText', 'ComponentSharedQuote'].includes(block.__typename) ) {
      contentToConvert = block.body
    }
    return await markdownToHtml(contentToConvert)
}))
```

If you want an even deeper dive into Promises. [Header over to MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)


Understanding Promises

I have built many threeJS sites. It's my go to library for artistic experimentations with code.  When I play around with sites using WebGL it taps into a part of my  brain that reminds me why I became an engineer in the first place - to create dynamic and interactive websites.

### Enter Shaders

Shader code had eluded me for years. Just take a look at some shader code for this noise function to generate this image

![Screen Shot 2022-03-22 at 5.31.30 PM.png](/uploads/Screen_Shot_2022_03_22_at_5_31_30_PM_e79629b95a.png)

[Source](https://thebookofshaders.com/11/)

```
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// 2D Random
float random (in vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))
                 * 43758.5453123);
}

// 2D Noise based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));

    // Smooth Interpolation

    // Cubic Hermine Curve.  Same as SmoothStep()
    vec2 u = f*f*(3.0-2.0*f);
    // u = smoothstep(0.,1.,f);

    // Mix 4 coorners percentages
    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    // Scale the coordinate system to see
    // some noise in action
    vec2 pos = vec2(st*5.0);

    // Use the noise function
    float n = noise(pos);

    gl_FragColor = vec4(vec3(n), 1.0);
}
```

Looking at it now, for me, I can walk through this and make sense of it. But initially, I was very thrown off by it.

I won't get into the technical details since there's already incredible resources out there.

[The Book Shader](https://thebookofshaders.com/11/)

Instead I'll discuss how the visualization was created for the main landing page of my own site.


## Perlin Noise Shader

```javascript
export const heightMapFragmentShader = `
#include <common>

uniform vec2 mousePos;
uniform float mouseSize;
uniform float viscosityConstant;

#define deltaTime ( 1.0 / 60.0 )
#define GRAVITY_CONSTANT ( resolution.x * deltaTime * 3.0 )

void main() {

    vec2 cellSize = 1.0 / resolution.xy;

    vec2 uv = gl_FragCoord.xy * cellSize;

    heightmapValue.x == height
    heightmapValue.y == velocity
    vec4 heightmapValue = texture2D( heightmap, uv );

    // Get neighbours
    vec4 north = texture2D( heightmap, uv + vec2( 0.0, cellSize.y ) );
    vec4 south = texture2D( heightmap, uv + vec2( 0.0, - cellSize.y ) );
    vec4 east = texture2D( heightmap, uv + vec2( cellSize.x, 0.0 ) );
    vec4 west = texture2D( heightmap, uv + vec2( - cellSize.x, 0.0 ) );

    float sump = north.x + south.x + east.x + west.x - 4.0 * heightmapValue.x;

    float accel = sump * GRAVITY_CONSTANT;

    // Dynamics
    heightmapValue.y += accel;
    heightmapValue.x += heightmapValue.y * deltaTime;

    // Viscosity
    heightmapValue.x += sump * viscosityConstant;

    // Mouse influence
    float mousePhase = clamp( length( ( uv - vec2( 0.5 ) ) * BOUNDS - vec2( mousePos.x, - mousePos.y ) ) * PI / mouseSize, 0.0, PI );
    heightmapValue.x += cos( mousePhase ) + 1.0;

    gl_FragColor = heightmapValue;
}
`

export const waterVertexShader = `
uniform sampler2D heightmap;

#define PHONG

varying vec3 vViewPosition;

#ifndef FLAT_SHADED

    varying vec3 vNormal;

#endif

#include <common>
#include <uv_pars_vertex>
#include <uv2_pars_vertex>
#include <displacementmap_pars_vertex>
#include <envmap_pars_vertex>
#include <color_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <shadowmap_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>

void main() {

    vec2 cellSize = vec2( 1.0 / WIDTH, 1.0 / WIDTH );

    #include <uv_vertex>
    #include <uv2_vertex>
    #include <color_vertex>

    // # include <beginnormal_vertex>
    // Compute normal from heightmap
    vec3 objectNormal = vec3(
        ( texture2D( heightmap, uv + vec2( - cellSize.x, 0 ) ).x - texture2D( heightmap, uv + vec2( cellSize.x, 0 ) ).x ) * WIDTH / BOUNDS,
        ( texture2D( heightmap, uv + vec2( 0, - cellSize.y ) ).x - texture2D( heightmap, uv + vec2( 0, cellSize.y ) ).x ) * WIDTH / BOUNDS,
        1.0 );
    //<beginnormal_vertex>

    #include <morphnormal_vertex>
    #include <skinbase_vertex>
    #include <skinnormal_vertex>
    #include <defaultnormal_vertex>

#ifndef FLAT_SHADED // Normal computed with derivatives when FLAT_SHADED

    vNormal = normalize( transformedNormal );

#endif

    //# include <begin_vertex>
    float heightValue = texture2D( heightmap, uv ).x;
    vec3 transformed = vec3( position.x, position.y, heightValue );
    //<begin_vertex>

    #include <morphtarget_vertex>
    #include <skinning_vertex>
    #include <displacementmap_vertex>
    #include <project_vertex>
    #include <logdepthbuf_vertex>
    #include <clipping_planes_vertex>

    vViewPosition = - mvPosition.xyz;

    #include <worldpos_vertex>
    #include <envmap_vertex>
    #include <shadowmap_vertex>
}
`

```

### Rendering the Image

```
function Blob({ hue, wave}) {
  const meshRef = useRef()

  return (
    <points ref={meshRef}>
      <icosahedronBufferGeometry attach="geometry" args={[2.5, 40]} />
      <blobShaderMaterial ref={shaderRef} attach="material" />
    </points>
  )
}

export default function PerlinBlob({ hue, wave}) {
  return (
    <div className="absolute w-full h-full l-0 t-0 p-0 m-0">
      <Canvas
        camera={{ fov: 55, aspect: 2, zoom: 0.27, near: 1, far: 1000 }}
      >
        <OrbitControls />
        <Suspense fallback={null}>
          <Blob hue={hue} wave={wave} />
        </Suspense>
      </Canvas>
    </div>
  )
}
```

Creating Dynamic Visualizations

Learning and using NextJS has been a total gamechanger for me. It's one of those things I'm excited about in terms of developer experience and what it gifts you out of the box.

For the past 4 1/2 years, I worked at a company where the work flow for creating a full-stack applications required several steps.

- Our microservices were built with Node using the Serverless framework. Since teams were spinning out microservices left and right we built a serverless template with conventional settings housed in a javascript-commons repo that teams could clone. These conventions, of course, had to be decided amongst enginering team.

- After cloning we would build out our lambdas in Typescript and go through the usual flow of testing.

- We would set up our own build and deploy system using Harness along with Terraforming the service into AWS.

- Once the endpoints were ready we would then build out the frontend application in React and Typescript. Our frontend applications were stored in a mono-repo with its own sets of conventions.

- For building and deploying the frontend application to production we used Bamboo.

Your own flow is probably something like this as well - maybe its more streamlined or maybe its even more disjointed. There's absolutely nothing wrong with this and it worked out well for us. Many successful applications were built that I am proud to have been a part of.

### But enter NextJS! I was able to get an application up and running incredibly fast. It was truly exciting to use it.

You can spin up a NextJS application very quickly by simply running

```bash
npx create-next-app

// or

yarn create next-app
```

## What is NextJS?

Next.js is a complete full-stack framework that was built by the Vercel team.  Out of the box it comes with

* Pre-rendering - for static (SSG) and serverside (SSR)
* Dev and Production build system (yess!)
* Automatic code splitting
* Client side routing with optimized prefetching
* Page based routing (and dynamic routes)
* Api routes (woo!)


## Why use it?

NextJS is an app-ready application system that allows you to build out the front-end along with api routes or ssr. It comes with its own opinions and conventions based on years of experience from the community. It's built in conjunction with React as its view layer.

When building a React application you need to decide on
- Routing (there's so many choices!)
- Styling (there's so many choices here too!)
- Build system (either manually (oof) or with a CLI)

These days we have `create-react-app` now for single page applications (SPA). It's crazy to think but I definitely remember building webpack configs from scratch - now everyone reaches for some boilerplate.

If you're like me and started programming before `create-react-app` or `create-next-app` even existed then I'm sure you've had those days cursing out your terminal for spitting out build error after build error trying to configure webpack, etc. Or is it just me?

## Want to build your own?

If you want to learn more, I would head over to the [official docs](https://nextjs.org/docs/getting-started).

I built my own website with NextJS + Strapi which I wrote about here.



