Frontend Notes

HTML

Some interesting tags

• <a>: link to another web page

• <label>: link text to an input, so when clicked it was as if the input is clicked

• <iframe>: another html page within the current html page

• <audio>: plays music in your page

• <code>: monospace for letters

• <pre>: take tabs and spaces into accounts

• <header>, <nav>, <footer>, etc.: semantic tags rather than functional tags. But search engines like Google or web scrapers would grab info from tags like this and understand the web better.

• <meta>: describes the meta data of the web page. Like page description, image, favicon, etc.

1. <meta name="viewport" content="width=device-width"> sets viewport size to the actual size of the device, rather than auto zooming out. (especially for mobile devices)
2. <meta name="viewport" content="initial-scale=1.0, ..."> tells how much we can zoom in/out.

• <noscript>: defines what shows up when JS is disabled for the web.

• <embed>: embeds media (like a youtube video) into the web page. The main difference from an <iframe> is that <iframe> is used to embed an entire html page while this is for media components.

Images

Raster image vs. Vector image

A raster images stores a 2D array of colours, gets blurry when magnified; while a vector image stores the geometry of the image instead.

JPG (raster)

• 24 bits per colour (more bits means more colour options)
• Lossy compression (JPG encoded when storing and decoded when displaying, but can lose original info after decoding)
• Suitable for high resolution photos

PNG (raster)

• 16 - 24 bits per colour
• Lossless compression
• Suitable mostly for non-photo use cases (when subtles details matter)

Base64 encoding

A binary-to-text encoding scheme to convert binary data to an ASCII string.
A common application is to represent image directly in the <img src="..." /> tag, which stores the image's data as part of the html, reducing the request to further retrieve that image data from an URI. This is a common technique for loading small image files.

CSS

Combinators

.B .C all .C that are inside .B
.B > .C all .C that are direct child of .B
.B + .C sibing .C that follows immediately after .C
.B ~ .C all sibings .C that follows after .C

Pseudo classes

<selector>:<pseudo-class>: select the elements with a special state.
e.g. button:hover div:first-child

Pseudo elements

<selector>::<pseudo-element>: create content for the selected elements or style part of the elements.
e.g. p::after { content: "."; color: red; } appends a red "." after every <p> element

Specificity

!important > inline style > id > class > type

Inline vs. Block elements

Inline elements(like <span>) takes only the width of its content, while block elements(like <div>) takes up the whole line, resulting in a newline for every element.

Grid layout

{display: grid}: Just another useful layout I don't use very often. Use it when necessary then!