hard reload: Ctrl + F5
F12 -> Ctrl+Shift+P -> "screenshot"
delete address history: Shift + Del
remove domain name: F12 -> console
    document.body.innerHTML = document.body.innerHTML.replace(/\.\w+\.\w+(?=:)/g, "")

Percent-encoding reserved |!|#|$|%|&|’|(|)|*|+|,|/|:|;|=|?|@|[|]| |—|—|—|—|—|—|—|—|—|—|—|—|—|—|—|—|—|—|—| |%21|%23|%24|%25|%26|%27|%28|%29|%2A|%2B|%2C|%2F|%3A|%3B|%3D|%3F|%40|%5B|%5D|



empty string indicates that the primary language is unknown

Subresource Integrity

media type

MIME type or content type:




input: the value of an <input>, <select>, or <textarea> element is changed  
ValueChange: mainly for an accessibility purpose, e.g.: <progress>  
change(Firefox OS specific, any change made to a file inside a given storage area)

CSS box model
Every box is composed of four parts (or areas), defined by their respective edges.


content-box is the default.
border-box tells the browser to account for any border and padding in the value you specify for width and height.


“real” content of the element

size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

When the content area has a background, it extends into the padding.


extends the content area to include the element’s padding.

dimensions: padding-box width/height
thickness: padding[-top/right/bottomleft]


extends the padding area to include the element’s borders.

dimensions: border-box width/height
thickness: border[-width]

If the box-sizing property is set to border-box, the border area’s size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.


extends the border area to include an empty area used to separate the element from its neighbors.

dimensions: margin-box width/height
size: margin[-top/right/bottomleft]

When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.


Examples: class="mx-auto / pt-3"

{property}{sides}-{size} for xs
{property}{sides}-{sm, md, lg, xl}-{size}

m - margin
p - padding

t - top
b - bottom
l - left
r - right
x - *-left and *-right
y - *-top and *-bottom
blank - all 4 sides

0 - 0
1 -$spacer * .25
2 -$spacer * .5
3 -$spacer
4 -$spacer * 1.5
5 -$spacer * 3
auto - margin auto


viewport: a virtual "window"
viewport meta tag: let web developers control the viewport's size and scale.

initial-scale: The default is calculated to fit the webpage in the visible area.
maximum-scale:  The default is 5.0. The range is from >0 to 10.0.
user-scalable: whether or not the user can zoom in and out. yes
shrink-to-fit=no: override  "width=device-width" to prevent the page from scaling
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">


Click links to live try: - flex-direction: specifies which direction the main axis runs; column -> vertically - flex-wrap: default nowrap - flex-flow = flex-direction + flex-wrap - justify-content: default flex-start, items sit at the start of the main axis - align-items:default stretch,fill the parent in the direction of the cross axis - align-content:around content items along a flexbox’s cross-axis - flex: grow or shrink to fit the space | flex-grow + flex-shrink + flex-basis

UI Frameworks


Version 3

Version 4

  • compiles faster than ever thanks to Libsass
  • moved nearly everything to flexbox, added a new grid tier to better target mobile devices, and completely overhauled our source Sass with better variables, mixins, and now maps, too.
  • move gradients, transitions, shadows, grid classes, and more into Sass variables.
  • drop support for IE8/IE9, Safari 8-, iOS 8-, etc
  • JS plugins in ES6. new teardown methods, option type checking, new methods, and more.
  • auto-placement of tooltips, popovers, and dropdowns from
  • npm scripts instead of Grunt

Version 5

No more jQuery!
Dropped Internet Explorer 10 and 11
Dropped Microsoft Edge < 16 (Legacy Edge)
Dropped Firefox < 60
Dropped Safari < 12
Dropped iOS Safari < 12
Dropped Chrome < 60

Grid system

Rows must be placed within a .container[-fluid] for proper alignment and padding. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.


.form-group provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging.

.row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

.form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.

whitespace and wrap

New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap



    User-agent: Google

    User-agent: *
    Disallow: /tmp/


htmx | AJAX, CSS Transitions, WebSockets and Server Sent Events: