DEV Community: Margai Wangara(he/him)

Setting up macOS on a Partition of your Linux Machine

Margai Wangara(he/him) — Fri, 16 Jul 2021 16:52:48 +0000

So, woke up this morning, checked my LinkedIn account, and, the most amazing thing happened. Someone had posted a solution to a problem I have been having for a long time, and it was awesome. Being a once in a while mobile apps developer, I always looked for ways to be able to test my hybrid React Native apps on an iPhone device to no avail. Basically, unless you have a macOS, or an iPhone, good luck testing your app. This always led to issues, like the well-known Internet Explorer explorer issues, whereby your app looks great on Chrome and Firefox but when you it check out Internet Explorer it looks like the app went to hell and came back.

Based on the post, one can use sosumi to run macOS on their Linux machines. So, I embarked on a journey to try and figure out how I can pull this off. I then came across this article by Logix on the Linux Uprising blog, which provides an awesome step by step guide on getting the stuff running on one's machine. I definitely suggest a read. While trying out the steps, I hit a snag, kind of a big one, my machine did not have enough space for a complete installation. I however had different partitions with enough space to accommodate the installation. The problem though, is that I didn't know how to install it in a different partition. Then came a comment by Hikmat E Ustad, providing an alternative way to install from a YouTube video he created. The video can be found here.

The video did not provide a solution to my problem but after contacting him(basically wrote a comment), he directed me to a link which provided me a with a starting point. That is when the fun started.

Creating a Virtual Drive

To create a virtual drive, search and open virt-manager on your Linux OS, I use Ubuntu so it was already installed.
We then add the disk to the KVM Storage pool via virt-manager. To create a new VM, on the menu bar, click on edit, then choose "Connection Details".
Open the "Storage" tab then click the green + button on the far bottom left. On the popup window, write the Name, then on the Type dropdown choose dir: Filesystem Directory, on the Target Path, click the Browse button on the right.
The File Explorer will popup and you have to select a location as your target. This is where we select the partition we want.
To select a partition, click on + Other Locations on the left sidebar of the file explorer window. You will then see the list of all your partitions, normally with a /dev/<some name> on the right. Mine was /dev/sdb2. Click on the partition to mount it then you can create a folder inside and set the folder as your target path. You can then click the green button on the top-right of the window. The most important part is getting the path to the partition, this can be found once you click the green button at the top right, and on the next popup window, click finish.
Once you are done creating the pool above, the "Connection Details" window will be open and from the left sidebar choose the name of the pool you created. Details of that pool will be displayed on the right. Keep this window open and follow the instructions below to install macOS on your machine.

Installing macOS

Go to this repo and follow the instructions step by step up to the part below:

qemu-img create -f qcow2 mac_hdd_ng.img 128G

The command above creates a virtual hdd image where macOS will be installed. We have to change the location to the pool target we created above. Go back to point 6. and copy Location, it is usually something like this /media/<username>/01D6CA5DC685C8B0/<folder you created>. Replace the above command with:

# PS: 128G is the size of the virtual drive in Gigabytes that will be created
qemu-img create -f qcow2 /media/<username>/01D6CA5DC685C8B0/<folder you created>/mac_hdd_ng.img 128G

The command creates a 128GB virtual hdd in the location you specified, in this situation, the partition you added to the pool. After running the command above, since we changed the location of our virtual hdd, we also need to set this location in our script which will be run immediately after this command. So before running the script, we need to open it and change the location. To open the script:

nano ./OpenCore-Boot.sh

This opens the script in the terminal, we can then create a new variable, find the line with the variable REPO_PATH="." and on the next line add this variable:

NVM_PATH="/media/<username>/01D6CA5DC685C8B0/<folder you created>"

Then find this line:

-drive id=MacHDD,if=none,file="$REPO_PATH/mac_hdd_ng.img",format=qcow2

and replace $REPO_PATH with $NVM_PATH, then save and close by pressing ctrl+X then Enter. You can then run the script by typing:

./OpenCore-Boot.sh

From this point, you can read this article or watch this video to complete the installation.

Note: This might not necessarily be the best approach but it it the approach that worked for me. In case I made any mistake, please feel free to constructively criticize in the comments.

How to Toggle Input Field Values With React Hooks

Margai Wangara(he/him) — Fri, 11 Dec 2020 18:08:53 +0000

I have been coding in React for some time now(a while, like a long while) and throughout this period, I have come across some awesome stuff. However, for some reason, every time I created an authentication form, I didn't really feel the need to provide the user with the need to view their password while or after their input. Recently, I decided to integrate that option(feature I guess) and this is how I did it(more or less). I'll be using React Hooks, because, well, they're awesome and I kind of don't like writing classes.

Concept

The main concept behind pulling this off is one word actually, toggling. Basically, what we want to do is this, when the user clicks on a certain icon/field/element, we change the state accordingly such that if the input type is password, we show text and vice versa. To achieve this, we initialize two state variables, inputValue and isInputVisible. We then check the state(pun intended) of these variables and display based on that. Don't forget the state-changing functions or state-setters if you will. We name them setInputValue and setIsInputVisible respectively.

import React, { useState } from 'react';
import view from "./assets/eye-regular.svg";
import hide from "./assets/eye-slash-regular.svg";

function App(){
    const [inputValue, setInputValue] = useState(''); // boilerplate React stuff
    const [isInputVisible, setIsInputVisible] = useState(false);

    return (
        <div style={style}>
          <form method="post" style={form}>
            <div style={div}>
              <input
                type={isInputVisible ? "text" : "password"}
                id="passwordField"
                style={input}
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                placeholder="Password"
              />
              <span style={eye}>
                <span onClick={() => setIsInputVisible(!isInputVisible)}>
                  <img
                    src={isInputVisible ? hide : view}
                    alt="password-toggle"
                    style={img}
                  />
                </span>
              </span>
            </div>
          </form>
        </div>
    );
}

const style = {
  width: "100%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  height: "100vh"
};

const formStyle = {
  form: {
    display: "flex",
    flexDirection: "column",
    width: "80%",
    margin: "0 auto"
  },
  div: {
    position: "relative"
  },
  input: {
    outline: "none",
    border: "solid 2px var(--secondary)",
    borderRadius: "10px",
    padding: "15px",
    backgroundColor: "#ddd",
    fontSize: "20px",
    width: "100%"
  },
  eye: {
    height: "100%",
    width: "25px",
    position: "absolute",
    right: "10px",
    top: 0,
    borderRadius: "50%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  img: {
    height: "100%",
    width: "100%",
    cursor: "pointer"
  }
};

export default App;

## Explaining the code

Just to get it out of the way, I added some in-line styling to, you know, spice things up a little bit.

The magic is within the <form> tags. Inside the input tag, we have some stuff going on:

 <input
     type={isInputVisible ? "text" : "password"}
     id="passwordField"
     style={input}
     value={inputValue}
     onChange={(e) => setInputValue(e.target.value)}
     placeholder="Password"
     />

On the input type, we check if isInputVisible is true, if true, it means the user would like to view the password entered, we therefore change the type to text, else, we set the type to password, which is basically just a bunch of dots.

The value attribute is bound to state, which is modified by the next line onChange which modifies the state based on any change to the input element, in this situation, user input is the change. e.target refers to the input element, we then get the target's value.

We then have a span element, which just acts as the container to the image tag which contains the eye icon:

<span style={eye}>
    <span onClick={() => setIsInputVisible(!isInputVisible)}>
        <img
            src={isInputVisible ? hide : view}
            alt="password-toggle"
            style={img}
            />
    </span>
</span>

Inside the img tag, we change the source src based on the state of the isInputVisible variable. If the isInputVariable is true, we show the hide(eye with a slash) icon, else, we show the view(eye) icon.

This variable's state is modified with an onClick event to the span, parent of the img tag. onClick, the setIsInputVisible function returns the negation of the isInputVisible variable meaning if isInputVisible is true, it returns false and vice versa.

I have attached a link to view the entire code and its result, two of the MISSING imports can be found in the attached link.

https://codesandbox.io/s/muddy-smoke-shh2n?file=/src/App.js

How To Load Static CSS and JS Files in Next.js

Margai Wangara(he/him) — Sat, 21 Nov 2020 21:48:21 +0000

Recently I was working on a project that required conversion from a static HTML/CSS/JS theme to a Next.js application. I had done some hardcore React before so making a switch to Next.js wasn't that hard, it was pretty simple, to be honest, and I also wanted to benefit from the API routes availability and SEO advantages of using Next.js due to its server-side rendering capabilities. One of the issues I didn't take into consideration was the server-side rendering effect on normal js files execution. This ended up taking my entire week as I tried to figure out a way to integrate js files without painting my Chrome console red.

For me, this was a pretty straightforward situation, all I had to do was to import the css and js files into index.html file, but wait, Next.js doesn't have an index.html file. This was my first issue. Fortunately, after a little bit of research in the Next.js documentation, I figured it out(kind of). So, to import js and css files, it's pretty easy. In the pages directory, create a _document.js file and add the code below.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
            <link rel="stylesheet" href="styles.css"/>
        </Head>
        <body>
          <Main />
          <NextScript />
          <script src="main.js"></script>
        </body>
      </Html>
    )
  }
}

export default MyDocument

Note: To call the css and js as above, the files need to be available in the public folder on the root of the project.

The above code works as expected under normal circumstances. CSS files are rendered and work as expected, however, when using JS, since some properties such as window are only available on the client-side, it throws errors. I had this problem, particularly when trying to use owl.min.js and wow.min.js files for slideshows because they utilize window. The most common error I faced was the one below:

Warning: Extra attributes from the server: style in nav (at DefaultNavbar.tsx:38)

After a bit of research, I got a variety of solutions, which were really awesome and helpful, like checking if window exists inside the lifecycle method componentDidMount and then load the library, while this was helpful, I didn't know how I could load the static js files. So, after struggling for almost a week, I finally managed to load the js files without any errors as follows:

In the code above, while loading a js file, add the async={true} property which loads the script file when ready.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
            <link rel="stylesheet" href="styles.css"/>
        </Head>
        <body>
          <Main />
          <NextScript />
          <script src="main.js" async={true}></script>
        </body>
      </Html>
    )
  }
}

export default MyDocument

To learn more about Next.js _document.js, you can check out the documentation here

How To: Set Up Remote Redis on DigitalOcean And Use it on your Local Application

Margai Wangara(he/him) — Fri, 13 Nov 2020 18:00:47 +0000

Note: This configuration can be applied on any server running Ubuntu.

I was recently redesigning an app I developed a while ago with Node.js, React and GraphQL because, apparently, its design was "too stretched" and "didn't look so good" (I low-key agree). So, I dove into dribbble to look for an awesome design I could borrow. Sidebar: I really appreciate all the awesome open source designs created by the super talented UI/UX designers out there. After a bit of digging, I found a design by Ricardo Salazar. It was simple and easily implementable. With a few color changes, I managed to recreate the design and implement my React front-end using data from my GraphQL API.
During this process, I realized that to get the data I wanted, I needed to make a lot of requests to the external API I was using. Despite the API being free and without rate limits, I felt like I was abusing the resources that were provided. To solve this problem, I thought about using a database to store the data then performing the requests from my own server but I realized this would be highly inefficient due to the dynamic nature of the data from the external API. So, I decided to look at other options, that is when I remembered Redis.
I had done some storage with Redis before to perform authentication and session management with Express.js. After a bit of research, I came to the conclusion that redis was the way to go. Another issue was that, since I was using shared hosting with a cpanel, I could not install and use redis on my host. I had to find a way.
Then comes Github Student Pack. Github provides a bunch of resources to help students use services like DigitalOcean by providing coupons and other options. I highly recommend if for students getting into or already developing awesome stuff. I was able to get a coupon for $50 on DigitalOcean and set up my droplet. I also did the initial set-up which has been provided in detail in this article.

Installing Redis on a DigitalOcean droplet

To install redis, run the following commands


$ sudo apt update 
$ sudo apt install redis-server

This will download and install Redis and its dependencies. We will then make some modifications to the Redis config file to add authentication and secure our Redis database.

Open the config file by writing this command.

$ sudo nano /etc/redis/redis.conf

In the config file, we will locate and modify the following areas:

supervised
security
bind

Setting supervised to systemd

Locate the line which contains supervised option and change it to systemd

# If you run Redis from upstart or systemd, Redis can interact with your
# supervision tree. Options:
#   supervised no      - no supervision interaction
#   supervised upstart - signal upstart by putting Redis into SIGSTOP mode
#   supervised systemd - signal systemd by writing READY=1 to $NOTIFY_SOCKET
#   supervised auto    - detect upstart or systemd method based on
#                        UPSTART_JOB or NOTIFY_SOCKET environment variables
# Note: these supervision methods only signal "process is ready."
#       They do not enable continuous liveness pings back to your supervisor.
supervised systemd

Modifying Password

Since we need to set a secure password for the Redis, we will need to use openssl to generate a strong password. To generate a password, open a new tab on the terminal and run the command below.

$ openssl rand 60 | openssl base64 -A

The command above generates a strong password made up of random characters.

vWHK8OXixGiUU1kimf+Bo4WM+vu8t7Bpdk7VZHvtBc7caNeCDBK1Etazy/1Hho+/Uou4Mr1/gXk0hdNM

The security section of the Redis config file provides us with an area to specify the password of our Redis server. To set the password, in the config file, locate the security section and uncomment the #requirepass foobared then change the password from foobared to the password we generated above.

#/etc/redis/redis.conf

################################## SECURITY ###################################

# Require clients to issue AUTH <PASSWORD> before processing any other
# commands.  This might be useful in environments in which you do not trust
# others with access to the host running redis-server.
#
# This should stay commented out for backward compatibility and because most
# people do not need auth (e.g. they run their own servers).
#
# Warning: since Redis is pretty fast an outside user can try up to
# 150k passwords per second against a good box. This means that you should
# use a very strong password otherwise it will be very easy to break.
#
 requirepass vWHK8OXixGiUU1kimf+Bo4WM+vu8t7Bpdk7VZHvtBc7caNeCDBK1Etazy/1Hho+/Uou4Mr1/gXk0hdNM

Modifying bind

To make our redis database accessible, we will have to bind it to an external IP address which is not very secure. In this tutorial, we will bind it to 0.0.0.0 which makes it available everywhere

In the config file we opened above, locate the line below and make sure it is uncommented(by removing the # at the beginning if it exists) and change the IP address to 0.0.0.0.

#/etc/redis/redis.conf

bind 127.0.0.1 ::1 # change this line to bind 0.0.0.0

After modifying the config file, press ctrl+x on Windows or Linux or command+x on Mac then press y then enter to save the file then restart Redis by running the command below.

$ sudo systemctl restart redis.service

We can then test our Redis. To test the password, access the Redis command line by running:

$ redis-cli

We then write a series of commands to check if the Redis password works. At first, we try to set a key and value before authentication:

127.0.0.0:6379> set hello "Hello World"

This produces an error because we need to set the password:

#Output
(error) NOAUTH Authentication Required

We then specify the password we added above in the config file:

127.0.0.1:6379> auth <redis-password>

Redis will produce a message, OK, to inform you that the password has been accepted. We can then try to store the key and value as we tried above.

# setting value
127.0.0.1:6379> set hello "Hello World"

#getting value
127.0.0.1:6379> get hello

#output "Hello World"

We can then exit the Redis client with the command quit.

Using Remote Redis on your local Express Application

Note: If you are using a firewall on your DigitalOcean server, you need to enable access for port 6379 in order to use it on your local application. To enable the port for external access:

$ ufw allow 6379/tcp

#checking if port has been added to ufw list
$ ufw status

We then initialize a simple express app by installing a few packages.

# Initialize Express app
$ npm init -y

# Installing packages - Express and Redis
$ npm install express redis

Create an index.js file on the root of your project then write the code below:

const express = require('express');
const redis = require('redis');

const app = express();

// These should be environment variables, use a package like dotenv to store these data
const REDIS_PORT = 6379;
const REDIS_HOST = "<DO_IP_ADDRESS>" // This is the IP address of your DigitalOcean droplet
const REDIS_PASSWORD = "vWHK8OXixGiUU1kimf+Bo4WM+vu8t7Bpdk7VZHvtBc7caNeCDBK1Etazy/1Hho+/Uou4Mr1/gXk0hdNM" // This is the password we created above for our Redis database.

const redisClient = redis.createClient({
    host: REDIS_HOST,
    port: REDIS_PORT,
    password: REDIS_PASSWORD
});

// Log errors in case of Redis connection failure
redisClient.on('error', error => {
    console.log('Redis Error', error);
});

// Set Express server PORT
const PORT = process.env.PORT || 5000;
app.listen(PORT, () =>
    console.log(`App running in on port ${PORT}`),
);

With this, you can use the remote Redis to store and access your data.

To get more details on securely configuring Redis on your DigitalOcean server, you can check out the link below:

How To Install and Secure Redis on Ubuntu

Back To Basics: Git

Margai Wangara(he/him) — Thu, 12 Mar 2020 11:27:45 +0000

Personally, I believe that aspiring developers should learn git/version control before engaging into any kind of programming. Git is extremely important in programming. I remember when I was starting out, I had no idea what version control was. Infact, I only learnt about git about two years into my programming career (courtesy of Traversy Media's git course) and it was awesome.
Learning the basics of git is simple since to start out, one needs to only learn three commands.

Initialze a project as a git repository
Add files
Commit added files

Installation

Download git from here and install on your computer

Once git is installed, open the command line and type git then press enter. A long list of commands should be displayed.

Lets create a project and name it hello_world. Open the folder and git bash directly into it by right clicking and choosing Git bash here option from the dropdown list. Once the terminal is opened, type git init to initialize the folder as a git repository.

We can then add a file into the folder by typing touch index.html. This creates a html file. Open the html inside any text editor and add the following code (for testing purposes).


    <html>
        <head>
            <title>Hello World!</title>
        </head>
        <body>
            Hello World from Git!
        </body>
    </html>

Adding files to git

To add changed files to git,

To add a single file


    git add index.html

To add all files


    git add .

Commiting files

Commiting files provides a point of reference incase you want to revert your code to a certain point


    git commit -m 'Initial Commit'

The -m flag lets you add a message with your commit so as to understand what changes you made or files you added at that particular commit.

Ignoring files and folders

Git provides you with the ability to ignore files and folders that exist in your working folder which you don't want to add to your git repository. To ignore files and folder create a .gitignore file and add the name of the file or folder

In your terminal create a file and folder as follows

Creating a file


    touch ignorefile.txt

Creating a folder


    mkdir ignorefolder

Create a gitignore file to ignore the files and folders


    touch .gitignore

You can open the gitignore file with your text editor or edit directly from the terminal. To edit directly from the terminal,


    nano .gitignore

The command above opens the gitignore file in terminal, once the file is opened press i then write,


    ignorefile.txt
    ignorefolder/

Then press CTRL/Command + X to exit. Then press Enter.

The file and folder will be ignored anytime the git add . command is executed.

Incase of any error, please feel free to comment or constructively criticize.

Back To Basics: CRUD Operations with SQL

Margai Wangara(he/him) — Tue, 10 Mar 2020 19:46:34 +0000

I was recently going through my old projects trying to refactor them for inclusion into my portfolio website when I came across one of my first-ever full-stack projects. Back then, I mostly used structural PHP as my main back-end programming language. Being new to programming, I was excited, I mean, why not, programming is so cool. One of the best moments of my life was when I had my first programming 'aha' moment. It was amazing. Since then, I have created lots of projects, some finished, others unfinished, all with one goal in mind, building something.

Since I mainly used PHP (structural) for back-end, most of the time I wrote raw SQL queries, from database connections to creating tables and to be honest, it was quite refreshing. I gained a bunch of experience in SQL until I decided to shift to Node.js and the MERN stack for web development.

With the introduction of packages like Eloquent, it is easier to perform CRUD operation on a table without having any idea what happens under the hood. I decided to write this article to share my knowledge on the matter and in the process also remind myself how it actually works

For compatibility, I will use sqlfiddle to write the queries. Feel free to use any SQL editor. Possible options include XAMPP which comes with MySQL, Apache and PHP, VSCode's SQLite extension.

Creating a table


    CREATE TABLE IF NOT EXISTS users (
        id INT PRIMARY KEY AUTO_INCREMENT NOT NULL,
        name VARCHAR(50),
        surname VARCHAR(50),
        email VARCHAR(50) UNIQUE NOT NULL,
        password VARCHAR(255) NOT NULL,
        description TEXT NOT NULL,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    );

The code above creates a table called users if it does not exist and then adds columns as specified

Data Types

INT - Accepts whole numbers only.
VARCHAR - Accepts strings with length specified in brackets
TEXT - Accepts long string such as descriptions
TIMESTAMP - Accepts timestamps

Attributes

PRIMARY_KEY - Sets column as primary key
AUTO_INCREMENT - Increases column value by specified increment value, 1 by default
UNIQUE - Column stores unique values, like email, values that are not the same
NOT NULL - Required values
DEFAULT - Default column value such as CURRENT_TIMESTAMP - For the current date and time

C - Adding data to users table


    INSERT INTO users (name, email, password, description) VALUES ('John', 'Doe', 'johndoe@app.com', 'JohnDoe1', 'The name is Doe. John Doe');

Since we are using auto_increment, id is automatically added and incremented on addition of a new row, created_at and updated_at fields are also automatically filled because we set the default as current_timestamp.

R - Read data from users table


-- Select everything from users table
SELECT * FROM users;

-- Select some from users table
SELECT name, email FROM users;

-- Select from users table where
SELECT * FROM users WHERE email='johndoe@app.com';

-- Select from users table where ... and ...
SELECT * FROM users WHERE name='John' AND surname='Doe';

-- Select from users table where ... or ...
SELECT * FROM users WHERE name='John' OR surname='Doe';

Select has a variety of options. Where is used to select and filter based on specification.

U - Update existing data in users table


-- Update name to jane doe using email[unique]
UPDATE users SET name='Jane' WHERE email='johndoe@app.com';

-- Update email to janedoe using id[assume = 1]
UPDATE users SET email='janedoe@app.com' WHERE id=1;

D - Delete data from users table


-- Deleting entire table data[beware]
DELETE FROM users;

-- Deleting certain row data
DELETE FROM users WHERE email = 'janedoe@app.com';

When writing the delete query be careful not to delete all data from the table by using where. I remember messing up a lot when I was starting out.

Incase I wrote anything wrongly, feel free to constructively criticize in the comments section.

Simple GraphQL API with Express and MongoDB

Margai Wangara(he/him) — Sun, 12 Jan 2020 19:49:38 +0000

After learning GraphQL and building my first ever GraphQL API (check out https://twentyfourseven.margaiwangara.me for react app) by consuming the TMDB REST API using Express and creating an interface using React.js, I decided to challenge myself to see if I could utilize the same concepts and combine it with my knowledge of MongoDB and Express to create a database and perform a single CRUD operation. Finally, this is what I was able to achieve in a few minutes.

To run the app and try it out, check out the index file in my 'models' folder and add the MongoDB connection string.