HTML
topic name here
note here
Anchor element
download
Causes the browser to treat the linked URL as a download. Can be used with or without a filename value
Without a value
the browser will suggest a filename/extension
filename
defining a value suggests it as the filename
href
The URL that the hyperlink points to
referrerpolicy
How much of the referrer to send when following the link, e.g. no-referrer: the Referer header will not be sent
target
Where to display the linked URL (a tab, window, or <iframe>)
_self
current browsing context. (Default).
_blank
Open in a new tab.
embeds an image into the document.
src
The image URL. Mandatory for the <img> element.
srcset
One or more strings separated by commas.
sizes
One or more strings separated by commas.
media condition
This must be omitted for the last item in the list.
size
source size value
alt
Defines text that can replace the image in the page
fetchpriority
priority to use when fetching the image, Allowed values:
high
high-priority fetch relative to other images
low
low-priority fetch relative to other images
auto
automatic determination of fetch priority
height
height of the image, in pixels. Must be an integer without a unit.
width
width of the image, in pixels. Must be an integer without a unit.
loading
Indicates how the browser should load the image.
eager
Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).
lazy
Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser
represents a self-contained composition
indicates that the enclosed HTML provides contact information
presented as sidebars or call-out boxes.
block quotation element
Document Body element
Button element
autofocus
if the button should have input focus
disabled
button unineractable
referrerpolicy
How much of the referrer to send when following the link, e.g. no-referrer: the Referer header will not be sent.
target
Where to display the linked URL (a tab, window, or <iframe>)
The Graphics Canvas element.
The Table Caption element.
Inline Code element.
The HTML Data List element.
The Details disclosure element.
The Dialog element.
The Content Division element.
The Embed External Content element.
The Figure Caption element.
The Figure with Optional Caption element.
The Footer element.
The Form element.
The HTML Section Heading elements.
The Document Metadata (Header) element.
The Header element.
The Heading Group element.
The Thematic Break (Horizontal Rule) element.
The HTML Document / Root element.
The Inline Frame element.
The Input (Form Input) element.
The Keyboard Input element.
The Label element.
The List Item element.
The External Resource Link element.
The Main element.
The metadata element.
The HTML Meter element.
The Navigation Section element.
The Noscript element.
The External Object element.
The Ordered List element.
The Option Group element.
The HTML Option element.
The Output element.
The Paragraph element.
The Picture element.
The Preformatted Text element.
The Progress Indicator element.
The Script element.
The generic search element
The Generic Section element.
The HTML Select element.
The Media or Image Source element.
The Content Span element.
The Subscript element.
The Disclosure Summary element.
The Superscript element.
The Table element.
The Table Body element.
The Table Data Cell element.
The Textarea element.
The Table Foot element.
The Table Header element.
The Table Head element.
The Document Title element.
The Table Row element.
The Unordered List element.
CSS
topic name here
note here
Anchor element
display: block;
The element generates a block box, generating line breaks both before and after the element when in the normal flow
display: inline;
The element generates one or more inline boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
display: flex;
The element behaves like a block-level element and lays out its content according to the flexbox model
display: inline flex;
The element behaves like an inline-level element and lays out its content according to the flexbox model.
display: grid;
The element behaves like a block-level element and lays out its content according to the grid model.
display: inline grid;
The element behaves like an inline-level element and lays out its content according to the grid model.
display: block;
The element generates a block box, generating line breaks both before and after the element when in the normal flow
sets the accent color for user-interface controls generated by some elements
accent-color: auto;
Represents a UA-chosen color, which should match the accent color of the platform, if any
accent-color: <color>;
Specifies the color to be used as the accent color.
sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis
align-content: normal;
The items are packed in their default position as if no align-content value was set.
align-content: start;
The items are packed flush to each other against the start edge of the alignment container in the cross axis.
sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
align-items: normal;
The effect of this keyword is dependent of the layout mode we are in
align-items: flex-start;
Used in flex layout only, aligns the flex items flush against the flex container's main-start or cross-start side.
overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis
align-self: auto;
Computes to the parent's align-items value
align-self: normal;
The effect of this keyword is dependent of the layout mode we are in.
shorthand CSS property applies an animation between styles.
<single-easing-function>
Determines the type of transition. The value must be one of those available in <easing-function>.
<single-animation-iteration-count>
The number of times the animation is played. The value must be one of those available in animation-iteration-count.
specifies the composite operation to use when multiple animations affect the same property simultaneously
animation-composition: replace;
The effect value overrides the underlying value of the property. This is the default value
animation-composition: add;
The effect value builds on the underlying value of the property. This operation produces an additive effect. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.
animation-composition: accumulate;
The effect and underlying values are combined. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.
time to wait before applying the animation to an element.
animation-delay: <time>;
Delay time
whether an animation should play forward, backward, or alternate back and forth
animation-direction: normal;
The animation plays forwards each cycle
animation-direction: reverse;
The animation plays backwards each cycle.
animation-direction: alternate;
The animation reverses direction each cycle, first iteration being played forwards.
animation-direction: alternate-reverse;
The animation reverses direction each cycle, first iteration being played backwards.
sets the length of time that an animation takes to complete one cycle
animation-duration: auto;
For time-based animations, auto is equivalent to a value of 0s
animation-duration: <time>;
The time that an animation takes to complete one cycle.
sets how a CSS animation applies styles to its target before and after its execution
animation-fill-mode: none;
The animation will not apply any styles to the target when it's not executing
animation-fill-mode: forwards;
The target will retain the computed values set by the last keyframe.
animation-fill-mode: backwards;
The animation will apply the values defined in the first relevant keyframe.
sets the accent color for user-interface controls generated by some elements
animation-iteration-count: infinite;
The animation will repeat forever
animation-iteration-count: <number>;
The number of times the animation will repeat.
specifies the names of one or more @keyframes at-rules that describe the animation to apply to an element
animation-name: none;
A special keyword denoting no keyframes. It can be used to deactivate an animation
animation-name: <name>;
A name identifying the animation.
sets whether an animation is running or paused
animation-play-state: running;
The animation is currently playing
animation-play-state: <name>;
The animation is currently paused.
sets how an animation progresses through the duration of each cycle
animation-timing-function: ease;
Equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the animation, slowing back down at the end
animation-timing-function: linear;
Equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), animates at an even speed.
animation-timing-function: ease-in;
Equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the speed of the transition of the animating property increasing until complete.
animation-timing-function: ease-out;
Equal to cubic-bezier(0, 0, 0.58, 1.0), starts quickly, slowing down the animation continues.
animation-timing-function: ease-in-out;
Equal to cubic-bezier(0.42, 0, 0.58, 1.0), with the animating properties slowly transitioning, speeding up, and then slowing down again.
animation-timing-function: cubic-bezier(p1, p2, p3, p4);
An author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1.
used to display UI elements with platform-specific styling, based on the operating system's theme
appearance: none;
Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded
appearance: auto;
Acts as none on elements with no special styling.
appearance: <compat-special>;
One of menulist-button or textfield. Both of these values are equivalent to auto on elements with no special styling.
appearance: <compat-auto>;
Possible values are button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button, and textarea.
allows you to define the desired width-to-height ratio of an element's box
aspect-ratio: auto;
The effect value overrides the underlying value of the property. This is the default value
aspect-ratio: <ratio>;
The box's preferred aspect ratio is the specified ratio of width / height.
property lets you apply graphical effects such as blurring or color shifting to the area behind an element.
backdrop-filter: none;
No filter is applied to the backdrop
backdrop-filter: <filter-function-list>;
A space-separated list of <filter-function>s or an SVG filter that will be applied to the backdrop. CSS <filter-function>s include:
backdrop-filter: blur();
applies a Gaussian blur
backdrop-filter: brightness();
applies a linear multiplier value on an element
backdrop-filter: contrast();
adjusts the contrast of the element
backdrop-filter: drop-shadow();
applies a drop shadow effect to the
backdrop-filter: grayscale();
converts the element to grayscale
backdrop-filter: hue-rotate();
rotates the hue of an element and its contents
backdrop-filter: invert();
inverts the colors
backdrop-filter: opacity();
applies transparency to the samples in the element
backdrop-filter: saturate();
super-saturates or desaturates the element
backdrop-filter: sepia;
converts the input image to sepia, giving it a warmer, more yellow/brown appearance
property sets whether the back face of an element is visible when turned towards the user.
backface-visibility: visible;
The back face is visible when turned towards the user
backface-visibility: hidden;
The back face is hidden, effectively making the element invisible when turned away from the user.
shorthand CSS property sets all background style properties at once
Constituent properties
This property is a shorthand for the following CSS properties:
background-attachment
sets whether a background image's position is fixed, or scrolls with its containing block.
background-clip
property sets whether an element's background extends underneath its border box, padding box, or content box
background-color
sets the background color of an element
background-image
sets one or more background images on an element
background-origin
sets the background's origin: from the border start, inside the border, or inside the padding
background-position
property sets the initial position for each background image
background-repeat
sets how background images are repeated. along the horizontal and vertical axes, or not repeated at all
background-size
sets the size of the element's background image
sets whether a background image's position is fixed within the viewport, or scrolls with its containing block
background-attachment: fixed;
The background is fixed relative to the viewport
background-attachment: local;
The background is fixed relative to the element's contents.
background-attachment: scroll;
The background is fixed relative to the element itself and does not scroll with its contents.
sets how an element's background images should blend with each other and with the element's background color
background-blend-mode: <blend-mode>;
The blending mode to be applied. There can be several values, separated by commas.
sets whether an element's background extends underneath its border box, padding box, or content box
background-clip: border-box;
The background extends to the outside edge of the border (but underneath the border in z-ordering)
background-clip: padding-box;
The background extends to the outside edge of the padding. No background is drawn beneath the border.
background-clip: content-box;
The background is painted within (clipped to) the content box.
background-clip: text;
The background is painted within (clipped to) the foreground text.
sets the background color of an element
background-color: <color>;
The uniform color of the background. It is rendered behind any background-image.
sets one or more background images on an element
background-image: none;
keyword denoting the absence of images
background-image: <image>;
an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
sets the background's origin: from the border start, inside the border, or inside the padding.
background-origin: border-box;
The background is positioned relative to the border box
background-origin: padding-box;
The background is positioned relative to the padding box.
background-origin: content-box;
The background is positioned relative to the content box.
sets the initial position for each background image.
background-position: <position>;
A <position>. A position defines an x/y coordinate
sets the initial horizontal position for each background image.
background-position-x: replace;
replace
sets the initial vertical position for each background image.
background-position-y: replace;
replace
sets how background images are repeated.
background-repeat: replace;
replace
sets the size of the element's background image.
background-size: replace;
replace
defines the horizontal or vertical size of an element's block.
block-size: replace;
replace
shorthand property sets an element's border. It sets the values of border-width, border-style, and border-color.
border: replace;
replace
setting the vertical position of a positioned element.
bottom: replace;
replace
adds shadow effects around an element's frame.
box-shadow: replace;
replace
sets how the total width and height of an element is calculated.
box-sizing: replace;
replace
puts the content of a table's <caption> on the specified side.
caption-side: replace;
replace
sets the color of the insertion caret.
caret-color: replace;
replace
sets whether an element must be moved below (cleared) floating elements that precede it.
clear: replace;
replace
creates a clipping region that sets what part of an element should be shown.
clip-path: replace;
replace
sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.
color: replace;
replace
Dark/Light mode, allows an element to indicate which color schemes it can comfortably be rendered in.
color-scheme: replace;
replace
breaks an element's content into the specified number of columns.
column-count: replace;
replace
controls how an element's contents are balanced when broken into columns.
column-fill: replace;
replace
sets the size of the gap (gutter) between an element's columns.
column-gap: replace;
replace
shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
column-rule: replace;
replace
shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
columns: replace;
replace
replace.
contain: replace;
replace
shorthand CSS property establishes the element as a query container and specifies the name and type of the containment context used in a container query.
container: replace;
replace
replaces content with a generated value.
content: replace;
replace
property can be used to increase or decrease the value of the named CSS counters by the specified values.
counter-increment: replace;
replace
sets the mouse cursor.
cursor: replace;
replace
sets the direction of text, table columns, and horizontal overflow.
direction: replace;
replace
replace.
filter: replace;
replace
width proprtie
<length>
Defines the width as a distance value
<percentage>
Defines the width as a percentage of the containing block's width.
auto
The browser will calculate and select a width for the specified element
max-content
The intrinsic preferred width
min-content
The intrinsic minimum width
fit-content(<length-percentage>)
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)).
width proprtie
<length>
Defines the height as a distance value
<percentage>
Defines the height as a percentage of the containing block's height.
auto
The browser will calculate and select a height for the specified element
max-content
The intrinsic preferred height
min-content
The intrinsic minimum height
fit-content
Box will use the available space, but never more than max-content
fit-content(<length-percentage>)
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)).
JavaScript
topic name here
note here
Returns the number of characters in a string
finds the first occurrence from the beginning.
finds the last occurrence from the end.
Extracts from 'start' up to (but not including) 'end'
Similar to slice, but cannot handle negative indexes.
Extracts a 'length' number of characters starting at 'start'.
Convert a string to lowercase.
Convert a string to uppercase.
Remove whitespace from the beginning and end of a string.
Remove whitespace from the beginning of a string.
Remove whitespace from the end of a string.
Combine two or more strings
Replace parts of a string with a new substring
Replace parts of a string with a new substring
Uses regular expressions to search for patterns within a string
split a string to an array
Check if one string exists within another
Check if a string begins with specific characters
Check if a string ends with specific characters
Finds the index of the first occurrence of a substring
Creates a new string by repeating your original string a specified number of times
Add specified char at start
Add specified char at end
React
intro to react
note about react
experimental: only available in React's Canary
React Hook that lets you cache a function definition between re-renders
fn
function value that you want to cache
dependencies
The list of all reactive values referenced inside of the fn code
React Hook that lets you read and subscribe to context from your component
SomeContext
The context that you've previously created with createContext
React Hook that lets you synchronize a component with an external system
setup
The function with your Effect's logic
dependencies
optional: The list of all reactive values referenced inside of the setup code
React Hook that lets you add a state variable to your component
initialState
The value you want the state to be initially.
Next.js
topic name here
note here
Unique UI of a route and make routes publicly accessible.
Shared UI for a segment and its children.
Loading UI for a segment and its children.
Not found UI for a segment and its children.