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 elementvh
/vw
- relative to the viewport height/widthem
- 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
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 -->