Forem: Lachelle Zhang

openAI chatGPT中国大陆地区注册教程

Lachelle Zhang — Tue, 14 Feb 2023 06:30:08 +0000

去年11月底推出的人工智能对话聊天机器人——chatGPT[1], 已经像浏览器一样全面浸入大家的生活了. 前几个月都比较忙, 也没有什么特定场景必须使用它, 就一直没上手.

最近稍微闲下来一点, 想上手玩一下, 发现大陆地区不在openAI的服务范围. 想写一个简短的教程, 给在大陆区想使用它, 又被“OpenAI‘s services are not available in your country”劝阻的朋友们.

首先, 来明确在注册时我们需要解决的两个关键问题:
1. 如何成功输入并验证邮箱?
2. 如何获取并验证外国地区的手机号?

针对第一个问题, 我们的解决方法当然是走代理, 把自己的IP地址换到支持openAI服务的地区(e.g. 美国, etc). 一般来说, 代理有以下几种方法:
1. 购买海外VPS服务器, 自己搭建ss/ssr节点, 在Shadowrocket等app上使用节点;
2. 直接购买节点, 在Shadowrocket等app上使用节点;
3. 海外学校/研究室提供节点, 直接使用windows/macOS进行连接;
大学的时候时间比较多, 都是购买服务器自己搭建节点. 优点是稳定且便宜, 节点出问题也能自己解决. 后来研一的时候因为研究室提供了节点, 就直接使用windows PPTP协议连接了. 再后来换了M1芯片的macOS, 苹果删除了PPTP协议的连接方式(虽然理论上可用别的方法解决但是...懒了), 就开始直接买别人的节点用了. 这里只说第二种方法怎么操作, 其它两种自行搜索就好.

购买节点: 进入树洞这个网站 -> 点击墙裂推荐下面的树洞 -> 注册然后登陆 -> 点击钱包充值 -> 点击商店购买节点(一般10元/月的就很够用了) -> 点击回到主页, 根据自己的手机/电脑系统选择相应教程安装使用节点的app. DONE!!!
使用节点: 网站的教程里已经说的很清楚了. 这里想强调的是, 请一定在你使用代理的app里把代理模式(Proxy Mode)设置为全局代理(Global). 然后选择支持openAI服务的地区(e.g. 美国, etc.)开始你的科学上网.
测试IP地址: 以防万一还是先看看你有没有成功把IP挂到你要去的地方吧. 直接进入这个网站DNS Leak Test就可以测试.

至此你就完成了IP地址切换. 理应已经可以成功注册openAI并验证邮箱. 但是!!! 要注意你的浏览器是有缓存(cookie/session等一系列缓存)的, openAI可以从浏览器缓存中读取你曾经访问别的网站的IP, 所以强烈建议下载一个谷歌浏览器并打开无痕模式进行注册(无痕模式无缓存).

如果你成功进行到这一步, Big cong! 因为获取并验证外国地区的手机号非常简单. 我们只需要在App Store里下载「PingMe」这个软件(安卓用户直接进入这个网站下载: PingMe 然后打开软件, 用自己的手机号/邮箱注册, 充值购买一个美国的可以接收短信的手机号(购买时服务记得选openAI, 费用是1刀), 把这个手机号填入openAI, 点击send code, 把PingMe给你的code填上去, DONE!!!
从此以后你不用走代理就可以用openAI啦. 图片里是一个它说的冷笑话...
Pls enjoy your chatGPT journey ;)

References

[1] chatGPT: Optimizing Language Models for Dialogue, chatGPT.

CSS - opacity_alpha channel&position properties&transition&transform&flexbox&responsive design

Lachelle Zhang — Sun, 12 Jun 2022 05:56:52 +0000

Opacity & Alpha Channel
position properties
transition
transform
flexbox
Responsive design

1.Opacity & Alpha Channel

Opacity The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden. It applies to the element as a whole, including its contents. Value from 0 to 1.

  div {
    opacity: 0.33;
  }

Alpha Channel The alpha channel is a color component that represents the degree of opacity of a color. Value from 0 to 1.

  div {
    background-color: rgba(0, 209, 112, 0.33);
  }

2.position properties

position: static; The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value. (Normal document flow is the natural flow of elements on a page before we apply any positional properties to them.)
position: relative; The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
position: absolute; The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor(no matter what kind of position its ancestor has, only if its ancestor is positioned, then position: absolute will work fine), if any; otherwise, it is placed relative to the initial contianing block. Its final position is determined by the values of top, right, bottom, and left.
position: fixed; The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport. It always stays in the same place even if the page is scrolled.
position: sticky; It basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view.

3.transition

The transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

transition-property - It sets the CSS properties to which a transition effect should be applied. e.g. margin-right, color, all, none.etc.
transition-duration - It sets the length of time a transition animation should take to complete. By default, the value is 0s. We have s and ms units.
transition-timing-function - It sets how intermediate values are calculated for CSS properties being affected by a transition effect. e.g. linear, ease-in, ease-out.etc.
transition-delay - It specifies the duration to wait before starting a property's transition effect when its value changes. We have s and ms units.

transition - MDN

4.transform

The transform property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. e.g. transform: rotate(45deg), transform: scale(2), transform: translate(x-axis, y-axis), transform: skew(10deg, 5deg).

transform - MDN

5.flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces.

The flex model
When elements are laid out as flex items, they are laid out along two axes:
- main axis: It is the axis running in the direction the flex items are laid out in. The start and end of this axis are called the main start and main end.
- cross axis: It is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end.
- flex container: The parent element that has display: flex set on it.
- flex items: The items laid out as flexible boxes inside the flex container.
flex-direction
It specifies which direction the main axis runs. By default this is set to row.
- row-reverse - The main-start and main-end points are opposite to the content direction.
- column-reverse - The main-start and main-end are opposite to the content direction.
flex-wrap
One issue that arises when you have a fixed width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Here, to solve this, we use flex-wrap property. It defines if flexbox items appear on a single line or on multiple lines within a flexbox container.
- flex-wrap: nowrap; The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed. This is also the default value.
- flex-wrap: wrap; The flexbox items will be distributed among multiple lines if needed.
- flex-wrap: wrap-reverse; Behaves the same as wrap but cross-start and cross-end are permuted.
flex-flow

Shorthand property for flex-direction and flex-wrap. Format: flex-flow: flex-direction flex-wrap;
flex-grow
Defines how much a flexbox item should grow if there's space available.
- flex-grow: 0; The element will not grow if there's space available. It will only use the space it needs.
- flex-grow: 1; The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.
- flex-grow: 2; Because the flex-grow value is relative, its behavior depends on the value of the flexbox item siblings.
flex-shrink
Defines how much a flexbox item should shrink if there's not enough space available.
- flex-shrink: 1; If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.
- flex-shrink: 0; The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.
- flex-shrink: 2; Because the flex-shrink value is relative, its behavior depends on the value of the flexbox item siblings.
flex-basis
Defines the initial size of a flexbox item.
- flex-basis: auto; The element will be automatically sized based on its content, or on any height or width value if they are defined. This is the default value.
- flex-basis: 80px; You can define pixle or (r)em values. The element will wrap its content to avoid any overflow.
flex - This property is a shorthand for flex-grow, flex-shrink and flex-basis. Format as below:
- flex: flex-grow flex-shrink flex-basis;
- flex: flex-grow flex-shrink; flex: flex-grow flex-basis;
- flex: flex-grow;
Horizontal and vertical alignment
You can also use flexbox features to align flex items along the main or cross axis.
- align-items Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.
- align-items: flex-start; - The flexbox items are aligned at the start of the cross axis.
- align-items: flex-end; - The flexbox items are aligned at the end of the cross axis.
- align-items: center; - The flexbox items are aligned at the center of the cross axis.
- align-items: baseline; - The flexbox items are aligned at the baseline of the cross axis. The baseline value will align flex items along their content's baseline.
- align-items: stretch; - The flexbox items will stretch across the whole cross axis.
- align-self Works like align-items, but applies only to a single flexbox item, instead of all of them.
- align-self: auto; - The target will use the value of align-items.
- justify-content Defines how flexbox items are aligned according to the main axis, within a flexbox container.
- justify-content: flex-start; - The flexbox items are pushed towards the start of the container's main axis. This is the default value.
- justify-content: flex-end; - The flexbox items are pushed towards the end of the container's main axis.
- justify-content: center; - The flexbox items are centered along the container's main axis.
- justify-content: space-between; - The remaining space is distributed between the flexbox items.
- justify-content: space-around; - The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.
- align-content Defines how each line is aligned within a flexbox container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox items.
- align-content: stretch; - Each line will stretch to fill the remaining space. This is the default value.
- align-content: flex-start; - Each line will only fill the space it needs. They will all move towards the start of the flexbox conainer's cross axis.
- align-content: flex-end; - Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.
- align-content: center; - Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.
- align-content: space-between; - Each line will only fill the space it needs. The remaining space will appear between the lines.
- align-content: space-around; - Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.
order
Defines the order of a flexbox item without changing the HTML code. Flexbox items will be distributed according to the size of order's value.
- order: 0; - The order of the flexbox items is the one defined in the HTML code. This is the default value.

flexbox - MDN
flexbox - CSS Reference

6.Responsive design

Because more diverse screen sizes became available, the concept of responsive web design(RWD) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.

Media Queries Media queries are a key component of responsive design. And they allow us to run a series of tests and apply CSS selectively to style the page appropriately for the user's needs. For example, the following media query tests to see if the current web page is being displayed as screen media and the viewport is at least 800 pixels wide. The CSS for the .container selector will only be applied if these two things are true.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

Responsive design - MDN

CSS - Selectors&Display&Units

Lachelle Zhang — Fri, 10 Jun 2022 08:15:20 +0000

CSS Selectors
Display properties
CSS Units

1.CSS Selectors

Universal Selector It selects everything in the document and apply styling to them.

  * {
    color: green;
    margin: 0;
    padding: 0;
  }

Element Selector It selects and gives styling to all elements with the same specified element name.

  p {
    color: red;
  }

id Selector It selects the target by id and apply styling to all specified elements with a selected id.

  #button {
    width: 200px;
    height: 200px;
    background: grey;
  }

Class Selector It selects all elements with a specified class and gives styling to them.

  .center {
    text-align: center;
  }

Descendant Selector It selects only those elements that are descendants of a specified element and gives styling to them.

  <div>
    <h2>I am h2</h2>
  </div>

  div h2 {
    background-color: green;
  }

Adjacent Selector It selects the element which is right next to another element at the same level of the hierarchy.

  div + p {
    color: red;
  }

Child Selector
It selects all elements that are the children of a specified element.
Child Selector vs. Descendant Selector
- Child Selector: It selects only the immediate descendant.
- Descendant Selector: It selects all the descendant.

  div > h1 {
    color: green;
  }

Attribute Selector It selects all elements by the name or value of a given attribute and apply styling to them.

  <h3 id="title" class="friend" rel="newfriend">David Walsh</h3>

  h3[rel="newfriend"] {
    color: yellow;
  }

Pseudo Classes Selector If you want to style an element based on the state of a specified element, you can use pseudo classes for that.

  selector:pseudo-class {
    property: value;
  }

e.g.

  button:hover {
    color: green;
  }

Pseudo Element Selector It allows you to apply styling to the specific piece or fragment of the selected element. For example, style the first character, or line, of an element.

  selector::pseudo-element {
    property: value;
  }

  p::first-line {
    color: green;
  }

10 CSS Selectors

2.Display properties

display: none;
The element is completely removed, as if it wasn't in the HTML code in the first place.
display: inline;
The element is turned into an inline element: it behaves like simple text. Any height and width applied will have no effect.
display: block;
The element is turned into a block element: it starts on a new line, and takes up the whole width.
display: inline-block;
The element shares properties of both an inline and a block element:
- inline because the element behaves like simple text, and inserts itself in a block of text
- block because you can apply height and width values
display: list-item;

The element behaves like a list item: <li>. The only difference with block is that a list item has a bullet point.
display: table;

The element behaves like a table: <table>. It can be very useful when you want to make some element's layout like a table.

e.g.

  <div class="wrap">
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </div>
    <div class="block">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>

  .wrap {
    display: table;
  }
  .block {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }

display: table-cell;
The element behaves like a table cell: <td> or <th>. Its content and child elements behave like table cells.
display: table-row;
The element behaves like a table row: <tr>. Its content and child element behave like table cells.
display: flex;
The element is turned into a flexbox container. On its own, it behaves like a block element. Its child elements will be turned into flexbox items.
display: inline-flex;
The element shares properties of both an inline and a flexbox element:
- inline because the element behaves like simple text, and inserts itself in a block of text
- flexbox because its child element will be turned into flexbox items
display: grid;

The element is turning into an grid container. On its own, it behaves like a block element. Its child elements will be turned into grid items.

Flexbox vs. Grid: Flexbox is made for one-dimensional layouts, and the Grid is made for two-dimensional layouts. It means Flexbox can work on either rows or columns at a time, but Grids can work on both.
display: inline-grid;
The element shares properties of both an inline and a grid element:
- inline because the element behaves like simple text, and inserts itself in a block of text
- grid because its child element will be turned into flexbox items

display properties

3.CSS Units

Absolute Lengths
- cm - centimeters
- mm - mellimeters
- Q - Quarter-millimeters(1Q = 1/40th of 1cm)
- in - inches(1in = 96px = 2.54cm)
- px - pixels
- pt - points(1pt = 1/72th of 1in)
- pc - picas(1pc = 12pt)
Relative Lengths
- em - Relative to the font size of the parent, in the case of typographical properties like font-size, and relative to the font size of the element itself, in the case of other properties like width

  <p>
    I am a paragraph
    <span>I am a span</span>
  </p>

  p {
    font-size: 20px;
    border: 1px solid;
    <!-- width property's em is relative to the font size of the element itself. So here width = 2 * 20px = 40px -->
    width: 2em;
  }
  span {
    <!-- font-size property's em is relative to the font size of the parent. So here the font-size = 2 * 20px = 40px -->
    font-size: 2em;
    border: 1px solid;
    display: block;
    <!-- width property's em is relative to the font size of the element itself. So here width = 2 * (2 * 20px) = 80px -->
    width: 2em;
  }

rem - Relative to font-size of the root element(root em). This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px
vw - Relative to 1% of the width of the viewport
vh - Relative to 1% of the height of the viewport
% - Relative to the parent element

CSS Units - W3Schools
CSS Units - MDN

Practices - Day1.Expanding cards

Lachelle Zhang — Tue, 24 May 2022 03:21:52 +0000

CSS

background-image: background-image: url('relative or absolute url path');
@import vs <link>:

@import - It is CSS mechanism to include a style sheet. You can use it when you want to hide styles from older browsers, because @import can't be recognized by them. You can use it when you want to import style sheets into linked style sheets, in other words, you can use it in the css files that you linked in HTML file.
<link> - It is the HTML mechanism. <link> is often more preferred over @import. It provides many useful attributes like rel, you can use rel to choose alternate stylesheet, rel="alternate stylesheet"

box-sizing

content-box: This gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px. width&height = content
border-box: It tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. width&height = border + padding + content So when we write css, we often set all elements box-sizing property to be border-box to avoid strange behaviors.

  * {
    box-sizing: border-box;
  }

Flexbox: It is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces. Set display: flex property and value to the container element then it will act as a flexbox. The elements inside the container(flexbox) are called flexbox items.
align-items: center & justify-content: center:

align-items: It defines how flexbox items are aligned according to the cross axis.
- align-items: center: Set it to the containter element then the flexbox items are aligned at the center of the cross axis. By default, the cross axis is vertical. This means the flexbox items will be centered vertically.
justify-content: It defines how flexbox items are aligned according to the main axis.
- justify-content: center: Set it to the container element then the flexbox items are aligned at the center of the main axis.

vh & vw: Both of them are relative css units. vh means relative to 1% of the height of the viewport, vw means relative to 1% of the width of the viewport. Viewport = the browser window size. If the viewport is 50cm wide, 1vw = (1% * 50) cm = 0.5cm.
overflow: It defines how overflowing content on both horizontal and vertical axis is displayed.

overflow: visible: The overflowing content is visible, while the element itself stays at the specified height.
overflow: hidden: The overflowing content is hidden and can not be accessed.
overflow: scroll: The overflowing content is accessible thanks to a vertical scrollbar.
overflow: auto: The browser decides whether to display a vertical scrollbar or not.

background-size: cover: The keyword cover will resize the background image to make sure the element is fully covered.
border-radius: It defines the radius of the element's corners.
cursor: pointer: It sets the mouse cursor to pointer when hovering the element.
transition: Shorthand property for transition-property transition-duration transition-timing-function and transition-delay. Only transition-duration is required.

@media: The @media rule is used in media queries to apply different styles for different media types/devices. For example,

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }
  .panel: nth-of-type(4),
    .panel: nth-of-type(5) {
    display: none;
  }
}

JavaScript

Document.querySelectorAll(): The Document method querySelectorAll() returns a static NodeList representing a list of the document's elements that match the specified group of selectors. For example,

   const panels = document.querySelectorAll(".panel");

Array.prototype.forEach(): The forEach() method executes a provided function once for each array element. Syntax: forEach((element) => {function})
EventTarget.addEventListener(): The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
Element.classList: The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.
DOMTokenList: The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList and many others.
DOMTokenList.add(): The add() method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.
DOMTokenList.remove(): The remove() method of the DOMTokenList interface removes the specified tokens from the list.

Code in: Github

HTML - Creating hyperlinks

Lachelle Zhang — Mon, 16 May 2022 13:16:55 +0000

Creating hyperlinks

`<a> element`

A basic link is created by wrapping the text or other content inside an <a> element and using the href(hypertext Reference) attribute that contains the web address.

<p>I'm creating a link to <a href="www.google.com">the Google homepage</a>.</p>

This gives us the following result:

I'm creating a link to the Google homepage.

title attribute The title contains additional information about the link, such as which kind of information the page contains, or things to be aware of on the web site. Hovering over the link displays the title.

  <p>
    I'm creating a link to
    <a href="www.google.com" title="The best place for searching information"
      >the Google homepage</a
    >.
  </p>

<p>I'm creating a link to <a href="www.google.com" title="The best place for searching information">the Google homepage</a>.</p>

download attribute When you are linking to a resource that's to be downloaded rather than opened in the browser, you can use the download attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:

  <a
    href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
    download="firefox-latest-64bit-installer.exe"
  >
    Download Latest Firefox for Windows (64-bit) (English, US)
  </a>

This gives us the following result:
Download Latest Firefox for Windows (64-bit) (English, US)

E-mail links It's possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the <a> element and the mailto: URL scheme. In its most basic and commonly used form, a mailto: link indicates the email address of the intended recipient.

  <a href="mailto:nowhere@gmail.com">Send email to nowhere</a>

This results in a link that looks like this: Send email to nowhere
In fact, the email address is optional. If you omit it and your href is "mailto:", a new outgoing email window will be opened by the user's email client with no destination address.
Specifying details
In addition to the email address, you can provide other information. The most commonly used of these are "subject", "cc", and "body".

  <a
    href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"
  >
    Send mail with cc, bcc, subject and body
  </a>

%20 represents space.

Document fragments

It's possible to link to a specific part of an HTML document, known as a document fragment, rather than just to the top of the document. To do this you first have to assign an id attribute to the element you want to link to. To link to that specific id, you'd include it at the end of the URL, preceded by a hash symbol(#).

<h1 id="h1">I am h1</h1>
<a href="#h1">Heading to h1</a>

HTML - HTML text fundamentals

Lachelle Zhang — Sun, 15 May 2022 11:17:24 +0000

HTML text fundamentals

Structure in text

One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends. We can add structure to a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.

<h1> - <h6> - headings
<p> - paragraph
<ul> <ol> <li> - unorderd list, ordered list, list
<em> - emphasis
<i> <b> <u> - italic, bold, underline

What is semantics HTML?

The HTML semantics refers to the tags that provide meaning to an HTML page rather than just presentation. It makes HTML more comprehensible by better defining the different sections and layout of web pages.

What are semantic elements?

A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Why do we need semantics?

It makes web pages more informative and adaptable.
It allows browsers and search engines to better interpret content.

HTML - What's in the head? Metadata in HTML

Lachelle Zhang — Thu, 12 May 2022 04:31:23 +0000

What's in the head? Metadata in HTML

What is the HTML head?

The HTML head is the contents of the <head> element. It is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title>, links to CSS, links to custom favicons(favorite icons), and other metadata(data about the HTML, such as the author, the important keywords that describe the document). Web browsers use information contained in the head to render the HTML document correctly.
We will introduce some major elements that are included in the head.

<title>
This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked. This contents are also used in search results.
<meta>
Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document -- the <meta> element.
Specifying your document's character encoding

  <meta charset="utf-8" />

This element specifies the document's character encoding -- the character set that the document is permitted to use. utf-8 is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language:

If you set your character encoding to ISO-8859-1, for example(the character set for the Latin alphabet), your page rendering may appear all messed up:

Note: Some browsers(like Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem. You should still set an encoding of utf-8 on your page anyway to avoid any potential problems in other browsers.

Adding an author and description
Many <meta> elements include name and content attributes:
- name specifies the type of meta element it is; what type of information it contains.
- content specifies the actual meta content.
```
<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications."
/>
```
Specifying an author is beneficial in many ways: it is useful to be able to understand who wrote the page, if you have any questions about the content and you would like to contact them. Some content management systems have facilities to automatically extract page author information and make it available for such purposes.
Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines.
Adding custom icons to your site
A favicon can be added to your page by:
- Saving it in the same directory as the site's index page, saved in .ico format(most browsers will support favicons in more common formats like .gif or .png, but using the .ico format will ensure it works as far back as Internet Explorer 6.)
- Adding the following line into your HTML's <head> block to reference it:
```
<link rel="icon" href="favicon.ico" type="image/x-icon" />
```
Applying CSS and JavaScript to HTML

  <!-- CSS -->
  <link rel="stylesheet" href="my-css-file.css" />
  <!-- JavaScript -->
  <script src="my-js-file.js" defer></script>

Setting the primary language of the document You can(and really should) set the language of your page. This can be done by adding the lang attribute to the opening HTML tag.

  <html lang="en-US"></html>

You can also set subsections of your document to be recognized as different languages.

  <p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

This is useful in many ways. Your HTML document will be indexed more effectively by search engines if its language is set(allowing it to appear correctly in language-specific results, for example), and it is useful to people with visual impairments using screen readers(for exmple, the word "six" exists in both French and English, but is pronounced differently.)
These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

HTML - Getting started with HTML

Lachelle Zhang — Wed, 11 May 2022 07:46:44 +0000

Getting started with HTML

What is HTML?

HTML(Hypertext Markup Language) is a markup language that tells web browsers how to structure the web pages you visited. The enclosing tags can make content into a hyperlink to connect to another page(a), italicize words(i em), and so on.

Anatomy of an HTML element

HTML element = Opening tag + Content + Closing tag

<p>My cat is very cute</p>

Note
Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase. e.g. <title> tag could be written as <Title> or <TiTlE>, etc. However, it is best practice to write all tags in lowercase for consistency and readability.

Block vs inline elements

Block elements: Block-level elements for a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line.

  <address> <article> <aside> <blockquote> <canvas>
  <dd> <div> <dl> <dt> <fieldset>
  <figcaption> <figure> <footer> <form> <h1>-<h6>
  <header> <hr> <li> <main> <nav>
  <noscript> <ol> <p> <pre> <section>
  <table> <tfoot> <ul> <video>

Inline elements: Inline elements are contained within block-level elements, and surround only small parts of the document's content(not entire paragraphs or groupings of content, like em a, etc.). An inline element will not cause a new line to appear in the document.

  <a> <abbr> <acronym> <b> <bdo>
  <big> <br> <button> <cite> <code>
  <dfn> <em> <i> <img> <input>
  <kbd> <label> <map> <object> <output>
  <q> <samp> <script> <select> <small>
  <span> <strong> <sub> <sup> <textarea>
  <time> <tt> <var>

Block-level elements & Inline elements - W3Schools

Empty elements

Elements without content are called empty elements. The common structure of empty elements can be, Empty elements = Opening tag + Attributes in opening tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. For example, the <img> element embeds an image file onto a page.

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
/>

Empty elements are sometimes called void elements.
Note: In HTML, there is no requirement to add a / at the end of an empty element's tag, for example: <img src="images/cat.jpg" />. However, it is also a valid syntax and you may do this when you want your HTML to be valid XML.

Attributes

Attributes contain extra information about the element that won't appear in the content. An attribute should have:

A space between it and the element name.(For an element with more than one attribute, the attributes should be separated by spaces too.)
The attribute name, followed by an equal sign.
An attribute value, wrapped with opening and closing quote marks.

<!-- class is the attribute name and editor-note is the attribute value -->
<p class="editor-note">My cat is very cute</p>

Boolean attributes
Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name. For example,

<input type="text" disabled="disabled" /> <input type="text" disabled />

Anatomy of an HTML document

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

<!DOCTYPE html>: All HTML documents must start with a <!DOCTYPE> declaration. The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect. In HTML5, the declaration is simple: DOCTYPE - W3Schools

   <!DOCTYPE html>

<html></html>: The <html> element. This element wraps all the content on the page. It is sometimes known as the root element.
<head></head>: The <head> element. This element acts as a container for everything you want to include on the HTML page, that isn't the content the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more.
<meta charset="utf-8">: The <meta> element. This tag defines metadata about an HTML document. Metadata is data(information) about data. <meta> tags always go inside the
element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page, but is machine parsable. Metadata is used by browsers(how to display content or reload page), search engines(keywords), and other web services. The charset attribute sets the character set for your document to UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. meta - W3Schools
<title></title>: The <title> element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.
<body></body>: The <body> element. This contains all the content that displays on the page, including text, images, videos, games, playable audo tracks, or whatever else.

Whitespace in HTML

No matter how much whitespace you use inside HTML element content(which can include one or more space character, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. You will use whitespace to make the code more readable. For example, if you need to nest element:

<p>
  My cat is
  <b>very cute</b>
</p>

Entity references: Including special characters in HTML

In HTML, the characters <, >, ", ' and & are special characters. They are parts of the HTML syntax itself. You use them with character references. Each character reference stars with an ampersand(&), and ends with a semicolon.

<   &lt;
>   &gt;
"   &quot;
'   &apos;
&   &amp;

See more in List of XML and HTML character entity references - Wikipedia

HTML comments

To write an HTML comments, wrap it in the special markers . For example:

<!-- I am a comment -->

JavaScript - Set

Lachelle Zhang — Tue, 10 May 2022 13:06:07 +0000

Set

Set - MDN

The Set object lets you store unique values of any type, whether primitive values or object references.

let set = new Set();
set.add(1);
set.add({ name: "kitty" });
console.log(set); // { 1, { name: 'kitty' } }

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

// A value in the Set may only occur once
let set = new Set();
set.add(1);
set.add({ name: "kitty" });
set.add(1);
console.log(set); // { 1, { name: 'kitty' } }

Value equality: 1.+0 & -0 are the same(ES6); 2.NaN & undefined can also be stored in a Set. All NaN values are equated(NaN is considered the same as NaN, even though NaN !== NaN)

//1.`+0` & `-0` are the same(ES6)
let set1 = new Set();
set1.add(+0);
set1.add(-0);
console.log(set1); // { 0 }
//2.`NaN` & `undefined` can also be stored in a Set. All `NaN` values are equated(NaN is considered the same as NaN, even though NaN !== NaN)
let set2 = new Set();
set2.add(NaN);
set2.add(undefined);
set2.add(NaN);
console.log(set2); // { NaN, undefined }

Constructor - Set()
The Set constructor lets you create Set objects that store unique values of any type, whether primitive values or object references.
Syntax - new Set(iterable)

let set = new Set([1, 2, 3, 4, 5]);

Instance properties & methods

size - Returns the number of values in the Set object.

  let set = new Set([1, 2, 3, 4, 5]);
  console.log(set.size); // 5

clear() - Removes all elements from the Set object.

  let set = new Set([1, 2, 3, 4, 5]);
  set.clear();
  console.log(set); // {}

delete() - The delete() method removes a specified value from a Set object, if it is in the set.

  let set = new Set([1, 2, 3, 4, 5]);
  set.delete(1);
  console.log(set); // { 2,3,4,5 }

forEach() - The forEach() method executes a provided function once for each value in the Set object, in insertion order.

  let set = new Set([1, 2, 3, 4, 5]);
  set.forEach((element) => console.log(element)); // 1 -> 2 -> 3 -> 4 -> 5

JavaScript - Object

Lachelle Zhang — Tue, 10 May 2022 13:03:58 +0000

Object

Object - MDN

An object is a collection of properties(key/value pairs). When the value is a function, the property becomes a method.
Objects can be created using the Object() constructor, Object.create() or the literal notation.

Object() constructor: The Object constructor creates an object wrapper for the given value - new Object(value)
- If the value is null or undefined, it will create and return an empty object.

  let obj1 = new Object(null);
  console.log(obj1); // {}
  let obj2 = new Object(undefined);
  console.log(obj2); // {}
  // let obj = new Object() will do the same

Otherwise, it will return an object of a Type that corresponds to the given value.

  let obj3 = new Object(2);
  console.log(obj3); // [Number: 2]
  let obj4 = new Object("hi");
  console.log(obj4); // [String: 'hi']
  let obj5 = new Object(true);
  console.log(obj5); // [Boolean: true]

If the value is an object already, it will return the value.

  let obj6 = new Object({ age: 2 });
  console.log(obj6); // { age: 2 }

Object.create() The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.

  const person = {
    isHuman: false,
    printIntroduction: function () {
      console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    },
  };

  const me = Object.create(person);

  me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
  me.isHuman = true; // inherited properties can be overwritten

  me.printIntroduction();
  // expected output: "My name is Matthew. Am I human? true"

The literal notation

const object = { a: 1, b: 2, c: 3 };

We can access the values in an object by using object['key'] or object.key.

const object = { a: 1, b: 2, c: 3 };
console.log(object["a"]); // 1
console.log(object.a); // 1

Deleting a property from an object - delete operator
The JavaScript delete operator removes a property from an object.

const Employee = {
  firstname: "John",
  lastname: "Doe",
};

console.log(Employee.firstname);
// expected output: "John"

delete Employee.firstname;

console.log(Employee.firstname);
// expected output: undefined

JavaScript - Array

Lachelle Zhang — Mon, 09 May 2022 12:23:23 +0000

Array

Array - MDN

In JavaScript, arrays aren't primitives but are instead Array objects with the following core characteristics:

JavaScript arrays are resizable and can contain a mix of different data types.(If you want an array only contains one type of variables, use typed arrays instead. -- Int8Array, Uint8Array.etc.)
JavaScript arrays are not associative arrays(key value pairs data structure like map), so it must be accessed using integers as indexes.
JavaScript arrays start at 0 index
JavaScript array-copy operations create shallow copies

1. Array-copy operations

spread syntax

const fruits = ["Strawberry", "Mango"];
const fruitsCopy = [...fruits];

from( ) method

const fruits = ["Strawberry", "Mango"];
const fruitsCopy = Array.from(fruits);

slice( ) method

const fruits = ["Strawberry", "Mango"];
const fruitsCopy = fruits.slice();

All the array-copy operations above are implemented by copying each element's value to the new array. When an array contains reference type elements, these operations will only copy the reference of these elements instead of saving the copies in a new memory space.

2. Shallow copy & Deep copy

shallow copy A shallow copy of an object is a copy whose properties share the same references as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too.

let arr = [[1, 2, 3], 4, 5, 6];
let arrCopy = [...arr];
// or arr.from() or arr.slice()

arrCopy[0][2] = 4;
console.log(arr); // [[1, 2, 4], 4, 5, 6]
// original array has been modified. This is because the reference of arr[0] and arrCopy[0] is the same. So no matter which of them has been changed, the other one will also be changed.

Shallow copy's problem

deep copy A deep copy of an object is a copy whose properties do not share the same references as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you can be assured you're not causing the other object to change too. One way to make a deep copy of a JavaScript object is to use JSON.stringify() to convert the object to a JSON string, and then JSON.parse() to convert the string back into a completely new JavaScript object.

const fruits = ["Strawberry", "Mango"];
const fruitsDeepCopy = JSON.parse(JSON.stringify(fruits));

Array Methods

concat( ) The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  let arr3 = arr1.concat(arr2);
  console.log(arr3); // [1,2,3,4,5,6]

every( ) The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

  function func(value) {
    return value < 4;
  }

  let arr = [1, 2, 3];
  console.log(arr.every(func)); //true

fill( )
The fill() method changes all elements in an array to a static value, from a start index(default 0) to an end index(default array.length). It returns the mmodified array. Syntax:
- fill(value) Value to fill the array with. (All elements in the array will be this exact value.)

   let arr = [1, 2, 3];
   arr.fill(6);
   console.log(arr); //[6,6,6]

fill(value, start) Start index(inclusive), default 0.

  let arr = [1, 2, 3];
  arr.fill(6, 1);
  console.log(arr); //[1,6,6]

fill(value, start, end) End index(exclusive), default arr.length.

  let arr = [1, 2, 3];
  arr.fill(6, 1, 2);
  console.log(arr); //[1,6,3]

filter( ) The filter() method creates a new array with all elements that pass the test implemented by the provided function.

  function func(value) {
    return value <= 2;
  }

  let arr = [1, 2, 3];
  let filteredArr = arr.filter(func);
  console.log(filteredArr); //[1,2]

find( ) The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

  let arr = [1, 2, 3];
  const found = arr.find((element) => element > 2);
  console.log(found); // 3

findIndex( ) The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

  let arr = [1, 2, 3];
  const foundIndex = arr.findIndex((element) => element > 2);
  console.log(foundIndex); // 2

flat( )
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
- flat(depth) The depth level specifying how deep a nested array structure should be flattend. Defaults to 1.
```
let arr = [1, 2, 3, [[4, 5]]];
console.log(arr.flat()); // depth = 1, [1,2,3,[4,5]]
console.log(arr.flat(2)); // [1,2,3,4,5]
```
forEach( )

The forEach() method executes a provided function once for each array element.

  let arr = [1, 2, 3];
  arr.forEach((element) => console.log(element * element)); // 1,4,9

includes( ) The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

  let arr = [1, 2, 3];
  console.log(arr.includes(2)); // true
  console.log(arr.includes(4)); // false

join( ) The join() method creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

  const elements = ["Fire", "Air", "Water"];
  console.log(elements.join());
  // expected output: "Fire,Air,Water"
  console.log(elements.join(""));
  // expected output: "FireAirWater"
  console.log(elements.join("-"));
  // expected output: "Fire-Air-Water"

map( ) The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

  let arr = [1, 2, 3];
  let newArr = arr.map((element) => element * 2);
  console.log(newArr); // [2,4,6]

flatMap( ) The flatMap() method returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level. It is identical to a map() followed by a flat() of depth 1, but slightly more efficient than calling those two methods separately.

  let arr = [1, 2, 3];
  let newArr = arr.flatMap((element) => [element * 2]);
  console.log(newArr); // [2,4,6]
  let newArr = arr.flatMap((element) => [[element * 2]]);
  console.log(newArr); // [[2],[4],[6]]

pop( ) The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

  let arr = [1, 2, 3];
  let lastElement = arr.pop();
  console.log(arr, lastElement); // [1,2] 3

push( ) The push() method adds one or more elements to the end of an array and returns the new length of the array.

  let arr = [1, 2, 3];
  let length = arr.push(4, 5, 6);
  console.log(length, arr); // 6 [1,2,3,4,5,6]

reduce( ) The reduce() method executes a reducer function on each element of the array and returns a singel output value. The syntax of the reduce() method is:

  reduce(function (accumulator, currentValue, currentIndex, array) {
    // callback - The function to execute on each array element(except the first element if no `initialValue` is provided). It takes in:
    // accumulator - It accumulates the callback's return values.
    // currentValue - The current element being passed from the array.
    // currentIndex is the index of the current value within the array.
    // array is a reference to the array reduce works on
    // initialValue(optional) - A value that will be passed to `callback()` on first call. If not provided, the first element acts as the `accumulator` on the first call and `callback()` won't execute on it.
  }, initialValue);

Note:

Calling reduce() on an empty array without initialValue will throw TyepError.
reduce() executes the given function for each value of the array from left to right.
reduce() does not change the original array.
It is almost always safer to provide initialValue.

###

Examples to explain reduce() in details.

  // If there is no callback, reduce method return the value of initialValue.
  let value = [].reduce(() => {}, 2);
  console.log(value); // 2
  // If there is no initialValue, the first element of the array will be taken as the accumulator and callback function starts at the second element.
  value = [1, 0].reduce((accumulator, currentValue, currentIndex, arr) => {
    console.log(
      `callback: ${accumulator}, ${currentValue}, ${currentIndex}. arr: ${arr}`
    ); // callback: 1, 0, 1. arr: 1,0
    return accumulator + currentValue + currentIndex;
  });
  console.log(value); // 2

Array.reduce( ) - programiz
Array.reduce( ) - oliver Jumpertz blog

reverse( ) The reverse() method reverses an array in place(In computer science, an in-place algorithm is an algorithm which transforms input using no auxiliary data structure).

  let arr = [1, 2, 3];
  console.log(arr.reverse()); // [3,2,1]

shift( ) The shift() method removes the first element from an array and returns that removed element. The method changes the length of the array.

  let arr = [1, 2, 3];
  let firstElement = arr.shift();
  console.log(`firstElement: ${firstElement}, arr: ${arr}`); // firstElement: 1, arr: 2,3

some( ) The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

  let arr = [1, 2, 3];
  console.log(arr.some((element) => element % 2 === 0)); // true

sort( )
The sort() method sorts the elements of an array in place and returns the sorted array.

sort from min to max(Default)

let arr = [1, 2, 3];
console.log(arr.sort()); // [1,2,3]
console.log(arr.sort((a, b) => a - b)); // [1,2,3]

sort from max to min

let arr = [1, 2, 3];
console.log(arr.sort((a, b) => b - a)); // [3,2,1]

unshift( )

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

  let arr = [4, 5];
  let length = arr.unshift(1, 2, 3);
  console.log(`length: ${length}, arr: ${arr}`); // length: 5, arr: [1,2,3,4,5]

splice( )
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. It returns an array which conains the deleted elements.
Syntax: splice(start, deleteCount, item1, item2, itemN)
- start - The index at which to start changing the array. If greater than the length of the array, start will be set to the length of the array. In this case, no element will be deleted but the method will behave as an adding function, adding as many elements as items provided. If negative, it will begin that many elements from the end of the array. (In this case, the origin -1, meaning -n is the index of the nth last elemtent, and is therefore equivalent to the index of array.length - n.) If start is negative infinity, it will begin from index 0.

  // start > array.length: act like an adding method
  arr = [1, 2, 3];
  let value = arr.splice(4, 0, "changed"); // deleteCount must have a value
  console.log(value, arr); // [] [1,2,3,'changed']

  // start < 0: start = array.length - start
  arr = [1, 2, 3];
  arr.splice(-2, 1, "changed");
  console.log(arr); // [1, 'changed', 3] (start = 1)
  arr.splice(Number.NEGATIVE_INFINITY, 1, "changed"); // [ 'changed', 'changed', 3 ]

deleteCount - An integer indicating the number of elements in the array to remove from start. If deleteCount is omitted, or if its value is equal to or larger than array.length - start, then all the elements from start to the end of the array will be deleted. However, it must not be omitted if there is any item1 parameter. If deleteCount is 0 or negative, no elements are removed. In this case, you should specify at least one new element.

  // deleteCount is omitted or its value >= array.length - start
  // all the elements from start to the end of the array will be deleted
  let arr = [1, 2, 3];
  arr.splice(1); // [1]
  arr.splice(2); // [1,2]
  arr.splice(3); // [1,2,3]
  arr.splice(1, 4); // [1]

  // deleteCount <= 0
  arr = [1, 2, 3];
  arr.splice(1, 0, 1.5); // [ 1, 1.5, 2, 3 ]
  arr.splice(1, -1, 1.5); // [ 1, 1.5, 2, 3 ]

item1, item2, ... - The elements to add to the array, beginning from start. If you do not specify any elements, splice() will only remove elements from the array.

  // If you don't specify any elements, splice() will only remove
  let arr = [1, 2, 3];
  arr.splice(1, 1); // [1,3]

JavaScript - == and ===

Lachelle Zhang — Thu, 05 May 2022 16:22:06 +0000

1. `==`

Equality(==) - MDN

The equality operator's camparison can be roughly summarized as follows:

If the operands are both objects, return true only if both operands reference the same object.

let a = { food: "pork", fruit: "watermelon" };
let b = a;
console.log(a == b); //true
let c = { ...a }; //or other object-copy operations
console.log(a == c); //false

If one operand is null and the other is undefined, return true.

console.log(undefined == null); //true
console.log(null == undefined); //true

If the operands have the same type, they are compared as follows:
- String: return true only if both operands have the same characters in the same order.
```
console.log("abcd" == "abcd"); //true
console.log("abcd" == "abcde"); //false
```
- Number: return true only if both operands have the same value. +0 and -0 are treated as the same value. If either operand is NaN, return false.
```
console.log(1 == 1); //true
console.log(1 == 2); //false
console.log(+0 == -0); //true
console.log(NaN == NaN); //false
```
- Boolean: return true only if operands are both true or both false.
If the operands are of different types, try to convert them to the same type before comparing:
- When comparing a number to a string, try to convert the string to a numeric value.
```
console.log(1 == "1"); //true
```
- If one of the operands is a boolean, convert the boolean operand to 1 if it is true and 0 if it is false.
```
console.log(true == 1); //true
console.log(false == 0); //true
console.log(0 == !!null); // true. !null is true, !true is false, false is 0
console.log(0 == !!undefined); // true. !undefined is true, !true is false, false is 0
```
- If one of the operands is an object and the other is a number or a string, try to convert the object to a primitive using the object's valueOf() and toString() methods.
- Object.prototype.valueOf(): Returns the primitive value of the specified object(objects of type string, number, bigint, boolean, symbol). If the object has no primitive value(objects of type object), it returns the object itself.
```
  // objects of type string, number, bigint, boolean, symbol
  let a = 1;
  console.log(a.valueOf()); // 1
  // objects of type object
  let b = { name: "Kitty" };
  console.log(b.valueOf()); // { name: 'Kitty' }
```
- Object.prototype.toString(): Returns a string representing the object(objects of type string, number, bigint, boolean, symbol). If the object has no primitive value(objects of type object), it returns [object Type].
```
  // objects of type string, number, bigint, boolean, symbol
  let a = 1;
  console.log(a.toString()); // "1"
  // objects of type object
  let b = { name: "Kitty" };
  console.log(b.toString()); // [object Object]
```
- Array.prototype.toString(): Array object overrides Object's method toString(). It returns a string representing the elements of the array.
```
  let arr = ["kitty"];
  console.log(arr.toString()); // 'kitty'
```

// object == string
let obj = { name: "kitty" };
console.log(obj == "kitty"); //false. obj.valueOf(): { name: "kitty" }, obj.toString(): [object Object]
// array == string
let arr = ["kitty"];
console.log(arr == "kitty"); //true. arr.valueOf(): ['kitty'], arr.toString(): 'kitty'

2. `===`

Strict equality(===) - MDN

Unlike the equality operator, the strict equality operator always considers operands of different types to be different.

If the operands are of different types, return false.

consol.log("3" === 3); //false
console.log(true === 1); //false
console.log(null === undefined); //false

If both operands are objects, return true only if they refer to the same object.

let obj1 = { name: "kitty", age: 1 };
let obj2 = obj1;
console.log(obj1 === obj2);
let obj3 = { name: "kitty", age: 1 };
console.log(obj1 === obj3);
let obj4 = { ...obj1 };
console.log(obj1 === obj4);

If both operands are null or both operands are undefined, return true.

console.log(null === null); // true
console.log(undefined === undefined); // true

If either operand is NaN, return false.

console.log(NaN === NaN); // false

Otherwise, compare the two operand's values:
- Numbers must have the same numeric values. +0 and -0 are considered to be the same value.
```
console.log(+0 === -0); //true
console.log(1 === 1); //true
console.log(0 === 1); //false
```
- Strings must have the same characters in the same order.
```
console.log("kitty" === "kitty"); //true
console.log("kitty" === "kity"); //false
```
- Booleans must be both true or both false.

The most notable difference between == and === is that if the operands are of different types, the == operator attempts to convert them to the same type before comparing.