DEV Community: Matthew S.

Vim Basics

Matthew S. — Mon, 13 Mar 2023 05:00:18 +0000

If you're like me, you've probably used Vim in the past and didn't even realize it. Today I'm going to go over a basic overview of Vim, why it is used, some basic commands, and show you an easy way to try Vim out for yourself.

Brief Overview

Okay, so let's start off with what Vim is. Vim is a popular text editor that was first released in 1991 as a successor to the Unix editor, vi. Vim is also a modal editor, which means that it has different modes for navigating and editing text. The two most common modes are normal and insert mode. In normal mode, Vim allows you to move around and make edits to your document using a variety of keyboard shortcuts and commands. In insert mode, you have the ability to type text directly into your document. Vim also has other modes for performing tasks like searching and replacing text.

Why Is Vim Used

One of the main reasons people use Vim is for its efficiency. It has many built-in shortcuts and commands that allow you to navigate and edit text without having to take your hands off the keyboard or move your cursor around the screen. This can save you a lot of time and make you more productive.

Another great feature of Vim is its extensibility. There are many plugins available that can be used to extend Vim's functionality and make it even more powerful. For example, there are plugins for syntax highlighting, auto-completion, and integration with other tools like Git.

Vim is also highly customizable. You can customize its appearance, behavior, and keybindings to suit your own preferences.

Some Basic Commands

Vim gives you a large library of commands to use, but here I list what I think are probably the best basic commands to get started with.

esc:q!        Discards changes
esc:wq        Write/quit
x             Delete
dw            Remove word
d$            Delete to end of line
dd            Delete 1 line, can also use 2dd for 2 lines
p             Place deleted line
u             Undo
Ctrl g        Show file you are in
0             Start of line
gg            Start of file
g             Bottom of file
/+'word'      Search by word
n             Move to next word of search
=s/old/new/g  Substitute old word for new one globally
i             Insert mode

Where You Will See It

As I mentioned above in my opening paragraph, I had used Vim a few times before without even knowing it. Those time included when dealing with merge conflicts in my VS Code and also when having to edit a deployed instances code.

When it comes to resolving merge conflicts, you open a file that has merge conflicts in Vim, you can then type in comments in the command-line mode. You can then use Vim's editing commands to resolve the conflicts and save the file.

Vim can also be used to edit configuration files that are used for deployment, such as YAML files, JSON files, or script files. Vim's syntax highlighting and auto-indentation features can make it easier to edit these files and catch errors before they cause issues during deployment. Also, Vim's plugins can be used to integrate with deployment tools such as Git or other version control systems.

How To Try It Out

It is pretty easy to get started learning about Vim, due to their tutorial. If you want to check it out, simply type vimtutor in your terminal and the image below will pop up. From there the tutorial will guide you through some of the basic commands to get you started and that's it.

Conclusion

Vim has many features that make it popular due to its efficiency, simplicity, and availability. If you have the time, I do recommend trying out the tutorial and see if you like it. Besides, I'm sure you will eventually see Vim in the future if you are ever working with deployment or possibly merge conflicts like myself.

Sources

https://en.wikipedia.org/wiki/Vim_(text_editor)
https://www.vim.org/docs.php

Basic Introduction to PostgreSQL

Matthew S. — Mon, 27 Feb 2023 01:39:45 +0000

When speaking of relational databases, I was only familiar with using mySQL, until recently when I learned about PostgreSQL. Today I am going to talk about what PostgreSQL is, how it differs from mySQL, and how to get started with connecting PostgreSQL using Sequelize.

What is PostgreSQL

PostgreSQL is a relational database management system or (RDBMS), that is used for data storage, retrieval, and management in many applications. It is best known for its scalability, reliability, and features, which include support for complex data types, advanced indexing, and transaction processing.

PostgreSQL provides support for SQL (Structured Query Language), which is a standard language for managing relational databases. There are also several ORM libraries available for PostgreSQL, such as SQLAlchemy, Django ORM, and Sequelize, which let developers work with PostgreSQL databases in an object-oriented manner.

Main Features

Let's talk about some of the main features of PostgreSQL and what it has to offer.

ACID Compliance: PostgreSQL is ACID compliant, meaning that it ensures the atomicity, consistency, isolation, and durability of transactions.

Extensibility: lets users add new data types, operators, functions, and programming languages.

JSON Support: it has built-in support for JSON data types and provides a set of operators and functions for working with JSON data.

Concurrency control: uses a multi-version concurrency control (MVCC) system that allows multiple transactions to access the same data simultaneously without locking the database.

Security: includes a security model with features such as SSL/TLS encryption, role-based access control, and row-level security.

Indexing: provides a range of indexing options, including B-tree, hash, GiST, SP-GiST, GIN, and BRIN indexes.

Scalability: PostgreSQL can handle very large databases and support high transaction rates. It can also be used in clustered environments for horizontal scaling.

Difference between PostgreSQL & mySQL

MySQL and PostgreSQL are probably the most popular relational database management systems and do have some similarities. Here I take a look and see how they differ from each other. Here are some key differences between the two:

Data Type Support: PostgreSQL supports a wider range of complex data types such as arrays, and JSON, while MySQL has a more limited set of data types.

ACID Compliance: Both databases are ACID-compliant, but PostgreSQL is more strict in its adherence to the principles of acid compliance.

Performance: In general, MySQL is considered faster and more scalable for simple queries, while PostgreSQL is better suited for complex queries and data analysis.

Community: Both databases have large and active communities, but MySQL has a more widespread adoption in the web development community, while PostgreSQL is often preferred by enterprises and data analysts.

How to connect to PostgreSQL using Sequelize

For this example, I will show you how to connect using Sequelize. Once you import the module, you can create a new Sequelize instance and pass in the connection options.

const { Sequelize } = require('sequelize');

const sequelize = new Sequelize({
  dialect: 'postgres',
  host: 'your_host',
  port: 'your_port',
  database: 'your_database',
  username: 'your_username',
  password: 'your_password'
});

Test your connection by calling the authenticate() method on the Sequelize instance. Look at the example below.

sequelize.authenticate()
  .then(() => console.log('You connected successfully.'))
  .catch((error) => console.error('Unable to connect', error));

Conclusion

PostgreSQL is a popular choice for many types of applications, from small projects to large enterprise systems, due to its flexibility and extensibility. In the end, you should ultimately choose the database that best fits your needs, but if you are looking for a relational database that can handle complex data types, look into PostgreSQL.

Sources

https://en.wikipedia.org/wiki/PostgreSQL
https://www.postgresql.org/

Most Commonly Used React Hooks

Matthew S. — Mon, 06 Feb 2023 01:28:21 +0000

I recently learned about React and the great capabilities it offered when trying to build an application. Through my learning, I was challenged with the task of using React without using class components. I couldn't imagine how I would be able to do that, until I was informed about React hooks. Today I will talk about the three most common React hooks and how they eliminate the need for class components.

What are React hooks?

React Hooks are functions in React that let you add state and other React features to functional components. Hooks were introduced in React 16.8 and give another option instead of writing a class-based component in React.

Hooks make it easier to reuse existing code and manage the state of the application. Hooks also make it easier to understand how the state and other React functions and lifecycle methods are used in your components.

Most Used Hooks

While there are numerous React hooks, I am going to focus on what I think are the three most commonly used hooks. They are 'useState', 'useEffect', and 'useContext'.

These three hooks are pretty essential for building your web application in React. First I will explain them briefly, then go a little in depth with each one.

The useState hook allows you to add and use state in your components, while the useEffect hook lets you perform side effects. The useContext hook gives you access to context values in your components. Let's take a closer look at useState first.

'useState'

The useState hook helps to add and manage state on a functional component. The useState hook returns an array with two elements: the current value of the state, and a function for updating the state.

Below is an example on how to use the useState hook in React. First import useState, then set the two elements inside an array equal to the function with the option to pass in a default value for state. Here I am using the number zero, since I will be working with numbers in this example.

import { useState } from 'react';

const Component = () => {
  const[number, setNumber] = useState(0);
  return (
    <div>
      Pressed button {number} times
      <button onClick={ () => setNumber(number + 1)}>
        Press</button>
    </div>
  );
};

The number is a property on the state. I attached the function setNumber to a button, so that when the button is pressed the setNumber function will update the state by adding one to zero.

'useEffect'

The useEffect hook lets you run side effects in response to changes in state or props in functional components. The useEffect hook also takes two arguments: a callback function that contains the side effect code or logic, and an array that determines when the side effect should be run. The useEffect hook can be used for running side effects, such as making API calls, setting up event listeners, and updating the DOM.

In the example below, we import useEffect just like we did with useState. To keep it simple, I put in a console log, which will display the number that is currently on state. Now, notice in the array, I put in the number property from state. This means that the effect will run only if the number changes on state. A really cool alternative would be if I leave the array empty, useEffect would then only run on initial render, very similar to the lifecycle method componentDidMount.

import { useState, useEffect } from 'react';

const Component = () => {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    console.log(`Number: ${number}`);
  }, [number]);

  return (
    <div>
      You pressed the button {number} times
      <button onClick={ () => setNumber(number + 1)}>
        Press</button>
    </div>
  );
}

'useContext'

The useContext hook lets you get the values of a context in a functional component. It takes a context object as an argument and returns the current value of the context. It also makes things easier by getting access to context without having to pass the data down through multiple levels of components using props.

For the last example, we create a context using the createContext function and provide an object that is the initial state of the context. Then, use the useContext hook inside Component to subscribe to the context and access the values. Next, you can wrap the component that uses the context with a ThemeContext.Provider component and pass it the current theme value.

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext({ theme: 'light' });

const Component = () => {
  const { theme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <p>The current theme is: {theme}</p>
    </div>
  );
}

const AnotherComponent = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme }}>
      <Component />
    </ThemeContext.Provider>
  );
}

In Closing

So there you have it. These three essential React hooks not only eliminate the need for class components, but also make functional components more useful and give developers more tools to use on their tool belts. I am now looking forward to getting more experience with the other hooks React has to offer.

Sources

https://www.youtube.com/watch?v=d-aAs_4SQ7c

https://www.youtube.com/watch?v=dpw9EHDh2bM&t=1467s

Light Gun Tech - Old & New

Matthew S. — Mon, 19 Dec 2022 12:45:53 +0000

I often recall how much fun I had playing video games as a kid. Most of the time I would just be amazed at how these games were working. One accessory for video games that always baffled me was the light gun. I had no idea how when I pointed the gun at the screen, did the game know where I was pointing. Recently, I decided to finally look into how this light gun technology worked.

Early Video Game Light Guns

One of the earliest video game light gun was created for the Nintendo Entertainment System and called the Nintendo Zapper. The light gun was mainly made of plastic and had a cord which plugged directly into the game console. Inside the light gun, there are not as many parts as you would think. The device was mostly hollow, with two small weights inside to give the gun balance and a heavier feel. It also had a small circular clear lens at the end of the barrel and a photo sensor near the rear of the barrel.

How They Work

Before I tell you how they work, I feel it's important to tell you a little bit about another crucial part of using the light gun, the television in which you need to use the gun. In particular, I'm talking about the older CRT televisions. Without going to deep into how these tv's work, I will just say that if you are watching the screen, let's think of how an image is put on the screen. Imagine a small pixel or beam of light being put on the screen from the left side and sent to the right side of the screen. Now it moves so fast that our eyes can't see this process, but it keeps going until the image is rendered.

The Zapper light gun had a trigger, that when pressed, tell the game to to make the entire screen to turn black for just one frame. On the very next frame, the spot on the screen where the targets that you would shoot would be represented by a white box, however the rest of the screen would remain black. The photo sensor in the light gun then tries to detect the change in light levels to find the light. If you pointed at the light, the game registers a hit on that target. Keep in mind this happens so fast, it's nearly impossible to catch the process. All you are able to recognize is the the screen flash when you press the trigger.

Why Don't They Work Anymore

The advancement of televisions meant no more CRT televisions. The way that light guns worked, heavily depended on the speed at which the pixels were lit up. Newer televisions worked a little different than CRT's and had a bigger delay which would mess up the timing of using the light gun.

New Light Guns

Recently there have been a few companies who have created new light guns that would work differently than the older ones, in order to make them compatible with new televisions. They don't all work the same way, but I will mention two specifically. The first light gun called the Gun4IR, uses four sets of IR LED's which are strategically placed on the center of all four sides of your television or monitor. These IR LED's are used to help locate the positioning of where the light gun is pointed at the screen.

The second new light gun has a camera built in the gun instead of the normal photo sensor. This light gun was created by a company called Sinden and was introduced into the market not too long ago. This light gun requires a little more work to get the system going. The light gun is plugged into a computer which connects to your television. You must create a border on the television through your settings which let's the gun know where the playing field is located. Now because the light gun uses a camera, the lighting in the room you are playing could cause issues, especially if you are using bright LED lights.

Final Thoughts

With the quickly changing advancements in technology for televisions, I am glad that there are companies out there trying to bring great gaming technology up to the forefront.

Sources

youtube.com/watch?v=NuHoj4EljU
youtube.com/watch?v=hfo004_4xwU
youtube.com/watch?v=DzlPGpKo3Ag

Dialogue Systems in Video Games

Matthew S. — Mon, 12 Dec 2022 04:31:06 +0000

While I've always considered myself a casual gamer, I have been endlessly fascinated with how video games are created and what kind of systems are at work to make these games what they are. Today, I am taking a look into the dialogue systems in video games. I will talk about what they are, a little about how they work, and how much they have advanced.

Dialogue Systems

Dialogue Systems in video games usually contain what are referred to as conversational or dialogue trees. These trees refer to the interactions that a player has with a non-player character, or "NPC". The basic concept involves the player being given some choices of dialogue to say in the game. Based on that the choice, a new path opens up with a new set of choices and so on until the conversation has ended with that character.

History in Games

These conversation trees actually started in books, but made their way into video games in the later 80's and early 90's. A game that is considered to be one of the first to have a dialogue system is "The Secret of Monkey Island". The game was a point and click adventure styled game that included a very basic dialogue system where the player's choices of dialogue could often be repeated. The NPC would also repeat dialogue if approached and prompted to speak again. As technology advanced however, so did the dialogue systems.

Data Structures Used

As these dialogue systems became more complex, the use of multiple data structures became a necessity. Not only were data trees being used, but also graph data structures. The structure of the trees worked well with the progression of dialogue flowing in one direction from start to end. The graph structure gives more flexibility in not being one directional and allows for more complex dialogue flow in multiple directions.

Example of a tree data structure

Example of a graph data structure

Example of dialogue tree

Advancement & Complexity in Dialogue Systems

As mentioned previously, the advancement in technology has given game developers the ability to produce complex dialogue systems like we have never seen before. One example of such a dialogue system comes from a game by the name of "Hades". In this game, when players meet with the NPC's to have a conversation, there are no choices for the individual player to pick. The NPC will have a container programmed with a list of dialogue to start. Imagine a dice is rolled to choose which numbered dialogue to choose and the conversation starts. After that dialogue choice has been used, that choice is removed from the list as to not be repeated.

Now where this system really becomes interesting is with the addition of locked dialogue and a priority system. The locked dialogue may require the player to obtain an item or gear in order for the dialogue to become unlocked and selected. The system also incorporates a priority system that knows which dialogue selections are associated with pivotal moments in the game's story and thus require that dialogue to be selected before any other. Can you just imagine how complex the programming for all these events and systems that work together are? This matched with a script of over 300,000 words makes for one of the most impressive and advanced dialogue system to date.

The future of dialogue systems in video games is a bright one, and with constant advances in technology, I can only imagine how more advanced these dialogue systems can get.

Sources

https://en.wikipedia.org/wiki/Dialogue_tree
https://techdifferences.com/difference-between-tree-and-graph.html
https://www.youtube.com/watch?v=bwdYL0KFA_U

Facial Recognition Technology - A Brief Introduction

Matthew S. — Mon, 05 Dec 2022 01:38:49 +0000

Facial recognition has for the most part, been around for a long time. Many of us have seen it displayed in movies, and some of us use it in everyday situations, like when we use it to unlock our smartphones. Ever wonder what facial recognition is and how it works? I'll go over the basic concepts of what it is, how it works, and how the technology is currently being used today. I will also cover the issues and growing concerns the public has about its use.

Facial Recognition

Facial recognition is a way that biometric software scans an individual's facial features and stores it as data. Facial recognition technology uses that biometric software to compare those facial features to a database of videos or pictures.

How the Technology Works

You might be wondering how facial recognition technology actually works. We can pretty much breakdown the process into some simple steps without going into too much detail. First off, we need to start with a photograph or picture. The biometric software takes that photograph and breaks it down into many sections or blocks. You can think of it like a square grid. It then runs an algorithm on those blocks or grid to determine if there is a face in the picture. The software compares multiple conditions including if one block is darker or lighter than the other.

Once a face is confirmed, the software measures the many facial features of that face. I like to think of it as playing a game of connect the dots, but on your face. These measurements could include the distance between the eyes or the distance between the chin and forehead just to name a couple.

All those measurements are then converted into a mathematical formula which gives the image a sort of unique facial identifier or signature.

The facial identifier is compared to a database of photographs and videos. The software looks through these images, which are usually collected from the internet or public files, to find a match.

The Many Ways It Can Be Used

One of the more popular ways facial recognition is used is for authentication purposes. Phones now have the software that allows users to scan their face while setting up their phones just like you would a password. The users only have to look at their phone's camera in order for the screen to be unlocked. Some phone applications have also adopted the technology as a way to bypass the steps of putting in a username or password.

Law enforcement has used Facial recognition to assist with their investigations. Specifically, facial recognition has been used to help in the search of missing persons and when law enforcement is looking for suspects of various crimes.

Facial recognition can be found in some airports where they use it for security and efficiency. The technology could identify criminals or terrorists due to having access to a large database.

In the retail industry, some companies have used facial recognition to help better serve customers and give them a better experience. One example includes a bar that uses facial recognition to hold information of that customer's favorite drinks and menu items. When the customer arrives at the bar, the staff could immediately inform them of menu recommendations based off of previous orders.

Concerns

All the things I mentioned above about the capabilities of the technology sound pretty great, right? Well, as advanced as the software and tech may be, there are some privacy and ethical concerns related to the use of the technology.

Remember that the software compares a facial signature to a database of videos and pictures. That database is made up of images gathered from the internet and public files. Most of this facial data can be collected without the individual's permission and the lack of regulations on the technology has just added to the public concern.

The accuracy of the technology also comes in question when related to use by law enforcement. Studies of the technology's use have revealed facial recognition software produces more errors and false positive results when trying to read darker skinned individuals.

These rising concerns and public pushback have caused some facial recognition software companies to restrict access of who can use their software.

Final Thoughts

Facial recognition technology has come along way since its origin, and I have no doubt will become more prevalent in years to come. While I know the technology has room for improvement, the possibilities the software can provide could help in numerous industries such as healthcare, security, transportation, and retail. We just need to wait for the laws and regulations to catch up with the technology to keep it safe for all.

Sources

Forbes
https://youtu.be/O7nb-8BtMl0

Interesting Engineer
https://youtu.be/YX8BzK_LU0E

Computerphile
https://youtu.be/uEJ71VlUmMQ

Brief Intro to the Variable Keywords in Javascript

Matthew S. — Fri, 07 Oct 2022 14:09:42 +0000

In Javascript, there are three different variable keywords, which include var, let, and const. Each variable keyword acts differently, so it is important to know how they will affect your code.

Var

When declaring a variable using the var keyword, it makes a global scoped variable. Global scoped variables can be accessed throughout your code due to hoisting. Var declared variable can also be reassigned new values.

var name = 'Jack';

function printName() {
  console.log(name);  // accessing global var name
}

printName(); // 'Jack' will be logged to the console

Here we reassign the var name to be a different value:

name = 'Gracie';
console.log(name); // 'Gracie' is now logged to the console

Let

Unlike var, let is a block scoped variable, meaning when you declare a variable using let, that variable cannot be accessed out the block of code where it was created. The only way you could access that variable, is if it was put in the global scope of your code. The let keyword however can be reassigned a new value.

Variables assigned with let cannot be accessed if put within a block of code:

let x = 20
if(x > 10) {
  let message = 'greater than 10';
}
console.log(message); // ref error: message is undefined

They can be reassigned though:

let y = 30;
y = 5;
console.log(y); // 5 will print to the console

Const

The const keyword is also considered a block scoped variable, but variables declared with const cannot be reassigned a new value.

Trying to assign a new value to a const variable will give the following error:

const number = 50;
number = 100; // typeError: assignment to constant variable

Know which to use

It is important to understand when to use each of these keywords because they act so differently from one another. It is now more common practice not to use the var keyword, due to it being globally scoped along with the possibility of accidentally reassigning a variable. If you want to be able to reassign a variable, you can use the let keyword, otherwise use const. Even though both of these keywords are block scoped, you can always just put the variables in the global scope of your code to make them globally accessible.

Even though the concepts and examples shown here are very basic, it is good to get a grasp of the fundamental traits and characteristics of the these three variable keywords and understand when each should be used.