DEV Community: Alonzo

Adding/Enabling Extensions in PHP using Windows

Alonzo — Mon, 19 Jul 2021 19:28:12 +0000

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. 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. 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.

How to parse nonhard-coded markdown in NextJS with Syntax Highlighting

Alonzo — Mon, 19 Apr 2021 22:40:56 +0000

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.

// 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.

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.

    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:

<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:

import 'highlight.js/styles/atelier-forest-light.css'

In the end, you will have a blog article with syntax highlighting. E.G This site

Adding a Loading animation to NextJS using React-Redux

Alonzo — Sun, 18 Apr 2021 14:09:11 +0000

After Implementing Server Side Rendering using NextJS on one of my projects, I noticed that my project is now slow when navigating between pages. If users were to use this, they would wonder if the web app is working or not. With that in mind, I decided to implement a loading animation when navigating between pages.

First, I had to add redux, react-redux, and material-ui to my project using yarn.


yarn add redux
yarn add react-redux
yarn add @material-ui/core

Actions and Reducers

After that, I had to add to my file structure two folders: actions and reducers.

Actions

In the actions folder I added an index.js file that contained a function returning an action. Doing this allowed me to name a function that I would use to dispatch a Boolean switch to let my project know that it is loading.


export function setLoadingCondition() {
    return {
        type: "setLoadingCondition"
    }
}

Reducers

After that I added two files in the reducers folder: loading.js and index.js.

In loading.js, I had to add a reducer (which I named loadingReducer) that has an initial state (that being false) and made sure that it recognized the type: setLoadingCondition I wrote earlier in the index.js file in the actions folder after that function had been dispatched. Once it found it, I made sure that it would return the opposite of the initial state (that being true). If that type had not been dispatched, I made sure that it returned the initial state. In the end, the loading.js file looked like this:


const loadingReducer = (state = false, action) => {
    switch(action.type){
        case "setLoadingCondition":
            return !state


        default: return state
    }
}


export default loadingReducer

In the index.js file, I had first had to import the loadingReducer I wrote in loading.js and a function called combineReducers from redux. Then I would use the combineReducers function to make sure that when I am selecting a reducer, the loadingReducer could be recognized as just loading for simplicity. That would end up in a const called allReducers, which would be used later. In the end, the index.js file in the reducers folder looked like this:


import loadingReducer from './loading'
import {combineReducers} from 'redux'


const allReducers = combineReducers({
    loading: loadingReducer
})


export default allReducers

Tying the action and Reducer into the project

_app.js

In the _app.js file I had to make sure that NextJS recognized the fact that my redux and react-redux were being used. First I had to import Provider tag from react-redux. After that, I had put the Component tag within the Provider tag. With the Provider tag wrapped around the Component tag, I had to make sure that Provider was aware of the reducer I created. With that in mind, I had to import createStore from redux and the allReducer I made earlier. In a const I called store, I used the createStore function to utilize allReducer. The store would then be in the Provider tag in an attribute that was also called store. In the end, _app.js looked something like this:


import {createStore} from 'redux'
import allReducer from '../reducers'
import {Provider} from 'react-redux'
export default function MyApp({ Component, pageProps }) {


    const store = createStore(allReducer);

    return <Provider store={store}><Component {...pageProps} /></Provider>


}

Implementing the reducer and the loading animation

In the components that allow me to navigate between different pages I had to import a hook from react-redux called useDispatch, and setLoadingCondition I made earlier from the index.js file in the actions folder. I then created a const called dispatch which used the useDispatch hook for simplicity reasons. On the element within a Link tag, I added an onClick event allowing me to dispatch the setLoadingCondition function to make sure that project knows that it is loading. On the pages I imported a hook from react-redux called useSelector and a LinearProgress tag from @material-ui/core. In a const I called loading, I used the useSelector hook to select the loadingReducer that was known as loading for simplicity. In the DOM, I made a function that checked to see if the page was loading. If it was then loading would be true. If loading was true, I wrapped a div tag around the LinearProgress tag. Since the amount of data would increase, I had to make sure that the LinearProgress could be seen while scrolling. To do this, I added a className to the div tag so that I could customize it in a css file. Here is what I added to my files:

component:


// import statements

import {useDispatch} from 'react-redux'
import {setLoadingCondition} from '../../actions'

//const

const dispatch = useDispatch()

//DOM

return (
  <Link href={`/project?title=${props.id}`}><h1 onClick={() => dispatch(setLoadingCondition())} className={styles.displaytitle}><strong>{props.project}</strong></h1></Link>
)

page:


// import statements

import {useSelector} from 'react-redux'
import {LinearProgress} from '@material-ui/core'

//const

const loading = useSelector(state => state.loading)

//DOM

return (
{loading && <div className="loading"><LinearProgress /></div>}
)

css file:


.loading {
  position: fixed;
  top: 0;
  width: -webkit-fill-available;
  width: -moz-available;
  z-index: 3;
}

Because of Redux, my project now has a loading animation.

Here's the final result

Fixing "navigator is not defined" when using Codemirror with NextJS

Alonzo — Sat, 17 Apr 2021 00:03:32 +0000

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

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


// 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.


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:


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.:


{<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


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.