Web-Dev

HTML

input element attributes: min=“0” max=“10” step=“0.01”

If you don’t specify the step as <1, then floats will be flagged as invalid.

Lists
- ol: ordered list with items li
- ul: unordered list with items li
- dl: description list with term dt and description dd
Link: a tag with href
Image: src for pic url, alt for text if no image
Table: table, thead, tbody, tr, th, td
- use colspan="2" on tr, td

Classes

<article class="class1 class2">
<tag class="group" id="uniq"> </tag>

Forms

The below send the input to http://localhost:3000/search?q=…

<form action="http://localhost:3000/search" method="get">
    <input type="text" name="q" placeholder="Search..."/>
</form>

CSS

CSS can be added to HTML documents in 3 ways:

Inline: use the style attribute inside HTML elements
Internal: use a <style> element in the <head> section
External: use a <link> element to link to an external CSS file. E.g.: <link rel="stylesheet" href="styles.css">

rem is a multiple of the default root font-size. 1rem = 16px (default, but can be changed) Prefer using rem units as much as possible.

h1 {}
.class {}
#id {}

Variables

CSS variables can have a global or local scope. Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared. To create a variable with global scope, declare it inside the :root selector. The :root selector matches the document’s root element. To create a variable with local scope, declare it inside the selector that is going to use it.

:root {
  --blue: #6495ed;
  --white: #faf0e6;
  --font-serif: Georgia, serif;
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

The root element can be accessed using document.documentElement.

Styling

Tables

table {
    border-collapse: collapse; // no borders
}

Performance

Repaint: occurs when changes are made to elements that affect visibility but not the layout. Example: opacity, background-color, visibility, and outline. Repaints are expensive because the browser must check the visibility of all other nodes in the DOM — one or more may have become visible beneath the changed element.

Reflows: refers to the re-calculation of positions and dimensions of all elements, which leads to re-rendering part or all of the document. Changing a single element can affect all children, ancestors, and siblings. Have a bigger impact than repaints.

Triggered when

Adding, removing or changing visible DOM elements
Adding, removing or changing CSS styles
CSS3 animations and transitions
Using offsetWidth and offsetHeight
User actions (activating :hover, entering text, resizing windows, …)

Both are browser-blocking; neither the user or your application can perform other tasks during the time that a repaint or reflow occurring. In extreme cases, a CSS effect could lead to slower JavaScript execution. This is one of the reasons you encounter issues such as jerky scrolling and unresponsive interfaces.

Layout
- don’t use inline styles: triggers reflow as HTML is downloaded
- don’t use tables for layout (or use table-layout: fixed)
minimize CSS rules
reduce DOM tree size and depth
update classes low in DOM tree (i.e., reduce scope of changes)
Update elements in batch by using CSS classes
Use createDocumentFragment to build fragments in memory and then document.body.appendChild(frag);

https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/

HTTP

Methods

GET: The GET method requests a representation of the specified resource. Requests using GET should only retrieve data. Cacheable.
POST: The POST method submits an entity to the specified resource, often causing a change in state or side effects on the server. Not necessarily idempotent. Cacheable.
PUT: The PUT method replaces all current representations of the target resource with the request payload. Idempotent.
DELETE: The DELETE method deletes the specified resource.
PATCH: The PATCH method applies partial modifications to a resource.

Less common

HEAD: The HEAD method asks for a response identical to a GET request, but without the response body.
CONNECT: The CONNECT method establishes a tunnel to the server identified by the target resource.
OPTIONS: The OPTIONS method describes the communication options for the target resource.
TRACE: The TRACE method performs a message loop-back test along the path to the target resource.

Status codes

The status code informs the client of the status of the HTTP server’s response. In HTTP/1.1, 5 kinds of status codes were defined:

1xx: Informational
2xx: Success
- 200 OK
- 201 Created (POST)
- 204 No Content
3xx: Redirection
- 301 Moved Permanently
4xx: Client Error
- 400 Bad Request
- 401 Unauth
- 403 Forbidden
- 404 Not Found
5xx: Server Error
- 500 Internal Server Error
- 501 Not Implemented
- 502 Bad Gateway
- 503 Service Unavailable
- 504 Gateway Timeout

URLs

http://www.example.com/index.html, which indicates a protocol (http), a hostname (www.example.com), and a file name (index.html).

scheme :// host : port : pa/th ? query # fragment

scheme: http, https, file, ftp, …
host: hostname or IP address
port: optional, default port 80 (browsers)
query: optional, query string, e.g. key1=value1&key2=value2 (or ;-delimited)
fragment: optional, secondary resource like section

Monitoring/Logging

Four golden signals or RED

traffic or rate: requests/second
errors: failed requests
latency or duration: time/request
saturation

References

https://github.com/ByteByteGoHq/system-design-101
https://sre.google/sre-book/monitoring-distributed-systems/#xref_monitoring_golden-signals