DEV Community: Elizabeth Onyenekwe

The Use Of Data Transfer API In A Drag And Drop Project

Elizabeth Onyenekwe — Sun, 18 Sep 2022 22:20:31 +0000

The Data transfer API is a part of HTML5 Drag and Drop API and Clipboard events. It is used for interactions within a page and can be used to transfer data from the starting point(where the item is dragged from) to the endpoint(where the item is dropped).

The Data transfer API has 2 methods:

datatransfer.setData()
datatransfer.getData()
datatransfer.addElement()
datatransfer.clearData()
dataTransfer.setDragImage

In firefox browsers, there are customary methods for the Data transfer API. It includes:

moz.setDataAt()
moz.getDataAt()
moz.clearDataAt()
moz.TypesAt()

DataTransfer.setData()

When the dragStart event is called, this method can be used to set the data to the specified data and type. It accepts 2 parameters, a string representing the type of data to add to the drag object and a string representing the data to add to the drag object.

dataTransfer.setData(format, setData)

DataTransfer.getData()

This method retrieves drag data for a specified type. It accepts only one parameter and it is used with the following drag events: dragenter(), dragover(), dragleave(), drop(). The dragged data can not be retrieved by the source element.

dataTransfer.getData(format)

DataTransfer.addElement()

This method sets an element as a drag source. The element is added when the drag event and the dragend event is fired.

dataTransfer.addElement()

DataTransfer.clearData()

This method removes the data for a given type and can only be called when the dragstart event is fired. It has one optional parameter and if that parameter is specified, then only that type of data is removed else all the data types are removed.

DataTransfer.setDragImage()

By default, an image is created from the drag target when the dragstart event is fired but a custom image can be created by using this method. It accepts 3 parameters: the image element, the horizontal offset, the vertical offset.

dataTransfer.setDragImage(imgElement, xOffset, yOffset)

Properties Of The Data Transfer API

dropEffect
effectAllowed
files
types

Some specific properties in firefox browser includes:

mozCursor
mozItemCount
mozSourceNode
mozUserCancelled

DropEffect

This property specifies the type of drag and drop operation that is allowed and if the type of drag and drop operation isn't allowed, the dragged content won't be dropped. The value of the drop effect property also affects the style of the displayed cursor. The allowed types of transfer is specified in the dragstart event and modified in the dragenter and dragover event.

EffectAllowed

This property specifies the effect that is allowed during a drag and drop operation. This property should be set in the dragstart event to set the desired drag effect for the drag source. Within the dragenter and dragover event, this property will be set to whatever value was assigned during the dragstart event.

Files

The file property is a list of the files in the drag operation.

Types

This property returns a list collection that contains the available data formats for the first item of the current drag and drop operation.

Summary

For a clearer explanation on the Data Transfer API, see HTML Drag and Drop API.

Using Object.assign()

Elizabeth Onyenekwe — Sat, 17 Sep 2022 06:36:45 +0000

Recently, while working on a project, I encountered a situation where i tried to store an object in an array. After pushing that object into the array, I will return the value of the keys into an empty string. Pushing the object wasn't an issue as I used the spread operator and the push() array method and it worked. What I didn't notice was that I was making a reference to the object I was trying to push. So every time I made changes to that object, the members of the array changed too. Experiencing this bug, I understood the importance of Object.assign() and I decided to share. It might help someone who needs it too.

Object.assign() clones all enumerable properties of an object and transfers it into a target source. It invokes getters and setters thereby defining new properties in the target source.

Object.assign() is also used to merge object with same properties and the properties from the object which is cloned overwrites the properties in the target source which has the same key.

The syntax for using object.assign in your code is

object.assign(target, ...source)

After cloning or merging an object, it returns the target.

Error

A type error can occur if the property of the target source is non-writable.

Exceptions

An exception occurs if the properties of the target source are overwritten before the error is raised
Object.assign does not work on null or undefined source values.

Network Address Translation(NAT)

Elizabeth Onyenekwe — Sat, 14 May 2022 10:49:17 +0000

NAT is the process of mapping an internet protocol(ip) address to another so that a router can access resources outside a private network.

How Does NAT Work ?

NAT occurs between an internal IP and an external IP via a router.
A computer inside a network makes a request to a computer on the internet. Routers within that network recognise that the request is not for a resource inside the network so the routers act as agents between the public network and the private network, then sends the request to the firewall. The firewall sees the request from the computer within the internal IP, then makes same request to the internet using its own public IP address. The firewall then returns the response from the internet resource to the computer inside the private network.

Ways By Which NAT Can Map IP Addresses

From a local IP address to one global IP address.
Hiding an entire IP address space comprised of Private IP addresses behind a single IP address.
To a large private network using a single public IP address.
From a local IP address to a pool of public IP addresses.
From a global IP address to a pool of local IP addresses.

Types Of NAT

Static NAT: This maps a single unregistered IP Address with

a registered IP address.
Dynamic NAT: This translates an unregistered IP Address
into a registered IP address from a pool of public IP
addresses.
Reverse NAT: This allows users to connect to themselves
using the internet or public network.
Port Address Translation: It is also known as NAT Overload
or Port-level multiplexed NAT or Single Address NAT. In
this, many local(private) IP addresses can be translated to
a single registered IP address.
Overlapping NAT: This happens when two organisations whose
networks uses the same IP address merge or when a
registered IP address is assigned to multiple devices.

References

What is Network Address Translation?.CGP Holdings, Inc.14 May, 2022. https://whatismyipaddress.com/nat.
Katie Terrell Hanna. _Network Address Translation (NAT) _.[online]. TechTarget. 14 May, 2022. https://www.techtarget.com/searchnetworking/definition/Network-Address-Translation-NAT.

3.Network Address Translation. Avi Networks. 2022. 14 May, 2022. https://avinetworks.com/glossary/network-address-translation/#:~:text=Network%20Address%20Translation%20(NAT)%20is,private%20network%20a%20public%20address.

4.saurabhsharma56. Network Address Translation (NAT). GeeksforGeeks. 13 Dec, 2021. 14 May, 2022. https://www.geeksforgeeks.org/network-address-translation-nat/

Basic Linux Commands

Elizabeth Onyenekwe — Sun, 27 Mar 2022 20:47:03 +0000

Linux Shell Or Terminal

A shell is a program that receives commands from the user and gives it to the OS to process, and it shows the output. Linux's shell is its main part. Its distros come in GUI (graphical user interface), but basically, Linux has a CLI (command line interface). In this article, I am going to cover the basic commands that we use in the shell of Linux.

Basic Linux Commands

pwd: This command shows the current directory that you are in.

~$ pwd

ls: This command lists folders and files.

~$ ls

cd [dirname]: This command opens a folder on the system

~$ cd Documents

mkdir [dirname]: This command creates a folder.

~$ mkdir python-project

touch [filename]: This command creates a file.

~$ touch main.py

rm[filename]: This command deletes a file.

rm main.py

cd..: This command navigates up a directory.

cd..

rm -r [dirname]: This command deletes a folder

~$ rm -r python-project

cd /: This command takes the user to the root folder

cd /

clear: This command clears the terminal

~$ clear

cd [dirname]/[dirname]/[dirname]: This command lets you navigate down the directories to a particular folder.

~$ cd usr/local/bin

cd ../..: This command moves two hierarchies up the file system

cd ../..

cd ~: This command takes the user back to the home directory

cd ~

ls /[dirname]/[dirname]: This command lists all the files in the directory name after navigating to that particular directory.

ls /etc/network

mv[dirname][new-dirname]: This changes the folder name

mv web-application java-app

cp -r [dirname][new-dirname]: This copies the content of a particular folder into another folder.

cp -r java-app my-project

cp [filename][new-filename]: This copies the content of a file into another file.

cp readme.md readme-test.md

mv[filename][filename]: This changes the filename

mv readme.md readme-dev.md

ls -r [dirname]: This shows the entire content of that directory.

ls -r Documents

history: Gives a history of all past commands typed in the current terminal session

~$ history

ctrl + r: This key combination searches for the history of a command a user recently used.

ctrl + c: This key combination stops the current command that is running.

history[number]: This shows the last set of commands that were typed. The last set is determined by the number the user inputs.

history 20

ls -a: It shows all files including hidden files

ls -a

cat[filename]: This displays the file content

cat main.py

uname -a: This displays the system information and the kernel

~$ uname -a

cat /etc/os-release: This shows the version of your operating system

~$ cat /etc/os-release

lscpu: This shows the cpu information

~$ lscpu

lsmem: This displays the memory information

~$ lsmem

References

Basic linux commands for beginners by Alok Naushad " https://maker.pro/linux/tutorial/basic-linux-commands-for-beginners "
Techworld with Nana Devops Bootcamp

Linux File System

Elizabeth Onyenekwe — Fri, 25 Mar 2022 22:44:04 +0000

A Linux file system is a structured collection of files on a disk drive or a partition. Linux file system is generally a built-in layer of a Linux operating system used to handle the data management of the storage.

The Linux file system contains the following sections:

The root directory (/)
A specific data storage format (EXT3, EXT4, BTRFS, XFS and so on)
A partition or logical volume having a particular file system.

The Root Directory

In Linux, the file system creates a tree structure. All the files are arranged as a tree and its branches. The topmost directory called the root (/) directory. All other directories in Linux can be accessed from the root directory.

Some of the directories include:

/bin: It contains the most basic commands. It is available to all users on the system. It is written in the binary format and binaries are represented in 0's and 1's.
/sbin: These are system binaries. It needs a super user permission to execute them. It can't be executed with a normal user.
/lib: This hold the libraries for binaries.
/usr: This was the original user location before the home directory was added. It also has /bin folder, /sbin folder, and /lib folder. The duplication is due to the historic reason of how this was designed originally in unix. Basically, because of the limitation in storage, making the duplicate of these folder to increase the storage size. The limitation does not exist anymore but the concept is still implemented.
local: This is located inside the /usr folder. It also has /bin, /sbin, /lib folders. Third party applications installed goes into the local folder and the applications will be split into the different folders inside the local folder. Any application installed here will be used by the particular user who installed it.
/opt: External applications installed goes here. The difference between the /opt directory and the /usr directory is that the /opt directory does not split applications into different folder. All applications installed are in one folder. Any application installed here will be used by all users.
/boot: This is basically for booting the system.
/etc: This is where the system configuration is stored. Unlike other directories, this directory is not a read only folder, so the configuration can be changed or are writable.
/dev: This stands for devices. Devices connected to your computer will be stored here.
/var: When the operating system starts, it logs some data which are stored in this folder.
/tmp: This stores temporary files for different applications which will be deleted later.
/media: External media is mounted into this folder and this external media will also be referenced in the /dev folder.

These directories are not usually interacted with by the user manually, the operating system or the package manager tool will interact with the folder.

There are hidden files in the home directory that are not seen by default. To see them, you can activate it in the settings. Hidden files are also called dot files because the file names start with dot. They are used to store configuration options. They are automatically created files.

Features Of The Linux File System

Linux does not use the backslash () to separate the components; it uses forward slash (/) as an alternative.
In Linux, we cannot tell whether we are addressing a partition, a network device, or an "ordinary" directory and a Drive.
Linux file system is case sensitive. It distinguishes between lowercase and uppercase file names. Such as, there is a difference between test.txt and Test.txt in Linux.
In Linux, a file may have the extension '.txt,' but it is not necessary that a file should have a file extension.
Linux distinguishes between standard files and hidden files, mostly the configuration files are hidden in Linux OS.

Types Of Linux File System

Ext, Ext2, Ext3 and Ext4 file system
JFS File System
ReiserFS File System
XFS File System
Btrfs File System
Swap File System

References

Javatpoint, "https://www.javatpoint.com"
Techworld with Nana Devops Bootcamp

Server Virtualization

Elizabeth Onyenekwe — Thu, 24 Mar 2022 23:36:32 +0000

Server virtualization is the creation of a virtual version of an operating system, a server, a storage device or network resources.

Virtualization can be achieved using an "Hypervisor". Hypervisor is a technology that allows hosting several virtual computers on a physical computer. Hypervisors take some of the hardware resources from the physical computer to create the virtual computer.

The virtual computer can only be given the hardware resources that is available on that computer. These virtual computers are completely isolated from the physical computer and if anything is running or breaking on the virtual computers, it won't affect the main operating system.

Benefits Of Using Virtualization

Provides a cost effective way to separate email, database and web servers.
Expedited deployment and redeployment
Easier migration to the cloud
Reduced heat and improved energy savings

Types Of Hypervisor

Type 1 Hypervisor:This installs guest operating system directly on the hardware. They are also called "Bare metal hypervisors". It controls the hardware resources. E.g VMware, ESXi, Microsoft Hyper-v
Type 2 Hypervisor: This is the type of hypervisor that installs guest operating system on top of the host operating system. It is also called "Hosted hypervisors". It shares the hardware resources. E.g virtual box

Advantages Of Virtualization

Lower cost
Easier disaster recovery
Easier testing
Quicker backups
Improved productivity

USING NETLIFY FORMS

Elizabeth Onyenekwe — Mon, 10 Aug 2020 14:48:40 +0000

While hosting your frontend applications on netlify, you can permit your forms to be submitted on Netlify without using any backend or api for submission and with just a little code, netlify takes care of it all.

Form submission on netlify can be achieved by setting the form action to “POST” and adding a Netlify attribute called “DATA-NETLIFY” and setting this attribute to “TRUE”. Give a name attribute to your form and input fields so that Netlify can identify the fields properly. Deploy your form to Netlify and all messages sent through the form is displayed in the “RECENT FORM SUBMISSIONS” section.

Setting Notifications

You can also be notified of a recent form submission on your email by going to the settings section on Netlify, then clicking on the forms section and then form notifications. Click on the “ADD NOTIFICATION” button and save Email notification to receive emails notifying you of recent form submissions.

Code Sample

<form action="POST" name="contact" data-netlify="true">
  <div>
    <div>
      <input type="text" name="name" placeholder="Your Name" />
    </div>
    <div>
      <input type="email" name="email" placeholder="Your Email" />
    </div>
  </div>
  <div>
    <input type="text" name="subject"  placeholder="Subject" />
  </div>
  <div>
    <textarea name="message" rows="5" placeholder="Message"></textarea>
  </div>
  <div>
    <button type="submit">Send Message</button></div>
</form>