Essays

|

Notes

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

In the link’s media attribute is set to print. Print is a media type which will apply to the print based media or when user tries to print the page. By applyinhg this the CSS will load Asynchronosuly. But we need to apply the style to the page also, for that we can use the onload attribute to set the link’s media to all when it finishes loading.

References

filamentgroup

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

In windows, deleting node modules takes so much time and sometimes it makes my screen unresponsive. I googled for some soultion 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

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;

References

Oracle Doc

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

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

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

React is a JavaScript library for building user interfaces. It is designed to be declarative, meaning that developers specify what the UI should look like based on the current state of the application, and React takes care of updating the UI as needed. React is designed to be efficient and flexible, and is widely used in the development of web and mobile applications.

ReactDOM, on the other hand, is a library that provides an interface between React and the DOM (Document Object Model). The DOM is a tree-like structure that represents the HTML of a web page, and ReactDOM provides a set of functions that allow React components to be rendered to the DOM and updated efficiently.

In short, React is a library for building user interfaces, while ReactDOM is a library for interacting with the DOM and rendering React components to the web page. While they are often used together, they serve different purposes and can be used independently of each other.

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

It is common to call a component with some local state “uncontrolled”.

In contrast, you might say a component is “controlled” when the important information in it is driven by props rather than its own local state. This lets the parent component fully specify its behavior.

When writing a component, consider which information in it should be controlled (via props), and which information should be uncontrolled (via state). But you can always change your mind and refactor later.

References

React Doc