DEV Community: Albert Chang

Mental Model For SQL Joins

Albert Chang — Fri, 03 Jun 2022 18:24:55 +0000

SYNTAX

SELECT *  
FROM table1 
JOIN table2
    ON table1.id = table2.id;

Just replace JOIN with LEFT JOIN/ FULL OUTER JOIN, etc if using a different join.

Join / Inner Join

loop through each row in table1
for each row in table1, loop through table2
push a new row made up of all the columns in table1 and table2 into the new table if and only if table1.id === table2.id
return the new table

Left / Right Join (table1 LEFT JOIN table2)

loop through each row in table1
for each row in table1, loop through table2
push a new row made up of all the columns in table1 and table2 into the new table if table1.id === table2.id
If table2 has been looped through and no row has been added, add a new row with all the columns in table1 and null for all the columns in table2 to the new table.
return the new table

FULL OUTER JOIN (table1 FULL OUTER JOIN table2)

do a table1 LEFT JOIN table2
do a table1 RIGHT JOIN table2
combine the two tables returned above and remove the duplicate rows.
return the combined table

CROSS JOIN / CARTESIAN JOIN

loop through each row in table1
for each row in table1, loop through table2
push a new row made up of all the columns in table1 and table2 into the new table
return the new table

Note that CROSS JOIN is essentially JOIN without a ON clause.

How Babel transforms JSX to JS

Albert Chang — Thu, 19 May 2022 14:41:35 +0000

When writing JSX you can either start your tag in lowercase <div> or in uppercase <Component>. Below we will discuss each case separately

Lowercase tags

Babel transforms <div>.. into React.createElement('div',...). Essentially treating the tag name div as a string.

Capitalized tags

Babel transforms <Component>... into React.createElement(Component,...). Notice the lack of quotation around Component this means it will get treated as a variable.

What can the variable hold?

The first argument to React.createElement can only hold strings or functions that return something that's renderable. Typically it simply holds a React component, which is a function that returns JSX.

Conclusion

Now we know <Component>.. doesn't have to reference a React component. It can also reference a simple string or any function that returns renderable content.

A Small Trick about JSX Tag Names

Albert Chang — Thu, 17 Mar 2022 11:46:22 +0000

We all know that when writing JSX tags we need to use lowercase with native DOM elements such as <div/> and we need to capitalize our custom components like this<MyCustomComponent/>.

What we may not understand is what goes on in the background when Babel compiles our code. When it comes to JSX Babel needs to transform it into JavaScript so the browser can understand our code.

Case One - Lower Case JSX Tag

<div>...</div> gets turned into React.createElement('div',....); Babel essentially treats div as a string.

Case Two - Capitalized JSX Tag

<MyVariable>..</MyVariable> gets turned into React.createElement(MyVariable, ...) Note that MyVariable do not need to be a React component, it is a plain old JavaScript variable!

CodeSandBox Example on Dynamic Wrapper

Understanding Stacking Context and Z-index

Albert Chang — Tue, 15 Mar 2022 01:58:53 +0000

What are they?

You can think of stacking context as a container that determines how the direct* children are ordered along the z axis(positive direction pointing towards the user). Z-index is used to change the default orders.

*Note that direct/first level children are from the point of view of stacking contexts not the DOM. So if we have the following structure `html -> div -> div -> span`, both divs and the span are siblings as long as the divs do not create additional stacking contexts.

Why should we care?

Usually when elements are not overlapping each other it does not matter who is actually further along the z axis. But often we have elements such as header, footer or modal that will overlap other elements.

How are stacking contexts created?

The following are the most common ways to create stacking contexts:

html element by default creates one.
position:absolute; and position:relative; with z-index set to anything other than auto.
position:fixed; and position:sticky;
grid and flex items with z-index set to anything other than auto.
Setting isolation:isolate;.
Setting opacity to less than 1.

For a full list check MDN Stacking Context

How are direct children actually positioned in a stacking context?

The stacking context container gets placed first.
Elements with negative z-index.
Elements with no z-index or z-index that is invalid on that element.
Elements with z-index:auto, z-index:0, or positioned elements with no explicit z-index.
Elements with positive z-index;

`z-index` is only valid on positioned elements and flex/grid items.

Elements within the same category are ordered following the DOM order.

Examples

Note unless otherwise specified, the elements do not create stacking contexts.

html(default stacking context)
- div1
  - div2
  - div3
  - div4
    - span

In this situation, div1, div2, div3, div4, span are all direct children of the stacking context created by html. So they are all category 3 elements from above section and will be ordered following the DOM order.

html(default stacking context)
- div1
  - div2(position:relative; z-index:1;)
    - div3(position:absolute; z-index:9999;)
- div4(position:relative; z-index:2;)

In this situation, we have 4 stacking contexts. Since only 2 of them, html and div2 have children we don't need to worry about the other 2.
From the pov of the html stacking context, it has three direct children, div1, div2, and div4, and their order along the z axis is the same. This means that despite div3 having a high z-index it will be below div4 since it is contained within a parent(div2) that is rendered below div4.

Summary

Understanding how z-index and how it orders elements along the z axis is all about understanding what stacking context the elements are in and knowing that you can only compare direct children with each other in a stacking context.

CSS Position Property

Albert Chang — Sun, 13 Mar 2022 02:47:51 +0000

What does this property do?

It determines how an element is positioned in the document.

Some Clarifications

offset properties refers to top/right/bottom/left properties
an element's natural position / where an element would naturally be refers to the element without position property defined on it
positioned element refers to an element with display set to anything other than static

All CSS Position Values

position:static; (default)
position:relative;
position:absolute;
position:fixed;
position:sticky;

static

The default value.
Cannot use offset properties.

relative

Allows use of offset properties.
The offset properties are based on where the element would naturally be.
The elements around it will treat this element as if it still sits in its natural position regardless if offset properties are used.

absolute

Allows use of offset properties.
The offset properties are based on the closest non-static ancestor or the initial viewport. This means that if the body is scrollable the absolute element will not move with the viewport.
Elements around it will treat it as if it doesn't exit.

fixed

Allows use of offset properties.
The offset properties are based on the viewport(not the initial viewport) or if any ancestor has transform, perspective or filter set to anything other than none.
Elements around it will treat it as if it doesn't exit.

sticky

Allows use of offset properties.
The offset properties are based on nearest ancestor with overflow set to anything other than visible. If it cannot find one, it uses <html> or <body>, check using document.scrollingElement. Another way to think of offset values is it is the minimum gap between the element and the edge of the viewport while the container is in-frame.
The element is also constrained by its closest block level ancestor. i.e. it cannot leave that ancestor.
The elements around it will treat this element as if it still sits in its natural position regardless if offset properties are used.

Summary

Positioned elements all allow the use of offset properties.
Elements around static, relative, sticky elements will treat them as if they are still in their natural positions.
Elements around absolute and fixed elements will treat them as if they don't exist.

Bite-Sized CSS: Pseudo Classes vs. Pseudo Elements

Albert Chang — Thu, 26 Aug 2021 15:54:11 +0000

Pseudo Classes

Starts with one colon.
Deals with states, such as button:hover, button:focus.
Selects the whole element.
MDN Pseudo Classes

Pseudo Elements

Starts with double colons, ::before, ::first-letter, etc.
Selects part of the element.
MDN Pseudo Elements

Block vs. Inline vs. Inline-Block

Albert Chang — Tue, 17 Aug 2021 06:36:59 +0000

Block

elements with display: block;.

It occupies the entire horizontal space of its parent element.
Always start on a new line.

Most elements by default belongs to this category. For a complete list please refer to MDN list of block elements

Inline

elements with display: inline;

Does not start on a new line.
Its width and height are determined by the content.
Not affected by width, height, margin-top, margin-bottom properties.
Affected by horizontal padding and margin.
Affected by padding-top and padding-bottom, but only visually. Other elements will not respect the vertical paddings.

For a complete list of inline elements MDN list of inline elements

Inline-block

elements with display: inline-block

An inline element that respects margin, width and height.

Practical Introduction to CSS Grid

Albert Chang — Mon, 16 Aug 2021 10:09:51 +0000

What is CSS Grid

A two dimensional system made up of rows and columns that helps you position your html elements.

How to enable and use CSS Grid

On any element, declare display:grid ;
Every item that is added to that element will by default occupy a row.
So if I add five divs to the grid, you will see five rows created and occupied by the divs.

How to modify default behaviour of the grid container element

If you want to create a 3x2 (3 rows x 2 columns) grid then this is what you need to declare on the grid element:

display:grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;

Note: There are many other units you can use here in place of fr, like px, %, and many more. Fr units means the remaining space so in this example all the rows have the same height and all the columns have the same width.

How the items position themselves in a grid container

By default, items flow from left to right, top to bottom. So continuing last section's example, the 1st item will occupy the top left cell, the 2nd item will occupy the top center cell and so on, until the first row is filled up. Then the items will move down to the next row.
Note: This is the default behaviour which can be changed by specifying grid-auto-flow: column, then the items will flow from top to bottom then left to right.

How to position a specific element into a certain cell

Say we have a 3x3 grid.

If we want to position an element with class item into the center cell we have to declare

.item {
  grid-area: 2/2/3/3;
}

grid-area: row-start/ col-start/ row-end/ col-end;
Here the row-start etc, refer to the lines.

There are many different ways to define a grid and to position items on a grid. This only serves as a very basic starting point so you can start using grids in your projects.

Super Short Introduction to Rem & Em

Albert Chang — Sat, 07 Aug 2021 23:09:23 +0000

Rem

Root element's font size. In other words, it is the font size of the html element.
If no font size is specified on the html element, it is determined by the browser's font size setting which has a default of 16px.

Em

Current element's font size. For example, let's say you have a button with a font size of 20px. If you define the padding to be 2em, the size of the padding will be 40px.

DEV Community: Albert Chang

Mental Model For SQL Joins

SYNTAX

Join / Inner Join

Left / Right Join (table1 LEFT JOIN table2)

FULL OUTER JOIN (table1 FULL OUTER JOIN table2)

CROSS JOIN / CARTESIAN JOIN

How Babel transforms JSX to JS

Lowercase tags

Capitalized tags

What can the variable hold?

Conclusion

A Small Trick about JSX Tag Names

Case One - Lower Case JSX Tag

Case Two - Capitalized JSX Tag

CodeSandBox Example on Dynamic Wrapper

Understanding Stacking Context and Z-index

What are they?

*Note that direct/first level children are from the point of view of stacking contexts not the DOM. So if we have the following structure html -> div -> div -> span, both divs and the span are siblings as long as the divs do not create additional stacking contexts.

Why should we care?

How are stacking contexts created?

How are direct children actually positioned in a stacking context?

z-index is only valid on positioned elements and flex/grid items.

Elements within the same category are ordered following the DOM order.

Examples

Summary

CSS Position Property

What does this property do?

Some Clarifications

All CSS Position Values

static

relative

absolute

fixed

sticky

Summary

Bite-Sized CSS: Pseudo Classes vs. Pseudo Elements

Pseudo Classes

Pseudo Elements

Block vs. Inline vs. Inline-Block

Block

Inline

Inline-block

Practical Introduction to CSS Grid

What is CSS Grid

How to enable and use CSS Grid

How to modify default behaviour of the grid container element

How the items position themselves in a grid container

How to position a specific element into a certain cell

There are many different ways to define a grid and to position items on a grid. This only serves as a very basic starting point so you can start using grids in your projects.

Super Short Introduction to Rem & Em

Rem

Em

*Note that direct/first level children are from the point of view of stacking contexts not the DOM. So if we have the following structure `html -> div -> div -> span`, both divs and the span are siblings as long as the divs do not create additional stacking contexts.

`z-index` is only valid on positioned elements and flex/grid items.