Kagi Small Web
How to add random quotes to your (Hugo) website footer
Life Left App
Default Apps 2025
Start the Hugo server with your local IP
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
ipconfigfrom 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
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.
Lightbi Version 2
macOS and iOS 20 public beta impressions
Useful PL/SQL queries
NOT IN vs NOT EXISTS in PL/SQL
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 NULLcondition 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
Difference between React and ReactDOM
Unhang Windows PC
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.
Featured posts in Hugo
Diffdiff and Emoji Kitchen
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
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.
Custom folder Icons with Material Icon Theme
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
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-100on : makes the body fill the viewport and act like a vertical Flexbox container.flex-fillon : 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
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
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
To PostgreSQL
Hide details in the mobile screen with Bootstrap
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 mobiletext-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
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.
To extract the value of a tag from an XML-like string in PL/SQL
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;
Understanding Suspense
Varchar datatype limits
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
Hosting your Hugo site on Netlify
Hugo image gallery shortcode
View posts grouped by month in Hugo
PL/SQL commands to view the table details
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 TABLEstatement for table structure details.
To view constraints on the table, you can check here.
Use Flashback Query
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
How to break columns in Bootstrap
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
To generate random value in PL/SQL
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
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
Slash pages in Hugo
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 thecontent/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 thesingle.htmltemplate from thelayouts/_default/folder to render pages by default. However, you can create custom templates in thelayouts/page/ folderto 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 Troubleshooting
Hugo is fast, but ineffecinet templates can make it slower. For checking the performance you can use the below commands.
Use
hugo --logLevel debugto display debug information, warning, and error message.Use
hugo --templateMetricsto 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.Timerto determine the execution time of a block of code. And use thehugo --logLevel infoinfo command line flag when you build the site.
{{ $t := debug.Timer "TestSqrt" }}
{{ range seq 2000 }}
{{ $f := math.Sqrt . }}
{{ end }}
{{ $t.Stop }}
References
Understanding useRef
Higher order functions
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
Tiny React Apps
Understanding useCallback
React Notebook
Understanding useMemo
Notes about Redux
Types of states
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.
How to deploy React app in Firebase
Handling errors in LISTAGG
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
Understanding React custom Hooks
Understanding React Context
Session and token authentication
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
Canary in software development
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
Here is the step by step guide to create a React project with Vite.
- Run the command
npm create vitein 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/viteto Installtailwindcssand@tailwindcss/vitevia npm.Add the
@tailwindcss/viteplugin 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 devor whatever command is configured in yourpackage.jsonfile..
References
What is Skeuomorphism?
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
Connecting MySQL from command line
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
Non-editionable objects
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
Job commands in Oracle PL/SQL
Export your Kindle book highlights
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
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
Set up a feed/ archive page in Hugo to display all posts
Firebase rules update
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.
Beginners notes about TypeScript: Part 2
Beginners notes about TypeScript: Part 1
Codbix No.7
Codbix No.6
Hugo image shortcode
Display refresh rate
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
Hugo alert box shortcode
Hugo Custom Shortcodes
PL SQL Constraints
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
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
mediaattribute is set toprint. printis 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
onloadattribute to change the link’smediatoallonce it finishes loading.
References
Codbix No.5
What is React?
PL/SQL Returning Into
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
Commenting the stored procedures
Deleting node modules
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
Codbix No.4
Data Dictionary Views in PL/SQL
Redirect your webpage using JavaScript
Install a specific version of npm package
Codbix No.3
Directory Objects in PL/SQL
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
What is CSS Modules?
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
What is Styled Components?
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
Codbix No.2
Difference between React and ReactDOM
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
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
Lifting state up
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
There are many default browser actions:
mousedown– starts the selection (move the mouse to select).clickon<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
Controlled and Uncontrolled Components
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
Understanding JSX
Codbix No.1
Card shortcode for Hugo
React components
Module in JS
A module is just a file. One script is one module. As simple as that.
- To make
import/exportwork, 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
Oracle Timestamp
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
Material UI and Emotion
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
Differenet types of errors in JS
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
let and const Keywords Hoisting
Scope, Scope chain and Lexical Environment in JS
Drop table in PL SQL
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 TABLEclause. 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 CONSTRAINTSclause 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
PURGEclause if you want to drop the table and release the space associated with it at once. By using thePURGEclause, Oracle will not place the table and its dependent objects into the recycle bin.
Refernces
Column-Level Collation and Case-Insensitive Database in Oracle
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 NLS / National Language Suppport
The NLS_DATABASE_PARAMETERS shows the values of the NLS parameters for the database. Oracle notes these differences between the parameters.
NLS_SESSION_PARAMETERSshows 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_PARAMETERSshows the current NLS instance parameters that have been explicitly set and the values of the NLS instance parameters.NLS_DATABASE_PARAMETERSshows 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
List the months between two dates - PL/SQL
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
Hoisting in JavaScript
Middleware in the Express.js
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
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?
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
Database Management System (DBMS)
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
Relational Model
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
Difference Between Cursor And Ref Cursor
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
PL/SQL Ref Cursor
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
Referential Equality
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
React Reconciliation
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
PL/SQL Pseudocolumns
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
PL/SQL ROWNUM
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
Validate Conversion
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
PL/SQL SELECT INTO Clause
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
Count(*) is unsafe
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
Set Define OFF
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
How JS code is executed.
Motivation for fragments
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
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
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
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
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
Intersection Observer API
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
Pure functions
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
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
Shortest Program in JS
- 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
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
PL/SQL - Explicit Cursors
PL/SQL - Implicit Cursors
Stateless and Stateful
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.