anki-frontend

#anki

[TOC]

html: basic input text field in a form

::

<form action="/restaurants">
 <label for="name-input">Name</label>
 <input id="name-input" type="text" name="name">
 <input type="submit" value="Submit">
</form>

html meta tag with the text shown in Google results

::

<html>
 <head>
  <title>main thing in google results</title>
  <meta
    content="text appearing below the link"
    name="description">
 </head>
 <!-- ... -->
</html>

box model properties sequence

::
From inside to outside:

  1. content
  2. padding
  3. border
  4. margin

Four types of CSS length units

::

Options for justify-content for flex-items

::

Site to resize images

::
https://squoosh.app/

How to prevent the default behavior of an event from happening?

::
Using the preventDefault() function in an event.

Example:

element.addEventListener(
  'click',
  (event) => event.preventDefault()
);

How to append content into a DOM element?

::
Using insertAdjacentHTML():

Example:

element.insertAdjacentHTML(
  location,
  htmlContent
);

location can be:

<-- beforebegin -->
<p>
  <-- afterbegin -->
  the content
  <-- beforeend -->
</p>
<-- afterend -->

Get all the properties of an Object in JS

::
Only the keys:

Object.keys(myObj);

The array of key-value pairs:

Object.entries(myObj);
// [ [key1, value1], [keyN, valueN] ]

3 basic steps of using JS in frontend

::

  1. get an element
  2. add an event listener to the element
  3. assign a callback function to be triggered by an event

CSS to use on background images to improve contrast?

::

.banner {
  background-image:
    linear-gradient(
      135deg,
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,0.2) 50%
    ), url('background.jpg');
  background-size: cover;
}

JS: add/remove CSS classes

::

el.classList.add(className)
el.classList.remove(className)
el.classList.toggle(className)

3 most used DOM events

::

click  # any visible element
submit # form
keyup  # window / any focused element

Change style via JS

::

el.style.<CSS-property> = <value>

// examples
el.style.display = 'none'
el.style.backgroundColor = '#fce'

3 main steps of DOM manipulation

::

  1. select one or more elements - usually with document.querySelector() or .getElementById().
  2. define a function to execute
  3. define which event, happening in which element, should trigger the function (probably acting in another element)

StimulusJS key concepts

::

  1. Controllers
  2. Actions
  3. Targets

mnemonic: CAT 🐱

Stimulus' core purpose

::
Automatically connect DOM elements to JavaScript objects (called controllers)

Stimulus: marking an HTML element to be the controller

::
Example to connect a div with the hello_controller.js:

<div data-controller="hello">
</div>

Stimulus controller "header"

::

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  // ...
}

Connect a Stimulus action to a button's click

::

<div data-controller="hello">
  <input type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

NOTE: the action must be in the controller's tree.

Stimulus: steps to set an element as a target

::

  1. mark as target in the html
  2. grab in the controller.js

Stimulus: mark an HTML element as a target

::

<div data-controller="hello">
 <input data-hello-target="nameInput" type="text">
</div>

Stimulus: grab the targets in the controller

::

export default class extends Controller {
  // the target name goes as an element of `targets`
  static targets = [ "nameInput" ]
  
  greet() {
    // and it's accessible by `this.${targetName}Target`
    const element = this.nameInputTarget
  }
}
<!-- basicblock-end -->


---

<!--  basicblock-start -->
## Selector Specificity Ranking
::
1. `!important`
2. inline
3. id
4. class
5. element
<!-- basicblock-end -->