Hello - [CODE]

CF – All Active SESSIONS CFC

<cfscript>
    app = 'siteAccess';
    sessiontracker = createObject("java","coldfusion.runtime.SessionTracker");
    sessionCollection = sessionTracker.getSessionCollection(app);

    structEach(sessionCollection, function(k,v){
        writeDump(sessionCollection[k]);
    });
</cfscript>

<cfloop collection="#sessionCollection#" item="sessionKey">
	<cfset sessionData = sessionCollection[sessionKey]>
	ID: #sessionData.cfid#
</cfloop>

CF – Base64 Encode/Decode CFC

//Encode
#toBase64(var)#

// Decode
#toString(BinaryDecode(var, "Base64"))#

CF – Cache Query Within CFC

 cachedwithin="#CreateTimeSpan(0, 2, 0, 0)#"

CF – Component - createObject CFC

<!-- Create the component instance -->
<cfset editorCFC = createObject("component", "cfc.editor")>

<!-- Now you can call the method -->
<div class="post-content">
    #editorCFC.renderPostHTML(postID)#
</div>

CF – CreateDataTime (EOD) CFC

<cfset dateMax = #CreateDateTime(Year(Now()), Month(Now()), Day(Now()), 11, 59, 59)#>

CF – Directory CFC

<!-- Directory List -->
<cfdirectory name="dirFiles" action="list" directory="#APPLICATION.filePath#dir">

<!--- Filter Directory Output --->
<cfdirectory name="dirFiles" action="list" directory="#APPLICATION.filePath#dir" filter="*.cfm">

CF – Inline IF CFC

<!-- New Method - Ternary -->
#(compID is statCompID ? "True" : "False")#

<!-- Odd/Even Row -->
#IIF(currentRow MOD 2, DE ("A"), DE ("B"))#

<!-- Current Page -->
#IIF(currentPage is "home", DE ("active"), DE (""))#

CF – PDF Thumbnail CFC

<cfpdf source="path.to.source" pages="1" action="thumbnail" destination="path.to.save" format="jpg" overwrite="true" resolution="high" scale="25">

// required 
action = "thumbnail" 
source = "absolute or relative pathname to a PDF file|PDF document variable| 
cfdocument variable"

// optional 
destination = "directory path where the thumbnail images are written" 
format = "png|jpeg|tiff" 
imagePrefix = "string used as a prefix in the output filename" 
overwrite = "yes|no" 
password = "PDF source file password"> 
pages = "page or pages to make into thumbnails" 
resolution= "low|high" 
scale = "percentage between 1 and 100" 
transparent = "yes|no"> 
hires = "yes|no" 
overridepage = "yes|no" 
compresstiffs = "yes|no" 
maxscale = "maximum scale of the thumbnail" 
maxlength = "maximum length of the thumbnail" 
maxbreadth = "maximum width of the thumbnail"
jpgdpi = "sets the dpi (dots per inch) value of the jpeg image. The default value is 96 dpi."

CF – queryNew CFC

<cfset myQuery = queryNew("colOne, colTwo, colThree","VarChar, Integer, Integer")>
	
<cfloop query="records_list">

	<cfset queryAddRow(myQuery)>
	<cfset querySetCell(myQuery, "colOne", var1)>
	<cfset querySetCell(myQuery, "colTwo", var2)>
	<cfset querySetCell(myQuery, "colThree", var3)>

</cfloop>

CF – Random String CFC

<!--- // Usable Character String // --->
<cfset passChars="abcdefghijkmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789*^%!">

<cfset passLenth="12">
<cfset newPass="">

<!--- // Character Loop // --->
<cfloop index="x" from="1" to=#passLenth#><cfset findRC = #randRange(1,len(passChars))#><cfset newPass = #newPass# & #Mid(passChars, findRC,1)#></cfloop>

CF – Remove HTML from string CFC

#REReplace(var,"<[^>]*>", "", "ALL")#

CF – Remove Whitespace CFC

#REReplace(var, "[[:space:]]{2,}","","ALL")#

Note: Very handy with CFSaveContent

CF – Replace CFC

// String to URL Friendly
#REReplace(var,"[^0-9A-Za-z]+","-","all")#

// Replace Blanks with Dashes
#Replace(var," ","_", "all")#

//Turn URL to Active Link
#ReReplace(var,"/\b(https?|ftp|file):\/\/\S+[\/\w]/g", "<a href="$&">$&</a>", "all")#

CF – Value List CFC

<cfset testList = valueList(queryname.fieldname)>

CFML – Bracket Notation CFC

// Basic
#FORM[value]#

//Concatination - Using looped index value (i)
#FORM['value_' & i]#

// From Evaluate
#Evaluate(b.parent)# becomes #b[b.parent]#

CFML – queryFilter CFC

<cfset matchingStat = queryFilter(query, function(row) {return row.var == var;})>

#matchingStat.recordCount ? matchingStat.stateDate[1] : "No data"#

Note: Returns a Struct?

CSS – Anchor Position CSS

/* Parent */
.parent {
	position: relative;
	anchor-name: --anchor-name;
}

/* Child */
.child {
	position-anchor: --anchor-name;
	position-try-fallbacks: --alt-position;
	inset: auto;
	top: anchor(bottom);
	left: anchor(left);
	max-width: anchor-size(width);
}

/* Alternate Positioning */
@position-try --alt-position {
  inset: auto;
  bottom: anchor(top);
  right: anchor(right);
  margin-inline-end: 0;
  margin-block-end: 0.5rem;
}

Note: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Using

CSS – Animated Gradient Border CSS

@property --angle {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: true;
}

@keyframes rotate {
  to {
    --angle: 1turn;
  }
}

.button {
  text-decoration: none;
  font: inherit;
  color: black;
  padding: 0.5em 1.25em;
  border-radius: 100vw;

  border: 8px solid transparent;
  background: linear-gradient(white 0 0) padding-box,
    conic-gradient(from var(--angle), blue, purple, red, purple, blue)
      border-box;

  animation: rotate 3s linear infinite;
  animation-play-state: paused;
}

.button:hover,
.button:focus-visible {
  animation-play-state: running;
}

Note: https://codepen.io/kevinpowell/pen/RNWVRRL

CSS – Animation CSS

.sun {
  background-color: yellow;
  border-radius: 50%; /* creates a circular background */
  height: 100vh; /* makes the sun the size of the viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}

/* Animation parameters */
animation-name: none
animation-duration: 0s
animation-timing-function: ease|ease-in|ease-out|linear
animation-delay: 0s
animation-iteration-count: 1|infinate
animation-direction: normal|reverse|alternate|alternate-reverse
animation-fill-mode: none
animation-play-state: running
animation-timeline: auto

CSS – Animation Play State CSS

/* Animation Begins Paused */
.sqr {
  width: 120px;
  height: 120px;
  background-color: #000000;
  border-radius: 10px;
  cursor: pointer;
  animation: rotate 0.5s infinite linear paused;

  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }

  /* Set Play State */
  &:hover {
    animation-play-state: running;
  }
}

CSS – Animation Scroll/View CSS

animation: animation-name linear forwards;
animation-timeline: view() or scroll();

animation-range-start: cover/contain 20vh;
animation-range-end: cover/contain 50vh;

/* <scroller> argument only */
animation-timeline: scroll(nearest);
animation-timeline: scroll(root);
animation-timeline: scroll(self);

/*`<axis>` argument only */
animation-timeline: scroll(block);
animation-timeline: scroll(inline);
animation-timeline: scroll(y);
animation-timeline: scroll(x);

/* <scroller> and <axis> */
animation-timeline: scroll(block nearest);
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);

CSS – Backdrop Filter CSS

backdrop-filter: blur(5px);

CSS – Color CSS

.hsl-red {
  color: hsl(from #ff0000 h s l);
}

.hsl-red-50 {
  color: hsl(from #ff0000 h s l / 0.5);
}

.rgb-red {
  color: rgb(from #ff0000 r g b);
}

.rgb-red-50 {
  color: rgb(from #ff0000 r g b / 0.5);
}

Note: https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/

CSS – Color Mix CSS

/* Can Use Current Color or Variable to Alter Transparency  */
background-color: color-mix(in srgb, currentColor 5%, transparent);

CSS – Container Query CSS

/* Parent Element */
.wrapper {
  container-type: inline-size;
  container-name: card;
}

.c-article {
  /* Default stacked style */
  /* Contain Query Units Width/Height */
  font-size: clamp(14px, 4cqw, 18px);
}

@container card (min-width: 400px) {
  /* Horizontal style 400px or Greater */
  .c-article {
    display: flex;
    align-items: center;
  }
}

CSS – Content Font Awesome CSS

.icon::before {
	content: "\f302";
	font-family: "Font Awesome 6 Pro";
	font-weight: 100;
}

// Unicode Values Required For Dynamic Logo
// data-icon="&#xe178"

.icon::before {
	content: attr(data-icon);
}

CSS – Content Grid CSS

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

img.full-width {
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
}

Note: Fixed size content grid with breakouts and full-width. https://codepen.io/kevinpowell/pen/ExrZrrw

CSS – Custom Properties CSS

/* Color */
@property --logo-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

/* Syntax Values */
<length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, or <custom-ident>

CSS – Custom Radio/Checkbox CSS

form input[type="checkbox"] {
	appearance: none;
	width: 1rem;
	height: 1rem;
	output: 3px solid #ffffff;
	outline-offset: 2px;
	border-radius: 50%;
}

form input[type="checkbox"]:checked {
	background-color: #cc0000;
}

CSS – Custom Select CSS

.custom-select {
	&, &::picker(select) {
		appearance: base-select;

		&::picker-icon {
			content: "\f13a";
			font-family: "Font Awesome 6 Pro";
			font-weight: 400;
		}
	}

	option {
		padding: 0.5rem;
	}

	option:hover {
		background-color: var(--clr-accent-100);
	}

	option:checked {
		background-color: var(--clr-green-100);
		color: var(--clr-accent-000);

		&::checkmark {
			content: "\f058";
			font-family: "Font Awesome 6 Pro";
			font-weight: 400;
		}
	}
}

CSS – Duotone Technique CSS

/* Duotone */
.duotone__red::before {
  background-color: var(--clr-red-100);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: darken;
  position: absolute;
  top: 0;
  left: 0;
}

.duotone__red::after {
  background-color: var(--clr-base-300);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: lighten;
  position: absolute;
  top: 0;
  left: 0;
}

CSS – External Links CSS

a[rel="external"]::after {
  content: " (external link)";
}

a[target="_blank"]::after {
  content: " (opens in new tab)";
}

CSS – Figure/Caption CSS

figure {
  inline-size: fit-content;
  margin-inline: auto;
}

figcaption {
  contain: inline-size;
}

img {
  max-width: 100%; 
}

CSS – File Selector Button CSS

input::file-selector-button {
    font-weight: bold;
    color: dodgerblue;
    padding: 0.5em;
    border: thin solid grey;
    border-radius: 3px;
}

CSS – Filters CSS

filter: drop-shadow(0 0 0.75rem crimson);

CSS – Font-Face CSS

@font-face {
    font-family: "gotham";
    src: url("assets/webfonts/gothambolditalic-webfont.woff2") format("woff2"),
         url("assets/webfonts/gothambolditalic-webfont.woff") format("woff");
    font-weight: 700;
    font-style: italic;

}

@font-face {
    font-family: "gotham";
    src: url("assets/webfonts/gothambook-webfont.woff2") format("woff2"),
         url("assets/webfonts/gothambook-webfont.woff") format("woff");
    font-weight: 300;
    font-style: normal;

}

Note: Preferred format (woff2) goes first

CSS – Form Valid/Invalid CSS

input {
	outline: 2px solid var(--clr-neutral);
}

input:not(:placeholder-shown):valid {
	outline: 2px solid var(--clr-success);
}

input:not(:placeholder-shown):invalid {
	outline: 2px solid var(--clr-error);
}

input:focus:invalid {
	outline: 2px solid var(--clr-warning);
}

/* Alternate option - needs better support */
input:user-valid {
	outline: 2px solid var(--clr-success);
}

input:user-invalid {
	outline: 2px solid var(--clr-error);
}

CSS – Functions CSS

.hero {
	min-height: calc(350px + 20vh);
}

.section-image {
	width: clamp(70px, 80px + 15%, 180px);
}

.sampleMin {
	width: min(50vw, 4000px); 
}

.sampleMax {
	width: max(20vw, 400px);  
}

CSS – Functions CSS

/* Return a semi-transparent value */
@function --opacity(--color, --opacity) {
  result: rgb(from var(--color) r g b / var(--opacity));
}

/* usage */
div {
  background-color: --opacity(red, 80%);
}

/* with custom properties (assuming theme variables) */
.card {
  border-color: --opacity(var(--color-secondary), var(--mostly-opaque));
}

Note: https://una.im/5-css-functions

CSS – Gradient Border CSS

/* Smooth Gradient */
.box-1 {
	border: 10px solid;
	padding: 20px;
	border-image-source: linear-gradient(45deg, red, blue);
	border-image-slice: 1;
}

/* 2-Color Hard Transition */
.box-2 {
	border: 3px solid;
	padding: 20px;
	border-image-source: linear-gradient(90deg, red 50%, blue 50%);
	border-image-slice: 1;
}

/* Radial Gradient in Corner */
.box-3 {
	border-top: 3px solid;
	border-left: 3px solid;
	padding: 20px;
	border-image-source: radial-gradient(circle at top left, red, transparent 50%);
	border-image-slice: 1;
}

CSS – Gradient Text CSS

h1 {
  font-size: 72px;
  background: linear-gradient(#eee, #333);
  background-clip: text;
  color: transparent;
}

// Old Values
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

CSS – Gradients CSS

.linear-grad {
  background-image: linear-gradient(to right, red , yellow);
}

.radial-grad {
  background-image: radial-gradient(red, yellow, green);
}

CSS – Grid CSS

/* Base Grid */
.container {
  	display: grid | inline-grid;
	gap: 2rem;
}

/* Columns & Rows */
.container {
	grid-template-columns: ...  ...;
	/* e.g. 
		1fr 1fr
		minmax(10px, 1fr) 3fr
		repeat(5, 1fr)
		50px auto 100px 1fr
	*/
  	grid-template-rows: ... ...;
  	/* e.g. 
      		min-content 1fr min-content
      		100px 1fr max-content
  	*/
}

/* Grid Template Areas */
.item-a {
	grid-area: header;
}
.item-b {
  	grid-area: main;
}
.item-c {
  	grid-area: sidebar;
}
.item-d {
  	grid-area: footer;
}

.container {
  	display: grid;
  	grid-template-columns: 50px 50px 50px 50px;
  	grid-template-rows: auto;
  	grid-template-areas: 
    	"header header header header"
    	"main main . sidebar"
    	"footer footer footer footer";
}

/* Grid Items */
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

CSS – Grid Auto Cols: Fit/Fill CSS

/* Auto-Fit - Will stetch items across available space - Children will grow */
.grid {
	--min-col-size: 320px;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-size), 100%), 1fr));
}

/* Auto-Fill - Will add blank columns to fill in space - Children will NOT grow */
.grid {
	--min-col-size: 320px;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--min-col-size), 100%), 1fr));
}

Note: Columns have a min width of 320px

CSS – Grid Pile CSS

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

Note: Stack items on top of one another

CSS – Hide Scrollbar CSS

scrollbar-width: none;

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

CSS – Inline SVG / Base64 CSS

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgYmFzZVByb2ZpbGU9InRpbnkiIGhlaWdodD0iMjRweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTguNTg2LDUuNTg2Yy0wLjc4MSwwLjc4MS0wLjc4MSwyLjA0NywwLDIuODI4TDEyLjE3MSwxMmwtMy41ODUsMy41ODZjLTAuNzgxLDAuNzgxLTAuNzgxLDIuMDQ3LDAsMi44MjggIEM4Ljk3NiwxOC44MDUsOS40ODgsMTksMTAsMTlzMS4wMjQtMC4xOTUsMS40MTQtMC41ODZMMTcuODI5LDEybC02LjQxNS02LjQxNEMxMC42MzQsNC44MDUsOS4zNjYsNC44MDUsOC41ODYsNS41ODZ6Ii8+PC9zdmc+);

CSS – Line Clamp CSS

preview-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

Note: This will limit the number of lines to the specified value.

CSS – Loader Animation CSS

/*------- Loader Animation ------- */
.loader {
	margin: 20px auto;
	background-color: #cccccc;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	animation: pulseScaleOut 1s infinite ease-in-out;
}

@-webkit-keyframes pulseScaleOut {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes pulseScaleOut {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

CSS – Logical Selectors CSS

/* Selects H2 when both h2 and Subtitle are present */
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

/* NO SPECIFICITY: Selects any paragraph inside a header, main or footer element that is being hovered */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* SPECIFICITY: Selects any paragraph inside a header, main or footer element that is being hovered */
:is(header, main, footer) p:hover {
  color: blue;
  cursor: pointer;
}

CSS – Media Query CSS

@media only screen and (max-width: 1024px) {
	/*------- 1024 & Under ------- */

}

@media only screen and (max-width: 768px) {
	/*------- 768 & Under ------- */

}

@media only screen and (max-width: 480px) {
	/*------- 480 & Under ------- */

}

@media (width: 900px) {
  /* Styles when viewport width is 900px */
}

@media (width < 900px) {
  /* Styles when viewport width is less than 900px */
}

@media (width > 900px) {
  /* Styles when viewport width is more than 900px */
}

@media (width <= 900px) {
  /* Styles when viewport width is less than or equal to 900px */
}

@media (width >= 900px) {
  /* Styles when viewport width is more than or equal to 900px */
}

@media (orientation: portrait) {
  ...
}

@media (orientation: landscape) {
  ...
}

/* Primary input mechanism is a mouse */
@media (hover: hover) and (pointer: fine) {
  ...
}

/* Primary input mechanism is a joystick */
@media (hover: hover) and (pointer: coarse) {
  ...
}

/* Primary input mechanism is touch */
/* (also targets joystick-less controllers) */
@media (hover: none) and (pointer: coarse) {
  ...
}

/* Primary input mechanism is a stylus */
@media (hover: none) and (pointer: fine) {
  ...
}

Note: https://frontendmasters.com/blog/learn-media-queries/

CSS – Modal CSS

.modal {
	padding: 1em;
	max-width: 50ch;
}

.modal::backdrop {
	background: rgb(0 0 0 / 0.4);
}

:modal {
	background-color:  #ff0000;
}

CSS – Not Hover CSS

.menu-list:has(a:hover) a:not(:hover) {
	opacity: 0.3;
}

Note: Effects the elements not being hovered over

CSS – Overlay with Border Image CSS

.overlay {
  border-image: linear-gradient(hsl(240 100% 20% / 0.6), hsl(0 100% 20% / 0.6))
    fill 1;
}

Note: https://codepen.io/kevinpowell/pen/yLWNbdJ

CSS – Popover / Anchor CSS

.icon-btn {
  /* enable this as an anchor target */
  anchor-name: --anchor-icon;
}

.floaty {
  /* set default anchor target to --anchor-icon */
  position-anchor: --anchor-icon;
  
  /* for [popover] to use inset-area */
  inset: auto;
  
  /* use positioning keywords */
  position-area: block-start;
  
  /* flip to bottom if goes off the top of the screen */
  position-try-fallbacks: flip-block;
  
  /* margin top/bottom space space from the element when flipping */
  margin-block: var(--size-2);
  
  /* prefer a flip position based on more height */
  position-try-order: most-height;
  
  /* hide when the anchor has exited the scrollport */
  position-visibility: anchors-visible;
  
  /* transitions */
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      transform 1s ease-in,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: black;
  }

  &:popover-open {
    opacity: 1;

    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open {
      transform: scale(.9);  
    }
    
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

Note: https://codepen.io/argyleink/pen/mdZXzxW

CSS – Pseudo Selectors CSS

:active
:checked
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:hover
:in-range
:invalid
:lang(language)
:last-child
:last-of-type
:link
:not(selector)
:nth-child(n)
:nth-last-child(n)
:nth-last-of-type(n)
:nth-of-type(n)
:only-of-type
:only-child
:optional
:out-of-range
:read-only
:read-write
:required
:root
:target
:valid
:visited

:is()
:has()
:where()

::after
::before
::first-letter
::first-line
::selection

CSS – Responsive Columns CSS

.wrapper {
  container-type: inline-size;
}

.columns {
  display: grid;
  gap: 2rem;
}

@container (min-width: calc(30ch * 3)) {
  .columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

Note: https://codepen.io/kevinpowell/pen/wvZvdLN

CSS – Scroll Snap CSS

/* Container Property */
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* Element Property */
scroll-snap-align: center;

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

CSS – ScrollBar CSS

/* Custom webkit scrollbars */
pre::-webkit-scrollbar {width: 10px;}
pre::-webkit-scrollbar-track {background: #414854;}
pre::-webkit-scrollbar-thumb {border-radius: 2px;background: #99c77e;}

Note: Only works in Webkit-based browsers

CSS – Selectors & Attributes CSS

/* --- Selects all <p> elements --- */
p {}

/* --- Selects all <p> elements with class="intro" --- */
p.intro {}

/* --- Selects all <div> elements and all <p> elements --- */
div, p {}

/* --- Selects all <p> elements where the immediate parent is a <div> --- */
div > p {}

/* --- Selects the first <p> element that is placed immediately after <div> --- */
div + p {}

/* --- Selects every <ul> element that is preceded by a <p> element --- */
p ~ ul {}

/* --- Selects all <a> elements with a target attribute --- */
a[target] {}

/* --- Selects all <a> elements with target="_blank" --- */
a[target=_blank] {}

/* --- Selects all <a> elements with a title attribute containing the word "flower" --- */
a[title~=flower] {}

/* --- Selects all elements with a lang attribute value equal to "en" or starting with "en-" --- */
a[lang|=en] {}

/* --- Selects every <a> element whose href attribute value begins with "https" --- */
a[href^="https"] {}

/* --- Selects every <a> element whose href attribute value ends with ".pdf" --- */
a[href$=".pdf"] {}

/* --- Selects every <a> element whose href attribute value contains the substring "w3schools" --- */
a[href*="w3schools"] {}

CSS – Style Query CSS

/* Style query must be an exact match (old) */
@container style(--rainy: true) {
  .weather-card {
    background: linear-gradient(140deg, skyblue, lightblue);
  }
}

/* Range query for rain percent (new) */
@container style(--rain-percent > 45%) {
  .weather-card {
    background: linear-gradient(140deg, skyblue, lightblue);
  }
}

Note: Article: https://una.im/range-style-queries/

CSS – Superscript Fix CSS

sup { vertical-align: top; position: relative; top: -0.25em;font-size: 0.8em; }

CSS – Supports CSS

/* Supports animation-timeline */
@supports (animation-timeline: view()) {
	.selector {}
}

CSS – View Transition Custom Element CSS

// Single Element
view-transition-name: --mainnav;

@media (prefers-reduced-motion: no-preference) {
	/* customize how the OLD item transitions out */
	::view-transition-old(--mainnav) {
		animation: var(--animation-fade-out), var(--animation-slide-out-up);
	}

	/* customize how the NEW item transitions in */
	::view-transition-new(--mainnav) {
		z-index: 1;
		animation:
			var(--animation-fade-out) reverse,
			var(--animation-slide-in-up);
	}
}

CSS – View Transitions CSS

// Site Wide Auto
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
     navigation: auto;
  }
}

::view-transition-group(root) {
}

CSS – Visually Hidden CSS

.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

.off-screen {
  left: -100vw;
  position: absolute;
}

Note: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html

CSS – Word/Text Wrap CSS

text-wrap: balance;

/* User Content */
white-space: break-spaces;
white-space: pre-wrap;

CF – Custom Query HTML

<cfset customQ = queryNew("fieldName, fieldDate","VarChar, Timestamp")>

<cfset queryAddRow(customQ)>
<cfset querySetCell(customQ , "fieldName", var1)>
<cfset querySetCell(customQ , "fieldDate", var2)>

CF – Function (STRUCT) HTML

<cffunction name="funcName" access="public" returntype="struct" output="no">
	
	<cfargument name="var1" type="string" required="true">
	<cfargument name="var2" type="string" required="false" default="NULL">

	<cfset respData = StructNew()>
	<cfset respData.var1 = "arguments.var1">
	<cfset respData.var2 = "arguments.var2">

	<cfreturn respData>

</cffunction>

<cfinvoke component="/path/to/cfc" method="funcName" returnvariable="retVal">
  <cfinvokeargument name="var1" value="#value#">
  <cfinvokeargument name="var2" value="#value#">
</cfinvoke>

CF – Function with STRUCT HTML

<cffunction name="funcName" access="remote" returnformat="json" output="false" returntype="struct">
	<cfargument name="var" type="string" required="true">

	<!--- Create STRUCT --->
	<cfset retData = structNew()>
  	<cfset retData.a = #arguments.var#>
  	<cfset retData.b = "NULL">

 	 <!--- Code --->

  	<!--- Return Struct --->
	<cfreturn retData>

</cffunction>

CF – HTTP Request HTML

<!--- Send Request --->
<cfhttp result="result" method="GET/POST" charset="utf-8" url="http://172.212.121.15/stream">
    <cfhttpparam name="input" type="body" value="#varJSONOut#">
</cfhttp>

<cfdump var="#result#">

Note: For making API calls

CF – IsJson HTML

<cfset dataVar = IsJSON(jsonData) ? deserializeJSON(jsonData) : {}>

Note: Returns empty struct if NOT valid.

CF – Query Insert HTML

<cfquery datasource="#APPLICATION.dSource#" name="insert">
	INSERT Into table (
		Var
	)

	Values (
		<cfqueryparam value = "#FORM.#" CFSQLType = "CF_SQL_VARCHAR">
	)
</cfquery>

<!-- Generated Key -->
result="result"
#result.generatedkey#

CF – Query of Query HTML

<cfquery dbtype="query" name="newQuery" maxrows="15">
	SELECT * FROM oldQuery
	ORDER by var DESC
</cfquery>

CF – Query Params HTML

<cfqueryparam value = "1" CFSQLType = "CF_SQL_BIT">
<cfqueryparam value = "#Now()#" CFSQLType = "CF_SQL_TIMESTAMP">
<cfqueryparam value = "#var#" CFSQLType = "CF_SQL_DECIMAL" Scale="2">
<cfqueryparam value = "#var#" CFSQLType = "CF_SQL_INTEGER">
<cfqueryparam value = "#var#" CFSQLType = "CF_SQL_VARCHAR">

<cfqueryparam value = "UUID" CFSQLType = "CF_SQL_VARCHAR" maxLength="35">

<!-- Null Argument -->
null="#IIF(Len(FORM.var) IS 0, true, false)#"

CF – Transaction HTML

<cftransaction> 
	<cftry> 
			<!--- code to run ---> 
			<cftransaction action="commit" /> 
		<cfcatch type="any"> 
			<cftransaction action="rollback" /> 
		</cfcatch> 
	</cftry> 
</cftransaction>

Note: Use for multi-step operations

CF – Try/Catch HTML

<cftry>
  <!--- Run Code Here --->
  <cfcatch type="any">
    <!--- Exception Code Here --->
    <cflog type="error" text="#cfcatch.message#: #cfcatch.detail#">
  </cfcatch>
</cftry>

CF – Try/Catch/Throw HTML

<cftry>
	<!--- Run Code Here --->
  
	<cfcatch type="any">
		<!--- Exception Code Here --->
		#cfcatch.message#: #cfcatch.detail#
		<cflog type="error" text="Error Desc">
	</cfcatch>

</cftry>

<!--- Throw --->
<cfthrow message = "msg" detail = "detail">

CF – Update Query HTML

<cfquery datasource="#APPLICATION.dSource#" name="update">
	UPDATE table
	SET	value = <cfqueryparam value = "#FORM.#" CFSQLType = "CF_SQL_VARCHAR">,
		value2 = <cfqueryparam value = "#FORM.#" CFSQLType = "CF_SQL_VARCHAR">

	WHERE ID = <cfqueryparam value = "#FORM.ID#" CFSQLType = "CF_SQL_INTEGER">
</cfquery>

CFML – AES Encrypt/Decrypt HTML

<!-- Generate AES Encryption Key --->
#generateSecretKey("AES")#

<!-- Example -->
<cfset APPLICATION.siteEncKey = "jIf9Z9NGM4WUBgesrdJJcQ==">

<cfset varDecrypted = decrypt(var, APPLICATION.siteEncKey , 'AES', 'Base64')>
<cfset varEncrypted = encrypt(var, APPLICATION.siteEncKey , 'AES', 'Base64')>

CFML – CSRF HTML

<!--- Front-End Form --->
<cfset csrfToken = CSRFGenerateToken()>
<input type="hidden" name="csrfToken" value="#csrfToken#">

<!--- Back-End Process --->
<cfif CSRFVerifyToken(form.csrfToken)>
    <!--- Run Process--->
</cfif>

Note: SESSION-based security token

CFML – CSV Import HTML

<!--- Read/Process File --->
<cfset fileVar = "#APPLICATION.transPath#STOCK#URL.code#.csv">
<cffile action="read" file="#fileVar#" variable="csvfile">

<CFOBJECT COMPONENT="tools.importCSV" NAME="runCSV">
<cfset runStock = runCSV.CSVToQuery(CSV = csvFile.Trim(),delimiter = '|')>

CFML – Flush HTML

<!-- Set headers to disable buffering for this page -->
<cfheader name="X-Accel-Buffering" value="no">

<!--- Add Flush Tag --->
<cfflush>

Note: Must disable web server buffering with tag or in cfconfig.

CFML – Last Day of Month HTML

<!--- Last Day of Current Month--->
<cfset lastDay = createDate(year(now()), month(now()) + 1, 1) - 1>

Note: Jump to first day of the following month, then subtract 1 day

CFML – NULL Coalescing Variables HTML

<!-- Basic fallback -->
<cfset username = form.username ?: "guest">

<!-- Chaining multiple fallbacks -->
<cfset displayName = user.nickname ?: user.firstName ?: "Anonymous">

<!-- With function calls -->
<cfset result = getFromCache() ?: fetchFromDatabase()>

<!-- With struct members -->
<cfset theme = settings.theme ?: "default">

CFML – Variables HTML

<!-- Null Coalescing -->
<cfset myVar = someVariable ?: "default value">

<!-- Default Param -->
<cfparam name="myVar" default="default value">
<!-- myVar will be set to "default value" if it doesn't already exist -->

<!-- Numeric Fallback -->
<cfset myVar = val(someNumber) ? someNumber : 0>

<cfset myVar = len(trim(someString)) ? someString : "default value">

<cfset myVar = structKeyExists(myStruct, "keyName") ? myStruct.keyName : "default value">

<cfset myVar = isDefined("someVariable") ? someVariable : "default value">
<!-- or -->
<cfif isDefined("someVariable")>
    <cfset myVar = someVariable>
<cfelse>
    <cfset myVar = "default value">
</cfif>

CSS – Sprite Animation HTML

<style>
  @keyframes sprite {
    from {
      object-position: 0% 0%;
    }
    to {
      object-position: 100% 0%;
    }
  }
  
  .trophy {
    object-fit: cover;
    animation:
      sprite 1s steps(5, jump-none) infinite;
  }
</style>

<img
  class="trophy"
  src="/images/sprites/gold-trophy-sprite.png"
  alt="A gold trophy with flickering flames"
/>

Note: https://www.joshwcomeau.com/animation/sprites/

HTML – Email Friendly Button HTML

<!-- Button -->
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#444444" align="center" class="button">
  <tbody>
    <tr bgcolor="#444444">
      <td bgcolor="#444444" style="padding: 10px 20px 10px 20px;" align="center"> <a href="#" target="_blank" style="font-size: 14px; font-family:sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;font-weight: bold;border-radius:5px;">BUTTON TEXT</a></td>
    </tr>
  </tbody>
</table>

HTML – Picture HTML

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

HTML – UTM Link HTML

http://rpx.local/?utm_source=web&utm_medium=email&utm_campaign=test&utm_content=request%20a%20quote&utm_term=dev

// Elements
utm_source=web
utm_medium=email
utm_campaign=test
utm_content=request%20a%20quote
utm_term=dev

jQuery – FUNCTION getJSON JS

// Modern JavaScript (Async Function)
try {
  const params = new URLSearchParams({
    method: 'methodName',
    var: value,
    returnformat: 'json'
  });
  
  const response = await fetch(`/path/to.cfc?${params}`);
  const results = await response.json();
  
  // Run Results
  if (results.SUCCESS) {
    // Code Here
  }
} catch (error) {
  console.error('Request failed:', error);
}

// jQuery Version
$.getJSON("/path/to.cfc", {
	method: 'methodName',
	var: value,
	returnformat: 'json'
}, function(results){
	// Run Results
	if(results.SUCCESS) {
		// Code Here
	};
});

jQuery – Hide/Show Element JS

if ( $(".selector").is(":visible") ) {
	  $(".selector").hide();
	  $(".selector_button").html("Show Element");
} else {
	  $(".selector").show();
	  $(".selector_button").html("Hide Element");
}

jQuery – Navigation/Menu JS

$("header").on("click", ".nav-admin--btn", function () {
	// Top Navigation
	if ($(".nav-admin-header").is(":visible")) {
		$(".nav-admin-header").attr("data-show", "false");
		$(".nav-admin-header").attr("aria-expanded", "false");
	} else {
		$(".nav-admin-header").attr("data-show", "true");
		$(".nav-admin-header").attr("aria-expanded", "true");
	}
});

jQuery – onClick JS

// For Dynamic Content
$(".container").on("click","a.clicked", function() {

});

// For Static Content
$(".button").click(function(e) { /* handle click event */ });
$(".button").mouseenter(function(e) {  /* handle click event */ });
$(document).keyup(function(e) {  /* handle key up event */  });

jQuery – Trigger Event JS

// With jQuery
// Trigger myEvent on document and .box
$(document).trigger("myEvent");
$(".box").trigger("myEvent");

// Without jQuery
// Create and dispatch myEvent
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

JS – Better Error Handling JS

try {
  connectToDatabase();
} catch (err) {
  throw new Error("Connecting to database failed.", { cause: err });
}

Note: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause

JS – Comma List to Array JS

const Array = Array.from(str.split(','));
Array.forEach(item => {
	//Do Something with ${item}
});

JS – COnfi JS

//Confirm Delete
document.querySelectorAll(".action__confirm-del").forEach(function (el) {
	el.addEventListener("click", function (event) {
		const msg = this.dataset.confirm;
		if (!confirm(msg)) {
			event.preventDefault();
		}
	});
});

JS – Cookies JS

// Set Cookie
document.cookie = "pageTempWarn=1";

// Check if Exists
let findCookie = document.cookie.indexOf("pageTempWarn=");

if (findCookie != 0) {
  // Something
}

JS – Data Attributes JS

// Get Example Element
const element = document.querySelector('.item');

// HTML: <div class="item" data-user-id="123" data-active="true">
console.log(element.dataset.userId);    // "123" (camelCase conversion)
console.log(element.dataset.active);    // "true"
console.log(element.dataset);           // DOMStringMap object with all data attrs

// Get Attribute
console.log(element.getAttribute('data-user-id'));  // "123"
console.log(element.getAttribute('data-active'));   // "true"

// Set Attribute
element.setAttribute('data-user-id', '456');
element.setAttribute('data-active', 'false');

element.dataset.userId = '456';           // Creates data-user-id="456"
element.dataset.newAttribute = 'value';   // Creates data-new-attribute="value"
element.dataset.camelCase = 'test';       // Creates data-camel-case="test"

// Had Attribute
if (element.hasAttribute('data-user-id')) {
    // attribute exists
}

// Remove Attribute
element.removeAttribute('data-user-id');
element.removeAttribute('data-active');

delete element.dataset.userId;    // Removes data-user-id
delete element.dataset.active;    // Removes data-active

JS – Data Elements to JSON JS

let count = 1;
let output = "\{"
const dataSet = this.dataset;

// Loop Through Data Elements
for( var d in dataSet) {
		// Comma Seprate
		if (count > 1) {   							
			output += ",";
		}

		// Create Array & Trim Values
		const items = dataSet[d].split(",").map(function(item) {
			return item.trim();
		});

		output += "\"" + d + "\" : ";
		output += JSON.stringify(items);
		
		count++;
}

output += "\}";
const obj = JSON.parse(output);

Note: Returns valid JSON object (obj)

JS – Default Value JS

// Old way (pre-2021)
if (user.name === null || user.name === undefined) {
  user.name = 'Anonymous';
}

// Or using the nullish coalescing operator (??)
user.name = user.name ?? 'Anonymous';

// New way (ES2021 and later)
user.name ??= 'Anonymous';

Note: https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator

JS – Delay JS

const delayInMilliseconds = 1000;
setTimeout(function() {
	// Run Code 
}, delayInMilliseconds);

JS – Dispatch Event JS

// Run Event
function triggerEvent( elem, event ) {
    const clickEvent = new Event( event ); // Create the event.
    elem.dispatchEvent( clickEvent );    // Dispatch the event.
    console.log("Event Triggered");
}

const elem = document.getElementById("object"); 
triggerEvent( elem, "click" );

JS – Elements Exists JS

// Simple
if (document.querySelector("header")) {

}

// By ID
const element = document.getElementById('elementId');
if (element !== null) {
    // Element exists
} else {
    // Element does not exist
}

// By Query Selector
const element = document.querySelector('.elementClass');
if (element !== null) {
    // Element exists
} else {
    // Element does not exist
}

// By Query Selector ALL
const elements = document.querySelectorAll('.elementClass');
if (elements.length > 0) {
    // At least one element exists
} else {
    // No elements found
}

// JQuery
if ($('#elementId').length > 0) {
  // Exists.
}

Note: https://www.devbabu.com/how-to-check-if-html-element-exists-in-javascript/

JS – Event Listeners JS

// Each Loop/Attach all Selectors
document.querySelectorAll(".action__showElem").forEach((action) => {
	action.addEventListener("click", (e) => { /* ... */ });
});

// Watch document for all clicks and act on match
// Better performance with lots of elements
document.addEventListener("click", (e) => {
    if (e.target.matches(".action__showElem")) {
        /* ... */
    }
});

// Alternate For Loop
for (const action of document.querySelectorAll(".action__showElem")) {
    action.addEventListener("click", (e) => { /* ... */ });
}

document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

// Create and add an element to the DOM
var searchElement = document.createElement("button");
document.querySelector(".search-container").appendChild(searchElement);
// Add an event listener to the element
searchElement.addEventListener("click", handleClick);

JS – Form Input to JSON JS

const params = "";

function buildJSONData(e) {
  const object = {};
  e.forEach((value, key) => {
    // Reflect.has in favor of: object.hasOwnProperty(key)
    if (!Reflect.has(object, key)) {
      object[key] = value;
      return;
    }
    if (!Array.isArray(object[key])) {
      object[key] = [object[key]];
    }
    object[key].push(value);
  });

  // Stringify Result
  let formResult = JSON.stringify(object);
  params = formResult;
  console.log(formResult);
  return params;
}

// Submit
$("body").on("submit", "#form", function () {
  let fData = new FormData(document.getElementById("form"));
  console.log(fData);

  // Collect Filter FORM Data
  buildJSONData(fData);

  return false;
});

JS – Functions JS

// Function Declaration
function funcName(var1,var2) {
	// Do Stuff with var1 & var 2;
	// Can be called anywhere in file;
}

// Function Expression
let funcName = function(var1,var2) {
	//Do Stuff with var1 & var 2;
	// Must be called after defined;
}

// Arrow Function Expression
let funcName = (var1,var2) => {
	//Do Stuff with var1 & var 2;
}

let funcName = (var1,var2) => var1 + var2;

JS – Get/Pause/Play CSS Animations JS

const someAnimatedThing = document.querySelector(".thing");
const animations = someAnimatedThing.getAnimations();

animations.forEach((animation) => {
	// Pause
	animation.pause();
});

// Play
animation.play();

Note: https://codepen.io/cassidoo/pen/EaKrPWL

JS – Inline If JS

var a = 2;
var b = 3;
// (statement) ? "true" : "false"
var c = ((a < b) ? "minor" : "major");

JS – Intersection Observer - 2 Elements JS

const element1 = document.getElementById('element1');
const element2 = document.getElementById('element2');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element 1 is intersecting with Element 2!');
      // Perform actions when the elements intersect
    }
  });
}, {
  root: element2, // Use element2 as the root for intersection
  threshold: 0.5 // Trigger when 50% of element1 overlaps element2
});

observer.observe(element1);

Note: Element 1 intersects with Element 2 via Root value

JS – Last Item in Array JS

const fruits = ["apple", "banana", "cherry"];

/* newer, easier */
console.log(fruits.at(-1));

/* older, harder */
console.log(fruits[fruits.length - 1]);

Note: https://allthingssmitty.com/2025/05/19/how-javascript-at-method-makes-array-indexing-easier/

JS – List Data Attributes + Unique Values JS

const parentElement = '.store--data';

// Get Unique Data Attributes
function getUniqueDataAttributes(selector) {
  const elements = document.querySelectorAll(selector);
  const uniqueAttributes = new Set();

  for (const element of elements) {
	for (const attr of element.attributes) {
	  if (attr.name.startsWith("data-")) {
		uniqueAttributes.add(attr.name);
	  }
	}
  }
  return Array.from(uniqueAttributes);
}

const uniqueDataAttrs = getUniqueDataAttributes(parentElement);
console.log(uniqueDataAttrs); // Array containing unique data-* attribute names

// Get Unique Values Per Data Attribute
function getUniqueDataValues(selector, dataAttribute) {
  const elements = document.querySelectorAll(selector);
  const uniqueValues = new Set();

  for (const element of elements) {
	const dataValue = element.getAttribute(dataAttribute);
	if (dataValue) {
	  uniqueValues.add(dataValue.trim());
	}
  }

  return Array.from(uniqueValues);
}

uniqueDataAttrs.forEach((item) => {
	const uniqueData = getUniqueDataValues(parentElement, item);
	console.log(uniqueData); // Array containing unique values
});

Note: Good jorb Bard!

JS – Load HTML JS

// HTML File
fetch(`${file}.htm`)
	.then((response) => {
		// When the page is loaded convert it to text
		return response.text();
	})
	.then((html) => {
		const parser = new DOMParser();
		const doc = parser.parseFromString(html, "text/html");
		content.innerHTML = doc.querySelector(".selector").innerHTML;
	})
	.catch((error) => {
		console.error("Failed to fetch page: ", error);
});


// Markdown with Marked.js - https://cdn.jsdelivr.net/npm/marked/marked.min.js
fetch(filePath)
	.then(response => response.text())
        .then(markdown => {
            document.getElementById('content').innerHTML = marked.parse(markdown);
        })
        .catch(error => {
            console.error('Error loading markdown file:', error);
	});

JS – Local Storage JS

// Set Key/Value
localStorage.setItem("key", "value");

// Get Key/Value
const keyVal = localStorage.getItem("key");

JS – Media Match JS

if (window.matchMedia("(max-width: 700px)").matches) {
  // Viewport is less or equal to 700 pixels wide
} else {
  // Viewport is greater than 700 pixels wide
}

JS – Modal Open/Close JS

// https://codepen.io/kevinpowell/pen/KKyOYvM

const modal = document.querySelector("#modal");
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".close-button");

openModal.addEventListener("click", () => {
	modal.showModal();
});

closeModal.addEventListener("click", () => {
	modal.close();
});

JS – Modal: Once onLoad JS

// Modal Box Once onLoad
const theModal = document.querySelector("#modal");
const closeModal = document.querySelector(".close-button");

document.addEventListener("DOMContentLoaded", function () {
    // Check if the modal has been shown in this session
    const hasSeenModal = sessionStorage.getItem('modalShown');
    
    if (!hasSeenModal) {
        theModal .showModal();
    }

    // Mark that the modal has been shown in this session
    sessionStorage.setItem('modalShown', 'true');
});

if(closeModal !== null) {
    closeModal .addEventListener("click", () => {
        theModal .close();
        // Optional - Mark that the modal has been shown in this session
        sessionStorage.setItem('modalShown', 'true');
    });
}

// Local Storage
// Check if the modal has been shown before
const hasSeenModal = localStorage.getItem('modalShown');
localStorage.setItem('modalShown', 'true');

JS – Multiple Event Listeners JS

// Get All Items in Group
const itemGroup = document.querySelectorAll(".items");

// Loop Items and Add Listener
itemGroup.forEach((item) => {
	item.addEventListener("click", () => {
		itemAction(item.id);
	});
});

// Run a Function
const itemAction = function(target) {
	// Do Something on target
};

JS – On Change JS

input.addEventListener('change', function(e) {
	// Trusted Source - User
	if (e.isTrusted) {
  		/* The event is trusted */
	} else {
  		/* The event is not trusted */
	}
});

JS – Page Swap Event JS

window.addEventListener("pageswap", (event) => {
	if (!event.viewTransition) return;
	console.log(event.activation);
});

JS – popstate & pageshow JS

// Set State
const state = `{"action":"${target}"}`;
const url = `#${target}`;
const title = `Portfolio`;
history.pushState(state, title, url);

// Retrieve State
window.addEventListener("popstate", function (event) {
	// Get New State
	const hist = JSON.parse(history.state);
	runFunc(hist.action);
});

// Retrieve State on Phone Swipe Back/Forward
window.addEventListener("pageshow", function (event) {
	// Get New State
	
});

JS – Query Selectors JS

// Instead, select the first instance of .box
document.querySelector(".box");

// Select all instances of .box  
document.querySelectorAll(".box");

// Iterate over the nodelist of elements to hide all instances of .box
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" })

JS – Reload Page on Browser-Back JS

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // Page was loaded from cache, force reload
    window.location.reload();
  }
});

JS – Sort Select Field Options JS

function sortOptions(){
      const options = jQuery('#selectList option');
      let arr = options.map(function(_, o) {
          return {
              t: jQuery(o).text(),
              v: o.value
          };
      }).get();
      arr.sort(function(o1, o2) {
          return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
      });
      options.each(function(i, o) {
          o.value = arr[i].v;
          jQuery(o).text(arr[i].t);
      });
}

JS – Sticky Header / Object Observer JS

// Sticky Header
const elemWatch = document.querySelector(".site-shell");
const elemTarget = document.querySelector("header");

if (document.querySelector(elemWatch)) {

  const siteShellOptions = {
    threshhold: 0,
    rootMargin: "1px 0px 0px 0px",
  };

  const siteShellObserver = new IntersectionObserver(function (
    entries,
    siteShellObserver
  ) {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) {
        elemTarget.classList.add("sticky");
      } else {
        elemTarget.classList.remove("sticky");
      }
    });
  },
  siteShellOptions);

  siteShellObserver.observe(elemWatch);
};

JS – Toggle Password JS

<!-- Password field -->
Password: <input type="password" value="FakePSW" id="myInput">

<!-- An element to toggle between password visibility -->
<input type="checkbox" onclick="myFunction()">Show Password

function myFunction() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

JS – Transition End JS

const button = document.querySelector("button");

button.addEventListener("click", () => {
	button.style.opacity = 0;
});

button.addEventListener("transitionend", () => (button.style.display = "none"));

JS – URL Query String JS

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);   

// Isolate specific key
const location = urlParams.get('loc');
    
if (location !== null) {
	// If key/value exists do something
}

JS – Write to Clipboard JS

const button = document.querySelector("button");

button.addEventListener("click", () => {
	copy("String or Var to copy");
});

const copy = (text) => navigator.clipboard.writeText(text)

WP – Taxonomy Query by ACF Checkbox(Array) PHP

$match = 'String';

$cats_query = array(
	'taxonomy' => 'product_cat', 
	'hide_empty' => true, 
    'depth' => 1,
    'meta_query' => array(
        array(
            'key' => 'custom_field_name',
            'value' => serialize($match),
            'compare' => 'LIKE'
        )
    )
);

// Loop Through Categories
echo('<ul>');
foreach ( get_terms( $cats_query ) as $term ) {
    $description = get_term_field( 'description', $term );	
    $name = $term->name;
    echo('<li><strong>' . $name . '</strong>: ' . $description . '</li>');
}
echo('</ul>');

SASS – @Mixin Arguments SCSS

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

/* Optional Argument */
@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}

SASS – @Mixin Reset List SCSS

@mixin reset-list {
	margin-block: 0;
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

// Usage
@include reset-list;

SCSS – @Mixin Form Input SCSS

@mixin form-input {
	display:inline-block;
	width: 100%;
	
	font-size: 16px;
	background-color: #ffffff;
	padding:10px;
	border: 1px solid #efefef;
	border-radius:2px;
	transition: all 0.2s ease;

	&:hover {
		border: 1px solid #aaaaaa;
		outline:0;
	}

	&:focus {
		border: 1px solid #252525;
		outline:0;
	}      

}

// Usage:
@include form-input;

SCSS – Variables SCSS

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

SQL - Double Inner Join SQL

SELECT s.name as Student, c.name as Course 
FROM student s
    INNER JOIN bridge b ON s.id = b.sid
    INNER JOIN course c ON b.cid  = c.id 
ORDER BY s.name

// LEFT JOIN - To get all records on left table

Note: ANSI syntax

SQL - Increment Value SQL

<!--- Increment Used Value --->
<cfquery datasource="#APPLICATION.dSource#" name="incValue">
  UPDATE table
  SET	numVal = numVal + 1
  WHERE varID = <cfqueryparam value = "#varID#" CFSQLType = "CF_SQL_INTEGER">
</cfquery>

SQL - LEFT Outer Join SQL

SELECT table1.theID, table1.name, table1.date, table2.theID, table2.title, table2.company
FROM table1 LEFT OUTER JOIN table2 ON table1.theID = table2.theID

Note: All Records from Table-1 and NULL values if no match on Table-2

SQL - Nested COUNT SQL

SELECT a.userID,(
	SELECT Count(b.userID) FROM table-2 b
	WHERE b.userID = a.userID
) AS callCount, a.userFName
FROM table-1 a

SQL - Reset Auto-Increment SQL

ALTER TABLE tablename AUTO_INCREMENT = 1

SQL - SubQuery SQL

SELECT * 
FROM ( 
    SELECT *, COUNT(*) OVER () AS total_count 
    FROM your_table
    WHERE 1 = 1
) AS subquery
WHERE 1 = 1
LIMIT 10;

SQL – CASE SQL

SELECT OrderID, Quantity,
CASE
    WHEN Quantity > 30 THEN 'The quantity is greater than 30'
    WHEN Quantity = 30 THEN 'The quantity is 30'
    ELSE 'The quantity is under 30'
END AS QuantityText
FROM OrderDetails;

SELECT CustomerName, City, Country
FROM Customers
ORDER BY
(CASE
    WHEN City IS NULL THEN Country
    ELSE City
END);

SQL – Count Over (Partition) SQL

SELECT itemID,cat1,cat2,
COUNT(*) OVER (PARTITION BY cat1) AS cat1Count,
COUNT(*) OVER (PARTITION BY cat2) AS cat2Count
FROM table
WHERE cat1 = 1

Note: Can be used in grouped output to get COUNTS

SQL – Create View SQL

// 2 Tables
CREATE VIEW data_compview AS
SELECT 
    dsw.webID,
    dsw.compID,
    dsw.userID,
    dsw.statDigits,
    dsw.statDate,
    dsw.statModDate,
    dc.compName,
    dc.compAbrv,
    dc.compColor
FROM data_stats_web dsw
JOIN data_comps dc ON dsw.compID = dc.compID;

// 3 Tables
CREATE VIEW data_compview AS
SELECT 
    dsw.webID,
    dsw.compID,
    dsw.userID,
    dsw.statDigits,
    dsw.statDate,
    dsw.statModDate,
    dc.compName,
    dc.compAbrv,
    dc.compColor,
    su.userName,
    su.userAccess
FROM data_stats_web dsw
JOIN data_comps dc ON dsw.compID = dc.compID
JOIN site_users su ON dsw.userID = su.userID;

SQL – Distinct Count SQL

SELECT COUNT(DISTINCT Country) FROM Customers

SQL – Exists SQL

SELECT column_name(s)
FROM table_name
WHERE EXISTS
(SELECT column_name FROM table_name WHERE condition);

SQL – In SQL

SELECT * FROM Customers
WHERE Country IN ('Germany', 'France', 'UK');

// NOT in list
SELECT * FROM Customers
WHERE Country NOT IN ('Germany', 'France', 'UK');

SQL – Insert Multiple Values SQL

INSERT INTO table_name (column_list)
VALUES
    (value_list_1),
    (value_list_2),
    ...
    (value_list_n);

SQL – LIKE Operator SQL

// Finds any values that start with "a"
WHERE CustomerName LIKE 'a%'
	
// Finds any values that end with "a"
WHERE CustomerName LIKE '%a'	

// Finds any values that have "or" in any position
WHERE CustomerName LIKE '%or%'	

// Finds any values that have "r" in the second position
WHERE CustomerName LIKE '_r%'

// Finds any values that start with "a" and are at least 2 characters in length
WHERE CustomerName LIKE 'a_%'

// Finds any values that start with "a" and are at least 3 characters in length
WHERE CustomerName LIKE 'a__%'

// Finds any values that start with "a" and ends with "o"
WHERE ContactName LIKE 'a%o'

SQL – Multiple Joins SQL

SELECT u.user_name, p.product_name
FROM users u
JOIN user_products up ON u.user_id = up.user_id
JOIN products p ON up.product_id = p.product_id;

SQL – Stored Procedure SQL

CREATE PROCEDURE SelectAllCustomers @City nvarchar(30), @PostalCode nvarchar(10)
AS
SELECT * FROM Customers WHERE City = @City AND PostalCode = @PostalCode
GO;

EXEC SelectAllCustomers @City = 'London', @PostalCode = 'WA1 1DP';

SQL – Trigger SQL

CREATE TRIGGER log_order_insert
AFTER INSERT ON orders
FOR EACH ROW
BEGIN
    INSERT INTO order_log (order_id, customer_id, order_date, total_amount)
    VALUES (NEW.order_id, NEW.customer_id, NEW.order_date, NEW.total_amount);
END;

Note: Tiggers are part of alter/modity table

[ CODE ]

Hello [UNKNOWN]. I Found 152 Entries:

CF – All Active SESSIONS CFC

CF – Base64 Encode/Decode CFC

CF – Cache Query Within CFC

CF – Component - createObject CFC

CF – CreateDataTime (EOD) CFC

CF – Directory CFC

CF – Inline IF CFC

CF – PDF Thumbnail CFC

CF – queryNew CFC

CF – Random String CFC

CF – Remove HTML from string CFC

CF – Remove Whitespace CFC

CF – Replace CFC

CF – Value List CFC

CFML – Bracket Notation CFC

CFML – queryFilter CFC

CSS – Anchor Position CSS

CSS – Animated Gradient Border CSS

CSS – Animation CSS

CSS – Animation Play State CSS

CSS – Animation Scroll/View CSS

CSS – Backdrop Filter CSS

CSS – Color CSS

CSS – Color Mix CSS

CSS – Container Query CSS

CSS – Content Font Awesome CSS

CSS – Content Grid CSS

CSS – Custom Properties CSS

CSS – Custom Radio/Checkbox CSS

CSS – Custom Select CSS

CSS – Duotone Technique CSS

CSS – External Links CSS

CSS – Figure/Caption CSS

CSS – File Selector Button CSS

CSS – Filters CSS

CSS – Font-Face CSS

CSS – Form Valid/Invalid CSS

CSS – Functions CSS

CSS – Functions CSS

CSS – Gradient Border CSS

CSS – Gradient Text CSS

CSS – Gradients CSS

CSS – Grid CSS

CSS – Grid Auto Cols: Fit/Fill CSS

CSS – Grid Pile CSS

CSS – Hide Scrollbar CSS

CSS – Inline SVG / Base64 CSS

CSS – Line Clamp CSS

CSS – Loader Animation CSS

CSS – Logical Selectors CSS

CSS – Media Query CSS

CSS – Modal CSS

CSS – Not Hover CSS

CSS – Overlay with Border Image CSS

CSS – Popover / Anchor CSS

CSS – Pseudo Selectors CSS

CSS – Responsive Columns CSS

CSS – Scroll Snap CSS

CSS – ScrollBar CSS

CSS – Selectors & Attributes CSS

CSS – Style Query CSS

CSS – Superscript Fix CSS

CSS – Supports CSS

CSS – View Transition Custom Element CSS

CSS – View Transitions CSS

CSS – Visually Hidden CSS

CSS – Word/Text Wrap CSS

CF – Custom Query HTML

CF – Function (STRUCT) HTML

CF – Function with STRUCT HTML

CF – HTTP Request HTML

CF – IsJson HTML

CF – Query Insert HTML

CF – Query of Query HTML

CF – Query Params HTML

CF – Transaction HTML

CF – Try/Catch HTML

CF – Try/Catch/Throw HTML