anki-frontend

[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:

content
padding
border
margin

Four types of CSS length units

px - absolute
% - relative to the parent element
vh/vw - relative to the viewport height/width
em - relative to the font size of the element

Options for `justify-content` for flex-items

flex-start
flex-end
center
space-between
space-around

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

get an element
add an event listener to the element
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

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

StimulusJS key concepts

Controllers
Actions
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

mark as target in the html
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 -->