DEV Community: Elijah Watson

HTML vs XML

Elijah Watson — Fri, 08 Dec 2023 19:32:24 +0000

What is HTML and XML?

HTML
HTML is short for HyperText Markup Language and is the basis for website building. It defines the structure of a website. It is often assisted by technologies such as CSS and JavaScript.

Here is an example of HTML

<!DOCTYPE html>
<html>
<head>
<title>HTML vs XML</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML was Developed by: WHATWG and W3C (World Wide Web Consortium).

XML
XML is short for Extensible Markup Language and is a file format for storing, transmitting, and reconstructing arbitrary data. XML is a markup language much like HTML. It was designed to store and transport data.

Here is an example of XML

<note>
  <to>HTML</to>
  <from>XML</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

XML was Developed by: W3C (World Wide Web Consortium).

So what's the Difference?

XML was designed to carry data - with a focus on what data is, while HTML was designed to display data - with a focus on how data looks.
HTML works with predefined tags like <p>, <h1>, <table>, etc. With XML, the author must define both the tags and the document structure.

Sources
W3Schools

Queue Data Structure

Elijah Watson — Fri, 03 Nov 2023 18:27:05 +0000

A Queue is defined as a linear data structure that is open at both ends and the operations are performed in First In First Out (FIFO) order.

Think of a Queue as a line at a store; the first person to get in the line is also the first person to get out the line.

Adding a value to a queue is 'enqueue' and removing is 'dequeue.'

Enqueue: Adds an item from the back of the queue.
Dequeue: Removes an item from the front of the queue.
Front/Peek: Returns the value of the item in front of the queue without dequeuing (removing) the item.
IsEmpty: Checks if the queue is empty.
IsFull: Checks if the queue is full.
Display: Prints all the items in the queue.

Queue is used when things don’t have to be processed immediately, but have to be processed in First In First Out order.
Queue can be used in several things like:

-Task Scheduling: Queues can be used to schedule tasks based on priority or the order in which they were received.

Resource Allocation: Queues can be used to manage and allocate resources, such as printers or CPU processing time.
Batch Processing: Queues can be used to handle batch processing jobs, such as data analysis or image rendering.
Message Buffering: Queues can be used to buffer messages in communication systems, such as message queues in messaging systems or buffers in computer networks.
Event Handling: Queues can be used to handle events in event-driven systems, such as GUI applications or simulation systems.
Sources:

GeeksForGeeks
FreeCodeCamp

HTML Forms

Elijah Watson — Fri, 13 Oct 2023 19:40:33 +0000

An HTML form is used to collect user input. The HTML <form> element creates an HTML form for user input. The <form> element is a container for different types of <input> elements, such as text fields, checkboxes, radio buttons, submit buttons, etc.

Using forms can be a good way to collect input data to use somewhere else.

Text Fields

The Description for <input type="text"> from W3 schools says:

"Displays a single-line text input field"

As shown here

 <h2>HTML Forms</h2>

    <form action="/action_page.js">
        <input type="text" id="fname" name="fname" placeholder="John"><br>
        <input type="text" id="lname" name="lname" placeholder="Doe"><br><br>
    </form>

The text field input type can be used to collect information like user names, passwords, etc.

CheckBoxes

The Description for <input type="checkbox"> from W3 schools says:

"Displays a checkbox (for selecting zero or more of many choices)"

As shown here

 <form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>

The checkbox input type can be used to make multiple-choice questions.

The basics of Bootstrap

Elijah Watson — Fri, 06 Oct 2023 19:41:07 +0000

Introduction

Bootstrap is a free, open-source front-end development framework for creating websites and web apps. It is used to make front-end development more consistent.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter in mid-2010 as a framework to encourage consistency across internal tools.

Buttons

One of the ways Bootstrap helps to make code more consistent is with its button component. Here's an example of said component.


            <div class="content">

                <div id="example">
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-secondary">Secondary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-light">Light</button>
                    <button type="button" class="btn btn-dark">Dark</button>

                    <button type="button" class="btn btn-link">Link</button>


                </div>

            </div>

Bootstrap button component
Here's an example of my attempt to make these buttons use basic HTML and CSS.

HTML

 <div class="content">

                <div id="interests">
                    <button type="button" class="btn" id="primary">Primary</button>
                    <button type="button" class="btn" id="secondary">Secondary</button>
                    <button type="button" class="btn" id="success">Success</button>
                    <button type="button" class="btn" id="danger">Danger</button>
                    <button type="button" class="btn" id="warning">Warning</button>
                    <button type="button" class="btn" id="info">Info</button>
                    <button type="button" class="btn" id="light">Light</button>
                    <button type="button" class="btn" id="dark">Dark</button>

                    <button type="button" class="btn" id="link">Link</button>
                </div>

            </div>

CSS

.btn {
            width: 75px;
            height: 30px;
            border-radius: 10px;
        }

        #primary {
            background: #0d6efd;
            color: white;
            border: #0d6efd;
        }

        #secondary {
            background: #6c757d;
            color: white;
            border: #6c757d;
        }

        #success {
            background: #198754;
            color: white;
            border: #198754;
        }

        #danger {
            background: #dc3545;
            color: white;
            border: #dc3545;
        }

        #warning {
            background: #ffc107;
            color: black;
            border: #ffc107;
        }

        #info {
            background: #0dcaf0;
            color: black;
            border: #0dcaf0;
        }

        #light {
            background: #f8f9fa;
            color: black;
            border: #f8f9fa;
        }

        #dark {
            background: #212529;
            color: white;
            border: #212529;
        }

        #link {
            background: transparent;
            color: var(link);
            border: transparent;
        }

It took me more lines of code to get a similar effect.
Bootstrap is a good way to shorten and keep code consistent.
Bootstrap's home page

A Moment about MomentJS

Elijah Watson — Fri, 29 Sep 2023 18:34:47 +0000

What is MomentJS?

MomentJS is a JavaScript package that makes it simple to parse, validate, manipulate, and display date/time in JavaScript. MomentJS allows you to display dates in a human-readable format based on location.

Features of Moment.js:

Parsing: You can parse the date into the desired format using parsing. Date parsing is possible in the string, object, and array formats. It allows you to clone a moment with the help of moment.clone().
Manipulation: We can manipulate the Date and Time on the moment object using inbuilt methods provided by Moment.js.
Date Validation: We can perform date validation using the isValid() method provided by Moment.js. It also has various parsing flags to validate dates.
Date Queries: It has various built-in methods to check if the date is greater than or less than the input provided.
Duration: It is one of the essential features that handles the time length for the given units.
Display: It provides us with different formats to display data in different ways like JSON, array, object, etc.

geeksforgeeks