DEV Community: Matthew Cullen

C# Constructor Overloading Example

Matthew Cullen — Tue, 08 Jun 2021 23:55:00 +0000

using System;

namespace LESSON2_ConstructorHandsOn
{
    class Program
    {
        static void Main(string[] args)
        {
            Owner momo = new Owner("Momo");
            Cat ownedCat = new Cat("Lennny", momo);
            Cat unownedCat = new Cat("Buddy");
        }
    }

    class Cat
    {
        public string Name { get; set; }
        public Owner Owner { get; set; }

        public Cat(string name)
        {
            Name = name;
            Console.WriteLine($"ADDED CAT: {Name}");
        }

        public Cat(string name, Owner owner)
        {
            Name = name;
            Owner = owner;
            Console.WriteLine($"ADDED CAT: {Name}, OWNER: {Owner.Name}");
        }
    }

    class Owner
    {
        public string Name { get; set; }

        public Owner(string name)
        {
            Name = name;
            Console.WriteLine($"ADDED OWNER: {Name}");
        }
    }
}

//// OUTPUT
//ADDED OWNER: Momo
//ADDED CAT: Lenny, OWNER: Momo
//ADDED CAT: Buddy

Read/Write to Files in C# with errorLogging example

Matthew Cullen — Tue, 08 Jun 2021 00:03:24 +0000

https://github.com/3Mustard/cSharpCliErrorLogger

Example of how to use ErrorLogger to write one or multiple errors to a file and display them in the console

string filePath = System.IO.Path.GetFullPath(@"..\logs.txt");
ErrorLogger eLogger = new ErrorLogger(filePath);

Error err = new Error();
Error err2 = new Error();
Error err3 = new Error();
err.Message = "new error message 1";
err.Date = DateTime.UtcNow.ToString();
err2.Message = "new error message 2";
err2.Date = DateTime.UtcNow.ToString();
err3.Message = "new error message 3";
err3.Date = DateTime.UtcNow.ToString();

List<Error> errors = new List<Error>();
errors.Add(err2);
errors.Add(err3);

eLogger.LogNewError(err);
eLogger.LogAllNewErrors(errors);
eLogger.DisplayErrorsToConsole();

C# Simple Event Handling Demo

Matthew Cullen — Thu, 03 Jun 2021 19:43:36 +0000

https://github.com/3Mustard/CSharpEventHandlingDemo

CRUD with C#/SQL in .NET Core

Matthew Cullen — Tue, 09 Feb 2021 21:57:16 +0000

Refer to the repo: HERE

SETUP:

~DataBase

The database for this example is the following

TABLE NAME: CrudAppUsers
Id int primaryKey
Username varchar(50)
Password varChar(50)

~Data Connection String

To get a data connecting string and access your data base do the following:

In Visual Studio go to View -> Server Explorer.
In Server Explorer window, Under Data Connections Select your Database. Right Click your Database -> Click Properties.
In Properties window you will see your Connection String

CREATE

SqlConnection cn = new SqlConnection(@"PUT DATA CONNECTION STRING HERE");
cn.Open();
string Username, Password, Id;
Console.WriteLine("Enter The id and the new username/password of the new user: ");
Id = Console.ReadLine();
Username = Console.ReadLine();
Password = Console.ReadLine();

SqlCommand cmd = new SqlCommand("INSERT INTO CrudAppUsers VALUES (@Id, @Username, @Password)", cn);
cmd.Parameters.AddWithValue("@Id", int.Parse(Id));
cmd.Parameters.AddWithValue("@Username", Username);
cmd.Parameters.AddWithValue("@Password", Password);
cmd.ExecuteNonQuery();
cn.Close();
Console.WriteLine("Success!");

READ :

~Select All

SqlConnection cn = new SqlConnection(@"PUT DATA CONNECTION STRING HERE");
cn.Open();
SqlCommand cmd = new SqlCommand("SELECT * FROM CrudAppUsers", cn);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);

foreach (DataRow row in dt.Rows)
{
  string Id = row["Id"].ToString();
  string Username = row["Username"].ToString();
  string Password = row["Password"].ToString();
  Console.WriteLine($"ID: {Id}, Username: {Username}, Password: {Password}");
  Console.WriteLine("-------------------------------------------------------");
 }

cn.Close();
Console.WriteLine("Success!");

~Select by ID

SqlConnection cn = new SqlConnection(@"PUT DATA CONNECTION STRING HERE");
cn.Open();
string Id;
Console.WriteLine("Enter The id of the user you wish to select: ");
Id = Console.ReadLine();
SqlCommand cmd = new SqlCommand("SELECT * FROM CrudAppUsers WHERE Id=@Id", cn);
cmd.Parameters.AddWithValue("Id", int.Parse(Id));
SqlDataAdapter da = new SqlDataAdapter(cmd); // pass select statement to the data adapter
DataTable dt = new DataTable();
da.Fill(dt); // use the data adapter to fill the empty data table
string Username = dt.Rows[0]["Username"].ToString();
string Password = dt.Rows[0]["Password"].ToString();
Console.WriteLine($"ID: {Id}, Username: {Username}, Password: {Password}");
cn.Close();
Console.WriteLine("Success!");

UPDATE

SqlConnection cn = new SqlConnection(@"PUT DATA CONNECTION STRING HERE");
cn.Open();
string Username, Password, Id;
Console.WriteLine("Enter The id of the user to update and the new username/password: ");
Id = Console.ReadLine();
Username = Console.ReadLine();
Password = Console.ReadLine();
SqlCommand cmd = new SqlCommand("UPDATE CrudAppUsers SET Username=@Username, Password=@Password WHERE Id = @Id", cn);
cmd.Parameters.AddWithValue("@Id", int.Parse(Id));
cmd.Parameters.AddWithValue("@Username", Username);
cmd.Parameters.AddWithValue("@Password", Password);
cmd.ExecuteNonQuery();
cn.Close();
Console.WriteLine("Success!");

DELETE

SqlConnection cn = new SqlConnection(@"PUT DATA CONNECTION STRING HERE");
cn.Open();
string Id;
Console.WriteLine("Enter The id of the user you wish to delete: ");
Id = Console.ReadLine();
SqlCommand cmd = new SqlCommand("DELETE CrudAppUsers WHERE Id=@Id", cn);
cmd.Parameters.AddWithValue("@Id", int.Parse(Id));
cmd.ExecuteNonQuery();
cn.Close();
Console.WriteLine("Success!");

C# Useful Array.Methods()

Matthew Cullen — Mon, 25 Jan 2021 00:04:55 +0000

Array.IndexOf()

returns index of item inside array
params: (array, value to find)

Example

var colors = new[] { "red", "green", "blue" };

var result = Array.IndexOf(colors, "red");
WriteLine(result); // 0

Array.Exists()

returns a boolean if conditions are met
params: (array, conditions)

Example

var colors = new[] { "red", "green", "blue" };

var result = Array.Exists(colors, color => color.Contains("green"));
WriteLine(result); // true

Array.Find()

returns the first item to meet a condition
params: (array, condition)

Example

var colors = new[] { "red", "green", "blue" };

var result = Array.Find(colors, color => color.Contains("green"));
WriteLine(result); // "green"

Array.FindLast()

Starts search from the LAST index
returns the first item to meet a condition
params: (array, condition)

Array.FindIndex()

returns the index of the element that meets the condition
params: (array, condition)

Example

var colors = new[] { "red", "green", "blue" };

var result = Array.FindIndex(colors, color => color.Contains("green"));
WriteLine(result); // 1

Array.FindAll()

returns array of all conditions met
params: (array, condition)

Example

var colors = new[] { "red", "green", "blue" };

var result = Array.FindAll(colors, color => color.Contains("r"));

foreach (var color in result) 
{ 
  WriteLine(color); 
}
// "red"
// "green"

Array.Reverse()

returns array with all elements in reverse order
params: (array)

Example

var colors = new[] { "red", "green", "blue" };

var result = Array.Reverse(colors);

foreach (var color in result) 
{ 
  WriteLine(color); 
}
// "blue"
// "green"
// "red"

Array.Copy()

copy elements to a new array
can specify how many elements to copy
params: (originalArray, copy, numberOfElementsToCopy)

Example

var colors = new[] { "red", "green", "blue" };
var colors2 = new string[colors.length];

Array.Copy(colors, colors2, 2);

foreach (var color in colors2) 
{ 
  WriteLine(color); 
}
// "red"
// "green"

Array.Sort()

sort the elements of an array
params: (array)

Example

var colors = new[] { "red", "green", "blue" };
Array.Sort(colors);

foreach (var color in colors) 
{ 
  WriteLine(color); 
}
// "blue"
// "green"
// "red"

Array.BinarySearch()

search a sorted array
returns the index of the found item
returns -1 if nothing is found

Example

var colors = new[] { "red", "green", "blue" };
Array.Sort(colors); // "blue", "green", "red"

var index = Array.BinarySearch(colors, "green");
if (index == -1)
{
  WriteLine("not found");
}
else
{
  WriteLine(index); // 1
}

Tracking a user's IP address through a hidden form field

Matthew Cullen — Tue, 10 Nov 2020 06:13:53 +0000

The script will make a call to an api that returns the clients IP address and then sets the hidden form field to the returned value.

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <form name="contact"  action="/form_submission_page.html">
      <input type="text" id="ipFormInput" hidden>
      <input type="submit" value="Send">
    </form>
  </body>

  <script type="application/javascript ">
    const ipFormInput = document.getElementById('ipFormInput');

    fetch('https://api.ipify.org?format=json')
        .then((response) => { return response.json() })
        .then((json) => {
            const ip = json.ip;
            ipFormInput.value = ip;
            console.log(ip);
        })
        .catch((err) => { console.error(`Error getting IP Address: ${err}`) })
  </script>
</html>

Developer Portfolio

Matthew Cullen — Tue, 10 Nov 2020 04:59:15 +0000

I made and deployed a portfolio today. It was made with html+css and deployed with netlify. Please check it out and share with anyone who is hiring.

https://www.matthewclc.com/

Using Open Graph Meta Tags

Matthew Cullen — Tue, 10 Nov 2020 04:25:37 +0000

og:tags

I use these to customize the content of previews when linking my websites on social media posts. See the image below for an example.

To change the content of these fields just add these meta tags in your Header. There are more but for this example I included the most common og tags.

<meta property='og:title' content='Title of the article'/>

<meta property='og:image' content='image url'/>

<meta property='og:description' content='Description that will show in the preview'/>

<meta property='og:url' content='URL of the content'/>

To learn more check out https://ogp.me/

JWT Authentication: MongoDB and Node.js

Matthew Cullen — Tue, 13 Oct 2020 06:18:46 +0000

Please note the README.MD for setup.
Requires a free MongoDB Atlas account for use.

JWT-auth-node-express-mongoDBAtlas

MERN Stack Middleware: Check if an :id is a valid Object type

Matthew Cullen — Tue, 13 Oct 2020 05:05:11 +0000

This middleware was made for MERN stack projects.

When performing a GET request on a route that takes an :id to return a single object from a collect it is important to handle cases where the :id provided does not represent a valid object in our database.

GET http://localhost:5000/api/post/5f85294e21fcef22fd5b8f78

Here is some middleware we can create to help us do that.

const mongoose = require('mongoose');

// middleware to check for a valid object id in the url
const checkObjectId = (idToCheck) => (req, res, next) => {
  if (!mongoose.Types.ObjectId.isValid(req.params[idToCheck]))
    return res.status(400).json({ msg: 'Invalid ID' });
  next();
};

module.exports = checkObjectId;

Now we can import checkObjectId and use it in any request that takes in an :id and return an object.

// IMPORTS
const express = require('express');
const router = express.Router();
// MIDDLEWARE
const checkObjectId = require('../../middleware/checkObjectId');
// MODELS
const Post = require('../../models/Post');

// @route    GET api/posts/:id
// @desc     Get post by ID
// @access   Public
router.get(
  // ROUTE
  '/:id',
  // MIDDLEWARE
  checkObjectId('id'),
  // CALLBACK
  async (req, res) => {
    try {
      const post = await Post.findById(req.params.id);

      if (!post) {
        return res.status(404).json({ msg: 'Post not found' })
      }

      res.json(post);
    } catch (err) {
      console.error(err.message);

      res.status(500).send('Server Error');
    }
  }
);

React/Firebase Image Upload Progress Bar

Matthew Cullen — Thu, 03 Sep 2020 04:51:56 +0000

Technology used: Reactjs, Google Firebase, Semantic-ui-react

topics covered

-state
-asynchronous requests
-error handling
-file uploads (images in this tutorial)
-custom components from semantic-ui-react to save time

The goal is to write code that enables a user upload an image file to Google Firebase and display the progress of the upload.
We will be using some custom components from semantic-ui-react to save time.

Step One ~ Setup a Component

Lets start with a simple class component that includes a form with a field for a file upload and a submit button.

import React from "react";
import { 
  Form, 
  Button, 
} from 'semantic-ui-react';

class ExampleForm extends React.Component {
    state = {
      file: null,
      errors: [],
      uploadState: null
    };

    render () {
      return (
        <Form onSubmit={this.handleSubmit}> 
          <Input
              onChange={this.addFile}
              disabled={uploadState === 'uploading'}
              name="file"
              type="file"
           />
         <Button>Post</Button>
        </Form>
      );
    };
}

export default ExampleForm;

We set a variable in state named 'file' set to null and on our inputs onChange we will build out the addFile()function next to store the file a user selects in 'file'.
I also want to disable the file selection when a file is being uploaded so I will add an uploadState value to state and set the disabled property on our input to be true when uploadState is equal to 'uploading'.
We'll build the handleSubmit() function later as well.
the errors array in state is an optional way to keep track of errors. See the uploadFile function below for use.

Step Two ~ addFile()

Lets build out the addFile function

addFile = event => {
  const file = event.target.files[0];
  if (file) {
    this.setState({ file });
  }
};

By passing the event object to our addFile function we can access an array of files attached to it. The image a user selects from clicking our input will be stored in the first index. Lets take this value and store it in our state under the value 'file'.

Step three ~ check file type()

Before we send our file lets make sure our user has actually selected an image file.
To check we have the correct file type lets add a new value to state, an isAuthorized function and import the 'mime-type' library.

state = {
  file: null,
  authorizedFileTypes: ['image/jpeg', 'image/png'],
  errors: []
}

import mime from 'mime-types';

isAuthorized = filename => this.state.authorized.includes(mime.lookup(filename))

isAuthorized will return true if the file type matches one of the strings in our authorizedFileTypes array we added to state.

Step Four ~ uploadFile()

Once we can confirm the file is an image we need a function to upload it to our destination. In this tutorial our destination is Google Firebase. [If you are unsure of how to connect an application to Firebase, I wrote a tutorial on how to do that Here.
I will be importing my unique Firebase config file below, this is where you would import your own unique Firebase config.]
The first step is to import firebase and add a reference of the storage in our Firestore to state. To track our upload lets add a value in state called percentUploaded and set it to 0.

import firebase from 'path in dir to firebase.js';

// state will now look like this
state ={
  storageRef: firebase.storage().ref(), // ADD THIS LINE
  percentUploaded: 0, // ADD THIS LINE TOO
  uploadTask: null // ADD THIS LINE TOO, SEE BELOW
  file: null,
  uploadState: null,
  authorizedFileTypes: ['image/jpeg', 'image/png'],
  errors: []
}

One more thing should be added to state and this is important to getting our progress bar to work later on. We need to add a key that will hold a task or changing value that we will attach a listener to. Lets call it uploadTask and set it to null.

I will show you the completed function then break down what is happening.

// uuidv4() generates a unique id
import uuidv4 from 'uuid/v4';

uploadFile = (file) => {
    // location in storage you want to create/send file to
    const filePath = `trades/images/${uuidv4()}.jpg`;

    this.setState({
      uploadTask: this.state.storageRef.child(filePath).put(file)
    },
      () => {
        this.state.uploadTask.on(
          'state_changed', 
          snap => {
            const percentUploaded = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
            this.setState({ percentUploaded }); 
        },
          err => {
            console.error(err);
            this.setState({
              errors: this.state.errors.concat(err),
              uploadState: 'error',
              uploadTask: null
            });
          },
          () => {
            this.state.uploadTask.snapshot.ref.getDownloadURL().then(downloadUrl => {
              console.log('this is the image url', downloadUrl);
              this.setState({ uploadState: 'done' })
            })
            .catch(err => {
              console.error(err);
              this.setState({
                errors: this.state.errors.concat(err),
                uploadState: 'error',
                uploadTask: null
              })
            })
          }
        )
      }
    )
}

let's break down what is happening.

this.setState({
      uploadTask: this.state.storageRef.child(filePath).put(file)
    },
      () => {
        this.state.uploadTask.on(
          'state_changed', 
          snap => {
            const percentUploaded = Math.round((snap.bytesTransferred / snap.totalBytes) * 100);
            this.setState({ percentUploaded }); 
        }

We first set the value of uploadTask to the return value of .puts(). This function returns a task which will constantly update until it is complete. The task is our files journey to storage.
Add a listener with .on() to this.state.uploadTask that listens to state changes. Remember this value in state is constantly changing due to .puts()
We get access to a snapshot of our value in uploadTask each time it changes. By accessing some keys associated with this snap shot we can calculate how much of the file has been transferred with Math.round((snap.bytesTransferred / snap.totalBytes) * 100) and set this value to our percentUploaded value in state.

err => {
            console.error(err);
            this.setState({
              errors: this.state.errors.concat(err),
              uploadState: 'error',
              uploadTask: null
            });
          },
          () => {
            this.state.uploadTask.snapshot.ref.getDownloadURL().then(downloadUrl => {
              console.log('this is the image url', downloadUrl);
              this.setState({ uploadState: 'done' })
            })
            .catch(err => {
              console.error(err);
              this.setState({
                errors: this.state.errors.concat(err),
                uploadState: 'error',
                uploadTask: null
              })
            })
          }
        )

the next line checks for errors and if any are found populates the errors array and resets our uploadTask/State. After that we have access to the uploaded images downloadUrl. Now is a good time to set our uploadState to done and clear the file from state. We can then catch any errors again and end our function.

We have now successfully taken an image from our computer and sent it to Google Firestore. But what about the progress bar?

Step Five Progress bar

lets create our own progress bar component and import semantic-ui-react's progress bar into it to customize. We will be passing two values from our first component to the progress bar.

import React from 'react';
import { Progress } from 'semantic-ui-react';

const ProgressBar = ({ uploadState, percentUploaded }) => (
  uploadState === "uploading" && (
    <Progress 
      className="progress__bar"
      percent={percentUploaded}
      progress
      indicating
      size="medium"
      inverted
    />
  )
);

export default ProgressBar;

In our main component lets import this progressBar and add it into our render function. Don't forget to pass uploadState and percentUploaded down as props.

import ProgressBar from 'dir of progress bar';

<ProgressBar 
  uploadState={uploadState} 
  percentUploaded={percentUploaded}
/>

Now as our file uploads we will see our progress bar fill up. The only thing left to do is tie it all together in our handleSubmit function and clean up our component's state and listeners.

Step Six ~ handleSubmit() and componentWillUnmount

handleSubmit = event => {
   uploadFile(this.state.file);
  };

componentWillUnmount() {
    if (this.state.uploadTask !== null) {
      this.state.uploadTask.cancel();
      this.setState({ uploadTask: null });
    }
  }

There you have it, an image upload and a % upload tracker. I hope this helps anyone working with Firebase and React.

Bonus error handling

lets make two functions to handle any errors we may encounter.
First give the our file input element a className equal to calling a new function we will setup called handleInputErrors. Pass this function our errors array from state and a 'keyword' to look for.

<Input
   className={this.handleInputError(errors,'file')}
   onChange={this.addFile}
   disabled={uploadState === 'uploading'}
   fluid
   label="File types: jpg, png"
   name="file"
   type="file"
/>

handleInputError = (errors, inputName) => {
    return errors.some(error => 
      error.message.toLowerCase().includes(inputName)
      )
        ? "error"
        : ""
  }

  displayErrors = errors => errors.map((error, i) => <p key={i}>{error.message}</p>);

The first function, handleInputError will check if we have an error in our array dealing with 'file' and if so our className will become 'error'. We can style the error class red so that when the className becomes error it will reflect that state to our user. Our last function displayErrors will just map over our errors array and display the message associated with each.

Fix slow compile time in Unreal engine

Matthew Cullen — Wed, 02 Sep 2020 02:29:46 +0000

Unreal engine version: 4.22

In your code editor go to the file Explorer tab and navigate to

/UE_4.22/Engine/Binaries/<depending on your system name may be different>Win64/UnrealHeaderTool.target

Open UnrealHeaderTool.target
Add a white space somewhere so you can save the file as if a change took place.
Compile in Unreal Engine. *The first compile after this fix may take awhile but subsequent compiles should be much shorter.