DIRECTORY Objects in plsql

This view describes all directories accessible to the user.


This view describes all directories specified for the entire database.


Oracle Doc

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} />

Styled Components Doc

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.


Styled Components Doc

Difference between React and ReactDOM

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.

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.


React Doc

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

Controlled and uncontrolled components

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.


React Doc


There are many default browser actions:

  1. mousedown – starts the selection (move the mouse to select).
  2. click on <input type="checkbox"> – checks/unchecks the input.
  3. 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.
  4. 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.
  5. …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.


javascript info

Module in JS

  • A module is a file.
  • 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.


javascript info

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


dba-oracle dba-oracle 2