Notes on Bino

Start the Hugo server with your local IP

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 20 Oct 2025 00:00:00 +0000

I want to share my writings to my colleague thorugh my IP before publishing it. So here how I done it:

Get your IP using the command ipconfig from the terminal.
Go to your Hugo project’s root directory in your terminal.
Run the following command, replacing <YOUR_NETWORK_IP> with the IP address.
hugo server --bind 0.0.0.0 --baseUrl http://<YOUR_NETWORK_IP>:1313
The server will start, and the output should show the website is available at http://<YOUR_NETWORK_IP>:1313.

Software gardening and death

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 18 Aug 2025 00:00:00 +0000

I have came across the following article recently.

Software is a bit like this house plant: its wellbeing depends on the folks who constantly tend it. Without us around, it gradually erodes.

I used Google Orkut in the past and I loved it at that time. It was fun to send messages in the scrapbook, cool usernames, and enjoy all the other social media features that felt cool back then. But after the rise of Facebook and other giants, Google shut down Orkut. They sent us an email with a link to download our data archive and said goodbye. I still have those emails from Orkut, and when I read them recently, they gave me a nostalgic happiness.

What I realize now is that everything eventually comes to an end when the gardeners stop tending their gardens. We cannot take it for granted forever. Today we have access to some of the most amazing things in human history. We need to be grateful and enjoy the beauty of it. So keep on gardening, and cherish your fellow gardeners.

Article link

NOT IN vs NOT EXISTS in PL/SQL

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Thu, 19 Jun 2025 00:00:00 +0000

SELECT *
FROM TABLE1 
WHERE ID NOT IN (
 SELECT ID
 FROM TABLE2
)

When I ran the above query I know the condition will give me the results, because the data exists in the TABLE1 which is not in TABLE2. But I didn’t go any results. I got surprised. After I a while I found out the issue.

So the reason is that ID column in the TABLE2 have null values. If any value of ID in the subquery is NULL, then the entire NOT IN clause fails to match anything. This is standard SQL behavior because NULL makes the whole comparison unknown.

Solution:

You can use NOT NULL condition in the sub-query as below:

SELECT *
FROM TABLE1 
WHERE ID NOT IN (
 SELECT ID
 FROM TABLE2
 WHERE ID IS NOT NULL
)

Use NOT EXISTS:

SELECT *
FROM TABLE1 T1
WHERE NOT EXISTS (
 SELECT 1
 FROM TABLE2 T2
 WHERE T1.ID = T2.ID
)

The NOT EXISTS will automatically handle null values and safer to use.

References

StackOverflow, Geeks for geeks

Unhang Windows PC

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 26 May 2025 16:11:01 +0300

I often found that Ctrl+Alt+Delete unhangs the Windows PC. I googled why?

The nutshell answer is : Ctrl+Alt+Delete is a secure attention sequence (SAS) triggers a system interrupt, effectively forcing the computer to respond. This is directly handled by the Windows operating system kernel. That means it can bypass most of the stuff that’s currently running (including frozen apps or even some parts of the graphical interface).

Cool to know this.

Diffdiff and Emoji Kitchen

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 19 May 2025 00:00:00 +0000

I just found two tools:

diffdiff is a fast, private way to compare two pieces of text, created by Joe Kaptur. It’s interface is so clean and good.
An impressive emoji-mixing site called Emoji Kitchen, created by Xavier Salazar.

Thunder and Unicorn mixed by Emoji Kitchen

Google AI Overview

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 18 May 2025 00:00:00 +0000

I don’t search for things as much as I used to. These days, I just go straight to ChatGPT. I don’t feel like Googling and clicking through multiple pages to find the best answer. I ask ChatGPT, and most of the time, the results are satisfying.

I’ve heard that traditional Google searches are declining. But now, they’ve introduced AI Overviews at the top of their results. I think it’s a good idea—because we get a quick summary of what we’re looking for, along with links to other websites. Yes, I think it’s a good move.

Google AI Overview for my theme Lightbi

Custom folder Icons with Material Icon Theme

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 12 May 2025 00:00:00 +0000

Install Material Icon Theme

In settings.json:

"material-icon-theme.folders.associations": {
 "folder-name": "Home"
}

folder-name is the folder name and Home is the icon. You can find the files and folders icons in here.

Sticky footers

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 11 May 2025 00:00:00 +0000

To make a sticky footer in the Bootstrap you can use the below.

<body class="d-flex flex-column min-vh-100">
 <main class="flex-fill">
 <!-- Your page content here -->
 </main>

 <footer class="bg-dark text-white text-center py-2">
 <!-- Your footer content here -->
 </footer>
</body>

d-flex flex-column min-vh-100 on : makes the body fill the viewport and act like a vertical Flexbox container.
flex-fill on : makes the content area take up all available vertical space, pushing the footer down.
footer: stays at the bottom even with short content.

Upgrade Hugo

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 10 May 2025 00:00:00 +0000

To install or update Hugo extended using HomeBrew, you can use the below,

Install the extended version:

brew install hugo

Or if you already have it and just want to upgrade:

brew upgrade hugo

Check the version to using hugo version.

Modernization of Apps

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Fri, 09 May 2025 00:00:00 +0000

One of the main topics discussed in the seminar I attended was modernizing legacy applications.

Legacy applications are typically monolithic in nature, making it difficult to scale or integrate new features quickly. The monolithic apps ruled the software industry for a very longer time, but now people are moving (already many moved) to its great alternative, the microservice architecture.

I’ve come across monolithic applications that are tightly coupled with environments like Oracle or .NET, where growth can become a painful process. Over time, these systems tend to become slow, expensive to maintain, and resistant to change.

Links

Monolithic and microservice architecture

Hide details in the mobile screen with Bootstrap

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 07 May 2025 00:00:00 +0000

In the feed page I need to hide the dotted line in the mobile screens. So here you can see how its can be done in Bootstrap.

d-none d-md-flex: shows only on md and up (desktop/tablet)
d-block d-md-none: shows only on mobile
text-nowrap: prevents text from wrapping

<div class="mb-3">
 <!-- Desktop layout -->
 <div class="d-none d-md-flex align-items-center">
 <a href="{{ .Permalink }}" class="text-decoration-none fw-medium me-2 text-nowrap">
 Sample heading
 </a>
 <div class="flex-grow-1 border-bottom dotted-line mx-2"></div>
 <p class="text-muted small text-nowrap mb-0">Date</p>
 </div>

 <!-- Mobile layout -->
 <div class="d-block d-md-none">
 <a href="{{ .Permalink }}" class="text-decoration-none fw-medium d-block mb-1">
 Sample heading
 </a>
 <p class="text-muted small mb-0">Date</p>
 </div>
</div>

SQLite is the most deployed and most used database

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 06 May 2025 00:00:00 +0000

Avinash is sharing some cool facts about SQLite.

SQLite is the most deployed and most used database. There are over one trillion (1000000000000 or a million million) SQLite databases in active use.
SQLite is likely used more than all other database engines combined. Billions and billions of copies of SQLite exist in the wild. It’s everywhere.

These are mind blowing, have a look into that.

Article link

To extract the value of a tag from an XML-like string in PL/SQL

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 12 Jan 2025 00:00:00 +0000

To extract the value of a tag from the given XML-like string in PL/SQL, you can use the EXTRACTVALUE function or XMLTABLE for XML processing.

Example Using `EXTRACTVALUE`

DECLARE
 xml_data CLOB := '<Status>200</Status><Message>Success</Message>';
 l_message VARCHAR2(50);
BEGIN
 -- Extract the FunctionalReferenceID value
 l_message := EXTRACTVALUE(XMLTYPE('<root>' || xml_data || '</root>'), '/root/Message');
 
 -- Print the value
 DBMS_OUTPUT.PUT_LINE('FunctionalReferenceID: ' || l_message);
END;

Example Using `XMLTABLE`

DECLARE
 xml_data CLOB := '<Status>200</Status><Message>Success</Message>';
 l_message VARCHAR2(50);
BEGIN
 -- Use XMLTABLE to extract the Message
 SELECT value
 INTO l_message
 FROM XMLTABLE(
 '/root/Message'
 PASSING XMLTYPE('<root>' || xml_data || '</root>')
 COLUMNS value VARCHAR2(50) PATH '.'
 );

 -- Print the value
 DBMS_OUTPUT.PUT_LINE('Message: ' || l_message);
END;

EXTRACTVALUE, XMLTABLE

Varchar datatype limits

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 30 Nov 2024 00:00:00 +0000

For NVARCHAR2 and VARCHAR2 maximum size is 4000 bytes, or 32767 bytes if the MAX_STRING_SIZE initialization parameter is set to EXTENDED. This is useful you have to allocate more data to a variable.

You can run the below command to view the parameter.

show parameter MAX_STRING_SIZE;

References

Oracle Doc, Max string size

PL/SQL commands to view the table details

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 13 Nov 2024 00:00:00 +0000

In Oracle PL/SQL, you can use the following commands to view table details:

DESCRIBE or DESC
```
DESC table_name;
```
Displays columns, data types, and constraints.

USER_TAB_COLUMNS

SELECT COLUMN_NAME, DATA_TYPE, DATA_LENGTH
FROM USER_TAB_COLUMNS
WHERE TABLE_NAME = 'TABLE_NAME';

Shows details about columns for tables owned by the user.

ALL_TAB_COLUMNS

SELECT COLUMN_NAME, DATA_TYPE, DATA_LENGTH
FROM ALL_TAB_COLUMNS
WHERE TABLE_NAME = 'TABLE_NAME';

Provides column information for tables accessible to the user.

DBMS_METADATA.GET_DDL
```
SELECT DBMS_METADATA.GET_DDL('TABLE', 'TABLE_NAME') FROM DUAL;
```
Displays the CREATE TABLE statement for table structure details.

To view constraints on the table, you can check here.

Use Flashback Query

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 11 Nov 2024 00:00:00 +0000

If your Oracle database has Flashback enabled, you can query past versions of data within a specified retention period. Here’s how to use Flashback to retrieve a prior state of data:

SELECT * 
FROM your_table AS OF TIMESTAMP (SYSTIMESTAMP - INTERVAL '5' MINUTE) 
WHERE your_condition;

Replace SYSTIMESTAMP - INTERVAL '5' MINUTE with the timestamp or interval that reflects when the data was last known to be in its old state.

Note: Flashback must be enabled, and it’s only available within the Flashback retention window, which depends on your database configuration.

References

Killians Bytes

How to break columns in Bootstrap

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 03 Nov 2024 00:00:00 +0000

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.

<div class="container text-center">
 <div class="row">
 <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

 <!-- Force next columns to break to new line -->
 <div class="w-100"></div>

 <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 </div>
</div>

You can also apply this break at specific breakpoints with our responsive display utilities.

<div class="container text-center">
 <div class="row">
 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

 <!-- Force next columns to break to new line at md breakpoint and up -->
 <div class="w-100 d-none d-md-block"></div>

 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 </div>
</div>

References

Bootstrap Doc

To generate random value in PL/SQL

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 30 Oct 2024 00:00:00 +0000

To update a column with a random value in PL/SQL, you can use the DBMS_RANDOM package, which provides functions for generating random numbers or strings.

To update random number

BEGIN
 UPDATE employees
 SET salary = ROUND(DBMS_RANDOM.VALUE(100, 500));
 COMMIT;
END;

DBMS_RANDOM.VALUE(100, 500) generates a random decimal number between 100 and 500.
ROUND is used to convert the decimal value to an integer.

To update random string

BEGIN
 UPDATE employees
 SET password = DBMS_RANDOM.STRING('x', 8); -- 'x' specifies alphanumeric characters
 COMMIT;
END;

DBMS_RANDOM.STRING('x', 8) generates an 8-character alphanumeric string.
‘x’ specifies alphanumeric characters (letters and numbers). Other options include ‘a’ for alphabets and ‘u’ for uppercase only.

PL/SQL MINUS Operator

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 23 Oct 2024 00:00:00 +0000

The PL/SQL MINUS operator returns all rows from the first query that are not present in the second query. Each SELECT statement defines a dataset, and the MINUS operator retrieves all records from the first dataset, excluding any that also appear in the second dataset.

select stock_id, stock_name
from stock_master
where active = 'Y'

minus

select stock_poid, stock_desc
from stock_ledger
where transaction_date > '01-JAN-24'

References

Tech on the net

Slash pages in Hugo

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 16 Oct 2024 00:00:00 +0000

In Hugo, creating different slash pages (like /about/, /uses/, etc.) involves creating specific content files for each page and customizing templates as needed.

Create individual markdown files for each slash page under content/.
If you want to create an /about/ page in your blog, add a markdown page with below front matter in the content/ page.

//content/about.md
---
title: "About"
date: 2024-10-16
---

This is the About page content.

Optionally create a template for the page.
Hugo uses the single.html template from the layouts/_default/ folder to render pages by default. However, you can create custom templates in the layouts/page/ folder to format specific pages as needed.

//layouts/page/about.html

<h1>{{ .Title }}</h1>
<div class="content">
 {{ .Content }}
</div>

You can check my slash pages like uses, credits, and changelog.

References

Hugo Docs

Hugo Troubleshooting

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 14 Oct 2024 00:00:00 +0000

Hugo is fast, but ineffecinet templates can make it slower. For checking the performance you can use the below commands.

Use hugo --logLevel debug to display debug information, warning, and error message.
Use hugo --templateMetrics to check for slow templates. This will show the time it takes to render each template.
Use hugo --gc (garbage collection) to clean up unused files, which might help reduce build time.
Use debug.Timer to determine the execution time of a block of code. And use the hugo --logLevel info info command line flag when you build the site.

{{ $t := debug.Timer "TestSqrt" }}
{{ range seq 2000 }}
 {{ $f := math.Sqrt . }}
{{ end }}
{{ $t.Stop }}

References

Hugo Docs

Higher order functions

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 20 Aug 2024 00:00:00 +0000

A higher order function is a function that takes one or more functions as arguments, or returns a function as its result.

These functions are powerful because they allow you to abstract and compose operations in a flexible and reusable way. They are a fundamental concept in functional programming.

Common examples of higher order functions are .map(), .filter(), and reducer().

.map(): Takes a function as an argument and applies it to each element in an array, returning a new array with the results.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

References

Namaste JS, FreeCodeCamp

Types of states

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 19 May 2024 00:00:00 +0000

Below are the different types of states that can exist within an application. There are three main types:

1. Local State

Local state pertains to a single component. An example of this would be listening to user input in a field or toggling a “show more details” button. Typically, local state is managed within the component using useState or useReducer.

2. Cross-Component State

Cross-component state impacts multiple components. For instance, managing the open/closed state of a modal overlay. While this can also be managed using useState or useReducer, it often involves passing state between components via props drilling.

3. App-Wide State

App-wide state influences the entire application, such as themes or user authentication status. Similar to cross-component state, this can be managed using useState or useReducer, albeit with the assistance of props drilling.

Handling errors in LISTAGG

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Fri, 03 May 2024 00:00:00 +0000

The LISTAGG analytic function, introduced in Oracle 11g Release 2, greatly simplifies string aggregations within SQL queries.

SELECT pid, LISTAGG(ColumnName, ' ' ) WITHIN GROUP (ORDER BY seq) AS ColumnName
FROM B GROUP BY pid;

However, if the output of the above query exceeds 4000 characters, it triggers an error, specifically ORA-01489, indicating that the result of string concatenation is too long.

To address this limitation, Oracle Database Release 2 (12.2) enhanced LISTAGG with the ability to handle overflow errors gracefully, as demonstrated below:

SELECT pid, LISTAGG(ColumnName, ' ' ON OVERFLOW TRUNCATE ) WITHIN GROUP (ORDER BY seq) AS ColumnName
FROM B GROUP BY pid;

In this updated syntax, the output is restricted to 4000 characters, preventing the ORA-01489 error from being raised.

The ON OVERFLOW clause offers several options to manage overflow situations:

ON OVERFLOW ERROR: This is the default behavior, triggering an error if the result overflows.
ON OVERFLOW TRUNCATE 'StringYouLike': Appends ‘StringYouLike(Count)’ at the end of the truncated string.
ON OVERFLOW TRUNCATE '': Displays the first 4000 characters without any additional terminating string.
ON OVERFLOW TRUNCATE WITH COUNT: Appends the total character count at the end, for example, ‘…(5512)’.

References

Stack Overflow.

Session and token authentication

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 03 Mar 2024 00:00:00 +0000

Session and token authentication methods are used by the server to verify the client request is authenticated or not.

Session Authentication

Session-based authentication is an example of stateful authentication, which involves storing user authentication data on the server. With this method, when a user logs into a website, the server creates a small file that stores user information such as a unique session ID, login time, expiration time, and other relevant data. This file is stored in the database or in-memory cache. This session ID is then sent back to the client and stored in the client’s browser as a cookie. For subsequent requests, this cookie is passed back to the server. This allows the server to verify the session ID and provide a response based on the current state.

This method is easy to use, as cookies are natively supported by browsers, so no additional JavaScript is needed. But when the application grows decoupling the frontend from the backend becomes essential. Session-based authentication can be limiting in this regard.

Token Authentication

Instead of relying on server-side sessions, token-based authentication uses tokens and it is an example of stateless authentication. When user log in, the server create a token (usually a JSON Web Token, or JWT) using a secret key and sent to the user. For subsequent requests, user will send this token along with request and server will verify if the token is valid or not.

This method gives more scalability and stateless for the apps, but the server does not authenticate the user, so linking a token to its user can be more difficult. Also in any chance an attacker got acess to the token, they will get access to the server.

References

LogRocket, Authfear, criipto.

Canary in software development

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 27 Feb 2024 00:00:00 +0000

In software development, a canary release (or canary deployment) refers to the practice of rolling out a new version of software to a small, select group of users before deploying it to the entire user base. The term “canary” comes from the old practice of using canaries in coal mines to detect dangerous gases; if the canary showed signs of distress, miners knew to evacuate. Similarly, in software, the canary release acts as an early warning system to detect issues with new code before it reaches a wider audience.

Benefits of Canary Releases: Reduced Risk: Limits the impact of potential issues by exposing the new version to only a small group first. Real-World Testing: Provides the opportunity to observe how the new version performs in a live environment. Faster Rollback: Easier to revert changes if problems are detected, reducing downtime or negative user impact.

Set up a React project with Vite along with Tailwind CSS

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Thu, 22 Feb 2024 00:00:00 +0000

Here is the step by step guide to create a React project with Vite.

Run the command npm create vite in the command prompt.
Afer the script you will be prompted to enter a project name.
After entering the project name, Vite will prompt you to select a framework. Select the framework as React.
After selecting framework, Vite will prompt you to select language type.
After selecting the language type, Vite will show the message as Scaffolding the project in the location.
After that you can go to the folder and instruct to install the dependencies with the command npm install.

And here is the step to install Tailwind CSS as a Vite plugin.

Run the command npm install tailwindcss @tailwindcss/vite to Install tailwindcss and @tailwindcss/vite via npm.

Add the @tailwindcss/vite plugin to your Vite configuration.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
 tailwindcss(),
],
})

Add an @import "tailwindcss"; to your CSS file that imports Tailwind CSS.
After that you can run the project with command npm run dev or whatever command is configured in your package.json file..

References

DigitalOcean, TailwindCSS

What is Skeuomorphism?

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 21 Feb 2024 00:00:00 +0000

I noticed every design is incorpating rounded edges in their rectangle shapes (yes, my website cards also). Today I Googled it and after reading some articles, I stumbled upon Skeuomorphism.

So, here I am noting down what is Skeuomorphism?

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize.

In UI design, skeuomorphism had its boom with the advent of the first iPhone. Steve Jobs believed that UI elements should resemble real-life objects to increase ease of use. For example, the Notes app looked like a notepad. However, as users became more familiar with the iOS interface, Apple transitioned to flat design with fewer shadows and textures. Flat design stripped back skeuomorphic elements to essentials for faster loading and decluttered touchpoints.

References

Interaction Design

Connecting MySQL from command line

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 13 Feb 2024 00:00:00 +0000

Open the command prompt and type the below to connect the MySQL:

mysql -u username -p

After the above command the command line will prompt you to enter the password and after entering the password you can query the database.

References

Stack Overflow, MySQL Doc

Non-editionable objects

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 10 Feb 2024 00:00:00 +0000

When you are create an object in Oracle Database, default object type will be marked editionable. From 12c onwards, you can mark the objects as noneditionable , and same you cannot edit with create or replace . For altering the same you have to alter the object and change to editionable.

This is applicable to View, Funcitons, Procedure, Trigger, Library, Type.

create or replace noneditionable procedure test_proc ( p int ) as
begin
 null;
end;

select editionable from user_objects
where object_name = 'test_proc ';

//result
EDITIONABLE 
N

create or replace procedure test_proc ( p int ) as
begin
 dbms_output.put_line ( 'Editionable version' );
end;

//result
ORA-38824: A CREATE OR REPLACE command may not change the EDITIONABLE property of an existing object.

With below you can alter the procedure.

alter procedure test_proc editionable;

create or replace procedure test_proc ( p int ) as
begin
dbms_output.put_line ( 'Editionable version' );
end;

exec test_proc (1);

//result
Editionable version

References

Oracle Doc

Export your Kindle book highlights

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 24 Jan 2024 00:00:00 +0000

If you want to export your Kindle book highlights without the page location and color information, you can follow these steps:

Export the content in any format you prefer.
Paste the content in Visual Studio Code or any other text editor that supports regular expressions.
Use the regular expression Highlight \(yellow\) - Location [0-9]+ in the Find and Replace tool to replace Highlight (yellow) - Location 01.
Replace all the matches with an empty string.

This will remove the unwanted details from your highlights and leave only the text you want to keep.

Name attribute in input tag

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 15 Jan 2024 00:00:00 +0000

The name attribute specifies the name of an <input> element. It is used to reference elements in a JavaScript, or to reference form data after a form is submitted to the server.

Only form elements with a name attribute will have their values passed when submitting a form.

<form action="http://localhost" method="POST">
 <label for="User">User name</label>
 <input type="text" id="User" name="Name" value="bino" />
 <input type="submit" value="submit" />
</form

When you submit the above, server localhost will recive a content like below:

Name=bino

References

w3schools

Firebase rules update

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Fri, 05 Jan 2024 00:00:00 +0000

To read and write without authenticaton in firebase, you need to updated the rules in the database as below.

{
 "rules": {
 ".read": true,
 ".write": true
 }
}

Please note that this allow anyone to fetch and write the data to the database.

Display refresh rate

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 04 Oct 2023 00:00:00 +0000

The refresh rate of a display is the number of times per second that the image refreshes on the screen. For example, a 60Hz display will update the screen 60 times per second.

References

Windows Doc

PL SQL Constraints

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 27 Aug 2023 00:00:00 +0000

To find the constraints in a table

ALL_CONSTRAINTS: Provides information about all constraints accessible to the user, across all tables in the database. It includes constraint types, status, and more, but doesn’t show column-specific details.

SELECT * FROM ALL_CONSTRAINTS 
WHERE TABLE_NAME='YOUR_TABLE_NAME' 
AND OWNER = 'OWNER_NAME';

To find the constarints referring to a table.

SELECT * FROM ALL_CONSTRAINTS 
WHERE R_CONSTRAINT_NAME IN ( 
 SELECT CONSTRAINT_NAME FROM ALL_CONSTRAINTS 
 WHERE TABLE_NAME='YOUR_TABLE_NAME' 
 )
AND OWNER = 'OWNER_NAME';

USER_CONS_COLUMNS: Shows details about columns associated with constraints for tables owned by the current user. It’s useful for checking specific columns involved in constraints like primary keys, foreign keys, or unique constraints.

SELECT CONSTRAINT_NAME, TABLE_NAME, COLUMN_NAME, POSITION
FROM USER_CONS_COLUMNS
WHERE TABLE_NAME = 'YOUR_TABLE_NAME';

The Simplest way to load CSS asynchronously

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 27 Aug 2023 00:00:00 +0000

Sometimes we want to load the CSS asynchronously to reduce the intial page load and you can do the same by adding media="print" onload="this.media='all' to the link as below.

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Let’s dive into the details of the above:

The link’s media attribute is set to print.
print is a media type that applies to print-based media or when the user tries to print the page.
By using media="print", the CSS file loads asynchronously (since it’s not needed immediately for screen display).
However, we still want to apply the styles to the page for screen use.
To achieve this, we can use the onload attribute to change the link’s media to all once it finishes loading.

References

filamentgroup

PL/SQL Returning Into

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 10 Jul 2023 00:00:00 +0000

The RETURNING INTO clause allows us to return column values for rows affected by DML statements. The returned data could be a single column, multiple columns or expressions.

INSERT INTO t1 VALUES (t1_seq.nextval, 'FOUR')
RETURNING id INTO l_id;

References

Oracle, dba-oracle, oracle base

Deleting node modules

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 05 Jul 2023 00:00:00 +0000

In windows, deleting node modules takes so much time and sometimes it makes my screen unresponsive. I googled for some solution and found the below:

Install a npm package called npkill with the command npm i -g npkill.
After installing from the terminal go to the directory from which we want to delete the node modules and type npkill.

The command prompt will list all the node modules and we can select the required folder.
After the secltion, you can press the Space key which will erase the directory in which the cursor is located.

To exit, q, or Ctrl + c.

References

npkill

Directory Objects in PL/SQL

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Thu, 02 Mar 2023 00:00:00 +0000

This view describes all directories accessible to the user.

SELECT * FROM ALL_DIRECTORIES;

This view describes all directories specified for the entire database.

SELECT * FROM DBA_DIRECTORIES;

To view all the tables details, look here.

References

Oracle Doc

What is CSS Modules?

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Thu, 02 Mar 2023 00:00:00 +0000

In CSS modules, CSS class names and animation names are scoped locally by default. In React you can use the file naming conversion as [file name].module.css. This let the React and Webpack know that you are using CSS Modules.

Importing the CSS in the file.

import nameyoulike from './name.modules.css';

Calling the style in the file.

<button className={styles.button} />

References

Styled Components Doc

What is Styled Components?

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Thu, 02 Mar 2023 00:00:00 +0000

Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components.

References

Styled Components Doc

Difference between React and ReactDOM

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 25 Feb 2023 00:00:00 +0000

React and ReactDOM are two distinct libraries that are commonly used together in the development of web applications with React.

React is a JavaScript library focused on building user interfaces. It follows a declarative approach, where developers define what the UI should look like based on the current state of the application. React then efficiently updates and renders components as the state changes. Its design emphasizes flexibility and efficiency, making it a popular choice for developing both web and mobile applications.

ReactDOM, on the other hand, serves as a bridge between React and the DOM (Document Object Model). The DOM is a hierarchical structure representing the HTML content of a web page. ReactDOM provides a set of methods that enable React components to be rendered and updated within the DOM. It ensures that the user interface is synchronized with the underlying HTML structure.

In summary, React is a library for building user interfaces, while ReactDOM handles the interaction with the DOM, rendering React components onto the web page. Although they are often used together, they serve different purposes and can function independently of each other.

Conditional Rendering

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 22 Feb 2023 00:00:00 +0000

Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

&& operator

{ isYes && <A />}

? : operator

isYes ? Yes() : No()

In React, you control branching logic with JavaScript.
You can return a JSX expression conditionally with an if statement.
You can conditionally save some JSX to a variable and then include it inside other JSX by - using the curly braces.
In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />.
In JSX, {cond && <A />} means “if cond, render <A />, otherwise nothing”.
The shortcuts are common, but you don’t have to use them if you prefer plain if.

References

React Doc

Lifting state up

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 20 Feb 2023 00:00:00 +0000

Lifting state up in react means moving data from a child component to some parent component either to use it there or pass it some other child component.

When you want to coordinate two components, move their state to their common parent.
Then pass the information down through props from their common parent.
Finally, pass the event handlers down so that the children can change the parent’s state.
It’s useful to consider components as “controlled” (driven by props) or “uncontrolled” (driven by state).

Browser default actions

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 18 Feb 2023 00:00:00 +0000

There are many default browser actions:

mousedown – starts the selection (move the mouse to select).
click on <input type="checkbox"> – checks/unchecks the input.
submit – clicking an <input type="submit"> or hitting Enter inside a form field causes this event to happen, and the browser submits the form after it.
keydown – pressing a key may lead to adding a character into a field, or other actions. contextmenu – the event happens on a right-click, the action is to show the browser context menu.
…there are more…

All the default actions can be prevented if we want to handle the event exclusively by JavaScript.

To prevent a default action – use either event.preventDefault() or return false. The second method works only for handlers assigned with on<event>.

The passive: true option of addEventListener tells the browser that the action is not going to be prevented. That’s useful for some mobile events, like touchstart and touchmove, to tell the browser that it should not wait for all handlers to finish before scrolling.

If the default action was prevented, the value of event.defaultPrevented becomes true, otherwise it’s false.

References

javascript info

Controlled and Uncontrolled Components

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 18 Feb 2023 00:00:00 +0000

A component with its own local state is often referred to as uncontrolled.

In contrast, a component is considered controlled when its key data and behavior are managed externally through props, rather than relying on its own local state. This approach allows the parent component to have full control over its behavior and data flow.

When designing a component, carefully consider which pieces of information should be controlled (managed via props) and which should remain uncontrolled (handled by the component’s state). However, keep in mind that you’re not locked into your initial decision—you can always refactor later as the needs of your application evolve.

References

React Doc, Freecodecamp

Module in JS

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Thu, 12 Jan 2023 00:00:00 +0000

A module is just a file. One script is one module. As simple as that.

To make import/export work, browsers need <script type="module">.
Modules have several differences:
- Deferred by default.
- Async works on inline scripts.
- To load external scripts from another origin (domain/protocol/port), CORS headers are needed.
- Duplicate external scripts are ignored.
Modules have their own, local top-level scope and interchange functionality via import/export.
Modules always use strict.
Module code is executed only once. Exports are created once and shared between importers.

When we use modules, each module implements the functionality and exports it. Then we use import to directly import it where it’s needed. The browser loads and evaluates the scripts automatically.

In production, people often use bundlers such as Webpack to bundle modules together for performance and other reasons.

References

javascript info

Oracle Timestamp

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 21 Dec 2022 12:10:08 +0530

The TIMESTAMP datatype is an extension on the DATE datatype. In addition to the datetime elements of the DATE datatype, the TIMESTAMP datatype holds fractions of a second to a precision between zero and nine decimal places, the default being six. There are also two variants called TIMESTAMP WITH TIME ZONE and TIMESTAMP WITH LOCAL TIME ZONE. As their names imply, these timestamps also store time zone offset information.

create table table_name (
 column_name number,
 column_name2 timestamp default systimestamp);

References

dba-oracle
dba-oracle 2

Material UI and Emotion

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 14 Dec 2022 00:00:00 +0000

Material UI uses Emotion as its default styling engine.

Run the following commands to add Material UI to your project:

npm install @mui/material @emotion/react @emotion/styled

Emotion Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.

Styled Components

styled is a way to create React components that have styles attached to them. It’s available from @emotion/styled. styled was heavily inspired by styled-components and glamorous.

import styled from '@emotion/styled'

const Button = styled.button`
 padding: 32px;
 background-color: hotpink;
 font-size: 24px;
 border-radius: 4px;
 color: black;
 font-weight: bold;
 &:hover {
 color: white;
 }
`

render(<Button>This my button component.</Button>)

References

Emotion website

Differenet types of errors in JS

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 13 Dec 2022 00:00:00 +0000

Syntax error
The error occurs when you use a predefined syntax incorrectly.

Reference Error
In a case where a variable reference can’t be found or hasn’t been declared, then a Reference error occurs.

Type Error
An error occurs when a value is used outside the scope of its data type.

RangeError
There is an error when a range of expected values is required

URI Error
When the wrong character(s) are used in a URI function, the error is called.

InternalError
This error occurs internally in the JS engine, especially when it has too much data to handle and the stack grows way over its critical limit.

Evaluation Error
Current JavaScript engines and EcmaScript specifications do not throw this error. However, it is still available for backward compatibility. The error is called when the eval() backward function is used.

References

scaler

Drop table in PL SQL

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 25 Oct 2022 00:00:00 +0000

To move a table to the recycle bin or remove it entirely from the database, you use the DROP TABLE statement:

DROP TABLE schema_name.table_name
[CASCADE CONSTRAINTS | PURGE];

First, indicate the table and its schema that you want to drop after the DROP TABLE clause. If you don’t specify the schema name explicitly, the statement assumes that you are removing the table from your own schema.
Second, specify CASCADE CONSTRAINTS clause to remove all referential integrity constraints which refer to primary and unique keys in the table. In case such referential integrity constraints exist and you don’t use this clause, Oracle returns an error and stops removing the table.
Third, specify PURGE clause if you want to drop the table and release the space associated with it at once. By using the PURGE clause, Oracle will not place the table and its dependent objects into the recycle bin.

Refernces

oracle tutorial

Column-Level Collation and Case-Insensitive Database in Oracle

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 24 Oct 2022 00:00:00 +0000

Collation determines how strings are compared, which has a direct impact on ordering (sorting) and equality tests between strings.

There are two basic types of collation.

Binary : Ordering and comparisons of string data are based on the numeric value of the characters in the strings.
Linguistic : Ordering and comparisons of string data are based on the alphabetic sequence of the characters, regardless of their numeric values.

When using binary collations there are three suffixes that alter the behavior of sorts and comparisons.

“_CI” : Case insensitive, but accent sensitive.
“_AI” : Both case and accent insensitive.
“_CS” : Both case and accent sensitive. This is default if no extension is used.

If no collation is specified, directly or via a default setting, the default USING_NLS_COMP pseudo-collation is used, which means the NLS_SORT and NLS_COMP parameters are used to determine the actual collation used.

// Syntax
COLLATE BINARY_CS / BINARY_CI / BINARY_AI

column_name VARCHAR2(15 CHAR) COLLATE BINARY_CI
create table (...) DEFAULT COLLATION BINARY_CI;
ALTER TABLE t1 DEFAULT COLLATION BINARY_AI;

References

Oracle Base, Oracle Doc

Oracle NLS / National Language Suppport

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 23 Oct 2022 00:00:00 +0000

The NLS_DATABASE_PARAMETERS shows the values of the NLS parameters for the database. Oracle notes these differences between the parameters.

NLS_SESSION_PARAMETERS shows the NLS parameters and their values for the session that is querying the view. It does not show information about the character set.
NLS_INSTANCE_PARAMETERS shows the current NLS instance parameters that have been explicitly set and the values of the NLS instance parameters.
NLS_DATABASE_PARAMETERS shows the values of the NLS parameters for the database. The values are stored in the database.

SELECT * FROM NLS_SESSION_PARAMETERS ORDER BY 1; 
SELECT * FROM NLS_INSTANCE_PARAMETERS ORDER BY 1; 
SELECT * FROM NLS_DATABASE_PARAMETERS ORDER BY 1;

The NLS_LANGUAGE and NLS_TERRITORY values in NLS_DATABASE_PARAMETERS cannot be changed once the database has been created

References

dba-oracle
Oracle Blog

List the months between two dates - PL/SQL

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 11 Oct 2022 00:00:00 +0000

PL SQL Query to list the months between two dates

SELECT TO_CHAR(ADD_MONTHS(TRUNC(TO_DATE('01-JAN-22','DD-MON-YY'), 'MM'), LEVEL -1),'MON-YY')
MONTH_YEAR 
FROM DUAL
CONNECT BY LEVEL <= MONTHS_BETWEEN(TO_DATE('01-DEC-22','DD-MON-YY'), 
 TO_DATE('01-JAN -22','DD-MON-YY')) + 1
ORDER BY LEVEL;

Result set

MONTH_YEAR
JAN-22
FEB-22
MAR-22
APR-22
MAY-22
JUN-22
JUL-22
AUG-22
SEP-22
OCT-22
NOV-22
DEC-22

Middleware in the Express.js

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Thu, 01 Sep 2022 00:00:00 +0000

Middleware functions are functions that have access to the request object (req), the response object (res), and the next function in the application’s request-response cycle. The next function is a function in the Express router which, when invoked, executes the middleware succeeding the current middleware.

Middleware functions can perform the following tasks:

Execute any code.
Make changes to the request and the response objects.
End the request-response cycle.
Call the next middleware in the stack.

If the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function. Otherwise, the request will be left hanging.

To load the middleware function, call app.use(), specifying the middleware function.

For example, the following code loads the myLogger middleware function before the route to the root path (/).

const express = require('express')
const app = express()

const myLogger = function (req, res, next) {
 console.log('LOGGED')
 next()
}

app.use(myLogger)

app.get('/', (req, res) => {
res.send('Hello World!')
})

app.listen(3000)

Snippet for creating a progress bar

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 27 Aug 2022 00:00:00 +0000

Snippet for creating a progress bar in the header section.

 <div class="header mt-100">
 <div class="row">
 <div class="progress">
 <div class="progress-bar" id="myBar"></div>
 </div>
 </div>
 </div>

 <script>
 // When the user scrolls the page, execute scrollFn 
 window.onscroll = function () { scrollFn() };

 function scrollFn() {
 var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
 var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
 var scrolled = (winScroll / height) * 100;
 document.getElementById("myBar").style.width = scrolled + "%";
 }
 </script>

What is a computer port?

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 23 Aug 2022 00:00:00 +0000

What is a port?

A port is a virtual point where network connections starts and end. Ports are software based and managed by a computer’s operating system. Each port is associated with a specific process or service. Ports allow computers to easily differentiate between different kinds of traffic: emails go to a different port than webpages, for instance, even though both reach a computer over the same Internet connection.

What is a port number?

Ports are standardized across all network-connected devices, with each port assigned a number. Most ports are reserved for certain protocols — for example, all Hypertext Transfer Protocol (HTTP) messages go to port 80. While IP addresses enable messages to go to and from specific devices, port numbers allow targeting of specific services or applications within those devices.

References

Cloudflare

Database Management System (DBMS)

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 14 Aug 2022 00:00:00 +0000

A database management system (DBMS) is software that controls the storage, organization, and retrieval of data.

Typically, a DBMS has the following elements:

Kernel code
This code manages memory and storage for the DBMS.
Repository of metadata
This repository is usually called a data dictionary.
Query language
This language enables applications to access the data.

A database application is a software program that interacts with a database to access and manipulate data.

The first generation of database management systems included the following types:

Hierarchical
A hierarchical database organizes data in a tree structure. Each parent record has one or more child records, similar to the structure of a file system.
Network
A network database is similar to a hierarchical database, except records have a many-to-many rather than a one-to-many relationship.

References

Oracle

Relational Model

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Fri, 12 Aug 2022 00:00:00 +0000

In his seminal 1970 paper “A Relational Model of Data for Large Shared Data Banks,” E. F. Codd defined a relational model based on mathematical set theory. Today, the most widely accepted database model is the relational model.

A relational database is a database that conforms to the relational model. The relational model has the following major aspects:

Structures
Well-defined objects store or access the data of a database.
Operations
Clearly defined actions enable applications to manipulate the data and structures of a database.
Integrity rules
Integrity rules govern operations on the data and structures of a database.

A relational database stores data in a set of simple relations. A relation is a set of tuples (rows). A tuple is an unordered set of attribute (columns) values.

A table is a two-dimensional representation of a relation in the form of rows (tuples) and columns (attributes). Each row in a table has the same set of columns. A relational database is a database that stores data in relations (tables). For example, a relational database could store information about company employees in an employee table, a department table, and a salary table.

References

Oracle

Difference Between Cursor And Ref Cursor

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 09 Aug 2022 00:00:00 +0000

Example of Cursor:

declare 
 cursor c1 is select first_name, salary from hr.employees;
begin 
 for c in c1 
 loop
 dbms_output.put_line('Ename: ' || c.first_name || ', Salary: ' || c.salary);
 end loop;
end;

Example of Ref Cursor

declare 
 c1 SYS_REFCURSOR;
 ename varchar2(10);
 sal number;
begin
 open c1 for select first_name, salary from hr.employees;
 LOOP 
 FETCH c1 into ename, sal;
 EXIT WHEN c1%NOTFOUND;
 dbms_output.put_line('Ename: ' || first_name || ', Salary: ' || salary);
 END LOOP;
 close c1; 
end;

They are both cursors and can be processed in the same fashion and at the most basic level, they both are same. There are some important differences between regular cursors and ref cursors which are following:

A ref cursor can not be used in CURSOR FOR LOOP, it must be used in simple CURSOR LOOP statement as in example.
A ref cursor is defined at runtime and can be opened dynamically but a regular cursor is static and defined at compile time.
A ref cursor can be passed to another PL/SQL routine (function or procedure) or returned to a client. A regular cursor cannot be returned to a client application and must be consumed within same routine.
A ref cursor incurs a parsing penalty because it cannot cached but regular cursor will be cached by PL/SQL which can lead to a significant reduction in CPU utilization.
A regular cursor can be defined outside of a procedure or a function as a global package variable. A ref cursor cannot be; it must be local in scope to a block of PL/SQL code.
A regular cursor can more efficiently retrieve data than ref cursor. A regular cursor can implicitly fetch 100 rows at a time if used with CURSOR FOR LOOP. A ref cursor must use explicit array fetching.

Use of ref cursors should be limited to only when you have a requirement of returning result sets to clients and when there is NO other efficient/effective means of achieving the goal.

References

Ask Tom
greenstechnologys

PL/SQL Ref Cursor

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 08 Aug 2022 00:00:00 +0000

A cursor variable is a cursor that contains a pointer to a query result set. The result set is determined by execution of the OPEN FOR statement using the cursor variable.

A cursor variable, unlike a static cursor, is not associated with a particular query. The same cursor variable can be opened a number of times with separate OPEN FOR statements containing different queries. A new result set is created each time and made available through the cursor variable.

Strong typed REF CURSOR

DECLARE TYPE customer_t IS REF CURSOR RETURN customers%ROWTYPE;
c_customer customer_t;

This form of cursor variable called strong typed REF CURSOR because the cursor variable is always associated with a specific record structure, or type.

And here is an example of a weak typed REF CURSOR declaration that is not associated with any specific structure:

Weak typed REF CURSOR

DECLARE TYPE customer_t IS REF CURSOR;
c_customer customer_t;

Starting from Oracle 9i, you can use SYS_REFCURSOR, which is a predefined weak typed REF CURSOR, to declare a weak REF CURSOR as follows:

DECLARE c_customer SYS_REFCURSOR;

The SYS_REFCURSOR data type is known as a weakly-typed REF CURSOR type. Strongly-typed cursor variables of the REF CURSOR type require a result set specification.

References

OracleTututorial
IBM

Referential Equality

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 02 Aug 2022 00:00:00 +0000

We can say two objects are referentially equal when the pointers of the two objects are the same or when the operators are the same object instance. For example {} === {} is false because it is checking referential equality.

Example:

<script>
 var a = 1;
 var b = 1;
 console.log(a == b); // true
 console.log(a === b); // true

 var c = 10;
 var d = "10";
 console.log(c == d); // true
 console.log(c === d); // false

 const name1 = {
 first_name: "sarah",
 };

 const name2 = {
 first_name: "sarah",
 };

 console.log(name1 == name2); // false
 console.log(name1 === name2); // false

 console.log(Object.is(name1, name2)); // false
 console.log(Object.is(name1, name1)); // true
</script>

References

webdevsimplified
geeksforgeeks
Object is

React Reconciliation

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 30 Jul 2022 00:00:00 +0000

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the same with Virtual DOM. If it is not equal React will update the DOM.

React maintains two Virtual DOM at each time, one contains the updated Virtual DOM and one which is just the pre-update version of this updated Virtual DOM. Now it compares the pre-update version with the updated Virtual DOM and figures out what exactly has changed in the DOM like which components have been changed. This process of comparing the current Virtual DOM tree with the previous one is known as ‘diffing’.

The algorithm used for diffing is known as Diffing Algorithm.

Once React finds out what exactly has changed then it updated those objects only, on real DOM. React uses something called batch updates to update the real DOM. It just means that the changes to the real DOM are sent in batches instead of sending any update for a single change in the state of a component. This entire process of transforming changes to the real DOM is called Reconciliation

References

geeksforgeeks

PL/SQL Pseudocolumns

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 27 Jul 2022 00:00:00 +0000

A pseudocolumn behaves like a table column, but is not actually stored in the table. You can select from pseudocolumns, but you cannot insert, update, or delete their values. A pseudocolumn is also similar to a function without arguments. However, functions without arguments typically return the same value for every row in the result set, whereas pseudocolumns typically return a different value for each row.

Rownum is an example for pseudocolumns.

References

Oracle Docs

PL/SQL ROWNUM

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 25 Jul 2022 00:00:00 +0000

ROWNUM is a pseudocolumn (not a real column) that is available in a query. ROWNUM will be assigned the numbers 1, 2, 3, 4, … N , where N is the number of rows in the set ROWNUM is used with. A ROWNUM value is not assigned permanently to a row. A row in a table does not have a number; you cannot ask for row 5 from a table—there is no such thing.

ROWNUM value is actually assigned. A ROWNUM value is assigned to a row after it passes the predicate phase of the query but before the query does any sorting or aggregation. Also, a ROWNUM value is incremented only after it is assigned, which is why the following query will never return a row:

select * from t 
where ROWNUM > 1;

Below query will give you the wrong results,

select * from emp 
where ROWNUM <= 5 
order by sal desc;

To understand the above, check the below query with this structure:

select ..., ROWNUM
from t
where <where clause>
group by <columns>
having <having clause>
order by <columns>;

Think of it as being processed in this order:

The FROM/WHERE clause goes first.
ROWNUM is assigned and incremented to each output row from the FROM/WHERE clause.
SELECT is applied.
GROUP BY is applied.
HAVING is applied.
ORDER BY is applied.

Below is the way ti use the rownum

select * from 
( select * from emp 
order by sal desc ) 
where ROWNUM <= 5;

References

Oracle Blog

Validate Conversion

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 24 Jul 2022 00:00:00 +0000

VALIDATE_CONVERSION determines whether expr can be converted to the specified data type. If expr can be successfully converted, then this function returns 1; otherwise, this function returns 0. If expr evaluates to null, then this function returns 1. If an error occurs while evaluating expr, then this function returns the error.

SELECT VALIDATE_CONVERSION(1000 AS BINARY_DOUBLE)
FROM DUAL;

SELECT VALIDATE_CONVERSION('1234.56' AS BINARY_FLOAT)
FROM DUAL;

SELECT VALIDATE_CONVERSION('July 20, 1969, 20:18' AS DATE,
 'Month dd, YYYY, HH24:MI', 'NLS_DATE_LANGUAGE = American')
FROM DUAL;

SELECT VALIDATE_CONVERSION('200 00:00:00' AS INTERVAL DAY TO SECOND)
FROM DUAL;

SELECT VALIDATE_CONVERSION('P1Y2M' AS INTERVAL YEAR TO MONTH)
FROM DUAL;

SELECT VALIDATE_CONVERSION('$100,00' AS NUMBER,
 '$999D99', 'NLS_NUMERIC_CHARACTERS = '',.''')
FROM DUAL;

SELECT VALIDATE_CONVERSION('29-Jan-02 17:24:00' AS TIMESTAMP,
 'DD-MON-YY HH24:MI:SS')
FROM DUAL;

SELECT VALIDATE_CONVERSION('1999-12-01 11:00:00 -8:00'
 AS TIMESTAMP WITH TIME ZONE, 'YYYY-MM-DD HH:MI:SS TZH:TZM')
FROM DUAL;

SELECT VALIDATE_CONVERSION('11-May-16 17:30:00'
 AS TIMESTAMP WITH LOCAL TIME ZONE, 'DD-MON-YY HH24:MI:SS')
FROM DUAL;

References

Oracle Docs

PL/SQL SELECT INTO Clause

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 20 Jul 2022 00:00:00 +0000

The SELECT INTO is actually a standard SQL query where the SELECT INTO clause is used to place the returned data into predefined variables.

create or replace function auth_Name
( v_auth_state IN author.author_state%type)
return varchar2

as
 v_authName author.author_last_name%type;
 
 begin
 select author_last_name into v_authName
 from author
 where author_state = v_auth_state;

 return v_authName;

 exception

 when TOO_MANY_ROWS
 then return 'Too Many Authors in that State';

 when NO_DATA_FOUND
 then return 'No Authors in that State';

 when others
 then raise_application_error(-20011,'Unknown Exception in authName Function');

end;

References

dba-Oracle

Count(*) is unsafe

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 19 Jul 2022 00:00:00 +0000

SELECT COUNT(*) INTO var WHERE CONDITION;

IF var > 0 THEN
SELECT NEEDED_FIELD INTO otherVar WHERE CONDITION;

In PLSQL method with count(*) is unsafe in above code. If another session deletes the row that met the condition after the line with the count(*), and before the line with the select ... into, the code will throw an exception that will not get handled.

Use the below insted,

SELECT NEEDED_FIELD INTO var WHERE CONDITION;
EXCEPTION
WHEN NO_DATA_FOUND

References

Stack Overflow

Set Define OFF

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Mon, 18 Jul 2022 00:00:00 +0000

The SET DEFINE command changes the prefix character used to mark substitution variables. You can use SET DEFINE to turn variable substitution off.

SET DEF[INE] {OFF | ON | prefix_char}

Define is a SQL*Plus client variable. It is NOT a database level setting.

When you start SQL*Plus, variable substitution will be on by default, and the default prefix character is an ampersand. If you are running a script that uses ampersands in text strings, you may want to change the prefix character to something else. If your script doesn’t use substitution variables, you may find it easiest to turn the feature off.

References

Oreilly

Motivation for fragments

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 03 Apr 2022 00:00:00 +0000

A common pattern is for a component to return a list of children. In the below example when Column component is rendering the HTML will be invalid as a div is coming in the middle of the table. Whenever we are using Fragments, we can avoid that.

Take this example React snippet:

class Table extends React.Component {
 render() {
 return (
 <table>
 <tr>
 <Columns />
 </tr>
 </table>
 );
 }
}

would need to return multiple elements in order for the rendered HTML to be valid. If a parent div was used inside the render() of , then the resulting HTML will be invalid.

class Columns extends React.Component {
 render() {
 return (
 <div>
 <td>Hello</td>
 <td>World</td>
 </div>
 );
 }
}

results in a output of:

<table>
 <tr>
 <div>
 <td>Hello</td>
 <td>World</td>
 </div>
 </tr>
</table>

Keyed Fragments

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sat, 02 Apr 2022 00:00:00 +0000

Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:

function Glossary(props) {
 return (
 <dl>
 {props.items.map(item => (
 // Without the `key`, React will fire a key warning
 <React.Fragment key={item.id}>
 <dt>{item.term}</dt>
 <dd>{item.description}</dd>
 </React.Fragment>
 ))}
 </dl>
 );
}

Fragments

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Fri, 01 Apr 2022 00:00:00 +0000

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

render() {
 return (
 <React.Fragment>
 <ChildA />
 <ChildB />
 <ChildC />
 </React.Fragment>
 );
}

Short Syntax

Here is the shorter syntax you can use for declaring fragments. It looks like empty tags:

class Columns extends React.Component {
 render() {
 return (
 <>
 <td>Hello</td>
 <td>World</td>
 </>
 );
 }
}

Motivation for fragments in React.

TYPE Attribute

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 02 Mar 2022 00:00:00 +0000

The %TYPE attribute lets use the datatype of a field, record, nested table, database column, or variable in your own declarations, rather than hardcoding the type names.

You can use the %TYPE attribute as a datatype specifier when declaring constants, variables, fields, and parameters. If the types that you reference change, your declarations are automatically updated.

This technique saves you from making code changes when, for example, the length of a VARCHAR2 column is increased. Note that column constraints, such as the NOT NULL and check constraint, or default values are not inherited by items declared using %TYPE.

undefined and not defined in JS

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Tue, 22 Feb 2022 00:00:00 +0000

undefined

undefined is a property of the global object. That is, it is a variable in global scope. The initial value of undefined is the primitive value undefined.

A variable is ‘declared’, it has its own placeholder (memory is allcoated) but not having the value of itself ‘defined’ hence ‘undefined’. Until the variable has assigned a value, the ‘undefined’ fills that particular placeholder and ‘undefined’ is itself a datatype.

Not Defined

This case comes in error where js engine neither find that particular variable nor its placeholder and cannot find the variable in 1st phase of context (Memory allocation context)

JS is loosely typed language, this means that JavaScript will figure out what type of data you have and make the necessary adjustments so that you don’t have to redefine your different types of data.

References

MDN

Intersection Observer API

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 20 Feb 2022 00:00:00 +0000

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

Syntax to create Intersection Observer API

const observer = new IntersectionObserver(entries => {
console.log(entries)
})

References

MDN Web Docs
webdevsimplified

Pure functions

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Sun, 20 Feb 2022 00:00:00 +0000

A pure function is a function which:

Given the same input, always returns the same output and the Produces have no side effects.

Preoperties

No random values
No current date/time
No global state
No mutation of parameters

Benefits

Self-documenting
Easily testable

Primitive Data types in JS

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Fri, 18 Feb 2022 00:00:00 +0000

In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties. There are 7 primitive data types:

string
number
bigint
boolean
undefined
symbol
null

All primitives are immutable; that is, they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned to a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered.

References

MDN

Shortest Program in JS

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Thu, 10 Feb 2022 00:00:00 +0000

Shortest Program in JS: Empty file. Still, browsers make global Execution context and global space along with Window object.
Global scope: Anything that is not in a function, is in the global space.
Variables present in a global space can be accessed by a “window” object. (like window.a)
In global scope, (this === window) object. For example refer the below,

var a = 10;

Console.log(windows.a) // 10
Console.log(a) // 10
Console.log(this.a) // 10

Class and Function Hoisting in JS

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 02 Feb 2022 00:00:00 +0000

An important difference between function declarations and class declarations is that while functions can be called in code that appears before they are defined, classes must be defined before they can be constructed.

`class` hoisting

Classes defined using a class declaration are hoisted, which means that JavaScript has a reference to the class. However the class is not initialized by default, so any code that uses it before the line in which it is initialized is executed will throw a ReferenceError.

const p = new Rectangle(); // ReferenceError
class Rectangle {}

This occurs because while the class is hoisted its values are not initialized.

Function and class expression hoisting

Function expressions and class expressions are not hoisted.

References

w3schools

Stateless and Stateful

binovarghese8120@gmail.com (Bino Kochumol Varghese) — Wed, 05 Jan 2022 00:00:00 +0000

The state of an application (or anything else, really) is its condition or quality of being at a given moment in time—its state of being. Whether something is stateful or stateless depends on how long the state of interaction with it is being recorded and how that information needs to be stored.

Stateless

A stateless process or applicaton can be understood in isolation. There is no stored information or references to past transactions. Each transaction is made as if from scratch for the first time. Think of stateless transactions as a vending machine: a single request and a response.

Stateful

Stateful applications and processes, however, are those that can be returned to again and again, like online banking or email. They’re performed with the context of previous transactions and the current transaction may be affected by what happened during previous transactions. For these reasons, stateful apps use the same servers each time they process a request from a user.

References

Redhat blog

Notes on Bino

Start the Hugo server with your local IP

Software gardening and death

NOT IN vs NOT EXISTS in PL/SQL

References

Unhang Windows PC

Diffdiff and Emoji Kitchen

Google AI Overview

Custom folder Icons with Material Icon Theme

Sticky footers

Upgrade Hugo

Modernization of Apps

Links

Hide details in the mobile screen with Bootstrap

SQLite is the most deployed and most used database

To extract the value of a tag from an XML-like string in PL/SQL

Example Using EXTRACTVALUE

Example Using XMLTABLE

Varchar datatype limits

References

PL/SQL commands to view the table details

Use Flashback Query

References

How to break columns in Bootstrap

References

To generate random value in PL/SQL

PL/SQL MINUS Operator

References

Slash pages in Hugo

References

Hugo Troubleshooting

References

Higher order functions

References

Types of states

1. Local State

2. Cross-Component State

3. App-Wide State

Handling errors in LISTAGG

References

Session and token authentication

Session Authentication

Token Authentication

References

Canary in software development

Set up a React project with Vite along with Tailwind CSS

References

What is Skeuomorphism?

References

Connecting MySQL from command line

References

Non-editionable objects

References

Export your Kindle book highlights

Name attribute in input tag

References

Firebase rules update

Display refresh rate

References

PL SQL Constraints

The Simplest way to load CSS asynchronously

References

PL/SQL Returning Into

References

Deleting node modules

References

Directory Objects in PL/SQL

References

What is CSS Modules?

References

What is Styled Components?

References

Difference between React and ReactDOM

Conditional Rendering

References

Lifting state up

Browser default actions

References

Controlled and Uncontrolled Components

References

Example Using `EXTRACTVALUE`

Example Using `XMLTABLE`

`class` hoisting