DEV Community

JayZho
JayZho

Posted on • Updated on

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!

Top comments (0)