DEV Community: Code Drug

Linux Process Management - The Easy Way

Code Drug — Tue, 20 Feb 2024 15:36:21 +0000

A Linux process is an instance of a program in execution. When you open an application or run a command on your Linux system, a process is created to carry out that specific task. Each process operates independently with its own set of resources, including memory, CPU time, and open files.

Each process has a process id also called as PID
Every process has a parent process called as PPID

Child process is often started by the parent process

init process (runit,systemd,openrc,s6,dinit) have PID as 1, i.e it is the first process that boot your Linux system. If you don't know about what init in your system it's systemd

When you want a process to die you can kill it.

Process that starts at system startup and keeps on running forever are called daemon. The daemon never dies

When a process is killed but it is still showing up in the system then that process is known as zombie. You can't kill zombie coz they are already dead Zombie processes never occupy the resources like CPU or RAM, only an entry remains in the process but these process are already killed.

Syntax

ps [options]

options we will check in a while. But what if we just type

ps

We will can see two processes one is current shell and another one is the ps command itself that we just entered.

PID is the process ID (every process has unique id)
TTY is the terminal type of user logged into.
TIME is amount of CPU in min and sec that process has been running.
CMD is name of the command that launch the process

To check the process id of your shell

prints the PID of your shell

echo $$

prints PID with the process name

ps -C bash

Print the process id of the parent

echo $PPID

Not only print the process id of current shell, but the process id of it's parent as well.

echo $$ $PPID

first id is current and second id is parent id

Check the level of the shell

echo $SHLVL

3 is the level of the shell

The parent will always have less number as PID, coz parent came first. (parent will start the child process, so always the PID of parent is less in number.)

pidof command

Find the process ID of a running program

pidof bash

Remember we discussed about init process that PID is 1 as it is the first process executes when we power on the machine, in my case i am running runit as my init , in your case it will be systemd

pidof runit

When a process starts another process in two phases First the process create a fork of itself then a identical copy, then the fork process executes and exec to replace fork process with the target child process.

IK, lol we will see what that even mean with that following example

In bash shell

echo $$
echo $$ $PPID

Switch to zsh or any other shell

echo $$
echo $$ $PPID
exec bash
echo $$ $PPID

To see all the processes in system

ps fx

PID : Process ID
TTY : Terminal from where the process has started
STAT : State and Signals (High/Low priorities,Stop/Idle conditions)
TIME : Time
COMMAND : The command for which that process has started

To check a particular process

ps fx | grep bash

With some options

ps -ef

We will see output in different format

Get the process id

Directly grep the process

pgrep bash

We can even see the processes in tree format.

To check the process in tree format

Process there child along with how many processes in tree format

pstree

Now, let see with p option

pstree -p

option -p will show the PID with tree format

To check the process with respect to user

For which user,which process is running

pstree -p -u username

-p option means the PID
-u option means the user

Check the details of particular process

sleep process will run on background

sleep 200 &

-p option means PID, -s option means process and the number is the PID of sleep which is running on background

pstree -p -s 8379

ps -C sleep

To kill the process

kill 8379

Now, if we check the state of that process

ps fx | grep 8379

D : uninterruptible sleep (usually IO)

R : running or runnable (on run queue)

S : interruption sleep (warning for an event to complete

T : stopped, either by a job control signal or because it is being traced

W : paging (not valid since the 2.6.X.X kernal)

X : dead (should never be seen)

Z : defunct (zombie) process, terminated but not repead by it parent

I : idle state

Here are the different values that the s, stat and state output specifies (header "STAT" or "S") will display to describe the state of process

For BSD formats & when the state keyword is used,additional characters may display

< high priority (not nice to other user)

N low priority (nice to other users)

L has pages locked into memory (for real-time & custom IO)

s is a session leader

l is multi-threaded (using CLONE_THREAD, like NPTL thread)

is in the foreground process group

Kill process

sleep 80 &

jobs

ps -C sleep

kill 9439

jobs

Signals in kill command

There are many signals in kill, to list all

kill -l

By default kill means kill -15

Let, us see the most used signals one by one

1 SIGHUP : The process should re-read it's configuration file.

kill -1 1

This command will re-read init (runit in my case) conf. file

15 SIGTERM : When we run kill command that means kill -15 (standard kill)

sleep 100 &

kill -15 10386

or kill 10386

ps -C sleep

When we kill some process normally, few process did't got killed. So, we kill them from kernel itself.

9 SIGKILL : To kill the process from kernel (sure kill)
The kernel will shoot down the process and as a developer you have no means to intercept a kill -9 signal

sleep 120 &

kill -9 10572

ps -C sleep

In TTY we can see Killed , Terminate and Killed are not same

Now, it's not so much in use but in case you have to see the system calls

It, may not installed by default in some distros

strace

sleep 120 &

strace -p 7430

kill -9 7430

strace -p 7430

18 SIGCONT : To start any process
19 SIGSTOP : To stop the process (we can resume it later)

sleep 280 &

process stopped

kill -19 10744

process started

kill -18 10744

ps -C sleep

Kill a process it's name (pkill)

sleep 160 &

sleep 280 &

pkill sleep

jobs

ps -C sleep

No sleep processes running all sleep process are killed

Kill Multiple processes (killall)

sleep 120 &

sleep 200 &

In new terminal

top

killall sleep top

That's all you need to manage Linux processes :)

Vim

Code Drug — Sun, 11 Feb 2024 17:29:42 +0000

Vi Improved, a programmer's text editor

To open a file, type vim followed by the file name in terminal.

vim file

Modal Mindset

Unlike your typical text editor, Vim operates in different "modes." This might seem daunting at first, but mastering these modes unlocks its true potential.

Normal Mode: Your command center. Move the cursor, navigate text, issue commands with keyboard shortcuts. Think of it as your spaceship's bridge.
Insert Mode: Where you type like usual. Imagine yourself at the helm, crafting your code or text.
Visual Mode: Highlight and manipulate text blocks like a Jedi wielding a lightsaber.

Essential Navigation

Cursor Movement: h, j, k, l: Left, down, up, right (more ergonomic than arrows).
Jumping Around: /pattern: Search for text and jump to its first occurrence. n: Repeat search in the same direction.
Going Places: G: Jump to a specific line number. gg: Go to the very beginning. G$: Go to the very end.

Now, as we know Vim has multiple modes to start editing your file you need to be in insert mode. By default when we open vim it's always in normal mode.

To switch to insert mode press

As we switched to insert mode now,we can type and it will be visible.

To go back to normal mode press

Esc

Exit Vim

Haha,no need to terminate or kill the process :V

First thing first, make sure you are in normal mode.Then you need to press : followed by

Save and exit

:wq

Exit without saving

:q!

Great it's not that hard to exit right. So, now try to open vim and write some random paragraph. Lazy you could use Lorem too.

Let's now see how to navigate.

Here, we have two paragraph in this file.Again we need to be normal mode to navigate.

To jump to the last of the line

Shift + g

To jump to the top of the file

gg

Find

To find something in file, make sure you are in normal mode.

/word

For next (same word can be repeated multiple times in the file)

That's not all.

We can even search in reverse direction (bottom to top)

?word

For next

If the cursor is in the word you want to find.

In forward direction(asterisk)

In Reverse direction direction(hash)

Replace

Replacing a word in the file.

So, we need to substitute word1 with word2 globally

:%s/word1/word2/g

In the above image all the string will be replaced with character

Undo

To undo the last changes made

:u

Redo

To Redo the changes

Ctrl + r

Editing

In Normal mode to start editing in next line

To start editing on line above the cursor

Shift + o

To start from the start of the line if cursor in b/w the line.

Shift + i

To start editing from the end of the line

Shift + a

Delete

To delete a character where cursor is present
small

To delete a line
twice

dd

To replace a single character
small

Delete multiple lines

In normal mode make sure the cursor is on the line from where you want to delete

Let's say you want to delete 10 lines

10 dd

To undo all the changes

:e!

Copy/Paste

To paste cut/copied text

To paste above the cursor

Shift + p

In copy/paste section we will see the visual mode sit back and focus.

Haha, now let's see...

To select whole line

Shift + v

Okay,but how to select what we need huh???

To select what we need we need to go in visual mode how you ask

Yes, that's it just press v and the best part is using the arrow keys you can even select up,down,left,right

Now after selecting

To copy_(yank)_ the selected text

To paste press p and it will get pasted.

Remember dd command it used to cut it will be your clipboard, it can be paste by hitting p

Misc

Line Number

To print the lines numbers in file

:set nu

To remove the line numbers

:set nonu

This serial line numbers you can enable an disable as you wish.

Syntax Highlighting

This is for Programmers to turn on the syntax highlighting feature, it's possible.

Turn on color coding

:syntax on

Turn off color coding

:syntax off

Jump to given line

Turn on your line numbers, suppose you want to jump to 20th line

:20

Working with Multiple files

To read multiple files at once

vim -o file1 file2

To switch between files opened
Press twice

Ctrl + w

Compare two files

Side by side difference with highlighted changes

vim -d file1 file2

Time to practice and flex

DevOps Jargons

Code Drug — Tue, 06 Feb 2024 16:35:05 +0000

Provisioning - Server is ready with OS, Software and Networking
Deployment - Adding or upgrading software on server
Orchestration - Coordinated operations on multiple systems.
When there is multiple server the coordination between them is orchestration.
Configuration - Managing server config via files such as ram, space, dependencies etc.
Imperative procedural - Commands to produce desired state.
Declarative procedural - Desired state is defined and tools will achieve it.

Let's say a software need 'x' amount of resources with 'y' port open to run.To achieve this we have two approach Imperative and Declarative. In the imperative approach we write instructions and the (cloud) API is called to achieve our requirements. Where as in declarative approach, we say i need this certain infrastructure,now how you can achieve it not my concern (you may run a code endlessly or hit APIs) Eg:- Terraform tool

Idempotent - Repeat execution and same result
When we executing it no matter how many times,will get same result
Blue Green Deployment - Identical deployment ,used as switch.

Almost 100% uptime is achieved

Two server all of the traffic pointed to S1 what happens is when there is new updates pointed to S2 one called blue one called green, so people are visiting on S1 therefore update is pushed on S2, after verifying all the things are working the point shifts S1 to S2 and S2 became the main server.And then new update we can push to S2

Continuous Integration CI - Build and unit test at every checking.
No matter what code you have written check it's integrity/integration with the existing software in your machine) it does't mean jenkins,puppet it does not means anything else.
Continuous Delivery - Deploy on production live environment at every checking.
Supports continuous delivery i.e in the small batches shipment should be released out to the users of the software,so that in case there is a bug or fix we can rollback and get it fixed_
Continuous Deployment CD - After unit testing, deploy changes to production in small batches.
In small batches push out your code to the end user,so that everything is going on smoothly

Master the Art of Specificity - CSS Selectors

Code Drug — Thu, 25 Jan 2024 13:39:01 +0000

Universal Selector

It's a CSS selector that matches all elements on a web page, regardless of their type, class, or ID.Represented by a single asterisk symbol (*)

SYNTAX

* {
  property: value;
}

EXAMPLE

* {
  font-family: Arial, sans-serif; /*Setting a base font for all elements*/
}

Individual Selector

Targets elements based on their HTML tag name.

SYNTAX

element-name {
 ...
 }

EXAMPLE

p {
  background-color: #d1ea76; /* All paragraphs will have this background color */
}

h1 {
  font-size: 2rem; /* All headings of level 1 will have this font size */
}

Class and ID Selector

Class Selector: Target multiple elements that share common styles.Useful for styling groups of elements with similar formatting.Can be applied to any number of elements.

SYNTAX

.class-name {
 ...
 }

EXAMPLE

<p class="highlight">This paragraph will be highlighted.</p>
<h2 class="highlight">This heading will also be highlighted.</h2>

.highlight {
  background-color: yellow;
}

ID Selector: Target a unique, single element on the page.Should only be used once per page.More specific than any other selector.Ideal for targeting specific elements for unique styling or JavaScript interactions.

SYNTAX

#id-name { 
... 
}

EXAMPLE

<header id="main-header">This is the main header.</header>

#main-header {
  background-color: blue;
  color: white;
}

And Selector (chained)

Chained selectors increase specificity, allowing you to create more precise targeting rules.They can be used to target elements based on their nesting structure, their combination of classes, or their relationship to other elements in the document.It's essential to use them carefully to avoid unintended style conflicts or overly complex CSS rules.

SYNTAX

selector1 selector2 selector3 {
  /* styles to apply to elements matching all selectors */
}

EXAMPLES

Targeting elements with multiple classes

<li class="bg-black text-white">item1</li>

 li.bg-black.text-white {
        background-color: #000; /* /* Targets elements with both classes "bg-black" and "text-white" */
}*/
        color: #fff;
      }

Combining element, class, and ID selectors

ul li.active a#main-link {
  text-decoration: underline; /* Targets links with ID "main-link" within active list items within unordered lists */
}

Targeting elements within a specific section

#main-content p {
  font-size: 16px; /* Targets paragraphs within the element with ID "main-content" */
}

Combined Selector

Combination of properties and separated by comma's

SYNTAX

property,property{
...
}

EXAMPLE

  span, li {
        background-color: #86673e;
      }

Inside an Element

Select elements that are descendants of other elements, regardless of their nesting level.

SYNTAX

ancestor descendant {
 ...
 }

EXAMPLE

<div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li> 
        <li>highlight me</li>
      </ul>
    </div>
/*Both <li> will be get background-color, as <li> is the descendant <ul> i.e <ul> is ancestor and similarly <ul> is descendant i.e <div> is ancestor */

   div ul li {
        background-color: #4b35f1;
      }

Direct Child

Select only direct children of an element, not grandchildren or deeper descendants.

SYNTAX

parent > child { 
...
 }

EXAMPLE

<div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me <a href="#">test</a></li>
        <li>highlight me</li>
      </ul>
    </div>

/*<p>,<li> and <ul> direct of <div>, so <p>,<li> and <ul> are siblings*/
  div > li {
        background-color: #7667e4;
      }

Sibling Selector ~ and +

Sibling selectors are used to target elements based on their relationship to other elements that share the same parent.

Adjacent Sibling Selector (+)

Selects elements that immediately follow another specific element, with no other siblings in between.

SYNTAX

selector1 + selector2{
...
}

EXAMPLE

    <section>
      <p class="sibling">Test 1</p>
      <p>Test 2</p> /*Test 2 will be targed and background color will get pink (immediate next)*/
      <p>Test 3</p>
      <p>Test 4</p>
      <p>Test 5</p>
    </section>

 .sibling + p {
        background-color: pink;
      }

General Sibling Selector (~)

Selects elements that follow another specific element, but they don't have to be immediately adjacent.

SYNTAX

selector1 ~ selector2 {
...
}

EXAMPLE

    <ul>
      <li>Reading exciting novels.</li> /*Except this all the <li> will be targeted.*/
      <li>Listening to uplifting music.</li>
      <li>Hiking in the fresh air.</li>
      <li>Trying new and delicious recipes.</li>
      <li>Spending time with loved ones.</li>
    </ul>

      li ~ li {
        /* Targets all list items except the first one */
        background-color: #4e4949;
      }

HTML in a Nutshell

Code Drug — Wed, 24 Jan 2024 19:17:55 +0000

Your HTML Pocket Guide

Boilerplate Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

To add favicon icon

<link rel="favicon" href="#" type="image/x-icon">

To link CSS file

<link rel="stylesheet" href="style.css" type="text/css">

Markup Validation Service

To know we have any error in our HTML file we will check in W3C Markup validation Service (W3C stands for World Wide Web Consodium) that makes the standars of the web overall.

w3c

Some meta tags

<meta name="author" content="Spandan Mandal">
<meta name="description" content="Description of the Webpage content">

Heading Tag

    <h1>Lorem ipsum dolor sit amet.</h1>
    <h2>Lorem ipsum dolor sit amet.</h2>
    <h3>Lorem ipsum dolor sit amet.</h3>
    <h4>Lorem ipsum dolor sit amet.</h4>
    <h5>Lorem ipsum dolor sit amet.</h5>
    <h6>Lorem ipsum dolor sit amet.</h6>

Horizontal Rule

- We will get a horizontal line in the page acts as a seperation

<hr>

Line Break

To add line break we can use br tag

<br>

Whitespaces

Webpages of HTML do not honor all the spaces given using spacebar, it's called whitespace collapsing

<h1>Lorem ipsum dolor     sit amet.</h1>
<h2>Lorem ipsum  

        dolor sit amet.</h2>
<h3>Lorem ipsum dolor sit 


        amet.</h3>

This spaces will not beem displayed in browser because of whitespace collapsing.

<p>This a paragraph
<br> i am break tag
<br> <strong>In line Element</strong> <!-- InLine element,it does't mean to give bold format,it is the nature behavior of strong tag,it did not create break in the line.-->
<hr>
<em>This is another in line Element and its stand for emphasis</em> &nbsp;&nbsp;It does't mean to give italic format,it's just the natural behaviour of em tag,it did not create break in the line.
<!-- &nbsp; is used for spaces-->
    </p>

<abbr title="systemd is pice of sh!t">soyd</abbr> <!--If we hover mose in soyd then we can see the description, abbr stand for abbribiation,but it is not accesible to assistance technology -->
<address>Kolkata,West Bengal,India</address> <!-- it will be automatically be in italic format -->

HTML Entities

&nbsp;&nbsp;&nbsp;&nbsp; Namaskar <!-- For Spaces -->
<h2>Html Entites </h2>
&lt;&lt;&copy; Spandan Mandal &gt;&gt;
<!-- &lt; less than <
     &gt; greater than >
     &copy; copywrite symbol    
-->

HTML Lists

Orderd list
Unorderd list
Description list

<h2>Lists</h2>
<p><h3>Types of Lists</h3></p>

    <ul>            <!--Unorderd list-->
     <li>Ordered Lists</li>
     <li>Unordered Lists</li>
     <li>Description Lists</li>
</ul>

<ol>  <!--Orderd list-->
    <li><p>This is Orderd list</p></li>
    <li>odered in numbers</li>
    <li>in odered form</li>
</ol>

<!-- Description List-->
<dl>
    <dt>Indo Pacific</dt>   <!--Description Term--> 
    <dd>Everyone interested in Indo Pacific Region</dd> <!--Description Details-->

    <dt>Asia Pacific</dt>
    <dd>The term Asia Pacific is the wrong terminology</dd>
</dl>

HTML Links

<h2>Links</h2>
    <a href="https://developer.mozilla.org"> Mozilla Developer Network</a> <!--Absolute Refference-->
    <br>
    &lt;&lt;&copy; <a href=about.html>Spandan Mandal</a> &gt;&gt; <!--Relative Refferance-->

Section tag

By creating section tag we can separate content according to the section and assigning id name to section,to use as link in navigation clicking to the '#idname' it will scroll the page to to the particular section.

<nav>   
        <ul>
            <li>
                <a href="#metaverse">What is Metaverse?</a>
            </li>
            <li>
                <a href="#vr">What is Virtual Reality?</a>
            </li>
        </ul>
    </nav>
    <section id="metaverse">
        <h1>About Metaverse</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium ipsum accusantium explicabo delectus nisi officia consectetur sapiente, itaque expedita eveniet magni incidunt error quae culpa deserunt officiis amet dolorem mollitia!
        Similique, aliquid expedita rem dolor nesciunt ullam repellat doloribus modi eum sint nisi corporis blanditiis perferendis nobis ducimus? Commodi eum aut ex doloremque tempore et facilis perspiciatis alias id consequatur. 
    </p>
    </section>
    <section id="vr">
        <h1>Virtual Reality</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nihil consequatur facere, aspernatur officiis illum illo repellat molestiae sit dolorum possimus debitis soluta neque temporibus! Rerum impedit ex numquam repellendus!
        Ad deleniti vero rem illum itaque numquam voluptatibus aliquid ipsum minima aspernatur sunt ex aut exercitationem repudiandae mollitia nam dolorum vitae, maiores tenetur, blanditiis provident laboriosam. Quam fugit hic mollitia!</p>
    </section>

Misc

 <p><a href="#">Back to Top</a></p> <!--Put at the code at the last,if we click it will scroll where the page is starting-->

Link Text Rule #1 : Avoid printing the full web address to the page.
Link Text Rule #2 : Avoid "links to" phrases,we know it is a link.
Link Text Rule #3 : Keep your link text short use the keywords not sentences.
Link Text Rule #4 : Say no to the links that say "click here",it provide no meaning.

Code Tag

<code>&lt;h1&gt;Hello World!&lt;/h1&gt;</code> <!-- To add code sample in webpage -->

OUTPUT : 
 <h1>Hello World!</h1>

Download link

<ul><li>Download <a href="fav.png" download>favicon</a></li></ul>

Add Images

Tile if we hover at the image it will show the input given in title
And the width and height is given because of cumalative layout shift > (If we go on a webpage and the webpage shift around maybe coz of popups or a banner ads,and you click on something u did't intend to click,coz the image is suddenly move that is cumalative layout shift,so we tell the browser the height and width of the image)
loading="eager" is set to default if we did't mention anything it will load the image imadiately when the page is loaded, but if we want to load the image when we scroll (at that part) we have to define loading="lazy"

 <img src="./img/nebula_glaxy.jpg" alt="nebura space art" title="Nebura Glaxy" width="1920" height="1080"> 
<img src="./img/art-nrkv21.jpg" alt="bholenath" title="Picture of Mahadev" width="1920" height="1080" loading="lazy">

Caption in Images

To tell the browser it is caption for the image, we have to put in figure tag and add figcaption tag

<figure>
    <img src="./img/art-nrkv21.jpg" alt="bholenath" title="Picture of Mahadev" width="1920" height="1080" loading="lazy">
    <figcaption>Reffer from shivpuran</figcaption>
</figure>

Important Links and Resources

Symantic Tags

Documents needs organisations and HTML files are no difference,The word Symantic it provides meaning section tag represent it is a section area,nav tag represent for navigation section rather than a generic divider additionaly symantic html make accessible to make our page accessible to another assistive technology.

  <header>
        <nav>
            <ul>
                <li>
                    <a href="#metaverse">What is Metaverse?</a>
                </li>
                <li>
                    <a href="#vr">What is Virtual Reality?</a>
                </li>
            </ul>
        </nav>
    </header>

The above code the header tag tells that this is the heading or header section for full page.Another example we can add main element to tell it is the main area of the page.

<main>
    <section>
        <!-- code -->
    </section>
</main>

<nav aria-label="primary-navigation">
    <!-- there can be many nav so that assisive technologies knows which nav is which -->
</nav>

If you did include a heading inside nav area which is not required,but if u did,you can link to that

<nav aria-labeledby="primary-navigation">
    <h2 id="primary-navigation">Primary Nav</h2>
</nav>

Example of Symantic Tag

<html>
<head>
    <meta></meta>
    <title></title>
</head>
<body>
    <main>
        <h1>Main heading</h1>
        <article>
            <h2>Sub heading</h2>
            <section>
                <h3>sub-sub heading</h3>
                <p>Wake up at <time datetime="04:00">4 am</time></p>
            </section>
            <section>
                <h3>Second section sub-sub heading</h3>
                <aside>
                    <details>
                        <summary>What is the future of <mark>web development<mark>?What you think?</summary>
                        <p>Web3 and decentralize storage will win the race.</p>
                    </details>
                </aside>
            </section>
            <article>
    </main>
</body>

</html>

➡ Arrow in summary tag will apper,if we click the arrow then in next line Web3 and decentralize storage will win the race. will be visible
web development will be highlighted because of mark tag

OUTPUT:
Main heading
Sub heading
sub-sub heading
Wake up at 4 am
Second section sub-sub heading
What is the future of web development?What you think? 
Web3 and decentralize storage will win the race.

Date time attributes

<p>Wake up at <time datetime="04:00">4 am</time></p>

<!-- div is block element and there is no symantic meaning of div,it stands for divider -->
<div></div> 

<!-- Inline element,they don't have any meaning whatsoever by themself,they don't change or add value to code, will use later while using css -->
<span></span>

Tables

th table heading
tr table row
td table description

   <table>
      <th>Time</th>
      <th>Activity</th>
    <tr>
          <td>
              <time datetime="8:00">8am</time>
              <time datetime="11:00">11am</time>
          </td>
          <td>Write Code</td>
    </tr>

    <tr>
          <td>
              <time datetime="11:00">11am</time>
              <time datetime="12:00">12pm</time>
          </td>
          <td>Eat Lunch</td>
    </tr>

    <tr>
        <td>
         <time datetime="12:00">12pm</time>
         <time datetime="17:00">5pm</time>
        </td>
         <td>Some other courses</td>
    </tr>

    <tr>
     <td rowspan="2">All other times</td> <!-- This will take up wide of 2 row-->
     <td>Free time</td>
    </tr>
    <td>Sleep</td>

    <tr>
        <td colspan="2">This is colspan</td> <!-- This wil take up width of 2 colums-->
     </tr>
</table>

table,tr,td{
    border: 1px solid #eee;
    font-family: 'JetBrains Mono';
    border-collapse: collapse;
    padding: 0.5rem;
}

OUTPUT:

Table symentics

<table>

 <thead>
  <tr>
      <th>Time</th>
      <th>Activity</th>
  </tr>
 </thead>

 <tbody>
    <tr>
    <td></td>
    <td></td>
    </tr>
 <tbody>
</tbody>

<tfoot>
    <td colspan="2">That's It!!!</td>
</tfoot>
</table>

Example of table with symantic

 <table>
     <caption>[Daily ](url)Schedule</caption>
     <thead>
     <tr>
         <th>&nbsp;</th>
         <th>Time</th>
         <th>Activity</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <th>Morning</th>
         <td>
             <time datetime="8:00">8am</time>
             <time datetime="11:00">11am</time>
         </td>
         <td>Write Code</td>
     </tr>
  <tr>
      <th>Break</th>
      <td>
          <time datetime="11:00">11am</time>
          <time datetime="12:00">12pm</time>
      </td>
      <td>Eat Lunch</td>
  </tr>
  <tr>
    <th>Noon</th>
    <td>
        <time datetime="12:00">12pm</time>
        <time datetime="17:00">5pm</time>
    </td>

    <td>Some other courses</td>
</tr>

<tr>
    <th>Evening</th>

    <td rowspan="2">All other times</td> <!-- This will take up wide of 2 row-->
         <td>Free time</td>
     </tr>
     <th>Night</th>
     <td>Sleep</td>

                    <tr>
         <td colspan="3">This is colspan</td> <!-- This wil take up width of 3 colums-->
     </tr>
 </tbody>
 <tfoot>
     <td colspan="3">That's It!!!</td> <!-- This wil take up width of 3 colums-->
     </tr>
 </tfoot>
 </table>

Forms and Inputs

<form action="" method="get"> in action we have to put the address where we need to send the information when form is submitted.

placeholder it's used to display dummy text input,when user will enter input it will be replaced.
autocomplete="on" means it will suggest the previously input texts.
required This will require information before the form could be submitted.
autofocus means when the page loads the input field will be have blinking cusor so it is focused. (IMPORTANT only one input can have autofocus attribute)

<article id="contact">
 <h2>Contact Me</h2>
 <p>I'd really like to hear from you!</p>

<p>
 <form action="https://httpbin.org/get" method="get">
     <label for="firstname">First Name:</label>
     <input type="text" name="firstname" id="firstname" placeholder="Neo" autocomplete="on" required autofocus>
</p>

<p>
    <label for="lastname">Last Name:</label>
    <input type="text" name="lastname" id="lastname" placeholder="Neo" autocomplete="on" required>
</p>

 </form>
</article>

Type password to use that as password input

<p>
 <label for="password">Password:</label>
 <input type="password" name="password" id="password" placeholder="your secret" required>
</p>

This will take mobile number as type is set to tel and will follow the pattern



- range is 0-9
- {3} is three numbers(used coz tel convention is 999-999-9999,so it is used)
- hypen is not used coz (999-999-9999) if any one is filling from mobile devices numpad will not be open so,it hypen is not used numpad will open


```html
 <p>
     <label for="phone">Phone:</label>
     <input type="tel" name="phone" id="phone" placeholder="1234567890" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required>
</p>

This is used to select the dates in this case year with the given range from 1900-2023

<p>
 <label for="decade">Decade:</label>
 <input type="number" name="decade" id="decade" min="1900" max="2023" step="10" value="2000" >
</p>

This is used to select items from the drop down options

-

<option value="ice" selected>Ice Coffee</option>

This selected attribute is used for set as default when the page loads it will be selected as default.

optgroups are used for symentic for differentiate into categories

<p><label for="coffee">Favorite Coffee</label></p>
 <select name ="coffee" id="coffee">

    <optgroup label="Coffee"></optgroup>
     <option value="regular">Regualar</option>
     <option value="ice" selected>Ice Coffee</option>

     <optgroup label="Espresso Drinks"></optgroup>
     <option value="moca">Moca</option>
     <option value="latte">Latte</option>
     <option value="others">others</option>

multiple is used to select multiple items, ctrl + click
size is used for how many items should be displayed in this case 2 itms will be displayed

<p><label for="coffee">Favorite Coffee</label></p>
    <select name ="coffee" id="coffee" multiple size="2">
         <optgroup label="Coffee"></optgroup>
         <option value="regular">Regualar</option>
         <option value="ice" selected>Ice Coffee</option>
         <optgroup label="Espresso Drinks"></optgroup>
         <option value="moca">Moca</option>
         <option value="latte">Latte</option>
         <option value="others">others</option>

<p><label for="coffee">Favorite Coffee</label>
<input type="text" name="coffee" id="coffelist="coffee-list">
   <datalist id="coffee-list">
    <option value="regular">Regualar</option>
    <option value="ice" selected>Ice Coffee</option>
    <option value="moca">Moca</option>
    <option value="latte">Latte</option>
    <option value="others">others</option>
</datalist> 
</p>

Other tags in forms for symantic

<fieldset
<legend></legend>
</fieldset>

 <form action="https://httpbin.org/get" method="get">
  <fieldset>
     <legend>Personal Info</legend>
    <p>
     <label for="firstname">First Name:</label>
     <input type="text" name="firstname" id="firstname" placeholder="Neo" autocomplete="on" required autofocus>
     </p>
   <p>
     <label for="lastname">Last Name:</label>
     <input type="text" name="lastname" id="lastname" placeholder="Neo" autocomplete="on" required>
   </p>
     <p>
       <label for="password">Password:</label>
       <input type="password" name="password" id="password" placeholder="your secret" required>
   </p>
     <p>
       <label for="phone">Phone:</label>
       <input type="tel" name="phone" id="phone" placeholder="1234567890" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required>
   </p>
    <p>
        <label for="decade">Decade:</label>
        <input type="number" name="decade" id="decade" min="1900" max="2023" step="10" value="2000" >
       </p>
  </fieldset>

Radio Type

Only select one as it is radio buttom

<form>
  <fieldset>What is your favorite food?
     <p>
         <input type="radio" name="food" id="samosa" value="samosa">
         <label for="samosa">Samosa</label>
     </p>
     <p>
         <input type="radio" name="food" id="tacos" value="tacos">
         <label for="tacos">Tacos</label>
     </p>
     <p>
         <input type="radio" name="food" id="other" value="other">
         <label for="other">Others</label>
     </p>
 </fieldset>
</form>

CheckBox

Where as checkbox we can check multiple options at a time

<form>
<fieldset>What is your Pet?
    <p>
        <input type="checkbox" name="pets" id="bird" value="bird">
        <label for="bird">🐦 Bird</label>
    </p>

    <p>
        <input type="checkbox" name="pets" id="fish" value="fish">
        <label for="fish">🐟 Fish</label>
    </p>

    <p>
        <input type="checkbox" name="pets" id="otherPets" value="other">
        <label for="otherPets">Others</label>
     </p>
 </fieldset>
 </form>

Message

<form>
 <fieldset>
     <legend>Send me a Note</legend>
     <label for="message">Your Message:</label>
     <br>
     <textarea name="message" id="messageMe" cols="30" rows="10" placeholder="Write your message here"></textarea>
 </fieldset>
</form>

Submit Button

Never send a information with get request (coz in the url all the information is visible)

<form>
<button type="submit">Submit</button>
<button type="submit" formaction="https://httpbin.org/post" formmethod="post">Post</button>
<button type="reset">Reset</button>
</form>

DEV Community: Code Drug

Linux Process Management - The Easy Way

To check the process id of your shell

Print the process id of the parent

Check the level of the shell

pidof command

To see all the processes in system

To check a particular process

With some options

Get the process id

To check the process in tree format

To check the process with respect to user

Check the details of particular process

Kill process

Signals in kill command

strace

Kill a process it's name (pkill)

Kill Multiple processes (killall)

Vim

Vi Improved, a programmer's text editor

Modal Mindset

Essential Navigation

Exit Vim

Let's now see how to navigate.

Find

If the cursor is in the word you want to find.

Replace

Undo

Redo

Editing

Delete

Copy/Paste

Misc

Line Number

Syntax Highlighting

Jump to given line

Working with Multiple files

Compare two files

DevOps Jargons

Master the Art of Specificity - CSS Selectors

Universal Selector

Individual Selector

Class and ID Selector

And Selector (chained)

Combined Selector

Inside an Element

Direct Child

Sibling Selector ~ and +

HTML in a Nutshell

Your HTML Pocket Guide

Boilerplate Code

To add favicon icon

To link CSS file

Markup Validation Service

Some meta tags

Heading Tag

Horizontal Rule

- We will get a horizontal line in the page acts as a seperation

Line Break

Whitespaces

HTML Entities

HTML Lists

HTML Links

Section tag

Misc

Code Tag

Download link

Other types of link

Add Images

Caption in Images

Important Links and Resources

Symantic Tags

Date time attributes

Tables

Table symentics

Forms and Inputs

Type password to use that as password input

This will take mobile number as type is set to tel and will follow the pattern

This is used to select the dates in this case year with the given range from 1900-2023

This is used to select items from the drop down options