Workbench

A collection of short notes, reading highlights, and code snippets about tech. · 82

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

Emotion website

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

scaler

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

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

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

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

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

Cloudflare

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

Oracle