I had to fix a bug that prevented a table from displaying the correct data


I contributed to a CRM style database that holds very basic information about users (name, email, phone) that recorded users website engagement activities using the **fauna** database.

Modified the Nchandi Angular Website to allow their tables to be sorted when a user clicks/taps on the table header and made sure that the tables can be printed and exported to the **.xlsx** format.

I also created a **NodeJS** server to automate SMS + email reminders for Nchandi volunteers a day before their session date and a day after requesting the volunteers to report if they went or not and how their session went. Before, Nchandi was spending $0.05 for every manual SMS reminder. I migrated them to using **Messagebird** and saved them money when sending more than 102 SMS reminders a month.

![Savings](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/works%2Fsavings.jpg?alt=media&token=78a64f96-cf55-413f-bb9f-f9f7e78806cf)

This web app allows users to create study notes using markdown

Markednotes - create notes with markdown

This web app allows users to create code problems for students/interviewees

Kodenshare - test your students/candidates

if you are using github's markdown renderer and want to use highlightjs themes, use this to convert github's/octokit's syntax highlighting method with highlightjs's syntax highlighting method

Octokit-to-highlightjs

If you have tried to implement CodeMirror in a NextJS project, you may have seen an error like this everytime you refresh the page:

![Navigator not defined error](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/blogs%2Fnavigator%20is%20not%20defined.png?alt=media&token=8130dcb6-fb01-4338-8356-6702dd3038b2)

Instead of hoping that your user would not refresh the page or removing CodeMirror all together, you could try to fix it. Here's how.

Before starting ensure that you do have **react-codemirror** and **codemirror** installed. If not, copy and paste the following within your terminal

``` bash

// if you have npm

npm i codemirror

npm i react-codemirror

//if you have yarn

yarn add codemirror

yarn add react-codemirror

```

## Dynamic Importing

First, you need to make sure that you import `react-codemirror` and your desired themes and modes using **Dynamic imports**. To do this, import the dynamic function from NextJS normally as you would with any other npm/yarn package.

``` javascript

import dynamic from 'next/dynamic'

```

With this function imported, you can start to dynamically import react-codemirror and it's dependencies.  Keep in mind though that you have to dynamically import these outside your exported function. Create a const called **CodeMirror** and set it equal to the dynamic function. Inside the dynamic function,  import the dependencies (e.g. `import('codemirror/mode/xml/xml')`) and then return with `import('react-codemirror')`. After you have imported all of these, add an object within the function declaring `ssr: false`. In the end, it should look something like this:

``` javascript

const CodeMirror = dynamic(() => {
    import('codemirror/mode/xml/xml')
    import('codemirror/mode/javascript/javascript')
    import('codemirror/mode/css/css')
    import('codemirror/mode/markdown/markdown')
    import('codemirror/theme/material-ocean.css')
    return import('react-codemirror')
}, {ssr: false})

```

## Rendering

To include the CodeMirror element within your page/component, you first need to enclose it within brackets. After that, you can include everything else such as the value, options, and the onChange event. E.G.:

```javascript

{<CodeMirror
    className="editor"
    value={devLog}
    name= "Devlog"
    options={{
      theme: 'mdn-like',
      lineNumbers: true,
      mode: 'markdown'
    }}
    onChange={devLog => setDevLog(devLog)}
/>}

```
To ensure that it everything looks right and works the way you expect it to work (not having the textarea and editor being in two separate places or a bunch of x's), you should include the following in your **_app.js** file

``` javascript

import 'codemirror/lib/codemirror.css'

```

In the end, you and your users should be able to write code or write a markdown blog using CodeMirror without having to worry about refreshing the page only to see an error.

Using CodeMirror in NextJS without the Navigator error

Instead of writing individual html pages or embedding an article from an external blog site, you may want to make your own customization to your articles and to make use of markdown's simplicity to write blogs alongside NextJS's incremental static site generation for fast loading and dynamic data. However, if you have used a markdown parser, you probably have realized that while it gets the job done, you would prefer to have syntax highlighting in your code snippets rather than just having text that looks somewhat different from your paragraphs. If you have faced this, there is a solution to this. First you need to install two packages: markdown-it and highlight.js.

``` bash
// if you're using npm

npm i highlight.js
npm i markdown-it

//if you're using yarn

yarn add highlight.js
yarn add markdown-it

```

First, at the top of your file, you need to import hljs from highlight.js and then import MarkdownIt from markdown-it.

``` javascript
import hljs from 'highlight.js'
import MarkdownIt from 'markdown-it'
```
After that, you need to create a const (let's call it md) that is equal to a MarkdownIt function that incorporates hljs that was imported. This will allow Markdown-It to recognize parts of your markdown data that has code and will apply syntax highlighting for that language. It should look something like this.

``` javascript
    const md = new MarkdownIt({
        highlight: function (str, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return '<pre class="hljs"><code>' +
                     hljs.highlight(lang, str, true).value +
                     '</code></pre>';
            } catch (err) {console.log(err)}
          }
      
          return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
        }
      });

```
After that, you can create a div element with an attribute called dangerouslySetInnerHTML. That attribute should contain an object with a propterty called: __html (yes with two underscores). This should be equal to md.render(/*your markdown data*/, */language*/)  (assuming that you named the const md). It should look like this:


``` javascript
<div id={styles.blog} dangerouslySetInnerHTML={{__html: md.render(/*your markdown data*/, */language*/)}}></div>

```

Finally to make sure that syntax highlighting actually appear, you need to import a css file from highligh.js in your _app.js file. Highlight.js has alot of css styles so you can experiment with those. To find those styles, you can go to the node_modules folder, then inside that folder go to the highlight.js folder, and then styles. The import statement should look something like this:

``` javascript
import 'highlight.js/styles/atelier-forest-light.css'
```
In the end, you will have a blog article with syntax highlighting. [E.G This site](https://alonzoaustin.com/blog?title=Rj0nK8aJE1vj1QpgOETx)

How to parse fetched markdown in NextJS with Syntax Highlighting

If you're using PHP or any PHP framework/library for the first time, you've probably noticed when you tried to use composer to create a project that you don't have certain extensions. You may have tried to go to composer to install these extensions, only to find out that this isn't working. Here's how to solve that problem.

You may be surprised to find out that these extensions are already installed, but just are not enabled. To enable these, you must go to _C:\tools\php80\_ in your file explorer. Next, you need to look for the **php.ini** file. It may be hard to find this because the **.ini** file extension is not shown after PHP. To locate this file, look for the icon that has the **Configuration settings** type. ![php.ini](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/blogs%2Fphp_extensions%2Fphp_ini.png?alt=media&token=4599e91c-3dda-4209-9fab-5da8053d44dc) Next, open it using your code editor/text editor/IDE. Next search for a long list of extensions that begin with _;extension_. The **;** comments out a single line, so look for the extensions that begin with **;extension** and delete the **;**. This will enable the extension. You are now ready to use the PHP framework/library of your choice. 

While developing your web app, you may try to install a package from composer, only to find that an extension that is not already in the _php.ini_ file. How can you fix this?

## Adding Extensions

To add extensions, you need to go to _http://pecl.php.net/_ to find the extension you need. (I'm using MongoDB as an example) When you find an extension, find the right version and click on **dll**. ![dll not tgz](https://firebasestorage.googleapis.com/v0/b/alonzoaustin-8314b.appspot.com/o/blogs%2Fphp_extensions%2Fdll.png?alt=media&token=89f136ce-1bc7-4ba5-bf62-11d38af7d947) Again, look for the version compatible with your version of PHP, and download the ** non-threaded** file if you're not using apache. After that, extract the file and find the **dll** file. Next copy the file into _C:\tools\php80\ext_. You can then add the entry for the new extension in _php.ini_ like the other extensions (for example, to add MongoDB, you would type **extension=mongodb** in alphabetical order of extensions unless stated otherwise). With that done, you can then install the package you need.

Alonzo Austin