DEV Community: Maher Alkendi

Simple Git workflow for beginners

Maher Alkendi — Fri, 07 Aug 2020 11:44:07 +0000

This post is to share the git workflow I use for my projects. I am mainly writing this post so I can use it as a cheat sheet from time to time. However, I think it will serve as a good reference for any developer that wants to go beyond the git add git commit git push workflow.

This posts assumes that you are familiar with the basics of git. If you are not then I recommend the video below, by Traversy Media for a quick overview:

Step 1: Create a branch for the feature you want to add and navigate to it

git checkout -b <branch-name>

Step 2: Make changes to your code

Use the following command to see changes:

git status

Step 3: Add changes to staging area

git add <files-changed>

Step 4: Commit changes and add a short description

git commit -m "<commit message>"

For commit messages I use the article by Chris Beams as reference:

How to Write a Git Commit Message

Step 5: Navigate to main branch

git checkout master

Step 6: Push changes from branch to create a pull request

git push origin <branch-name>

Pull request can be found on github or gitlab (whatever you are using). There you can review and add more comments to it.

That is all!

Got questions? Feel free to reach out via the comments or my twitter

Ok! Now back to learning 👨🏿‍💻

2 things to pay attention to when monitoring your application server

Maher Alkendi — Sun, 02 Aug 2020 12:48:54 +0000

Introduction

Managing an application server is a very sensitive task. Being able to understand the limitations and capabilities of your server is as important as developing the functionalities of your application.

Imagine having a To-do list application that can add new To-do items by voice command, but adding anew to-do item takes too long. All the effort in building the application is gone because no one can use it. What's worse is that you have no idea where the problem is. Your server hosting service provides monitoring graphs but you don't understand them. There are too many concepts to learn and understand. Where to start?

I always found concepts related to web servers daunting and scary. This is why I decided that in monitoring my servers I will focus on two of points only. The goal is to get comfortable with these concepts, then move to other items that are important to pay attention to when managing a server.

In this case I recommend that beginners start by monitoring two items:

Server CPU
Server Memory

Target audience

This article is intended for beginners who found themselves somehow managing a web server for a client or a company. If you are experienced in this field, please feel free to share your thoughts in the comments 😀

CPU

CPU or Central processing unit is the thing in the server or computer that executes the commands or instructions given by a program. In our case the server CPU is what runs our application. Each server can have access to more than one CPU core. The more CPU cores you have the more capable your server will be to handle large loads or expensive tasks.

There are two metrics to pay attention to when monitoring CPU:

CPU load: How many tasks are in queue for our server to run?

CPU utilization: When running a task, how much effort needs to be exerted?

Both CPU load and CPU utilization are best monitored over time.

A great resource to start at is this article by Digital Ocean:

How To Monitor CPU Use on DigitalOcean Droplets

Memory

Memory can be divided into two:

RAM (Random Access Memory)
Disk Storage

RAM is the memory that the server is actively using. This data will be lost if your server or application shuts down.

Imagine fetching a large chunk of data from your database and storing it in an object. This object will have the data stored as long as the server and or application instance is running. Once a user refreshes the application page (as an example) then that object returns to being empty till another fetch happens.

Disk Storage is more permanent. It is what you save in your database (as an example). It is important to pay attention to disk storage. If the storage is full then your application will likely stop functioning. For example a user will not be able to add more To-dos if there is no more storage space. If you are consistently monitoring disk storage then you can plan ahead for any memory shortage.

A good resource for more in-depth readying is:

Measure Linux web server memory usage correctly

For a beginner that is managing a web server for a small client, I believe this is a good start. Simply focus on CPU and memory (Google how to monitor them on your particular hosting service). Once you are comfortable, then you will find yourself delving deeper into these concepts to provide the most reliable service to your clients. The goal is to always find the issue before your client points it out to you. Monitoring can help us plan ahead.

Got questions? Feel free to reach out via the comments or my twitter

Ok! Now back to learning 👨🏿‍💻

Basic form flow using xstate and react

Maher Alkendi — Sun, 29 Dec 2019 18:15:08 +0000

I am on a journey to learn how to use xstate. As I learn, I decided to share pieces of my learnings. The goal is to increase my understanding and to add more xstate implementation examples to the ecosystem.

The app we will be building is a simple form that logs the submitted text to the console. This sounds super simple and can easily be implemented with react. However, how would we build this using xstate?

Lets start by building the UI components of our app. Note that I am using CodeSandbox to write my code.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <h2>Submit to log some text on the console</h2>
      <form>
        <input
          type="text"
          placeholder="Enter text"
        />
        <button>submit</button>
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This is what our app looks like in the browser:

Alright, lets install xstate and @xstate/react as dependencies in our application. Then import them and start thinking about our simple form State Machine

...
import { Machine } from "xstate";

const simpleFormMachine = Machine(
  {
    id: "simpleForm",
    initial: "idle",
    states: {
      idle: {},
      submitting: {}
      }
    }
  }
);

...

As a start we give our machine an unique id and an initial state. Next we enter our expected states.

This is the flow we are expecting: the form is idle then the user starts an event, which is the "typing" event. In the "typing" event the form is still in idle state. Then when the user presses the submit button, the form starts submitting the data. That is when we should implement the logging logic.

Based on the above narrative I saw fit we have two states for our form: idle state and submitting state.

We have a basic idea of what our state machine will look like. However, where can we store the state of the input value? There are infinite representations of this state (whatever the user will input), which should lead us to conclude that we need to use the xstate extended state, named context. Then we can pass this value to our jsx input via the @xstate/react library.

import React from "react";
import ReactDOM from "react-dom";
import { Machine } from "xstate";
import { useMachine } from "@xstate/react";

import "./styles.css";

const simpleFormMachine = Machine(
  {
    id: "simpleForm",
    initial: "idle",
    context: {
      inputValue: ""
    },
    states: {
      idle: {},
      submitting: {}
  }
);

function App() {
  const [current, send] = useMachine(simpleFormMachine);
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <h2>Submit to log some text on the console</h2>
      <form>
        <input
          type="text"
          placeholder="Enter text"
          value={current.context.inputValue}
        />
        <button>submit</button>
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

To test that our input value is connected to our state machine's context, simply change the initial value of inputValue and you will see the change reflected in the input.

Next lets implement onChange using xstate. When the user starts inserting text in the input box the onChange event is triggered. When this happens we should send a message to the state machine telling it that the user is currently typing. Our machine should then implement an action to assign our context to the value being inputted by the user.

...

const simpleFormMachine = Machine(
  {
    id: "simpleForm",
    initial: "idle",
    context: {
      inputValue: ""
    },
    states: {
      idle: {
        on: {
          TYPING: {
            actions: "typing"
          }
        }
      },
      submitting: {}
    }
  },
  {
    actions: {
      typing: assign((ctx, e) => ({ inputValue: e.value }))
    }
  }
);

function App() {
  const [current, send] = useMachine(simpleFormMachine);
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <h2>Submit to log some text on the console</h2>
      <form>
        <input
          type="text"
          placeholder="Enter text"
          value={current.context.inputValue}
          onChange={e =>
            send({
              type: "TYPING",
              value: e.target.value
            })
          }
        />
        <button>submit</button>
      </form>
    </div>
  );
}

...

Now lets implement our submit logic. This happens when the form is submitted, via the submit button or the enter key. In this case we want our form to send an event indicating it is submitting. Our machine will then change from idle to submitting state. As we enter this state we should log the current context value to the console.

...

const simpleFormMachine = Machine(
  {
    id: "simpleForm",
    initial: "idle",
    context: {
      inputValue: ""
    },
    states: {
      idle: {
        on: {
          TYPING: {
            actions: "typing"
          },
          SUBMIT: "submitting"
        }
      },
      submitting: {
        entry: "log"
      }
    }
  },
  {
    actions: {
      typing: assign((ctx, e) => ({ inputValue: e.value })),
      log: (ctx, e) => console.log(ctx.inputValue)
    }
  }
);

function App() {
  const [current, send] = useMachine(simpleFormMachine);
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <h2>Submit to log some text on the console</h2>
      <form
        onSubmit={e => {
          e.preventDefault();
          send("SUBMIT");
        }}
      >
        <input
          type="text"
          placeholder="Enter text"
          value={current.context.inputValue}
          onChange={e =>
            send({
              type: "TYPING",
              value: e.target.value
            })
          }
        />
        <button>submit</button>
      </form>
    </div>
  );
}
...

The app is almost complete. However, the only issue we have is that we are not going back to an idle state after submitting the form. Lets send a second event after the 'SUBMIT' event. Lets call it 'STOPPED_TYPING'. when this event occurs we will go back to the idle state and we should trigger an action to clear the form.

...

const simpleFormMachine = Machine(
  {
    id: "simpleForm",
    initial: "idle",
    context: {
      inputValue: ""
    },
    states: {
      idle: {
        on: {
          TYPING: {
            actions: "typing"
          },
          SUBMIT: "submitting"
        }
      },
      submitting: {
        entry: "log",
        on: {
          STOPPED_TYPING: {
            target: "idle",
            actions: "clear"
          }
        }
      }
    }
  },
  {
    actions: {
      typing: assign((ctx, e) => ({ inputValue: e.value })),
      log: (ctx, e) => console.log(ctx.inputValue),
      clear: assign((ctx, e) => ({ inputValue: "" }))
    }
  }
);

function App() {
  const [current, send] = useMachine(simpleFormMachine);
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <h2>Submit to log some text on the console</h2>
      <form
        onSubmit={e => {
          e.preventDefault();
          send("SUBMIT");
          send("STOPPED_TYPING");
        }}
      >
        <input
          type="text"
          placeholder="Enter text"
          value={current.context.inputValue}
          onChange={e =>
            send({
              type: "TYPING",
              value: e.target.value
            })
          }
        />
        <button>submit</button>
      </form>
    </div>
  );
}

...

For the full code check out the codeSandbox below:

See below for the final state chart:

Did I miss anything? Got a better way of doing this? leave a comment! :]

Ok! Now back to learning 👨🏿‍💻

Writing documentation for your React Components

Maher Alkendi — Sat, 28 Dec 2019 12:55:58 +0000

Speak with any developer that has worked in a team or on a large coding project and they will tell you that one of the most important things you could do as you build you application is writing documentation.

To understand why, simply build an app then come back to the code a month from now and see how lost you will get even though you wrote the code.

Now while writing documentation sounds like a great idea, it isn't the easiest thing to do. Developers are often pressured by time or sometimes you just don't feel like writing an essay about your code.

If you develop in React and you don't document your code at all then start by simply documenting your React components only. Get in that habit and go from there. In this article, I will write down some items that you can consider as checkpoints anytime you write a React Component. Try as much as possible to do this for all your components and it will become a habit.

Description/Purpose of the component

What does this component do?

Answer that question and you are done with the first step. This is a good place for pictures of what the component should look like in the browser.

Example:

...
const DeleteButton = () => {...}
...

# Description:
# This component will delete an item when pressed.

Something as simple as that one line will go a long way. This just happens to be a simple example but for a more complex component, it will be very helpful.

List all props

Just have a table with all props that the component has. In addition, mention what type of value it is expecting.

Example:

const DeleteButton = ({ element, isPermanent }) => {...}

Prop	Description	type
element	element we want to delete	String
isPermanent	Should we archive or delete from db?	Boolean

List all components

If your component uses any other components, then list them. List the ones that are from external libraries as well.

import ExternalComponent from 'ExternalLibrary'

const DeleteButton = ({ element, isPermanent }) => {
...

return (
  <ButtonWrapper>
   ...
   <ExternalComponent />
   ...
  </ButtonWrapper>
 )
}

Component	Description
ButtonWrapper	Sets the button layout
ExternalComponent	Does something cool

That is all. If you are like me and find it difficult to fit documentation into your development flow, then try the steps in this article as a start. Let me know how it works out! I will be using this on a real project and do plan to write a follow up article with an update and better examples.

If you have any more ideas, share in the comments!

Ok! Now back to learning 👨🏿‍💻

Dynamically Appending a script tag in a React App

Maher Alkendi — Sat, 21 Dec 2019 16:17:05 +0000

These days most libraries have a special/custom React component you can simply insert into your jsx code, then add some props and it works. What if you face a situation where you really need to use a library but they do not have any React specific support?

I was attempting to use the Paypal Checkout API to allow my client to make online payment. This API allows me as a developer to move all payment responsibilities to Paypal via their checkout widget. See docs for more details.

However, there is no strict React support. What they provide in the documentation is a script tag that you can drop somewhere in your html and the buttons would appear. My app in this case was a React application and my template is jsx instead of html. How would I handle a case like this?

I am writing this article to mirror that case with a simple example and show you one way you can handle it.

First of all lets simulate the situation with Paypal. Paypal provides us with a script tag such as this: <script src="https://www.paypal.com/sdk/js?client-id=sb"></script>. if you copy the url, it will take you to a blank page with a lot of text. This text is the javascript code. What we need is a server to send us some javascript code.

The fastest way I know to do this is with node js and Express js. Lets start by creating a folder for our application and initiating a package.json. This can all be done in our terminal.



# create a new directory
mkdir script-link

# navigate to the new directory
cd script-link

# initiate a package.json
npm init -y

Next lets install Express js, then create a file index.js to write our server code in. Again, all can be done via the terminal.



# install express js
npm i -S express

# create a index.js file
touch index.js

Now that we have our file open, lets start our server at port 3001. If you are unfamiliar with how this is done. check out the Express js documentation. Otherwise, I will try to comment the code as much as possible.

to start our application, all we need to do is run node index.js. Now lets go to our browser and navigate to http://localhost:3001/. This is what we should see on the screen:

We are almost there! Now we need to send some javascript code instead. This is the time to think about what we want our mini widget to do. To make it simple all it will do is create a button that will show an alert anytime it is clicked. This is what the code looks like:

and this is what you should see if you add this as a script tag to an html file:

Now that we have that, lets make our server send the code if a request is made. We do this by specifying the type of response file we are sending and by sending our javascript code in the form of a string.

Once we restart our server, and refresh the browser page, this is what we should see:

OK! we are now sending javascript code just like the Paypal API does. Lets now start a React application that can use this little widget.

First lets start a React application via the terminal.



npx create-react-app some-react-app

Once the app is setup we can run it by typing npm start in our terminal. This will show us the default React page we are all familiar with. Next lets change the code in the App.js file and add our own. All I did was add a h1 tag with some text.

In order to use the code that is in our server, we need to have a script tag. One method we can use is putting the script tag in our index.html that is in our public folder. However, lets say the javascript code has some function that we want to invoke at a particular point, how would we do that? For maximum control the best choice is to somehow add the code in a React component.

Since the script tag is just an html tag we can simply append it to a tag in our template/jsx.

First lets create a div tag that we can use as a ref to append to. We do this because this is jsx not html, so we can't simply select the div the way you would normally do. We have to create an instance of it via React ref.

Finally we use the useEffect hook to make sure we run the code when all components have been rendered. inside our useEffect hook we create a script tag, give it a src attribute with our express server link, and append the script tag to our div instance. This is what it looks like:

This is what our app should look like now:

Nice! We have successfully dynamically appended a script tag in our React application. Now, if we wanted, we could take this code and put it into a separate component. This will allow us to re-use it anywhere in our app.

This is a simple demo but can give you an idea of how some of those great and convenient custom React components, that many libraries provide, are created. In addition, the idea of appending a script tag is new to me and I wanted to document and share it.

Please leave a comment if you have any take on this!

Ok! Now back to learning 👨🏿‍💻

What Payment API do you use if you don't live in a place where Stripe and other major Payment APIs works?

Maher Alkendi — Tue, 29 Oct 2019 02:34:54 +0000

What is the JAMStack missing to compete with Wordpress?

Maher Alkendi — Sun, 08 Sep 2019 01:32:09 +0000

The JAMStack is on the rise and I love the development environment it provides, but in the freelance world it is not the preferred option. Right now Wordpress is king. What does the JAMStack need to compete?

Create a signature pad in React

Maher Alkendi — Fri, 06 Sep 2019 15:39:39 +0000

I was recently asked by a client to build a form that allows users to sign using a wireless pen mouse. The goal of the client was to obtain user signatures for a report that would be used for a future audit.

At first I was considering building my own signature pad from scratch. However, I didn't have the time to do that. This feature needed to be live in a week. This unfortunately is the reality when working in real life situations. This is why I wanted to write about this specific case. You won't always have the time to build every single feature in an app from scratch. Sometimes you have to rely on libraries created by other developers. This article will help beginners see how you can combine different libraries to create a working product.

OK let start building the signature pad. First I wrote a user story. Below is the user story for what we will be building:

User sees a button that can be clicked to open a popup
User can see and draw on a canvas when the popup is opened
User has the option to exit popup via an 'Close' button, clear the canvas via a 'Clear' button, or save the signature as an image via the 'Save' button.

Now that we know what we are building lets start coding it. We can use the user story list items as our milestones.

User sees a button that can be clicked to open a popup

I will use React for this task, so lets bootstrap the project by using create-react-app.

To do that all we need to do is type the following command on our terminal:



npx create-react-app signature-pad

For more information on create-react-app check out this Github Repo

Once our project is ready, we navigate into our folder and start up our code editor. In my case I am using VS Code.



# navigate to the project folder in your terminal
cd signature-pad

# command to start VS Code once you are in root folder of the project
code .

Now that we have everything set lets start up our project by typing the following command:



# start project
npm start

This is what we should see once the project starts:

If you open up your App.js file this is what we should see:

Lets get rid of all this code and add the one thing we need. A button that when clicked should open up a popup with a signature pad, per our user story.

This is what our app should look like now:

Our final step for this part of the project is to show a popup when the button is clicked. A good library that can help with this is reactjs-popup. To install it we type



npm install --save reactjs-popup

This library can be used to create Popup Models, Tool-tips, and Nested Menus. In our case we will focus on using it to create Popup Models. For more information on it check out their very helpful documentation page

Once we have the library installed we import it into our App.js file. Next we add the Popup component to our render method. This component takes in many props. In our case we focus on two: modal props (by default this is false which results in getting a tool-tip) and the trigger props which takes in a component that will trigger the popup. In our case this is our button that we already created.

Now when we click on the button we should get a popup. the content of the popup will go inside our Popup component.

This is what we should have now:

We have successfully completed the first part of our User story. Now lets more to the next one!

User can see and draw on a canvas when the popup is opened

To build the canvas inside our popup we will be using react-signature-canvas. This is a powerful library that will make working with a signature pad very easy. Specifically when we start thinking about adding features such as clear and save to our pad.

To install it we type:



npm install --save react-signature-canvas

Once we have that installed we import the SignatureCanvas component and place it inside our Popup component. That is all!

We now have a canvas inside our popup. This is what the code looks like:

and this is what our app should be showing:

Before we move to the next item in the user story lets add some styling to our canvas. All I will do is give give our canvas a border in order for us to easily identify it and give it a width and height.

the SignaturePad component has a prop called canvasProps which allows us to pass attributes to the canvas. In this case I will give the canvas a class called "signatureCanvas".

You probably noticed that I am also importing a css file called sigCanvas.css. This is where I will put all my canvas related styles.

The result should look like this:

OK ready for our final step.

User has the option to exit popup via an 'Close' button, clear the canvas via a 'Clear' button, or save the signature as an image via the 'Save' button.

lets start with the close button. lets add a button with an onClick, inside that onClick will be a way to close the popup. The reactjs-popup docs recommend providing a function as a child to the Popup component. this function has a parameter close that will handle our close event and will return the components that we want inside the popup.

In addition we should not allow users to close the popup except via this button. To do that we need to pass the closeOnDocumentClick prop and pass it a true value.

This is what our app looks like now:

Next we need a button to clear the canvas. react-signature-canvas provides several methods that help with manipulating our canvas. In order to use this method we need to get an instant of our canvas. This can be done via React refs.

Let use React Hooks for this. First we create a ref called sigCanvas using useRef hook, the initial value is an empty object. Next we pass this into a SignaturePad component using a prop called ref. finally we create a function called clear that will be called anytime the clear button is clicked.

inside the clear function, we simply invoke the method clear() via our canvas ref sigCanvas. I realize these are a lot of steps, so I wrote comments in the code shown below:

This is what our app should look like now:

Now for the final button, the save button. This button should simply output a base64 string representing the image. You can use this to store it in a database or instead you can upload the image into your server. In our case we won't be connecting to any servers, so we will simply log the base64 code to the console.

react-signature-canvas has a method called getTrimmedCanvas() that can trim the white space from the canvas (to optimize the image) and give back a base64 string representing the image. All this via our sigCanvas ref.

This is what our app should look like now:

Alright! all basic functionalities are complete!

I do want to add one more part to this project. Lets output the saved signature on our screen instead of just logging it.

We can simply add an image tag below our popup button and pass it our image URL. Of course this image URL will be what we logged into the console, so instead of doing that we can store it in state.

This should be the result:

That's all folks! we successfully completed our user story. Of course there is room to improve but all the basic functionalities are there.

You can play around with the code and add more features to it by following the link

Got questions? Feel free to reach out via the comments or my twitter

Ok! Now back to learning 👨🏿‍💻

Do you make your SVG using code? or using software?

Maher Alkendi — Thu, 29 Aug 2019 12:32:47 +0000

I am very new to the design world and I find websites such as Splitwise fascinating!

Now I want to dip my toe's in but I want to know. For more complex SVG's what do you use to build them? what is your process?

Easy way to get parameters from a URL

Maher Alkendi — Fri, 26 Jul 2019 11:16:49 +0000

Getting Url parameters can be tricky. I am sure I am not the only one that has used google to search for the perfect regular expression to help extract a parameter from a Url.

While learning and mastering Regular Expressions is probably the best in this case. You might not have the time to learn them and just need a nice fix that is neat and easy to understand.

The code below shows how this can easily be done using the URL API

You can read more about the ins and outs of this API by checking out the link below:

URL - Web APIs | MDN

Reading through the MDN docs, you’ll notice this API has two interfaces the URL interface and the URLSearchParams interface.

The URL interface in this case allows us to parse our Url and returns an object that represents it.

Note that one of the keys in the object (searchParams) refers to the URLSearchParams interface. This interface gives us methods that allow us to work with the query string in a Url.

You can read more about the query string here: Query string - Wikipedia

Also check out all the methods that URLSearchParams interface provides here: URLSearchParams - Web APIs | MDN

In this case all we need to do is call URLSearchParams.get()and pass it the parameter name we need, as a string. Feel free to play around further with this API. No need for an editor this can all be done from your browser console!

Now while this API is amazing! It does have one issue. It is not supported by IE.

MDN does suggest we use window.URL in this case. Strangely enough I tested it on IE 11 and it didn't work. The docs on MDN do not give much more detail on an alternative for IE, so if you have to support IE try using a poly-fill. I like the solution shown on JQUERY BY EXAMPLE

When using any of these cool Web APIs it is important to check for browser compatibility. In my case I needed this method for a dashboard project that I am building for a client and the client only uses chrome (luckily). This allowed me to utilize this API.

Hope this short article can help you on your next project!

Got questions? Feel free to reach out via the comments or my twitter

Ok! Now back to learning 👨🏿‍💻