Essays

|

Notes

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.

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 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.

• 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.
• After that you can run the project with command npm run dev.

References

DigitalOcean

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

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

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

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.

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

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.