DEV Community: OdunayoO

What is AWS SQS (Simple Queue Service)?

OdunayoO — Mon, 23 Jan 2023 16:07:20 +0000

AWS SQS is a messaging queue service provided by AWS. Sometimes you can have many applications deployed on AWS, and with SQS you can easily communicate with your services.

These communications may be synchronous(where your applications directly communicate with each other) or asynchronous(where you can have a middleware that connects these applications)

Before we dive into the features of SQS, we need to understand some concepts.

Message: It is a blob that can contain any data
Queue: You can imagine a queue as a temporary house that allows you to store messages till the messages are processed and deleted.
Polling: This is a mechanism that can be used to receive messages from queues.
Producer: A producer sends messages to the queue. You can have one or more producers sending messages to the queue
Consumer: A consumer receives(polls) messages from the queue. You can have multiple consumers.

Features of AWS SQS

Visibility Timeout
When a message is polled and processed by the consumer, it remains in the queue and does not get deleted automatically. While the message is being processed, SQS will set a time during which the message because invisible to other consumers, to prevent them from receiving and processing the message. By default, the visibility timeout is 30 seconds, with a minimum time of 0 seconds and a maximum time of 12 hours.
Dead-Letter Queues
So what if a message is not processed within the visibility timeout? The message goes back into the message queue and is then retried to be processed until a maximum number is reached before it is then sent to the dead-letter queue. One useful thing about DLQs is that it allows you to debug your applications easily by isolating the messages that fail to be processed.
FIFO Queues
FIFO means First In First Out which is the order in which messages are being sent and received by the consumer. The FIFO queue supports up to 300 messages per second. If you're using FIFO queues, dead-letter queues can break the order.
Delay Queues
With delay queues, messages can be delayed before they are delivered. Any message sent to this queue would be invisible to the consumers for the duration of the delay period. By default, the minimum delay period is 0 seconds and maximum time of 15 minutes. Unlike the visibility timeout where messages are hidden until they are consumed, with delay queues the messages are hidden as soon as it is added to the queue.

SQS Hands-On

How to create an Amazon SQS queue from AWS console

on the console search for SQS
click on create queue
for the type you can choose the standard or FIFO queue, by default the queue is set to standard
enter a name for your queue
under Configuration, you can leave it as the default or set new values
by default AWS SQS manages server-side encryption. You can disable it or choose an encryption key
you can also choose who can access your queue. For the basic option, define who can send messages to the queue and who can receive messages from the queue. For the advanced option, the JSON object can be modified directly and custom actions can be set.
you can modify the redrive allow policy (optional)
you can also enable dead-letter-queue (optional) and lastly add tags(optional)
Finally, your queue has been created!!!

You can:

edit: modify queue
delete the queue
purge: delete all the messages created
send and receive message

How to send and receive messages

click on the send and receive message
enter your message in the message body

click on send message

scroll down to receive message
click on poll for messages

your created message should appear

click on the id to see more details about the message

after processing and receiving the message, you can delete it manually

Conclusion: When can you use SQS?

It can be used to decouple and scale services
Multiple SQS queues can be used to process messages in parallel
Together with AWS SNS(Simple Notification Service), SQS can be used for monitoring and creating alerts in your application

Regex: An intro

OdunayoO — Tue, 01 Feb 2022 12:56:07 +0000

What is Regex?

Regex is a shortened term for Regular Expression. Regex patterns are used to find, replace or search for text. These patterns may be difficult to read sometimes because they are composed of simple characters such as /code/ or a combination of simple and special characters, such as /code*s/ or /Number (\d+)\.\d*/.

Creating a regular expression in Javascript

You can create it with the RegExp object

const regexp = new RegExp('pattern', 'flag(s)');

or using the literal method

const regexp = /pattern/flag(s);

When can you use Regex?

Regex can be used to perform the following actions:

user input validation, e.g. password checker, email validation
finding a specific text from a large glob of text
searching for things that match a given pattern
transforming a text from one format to another

Regex Methods in Javascript

- `regexp.test(str)` method:

The test method allows you to search for a match between a regex and a string. It returns a boolean, true or false

const str = 'Hello World';
const regexp = /World/;
console.log(regexp.test(str)); // true

- `regexp.exec(str)` method:

While the test() method allows you to search if a pattern exists within a string, the exec() method will enable you to retrieve the actual match from the string.

const str = 'Hello World';
const regexp = /l/;
console.log(regexp.exec(str));

This would only return the first match.
[ 'l', index: 2, input: 'Hello World', groups: undefined ]

Searching with flags

Flags	Description
i	this flag allows all the search to be case-insensitive.
g	this performs a global search for all matches; only the first match would be retrieved if not used.
m	this allows multi-line search
s	this allows a `.` to match a newline character `\n`.
u	this allows you to use Unicode-related features.
y	this performs a "sticky" search that matches starting at the current position in the target string

An example:
Using the previous example, 'Hello World' would return true, but 'Hello world' would return false because of the case sensitivity of Regex. You can fix this with the i flag so that /World/i would return true for both strings.

const str = 'Hello World';
const str2 = 'Hello world';
const regexp = /World/i;
console.log(regexp.test(str)); // true
console.log(regexp.test(str2)); // true

Special characters

^ : matches the starting position within the string

const regexp = /^hi/;
console.log(regexp.test('hi')); // true
console.log(regexp.test('hello')); // false

$: matches the end position within the string

const regexp = /bye$/;
console.log(regexp.test('goodbye'));// true
console.log(regexp.test('welcome'));// false

| :or operator. matches previous character or next character

const regexp = /(hi|hello) world/;
console.log(regexp.test('hi world'));// true
console.log(regexp.test('hello world'));// true
console.log(regexp.test('bye world'));// false

+ : matches the previous element one or more times

const regexp = /groo+t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// true
console.log(regexp.test('grot'));// false

* : matches the previous element zero, one or more times

const regexp = /groo*t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// true
console.log(regexp.test('grot'));// true

?: matches the previous element zero or one time

const regexp = /groo?t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// false
console.log(regexp.test('grot'));// true

. : matches any single character

const regexp = /gr.t/;
console.log(regexp.test('grit'));// true
console.log(regexp.test('grot'));// true

[]: matches a range of characters

const regexp = /[cb]at/;
console.log(regexp.test('cat'));// true
console.log(regexp.test('bat'));// true
console.log(regexp.test('sat'));// false

{ x,y }: matches a specified number of occurrences of x up to y

const regexp = /gro{2,4}t/;
console.log(regexp.test('groooot'));// true
console.log(regexp.test('grot'));// false
console.log(regexp.test('groot'));// true

\ : used to escape a special character
(): groups characters

Resources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

Authentication vs Authorization

OdunayoO — Mon, 21 Jun 2021 22:33:00 +0000

As a developer, authorization and authentication are two terms that you might have come across. Although they are related, they mean different things, confusing if the basic idea is not well understood.

To define it, authentication answers the question, 'Who are you?' while authorization answers the question; 'What are you allowed to do?'.

Authentication can be defined as the process of verifying that the user is whom they say they are.

Some common examples of authentication are

password authentication
biometric authentication
multi-factor authentication

Authorization is the process of allowing users to perform specific actions based on the permission(s) they have. An example is a role-based authorization. Allowing different users to perform specific actions based on their roles; user or admin.

We can try to understand these concepts better with this scenario.

Before you board a plane, you have to show a means of identification along with your boarding pass to show that you are whom you say you are; this is authentication. The flight attendant verifies the details you give them, and then if it matches, you are allowed to board.
Once you have successfully boarded, you cannot tell the crew member you would like to fly the plane because you are not allowed to as a passenger. You do not have the permission and the authorization to do so. Only an authorized pilot can do so.

So this explains the difference between authentication and authorization.

React Context API with hooks

OdunayoO — Sat, 01 Feb 2020 21:41:24 +0000

What is Context API?

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Since release 16.3, React has had a stable version of Context API that can be used to easily share data across multiple components. It can be passed directly to the components that need it, thus preventing props drilling.

Check out the documentation on Context

Why use Context API?

Context is mainly used when you want simple state management. Context makes you avoid props drilling. In Context, you make the parent component a provider and define the child as a consumer that directly uses props from the parent rather than the passing of props through each child component that leads up to the component where it is needed

Basic example demonstrating usage

You can use context by:

Creating the context

First, create a new project with create-react-app.

npx create-react-app react-context-app

When the project is ready, we have to create a few files.

src/context/main.js
src/component/main.js

React Context is initialized with React.createContext top-level API

import React, { createContext } from 'react';

const AppContext = createContext();

createContext is used to initialize the React Context. It creates the context object with the Provider and Consumer component. It takes in a default value which can only be used when a component does not have a matching Provider above its tree

Providing the value of the context to the application

// src/context/main.js
import React, { createContext, useState } from "react";

const AppContext = createContext();
const AppContextProvider = ({ children }) => {
  let [state, setState] = useState({
    name: "Jane Doe",
    age: 20
  });
  const incrementAge = () => {
    setState(prevState => ({
      ...prevState,
      age: state.age + 1
    }));
  };
  const decrementAge = () => {
    setState(prevState => ({
      ...prevState,
      age: state.age - 1
    }));
  };

  return (
    <AppContext.Provider value={{ state, incrementAge, decrementAge }}>
      {children}
    </AppContext.Provider>
  );
};

export { AppContext, AppContextProvider };

consuming the value

// src/component/main.js

import React, { useContext } from "react";
import { AppContext } from "../context/main";

const AppComponent = () => {
  const { state, incrementAge, decrementAge } = useContext(AppContext);
  return (
    <>
      <div>My name is {state.name}</div>
      <div>my age is {state.age}</div>
      <button onClick={incrementAge}>+1</button>
      <button onClick={decrementAge}>-1</button>
    </>
  );
};
export default AppComponent;

In your App.js add the Provider to the app by wrapping it around the AppComponent

// src/App.js

import React from "react";
import { AppContextProvider } from "./context/main";
import AppComponent from "./component/main";
function App() {
  return (
    <AppContextProvider>
      <AppComponent />
    </AppContextProvider>
  );
}

export default App;

Voila!