CodeSnippets

figure tag

• title: figure
• tags: figure

• This can be used to mark up a photo. The figure element can also contain a figure caption.

<figure>
  <img src="zzz.jpg" alt="zzz" style="width:100%">
  <figcaption>ZZZ</figcaption>
</figure>

video tag

• title: video
• tags: video

• This allows you to embed a media player for video playback. For example, you can upload your video on AWS S3 and use the video tag to embed it on your website.

• Using YouTube for that might come off as unprofessional. And Vimeo doesn't allow you to embed your videos without paying. You can specify certain attributes, such as width, height, autoplay, loop, controls, etc.

<video autoplay="" loop="" controls="" width="640" height="480">
	<source type="video/mp4" src="zzz.mp4">
</video>

• You can also embed a live stream using getUserMedia() or WebRTC

picture tag

• title: picture
• tags: picture

• This tag helps you display images in a responsive manner, by showing an alternative image version for smaller viewports.

• It needs to contain one or more source tags and one img tag. The img tag will be used only if the viewport doesn't match any of the source tags or if the browser does not support it.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>

progress tag

• title: progress
• tags: progress

• The progress tag represents the progress of a task. The progress tag should not be confused with the meter tag (which represents a gauge).

<progress value="63" max="100">
</progress>

meter tag

• title: meter
• tags: meter

• You can use the meter element to measure data within a given range (a gauge).
• This can be achieved with min and max values or with a percentage.

<meter value="2" min="0" max="10">2 out of 10</meter>
<meter value="0.6">60%</meter>

map tag

• title: map
• tags: map

• The map tag is used to define a client-side image-map. An image-map is an image with clickable areas. All you have to do is mention the X and Y coordinates in the elements from the map.

• This means that you create a map of our Solar System and define areas for each planet and take the visitors to a separate page for each planet they click on.

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

contenteditable attribute

• title: contenteditable
• tags: contenteditable

• This attribute specifies whether the content of an element is editable or not.

<p contenteditable="true">This is an editable paragraph.</p>

input suggestions

• title: input suggestions
• tags: input suggestions

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

noscript tag

• title: noscript
• tags: noscript

• The content inside the noscript element is rendered by the browser only when JavaScript is disabled.

• It provides a fallback mechanism for the components that will stop working without JavaScript.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

html native search

• title: HTML Native Search
• tags: native, search

<div class="wrapper">
  <h1>
    Native HTML Search
  </h1>

  <input list="items">

  <datalist id="items">
    <option value="Marko Denic">
    <option value="FreeCodeCamp">
    <option value="FreeCodeTools">
    <option value="Web Development">
    <option value="Web Developer">
  </datalist>
</div>

fieldset element

• title: Fieldset Element
• tags: fieldset, element

• You can use fieldset element to group several controls as well as labels (label) within a web form.

<form>
  <fieldset>
    <legend>Choose your favorite language</legend>

    <input type="radio" id="javascript" name="language">
    <label for="javascript">JavaScript</label><br/>

    <input type="radio" id="python" name="language">
    <label for="python">Python</label><br/>

    <input type="radio" id="java" name="language">
    <label for="java">Java</label>
  </fieldset>
</form>

window opener

• title: window opener
• tags: window, opener

• Pages opened with target=”_blank” allow the new page to access the original's window.opener.

• This can have security and performance implications.

• Include rel=”noopener” or rel=”noreferrer” to prevent this.

<a href="https://freecodetools.org" target="_blank" rel="noopener">
  Free Code Tools
</a>

base element

• title: base element
• tags: base, element

• If you want to open all links in the document in a new tab, you can use base element:

<head>
   <base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
  This link will be opened in a new tab: &nbsp;
  <a href="https://freecodetools.org/">
    Free Code Tools
  </a>
</div>

details element

• title: Details Element
• tags: details, element

• You can use the details element to create native HTML accordion.

<div class="wrapper">
  <details>
    <summary>
      Click me to see more details
    </summary>

    <p>
      More details.
    </p>
  </details>
</div>

liveReload

• title: livereload
• tags: livereload

• Heard of VsCode LiveServer Extension? We are going to create something similar to that with a single line of HTML, all you have to do is change the content value to your desired value Example: content = "3000".

<meta http-equiv="refresh" content="value(seconds)">

border-with-top-triangle

• title: Border with top triangle
• tags: visual,beginner

Creates a content container with a triangle at the top.

• Use the :before and :after pseudo-elements to create two triangles.
• The colors of the two triangles should be the same as the container's border-color and the container's background-color respectively.
• The border-width of the one triangle (:before) should be 1px wider than the other one (:after), in order to act as the border.
• The smaller triangle (:after) should be 1px to the right of the larger triangle (:before) to allow for its left border to be shown.

<div class="container">Border with top triangle</div>

.container {
  position: relative;
  background: ##ffffff;
  padding: 15px;
  border: 1px solid ##dddddd;
  margin-top: 20px;
}

.container:before,
.container:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 19px;
  border: 11px solid transparent;
  border-bottom-color: ##dddddd;
}

.container:after {
  left: 20px;
  border: 10px solid transparent;
  border-bottom-color: ##ffffff;
}

bouncing-loader

• title: Bouncing loader
• tags: animation,intermediate

Creates a bouncing loader animation.

• Use @keyframes to define an animation with two states, where the element changes opacity and is translated up on the 2D plane using transform: translate3d(). Use a single axis translation on transform: translate3d() to achieve better animation performance.
• Create a parent container, .bouncing-loader, for the bouncing circles and use display: flex and justify-content: center to position them in the center.
• Give the three bouncing circle <div> elements a width and height of 16px and use border-radius: 50% to make them circular.
• Apply the bouncing-loader animation to each of the three bouncing circles, using a different animation-delay for each one and animation-direction: alternate to create the appropriate effect.

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -16px, 0);
  }
}

.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 16px;
  height: 16px;
  margin: 3rem 0.2rem;
  background: ##8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

box-sizing-reset

• title: Box-sizing reset
• tags: layout,beginner

Resets the box-model so that width and height are not affected by border or padding.

• Use box-sizing: border-box to include the width and height of padding and border when calculating the element's width and height.
• Use box-sizing: inherit to pass down the box-sizing property from parent to child elements.

<div class="box">border-box</div>
<div class="box content-box">content-box</div>

div {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.box {
  display: inline-block;
  width: 120px;
  height: 120px;
  padding: 8px;
  margin: 8px;
  background: ##F24333;
  color: white;
  border: 1px solid ##BA1B1D;
  border-radius: 4px;
}

.content-box {
  box-sizing: content-box;
}

button-border-animation

• title: Button border animation
• tags: animation,intermediate

Creates a border animation on hover.

• Use the :before and :after pseudo-elements to create two boxes 24px wide opposite each other above and below the box.
• Use the :hover pseudo-class to extend the width of those elements to 100% on hover and animate the change using transition.

<button class="animated-border-button">Submit</button>

.animated-border-button {
  background-color: ##141414;
  border: none;
  color: ##ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}

.animated-border-button:before,
.animated-border-button:after {
  border: 0 solid transparent;
  transition: all 0.3s;
  content: '';
  height: 0;
  position: absolute;
  width: 24px;
}

.animated-border-button:before {
  border-top: 2px solid ##141414;
  right: 0;
  top: -4px;
}

.animated-border-button:after {
  border-bottom: 2px solid ##141414;
  bottom: -4px;
  left: 0;
}

.animated-border-button:hover:before,
.animated-border-button:hover:after {
  width: 100%;
}

checkerboard-pattern

• title: Checkerboard background pattern
• tags: visual,intermediate

Creates a checkerboard background pattern.

• Use background-color to set a white background.
• Use background-image with two linear-gradient() values, each one with a different angle to create the checkerboard pattern.
• Use background-size to specify the pattern's size.
• Note: The fixed height and width of the element is for demonstration purposes only.

<div class="checkerboard"></div>

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: ##fff;
  background-image: linear-gradient(
      45deg,
      ##000 25%,
      transparent 25%,
      transparent 75%,
      ##000 75%,
      ##000
    ),
    linear-gradient(
      -45deg,
      ##000 25%,
      transparent 25%,
      transparent 75%,
      ##000 75%,
      ##000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

circle

• title: Circle
• tags: visual,beginner

Creates a circular shape with pure CSS.

• Use border-radius: 50% to curve the borders of the element to create a circle.
• Since a circle has the same radius at any given point, the width and height must be the same. Differing values will create an ellipse.

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: ##9C27B0;
}

clearfix

• title: Clearfix
• tags: layout,beginner

Ensures that an element self-clears its children.

• Use the :after pseudo-element and apply content: '' to allow it to affect layout.
• Use clear: both to make the element clear past both left and right floats.
• For this technique to work properly, make sure there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).
• Note: This is only useful if you are using float to build layouts. Consider using a more modern approach, such as the flexbox or grid layout.

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div>
</div>

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.floated {
  float: left;
  padding: 4px;
}

constant-width-to-height-ratio

• title: Constant width to height ratio
• tags: layout,beginner

Ensures that an element with variable width will retain a proportionate height value.

• Apply padding-top on the :before pseudo-element, making the height of the element equal to a percentage of its width.
• The proportion of height to width can be altered as necessary. For example a padding-top of 100% will create a responsive square (1:1 ratio).

<div class="constant-width-to-height-ratio"></div>

.constant-width-to-height-ratio {
  background: ##9C27B0;
  width: 50%;
}

.constant-width-to-height-ratio:before {
  content: '';
  padding-top: 100%;
  float: left;
}

.constant-width-to-height-ratio:after {
  content: '';
  display: block;
  clear: both;
}

counter

• title: Counter
• tags: visual,advanced

Creates a custom list counter that accounts for nested list elements.

• Use counter-reset to initialize a variable counter (default 0), the name of which is the value of the attribute (i.e. counter).
• Use counter-increment on the variable counter for each countable element (i.e. each <li>).
• Use counters() to display the value of each variable counter as part of the content of the :before pseudo-element for each countable element (i.e. each <li>). The second value passed to it ('.') acts as the delimiter for nested counters.

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

ul {
  counter-reset: counter;
  list-style: none;
}

li:before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

custom-scrollbar

• title: Custom scrollbar
• tags: visual,advanced

Customizes the scrollbar style for the an elements with scrollable overflow.

• Use ::-webkit-scrollbar to style the scrollbar element.
• Use ::-webkit-scrollbar-track to style the scrollbar track (the background of the scrollbar).
• Use ::-webkit-scrollbar-thumb to style the scrollbar thumb (the draggable element).
• Note: Scrollbar styling doesn't appear to be on any standards track. This technique only works on WebKit-based browsers.

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: ##1E3F20;
  border-radius: 12px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: ##4A7856;
  border-radius: 12px;
}

custom-text-selection

• title: Custom text selection
• tags: visual,beginner

Changes the styling of text selection.

• Use the ::selection pseudo-selector to style text within it when selected.

<p class="custom-text-selection">Select some of this text.</p>

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

disable-selection

• title: Disable selection
• tags: interactivity,beginner

Makes the content unselectable.

• Use user-select: none to make the content of the element not selectable.
• Note: This is not a secure method to prevent users from copying content.

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>

.unselectable {
  user-select: none;
}

display-table-centering

• title: Display table centering
• tags: layout,intermediate

Vertically and horizontally centers a child element within its parent element, using display: table.

• Use display: table to make the .center element behave like a <table> element.
• Set height and width to 100% to make the element fill the available space within its parent element.
• Use display: table-cell on the child element to make it behave like a <td> elements.
• Use text-align: center and vertical-align: middle on the child element to center it horizontally and vertically.
• The outer parent (.container) must have a fixed width and height.

<div class="container">
  <div class="center"><span>Centered content</span></div>
</div>

.container {
  border: 1px solid ##9C27B0;
  height: 250px;
  width: 250px;
}

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

donut-spinner

• title: Donut spinner
• tags: animation,intermediate

Creates a donut spinner that can be used to indicate the loading of content.

• Use a semi-transparent border for the whole element, except one side that will serve as the loading indicator for the donut.
• Define and use an appropriate animation, using transform: rotate() to rotate the element.

<div class="donut"></div>

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: ##7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

drop-cap

• title: Drop cap
• tags: visual,beginner

Makes the first letter of the first paragraph bigger than the rest of the text.

• Use the :first-child selector to select only the first paragraph.
• Use the ::first-letter pseudo-element to style the first element of the paragraph.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.</p>
<p>Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.</p>

p:first-child::first-letter {
  color: ##5f79ff;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

dynamic-shadow

• title: Dynamic shadow
• tags: visual,intermediate

Creates a shadow similar to box-shadow but based on the colors of the element itself.

• Use the :after pseudo-element with position: absolute and width and height equal to 100% to fill the available space in the parent element.
• Use background: inherit to inherit the background of the parent element.
• Use top to slightly offset the pseudo-element, filter: blur() to create a shadow and opacity to make it semi-transparent.
• Use z-index: 1 on the parent and z-index: -1 on the pseudo-element to position it behind its parent.

<div class="dynamic-shadow"></div>

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, ##6d78ff, ##00ffb8);
  z-index: 1;
}

.dynamic-shadow:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

etched-text

• title: Etched text
• tags: visual,intermediate

Creates an effect where text appears to be "etched" or engraved into the background.

• Use text-shadow to create a white shadow offset 0px horizontally and 2px vertically from the origin position.
• The background must be darker than the shadow for the effect to work.
• The text color should be slightly faded to make it look like it's engraved/carved out of the background.

<p class="etched-text">I appear etched into the background.</p>

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: ##b8bec5;
}

evenly-distributed-children

• title: Evenly distributed children
• tags: layout,intermediate

Evenly distributes child elements within a parent element.

• Use display: flex to use the flexbox layout.
• Use justify-content: space-between to evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
• Alternatively, you can use justify-content: space-around to distribute the children with space around them, rather than between them.

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

fit-image-in-container

• title: Fit image in container
• tags: layout,visual,intermediate

Fits an positions an image appropriately inside its container while preserving its aspect ratio.

• Use object-fit: contain to fit the entire image within the container while preserving its aspect ratio.
• Use object-fit: cover to fill the container with the image while preserving its aspect ratio.
• Use object-position: center to position the image at the center of the container.

<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />

.image {
  background: ##34495e;
  border: 1px solid ##34495e;
  width: 200px;
  height: 200px;
}

.image-contain {
  object-fit: contain;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: right top;
}

flexbox-centering

• title: Flexbox centering
• tags: layout,beginner

Horizontally and vertically centers a child element within a parent element using flexbox.

• Use display: flex to create a flexbox layout.
• Use justify-content: center to center the child horizontally.
• Use align-items: center to center the child vertically.

<div class="flexbox-centering">
  <div>Centered content.</div>
</div>

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

floating-list-titles

• title: List with floating section headings
• tags: visual,advanced

Creates a list with floating headings for each section.

• Use overflow-y: auto to allow the list container to overflow vertically.
• Use display: grid on the inner container (<dl>) to create a layout with two columns.
• Set headings (<dt>) to grid-column: 1 and content (<dd>) to grid-column: 2
• Finally, apply position: sticky and top: 0.5rem to headings to create a floating effect.

<div class="container">
  <div class="floating-stack">
    <dl>
      <dt>A</dt>
      <dd>Algeria</dd>
      <dd>Angola</dd>

      <dt>B</dt>
      <dd>Benin</dd>
      <dd>Botswana</dd>
      <dd>Burkina Faso</dd>
      <dd>Burundi</dd>

      <dt>C</dt>
      <dd>Cabo Verde</dd>
      <dd>Cameroon</dd>
      <dd>Central African Republic</dd>
      <dd>Chad</dd>
      <dd>Comoros</dd>
      <dd>Congo, Democratic Republic of the</dd>
      <dd>Congo, Republic of the</dd>
      <dd>Cote d'Ivoire</dd>

      <dt>D</dt>
      <dd>Djibouti</dd>

      <dt>E</dt>
      <dd>Egypt</dd>
      <dd>Equatorial Guinea</dd>
      <dd>Eritrea</dd>
      <dd>Eswatini (formerly Swaziland)</dd>
      <dd>Ethiopia</dd>
    </dl>
  </div>
</div>

.container {
  display: grid;
  place-items: center;
  min-height: 400px;
}

.floating-stack {
  background: ##455A64;
  color: ##fff;
  height: 80vh;
  height: 320px;
  border-radius: 1rem;
  overflow-y: auto;
}

.floating-stack > dl {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
}

.floating-stack dt {
  position: sticky;
  top: 0.5rem;
  left: 0.5rem;
  font-weight: bold;
  background: ##263238;
  color: ##cfd8dc;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  padding: 0.25rem 1rem;
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.floating-stack dd {
  grid-column: 2;
  margin: 0;
  padding: 0.75rem;
}

.floating-stack > dl:first-of-type > dd:first-of-type {
  margin-top: 0.25rem;
}

focus-within

• title: Focus Within
• tags: visual,interactivity,intermediate

Changes the appearance of a form if any of its children are focused.

• Use the pseudo-class :focus-within to apply styles to a parent element if any child element gets focused.

<form>
  <label for="username">Username:</label>
  <input id="username" type="text" />
  <br />
  <label for="password">Password:</label>
  <input id="password" type="text" />
</form>

form {
  border: 2px solid ##52B882;
  padding: 8px;
  border-radius: 2px;
}

form:focus-within {
  background: ##7CF0BD;
}

label {
  display: inline-block;
  width: 72px;
}

input {
  margin: 4px 12px;
}

full-width

• title: Full-width image
• tags: layout,intermediate

Creates a full-width image.

• Use left: 50% and right: 50% to position the image in the middle of the parent element.
• Use margin-left: -50vw and margin-right: -50vw to offset the image on both sides relative to the size of the viewport.
• Use width: 100vw and max-width: 100vw to size the image relative to the viewport.

<main>
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
    eu, faucibus interdum felis.
  </p>
  <p>
    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
  </p>
  <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
  </p>
</main>

main {
  margin: 0 auto;
  max-width: 640px;
}

img {
  height: auto;
  max-width: 100%;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

fullscreen

• title: Fullscreen
• tags: visual,advanced

Applies styles to an element when in fullscreen mode.

The :fullscreen CSS pseudo-element represents an element that's displayed when the browser is in fullscreen mode.

• Use the :fullscreen CSS pseudo-element selector to select and style an element that is displayed in fullscreen mode.
• Use a <button> and Element.requestFullscreen() to create a button that makes the element fullscreen for the purposes of previewing the style.

<div class="container">
  <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
  <div class="element" id="element"><p>I change color in fullscreen mode!</p></div>
  <br />
  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
    Go Full Screen!
  </button>
</div>

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
  box-sizing: border-box;
}

.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}

.element:-ms-fullscreen p {
  visibility: visible;
}

.element:fullscreen {
  background-color: ##e4708a;
  width: 100vw;
  height: 100vh;
}

gradient-text

• title: Gradient text
• tags: visual,intermediate

Gives text a gradient color.

• Use background with a linear-gradient value to give the text element a gradient background.
• Use webkit-text-fill-color: transparent to fill the text with a transparent color.
• Use webkit-background-clip: text to clip the background with the text, filling the text with the gradient background as the color.

<p class="gradient-text">Gradient text</p>

.gradient-text {
  background: linear-gradient(##70D6FF, ##00072D);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

grid-centering

• title: Grid centering
• tags: layout,beginner

Horizontally and vertically centers a child element within a parent element using grid.

• Use display: grid to create a grid layout.
• Use justify-content: center to center the child horizontally.
• Use align-items: center to center the child vertically.

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

hamburger-button

• title: Hamburger Button
• tags: interactivity,intermediate

Displays a hamburger menu which transitions to a cross button on hover.

• Use a .hamburger-menu container div which contains the top, bottom, and middle bars.
• Set the container to display: flex with flex-flow: column wrap.
• Add distance between the bars using justify-content: space-between.
• Use transform: rotate() to rotate the top and bottom bars by 45 degrees and opacity: 0 to fade the middle bar on hover.
• Use transform-origin: left so that the bars rotate around the left point.

<div class="hamburger-menu">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

.hamburger-menu {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-menu .bar {
  height: 5px;
  background: black;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}

.hamburger-menu:hover .top {
  transform: rotate(45deg);
}

.hamburger-menu:hover .middle {
  opacity: 0;
}

.hamburger-menu:hover .bottom {
  transform: rotate(-45deg);
}

height-transition

• title: Height transition
• tags: animation,intermediate

Transitions an element's height from 0 to auto when its height is unknown.

• Use transition to specify that changes to max-height should be transitioned over.
• Use overflow: hidden to prevent the contents of the hidden element from overflowing its container.
• Use max-height to specify an initial height of 0.
• Use the :hover pseudo-class to change the max-height to the value of the --max-height variable set by JavaScript.
• Use Element.scrollHeight and CSSStyleDeclaration.setProperty() to set the value of --max-height to the current height of the element.
• Note: Causes reflow on each animation frame, which will be laggy if there are a large number of elements beneath the element that is transitioning in height.

<div class="trigger">
  Hover me to see a height transition.
  <div class="el">Additional content</div>
</div>

.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

let el = document.querySelector('.el');
let height = el.scrollHeight;
el.style.setProperty('--max-height', height + 'px');

horizontal-scroll-snap

• title: Horizontal scroll snap
• tags: interactivity,intermediate

Creates a horizontally scrollable container that will snap on elements when scrolling.

• Use display: grid and grid-auto-flow: column to create a horizontal layout.
• Use scroll-snap-type: x mandatory and overscroll-behavior-x: contain to create a snap effect on horizontal scroll.
• You can use scroll-snap-align with either start, stop or center to change the snap alignment.

<div class="horizontal-snap">
  <a href="##"><img src="https://picsum.photos/id/1067/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/122/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/188/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/249/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/257/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/259/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/283/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/288/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/299/640/640"></a>
</div>

.horizontal-snap {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  height: calc(180px + 1rem);
  padding: 1rem;
  width: 480px;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.horizontal-snap > a {
  scroll-snap-align: center;
}

.horizontal-snap img {
  width: 180px;
  max-width: none;
  object-fit: contain;
  border-radius: 1rem;
}

hover-additional-content

• title: Show additional content on hover
• tags: visual,intermediate

Creates a card that displays additional content on hover.

• Use overflow: hidden on the card to hide elements that overflow vertically.
• Use the :hover and :focus-within pseudo-class selectors to change the card's styling as necessary when it's hovered or it or its contents are focused.
• Set transition: 0.3s ease all to create a transition effect on hover/focus.

<div class="card">
  <img src="https://picsum.photos/id/404/367/267"/>
  <h3>Lorem ipsum</h3>
  <div class="focus-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/> <a href="##">Link to source</a>
    </p>
  </div>
</div>

.card {
  width: 300px;
  height: 280px;
  padding: 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.card * {
  transition: 0.3s ease all;
}

.card img {
  margin: 0;
  width: 300px;
  height: 224px;
  object-fit: cover;
  display: block;
}

.card h3 {
  margin: 0;
  padding: 12px 12px 48px;
  line-height: 32px;
  font-weight: 500;
  font-size: 20px;
}

.card .focus-content {
  display: block;
  padding: 8px 12px;
}

.card p {
  margin: 0;
  line-height: 1.5;
}

.card:hover img, .card:focus-within img {
  margin-top: -80px;
}

.card:hover h3, .card:focus-within h3 {
  padding: 8px 12px 0;
}

hover-shadow-box-animation

• title: Hover shadow box animation
• tags: animation,intermediate unlisted: true

Creates a shadow box around the text when it is hovered.

• Set transform: perspective(1px) to give element a 3D space by affecting the distance between the Z plane and the user and translate(0) to reposition the p element along z-axis in 3D space.
• Use box-shadow to make the box transparent.
• Use transition-property to enable transitions for both box-shadow and transform.
• Use the :hover, :active and :focus pseudo-class selectors to apply a new box-shadow and transform: scale(1.2) to change the scale of the text.

<p class="hover-shadow-box-animation">Box it!</p>

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}

.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

hover-underline-animation

• title: Hover underline animation
• tags: animation,advanced

Creates an animated underline effect when the text is hovered over.

• Use display: inline-block to prevent the underline from spanning the entire parent width rather than just the text content.
• Use the :after pseudo-element with a width of 100% and position: absolute, placing it below the content.
• Use transform: scaleX(0) to initially hide the pseudo-element.
• Use the :hover pseudo-class selector to apply transform: scaleX(1) and display the pseudo-element on hover.
• Animate transform using transform-origin: left and an appropriate transition.

<p class="hover-underline-animation">Hover this text to see the effect!</p>

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: ##0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: ##0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

image-hover-menu

• title: Menu on image hover
• tags: layout,animation,intermediate

Displays a menu overlay when the image is hovered.

• Use a <figure> to wrap the <img> element and a <div> element that will contain the menu links.
• Use the opacity and right attributes to animate the image on hover, creating a sliding effect.
• Set the left attribute of the <div> to the negative of the element's width and reset it to 0 when hovering over the parent element to slide in the menu.
• Use display: flex, flex-direction: column and justify-content: center on the <div> to vertically center the menu items.

<figure class="hover-menu">
	<img src="https://picsum.photos/id/1060/800/480.jpg"/>
	<div>
		<a href="##">Home</a>
		<a href="##">Pricing</a>
		<a href="##">About</a>
	</div>
</figure>

.hover-menu {
  position: relative;
  overflow: hidden;
  margin: 8px;
  min-width: 340px;
  max-width: 480px;
  max-height: 290px;
  width: 100%;
  background: ##000;
  text-align: center;
  box-sizing: border-box;
}

.hover-menu * {
  box-sizing: border-box;
}

.hover-menu img {
  position: relative;
  max-width: 100%;
  top: 0;
  right: 0;
  opacity: 1;
  transition: 0.3s ease-in-out;
}

.hover-menu div {
  position: absolute;
  top: 0;
  left: -120px;
  width: 120px;
  height: 100%;
  padding: 8px 4px;
  background: ##000;
  transition: 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hover-menu div a {
  display: block;
  line-height: 2;
  color: ##fff;
  text-decoration: none;
  opacity: 0.8;
  padding: 5px 15px;
  position: relative;
  transition: 0.3s ease-in-out;
}

.hover-menu div a:hover {
  text-decoration: underline;
}

.hover-menu:hover img {
  opacity: 0.5;
  right: -120px;
}

.hover-menu:hover div {
  left: 0;
  opacity: 1;
}

image-hover-rotate

• title: Image rotate on hover
• tags: animation,visual,intermediate

Creates a rotate effect for the image on hover.

• Use scale and rotate when hovering over the parent element (a <figure>) to animate the image, using the transition property.
• Use overflow: hidden on the parent container to hide the excess from the image transformation.

<figure class="hover-rotate">
  <img src="https://picsum.photos/id/669/600/800.jpg"/>
</figure>

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.hover-rotate img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

image-mosaic

• title: Responsive image mosaic
• tags: layout,intermediate

Creates a responsive image mosaic.

• Use display: grid to create an appropriate responsive grid layout.
• Use grid-row: span 2 / auto and grid-column: span 2 / auto to create items that span two rows or two columns respectively.
• Wrap the previous styles into a media query to avoid applying on small screen sizes.

<div class="image-mosaic">
  <div
    class="card card-tall card-wide"
    style="background-image: url('https://picsum.photos/id/564/1200/800')"
  ></div>
  <div
    class="card card-tall"
    style="background-image: url('https://picsum.photos/id/566/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/575/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/626/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/667/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/678/800/530')"
  ></div>
  <div
    class="card card-wide"
    style="background-image: url('https://picsum.photos/id/695/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/683/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/693/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/715/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/610/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/599/800/530')"
  ></div>
</div>

.image-mosaic {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: ##353535;
  font-size: 3rem;
  color: ##fff;
  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: all 500ms;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}

image-overlay-hover

• title: Image overlay on hover
• tags: visual,animation,advanced

Displays an image overlay effect on hover.

• Use the :before and :after pseudo-elements for the top and bottom bars of the overlay respectively, setting their opacity, transform and transition to produce the desired effect.
• Use the <figcaption> for the text of the overlay, setting display: flex, flex-direction: column and justify-content: center to center the text into the image.
• Use the :hover pseudo-selector to update the opacity and transform of all the elements and produce the desired effect.

<figure class="hover-img">
  <img src="https://picsum.photos/id/200/440/320.jpg"/>
  <figcaption>
    <h3>Lorem <br/>Ipsum</h3>
  </figcaption>
</figure>

.hover-img {
  background-color: ##000;
  color: ##fff;
  display: inline-block;
  margin: 8px;
  max-width: 320px;
  min-width: 240px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

.hover-img * {
  box-sizing: border-box;
  transition: all 0.45s ease;
}

.hover-img:before,
.hover-img:after {
  background-color: rgba(0, 0, 0, 0.5);
  border-top: 32px solid rgba(0, 0, 0, 0.5);
  border-bottom: 32px solid rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  transition: all 0.3s ease;
  z-index: 1;
  opacity: 0;
  transform: scaleY(2);
}

.hover-img img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.hover-img figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  transition-delay: 0.1s;
  font-size: 24px;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hover-img:hover:before,
.hover-img:hover:after {
  transform: scale(1);
  opacity: 1;
}

.hover-img:hover > img {
  opacity: 0.7;
}

.hover-img:hover figcaption {
  opacity: 1;
}

input-with-prefix

• title: Input with prefix
• tags: interactivity,visual,intermediate

Creates an input with a visual, non-editable prefix.

• Use display: flex to create a container element.
• Remove the border and outline from the <input> field and apply them to the parent element instead to make it look like an input box.
• Use the :focus-within pseudo-class selector to style the parent element accordingly, when the user interacts with the <input> field.

<div class="input-box">
  <span class="prefix">+30</span>
  <input type="tel" placeholder="210 123 4567"/>
</div>

.input-box {
  display: flex;
  align-items: center;
  max-width: 300px;
  background: ##fff;
  border: 1px solid ##a0a0a0;
  border-radius: 4px;
  padding-left: 0.5rem;
  overflow: hidden;
  font-family: sans-serif;
}

.input-box .prefix {
  font-weight: 300;
  font-size: 14px;
  color: ##999;
}

.input-box input {
  flex-grow: 1;
  font-size: 14px;
  background: ##fff;
  border: none;
  outline: none;
  padding: 0.5rem;
}

.input-box:focus-within {
  border-color: ##777;
}

masonry-layout

• title: Masonry Layout
• tags: layout,advanced

Creates a masonry-style layout that is especially useful when working with images.

• Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed width (vertical layout) or a fixed height (horizontal layout), forming a perfect fit. Especially useful when working with images.
• Define .masonry-container, the container for the masonry layout and .masonry-columns an inner container in which .masonry-brick elements will be placed.
• Apply display: block to .masonry-brick elements to allow the layout to flow properly.
• Use the :first-child pseudo-element selector to apply a different margin for the first element to account for its positioning.
• Use CSS variables to allow for greater flexibility within the layout in combination with media queries to ensure that the layout is responsive in different viewport sizes.

<div class="masonry-container">
  <div class="masonry-columns">
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1016/384/256"
      alt="An image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1025/495/330"
      alt="Another image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1024/192/128"
      alt="Another image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1028/518/345"
      alt="One more image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1035/585/390"
      alt="And another one"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1074/384/216"
      alt="Last one"
    />
  </div>
</div>

/* Container */
.masonry-container {
  --column-count-small: 1;
  --column-count-medium: 2;
  --column-count-large: 3;
  --column-gap: 0.125rem;
  padding: var(--column-gap);
}

/* Columns */
.masonry-columns {
  column-gap: var(--column-gap);
  column-count: var(--column-count-small);
  column-width: calc(1 / var(--column-count-small) * 100%);
}

@media only screen and (min-width: 640px) {
  .masonry-columns {
    column-count: var(--column-count-medium);
    column-width: calc(1 / var(--column-count-medium) * 100%);
  }
}

@media only screen and (min-width: 800px) {
  .masonry-columns {
    column-count: var(--column-count-large);
    column-width: calc(1 / var(--column-count-large) * 100%);
  }
}

/* Bricks */
.masonry-brick {
  width: 100%;
  height: auto;
  margin: var(--column-gap) 0;
  display: block;
}

.masonry-brick:first-child {
  margin: 0 0 var(--column-gap);
}

mouse-cursor-gradient-tracking

• title: Mouse cursor gradient tracking
• tags: visual,interactivity,advanced

A hover effect where the gradient follows the mouse cursor.

• Declare two CSS variables, --x and --y, used to track the position of the mouse on the button.
• Declare a CSS variable, --size, used to modify the gradient's dimensions.
• Use background: radial-gradient(circle closest-side, pink, transparent); to create the gradient at the correct position.
• Use Document.querySelector() and EventTarget.addEventListener() to register a handler for the 'mousemove' event.
• Use Element.getBoundingClientRect() and CSSStyleDeclaration.setProperty() to update the values of the --x and --y CSS variables.

<button class="mouse-cursor-gradient-tracking">
  <span>Hover me</span>
</button>

.mouse-cursor-gradient-tracking {
  position: relative;
  background: ##7983ff;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border: none;
  color: white;
  cursor: pointer;
  outline: none;
  overflow: hidden;
}

.mouse-cursor-gradient-tracking span {
  position: relative;
}

.mouse-cursor-gradient-tracking:before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}

.mouse-cursor-gradient-tracking:hover:before {
  --size: 200px;
}

let btn = document.querySelector('.mouse-cursor-gradient-tracking');
btn.addEventListener('mousemove', e => {
  let rect = e.target.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
  btn.style.setProperty('--x', x + 'px');
  btn.style.setProperty('--y', y + 'px');
});

navigation-list-item-hover-and-focus-effect

• title: Navigation list item hover and focus effect
• tags: visual,beginner

Creates a custom hover and focus effect for navigation items, using CSS transformations.

• Use the :before pseudo-element at the list item anchor to create a hover effect, hide it using transform: scale(0).
• Use the :hover and :focus pseudo-class selectors to transition to transform: scale(1) and show the pseudo-element with its colored background.
• Prevent the pseudo-element from covering the anchor element by using z-index.

<nav class="hover-nav">
  <ul>
    <li><a href="##">Home</a></li>
    <li><a href="##">About</a></li>
    <li><a href="##">Contact</a></li>
  </ul>
</nav>

.hover-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.hover-nav li {
  float: left;
}

.hover-nav li a {
  position: relative;
  display: block;
  color: ##222;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  z-index: 0;
}

li a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: ##f6c126;
  z-index: -1;
  transform: scale(0);
  transition: transform 0.5s ease-in-out;
}

li a:hover:before,
li a:focus:before {
  transform: scale(1);
}

offscreen

• title: Offscreen
• tags: layout,visual,intermediate

Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.

• Remove all borders and padding and hide the element's overflow.
• Use clip to indicate that no part of the element should be shown.
• Make the height and width of the element 1px and negate them using margin: -1px.
• Use position: absolute so that the element does not take up space in the DOM.
• Note: This provides an accessible and layout-friendly alternative to display: none (not readable by screen readers) and visibility: hidden (takes up physical space in the DOM).

<a class="button" href="https://google.com">
  Learn More <span class="offscreen"> about pants</span>
</a>

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

overflow-scroll-gradient

• title: Overflow scroll gradient
• tags: visual,intermediate

Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.

• Use the :after pseudo-element to create a linear-gradient that fades from transparent to white (top to bottom).
• Use position: absolute, width and height to appropriately place and size the pseudo-element in its parent.
• Use pointer-events: none to exclude the pseudo-element from mouse events, allowing text behind it to still be selectable/interactive.

<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient-scroller">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit? <br />
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </div>
</div>

.overflow-scroll-gradient {
  position: relative;
}

.overflow-scroll-gradient:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 250px;
  height: 25px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

.overflow-scroll-gradient-scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px;
  line-height: 1.2;
}

polka-dot-pattern

• title: Polka dot background pattern
• tags: visual,intermediate

Creates a polka dot background pattern.

• Use background-color to set a black background.
• Use background-image with two radial-gradient() values to create two dots.
• Use background-size to specify the pattern's size and background-position to appropriately place the two gradients.
• Note: The fixed height and width of the element is for demonstration purposes only.

<div class="polka-dot"></div>

.polka-dot {
  width: 240px;
  height: 240px;
  background-color: ##000;
  background-image: radial-gradient(##fff 10%, transparent 11%),
    radial-gradient(##fff 10%, transparent 11%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  background-repeat: repeat;
}

popout-menu

• title: Popout menu
• tags: interactivity,intermediate

Reveals an interactive popout menu on hover/focus.

• Use left: 100% to move the popout menu to the right of the parent.
• Use visibility: hidden to hide the popout menu initially, allowing for transitions to be applied (unlike display: none).
• Use the :hover, :focus and :focus-within pseudo-class selectors to apply visibility: visible to the popout menu, displaying it when the parent element is hovered/focused.

<div class="reference" tabindex="0">
  <div class="popout-menu">Popout menu</div>
</div>

.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 80px;
}

.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: ##9C27B0;
  color: white;
  padding: 16px;
}

.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}

pretty-text-underline

• title: Pretty text underline
• tags: visual,intermediate

Provides a nicer alternative to text-decoration: underline where descenders do not clip the underline.

• Use text-shadow to apply 4 values with offsets covering a 4x4 px area, ensuring the underline has a thick shadow that covers the line where descenders clip it. For the best results, use a color that matches the background and adjust the px values for larger fonts.
• Use background-image with linear-gradient() and currentColor to create an appropriate gradient that will act as the actual underline.
• Set background-position, background-repeat and background-size to place the gradient in the correct position.
• Use the ::selection pseudo-class selector to ensure the text shadow does not interfere with text selection.
• Note: This is natively implemented as text-decoration-skip-ink: auto but it has less control over the underline.

<div class="container">
  <p class="pretty-text-underline">Pretty text underline without clipping descenders.</p>
</div>

.container {
  background: ##f5f6f9;
  color: ##333;
  padding: 8px 0;
}

.pretty-text-underline {
  display: inline;
  text-shadow: 1px 1px ##f5f6f9, -1px 1px ##f5f6f9, -1px -1px ##f5f6f9,
    1px -1px ##f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}

pulse-loader

• title: Pulse loader
• tags: animation,beginner

Creates a pulse effect loader animation using the animation-delay property.

• Use @keyframes to define an animation at two points in the cycle: at the start (0%), the two <div> elements have no width or height and are positioned at the center and at the end (100%), both <div> elements have increased width and height, but their position is reset to 0.
• Use opacity to transition from 1 to 0 when animating to give the <div> elements a disappearing effect as they expand.
• Set a predefined width and height for the parent container, .ripple-loader and use position: relative to position its children.
• Use animation-delay on the second <div> element, so that each element starts its animation at a different time.

<div class="ripple-loader">
  <div></div>
  <div></div>
</div>

.ripple-loader {
  position: relative;
  width: 64px;
  height: 64px;
}

.ripple-loader div {
  position: absolute;
  border: 4px solid ##454ADE;
  border-radius: 50%;
  animation: ripple-loader 1s ease-out infinite;
}

.ripple-loader div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes ripple-loader {
  0% {
    top: 32px;
    left: 32px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    opacity: 0;
  }
}

reset-all-styles

• title: Reset all styles
• tags: visual,beginner

Resets all styles to default values using only one property.

• Use the all property to reset all styles (inherited or not) to their default values.
• Note: This will not affect direction and unicode-bidi properties.

<div class="reset-all-styles">
  <h5>Title</h5>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id
    exercitationem nulla qui repellat laborum vitae, molestias tempora velit
    natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

.reset-all-styles {
  all: initial;
}

responsive-layout-sidebar

• title: Responsive layout with sidebar
• tags: layout,intermediate

Creates a responsive layout with a content area and a sidebar.

• Use display: grid on the parent container, to create a grid layout.
• Use minmax() for the second column (sidebar) to allow it to take up between 150px and 20%.
• Use 1fr for the first column (main content) to take up the rest of the remaining space.

<div class="container">
  <main>
    This element is 1fr large.
  </main>
  <aside>
    Min: 150px / Max: 20%
  </aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main, aside {
  padding: 12px;
  text-align: center;
}

main {
  background: ##d4f2c4;
}

aside {
  background: ##81cfd9;
}

rotating-card

• title: Rotating Card
• tags: animation,advanced

Creates a two sided card which rotates on hover.

• Set the the backface-visibility of the cards to none.
• Initially, set rotateY for the back side of the card to -180deg and the front side to 0deg.
• Upon hover, set rotateY for the front side to 180deg and backside to 0deg.
• Set the appropriate perspective value to create the rotate effect.

<div class="card">
  <div class="card-side front">
    <div>Front Side</div>
  </div>
  <div class="card-side back">
    <div>Back Side</div>
  </div>
</div>

.card {
  perspective: 150rem;
  position: relative;
  height: 40rem;
  max-width: 400px;
  margin: 2rem;
  box-shadow: none;
  background: none;
}

.card-side {
  height: 35rem;
  border-radius: 15px;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  padding:2rem;
  color: white
}

.card-side.back {
  transform: rotateY(-180deg);
  background-color: ##4158D0;
  background-image: linear-gradient(43deg, ##4158D0 0%,##C850C0 46%, ##FFCC70 100%);
}

.card-side.front {
  background-color: ##0093E9;
  background-image: linear-gradient(160deg, ##0093E9 0%, ##80D0C7 100%);
}

.card:hover .card-side.front {
  transform: rotateY(180deg);
}

.card:hover .card-side.back {
  transform: rotateY(0deg);
}

shape-separator

• title: Shape separator
• tags: visual,intermediate unlisted: true

Uses an SVG shape to create a separator between two different blocks.

• Use the :after pseudo-element to create the separator element.
• Use background-image to add the SVG (a 24x12 triangle) shape via a data URI. The background image will repeat by default, covering the whole area of the pseudo-element.
• Use the background of the parent element to set the desired color for the separator.

<div class="shape-separator"></div>

.shape-separator {
  position: relative;
  height: 48px;
  background: ##9C27B0;
}

.shape-separator:after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

sibling-fade

• title: Sibling fade
• tags: interactivity,intermediate

Fades out the siblings of a hovered item.

• Use a transition to animate changes to opacity.
• Use the :hover and :not pseudo-class selectors to change the opacity of all elements except for the one the mouse is over to 0.5.

<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
  <span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>

span {
  padding: 0 16px;
  transition: opacity 0.3s;
}

.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

staggered-animation

• title: Staggered animation
• tags: animation,advanced

Creates a staggered animation for the elements of a list.

• Set the opacity to 0 and transform to translateX(100%) to make list elements transparent and move them all the way to the right.
• Specify the appropriate transition properties for list elements, except transition-delay which is specified relative to the --i custom property.
• Use inline styles to specify a value for --i for each list element, which will in turn be used for transition-delay to create the stagger effect.
• Use the :checked pseudo-class selector for the checkbox to appropriately style list elements, setting opacity to 1 and transform to translateX(0) to make them appear and slide into view.

<div class="container">
  <input type="checkbox" name="menu" id="menu" class="menu-toggler">
  <label for="menu" class="menu-toggler-label">Menu</label>
  <ul class="stagger-menu">
    <li style="--i: 0">Home</li>
    <li style="--i: 1">Pricing</li>
    <li style="--i: 2">Account</li>
    <li style="--i: 3">Support</li>
    <li style="--i: 4">About</li>
  </ul>
</div>

.container {
  overflow-x: hidden;
  width: 100%;
}

.menu-toggler {
  display: none;
}

.menu-toggler-label {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.stagger-menu {
  list-style-type: none;
  margin: 16px 0;
  padding: 0;
}

.stagger-menu li {
  margin-bottom: 8px;
  font-size: 18px;
  opacity: 0;
  transform: translateX(100%);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055);
}

.menu-toggler:checked ~ .stagger-menu li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.055s * var(--i));
}

sticky-list-titles

• title: List with sticky section headings
• tags: visual,intermediate

Creates a list with sticky headings for each section.

• Use overflow-y: auto to allow the list container (<dl>) to overflow vertically.
• Set headings (<dt>) position to sticky and apply top: 0 to stick to the top of the container.

<div class="container">
  <dl class="sticky-stack">
    <dt>A</dt>
    <dd>Algeria</dd>
    <dd>Angola</dd>

    <dt>B</dt>
    <dd>Benin</dd>
    <dd>Botswana</dd>
    <dd>Burkina Faso</dd>
    <dd>Burundi</dd>

    <dt>C</dt>
    <dd>Cabo Verde</dd>
    <dd>Cameroon</dd>
    <dd>Central African Republic</dd>
    <dd>Chad</dd>
    <dd>Comoros</dd>
    <dd>Congo, Democratic Republic of the</dd>
    <dd>Congo, Republic of the</dd>
    <dd>Cote d'Ivoire</dd>

    <dt>D</dt>
    <dd>Djibouti</dd>

    <dt>E</dt>
    <dd>Egypt</dd>
    <dd>Equatorial Guinea</dd>
    <dd>Eritrea</dd>
    <dd>Eswatini (formerly Swaziland)</dd>
    <dd>Ethiopia</dd>
  </dl>
</div>

.container {
  display: grid;
  place-items: center;
  min-height: 400px;
}

.sticky-stack {
  background: ##37474f;
  color: ##fff;
  margin: 0;
  height: 320px;
  border-radius: 1rem;
  overflow-y: auto;
}

.sticky-stack dt {
  position: sticky;
  top: 0;
  font-weight: bold;
  background: ##263238;
  color: ##cfd8dc;
  padding: 0.25rem 1rem;
}

.sticky-stack dd {
  margin: 0;
  padding: 0.75rem 1rem;
}

.sticky-stack dd + dt {
  margin-top: 1rem;
}

stripes-pattern

• title: Stripes background pattern
• tags: visual,beginner

Creates a stripes background pattern.

• Use background-color to set a white background.
• Use background-image with a radial-gradient() value to create a vertical stripe.
• Use background-size to specify the pattern's size.
• Note: The fixed height and width of the element is for demonstration purposes only.

<div class="stripes"></div>

.stripes {
  width: 240px;
  height: 240px;
  background-color: ##fff;
  background-image: linear-gradient(90deg, transparent 50%, ##000 50%);
  background-size: 60px 60px;
  background-repeat: repeat;
}

system-font-stack

• title: System font stack
• tags: visual,beginner

Uses the native font of the operating system to get close to a native app feel.

• Define a list of fonts using font-family.
• The browser looks for each successive font, preferring the first one if possible, and falls back to the next if it cannot find the font (on the system or defined in CSS).
• -apple-system is San Francisco, used on iOS and macOS (not Chrome however).
• BlinkMacSystemFont is San Francisco, used on macOS Chrome.
• 'Segoe UI' is used on Windows 10.
• Roboto is used on Android.
• Oxygen-Sans is used on Linux with KDE.
• Ubuntu is used on Ubuntu (all variants).
• Cantarell is used on Linux with GNOME Shell.
• 'Helvetica Neue' and Helvetica is used on macOS 10.10 and below.
• Arial is a font widely supported by all operating systems.
• sans-serif is the fallback sans serif font if none of the other fonts are supported.

<p class="system-font-stack">This text uses the system font.</p>

.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
}

text-backdrop-overlay

• title: Image text overlay
• tags: visual,beginner

Displays a text on top of an image using an overlay.

• Use backdrop-filter to apply a blur(14px) and brightness(80%) effect to make text readable regardless of background image and color.

<div>
  <h3 class="text-overlay">Hello, World</h3>
  <img src="https://picsum.photos/id/1050/1200/800">
</div>

div {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 300;
  color: white;
  backdrop-filter: blur(14px) brightness(80%);
}

tile-layout-using-inline-block

• title: 3-tile layout
• tags: layout,beginner

Aligns items horizontally using display: inline-block to create a 3-tile layout.

• Use display: inline-block to create a tiled layout, without using float, flex or grid.
• Use width in combination with calc to divide the width of the container evenly into 3 columns.
• Set font-size for .tiles to 0 to avoid whitespace and to 20px for <h2> elements to display the text.
• Note: If you use relative units (e.g. em), using font-size: 0; to fight whitespace between blocks might cause side effects.

<div class="tiles">
  <div class="tile">
    <img src="https://via.placeholder.com/200x150">
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150">
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150">
    <h2>30 Seconds of CSS</h2>
  </div>
</div>

.tiles {
  width: 600px;
  font-size: 0;
  margin: 0 auto;
}

.tile {
  width: calc(600px / 3);
  display: inline-block;
}

.tile h2 {
  font-size: 20px;
}

toggle-switch

• title: Toggle switch
• tags: visual,interactivity,beginner

Creates a toggle switch with CSS only.

• Use the for attribute to associate the <label> with the checkbox <input> element.
• Use the :after pseudo-element of the <label> to create a circular knob for the switch.
• Use the :checked pseudo-class selector to change the position of the knob, using transform: translateX(20px) and the background-color of the switch.
• Use position: absolute and left: -9999px to visually hide the <input> element.

<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}

.switch:after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

input[type='checkbox']:checked + .switch:after {
  transform: translateX(20px);
}

input[type='checkbox']:checked + .switch {
  background-color: ##7983ff;
}

.offscreen {
  position: absolute;
  left: -9999px;
}

transform-centering

• title: Transform centering
• tags: layout,beginner

Vertically and horizontally centers a child element within its parent element using CSS transforms.

• Set the position of the parent to relative and that of the child to absolute to place it in relation to its parent.
• Use left: 50% and top: 50% to offset the child 50% from the left and top edge of the containing block.
• Use transform: translate(-50%, -50%) to negate its position, so that it is vertically and horizontally centered.
• Note: The fixed height and width of the parent element is for demonstration purposes only.

<div class="parent">
  <div class="child">Centered content</div>
</div>

.parent {
  border: 1px solid ##9C27B0;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

triangle

• title: Triangle
• tags: visual,beginner

Creates a triangular shape with pure CSS.

• Use three borders to create a triangle shape.
• All borders should have the same border-width (20px).
• The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired border-color, whereas the adjacent borders (i.e. left and right) should have a border-color of transparent.
• Altering the border-width values will change the proportions of the triangle.

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid ##9C27B0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

truncate-text-multiline

• title: Truncate multiline text
• tags: layout,intermediate

Truncates text that is longer than one line.

• Use overflow: hidden to prevent the text from overflowing its dimensions.
• Set a fixed width to ensure the element has at least one constant dimension.
• Set height: 109.2px as calculated from the font-size, using the formula font-size * line-height * numberOfLines (in this case 26 * 1.4 * 3 = 109.2).
• Set height: 36.4px as calculated for the gradient container, based on the formula font-size * line-height (in this case 26 * 1.4 = 36.4).
• Use background with linear-gradient() to create a gradient from transparent to the background-color.

<p class="truncate-text-multiline">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et.
</p>

.truncate-text-multiline {
  position: relative;
  overflow: hidden;
  display: block;
  height: 109.2px;
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  width: 400px;
  background: ##f5f6f9;
  color: ##333;
}

.truncate-text-multiline:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 36.4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), ##f5f6f9 50%);
}

truncate-text

• title: Truncate text
• tags: layout,beginner

Truncates text that is longer than one line, adding an ellipsis at the end (…).

• Use overflow: hidden to prevent the text from overflowing its dimensions.
• Use white-space: nowrap to prevent the text from exceeding one line in height.
• Use text-overflow: ellipsis to make it so that if the text exceeds its dimensions, it will end with an ellipsis.
• Specify a fixed width for the element to know when to display an ellipsis.
• Only works for single line elements.

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

vertical-scroll-snap

• title: Vertical scroll snap
• tags: interactivity,intermediate

Creates a scrollable container that will snap on elements when scrolling.

• Use display: gird and grid-auto-flow: row to create a vertical layout.
• Use scroll-snap-type: y mandatory and overscroll-behavior-y: contain to create a snap effect on vertical scroll.
• You can use scroll-snap-align with either start, stop or center to change the snap alignment.

<div class="vertical-snap">
  <a href="##"><img src="https://picsum.photos/id/1067/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/122/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/188/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/249/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/257/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/259/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/283/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/288/640/640"></a>
  <a href="##"><img src="https://picsum.photos/id/299/640/640"></a>
</div>

.vertical-snap {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(180px + 1rem);
  padding: 1rem;
  height: 480px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.vertical-snap > a {
  scroll-snap-align: center;
}

.vertical-snap img {
  width: 180px;
  object-fit: contain;
  border-radius: 1rem;
}

zebra-striped-list

• title: Zebra striped list
• tags: visual,beginner

Creates a striped list with alternating background colors.

• Use the :nth-child(odd) or :nth-child(even) pseudo-class selectors to apply a different background-color to elements that match based on their position in a group of siblings.
• Note: You can use it to apply different styles to other HTML elements like <div>, <tr>, <p>, <ol>, etc.

<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
</ul>

li:nth-child(odd) {
  background-color: ##999;
}

zig-zag-pattern

• title: Zig zag background pattern
• tags: visual,advanced

Creates a zig zag background pattern.

• Use background-color to set a white background.
• Use background-image with four linear-gradient() values to create the parts of a zig zag pattern.
• Use background-size to specify the pattern's size and background-position to place the parts of the pattern in the correct locations.
• Note: The fixed height and width of the element is for demonstration purposes only.

<div class="zig-zag"></div>

.zig-zag {
  width: 240px;
  height: 240px;
  background-color: ##fff;
  background-image: linear-gradient(135deg, ##000 25%, transparent 25%),
    linear-gradient(225deg, ##000 25%, transparent 25%),
    linear-gradient(315deg, ##000 25%, transparent 25%),
    linear-gradient(45deg, ##000 25%, transparent 25%);
  background-position: -30px 0, -30px 0, 0 0, 0 0;
  background-size: 60px 60px;
  background-repeat: repeat;
}

CSVToArray

• title: CSVToArray
• tags: string,array,intermediate

Converts a comma-separated values (CSV) string to a 2D array.

• Use Array.prototype.slice() and Array.prototype.indexOf('\n') to remove the first row (title row) if omitFirstRow is true.
• Use String.prototype.split('\n') to create a string for each row, then String.prototype.split(delimiter) to separate the values in each row.
• Omit the second argument, delimiter, to use a default delimiter of ,.
• Omit the third argument, omitFirstRow, to include the first row (title row) of the CSV string.

const CSVToArray = (data, delimiter = ',', omitFirstRow = false) =>
  data
    .slice(omitFirstRow ? data.indexOf('\n') + 1 : 0)
    .split('\n')
    .map(v => v.split(delimiter));

CSVToArray('a,b\nc,d'); // [['a', 'b'], ['c', 'd']];
CSVToArray('a;b\nc;d', ';'); // [['a', 'b'], ['c', 'd']];
CSVToArray('col1,col2\na,b\nc,d', ',', true); // [['a', 'b'], ['c', 'd']];

CSVToJSON

• title: CSVToJSON
• tags: string,object,advanced

Converts a comma-separated values (CSV) string to a 2D array of objects. The first row of the string is used as the title row.

• Use Array.prototype.slice() and Array.prototype.indexOf('\n') and String.prototype.split(delimiter) to separate the first row (title row) into values.
• Use String.prototype.split('\n') to create a string for each row, then Array.prototype.map() and String.prototype.split(delimiter) to separate the values in each row.
• Use Array.prototype.reduce() to create an object for each row's values, with the keys parsed from the title row.
• Omit the second argument, delimiter, to use a default delimiter of ,.

const CSVToJSON = (data, delimiter = ',') => {
  const titles = data.slice(0, data.indexOf('\n')).split(delimiter);
  return data
    .slice(data.indexOf('\n') + 1)
    .split('\n')
    .map(v => {
      const values = v.split(delimiter);
      return titles.reduce(
        (obj, title, index) => ((obj[title] = values[index]), obj),
        {}
      );
    });
};

CSVToJSON('col1,col2\na,b\nc,d');
// [{'col1': 'a', 'col2': 'b'}, {'col1': 'c', 'col2': 'd'}];
CSVToJSON('col1;col2\na;b\nc;d', ';');
// [{'col1': 'a', 'col2': 'b'}, {'col1': 'c', 'col2': 'd'}];

HSBToRGB

• title: HSBToRGB
• tags: math,intermediate

Converts a HSB color tuple to RGB format.

• Use the HSB to RGB conversion formula to convert to the appropriate format.
• The range of the input parameters is H: [0, 360], S: [0, 100], B: [0, 100].
• The range of all output values is [0, 255].

const HSBToRGB = (h, s, b) => {
  s /= 100;
  b /= 100;
  const k = (n) => (n + h / 60) % 6;
  const f = (n) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
  return [255 * f(5), 255 * f(3), 255 * f(1)];
};

HSBToRGB(18, 81, 99); // [252.45, 109.31084999999996, 47.965499999999984]

HSLToRGB

• title: HSLToRGB
• tags: math,intermediate

Converts a HSL color tuple to RGB format.

• Use the HSL to RGB conversion formula to convert to the appropriate format.
• The range of the input parameters is H: [0, 360], S: [0, 100], L: [0, 100].
• The range of all output values is [0, 255].

const HSLToRGB = (h, s, l) => {
  s /= 100;
  l /= 100;
  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n =>
    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [255 * f(0), 255 * f(8), 255 * f(4)];
};

HSLToRGB(13, 100, 11); // [56.1, 12.155, 0]

JSONToFile

• title: JSONToFile
• tags: node,intermediate

Writes a JSON object to a file.

• Use fs.writeFileSync(), template literals and JSON.stringify() to write a json object to a .json file.

const fs = require('fs');

const JSONToFile = (obj, filename) =>
  fs.writeFileSync(`${filename}.json`, JSON.stringify(obj, null, 2));

JSONToFile({ test: 'is passed' }, 'testJsonFile');
// writes the object to 'testJsonFile.json'

JSONtoCSV

• title: JSONtoCSV
• tags: array,string,object,advanced

Converts an array of objects to a comma-separated values (CSV) string that contains only the columns specified.

• Use Array.prototype.join(delimiter) to combine all the names in columns to create the first row.
• Use Array.prototype.map() and Array.prototype.reduce() to create a row for each object, substituting non-existent values with empty strings and only mapping values in columns.
• Use Array.prototype.join('\n') to combine all rows into a string.
• Omit the third argument, delimiter, to use a default delimiter of ,.

const JSONtoCSV = (arr, columns, delimiter = ',') =>
  [
    columns.join(delimiter),
    ...arr.map(obj =>
      columns.reduce(
        (acc, key) =>
          `${acc}${!acc.length ? '' : delimiter}"${!obj[key] ? '' : obj[key]}"`,
        ''
      )
    ),
  ].join('\n');

JSONtoCSV(
  [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }, { b: 7 }],
  ['a', 'b']
); // 'a,b\n"1","2"\n"3","4"\n"6",""\n"","7"'
JSONtoCSV(
  [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }, { b: 7 }],
  ['a', 'b'],
  ';'
); // 'a;b\n"1";"2"\n"3";"4"\n"6";""\n"";"7"'

RGBToHSB

• title: RGBToHSB
• tags: math,intermediate

Converts a RGB color tuple to HSB format.

• Use the RGB to HSB conversion formula to convert to the appropriate format.
• The range of all input parameters is [0, 255].
• The range of the resulting values is H: [0, 360], S: [0, 100], B: [0, 100].

const RGBToHSB = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const v = Math.max(r, g, b),
    n = v - Math.min(r, g, b);
  const h =
    n && v === r ? (g - b) / n : v === g ? 2 + (b - r) / n : 4 + (r - g) / n;
  return [60 * (h < 0 ? h + 6 : h), v && (n / v) * 100, v * 100];
};

RGBToHSB(252, 111, 48);
// [18.529411764705856, 80.95238095238095, 98.82352941176471]

RGBToHSL

• title: RGBToHSL
• tags: math,intermediate

Converts a RGB color tuple to HSL format.

• Use the RGB to HSL conversion formula to convert to the appropriate format.
• The range of all input parameters is [0, 255].
• The range of the resulting values is H: [0, 360], S: [0, 100], L: [0, 100].

const RGBToHSL = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const l = Math.max(r, g, b);
  const s = l - Math.min(r, g, b);
  const h = s
    ? l === r
      ? (g - b) / s
      : l === g
      ? 2 + (b - r) / s
      : 4 + (r - g) / s
    : 0;
  return [
    60 * h < 0 ? 60 * h + 360 : 60 * h,
    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
    (100 * (2 * l - s)) / 2,
  ];
};

RGBToHSL(45, 23, 11); // [21.17647, 60.71428, 10.98039]

RGBToHex

• title: RGBToHex
• tags: string,math,intermediate

Converts the values of RGB components to a hexadecimal color code.

• Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<<) and Number.prototype.toString(16).
• Use String.prototype.padStart(6, '0') to get a 6-digit hexadecimal value.

const RGBToHex = (r, g, b) =>
  ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

RGBToHex(255, 165, 1); // 'ffa501'

URLJoin

• title: URLJoin
• tags: string,regexp,advanced

Joins all given URL segments together, then normalizes the resulting URL.

• Use String.prototype.join('/') to combine URL segments.
• Use a series of String.prototype.replace() calls with various regexps to normalize the resulting URL (remove double slashes, add proper slashes for protocol, remove slashes before parameters, combine parameters with '&' and normalize first parameter delimiter).

const URLJoin = (...args) =>
  args
    .join('/')
    .replace(/[\/]+/g, '/')
    .replace(/^(.+):\//, '$1://')
    .replace(/^file:/, 'file:/')
    .replace(/\/(\?|&|##[^!])/g, '$1')
    .replace(/\?/g, '&')
    .replace('&', '?');

URLJoin('http://www.google.com', 'a', '/b/cd', '?foo=123', '?bar=foo');
// 'http://www.google.com/a/b/cd?foo=123&bar=foo'

UUIDGeneratorBrowser

• title: UUIDGeneratorBrowser
• tags: browser,random,intermediate

Generates a UUID in a browser.

• Use Crypto.getRandomValues() to generate a UUID, compliant with RFC4122 version 4.
• Use Number.prototype.toString(16) to convert it to a proper UUID.

const UUIDGeneratorBrowser = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );

UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'

UUIDGeneratorNode

• title: UUIDGeneratorNode
• tags: node,random,intermediate

Generates a UUID in Node.JS.

• Use crypto.randomBytes() to generate a UUID, compliant with RFC4122 version 4.
• Use Number.prototype.toString(16) to convert it to a proper UUID.

const crypto = require('crypto');

const UUIDGeneratorNode = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (c ^ (crypto.randomBytes(1)[0] & (15 >> (c / 4)))).toString(16)
  );

UUIDGeneratorNode(); // '79c7c136-60ee-40a2-beb2-856f1feabefc'

accumulate

• title: accumulate
• tags: math,array,intermediate

Creates an array of partial sums.

• Use Array.prototype.reduce(), initialized with an empty array accumulator to iterate over nums.
• Use Array.prototype.slice(-1), the spread operator (...) and the unary + operator to add each value to the accumulator array containing the previous sums.

const accumulate = (...nums) =>
  nums.reduce((acc, n) => [...acc, n + +acc.slice(-1)], []);

accumulate(1, 2, 3, 4); // [1, 3, 6, 10]
accumulate(...[1, 2, 3, 4]); // [1, 3, 6, 10]

addClass

• title: addClass
• tags: browser,beginner

Adds a class to an HTML element.

• Use Element.classList and DOMTokenList.add() to add the specified class to the element.

const addClass = (el, className) => el.classList.add(className);

addClass(document.querySelector('p'), 'special');
// The paragraph will now have the 'special' class

addDaysToDate

• title: addDaysToDate
• tags: date,intermediate

Calculates the date of n days from the given date, returning its string representation.

• Use new Date() to create a date object from the first argument.
• Use Date.prototype.getDate() and Date.prototype.setDate() to add n days to the given date.
• Use Date.prototype.toISOString() to return a string in yyyy-mm-dd format.

const addDaysToDate = (date, n) => {
  const d = new Date(date);
  d.setDate(d.getDate() + n);
  return d.toISOString().split('T')[0];
};

addDaysToDate('2020-10-15', 10); // '2020-10-25'
addDaysToDate('2020-10-15', -10); // '2020-10-05'

addMinutesToDate

• title: addMinutesToDate
• tags: date,intermediate

Calculates the date of n minutes from the given date, returning its string representation.

• Use new Date() to create a date object from the first argument.
• Use Date.prototype.getTime() and Date.prototype.setTime() to add n minutes to the given date.
• Use Date.prototype.toISOString(), String.prototype.split() and String.prototype.replace() to return a string in yyyy-mm-dd HH:MM:SS format.

const addMinutesToDate = (date, n) => {
  const d = new Date(date);
  d.setTime(d.getTime() + n * 60000);
  return d.toISOString().split('.')[0].replace('T',' ');
};

addMinutesToDate('2020-10-19 12:00:00', 10); // '2020-10-19 12:10:00'
addMinutesToDate('2020-10-19', -10); // '2020-10-18 23:50:00'

addMultipleEvents

• title: addMultipleListeners
• tags: browser,event,intermediate

Adds multiple event listeners with the same handler to an element.

• Use Array.prototype.forEach() and EventTarget.addEventListener() to add multiple event listeners with an assigned callback function to an element.

const addMultipleListeners = (el, types, listener, options, useCapture) => {
  types.forEach(type =>
    el.addEventListener(type, listener, options, useCapture)
  );
};

addMultipleListeners(
  document.querySelector('.my-element'),
  ['click', 'mousedown'],
  () => { console.log('hello!') }
);

addStyles

• title: addStyles
• tags: browser,beginner

Adds the provided styles to the given element.

• Use Object.assign() and ElementCSSInlineStyle.style to merge the provided styles object into the style of the given element.

const addStyles = (el, styles) => Object.assign(el.style, styles);

addStyles(document.getElementById('my-element'), {
  background: 'red',
  color: '##ffff00',
  fontSize: '3rem'
});

addWeekDays

• title: addWeekDays
• tags: date,intermediate

Calculates the date after adding the given number of business days.

• Use Array.from() to construct an array with length equal to the count of business days to be added.
• Use Array.prototype.reduce() to iterate over the array, starting from startDate and incrementing, using Date.prototype.getDate() and Date.prototype.setDate().
• If the current date is on a weekend, update it again by adding either one day or two days to make it a weekday.
• NOTE: Does not take official holidays into account.

const addWeekDays = (startDate, count) =>
  Array.from({ length: count }).reduce(date => {
    date = new Date(date.setDate(date.getDate() + 1));
    if (date.getDay() % 6 === 0)
      date = new Date(date.setDate(date.getDate() + (date.getDay() / 6 + 1)));
    return date;
  }, startDate);

addWeekDays(new Date('Oct 09, 2020'), 5); // 'Oct 16, 2020'
addWeekDays(new Date('Oct 12, 2020'), 5); // 'Oct 19, 2020'

all

• title: all
• tags: array,beginner

Checks if the provided predicate function returns true for all elements in a collection.

• Use Array.prototype.every() to test if all elements in the collection return true based on fn.
• Omit the second argument, fn, to use Boolean as a default.

const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

allEqual

• title: allEqual
• tags: array,beginner

Checks if all elements in an array are equal.

• Use Array.prototype.every() to check if all the elements of the array are the same as the first one.
• Elements in the array are compared using the strict comparison operator, which does not account for NaN self-inequality.

const allEqual = arr => arr.every(val => val === arr[0]);

allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

allEqualBy

• title: allEqualBy
• tags: array,intermediate

Checks if all elements in an array are equal, based on the provided mapping function.

• Apply fn to the first element of arr.
• Use Array.prototype.every() to check if fn returns the same value for all elements in the array as it did for the first one.
• Elements in the array are compared using the strict comparison operator, which does not account for NaN self-inequality.

const allEqualBy = (arr, fn) => {
  const eql = fn(arr[0]);
  return arr.every(val => fn(val) === eql);
};

allEqualBy([1.1, 1.2, 1.3], Math.round); // true
allEqualBy([1.1, 1.3, 1.6], Math.round); // false

allUnique

• title: allUnique
• tags: array,beginner

Checks if all elements in an array are unique.

• Create a new Set from the mapped values to keep only unique occurrences.
• Use Array.prototype.length and Set.prototype.size to compare the length of the unique values to the original array.

const allUnique = arr => arr.length === new Set(arr).size;

allUnique([1, 2, 3, 4]); // true
allUnique([1, 1, 2, 3]); // false

allUniqueBy

• title: allUniqueBy
• tags: array,intermediate

Checks if all elements in an array are unique, based on the provided mapping function.

• Use Array.prototype.map() to apply fn to all elements in arr.
• Create a new Set from the mapped values to keep only unique occurrences.
• Use Array.prototype.length and Set.prototype.size to compare the length of the unique mapped values to the original array.

const allUniqueBy = (arr, fn) => arr.length === new Set(arr.map(fn)).size;

allUniqueBy([1.2, 2.4, 2.9], Math.round); // true
allUniqueBy([1.2, 2.3, 2.4], Math.round); // false

and

• title: and
• tags: math,logic,beginner unlisted: true

Checks if both arguments are true.

• Use the logical and (&&) operator on the two given values.

const and = (a, b) => a && b;

and(true, true); // true
and(true, false); // false
and(false, false); // false

any

• title: any
• tags: array,beginner

Checks if the provided predicate function returns true for at least one element in a collection.

• Use Array.prototype.some() to test if any elements in the collection return true based on fn.
• Omit the second argument, fn, to use Boolean as a default.

const any = (arr, fn = Boolean) => arr.some(fn);

any([0, 1, 2, 0], x => x >= 2); // true
any([0, 0, 1, 0]); // true

aperture

• title: aperture
• tags: array,intermediate

Creates an array of n-tuples of consecutive elements.

• Use Array.prototype.slice() and Array.prototype.map() to create an array of appropriate length.
• Populate the array with n-tuples of consecutive elements from arr.
• If n is greater than the length of arr, return an empty array.

const aperture = (n, arr) =>
  n > arr.length
    ? []
    : arr.slice(n - 1).map((v, i) => arr.slice(i, i + n));

aperture(2, [1, 2, 3, 4]); // [[1, 2], [2, 3], [3, 4]]
aperture(3, [1, 2, 3, 4]); // [[1, 2, 3], [2, 3, 4]]
aperture(5, [1, 2, 3, 4]); // []

approximatelyEqual

• title: approximatelyEqual
• tags: math,beginner

Checks if two numbers are approximately equal to each other.

• Use Math.abs() to compare the absolute difference of the two values to epsilon.
• Omit the third argument, epsilon, to use a default value of 0.001.

const approximatelyEqual = (v1, v2, epsilon = 0.001) =>
  Math.abs(v1 - v2) < epsilon;

approximatelyEqual(Math.PI / 2.0, 1.5708); // true

arithmeticProgression

• title: arithmeticProgression
• tags: math,algorithm,beginner

Creates an array of numbers in the arithmetic progression, starting with the given positive integer and up to the specified limit.

• Use Array.from() to create an array of the desired length, lim/n, and a map function to fill it with the desired values in the given range.

const arithmeticProgression  = (n, lim) =>
  Array.from({ length: Math.ceil(lim / n) }, (_, i) => (i + 1) * n );

arithmeticProgression(5, 25); // [5, 10, 15, 20, 25]

arrayToCSV

• title: arrayToCSV
• tags: array,string,intermediate

Converts a 2D array to a comma-separated values (CSV) string.

• Use Array.prototype.map() and Array.prototype.join(delimiter) to combine individual 1D arrays (rows) into strings.
• Use Array.prototype.join('\n') to combine all rows into a CSV string, separating each row with a newline.
• Omit the second argument, delimiter, to use a default delimiter of ,.

const arrayToCSV = (arr, delimiter = ',') =>
  arr
    .map(v =>
      v.map(x => (isNaN(x) ? `"${x.replace(/"/g, '""')}"` : x)).join(delimiter)
    )
    .join('\n');

arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'
arrayToCSV([['a', '"b" great'], ['c', 3.1415]]);
// '"a","""b"" great"\n"c",3.1415'

arrayToHTMLList

• title: arrayToHTMLList
• tags: browser,array,intermediate

Converts the given array elements into <li> tags and appends them to the list of the given id.

• Use Array.prototype.map() and Document.querySelector() to create a list of html tags.

const arrayToHTMLList = (arr, listID) => 
  document.querySelector(`##${listID}`).innerHTML += arr
    .map(item => `<li>${item}</li>`)
    .join('');

arrayToHTMLList(['item 1', 'item 2'], 'myListID');

ary

• title: ary
• tags: function,advanced

Creates a function that accepts up to n arguments, ignoring any additional arguments.

• Call the provided function, fn, with up to n arguments, using Array.prototype.slice(0, n) and the spread operator (...).

const ary = (fn, n) => (...args) => fn(...args.slice(0, n));

const firstTwoMax = ary(Math.max, 2);
[[2, 6, 'a'], [6, 4, 8], [10]].map(x => firstTwoMax(...x)); // [6, 6, 10]

atob

• title: atob
• tags: node,string,beginner

Decodes a string of data which has been encoded using base-64 encoding.

• Create a Buffer for the given string with base-64 encoding and use Buffer.toString('binary') to return the decoded string.

const atob = str => Buffer.from(str, 'base64').toString('binary');

atob('Zm9vYmFy'); // 'foobar'

attempt

• title: attempt
• tags: function,intermediate

Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.

• Use a try... catch block to return either the result of the function or an appropriate error.
• If the caught object is not an Error, use it to create a new Error.

const attempt = (fn, ...args) => {
  try {
    return fn(...args);
  } catch (e) {
    return e instanceof Error ? e : new Error(e);
  }
};

var elements = attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

average

• title: average
• tags: math,array,beginner

Calculates the average of two or more numbers.

• Use Array.prototype.reduce() to add each value to an accumulator, initialized with a value of 0.
• Divide the resulting array by its length.

const average = (...nums) =>
  nums.reduce((acc, val) => acc + val, 0) / nums.length;

average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2

averageBy

• title: averageBy
• tags: math,array,intermediate

Calculates the average of an array, after mapping each element to a value using the provided function.

• Use Array.prototype.map() to map each element to the value returned by fn.
• Use Array.prototype.reduce() to add each value to an accumulator, initialized with a value of 0.
• Divide the resulting array by its length.

const averageBy = (arr, fn) =>
  arr
    .map(typeof fn === 'function' ? fn : val => val[fn])
    .reduce((acc, val) => acc + val, 0) / arr.length;

averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5

bifurcate

• title: bifurcate
• tags: array,intermediate

Splits values into two groups, based on the result of the given filter array.

• Use Array.prototype.reduce() and Array.prototype.push() to add elements to groups, based on filter.
• If filter has a truthy value for any element, add it to the first group, otherwise add it to the second group.

const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [
    [],
    [],
  ]);

bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]);
// [ ['beep', 'boop', 'bar'], ['foo'] ]

bifurcateBy

• title: bifurcateBy
• tags: array,intermediate

Splits values into two groups, based on the result of the given filtering function.

• Use Array.prototype.reduce() and Array.prototype.push() to add elements to groups, based on the value returned by fn for each element.
• If fn returns a truthy value for any element, add it to the first group, otherwise add it to the second group.

const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [
    [],
    [],
  ]);

bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b');
// [ ['beep', 'boop', 'bar'], ['foo'] ]

binary

• title: binary
• tags: function,intermediate

Creates a function that accepts up to two arguments, ignoring any additional arguments.

• Call the provided function, fn, with the first two arguments given.

const binary = fn => (a, b) => fn(a, b);

['2', '1', '0'].map(binary(Math.max)); // [2, 1, 2]

binarySearch

• title: binarySearch
• tags: algorithm,array,beginner

Finds the index of a given element in a sorted array using the binary search algorithm.

• Declare the left and right search boundaries, l and r, initialized to 0 and the length of the array respectively.
• Use a while loop to repeatedly narrow down the search subarray, using Math.floor() to cut it in half.
• Return the index of the element if found, otherwise return -1.
• Note: Does not account for duplicate values in the array.

const binarySearch = (arr, item) => {
  let l = 0,
    r = arr.length - 1;
  while (l <= r) {
    const mid = Math.floor((l + r) / 2);
    const guess = arr[mid];
    if (guess === item) return mid;
    if (guess > item) r = mid - 1;
    else l = mid + 1;
  }
  return -1;
};

binarySearch([1, 2, 3, 4, 5], 1); // 0
binarySearch([1, 2, 3, 4, 5], 5); // 4
binarySearch([1, 2, 3, 4, 5], 6); // -1

bind

• title: bind
• tags: function,object,advanced

Creates a function that invokes fn with a given context, optionally prepending any additional supplied parameters to the arguments.

• Return a function that uses Function.prototype.apply() to apply the given context to fn.
• Use the spread operator (...) to prepend any additional supplied parameters to the arguments.

const bind = (fn, context, ...boundArgs) => (...args) =>
  fn.apply(context, [...boundArgs, ...args]);

function greet(greeting, punctuation) {
  return greeting + ' ' + this.user + punctuation;
}
const freddy = { user: 'fred' };
const freddyBound = bind(greet, freddy);
console.log(freddyBound('hi', '!')); // 'hi fred!'

bindAll

• title: bindAll
• tags: object,function,intermediate

Binds methods of an object to the object itself, overwriting the existing method.

• Use Array.prototype.forEach() to iterate over the given fns.
• Return a function for each one, using Function.prototype.apply() to apply the given context (obj) to fn.

const bindAll = (obj, ...fns) =>
  fns.forEach(
    fn => (
      (f = obj[fn]),
      (obj[fn] = function() {
        return f.apply(obj);
      })
    )
  );

var view = {
  label: 'docs',
  click: function() {
    console.log('clicked ' + this.label);
  }
};
bindAll(view, 'click');
document.body.addEventListener('click', view.click);
// Log 'clicked docs' when clicked.

bindKey

• title: bindKey
• tags: function,object,advanced

Creates a function that invokes the method at a given key of an object, optionally prepending any additional supplied parameters to the arguments.

• Return a function that uses Function.prototype.apply() to bind context[fn] to context.
• Use the spread operator (...) to prepend any additional supplied parameters to the arguments.

const bindKey = (context, fn, ...boundArgs) => (...args) =>
  context[fn].apply(context, [...boundArgs, ...args]);

const freddy = {
  user: 'fred',
  greet: function(greeting, punctuation) {
    return greeting + ' ' + this.user + punctuation;
  }
};
const freddyBound = bindKey(freddy, 'greet');
console.log(freddyBound('hi', '!')); // 'hi fred!'

binomialCoefficient

• title: binomialCoefficient
• tags: math,algorithm,beginner

Calculates the number of ways to choose k items from n items without repetition and without order.

• Use Number.isNaN() to check if any of the two values is NaN.
• Check if k is less than 0, greater than or equal to n, equal to 1 or n - 1 and return the appropriate result.
• Check if n - k is less than k and switch their values accordingly.
• Loop from 2 through k and calculate the binomial coefficient.
• Use Math.round() to account for rounding errors in the calculation.

const binomialCoefficient = (n, k) => {
  if (Number.isNaN(n) || Number.isNaN(k)) return NaN;
  if (k < 0 || k > n) return 0;
  if (k === 0 || k === n) return 1;
  if (k === 1 || k === n - 1) return n;
  if (n - k < k) k = n - k;
  let res = n;
  for (let j = 2; j <= k; j++) res *= (n - j + 1) / j;
  return Math.round(res);
};

binomialCoefficient(8, 2); // 28

both

• title: both
• tags: function,logic,beginner unlisted: true

Checks if both of the given functions return true for a given set of arguments.

• Use the logical and (&&) operator on the result of calling the two functions with the supplied args.

const both = (f, g) => (...args) => f(...args) && g(...args);

const isEven = num => num % 2 === 0;
const isPositive = num => num > 0;
const isPositiveEven = both(isEven, isPositive);
isPositiveEven(4); // true
isPositiveEven(-2); // false

bottomVisible

• title: bottomVisible
• tags: browser,beginner

Checks if the bottom of the page is visible.

• Use scrollY, scrollHeight and clientHeight to determine if the bottom of the page is visible.

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight ||
    document.documentElement.clientHeight);

bottomVisible(); // true

btoa

• title: btoa
• tags: node,string,beginner

Creates a base-64 encoded ASCII string from a String object in which each character in the string is treated as a byte of binary data.

• Create a Buffer for the given string with binary encoding and use Buffer.toString('base64') to return the encoded string.

const btoa = str => Buffer.from(str, 'binary').toString('base64');

btoa('foobar'); // 'Zm9vYmFy'

bubbleSort

• title: bubbleSort
• tags: algorithm,array,beginner

Sorts an array of numbers, using the bubble sort algorithm.

• Declare a variable, swapped, that indicates if any values were swapped during the current iteration.
• Use the spread operator (...) to clone the original array, arr.
• Use a for loop to iterate over the elements of the cloned array, terminating before the last element.
• Use a nested for loop to iterate over the segment of the array between 0 and i, swapping any adjacent out of order elements and setting swapped to true.
• If swapped is false after an iteration, no more changes are needed, so the cloned array is returned.

const bubbleSort = arr => {
  let swapped = false;
  const a = [...arr];
  for (let i = 1; i < a.length - 1; i++) {
    swapped = false;
    for (let j = 0; j < a.length - i; j++) {
      if (a[j + 1] < a[j]) {
        [a[j], a[j + 1]] = [a[j + 1], a[j]];
        swapped = true;
      }
    }
    if (!swapped) return a;
  }
  return a;
};

bubbleSort([2, 1, 4, 3]); // [1, 2, 3, 4]

bucketSort

• title: bucketSort
• tags: algorithm,array,intermediate

Sorts an array of numbers, using the bucket sort algorithm.

• Use Math.min(), Math.max() and the spread operator (...) to find the minimum and maximum values of the given array.
• Use Array.from() and Math.floor() to create the appropriate number of buckets (empty arrays).
• Use Array.prototype.forEach() to populate each bucket with the appropriate elements from the array.
• Use Array.prototype.reduce(), the spread operator (...) and Array.prototype.sort() to sort each bucket and append it to the result.

const bucketSort = (arr, size = 5) => {
  const min = Math.min(...arr);
  const max = Math.max(...arr);
  const buckets = Array.from(
    { length: Math.floor((max - min) / size) + 1 },
    () => []
  );
  arr.forEach(val => {
    buckets[Math.floor((val - min) / size)].push(val);
  });
  return buckets.reduce((acc, b) => [...acc, ...b.sort((a, b) => a - b)], []);
};

bucketSort([6, 3, 4, 1]); // [1, 3, 4, 6]

byteSize

• title: byteSize
• tags: string,beginner

Returns the length of a string in bytes.

• Convert a given string to a Blob Object.
• Use Blob.size to get the length of the string in bytes.

const byteSize = str => new Blob([str]).size;

byteSize('😀'); // 4
byteSize('Hello World'); // 11

caesarCipher

• title: caesarCipher
• tags: algorithm,string,beginner

Encrypts or decrypts a given string using the Caesar cipher.

• Use the modulo (%) operator and the ternary operator (?) to calculate the correct encryption/decryption key.
• Use the spread operator (...) and Array.prototype.map() to iterate over the letters of the given string.
• Use String.prototype.charCodeAt() and String.fromCharCode() to convert each letter appropriately, ignoring special characters, spaces etc.
• Use Array.prototype.join() to combine all the letters into a string.
• Pass true to the last parameter, decrypt, to decrypt an encrypted string.

const caesarCipher = (str, shift, decrypt = false) => {
  const s = decrypt ? (26 - shift) % 26 : shift;
  const n = s > 0 ? s : 26 + (s % 26);
  return [...str]
    .map((l, i) => {
      const c = str.charCodeAt(i);
      if (c >= 65 && c <= 90)
        return String.fromCharCode(((c - 65 + n) % 26) + 65);
      if (c >= 97 && c <= 122)
        return String.fromCharCode(((c - 97 + n) % 26) + 97);
      return l;
    })
    .join('');
};

caesarCipher('Hello World!', -3); // 'Ebiil Tloia!'
caesarCipher('Ebiil Tloia!', 23, true); // 'Hello World!'

call

• title: call
• tags: function,advanced

Given a key and a set of arguments, call them when given a context.

• Use a closure to call key with args for the given context.

const call = (key, ...args) => context => context[key](...args);

Promise.resolve([1, 2, 3])
  .then(call('map', x => 2 * x))
  .then(console.log); // [ 2, 4, 6 ]
const map = call.bind(null, 'map');
Promise.resolve([1, 2, 3])
  .then(map(x => 2 * x))
  .then(console.log); // [ 2, 4, 6 ]

capitalize

• title: capitalize
• tags: string,intermediate

Capitalizes the first letter of a string.

• Use array destructuring and String.prototype.toUpperCase() to capitalize the first letter of the string.
• Use Array.prototype.join('') to combine the capitalized first with the ...rest of the characters.
• Omit the lowerRest argument to keep the rest of the string intact, or set it to true to convert to lowercase.

const capitalize = ([first, ...rest], lowerRest = false) =>
  first.toUpperCase() +
  (lowerRest ? rest.join('').toLowerCase() : rest.join(''));

capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'Foobar'

capitalizeEveryWord

• title: capitalizeEveryWord
• tags: string,regexp,intermediate

Capitalizes the first letter of every word in a string.

• Use String.prototype.replace() to match the first character of each word and String.prototype.toUpperCase() to capitalize it.

const capitalizeEveryWord = str =>
  str.replace(/\b[a-z]/g, char => char.toUpperCase());

capitalizeEveryWord('hello world!'); // 'Hello World!'

cartesianProduct

• title: cartesianProduct
• tags: math,array,beginner

Calculates the cartesian product of two arrays.

• Use Array.prototype.reduce(), Array.prototype.map() and the spread operator (...) to generate all possible element pairs from the two arrays.

const cartesianProduct = (a, b) =>
  a.reduce((p, x) => [...p, ...b.map(y => [x, y])], []);

cartesianProduct(['x', 'y'], [1, 2]);
// [['x', 1], ['x', 2], ['y', 1], ['y', 2]]

castArray

• title: castArray
• tags: type,array,beginner

Casts the provided value as an array if it's not one.

• Use Array.prototype.isArray() to determine if val is an array and return it as-is or encapsulated in an array accordingly.

const castArray = val => (Array.isArray(val) ? val : [val]);

castArray('foo'); // ['foo']
castArray([1]); // [1]

celsiusToFahrenheit

• title: celsiusToFahrenheit
• tags: math,beginner unlisted: true

Converts Celsius to Fahrenheit.

• Follow the conversion formula F = 1.8 * C + 32.

const celsiusToFahrenheit = degrees => 1.8 * degrees + 32;

celsiusToFahrenheit(33); // 91.4

chainAsync

• title: chainAsync
• tags: function,intermediate

Chains asynchronous functions.

• Loop through an array of functions containing asynchronous events, calling next when each asynchronous event has completed.

const chainAsync = fns => {
  let curr = 0;
  const last = fns[fns.length - 1];
  const next = () => {
    const fn = fns[curr++];
    fn === last ? fn() : fn(next);
  };
  next();
};

chainAsync([
  next => {
    console.log('0 seconds');
    setTimeout(next, 1000);
  },
  next => {
    console.log('1 second');
    setTimeout(next, 1000);
  },
  () => {
    console.log('2 second');
  }
]);

changeLightness

• title: changeLightness
• tags: string,browser,regexp,intermediate

Changes the lightness value of an hsl() color string.

• Use String.prototype.match() to get an array of 3 strings with the numeric values.
• Use Array.prototype.map() in combination with Number to convert them into an array of numeric values.
• Make sure the lightness is within the valid range (between 0 and 100), using Math.max() and Math.min().
• Use a template literal to create a new hsl() string with the updated value.

const changeLightness = (delta, hslStr) => {
  const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);

  const newLightness = Math.max(
    0,
    Math.min(100, lightness + parseFloat(delta))
  );

  return `hsl(${hue}, ${saturation}%, ${newLightness}%)`;
};

changeLightness(10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 60%)'
changeLightness(-10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 40%)'

checkProp

• title: checkProp
• tags: function,object,intermediate

Creates a function that will invoke a predicate function for the specified property on a given object.

• Return a curried function, that will invoke predicate for the specified prop on obj and return a boolean.

const checkProp = (predicate, prop) => obj => !!predicate(obj[prop]);

const lengthIs4 = checkProp(l => l === 4, 'length');
lengthIs4([]); // false
lengthIs4([1, 2, 3, 4]); // true
lengthIs4(new Set([1, 2, 3, 4])); // false (Set uses Size, not length)

const session = { user: {} };
const validUserSession = checkProp(u => u.active && !u.disabled, 'user');

validUserSession(session); // false

session.user.active = true;
validUserSession(session); // true

const noLength = checkProp(l => l === undefined, 'length');
noLength([]); // false
noLength({}); // true
noLength(new Set()); // true

chunk

• title: chunk
• tags: array,intermediate

Chunks an array into smaller arrays of a specified size.

• Use Array.from() to create a new array, that fits the number of chunks that will be produced.
• Use Array.prototype.slice() to map each element of the new array to a chunk the length of size.
• If the original array can't be split evenly, the final chunk will contain the remaining elements.

const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );

chunk([1, 2, 3, 4, 5], 2); // [[1, 2], [3, 4], [5]]

chunkIntoN

• title: chunkIntoN
• tags: array,intermediate

Chunks an array into n smaller arrays.

• Use Math.ceil() and Array.prototype.length to get the size of each chunk.
• Use Array.from() to create a new array of size n.
• Use Array.prototype.slice() to map each element of the new array to a chunk the length of size.
• If the original array can't be split evenly, the final chunk will contain the remaining elements.

const chunkIntoN = (arr, n) => {
  const size = Math.ceil(arr.length / n);
  return Array.from({ length: n }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );
}

chunkIntoN([1, 2, 3, 4, 5, 6, 7], 4); // [[1, 2], [3, 4], [5, 6], [7]]

clampNumber

• title: clampNumber
• tags: math,beginner

Clamps num within the inclusive range specified by the boundary values a and b.

• If num falls within the range, return num.
• Otherwise, return the nearest number in the range.

const clampNumber = (num, a, b) =>
  Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));

clampNumber(2, 3, 5); // 3
clampNumber(1, -1, -5); // -1

cloneRegExp

• title: cloneRegExp
• tags: type,intermediate

Clones a regular expression.

• Use new RegExp(), RegExp.prototype.source and RegExp.prototype.flags to clone the given regular expression.

const cloneRegExp = regExp => new RegExp(regExp.source, regExp.flags);

const regExp = /lorem ipsum/gi;
const regExp2 = cloneRegExp(regExp); // regExp !== regExp2

coalesce

• title: coalesce
• tags: type,beginner

Returns the first defined, non-null argument.

• Use Array.prototype.find() and Array.prototype.includes() to find the first value that is not equal to undefined or null.

const coalesce = (...args) => args.find(v => ![undefined, null].includes(v));

coalesce(null, undefined, '', NaN, 'Waldo'); // ''

coalesceFactory

• title: coalesceFactory
• tags: function,type,intermediate

Customizes a coalesce function that returns the first argument which is true based on the given validator.

• Use Array.prototype.find() to return the first argument that returns true from the provided argument validation function, valid.

const coalesceFactory = valid => (...args) => args.find(valid);

const customCoalesce = coalesceFactory(
  v => ![null, undefined, '', NaN].includes(v)
);
customCoalesce(undefined, null, NaN, '', 'Waldo'); // 'Waldo'

collectInto

• title: collectInto
• tags: function,array,intermediate

Changes a function that accepts an array into a variadic function.

• Given a function, return a closure that collects all inputs into an array-accepting function.

const collectInto = fn => (...args) => fn(args);

const Pall = collectInto(Promise.all.bind(Promise));
let p1 = Promise.resolve(1);
let p2 = Promise.resolve(2);
let p3 = new Promise(resolve => setTimeout(resolve, 2000, 3));
Pall(p1, p2, p3).then(console.log); // [1, 2, 3] (after about 2 seconds)

colorize

• title: colorize
• tags: node,string,intermediate

Adds special characters to text to print in color in the console (combined with console.log()).

• Use template literals and special characters to add the appropriate color code to the string output.
• For background colors, add a special character that resets the background color at the end of the string.

const colorize = (...args) => ({
  black: `\x1b[30m${args.join(' ')}`,
  red: `\x1b[31m${args.join(' ')}`,
  green: `\x1b[32m${args.join(' ')}`,
  yellow: `\x1b[33m${args.join(' ')}`,
  blue: `\x1b[34m${args.join(' ')}`,
  magenta: `\x1b[35m${args.join(' ')}`,
  cyan: `\x1b[36m${args.join(' ')}`,
  white: `\x1b[37m${args.join(' ')}`,
  bgBlack: `\x1b[40m${args.join(' ')}\x1b[0m`,
  bgRed: `\x1b[41m${args.join(' ')}\x1b[0m`,
  bgGreen: `\x1b[42m${args.join(' ')}\x1b[0m`,
  bgYellow: `\x1b[43m${args.join(' ')}\x1b[0m`,
  bgBlue: `\x1b[44m${args.join(' ')}\x1b[0m`,
  bgMagenta: `\x1b[45m${args.join(' ')}\x1b[0m`,
  bgCyan: `\x1b[46m${args.join(' ')}\x1b[0m`,
  bgWhite: `\x1b[47m${args.join(' ')}\x1b[0m`
});

console.log(colorize('foo').red); // 'foo' (red letters)
console.log(colorize('foo', 'bar').bgBlue); // 'foo bar' (blue background)
console.log(colorize(colorize('foo').yellow, colorize('foo').green).bgWhite);
// 'foo bar' (first word in yellow letters, second word in green letters, white background for both)

combine

• title: combine
• tags: array,object,intermediate

Combines two arrays of objects, using the specified key to match objects.

• Use Array.prototype.reduce() with an object accumulator to combine all objects in both arrays based on the given prop.
• Use Object.values() to convert the resulting object to an array and return it.

const combine = (a, b, prop) =>
  Object.values(
    [...a, ...b].reduce((acc, v) => {
      if (v[prop])
        acc[v[prop]] = acc[v[prop]]
          ? { ...acc[v[prop]], ...v }
          : { ...v };
      return acc;
    }, {})
  );

const x = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Maria' }
];
const y = [
  { id: 1, age: 28 },
  { id: 3, age: 26 },
  { age: 3}
];
combine(x, y, 'id');
// [
//  { id: 1, name: 'John', age: 28 },
//  { id: 2, name: 'Maria' },
//  { id: 3, age: 26 }
// ]

compact

• title: compact
• tags: array,beginner

Removes falsy values from an array.

• Use Array.prototype.filter() to filter out falsy values (false, null, 0, "", undefined, and NaN).

const compact = arr => arr.filter(Boolean);

compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); 
// [ 1, 2, 3, 'a', 's', 34 ]

compactObject

• title: compactObject
• tags: object,array,recursion,advanced

Deeply removes all falsy values from an object or array.

• Use recursion.
• Initialize the iterable data, using Array.isArray(), Array.prototype.filter() and Boolean for arrays in order to avoid sparse arrays.
• Use Object.keys() and Array.prototype.reduce() to iterate over each key with an appropriate initial value.
• Use Boolean to determine the truthiness of each key's value and add it to the accumulator if it's truthy.
• Use typeof to determine if a given value is an object and call the function again to deeply compact it.

const compactObject = val => {
  const data = Array.isArray(val) ? val.filter(Boolean) : val;
  return Object.keys(data).reduce(
    (acc, key) => {
      const value = data[key];
      if (Boolean(value))
        acc[key] = typeof value === 'object' ? compactObject(value) : value;
      return acc;
    },
    Array.isArray(val) ? [] : {}
  );
};

const obj = {
  a: null,
  b: false,
  c: true,
  d: 0,
  e: 1,
  f: '',
  g: 'a',
  h: [null, false, '', true, 1, 'a'],
  i: { j: 0, k: false, l: 'a' }
};
compactObject(obj);
// { c: true, e: 1, g: 'a', h: [ true, 1, 'a' ], i: { l: 'a' } }

compactWhitespace

• title: compactWhitespace
• tags: string,regexp,beginner

Compacts whitespaces in a string.

• Use String.prototype.replace() with a regular expression to replace all occurrences of 2 or more whitespace characters with a single space.

const compactWhitespace = str => str.replace(/\s{2,}/g, ' ');

compactWhitespace('Lorem    Ipsum'); // 'Lorem Ipsum'
compactWhitespace('Lorem \n Ipsum'); // 'Lorem Ipsum'

complement

• title: complement
• tags: function,logic,beginner

Returns a function that is the logical complement of the given function, fn.

• Use the logical not (!) operator on the result of calling fn with any supplied args.

const complement = fn => (...args) => !fn(...args);

const isEven = num => num % 2 === 0;
const isOdd = complement(isEven);
isOdd(2); // false
isOdd(3); // true

compose

• title: compose
• tags: function,intermediate

Performs right-to-left function composition.

• Use Array.prototype.reduce() to perform right-to-left function composition.
• The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.

const compose = (...fns) =>
  fns.reduce((f, g) => (...args) => f(g(...args)));

const add5 = x => x + 5;
const multiply = (x, y) => x * y;
const multiplyAndAdd5 = compose(
  add5,
  multiply
);
multiplyAndAdd5(5, 2); // 15

composeRight

• title: composeRight
• tags: function,intermediate

Performs left-to-right function composition.

• Use Array.prototype.reduce() to perform left-to-right function composition.
• The first (leftmost) function can accept one or more arguments; the remaining functions must be unary.

const composeRight = (...fns) =>
  fns.reduce((f, g) => (...args) => g(f(...args)));

const add = (x, y) => x + y;
const square = x => x * x;
const addAndSquare = composeRight(add, square);
addAndSquare(1, 2); // 9

containsWhitespace

• title: containsWhitespace
• tags: string,regexp,beginner

Checks if the given string contains any whitespace characters.

• Use RegExp.prototype.test() with an appropriate regular expression to check if the given string contains any whitespace characters.

const containsWhitespace = str => /\s/.test(str);

containsWhitespace('lorem'); // false
containsWhitespace('lorem ipsum'); // true

converge

• title: converge
• tags: function,intermediate

Accepts a converging function and a list of branching functions and returns a function that applies each branching function to the arguments and the results of the branching functions are passed as arguments to the converging function.

• Use Array.prototype.map() and Function.prototype.apply() to apply each function to the given arguments.
• Use the spread operator (...) to call converger with the results of all other functions.

const converge = (converger, fns) => (...args) =>
  converger(...fns.map(fn => fn.apply(null, args)));

const average = converge((a, b) => a / b, [
  arr => arr.reduce((a, v) => a + v, 0),
  arr => arr.length
]);
average([1, 2, 3, 4, 5, 6, 7]); // 4

copySign

• title: copySign
• tags: math,beginner

Returns the absolute value of the first number, but the sign of the second.

• Use Math.sign() to check if the two numbers have the same sign.
• Return x if they do, -x otherwise.

const copySign = (x, y) => Math.sign(x) === Math.sign(y) ? x : -x;

copySign(2, 3); // 2
copySign(2, -3); // -2
copySign(-2, 3); // 2
copySign(-2, -3); // -2

copyToClipboard

• title: copyToClipboard
• tags: browser,string,event,advanced

Copies a string to the clipboard. Only works as a result of user action (i.e. inside a click event listener).

• Create a new <textarea> element, fill it with the supplied data and add it to the HTML document.
• Use Selection.getRangeAt()to store the selected range (if any).
• Use Document.execCommand('copy') to copy to the clipboard.
• Remove the <textarea> element from the HTML document.
• Finally, use Selection().addRange() to recover the original selected range (if any).
• ⚠️ NOTICE: The same functionality can be easily implemented by using the new asynchronous Clipboard API, which is still experimental but should be used in the future instead of this snippet. Find out more about it here.

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0
      ? document.getSelection().getRangeAt(0)
      : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};

copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.

countBy

• title: countBy
• tags: array,object,intermediate

Groups the elements of an array based on the given function and returns the count of elements in each group.

• Use Array.prototype.map() to map the values of an array to a function or property name.
• Use Array.prototype.reduce() to create an object, where the keys are produced from the mapped results.

const countBy = (arr, fn) =>
  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => {
    acc[val] = (acc[val] || 0) + 1;
    return acc;
  }, {});

countBy([6.1, 4.2, 6.3], Math.floor); // {4: 1, 6: 2}
countBy(['one', 'two', 'three'], 'length'); // {3: 2, 5: 1}
countBy([{ count: 5 }, { count: 10 }, { count: 5 }], x => x.count)
// {5: 2, 10: 1}

countOccurrences

• title: countOccurrences
• tags: array,intermediate

Counts the occurrences of a value in an array.

• Use Array.prototype.reduce() to increment a counter each time the specific value is encountered inside the array.

const countOccurrences = (arr, val) =>
  arr.reduce((a, v) => (v === val ? a + 1 : a), 0);

countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3

countSubstrings

• title: countSubstrings
• tags: string,algorithm,beginner

Counts the occurrences of a substring in a given string.

• Use Array.prototype.indexOf() to look for searchValue in str.
• Increment a counter if the value is found and update the index, i.
• Use a while loop that will return as soon as the value returned from Array.prototype.indexOf() is -1.

const countSubstrings = (str, searchValue) => {
  let count = 0,
    i = 0;
  while (true) {
    const r = str.indexOf(searchValue, i);
    if (r !== -1) [count, i] = [count + 1, r + 1];
    else return count;
  }
};

countSubstrings('tiktok tok tok tik tok tik', 'tik'); // 3
countSubstrings('tutut tut tut', 'tut'); // 4

countWeekDaysBetween

• title: countWeekDaysBetween
• tags: date,intermediate

Counts the weekdays between two dates.

• Use Array.from() to construct an array with length equal to the number of days between startDate and endDate.
• Use Array.prototype.reduce() to iterate over the array, checking if each date is a weekday and incrementing count.
• Update startDate with the next day each loop using Date.prototype.getDate() and Date.prototype.setDate() to advance it by one day.
• NOTE: Does not take official holidays into account.

const countWeekDaysBetween = (startDate, endDate) =>
  Array
    .from({ length: (endDate - startDate) / (1000 * 3600 * 24) })
    .reduce(count => {
      if (startDate.getDay() % 6 !== 0) count++;
      startDate = new Date(startDate.setDate(startDate.getDate() + 1));
      return count;
    }, 0);

countWeekDaysBetween(new Date('Oct 05, 2020'), new Date('Oct 06, 2020')); // 1
countWeekDaysBetween(new Date('Oct 05, 2020'), new Date('Oct 14, 2020')); // 7

counter

• title: counter
• tags: browser,advanced

Creates a counter with the specified range, step and duration for the specified selector.

• Check if step has the proper sign and change it accordingly.
• Use setInterval() in combination with Math.abs() and Math.floor() to calculate the time between each new text draw.
• Use Document.querySelector(), Element.innerHTML to update the value of the selected element.
• Omit the fourth argument, step, to use a default step of 1.
• Omit the fifth argument, duration, to use a default duration of 2000ms.

const counter = (selector, start, end, step = 1, duration = 2000) => {
  let current = start,
    _step = (end - start) * step < 0 ? -step : step,
    timer = setInterval(() => {
      current += _step;
      document.querySelector(selector).innerHTML = current;
      if (current >= end) document.querySelector(selector).innerHTML = end;
      if (current >= end) clearInterval(timer);
    }, Math.abs(Math.floor(duration / (end - start))));
  return timer;
};

counter('##my-id', 1, 1000, 5, 2000);
// Creates a 2-second timer for the element with id="my-id"

createDirIfNotExists

• title: createDirIfNotExists
• tags: node,beginner

Creates a directory, if it does not exist.

• Use fs.existsSync() to check if the directory exists, fs.mkdirSync() to create it.

const fs = require('fs');

const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);

createDirIfNotExists('test');
// creates the directory 'test', if it doesn't exist

createElement

• title: createElement
• tags: browser,beginner

Creates an element from a string (without appending it to the document). If the given string contains multiple elements, only the first one will be returned.

• Use Document.createElement() to create a new element.
• Use Element.innerHTML to set its inner HTML to the string supplied as the argument.
• Use ParentNode.firstElementChild to return the element version of the string.

const createElement = str => {
  const el = document.createElement('div');
  el.innerHTML = str;
  return el.firstElementChild;
};

const el = createElement(
  `<div class="container">
    <p>Hello!</p>
  </div>`
);
console.log(el.className); // 'container'

createEventHub

• title: createEventHub
• tags: browser,event,advanced

Creates a pub/sub (publish–subscribe) event hub with emit, on, and off methods.

• Use Object.create(null) to create an empty hub object that does not inherit properties from Object.prototype.
• For emit, resolve the array of handlers based on the event argument and then run each one with Array.prototype.forEach() by passing in the data as an argument.
• For on, create an array for the event if it does not yet exist, then use Array.prototype.push() to add the handler
• to the array.
• For off, use Array.prototype.findIndex() to find the index of the handler in the event array and remove it using Array.prototype.splice().

const createEventHub = () => ({
  hub: Object.create(null),
  emit(event, data) {
    (this.hub[event] || []).forEach(handler => handler(data));
  },
  on(event, handler) {
    if (!this.hub[event]) this.hub[event] = [];
    this.hub[event].push(handler);
  },
  off(event, handler) {
    const i = (this.hub[event] || []).findIndex(h => h === handler);
    if (i > -1) this.hub[event].splice(i, 1);
    if (this.hub[event].length === 0) delete this.hub[event];
  }
});

const handler = data => console.log(data);
const hub = createEventHub();
let increment = 0;

// Subscribe: listen for different types of events
hub.on('message', handler);
hub.on('message', () => console.log('Message event fired'));
hub.on('increment', () => increment++);

// Publish: emit events to invoke all handlers subscribed to them, passing the data to them as an argument
hub.emit('message', 'hello world'); // logs 'hello world' and 'Message event fired'
hub.emit('message', { hello: 'world' }); // logs the object and 'Message event fired'
hub.emit('increment'); // `increment` variable is now 1

// Unsubscribe: stop a specific handler from listening to the 'message' event
hub.off('message', handler);

currentURL

• title: currentURL
• tags: browser,beginner

Returns the current URL.

• Use Window.location.href to get the current URL.

const currentURL = () => window.location.href;

currentURL(); // 'https://www.google.com/'

curry

• title: curry
• tags: function,recursion,advanced

Curries a function.

• Use recursion.
• If the number of provided arguments (args) is sufficient, call the passed function fn.
• Otherwise, use Function.prototype.bind() to return a curried function fn that expects the rest of the arguments.
• If you want to curry a function that accepts a variable number of arguments (a variadic function, e.g. Math.min()), you can optionally pass the number of arguments to the second parameter arity.

const curry = (fn, arity = fn.length, ...args) =>
  arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);

curry(Math.pow)(2)(10); // 1024
curry(Math.min, 3)(10)(50)(2); // 2

cycleGenerator

• title: cycleGenerator
• tags: function,generator,advanced

Creates a generator, looping over the given array indefinitely.

• Use a non-terminating while loop, that will yield a value every time Generator.prototype.next() is called.
• Use the module operator (%) with Array.prototype.length to get the next value's index and increment the counter after each yield statement.

const cycleGenerator = function* (arr) {
  let i = 0;
  while (true) {
    yield arr[i % arr.length];
    i++;
  }
};

const binaryCycle = cycleGenerator([0, 1]);
binaryCycle.next(); // { value: 0, done: false }
binaryCycle.next(); // { value: 1, done: false }
binaryCycle.next(); // { value: 0, done: false }
binaryCycle.next(); // { value: 1, done: false }

dayName

• title: dayName
• tags: date,beginner

Gets the name of the weekday from a Date object.

• Use Date.prototype.toLocaleDateString() with the { weekday: 'long' } option to retrieve the weekday.
• Use the optional second argument to get a language-specific name or omit it to use the default locale.

const dayName = (date, locale) =>
  date.toLocaleDateString(locale, { weekday: 'long' });

dayName(new Date()); // 'Saturday'
dayName(new Date('09/23/2020'), 'de-DE'); // 'Samstag'

dayOfYear

• title: dayOfYear
• tags: date,beginner

Gets the day of the year (number in the range 1-366) from a Date object.

• Use new Date() and Date.prototype.getFullYear() to get the first day of the year as a Date object.
• Subtract the first day of the year from date and divide with the milliseconds in each day to get the result.
• Use Math.floor() to appropriately round the resulting day count to an integer.

const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // 272

daysAgo

• title: daysAgo
• tags: date,beginner

Calculates the date of n days ago from today as a string representation.

• Use new Date() to get the current date, Math.abs() and Date.prototype.getDate() to update the date accordingly and set to the result using Date.prototype.setDate().
• Use Date.prototype.toISOString() to return a string in yyyy-mm-dd format.

const daysAgo = n => {
  let d = new Date();
  d.setDate(d.getDate() - Math.abs(n));
  return d.toISOString().split('T')[0];
};

daysAgo(20); // 2020-09-16 (if current date is 2020-10-06)

daysFromNow

• title: daysFromNow
• tags: date,beginner

Calculates the date of n days from today as a string representation.

• Use new Date() to get the current date, Math.abs() and Date.prototype.getDate() to update the date accordingly and set to the result using Date.prototype.setDate().
• Use Date.prototype.toISOString() to return a string in yyyy-mm-dd format.

const daysFromNow = n => {
  let d = new Date();
  d.setDate(d.getDate() + Math.abs(n));
  return d.toISOString().split('T')[0];
};

daysFromNow(5); // 2020-10-13 (if current date is 2020-10-08)

debounce

• title: debounce
• tags: function,intermediate

Creates a debounced function that delays invoking the provided function until at least ms milliseconds have elapsed since the last time it was invoked.

• Each time the debounced function is invoked, clear the current pending timeout with clearTimeout() and use setTimeout() to create a new timeout that delays invoking the function until at least ms milliseconds has elapsed.
• Use Function.prototype.apply() to apply the this context to the function and provide the necessary arguments.
• Omit the second argument, ms, to set the timeout at a default of 0 ms.

const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};

window.addEventListener(
  'resize',
  debounce(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250)
); // Will log the window dimensions at most every 250ms

debouncePromise

• title: debouncePromise
• tags: function,promise,advanced

Creates a debounced function that returns a promise, but delays invoking the provided function until at least ms milliseconds have elapsed since the last time it was invoked. All promises returned during this time will return the same data.

• Each time the debounced function is invoked, clear the current pending timeout with clearTimeout() and use setTimeout() to create a new timeout that delays invoking the function until at least ms milliseconds has elapsed.
• Use Function.prototype.apply() to apply the this context to the function and provide the necessary arguments.
• Create a new Promise and add its resolve and reject callbacks to the pending promises stack.
• When setTimeout is called, copy the current stack (as it can change between the provided function call and its resolution), clear it and call the provided function.
• When the provided function resolves/rejects, resolve/reject all promises in the stack (copied when the function was called) with the returned data.
• Omit the second argument, ms, to set the timeout at a default of 0 ms.

const debouncePromise = (fn, ms = 0) => {
  let timeoutId;
  const pending = [];
  return (...args) =>
    new Promise((res, rej) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        const currentPending = [...pending];
        pending.length = 0;
        Promise.resolve(fn.apply(this, args)).then(
          data => {
            currentPending.forEach(({ resolve }) => resolve(data));
          },
          error => {
            currentPending.forEach(({ reject }) => reject(error));
          }
        );
      }, ms);
      pending.push({ resolve: res, reject: rej });
    });
};

const fn = arg => new Promise(resolve => {
  setTimeout(resolve, 1000, ['resolved', arg]);
});
const debounced = debouncePromise(fn, 200);
debounced('foo').then(console.log);
debounced('bar').then(console.log);
// Will log ['resolved', 'bar'] both times

decapitalize

• title: decapitalize
• tags: string,intermediate

Decapitalizes the first letter of a string.

• Use array destructuring and String.prototype.toLowerCase() to decapitalize first letter, ...rest to get array of characters after first letter and then Array.prototype.join('') to make it a string again.
• Omit the upperRest argument to keep the rest of the string intact, or set it to true to convert to uppercase.

const decapitalize = ([first, ...rest], upperRest = false) =>
  first.toLowerCase() +
  (upperRest ? rest.join('').toUpperCase() : rest.join(''));

decapitalize('FooBar'); // 'fooBar'
decapitalize('FooBar', true); // 'fOOBAR'

deepClone

• title: deepClone
• tags: object,recursion,advanced

Creates a deep clone of an object. Clones primitives, arrays and objects, excluding class instances.

• Use recursion.
• Check if the passed object is null and, if so, return null.
• Use Object.assign() and an empty object ({}) to create a shallow clone of the original.
• Use Object.keys() and Array.prototype.forEach() to determine which key-value pairs need to be deep cloned.
• If the object is an Array, set the clone's length to that of the original and use Array.from(clone) to create a clone.

const deepClone = obj => {
  if (obj === null) return null;
  let clone = Object.assign({}, obj);
  Object.keys(clone).forEach(
    key =>
      (clone[key] =
        typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
  );
  if (Array.isArray(obj)) {
    clone.length = obj.length;
    return Array.from(clone);
  }
  return clone;
};

const a = { foo: 'bar', obj: { a: 1, b: 2 } };
const b = deepClone(a); // a !== b, a.obj !== b.obj

deepFlatten

• title: deepFlatten
• tags: array,recursion,intermediate

Deep flattens an array.

• Use recursion.
• Use Array.prototype.concat() with an empty array ([]) and the spread operator (...) to flatten an array.
• Recursively flatten each element that is an array.

const deepFlatten = arr =>
  [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));

deepFlatten([1, [2], [[3], 4], 5]); // [1, 2, 3, 4, 5]

deepFreeze

• title: deepFreeze
• tags: object,recursion,intermediate

Deep freezes an object.

• Use Object.keys() to get all the properties of the passed object, Array.prototype.forEach() to iterate over them.
• Call Object.freeze(obj) recursively on all properties, applying deepFreeze() as necessary.
• Finally, use Object.freeze() to freeze the given object.

const deepFreeze = obj => {
  Object.keys(obj).forEach(prop => {
    if (typeof obj[prop] === 'object') deepFreeze(obj[prop]);
  });
  return Object.freeze(obj);
};

'use strict';

const val = deepFreeze([1, [2, 3]]);

val[0] = 3; // not allowed
val[1][0] = 4; // not allowed as well

deepGet

• title: deepGet
• tags: object,intermediate

Gets the target value in a nested JSON object, based on the keys array.

• Compare the keys you want in the nested JSON object as an Array.
• Use Array.prototype.reduce() to get the values in the nested JSON object one by one.
• If the key exists in the object, return the target value, otherwise return null.

const deepGet = (obj, keys) =>
  keys.reduce(
    (xs, x) => (xs && xs[x] !== null && xs[x] !== undefined ? xs[x] : null),
    obj
  );

let index = 2;
const data = {
  foo: {
    foz: [1, 2, 3],
    bar: {
      baz: ['a', 'b', 'c']
    }
  }
};
deepGet(data, ['foo', 'foz', index]); // get 3
deepGet(data, ['foo', 'bar', 'baz', 8, 'foz']); // null

deepMapKeys

• title: deepMapKeys
• tags: object,recursion,advanced

Deep maps an object's keys.

• Creates an object with the same values as the provided object and keys generated by running the provided function for each key.
• Use Object.keys(obj) to iterate over the object's keys.
• Use Array.prototype.reduce() to create a new object with the same values and mapped keys using fn.

const deepMapKeys = (obj, fn) =>
  Array.isArray(obj)
    ? obj.map(val => deepMapKeys(val, fn))
    : typeof obj === 'object'
    ? Object.keys(obj).reduce((acc, current) => {
        const key = fn(current);
        const val = obj[current];
        acc[key] =
          val !== null && typeof val === 'object' ? deepMapKeys(val, fn) : val;
        return acc;
      }, {})
    : obj;

const obj = {
  foo: '1',
  nested: {
    child: {
      withArray: [
        {
          grandChild: ['hello']
        }
      ]
    }
  }
};
const upperKeysObj = deepMapKeys(obj, key => key.toUpperCase());
/*
{
  "FOO":"1",
  "NESTED":{
    "CHILD":{
      "WITHARRAY":[
        {
          "GRANDCHILD":[ 'hello' ]
        }
      ]
    }
  }
}
*/

defaults

• title: defaults
• tags: object,intermediate

Assigns default values for all properties in an object that are undefined.

• Use Object.assign() to create a new empty object and copy the original one to maintain key order.
• Use Array.prototype.reverse() and the spread operator (...) to combine the default values from left to right.
• Finally, use obj again to overwrite properties that originally had a value.

const defaults = (obj, ...defs) =>
  Object.assign({}, obj, ...defs.reverse(), obj);

defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }

defer

• title: defer
• tags: function,intermediate

Defers invoking a function until the current call stack has cleared.

• Use setTimeout() with a timeout of 1 ms to add a new event to the event queue and allow the rendering engine to complete its work.
• Use the spread (...) operator to supply the function with an arbitrary number of arguments.

const defer = (fn, ...args) => setTimeout(fn, 1, ...args);

// Example A:
defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'

// Example B:
document.querySelector('##someElement').innerHTML = 'Hello';
longRunningFunction();
// Browser will not update the HTML until this has finished
defer(longRunningFunction);
// Browser will update the HTML then run the function

degreesToRads

• title: degreesToRads
• tags: math,beginner

Converts an angle from degrees to radians.

• Use Math.PI and the degree to radian formula to convert the angle from degrees to radians.

const degreesToRads = deg => (deg * Math.PI) / 180.0;

degreesToRads(90.0); // ~1.5708

delay

• title: delay
• tags: function,intermediate

Invokes the provided function after ms milliseconds.

• Use setTimeout() to delay execution of fn.
• Use the spread (...) operator to supply the function with an arbitrary number of arguments.

const delay = (fn, ms, ...args) => setTimeout(fn, ms, ...args);

delay(
  function(text) {
    console.log(text);
  },
  1000,
  'later'
); // Logs 'later' after one second.

detectDeviceType

• title: detectDeviceType
• tags: browser,regexp,intermediate

Detects whether the page is being viewed on a mobile device or a desktop.

• Use a regular expression to test the navigator.userAgent property to figure out if the device is a mobile device or a desktop.

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ? 'Mobile'
    : 'Desktop';

detectDeviceType(); // 'Mobile' or 'Desktop'

detectLanguage

• title: detectLanguage
• tags: browser,intermediate

Detects the preferred language of the current user.

• Use NavigationLanguage.language or the first NavigationLanguage.languages if available, otherwise return defaultLang.
• Omit the second argument, defaultLang, to use 'en-US' as the default language code.

const detectLanguage = (defaultLang = 'en-US') => 
  navigator.language ||
  (Array.isArray(navigator.languages) && navigator.languages[0]) ||
  defaultLang;

detectLanguage(); // 'nl-NL'

difference

• title: difference
• tags: array,beginner

Calculates the difference between two arrays, without filtering duplicate values.

• Create a Set from b to get the unique values in b.
• Use Array.prototype.filter() on a to only keep values not contained in b, using Set.prototype.has().

const difference = (a, b) => {
  const s = new Set(b);
  return a.filter(x => !s.has(x));
};

difference([1, 2, 3, 3], [1, 2, 4]); // [3, 3]

differenceBy

• title: differenceBy
• tags: array,intermediate

Returns the difference between two arrays, after applying the provided function to each array element of both.

• Create a Set by applying fn to each element in b.
• Use Array.prototype.map() to apply fn to each element in a.
• Use Array.prototype.filter() in combination with fn on a to only keep values not contained in b, using Set.prototype.has().

const differenceBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.map(fn).filter(el => !s.has(el));
};

differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [2]

differenceWith

• title: differenceWith
• tags: array,intermediate

Filters out all values from an array for which the comparator function does not return true.

• Use Array.prototype.filter() and Array.prototype.findIndex() to find the appropriate values.
• Omit the last argument, comp, to use a default strict equality comparator.

const differenceWith = (arr, val, comp = (a, b) => a === b) =>
  arr.filter(a => val.findIndex(b => comp(a, b)) === -1);

differenceWith(
  [1, 1.2, 1.5, 3, 0],
  [1.9, 3, 0],
  (a, b) => Math.round(a) === Math.round(b)
); // [1, 1.2]
differenceWith([1, 1.2, 1.3], [1, 1.3, 1.5]); // [1.2]

dig

• title: dig
• tags: object,recursion,intermediate

Gets the target value in a nested JSON object, based on the given key.

• Use the in operator to check if target exists in obj.
• If found, return the value of obj[target].
• Otherwise use Object.values(obj) and Array.prototype.reduce() to recursively call dig on each nested object until the first matching key/value pair is found.

const dig = (obj, target) =>
  target in obj
    ? obj[target]
    : Object.values(obj).reduce((acc, val) => {
        if (acc !== undefined) return acc;
        if (typeof val === 'object') return dig(val, target);
      }, undefined);

const data = {
  level1: {
    level2: {
      level3: 'some data'
    }
  }
};
dig(data, 'level3'); // 'some data'
dig(data, 'level4'); // undefined

digitize

• title: digitize
• tags: math,beginner

Converts a number to an array of digits, removing its sign if necessary.

• Use Math.abs() to strip the number's sign.
• Convert the number to a string, using the spread operator (...) to build an array.
• Use Array.prototype.map() and parseInt() to transform each value to an integer.

const digitize = n => [...`${Math.abs(n)}`].map(i => parseInt(i));

digitize(123); // [1, 2, 3]
digitize(-123); // [1, 2, 3]

distance

• title: distance
• tags: math,algorithm,beginner

Calculates the distance between two points.

• Use Math.hypot() to calculate the Euclidean distance between two points.

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);

distance(1, 1, 2, 3); // ~2.2361

divmod

• title: divmod
• tags: math,beginner

Returns an array consisting of the quotient and remainder of the given numbers.

• Use Math.floor() to get the quotient of the division x / y.
• Use the modulo operator (%) to get the remainder of the division x / y.

const divmod = (x, y) => [Math.floor(x / y), x % y];

divmod(8, 3); // [2, 2]
divmod(3, 8); // [0, 3]
divmod(5, 5); // [1, 0]

drop

• title: drop
• tags: array,beginner

Creates a new array with n elements removed from the left.

• Use Array.prototype.slice() to remove the specified number of elements from the left.
• Omit the last argument, n, to use a default value of 1.

const drop = (arr, n = 1) => arr.slice(n);

drop([1, 2, 3]); // [2, 3]
drop([1, 2, 3], 2); // [3]
drop([1, 2, 3], 42); // []

dropRight

• title: dropRight
• tags: array,beginner

Creates a new array with n elements removed from the right.

• Use Array.prototype.slice() to remove the specified number of elements from the right.
• Omit the last argument, n, to use a default value of 1.

const dropRight = (arr, n = 1) => arr.slice(0, -n);

dropRight([1, 2, 3]); // [1, 2]
dropRight([1, 2, 3], 2); // [1]
dropRight([1, 2, 3], 42); // []

dropRightWhile

• title: dropRightWhile
• tags: array,intermediate

Removes elements from the end of an array until the passed function returns true. Returns the remaining elements in the array.

• Loop through the array, using Array.prototype.slice() to drop the last element of the array until the value returned from func is true.
• Return the remaining elements.

const dropRightWhile = (arr, func) => {
  let rightIndex = arr.length;
  while (rightIndex-- && !func(arr[rightIndex]));
  return arr.slice(0, rightIndex + 1);
};

dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2]

dropWhile

• title: dropWhile
• tags: array,intermediate

Removes elements in an array until the passed function returns true. Returns the remaining elements in the array.

• Loop through the array, using Array.prototype.slice() to drop the first element of the array until the value returned from func is true.
• Return the remaining elements.

const dropWhile = (arr, func) => {
  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
  return arr;
};

dropWhile([1, 2, 3, 4], n => n >= 3); // [3, 4]

either

• title: either
• tags: function,logic,beginner

Checks if at least one function returns true for a given set of arguments.

• Use the logical or (||) operator on the result of calling the two functions with the supplied args.

const either = (f, g) => (...args) => f(...args) || g(...args);

const isEven = num => num % 2 === 0;
const isPositive = num => num > 0;
const isPositiveOrEven = either(isPositive, isEven);
isPositiveOrEven(4); // true
isPositiveOrEven(3); // true

elementContains

• title: elementContains
• tags: browser,intermediate

Checks if the parent element contains the child element.

• Check that parent is not the same element as child.
• Use Node.contains() to check if the parent element contains the child element.

const elementContains = (parent, child) =>
  parent !== child && parent.contains(child);

elementContains(
  document.querySelector('head'),
  document.querySelector('title')
);
// true
elementContains(document.querySelector('body'), document.querySelector('body'));
// false

elementIsFocused

• title: elementIsFocused
• tags: browser,beginner

Checks if the given element is focused.

• Use Document.activeElement to determine if the given element is focused.

const elementIsFocused = el => (el === document.activeElement);

elementIsFocused(el); // true if the element is focused

elementIsVisibleInViewport

• title: elementIsVisibleInViewport
• tags: browser,intermediate

Checks if the element specified is visible in the viewport.

• Use Element.getBoundingClientRect() and the Window.inner(Width|Height) values to determine if a given element is visible in the viewport.
• Omit the second argument to determine if the element is entirely visible, or specify true to determine if it is partially visible.

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) ||
        (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
elementIsVisibleInViewport(el); // false - (not fully visible)
elementIsVisibleInViewport(el, true); // true - (partially visible)

equals

• title: equals
• tags: object,array,type,advanced

Performs a deep comparison between two values to determine if they are equivalent.

• Check if the two values are identical, if they are both Date objects with the same time, using Date.prototype.getTime() or if they are both non-object values with an equivalent value (strict comparison).
• Check if only one value is null or undefined or if their prototypes differ.
• If none of the above conditions are met, use Object.keys() to check if both values have the same number of keys.
• Use Array.prototype.every() to check if every key in a exists in b and if they are equivalent by calling equals() recursively.

const equals = (a, b) => {
  if (a === b) return true;
  if (a instanceof Date && b instanceof Date)
    return a.getTime() === b.getTime();
  if (!a || !b || (typeof a !== 'object' && typeof b !== 'object'))
    return a === b;
  if (a.prototype !== b.prototype) return false;
  let keys = Object.keys(a);
  if (keys.length !== Object.keys(b).length) return false;
  return keys.every(k => equals(a[k], b[k]));
};

equals(
  { a: [2, { e: 3 }], b: [4], c: 'foo' },
  { a: [2, { e: 3 }], b: [4], c: 'foo' }
); // true
equals([1, 2, 3], { 0: 1, 1: 2, 2: 3 }); // true

escapeHTML

• title: escapeHTML
• tags: string,browser,regexp,intermediate

Escapes a string for use in HTML.

• Use String.prototype.replace() with a regexp that matches the characters that need to be escaped.
• Use the callback function to replace each character instance with its associated escaped character using a dictionary (object).

const escapeHTML = str =>
  str.replace(
    /[&<>'"]/g,
    tag =>
      ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&##39;',
        '"': '&quot;'
      }[tag] || tag)
  );

escapeHTML('<a href="##">Me & you</a>'); 
// '&lt;a href=&quot;##&quot;&gt;Me &amp; you&lt;/a&gt;'

escapeRegExp

• title: escapeRegExp
• tags: string,regexp,intermediate

Escapes a string to use in a regular expression.

• Use String.prototype.replace() to escape special characters.

const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

escapeRegExp('(test)'); // \\(test\\)

euclideanDistance

• title: euclideanDistance
• tags: math,algorithm,intermediate

Calculates the distance between two points in any number of dimensions.

• Use Object.keys() and Array.prototype.map() to map each coordinate to its difference between the two points.
• Use Math.hypot() to calculate the Euclidean distance between the two points.

const euclideanDistance = (a, b) =>
  Math.hypot(...Object.keys(a).map(k => b[k] - a[k]));

euclideanDistance([1, 1], [2, 3]); // ~2.2361
euclideanDistance([1, 1, 1], [2, 3, 2]); // ~2.4495

everyNth

• title: everyNth
• tags: array,beginner

Returns every nth element in an array.

• Use Array.prototype.filter() to create a new array that contains every nth element of a given array.

const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === nth - 1);

everyNth([1, 2, 3, 4, 5, 6], 2); // [ 2, 4, 6 ]

expandTabs

• title: expandTabs
• tags: string,regexp,beginner

Convert tabs to spaces, where each tab corresponds to count spaces.

• Use String.prototype.replace() with a regular expression and String.prototype.repeat() to replace each tab character with count spaces.

const expandTabs = (str, count) => str.replace(/\t/g, ' '.repeat(count));

expandTabs('\t\tlorem', 3); // '      lorem'

extendHex

• title: extendHex
• tags: string,intermediate

Extends a 3-digit color code to a 6-digit color code.

• Use Array.prototype.map(), String.prototype.split() and Array.prototype.join() to join the mapped array for converting a 3-digit RGB notated hexadecimal color-code to the 6-digit form.
• Array.prototype.slice() is used to remove ## from string start since it's added once.

const extendHex = shortHex =>
  '##' +
  shortHex
    .slice(shortHex.startsWith('##') ? 1 : 0)
    .split('')
    .map(x => x + x)
    .join('');

extendHex('##03f'); // '##0033ff'
extendHex('05a'); // '##0055aa'

factorial

• title: factorial
• tags: math,algorithm,recursion,beginner

Calculates the factorial of a number.

• Use recursion.
• If n is less than or equal to 1, return 1.
• Otherwise, return the product of n and the factorial of n - 1.
• Throw a TypeError if n is a negative number.

const factorial = n =>
  n < 0
    ? (() => {
        throw new TypeError('Negative numbers are not allowed!');
      })()
    : n <= 1
    ? 1
    : n * factorial(n - 1);

factorial(6); // 720

fahrenheitToCelsius

• title: fahrenheitToCelsius
• tags: math,beginner unlisted: true

Converts Fahrenheit to Celsius.

• Follow the conversion formula C = (F - 32) * 5/9.

const fahrenheitToCelsius = degrees => (degrees - 32) * 5 / 9;

fahrenheitToCelsius(32); // 0

fibonacci

• title: fibonacci
• tags: math,algorithm,intermediate

Generates an array, containing the Fibonacci sequence, up until the nth term.

• Use Array.from() to create an empty array of the specific length, initializing the first two values (0 and 1).
• Use Array.prototype.reduce() and Array.prototype.concat() to add values into the array, using the sum of the last two values, except for the first two.

const fibonacci = n =>
  Array.from({ length: n }).reduce(
    (acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i),
    []
  );

fibonacci(6); // [0, 1, 1, 2, 3, 5]

filterNonUnique

• title: filterNonUnique
• tags: array,beginner

Creates an array with the non-unique values filtered out.

• Use new Set() and the spread operator (...) to create an array of the unique values in arr.
• Use Array.prototype.filter() to create an array containing only the unique values.

const filterNonUnique = arr =>
  [...new Set(arr)].filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 3, 5]

filterNonUniqueBy

• title: filterNonUniqueBy
• tags: array,intermediate

Creates an array with the non-unique values filtered out, based on a provided comparator function.

• Use Array.prototype.filter() and Array.prototype.every() to create an array containing only the unique values, based on the comparator function, fn.
• The comparator function takes four arguments: the values of the two elements being compared and their indexes.

const filterNonUniqueBy = (arr, fn) =>
  arr.filter((v, i) => arr.every((x, j) => (i === j) === fn(v, x, i, j)));

filterNonUniqueBy(
  [
    { id: 0, value: 'a' },
    { id: 1, value: 'b' },
    { id: 2, value: 'c' },
    { id: 1, value: 'd' },
    { id: 0, value: 'e' }
  ],
  (a, b) => a.id === b.id
); // [ { id: 2, value: 'c' } ]

filterUnique

• title: filterUnique
• tags: array,beginner

Creates an array with the unique values filtered out.

• Use new Set() and the spread operator (...) to create an array of the unique values in arr.
• Use Array.prototype.filter() to create an array containing only the non-unique values.

const filterUnique = arr =>
  [...new Set(arr)].filter(i => arr.indexOf(i) !== arr.lastIndexOf(i));

filterUnique([1, 2, 2, 3, 4, 4, 5]); // [2, 4]

filterUniqueBy

• title: filterUniqueBy
• tags: array,intermediate

Creates an array with the unique values filtered out, based on a provided comparator function.

• Use Array.prototype.filter() and Array.prototype.every() to create an array containing only the non-unique values, based on the comparator function, fn.
• The comparator function takes four arguments: the values of the two elements being compared and their indexes.

const filterUniqueBy = (arr, fn) =>
  arr.filter((v, i) => arr.some((x, j) => (i !== j) === fn(v, x, i, j)));

filterUniqueBy(
  [
    { id: 0, value: 'a' },
    { id: 1, value: 'b' },
    { id: 2, value: 'c' },
    { id: 3, value: 'd' },
    { id: 0, value: 'e' }
  ],
  (a, b) => a.id == b.id
); // [ { id: 0, value: 'a' }, { id: 0, value: 'e' } ]

findKey

• title: findKey
• tags: object,intermediate

Finds the first key that satisfies the provided testing function. Otherwise undefined is returned.

• Use Object.keys(obj) to get all the properties of the object, Array.prototype.find() to test each key-value pair using fn.
• The callback receives three arguments - the value, the key and the object.

const findKey = (obj, fn) => 
  Object.keys(obj).find(key => fn(obj[key], key, obj));

findKey(
  {
    barney: { age: 36, active: true },
    fred: { age: 40, active: false },
    pebbles: { age: 1, active: true }
  },
  x => x['active']
); // 'barney'

findKeys

• title: findKeys
• tags: object,beginner

Finds all the keys in the provided object that match the given value.

• Use Object.keys(obj) to get all the properties of the object.
• Use Array.prototype.filter() to test each key-value pair and return all keys that are equal to the given value.

const findKeys = (obj, val) => 
  Object.keys(obj).filter(key => obj[key] === val);

const ages = {
  Leo: 20,
  Zoey: 21,
  Jane: 20,
};
findKeys(ages, 20); // [ 'Leo', 'Jane' ]

findLast

• title: findLast
• tags: array,beginner

Finds the last element for which the provided function returns a truthy value.

• Use Array.prototype.filter() to remove elements for which fn returns falsy values.
• Use Array.prototype.pop() to get the last element in the filtered array.

const findLast = (arr, fn) => arr.filter(fn).pop();

findLast([1, 2, 3, 4], n => n % 2 === 1); // 3

findLastIndex

• title: findLastIndex
• tags: array,intermediate

Finds the index of the last element for which the provided function returns a truthy value.

• Use Array.prototype.map() to map each element to an array with its index and value.
• Use Array.prototype.filter() to remove elements for which fn returns falsy values
• Use Array.prototype.pop() to get the last element in the filtered array.
• Return -1 if there are no matching elements.

const findLastIndex = (arr, fn) =>
  (arr
    .map((val, i) => [i, val])
    .filter(([i, val]) => fn(val, i, arr))
    .pop() || [-1])[0];

findLastIndex([1, 2, 3, 4], n => n % 2 === 1); // 2 (index of the value 3)
findLastIndex([1, 2, 3, 4], n => n === 5); // -1 (default value when not found)

findLastKey

• title: findLastKey
• tags: object,intermediate

Finds the last key that satisfies the provided testing function. Otherwise undefined is returned.

• Use Object.keys(obj) to get all the properties of the object.
• Use Array.prototype.reverse() to reverse the order and Array.prototype.find() to test the provided function for each key-value pair.
• The callback receives three arguments - the value, the key and the object.

const findLastKey = (obj, fn) =>
  Object.keys(obj)
    .reverse()
    .find(key => fn(obj[key], key, obj));

findLastKey(
  {
    barney: { age: 36, active: true },
    fred: { age: 40, active: false },
    pebbles: { age: 1, active: true }
  },
  x => x['active']
); // 'pebbles'

flatten

• title: flatten
• tags: array,recursion,intermediate

Flattens an array up to the specified depth.

• Use recursion, decrementing depth by 1 for each level of depth.
• Use Array.prototype.reduce() and Array.prototype.concat() to merge elements or arrays.
• Base case, for depth equal to 1 stops recursion.
• Omit the second argument, depth, to flatten only to a depth of 1 (single flatten).

const flatten = (arr, depth = 1) =>
  arr.reduce(
    (a, v) =>
      a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v),
    []
  );

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

flattenObject

• title: flattenObject
• tags: object,recursion,advanced

Flattens an object with the paths for keys.

• Use recursion.
• Use Object.keys(obj) combined with Array.prototype.reduce() to convert every leaf node to a flattened path node.
• If the value of a key is an object, the function calls itself with the appropriate prefix to create the path using Object.assign().
• Otherwise, it adds the appropriate prefixed key-value pair to the accumulator object.
• You should always omit the second argument, prefix, unless you want every key to have a prefix.

const flattenObject = (obj, prefix = '') =>
  Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? `${prefix}.` : '';
    if (
      typeof obj[k] === 'object' &&
      obj[k] !== null &&
      Object.keys(obj[k]).length > 0
    )
      Object.assign(acc, flattenObject(obj[k], pre + k));
    else acc[pre + k] = obj[k];
    return acc;
  }, {});

flattenObject({ a: { b: { c: 1 } }, d: 1 }); // { 'a.b.c': 1, d: 1 }

flip

• title: flip
• tags: function,intermediate

Takes a function as an argument, then makes the first argument the last.

• Use argument destructuring and a closure with variadic arguments.
• Splice the first argument, using the spread operator (...), to make it the last before applying the rest.

const flip = fn => (first, ...rest) => fn(...rest, first);

let a = { name: 'John Smith' };
let b = {};
const mergeFrom = flip(Object.assign);
let mergePerson = mergeFrom.bind(null, a);
mergePerson(b); // == b
b = {};
Object.assign(b, a); // == b

forEachRight

• title: forEachRight
• tags: array,intermediate

Executes a provided function once for each array element, starting from the array's last element.

• Use Array.prototype.slice() to clone the given array and Array.prototype.reverse() to reverse it.
• Use Array.prototype.forEach() to iterate over the reversed array.

const forEachRight = (arr, callback) =>
  arr
    .slice()
    .reverse()
    .forEach(callback);

forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'

forOwn

• title: forOwn
• tags: object,intermediate

Iterates over all own properties of an object, running a callback for each one.

• Use Object.keys(obj) to get all the properties of the object.
• Use Array.prototype.forEach() to run the provided function for each key-value pair.
• The callback receives three arguments - the value, the key and the object.

const forOwn = (obj, fn) =>
  Object.keys(obj).forEach(key => fn(obj[key], key, obj));

forOwn({ foo: 'bar', a: 1 }, v => console.log(v)); // 'bar', 1

forOwnRight

• title: forOwnRight
• tags: object,intermediate

Iterates over all own properties of an object in reverse, running a callback for each one.

• Use Object.keys(obj) to get all the properties of the object, Array.prototype.reverse() to reverse their order.
• Use Array.prototype.forEach() to run the provided function for each key-value pair.
• The callback receives three arguments - the value, the key and the object.

const forOwnRight = (obj, fn) =>
  Object.keys(obj)
    .reverse()
    .forEach(key => fn(obj[key], key, obj));

forOwnRight({ foo: 'bar', a: 1 }, v => console.log(v)); // 1, 'bar'

formToObject

• title: formToObject
• tags: browser,object,intermediate

Encodes a set of form elements as an object.

• Use the Foata constructor to convert the HTML form to Foata and Array.from() to convert to an array.
• Collect the object from the array using Array.prototype.reduce().

const formToObject = form =>
  Array.from(new Foata(form)).reduce(
    (acc, [key, value]) => ({
      ...acc,
      [key]: value
    }),
    {}
  );

formToObject(document.querySelector('##form'));
// { email: 'test@email.com', name: 'Test Name' }

formatDuration

• title: formatDuration
• tags: date,math,string,intermediate

Returns the human-readable format of the given number of milliseconds.

• Divide ms with the appropriate values to obtain the appropriate values for day, hour, minute, second and millisecond.
• Use Object.entries() with Array.prototype.filter() to keep only non-zero values.
• Use Array.prototype.map() to create the string for each value, pluralizing appropriately.
• Use String.prototype.join(', ') to combine the values into a string.

const formatDuration = ms => {
  if (ms < 0) ms = -ms;
  const time = {
    day: Math.floor(ms / 86400000),
    hour: Math.floor(ms / 3600000) % 24,
    minute: Math.floor(ms / 60000) % 60,
    second: Math.floor(ms / 1000) % 60,
    millisecond: Math.floor(ms) % 1000
  };
  return Object.entries(time)
    .filter(val => val[1] !== 0)
    .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
    .join(', ');
};

formatDuration(1001); // '1 second, 1 millisecond'
formatDuration(34325055574);
// '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'

formatNumber

• title: formatNumber
• tags: string,math,beginner

Formats a number using the local number format order.

• Use Number.prototype.toLocaleString() to convert a number to using the local number format separators.

const formatNumber = num => num.toLocaleString();

formatNumber(123456); // '123,456' in `en-US`
formatNumber(15675436903); // '15.675.436.903' in `de-DE`

frequencies

• title: frequencies
• tags: array,object,intermediate

Creates an object with the unique values of an array as keys and their frequencies as the values.

• Use Array.prototype.reduce() to map unique values to an object's keys, adding to existing keys every time the same value is encountered.

const frequencies = arr =>
  arr.reduce((a, v) => {
    a[v] = a[v] ? a[v] + 1 : 1;
    return a;
  }, {});

frequencies(['a', 'b', 'a', 'c', 'a', 'a', 'b']); // { a: 4, b: 2, c: 1 }
frequencies([...'ball']); // { b: 1, a: 1, l: 2 }

fromCamelCase

• title: fromCamelCase
• tags: string,intermediate

Converts a string from camelcase.

• Use String.prototype.replace() to break the string into words and add a separator between them.
• Omit the second argument to use a default separator of _.

const fromCamelCase = (str, separator = '_') =>
  str
    .replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2')
    .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + separator + '$2')
    .toLowerCase();

fromCamelCase('someDatabaseFieldName', ' '); // 'some database field name'
fromCamelCase('someLabelThatNeedsToBeDecamelized', '-'); 
// 'some-label-that-needs-to-be-decamelized'
fromCamelCase('someJavascriptProperty', '_'); // 'some_javascript_property'
fromCamelCase('JSONToCSV', '.'); // 'json.to.csv'

fromTimestamp

• title: fromTimestamp
• tags: date,beginner

Creates a Date object from a Unix timestamp.

• Convert the timestamp to milliseconds by multiplying with 1000.
• Use new Date() to create a new Date object.

const fromTimestamp = timestamp => new Date(timestamp * 1000);

fromTimestamp(1602162242); // 2020-10-08T13:04:02.000Z

frozenSet

• title: frozenSet
• tags: array,intermediate

Creates a frozen Set object.

• Use the new Set() constructor to create a new Set object from iterable.
• Set the add, delete and clear methods of the newly created object to undefined, so that they cannot be used, practically freezing the object.

const frozenSet = iterable => {
  const s = new Set(iterable);
  s.add = undefined;
  s.delete = undefined;
  s.clear = undefined;
  return s;
};

frozenSet([1, 2, 3, 1, 2]); 
// Set { 1, 2, 3, add: undefined, delete: undefined, clear: undefined }

fullscreen

• title: fullscreen
• tags: browser,intermediate

Opens or closes an element in fullscreen mode.

• Use Document.querySelector() and Element.requestFullscreen() to open the given element in fullscreen.
• Use Document.exitFullscreen() to exit fullscreen mode.
• Omit the second argument, el, to use body as the default element.
• Omit the first element, mode, to open the element in fullscreen mode by default.

const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // Opens `body` in fullscreen mode
fullscreen(false); // Exits fullscreen mode

functionName

• title: functionName
• tags: function,beginner

Logs the name of a function.

• Use console.debug() and the name property of the passed function to log the function's name to the debug channel of the console.
• Return the given function fn.

const functionName = fn => (console.debug(fn.name), fn);

let m = functionName(Math.max)(5, 6);
// max (logged in debug channel of console)
// m = 6

functions

• title: functions
• tags: object,function,advanced

Gets an array of function property names from own (and optionally inherited) enumerable properties of an object.

• Use Object.keys(obj) to iterate over the object's own properties.
• If inherited is true, use Object.getPrototypeOf(obj) to also get the object's inherited properties.
• Use Array.prototype.filter() to keep only those properties that are functions.
• Omit the second argument, inherited, to not include inherited properties by default.

const functions = (obj, inherited = false) =>
  (inherited
    ? [...Object.keys(obj), ...Object.keys(Object.getPrototypeOf(obj))]
    : Object.keys(obj)
  ).filter(key => typeof obj[key] === 'function');

function Foo() {
  this.a = () => 1;
  this.b = () => 2;
}
Foo.prototype.c = () => 3;
functions(new Foo()); // ['a', 'b']
functions(new Foo(), true); // ['a', 'b', 'c']

gcd

• title: gcd
• tags: math,algorithm,recursion,intermediate

Calculates the greatest common divisor between two or more numbers/arrays.

• The inner _gcd function uses recursion.
• Base case is when y equals 0. In this case, return x.
• Otherwise, return the GCD of y and the remainder of the division x/y.

const gcd = (...arr) => {
  const _gcd = (x, y) => (!y ? x : gcd(y, x % y));
  return [...arr].reduce((a, b) => _gcd(a, b));
};

gcd(8, 36); // 4
gcd(...[12, 8, 32]); // 4

generateItems

• title: generateItems
• tags: array,function,intermediate

Generates an array with the given amount of items, using the given function.

• Use Array.from() to create an empty array of the specific length, calling fn with the index of each newly created element.
• The callback takes one argument - the index of each element.

const generateItems = (n, fn) => Array.from({ length: n }, (_, i) => fn(i));

generateItems(10, Math.random);
// [0.21, 0.08, 0.40, 0.96, 0.96, 0.24, 0.19, 0.96, 0.42, 0.70]

generatorToArray

• title: generatorToArray
• tags: function,array,generator,beginner

Converts the output of a generator function to an array.

• Use the spread operator (...) to convert the output of the generator function to an array.

const generatorToArray = gen => [...gen];

const s = new Set([1, 2, 1, 3, 1, 4]);
generatorToArray(s.entries()); // [[ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ]]

geometricProgression

• title: geometricProgression
• tags: math,algorithm,intermediate

Initializes an array containing the numbers in the specified range where start and end are inclusive and the ratio between two terms is step. Returns an error if step equals 1.

• Use Array.from(), Math.log() and Math.floor() to create an array of the desired length, Array.prototype.map() to fill with the desired values in a range.
• Omit the second argument, start, to use a default value of 1.
• Omit the third argument, step, to use a default value of 2.

const geometricProgression = (end, start = 1, step = 2) =>
  Array.from({
    length: Math.floor(Math.log(end / start) / Math.log(step)) + 1,
  }).map((_, i) => start * step ** i);

geometricProgression(256); // [1, 2, 4, 8, 16, 32, 64, 128, 256]
geometricProgression(256, 3); // [3, 6, 12, 24, 48, 96, 192]
geometricProgression(256, 1, 4); // [1, 4, 16, 64, 256]

get

• title: get
• tags: object,regexp,intermediate

Retrieves a set of properties indicated by the given selectors from an object.

• Use Array.prototype.map() for each selector, String.prototype.replace() to replace square brackets with dots.
• Use String.prototype.split('.') to split each selector.
• Use Array.prototype.filter() to remove empty values and Array.prototype.reduce() to get the value indicated by each selector.

const get = (from, ...selectors) =>
  [...selectors].map(s =>
    s
      .replace(/\[([^\[\]]*)\]/g, '.$1.')
      .split('.')
      .filter(t => t !== '')
      .reduce((prev, cur) => prev && prev[cur], from)
  );

const obj = {
  selector: { to: { val: 'val to select' } },
  target: [1, 2, { a: 'test' }],
};
get(obj, 'selector.to.val', 'target[0]', 'target[2].a');
// ['val to select', 1, 'test']

getAncestors

• title: getAncestors
• tags: browser,beginner

Returns all the ancestors of an element from the document root to the given element.

• Use Node.parentNode and a while loop to move up the ancestor tree of the element.
• Use Array.prototype.unshift() to add each new ancestor to the start of the array.

const getAncestors = el => {
  let ancestors = [];
  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }
  return ancestors;
};

getAncestors(document.querySelector('nav')); 
// [document, html, body, header, nav]

getBaseURL

• title: getBaseURL
• tags: string,browser,regexp,beginner

Gets the current URL without any parameters or fragment identifiers.

• Use String.prototype.replace() with an appropriate regular expression to remove everything after either '?' or '##', if found.

const getBaseURL = url => url.replace(/[?##].*$/, '');

getBaseURL('http://url.com/page?name=Adam&surname=Smith');
// 'http://url.com/page'

getColonTimeFrate

• title: getColonTimeFrate
• tags: date,string,beginner

Returns a string of the form HH:MM:SS from a Date object.

• Use Date.prototype.toTimeString() and String.prototype.slice() to get the HH:MM:SS part of a given Date object.

const getColonTimeFrate = date => date.toTimeString().slice(0, 8);

getColonTimeFrate(new Date()); // '08:38:00'

getDaysDiffBetweenDates

• title: getDaysDiffBetweenDates
• tags: date,intermediate

Calculates the difference (in days) between two dates.

• Subtract the two Date object and divide by the number of milliseconds in a day to get the difference (in days) between them.

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);

getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9

getElementsBiggerThanViewport

• title: getElementsBiggerThanViewport
• tags: browser,intermediate

Returns an array of HTML elements whose width is larger than that of the viewport's.

• Use HTMLElement.offsetWidth to get the width of the document.
• Use Array.prototype.filter() on the result of Document.querySelectorAll() to check the width of all elements in the document.

const getElementsBiggerThanViewport = () => {
  const docWidth = document.documentElement.offsetWidth;
  return [...document.querySelectorAll('*')].filter(
    el => el.offsetWidth > docWidth
  );
};

getElementsBiggerThanViewport(); // <div id="ultra-wide-item" />

getImages

• title: getImages
• tags: browser,intermediate

Fetches all images from within an element and puts them into an array.

• Use Element.getElementsByTagName() to get all <img> elements inside the provided element.
• Use Array.prototype.map() to map every src attribute of each <img> element.
• If includeDuplicates is false, create a new Set to eliminate duplicates and return it after spreading into an array.
• Omit the second argument, includeDuplicates, to discard duplicates by default.

const getImages = (el, includeDuplicates = false) => {
  const images = [...el.getElementsByTagName('img')].map(img =>
    img.getAttribute('src')
  );
  return includeDuplicates ? images : [...new Set(images)];
};

getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...']
getImages(document, false); // ['image1.jpg', 'image2.png', '...']

getMeridiemSuffixOfInteger

• title: getMeridiemSuffixOfInteger
• tags: date,beginner

Converts an integer to a suffixed string, adding am or pm based on its value.

• Use the modulo operator (%) and conditional checks to transform an integer to a stringified 12-hour format with meridiem suffix.

const getMeridiemSuffixOfInteger = num =>
  num === 0 || num === 24
    ? 12 + 'am'
    : num === 12
    ? 12 + 'pm'
    : num < 12
    ? (num % 12) + 'am'
    : (num % 12) + 'pm';

getMeridiemSuffixOfInteger(0); // '12am'
getMeridiemSuffixOfInteger(11); // '11am'
getMeridiemSuffixOfInteger(13); // '1pm'
getMeridiemSuffixOfInteger(25); // '1pm'

getMonthsDiffBetweenDates

• title: getMonthsDiffBetweenDates
• tags: date,intermediate

Calculates the difference (in months) between two dates.

• Use Date.prototype.getFullYear() and Date.prototype.getMonth() to calculate the difference (in months) between two Date objects.

const getMonthsDiffBetweenDates = (dateInitial, dateFinal) =>
  Math.max(
    (dateFinal.getFullYear() - dateInitial.getFullYear()) * 12 +
      dateFinal.getMonth() -
      dateInitial.getMonth(),
    0
  );

getMonthsDiffBetweenDates(new Date('2017-12-13'), new Date('2018-04-29')); // 4

getParentsUntil

• title: getParentsUntil
• tags: browser,intermediate

Finds all the ancestors of an element up until the element matched by the specified selector.

• Use Node.parentNode and a while loop to move up the ancestor tree of the element.
• Use Array.prototype.unshift() to add each new ancestor to the start of the array.
• Use Element.matches() to check if the current element matches the specified selector.

const getParentsUntil = (el, selector) => {
  let parents = [],
    _el = el.parentNode;
  while (_el && typeof _el.matches === 'function') {
    parents.unshift(_el);
    if (_el.matches(selector)) return parents;
    else _el = _el.parentNode;
  }
  return [];
};

getParentsUntil(document.querySelector('##home-link'), 'header');
// [header, nav, ul, li]

getProtocol

• title: getProtocol
• tags: browser,beginner

Gets the protocol being used on the current page.

• Use Window.location.protocol to get the protocol (http: or https:) of the current page.

const getProtocol = () => window.location.protocol;

getProtocol(); // 'https:'

getScrollPosition

• title: getScrollPosition
• tags: browser,intermediate

Returns the scroll position of the current page.

• Use Window.pageXOffset and Window.pageYOffset if they are defined, otherwise Element.scrollLeft and Element.scrollTop.
• Omit the single argument, el, to use a default value of window.

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

getScrollPosition(); // {x: 0, y: 200}

getSelectedText

• title: getSelectedText
• tags: browser,beginner

Gets the currently selected text.

• Use Window.getSelection() and Selection.toString() to get the currently selected text.

const getSelectedText = () => window.getSelection().toString();

getSelectedText(); // 'Lorem ipsum'

getSiblings

• title: getSiblings
• tags: browser,intermediate

Returns an array containing all the siblings of the given element.

• Use Node.parentNode and Node.childNodes to get a NodeList of all the elements contained in the element's parent.
• Use the spread operator (...) and Array.prototype.filter() to convert to an array and remove the given element from it.

const getSiblings = el =>
  [...el.parentNode.childNodes].filter(node => node !== el);

getSiblings(document.querySelector('head')); // ['body']

getStyle

• title: getStyle
• tags: browser,css,beginner

Retrieves the value of a CSS rule for the specified element.

• Use Window.getComputedStyle() to get the value of the CSS rule for the specified element.

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];

getStyle(document.querySelector('p'), 'font-size'); // '16px'

getTimestamp

• title: getTimestamp
• tags: date,beginner

Gets the Unix timestamp from a Date object.

• Use Date.prototype.getTime() to get the timestamp in milliseconds and divide by 1000 to get the timestamp in seconds.
• Use Math.floor() to appropriately round the resulting timestamp to an integer.
• Omit the argument, date, to use the current date.

const getTimestamp = (date = new Date()) => Math.floor(date.getTime() / 1000);

getTimestamp(); // 1602162242

getType

• title: getType
• tags: type,beginner

Returns the native type of a value.

• Return 'undefined' or 'null' if the value is undefined or null.
• Otherwise, use Object.prototype.constructor.name to get the name of the constructor.

const getType = v =>
  (v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name);

getType(new Set([1, 2, 3])); // 'Set'

getURLParameters

• title: getURLParameters
• tags: browser,string,regexp,intermediate

Creates an object containing the parameters of the current URL.

• Use String.prototype.match() with an appropriate regular expression to get all key-value pairs.
• Use Array.prototype.reduce() to map and combine them into a single object.
• Pass location.search as the argument to apply to the current url.

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
  );

getURLParameters('google.com'); // {}
getURLParameters('http://url.com/page?name=Adam&surname=Smith');
// {name: 'Adam', surname: 'Smith'}

getVerticalOffset

• title: getVerticalOffset
• tags: browser,beginner

Finds the distance from a given element to the top of the document.

• Use a while loop and HTMLElement.offsetParent to move up the offset parents of the given element.
• Add HTMLElement.offsetTop for each element and return the result.

const getVerticalOffset = el => {
  let offset = el.offsetTop,
    _el = el;
  while (_el.offsetParent) {
    _el = _el.offsetParent;
    offset += _el.offsetTop;
  }
  return offset;
};

getVerticalOffset('.my-element'); // 120

groupBy

• title: groupBy
• tags: array,object,intermediate

Groups the elements of an array based on the given function.

• Use Array.prototype.map() to map the values of the array to a function or property name.
• Use Array.prototype.reduce() to create an object, where the keys are produced from the mapped results.

const groupBy = (arr, fn) =>
  arr
    .map(typeof fn === 'function' ? fn : val => val[fn])
    .reduce((acc, val, i) => {
      acc[val] = (acc[val] || []).concat(arr[i]);
      return acc;
    }, {});

groupBy([6.1, 4.2, 6.3], Math.floor); // {4: [4.2], 6: [6.1, 6.3]}
groupBy(['one', 'two', 'three'], 'length'); // {3: ['one', 'two'], 5: ['three']}

hammingDistance

• title: hammingDistance
• tags: math,algorithm,intermediate

Calculates the Hamming distance between two values.

• Use the XOR operator (^) to find the bit difference between the two numbers.
• Convert to a binary string using Number.prototype.toString(2).
• Count and return the number of 1s in the string, using String.prototype.match(/1/g).

const hammingDistance = (num1, num2) =>
  ((num1 ^ num2).toString(2).match(/1/g) || '').length;

hammingDistance(2, 3); // 1

hasClass

• title: hasClass
• tags: browser,css,beginner

Checks if the given element has the specified class.

• Use Element.classList and DOMTokenList.contains() to check if the element has the specified class.

const hasClass = (el, className) => el.classList.contains(className);

hasClass(document.querySelector('p.special'), 'special'); // true

hasDuplicates

• title: hasDuplicates
• tags: array,beginner

Checks if there are duplicate values in a flat array.

• Use Set() to get the unique values in the array.
• Use Set.prototype.size and Array.prototype.length to check if the count of the unique values is the same as elements in the original array.

const hasDuplicates = arr => new Set(arr).size !== arr.length;

hasDuplicates([0, 1, 1, 2]); // true
hasDuplicates([0, 1, 2, 3]); // false

hasFlags

• title: hasFlags
• tags: node,intermediate

Checks if the current process's arguments contain the specified flags.

• Use Array.prototype.every() and Array.prototype.includes() to check if process.argv contains all the specified flags.
• Use a regular expression to test if the specified flags are prefixed with - or -- and prefix them accordingly.

const hasFlags = (...flags) =>
  flags.every(flag =>
    process.argv.includes(/^-{1,2}/.test(flag) ? flag : '--' + flag)
  );

// node myScript.js -s --test --cool=true
hasFlags('-s'); // true
hasFlags('--test', 'cool=true', '-s'); // true
hasFlags('special'); // false

hasKey

• title: hasKey
• tags: object,intermediate

Checks if the target value exists in a JSON object.

• Check if keys is non-empty and use Array.prototype.every() to sequentially check its keys to internal depth of the object, obj.
• Use Object.prototype.hasOwnProperty() to check if obj does not have the current key or is not an object, stop propagation and return false.
• Otherwise assign the key's value to obj to use on the next iteration.
• Return false beforehand if given key list is empty.

const hasKey = (obj, keys) => {
  return (
    keys.length > 0 &&
    keys.every(key => {
      if (typeof obj !== 'object' || !obj.hasOwnProperty(key)) return false;
      obj = obj[key];
      return true;
    })
  );
};

let obj = {
  a: 1,
  b: { c: 4 },
  'b.d': 5
};
hasKey(obj, ['a']); // true
hasKey(obj, ['b']); // true
hasKey(obj, ['b', 'c']); // true
hasKey(obj, ['b.d']); // true
hasKey(obj, ['d']); // false
hasKey(obj, ['c']); // false
hasKey(obj, ['b', 'f']); // false

hashBrowser

• title: hashBrowser
• tags: browser,promise,advanced

Creates a hash for a value using the SHA-256 algorithm. Returns a promise.

• Use the SubtleCrypto API to create a hash for the given value.
• Create a new TextEncoder and use it to encode val, passing its value to SubtleCrypto.digest() to generate a digest of the given data.
• Use DataView.prototype.getUint32() to read data from the resolved ArrayBuffer.
• Add the data to an array using Array.prototype.push() after converting it to its hexadecimal representation using Number.prototype.toString(16).
• Finally, use Array.prototype.join() to combine values in the array of hexes into a string.

const hashBrowser = val =>
  crypto.subtle
    .digest('SHA-256', new TextEncoder('utf-8').encode(val))
    .then(h => {
      let hexes = [],
        view = new DataView(h);
      for (let i = 0; i < view.byteLength; i += 4)
        hexes.push(('00000000' + view.getUint32(i).toString(16)).slice(-8));
      return hexes.join('');
    });

hashBrowser(
  JSON.stringify({ a: 'a', b: [1, 2, 3, 4], foo: { c: 'bar' } })
).then(console.log);
// '04aa106279f5977f59f9067fa9712afc4aedc6f5862a8defc34552d8c7206393'

hashNode

• title: hashNode
• tags: node,promise,advanced

Creates a hash for a value using the SHA-256 algorithm. Returns a promise.

• Use crypto.createHash() to create a Hash object with the appropriate algorithm.
• Use hash.update() to add the data from val to the Hash, hash.digest() to calculate the digest of the data.
• Use setTimeout() to prevent blocking on a long operation, and return a Promise to give it a familiar interface.

const crypto = require('crypto');

const hashNode = val =>
  new Promise(resolve =>
    setTimeout(
      () => resolve(crypto.createHash('sha256').update(val).digest('hex')),
      0
    )
  );

hashNode(JSON.stringify({ a: 'a', b: [1, 2, 3, 4], foo: { c: 'bar' } })).then(
  console.log
);
// '04aa106279f5977f59f9067fa9712afc4aedc6f5862a8defc34552d8c7206393'

haveSameContents

• title: haveSameContents
• tags: array,intermediate

Checks if two arrays contain the same elements regardless of order.

• Use a for...of loop over a Set created from the values of both arrays.
• Use Array.prototype.filter() to compare the amount of occurrences of each distinct value in both arrays.
• Return false if the counts do not match for any element, true otherwise.

const haveSameContents = (a, b) => {
  for (const v of new Set([...a, ...b]))
    if (a.filter(e => e === v).length !== b.filter(e => e === v).length)
      return false;
  return true;
};

haveSameContents([1, 2, 4], [2, 4, 1]); // true

head

• title: head
• tags: array,beginner

Returns the head of an array.

• Check if arr is truthy and has a length property.
• Use arr[0] if possible to return the first element, otherwise return undefined.

const head = arr => (arr && arr.length ? arr[0] : undefined);

head([1, 2, 3]); // 1
head([]); // undefined
head(null); // undefined
head(undefined); // undefined

heapsort

• title: heapsort
• tags: algorithm,array,recursion,advanced

Sorts an array of numbers, using the heapsort algorithm.

• Use recursion.
• Use the spread operator (...) to clone the original array, arr.
• Use closures to declare a variable, l, and a function heapify.
• Use a for loop and Math.floor() in combination with heapify to create a max heap from the array.
• Use a for loop to repeatedly narrow down the considered range, using heapify and swapping values as necessary in order to sort the cloned array.

const heapsort = arr => {
  const a = [...arr];
  let l = a.length;

  const heapify = (a, i) => {
    const left = 2 * i + 1;
    const right = 2 * i + 2;
    let max = i;
    if (left < l && a[left] > a[max]) max = left;
    if (right < l && a[right] > a[max]) max = right;
    if (max !== i) {
      [a[max], a[i]] = [a[i], a[max]];
      heapify(a, max);
    }
  };

  for (let i = Math.floor(l / 2); i >= 0; i -= 1) heapify(a, i);
  for (i = a.length - 1; i > 0; i--) {
    [a[0], a[i]] = [a[i], a[0]];
    l--;
    heapify(a, 0);
  }
  return a;
};

heapsort([6, 3, 4, 1]); // [1, 3, 4, 6]

hexToRGB

• title: hexToRGB
• tags: string,math,advanced

Converts a color code to an rgb() or rgba() string if alpha value is provided.

• Use bitwise right-shift operator and mask bits with & (and) operator to convert a hexadecimal color code (with or without prefixed with ##) to a string with the RGB values.
• If it's 3-digit color code, first convert to 6-digit version.
• If an alpha value is provided alongside 6-digit hex, give rgba() string in return.

const hexToRGB = hex => {
  let alpha = false,
    h = hex.slice(hex.startsWith('##') ? 1 : 0);
  if (h.length === 3) h = [...h].map(x => x + x).join('');
  else if (h.length === 8) alpha = true;
  h = parseInt(h, 16);
  return (
    'rgb' +
    (alpha ? 'a' : '') +
    '(' +
    (h >>> (alpha ? 24 : 16)) +
    ', ' +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ', ' +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : '') +
    ')'
  );
};

hexToRGB('##27ae60ff'); // 'rgba(39, 174, 96, 255)'
hexToRGB('27ae60'); // 'rgb(39, 174, 96)'
hexToRGB('##fff'); // 'rgb(255, 255, 255)'

hide

• title: hide
• tags: browser,css,beginner

Hides all the elements specified.

• Use NodeList.prototype.forEach() to apply display: none to each element specified.

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

httpDelete

• title: httpDelete
• tags: browser,intermediate

Makes a DELETE request to the passed URL.

• Use the XMLHttpRequest web API to make a DELETE request to the given url.
• Handle the onload event, by running the provided callback function.
• Handle the onerror event, by running the provided err function.
• Omit the third argument, err to log the request to the console's error stream by default.

const httpDelete = (url, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('DELETE', url, true);
  request.onload = () => callback(request);
  request.onerror = () => err(request);
  request.send();
};

httpDelete('https://jsonplaceholder.typicode.com/posts/1', request => {
  console.log(request.responseText);
}); // Logs: {}

httpGet

• title: httpGet
• tags: browser,intermediate

Makes a GET request to the passed URL.

• Use the XMLHttpRequest web API to make a GET request to the given url.
• Handle the onload event, by calling the given callback the responseText.
• Handle the onerror event, by running the provided err function.
• Omit the third argument, err, to log errors to the console's error stream by default.

const httpGet = (url, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send();
};

httpGet(
  'https://jsonplaceholder.typicode.com/posts/1',
  console.log
); /*
Logs: {
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
*/

httpPost

• title: httpPost
• tags: browser,intermediate

Makes a POST request to the passed URL.

• Use the XMLHttpRequest web API to make a POST request to the given url.
• Set the value of an HTTP request header with setRequestHeader method.
• Handle the onload event, by calling the given callback the responseText.
• Handle the onerror event, by running the provided err function.
• Omit the fourth argument, err, to log errors to the console's error stream by default.

const httpPost = (url, data, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send(data);
};

const newPost = {
  userId: 1,
  id: 1337,
  - title: 'Foo',
  body: 'bar bar bar'
};
const data = JSON.stringify(newPost);
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  data,
  console.log
); /*
Logs: {
  "userId": 1,
  "id": 1337,
  "title": "Foo",
  "body": "bar bar bar"
}
*/
httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  null, // does not send a body
  console.log
); /*
Logs: {
  "id": 101
}
*/

httpPut

• title: httpPut
• tags: browser,intermediate

Makes a PUT request to the passed URL.

• Use XMLHttpRequest web api to make a PUT request to the given url.
• Set the value of an HTTP request header with setRequestHeader method.
• Handle the onload event, by running the provided callback function.
• Handle the onerror event, by running the provided err function.
• Omit the last argument, err to log the request to the console's error stream by default.

const httpPut = (url, data, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('PUT', url, true);
  request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  request.onload = () => callback(request);
  request.onerror = () => err(request);
  request.send(data);
};

const password = 'fooBaz';
const data = JSON.stringify({
  id: 1,
  - title: 'foo',
  body: 'bar',
  userId: 1
});
httpPut('https://jsonplaceholder.typicode.com/posts/1', data, request => {
  console.log(request.responseText);
}); /*
Logs: {
  id: 1,
  - title: 'foo',
  body: 'bar',
  userId: 1
}
*/

httpsRedirect

• title: httpsRedirect
• tags: browser,intermediate

Redirects the page to HTTPS if it's currently in HTTP.

• Use location.protocol to get the protocol currently being used.
• If it's not HTTPS, use location.replace() to replace the existing page with the HTTPS version of the page.
• Use location.href to get the full address, split it with String.prototype.split() and remove the protocol part of the URL.
• Note that pressing the back button doesn't take it back to the HTTP page as its replaced in the history.

const httpsRedirect = () => {
  if (location.protocol !== 'https:')
    location.replace('https://' + location.href.split('//')[1]);
};

httpsRedirect(); 
// If you are on http://mydomain.com, you are redirected to https://mydomain.com

hz

• title: hz
• tags: function,intermediate unlisted: true

Measures the number of times a function is executed per second (hz/hertz).

• Use performance.now() to get the difference in milliseconds before and after the iteration loop to calculate the time elapsed executing the function iterations times.
• Return the number of cycles per second by converting milliseconds to seconds and dividing it by the time elapsed.
• Omit the second argument, iterations, to use the default of 100 iterations.

const hz = (fn, iterations = 100) => {
  const before = performance.now();
  for (let i = 0; i < iterations; i++) fn();
  return (1000 * iterations) / (performance.now() - before);
};

const numbers = Array(10000).fill().map((_, i) => i);

const sumReduce = () => numbers.reduce((acc, n) => acc + n, 0);
const sumForLoop = () => {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) sum += numbers[i];
  return sum;
};

Math.round(hz(sumReduce)); // 572
Math.round(hz(sumForLoop)); // 4784

inRange

• title: inRange
• tags: math,beginner

Checks if the given number falls within the given range.

• Use arithmetic comparison to check if the given number is in the specified range.
• If the second argument, end, is not specified, the range is considered to be from 0 to start.

const inRange = (n, start, end = null) => {
  if (end && start > end) [end, start] = [start, end];
  return end == null ? n >= 0 && n < start : n >= start && n < end;
};

inRange(3, 2, 5); // true
inRange(3, 4); // true
inRange(2, 3, 5); // false
inRange(3, 2); // false

includesAll

• title: includesAll
• tags: array,beginner

Checks if all the elements in values are included in arr.

• Use Array.prototype.every() and Array.prototype.includes() to check if all elements of values are included in arr.

const includesAll = (arr, values) => values.every(v => arr.includes(v));

includesAll([1, 2, 3, 4], [1, 4]); // true
includesAll([1, 2, 3, 4], [1, 5]); // false

includesAny

• title: includesAny
• tags: array,beginner

Checks if at least one element of values is included in arr.

• Use Array.prototype.some() and Array.prototype.includes() to check if at least one element of values is included in arr.

const includesAny = (arr, values) => values.some(v => arr.includes(v));

includesAny([1, 2, 3, 4], [2, 9]); // true
includesAny([1, 2, 3, 4], [8, 9]); // false

indentString

• title: indentString
• tags: string,beginner

Indents each line in the provided string.

• Use String.prototype.replace() and a regular expression to add the character specified by indent count times at the start of each line.
• Omit the third argument, indent, to use a default indentation character of ' '.

const indentString = (str, count, indent = ' ') =>
  str.replace(/^/gm, indent.repeat(count));

indentString('Lorem\nIpsum', 2); // '  Lorem\n  Ipsum'
indentString('Lorem\nIpsum', 2, '_'); // '__Lorem\n__Ipsum'

indexOfAll

• title: indexOfAll
• tags: array,intermediate

Finds all indexes of val in an array. If val never occurs, returns an empty array.

• Use Array.prototype.reduce() to loop over elements and store indexes for matching elements.

const indexOfAll = (arr, val) =>
  arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), []);

indexOfAll([1, 2, 3, 1, 2, 3], 1); // [0, 3]
indexOfAll([1, 2, 3], 4); // []

indexOfSubstrings

• title: indexOfSubstrings
• tags: string,algorithm,generator,intermediate

Finds all the indexes of a substring in a given string.

• Use Array.prototype.indexOf() to look for searchValue in str.
• Use yield to return the index if the value is found and update the index, i.
• Use a while loop that will terminate the generator as soon as the value returned from Array.prototype.indexOf() is -1.

const indexOfSubstrings = function* (str, searchValue) {
  let i = 0;
  while (true) {
    const r = str.indexOf(searchValue, i);
    if (r !== -1) {
      yield r;
      i = r + 1;
    } else return;
  }
};

[...indexOfSubstrings('tiktok tok tok tik tok tik', 'tik')]; // [0, 15, 23]
[...indexOfSubstrings('tutut tut tut', 'tut')]; // [0, 2, 6, 10]
[...indexOfSubstrings('hello', 'hi')]; // []

initial

• title: initial
• tags: array,beginner

Returns all the elements of an array except the last one.

• Use Array.prototype.slice(0, -1) to return all but the last element of the array.

const initial = arr => arr.slice(0, -1);

initial([1, 2, 3]); // [1, 2]

initialize2DArray

• title: initialize2DArray
• tags: array,intermediate

Initializes a 2D array of given width and height and value.

• Use Array.from() and Array.prototype.map() to generate h rows where each is a new array of size w.
• Use Array.prototype.fill() to initialize all items with value val.
• Omit the last argument, val, to use a default value of null.

const initialize2DArray = (w, h, val = null) =>
  Array.from({ length: h }).map(() => Array.from({ length: w }).fill(val));

initialize2DArray(2, 2, 0); // [[0, 0], [0, 0]]

initializeArrayWithRange

• title: initializeArrayWithRange
• tags: array,intermediate

Initializes an array containing the numbers in the specified range where start and end are inclusive with their common difference step.

• Use Array.from() to create an array of the desired length.
• Use (end - start + 1)/step and a map function to fill the array with the desired values in the given range.
• Omit the second argument, start, to use a default value of 0.
• Omit the last argument, step, to use a default value of 1.

const initializeArrayWithRange = (end, start = 0, step = 1) =>
  Array.from(
    { length: Math.ceil((end - start + 1) / step) },
    (_, i) => i * step + start
  );

initializeArrayWithRange(5); // [0, 1, 2, 3, 4, 5]
initializeArrayWithRange(7, 3); // [3, 4, 5, 6, 7]
initializeArrayWithRange(9, 0, 2); // [0, 2, 4, 6, 8]

initializeArrayWithRangeRight

• title: initializeArrayWithRangeRight
• tags: array,intermediate

Initializes an array containing the numbers in the specified range (in reverse) where start and end are inclusive with their common difference step.

• Use Array.from(Math.ceil((end+1-start)/step)) to create an array of the desired length(the amounts of elements is equal to (end-start)/step or (end+1-start)/step for inclusive end), Array.prototype.map() to fill with the desired values in a range.
• Omit the second argument, start, to use a default value of 0.
• Omit the last argument, step, to use a default value of 1.

const initializeArrayWithRangeRight = (end, start = 0, step = 1) =>
  Array.from({ length: Math.ceil((end + 1 - start) / step) }).map(
    (v, i, arr) => (arr.length - i - 1) * step + start
  );

initializeArrayWithRangeRight(5); // [5, 4, 3, 2, 1, 0]
initializeArrayWithRangeRight(7, 3); // [7, 6, 5, 4, 3]
initializeArrayWithRangeRight(9, 0, 2); // [8, 6, 4, 2, 0]

initializeArrayWithValues

• title: initializeArrayWithValues
• tags: array,intermediate

Initializes and fills an array with the specified values.

• Use Array.from() to create an array of the desired length, Array.prototype.fill() to fill it with the desired values.
• Omit the last argument, val, to use a default value of 0.

const initializeArrayWithValues = (n, val = 0) =>
  Array.from({ length: n }).fill(val);

initializeArrayWithValues(5, 2); // [2, 2, 2, 2, 2]

initializeNDArray

• title: initializeNDArray
• tags: array,recursion,intermediate

Create a n-dimensional array with given value.

• Use recursion.
• Use Array.from(), Array.prototype.map() to generate rows where each is a new array initialized using initializeNDArray().

const initializeNDArray = (val, ...args) =>
  args.length === 0
    ? val
    : Array.from({ length: args[0] }).map(() =>
        initializeNDArray(val, ...args.slice(1))
      );

initializeNDArray(1, 3); // [1, 1, 1]
initializeNDArray(5, 2, 2, 2); // [[[5, 5], [5, 5]], [[5, 5], [5, 5]]]

injectCSS

• title: injectCSS
• tags: browser,css,intermediate

Injects the given CSS code into the current document

• Use Document.createElement() to create a new style element and set its type to text/css.
• Use Element.innerText to set the value to the given CSS string.
• Use Document.head and Element.appendChild() to append the new element to the document head.
• Return the newly created style element.

const injectCSS = css => {
  let el = document.createElement('style');
  el.type = 'text/css';
  el.innerText = css;
  document.head.appendChild(el);
  return el;
};

injectCSS('body { background-color: ##000 }'); 
// '<style type="text/css">body { background-color: ##000 }</style>'

insertAfter

• title: insertAfter
• tags: browser,beginner

Inserts an HTML string after the end of the specified element.

• Use Element.insertAdjacentHTML() with a position of 'afterend' to parse htmlString and insert it after the end of el.

const insertAfter = (el, htmlString) =>
  el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>');
// <div id="myId">...</div> <p>after</p>

insertAt

• title: insertAt
• tags: array,intermediate

Mutates the original array to insert the given values after the specified index.

• Use Array.prototype.splice() with an appropriate index and a delete count of 0, spreading the given values to be inserted.

const insertAt = (arr, i, ...v) => {
  arr.splice(i + 1, 0, ...v);
  return arr;
};

let myArray = [1, 2, 3, 4];
insertAt(myArray, 2, 5); // myArray = [1, 2, 3, 5, 4]

let otherArray = [2, 10];
insertAt(otherArray, 0, 4, 6, 8); // otherArray = [2, 4, 6, 8, 10]

insertBefore

• title: insertBefore
• tags: browser,beginner

Inserts an HTML string before the start of the specified element.

• Use Element.insertAdjacentHTML() with a position of 'beforebegin' to parse htmlString and insert it before the start of el.

const insertBefore = (el, htmlString) =>
  el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>');
// <p>before</p> <div id="myId">...</div>

insertionSort

• title: insertionSort
• tags: algorithm,array,intermediate

Sorts an array of numbers, using the insertion sort algorithm.

• Use Array.prototype.reduce() to iterate over all the elements in the given array.
• If the length of the accumulator is 0, add the current element to it.
• Use Array.prototype.some() to iterate over the results in the accumulator until the correct position is found.
• Use Array.prototype.splice() to insert the current element into the accumulator.

const insertionSort = arr =>
  arr.reduce((acc, x) => {
    if (!acc.length) return [x];
    acc.some((y, j) => {
      if (x <= y) {
        acc.splice(j, 0, x);
        return true;
      }
      if (x > y && j === acc.length - 1) {
        acc.splice(j + 1, 0, x);
        return true;
      }
      return false;
    });
    return acc;
  }, []);

insertionSort([6, 3, 4, 1]); // [1, 3, 4, 6]

intersection

• title: intersection
• tags: array,intermediate

Returns the elements that exist in both arrays, filtering duplicate values.

• Create a Set from b, then use Array.prototype.filter() on a to only keep values contained in b.

const intersection = (a, b) => {
  const s = new Set(b);
  return [...new Set(a)].filter(x => s.has(x));
};

intersection([1, 2, 3], [4, 3, 2]); // [2, 3]

intersectionBy

• title: intersectionBy
• tags: array,intermediate

Returns the elements that exist in both arrays, after applying the provided function to each array element of both.

• Create a Set by applying fn to all elements in b.
• Use Array.prototype.filter() on a to only keep elements, which produce values contained in b when fn is applied to them.

const intersectionBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return [...new Set(a)].filter(x => s.has(fn(x)));
};

intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1]
intersectionBy(
  [{ - title: 'Apple' }, { - title: 'Orange' }],
  [{ - title: 'Orange' }, { - title: 'Melon' }],
  x => x.title
); // [{ - title: 'Orange' }]

intersectionWith

• title: intersectionWith
• tags: array,intermediate

Returns the elements that exist in both arrays, using a provided comparator function.

• Use Array.prototype.filter() and Array.prototype.findIndex() in combination with the provided comparator to determine intersecting values.

const intersectionWith = (a, b, comp) =>
  a.filter(x => b.findIndex(y => comp(x, y)) !== -1);

intersectionWith(
  [1, 1.2, 1.5, 3, 0],
  [1.9, 3, 0, 3.9],
  (a, b) => Math.round(a) === Math.round(b)
); // [1.5, 3, 0]

invertKeyValues

• title: invertKeyValues
• tags: object,advanced

Inverts the key-value pairs of an object, without mutating it.

• Use Object.keys() and Array.prototype.reduce() to invert the key-value pairs of an object and apply the function provided (if any).
• Omit the second argument, fn, to get the inverted keys without applying a function to them.
• The corresponding inverted value of each inverted key is an array of keys responsible for generating the inverted value. If a function is supplied, it is applied to each inverted key.

const invertKeyValues = (obj, fn) =>
  Object.keys(obj).reduce((acc, key) => {
    const val = fn ? fn(obj[key]) : obj[key];
    acc[val] = acc[val] || [];
    acc[val].push(key);
    return acc;
  }, {});

invertKeyValues({ a: 1, b: 2, c: 1 }); // { 1: [ 'a', 'c' ], 2: [ 'b' ] }
invertKeyValues({ a: 1, b: 2, c: 1 }, value => 'group' + value);
// { group1: [ 'a', 'c' ], group2: [ 'b' ] }

is

• title: is
• tags: type,array,intermediate

Checks if the provided value is of the specified type.

• Ensure the value is not undefined or null using Array.prototype.includes().
• Compare the constructor property on the value with type to check if the provided value is of the specified type.

const is = (type, val) => ![, null].includes(val) && val.constructor === type;

is(Array, [1]); // true
is(ArrayBuffer, new ArrayBuffer()); // true
is(Map, new Map()); // true
is(RegExp, /./g); // true
is(Set, new Set()); // true
is(WeakMap, new WeakMap()); // true
is(WeakSet, new WeakSet()); // true
is(String, ''); // true
is(String, new String('')); // true
is(Number, 1); // true
is(Number, new Number(1)); // true
is(Boolean, true); // true
is(Boolean, new Boolean(true)); // true

isAbsoluteURL

• title: isAbsoluteURL
• tags: string,browser,regexp,intermediate

Checks if the given string is an absolute URL.

• Use RegExp.prototype.test() to test if the string is an absolute URL.

const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);

isAbsoluteURL('https://google.com'); // true
isAbsoluteURL('ftp://www.myserver.net'); // true
isAbsoluteURL('/foo/bar'); // false

isAfterDate

• title: isAfterDate
• tags: date,beginner

Checks if a date is after another date.

• Use the greater than operator (>) to check if the first date comes after the second one.

const isAfterDate = (dateA, dateB) => dateA > dateB;

isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true

isAlpha

• title: isAlpha
• tags: string,regexp,beginner

Checks if a string contains only alpha characters.

• Use RegExp.prototype.test() to check if the given string matches against the alphabetic regexp pattern.

const isAlpha = str => /^[a-zA-Z]*$/.test(str);

isAlpha('sampleInput'); // true
isAlpha('this Will fail'); // false
isAlpha('123'); // false

isAlphaNumeric

• title: isAlphaNumeric
• tags: string,regexp,beginner

Checks if a string contains only alphanumeric characters.

• Use RegExp.prototype.test() to check if the input string matches against the alphanumeric regexp pattern.

const isAlphaNumeric = str => /^[a-z0-9]+$/gi.test(str);

isAlphaNumeric('hello123'); // true
isAlphaNumeric('123'); // true
isAlphaNumeric('hello 123'); // false (space character is not alphanumeric)
isAlphaNumeric('##$hello'); // false

isAnagram

• title: isAnagram
• tags: string,regexp,intermediate

Checks if a string is an anagram of another string (case-insensitive, ignores spaces, punctuation and special characters).

• Use String.prototype.toLowerCase() and String.prototype.replace() with an appropriate regular expression to remove unnecessary characters.
• Use String.prototype.split(''), Array.prototype.sort() and Array.prototype.join('') on both strings to normalize them, then check if their normalized forms are equal.

const isAnagram = (str1, str2) => {
  const normalize = str =>
    str
      .toLowerCase()
      .replace(/[^a-z0-9]/gi, '')
      .split('')
      .sort()
      .join('');
  return normalize(str1) === normalize(str2);
};

isAnagram('iceman', 'cinema'); // true

isArrayLike

• title: isArrayLike
• tags: type,array,intermediate

Checks if the provided argument is array-like (i.e. is iterable).

• Check if the provided argument is not null and that its Symbol.iterator property is a function.

const isArrayLike = obj =>
  obj != null && typeof obj[Symbol.iterator] === 'function';

isArrayLike([1, 2, 3]); // true
isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // false

isAsyncFunction

• title: isAsyncFunction
• tags: type,function,intermediate

Checks if the given argument is an async function.

• Use Object.prototype.toString() and Function.prototype.call() and check if the result is '[object AsyncFunction]'.

const isAsyncFunction = val =>
  Object.prototype.toString.call(val) === '[object AsyncFunction]';

isAsyncFunction(function() {}); // false
isAsyncFunction(async function() {}); // true

isBeforeDate

• title: isBeforeDate
• tags: date,beginner

Checks if a date is before another date.

• Use the less than operator (<) to check if the first date comes before the second one.

const isBeforeDate = (dateA, dateB) => dateA < dateB;

isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true

isBetweenDates

• title: isBetweenDates
• tags: date,beginner

Checks if a date is between two other dates.

• Use the greater than (>) and less than (<) operators to check if date is between dateStart and dateEnd.

const isBetweenDates = (dateStart, dateEnd, date) =>
  date > dateStart && date < dateEnd;

isBetweenDates(
  new Date(2010, 11, 20),
  new Date(2010, 11, 30),
  new Date(2010, 11, 19)
); // false
isBetweenDates(
  new Date(2010, 11, 20),
  new Date(2010, 11, 30),
  new Date(2010, 11, 25)
); // true

isBoolean

• title: isBoolean
• tags: type,beginner

Checks if the given argument is a native boolean element.

• Use typeof to check if a value is classified as a boolean primitive.

const isBoolean = val => typeof val === 'boolean';

isBoolean(null); // false
isBoolean(false); // true

isBrowser

• title: isBrowser
• tags: browser,node,intermediate

Determines if the current runtime environment is a browser so that front-end modules can run on the server (Node) without throwing errors.

• Use Array.prototype.includes() on the typeof values of both window and document (globals usually only available in a browser environment unless they were explicitly defined), which will return true if one of them is undefined.
• typeof allows globals to be checked for existence without throwing a ReferenceError.
• If both of them are not undefined, then the current environment is assumed to be a browser.

const isBrowser = () => ![typeof window, typeof document].includes('undefined');

isBrowser(); // true (browser)
isBrowser(); // false (Node)

isBrowserTabFocused

• title: isBrowserTabFocused
• tags: browser,beginner

Checks if the browser tab of the page is focused.

• Use the Document.hidden property, introduced by the Page Visibility API to check if the browser tab of the page is visible or hidden.

const isBrowserTabFocused = () => !document.hidden;

isBrowserTabFocused(); // true

isContainedIn

• title: isContainedIn
• tags: array,intermediate

Checks if the elements of the first array are contained in the second one regardless of order.

• Use a for...of loop over a Set created from the first array.
• Use Array.prototype.some() to check if all distinct values are contained in the second array.
• Use Array.prototype.filter() to compare the number of occurrences of each distinct value in both arrays.
• Return false if the count of any element is greater in the first array than the second one, true otherwise.

const isContainedIn = (a, b) => {
  for (const v of new Set(a)) {
    if (
      !b.some(e => e === v) ||
      a.filter(e => e === v).length > b.filter(e => e === v).length
    )
      return false;
  }
  return true;
};

isContainedIn([1, 4], [2, 4, 1]); // true

isDateValid

• title: isDateValid
• tags: date,intermediate

Checks if a valid date object can be created from the given values.

• Use the spread operator (...) to pass the array of arguments to the Date constructor.
• Use Date.prototype.valueOf() and Number.isNaN() to check if a valid Date object can be created from the given values.

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid('December 17, 1995 03:24:00'); // true
isDateValid('1995-12-17T03:24:00'); // true
isDateValid('1995-12-17 T03:24:00'); // false
isDateValid('Duck'); // false
isDateValid(1995, 11, 17); // true
isDateValid(1995, 11, 17, 'Duck'); // false
isDateValid({}); // false

isDeepFrozen

• title: isDeepFrozen
• tags: object,recursion,intermediate

Checks if an object is deeply frozen.

• Use recursion.
• Use Object.isFrozen() on the given object.
• Use Object.keys(), Array.prototype.every() to check that all keys are either deeply frozen objects or non-object values.

const isDeepFrozen = obj =>
  Object.isFrozen(obj) &&
  Object.keys(obj).every(
    prop => typeof obj[prop] !== 'object' || isDeepFrozen(obj[prop])
  );

const x = Object.freeze({ a: 1 });
const y = Object.freeze({ b: { c: 2 } });
isDeepFrozen(x); // true
isDeepFrozen(y); // false

isDisjoint

• title: isDisjoint
• tags: array,intermediate

Checks if the two iterables are disjointed (have no common values).

• Use the new Set() constructor to create a new Set object from each iterable.
• Use Array.prototype.every() and Set.prototype.has() to check that the two iterables have no common values.

const isDisjoint = (a, b) => {
  const sA = new Set(a), sB = new Set(b);
  return [...sA].every(v => !sB.has(v));
};

isDisjoint(new Set([1, 2]), new Set([3, 4])); // true
isDisjoint(new Set([1, 2]), new Set([1, 3])); // false

isDivisible

• title: isDivisible
• tags: math,beginner

Checks if the first numeric argument is divisible by the second one.

• Use the modulo operator (%) to check if the remainder is equal to 0.

const isDivisible = (dividend, divisor) => dividend % divisor === 0;

isDivisible(6, 3); // true

isDuplexStream

• title: isDuplexStream
• tags: node,type,intermediate

Checks if the given argument is a duplex (readable and writable) stream.

• Check if the value is different from null.
• Use typeof to check if a value is of type object and the pipe property is of type function.
• Additionally check if the typeof the _read, _write and _readableState, _writableState properties are function and object respectively.

const isDuplexStream = val =>
  val !== null &&
  typeof val === 'object' &&
  typeof val.pipe === 'function' &&
  typeof val._read === 'function' &&
  typeof val._readableState === 'object' &&
  typeof val._write === 'function' &&
  typeof val._writableState === 'object';

const Stream = require('stream');

isDuplexStream(new Stream.Duplex()); // true

isEmpty

• title: isEmpty
• tags: type,array,object,string,beginner

Checks if the a value is an empty object/collection, has no enumerable properties or is any type that is not considered a collection.

• Check if the provided value is null or if its length is equal to 0.

const isEmpty = val => val == null || !(Object.keys(val) || val).length;

isEmpty([]); // true
isEmpty({}); // true
isEmpty(''); // true
isEmpty([1, 2]); // false
isEmpty({ a: 1, b: 2 }); // false
isEmpty('text'); // false
isEmpty(123); // true - type is not considered a collection
isEmpty(true); // true - type is not considered a collection

isEven

• title: isEven
• tags: math,beginner

Checks if the given number is even.

• Checks whether a number is odd or even using the modulo (%) operator.
• Returns true if the number is even, false if the number is odd.

const isEven = num => num % 2 === 0;

isEven(3); // false

isFunction

• title: isFunction
• tags: type,function,beginner

Checks if the given argument is a function.

• Use typeof to check if a value is classified as a function primitive.

const isFunction = val => typeof val === 'function';

isFunction('x'); // false
isFunction(x => x); // true

isGeneratorFunction

• title: isGeneratorFunction
• tags: type,function,intermediate

Checks if the given argument is a generator function.

• Use Object.prototype.toString() and Function.prototype.call() and check if the result is '[object GeneratorFunction]'.

const isGeneratorFunction = val =>
  Object.prototype.toString.call(val) === '[object GeneratorFunction]';

isGeneratorFunction(function() {}); // false
isGeneratorFunction(function*() {}); // true

isISOString

• title: isISOString
• tags: date,intermediate

Checks if the given string is valid in the simplified extended ISO format (ISO 8601).

• Use new Date() to create a date object from the given string.
• Use Date.prototype.valueOf() and Number.isNaN() to check if the produced date object is valid.
• Use Date.prototype.toISOString() to compare the ISO formatted string representation of the date with the original string.

const isISOString = val => {
  const d = new Date(val);
  return !Number.isNaN(d.valueOf()) && d.toISOString() === val;
};

isISOString('2020-10-12T10:10:10.000Z'); // true
isISOString('2020-10-12'); // false

isLeapYear

• title: isLeapYear
• tags: date,beginner

Checks if the given year is a leap year.

• Use new Date(), setting the date to February 29th of the given year.
• Use Date.prototype.getMonth() to check if the month is equal to 1.

const isLeapYear = year => new Date(year, 1, 29).getMonth() === 1;

isLeapYear(2019); // false
isLeapYear(2020); // true

isLocalStorageEnabled

• title: isLocalStorageEnabled
• tags: browser,intermediate

Checks if localStorage is enabled.

• Use a try...catch block to return true if all operations complete successfully, false otherwise.
• Use Storage.setItem() and Storage.removeItem() to test storing and deleting a value in window.localStorage.

const isLocalStorageEnabled = () => {
  try {
    const key = `__storage__test`;
    window.localStorage.setItem(key, null);
    window.localStorage.removeItem(key);
    return true;
  } catch (e) {
    return false;
  }
};

isLocalStorageEnabled(); // true, if localStorage is accessible

isLowerCase

• title: isLowerCase
• tags: string,beginner

Checks if a string is lower case.

• Convert the given string to lower case, using String.prototype.toLowerCase() and compare it to the original.

const isLowerCase = str => str === str.toLowerCase();

isLowerCase('abc'); // true
isLowerCase('a3@$'); // true
isLowerCase('Ab4'); // false

isNegativeZero

• title: isNegativeZero
• tags: math,intermediate

Checks if the given value is equal to negative zero (-0).

• Check whether a passed value is equal to 0 and if 1 divided by the value equals -Infinity.

const isNegativeZero = val => val === 0 && 1 / val === -Infinity;

isNegativeZero(-0); // true
isNegativeZero(0); // false

isNil

• title: isNil
• tags: type,beginner

Checks if the specified value is null or undefined.

• Use the strict equality operator to check if the value of val is equal to null or undefined.

const isNil = val => val === undefined || val === null;

isNil(null); // true
isNil(undefined); // true
isNil(''); // false

isNode

• title: isNode
• tags: node,browser,intermediate

Determines if the current runtime environment is Node.js.

• Use the process global object that provides information about the current Node.js process.
• Check if process is defined and process.versions, process.versions.node are not null.

const isNode = () =>
  typeof process !== 'undefined' &&
  process.versions !== null &&
  process.versions.node !== null;

isNode(); // true (Node)
isNode(); // false (browser)

isNull

• title: isNull
• tags: type,beginner

Checks if the specified value is null.

• Use the strict equality operator to check if the value of val is equal to null.

const isNull = val => val === null;

isNull(null); // true

isNumber

• title: isNumber
• tags: type,math,beginner

Checks if the given argument is a number.

• Use typeof to check if a value is classified as a number primitive.
• To safeguard against NaN, check if val === val (as NaN has a typeof equal to number and is the only value not equal to itself).

const isNumber = val => typeof val === 'number' && val === val;

isNumber(1); // true
isNumber('1'); // false
isNumber(NaN); // false

isObject

• title: isObject
• tags: type,object,beginner

Checks if the passed value is an object or not.

• Uses the Object constructor to create an object wrapper for the given value.
• If the value is null or undefined, create and return an empty object.
• Otherwise, return an object of a type that corresponds to the given value.

const isObject = obj => obj === Object(obj);

isObject([1, 2, 3, 4]); // true
isObject([]); // true
isObject(['Hello!']); // true
isObject({ a: 1 }); // true
isObject({}); // true
isObject(true); // false

isObjectLike

• title: isObjectLike
• tags: type,object,beginner

Checks if a value is object-like.

• Check if the provided value is not null and its typeof is equal to 'object'.

const isObjectLike = val => val !== null && typeof val === 'object';

isObjectLike({}); // true
isObjectLike([1, 2, 3]); // true
isObjectLike(x => x); // false
isObjectLike(null); // false

isOdd

• title: isOdd
• tags: math,beginner

Checks if the given number is odd.

• Check whether a number is odd or even using the modulo (%) operator.
• Return true if the number is odd, false if the number is even.

const isOdd = num => num % 2 === 1;

isOdd(3); // true

isPlainObject

• title: isPlainObject
• tags: type,object,intermediate

Checks if the provided value is an object created by the Object constructor.

• Check if the provided value is truthy.
• Use typeof to check if it is an object and Object.prototype.constructor to make sure the constructor is equal to Object.

const isPlainObject = val =>
  !!val && typeof val === 'object' && val.constructor === Object;

isPlainObject({ a: 1 }); // true
isPlainObject(new Map()); // false

isPowerOfTen

• title: isPowerOfTen
• tags: math,beginner

Checks if the given number is a power of 10.

• Use Math.log10() and the modulo operator (%) to determine if n is a power of 10.

const isPowerOfTen = n => Math.log10(n) % 1 === 0;

isPowerOfTen(1); // true
isPowerOfTen(10); // true
isPowerOfTen(20); // false

isPowerOfTwo

• title: isPowerOfTwo
• tags: math,beginner

Checks if the given number is a power of 2.

• Use the bitwise binary AND operator (&) to determine if n is a power of 2.
• Additionally, check that n is not falsy.

const isPowerOfTwo = n => !!n && (n & (n - 1)) == 0;

isPowerOfTwo(0); // false
isPowerOfTwo(1); // true
isPowerOfTwo(8); // true

isPrime

• title: isPrime
• tags: math,algorithm,beginner

Checks if the provided integer is a prime number.

• Check numbers from 2 to the square root of the given number.
• Return false if any of them divides the given number, else return true, unless the number is less than 2.

const isPrime = num => {
  const boundary = Math.floor(Math.sqrt(num));
  for (let i = 2; i <= boundary; i++) if (num % i === 0) return false;
  return num >= 2;
};

isPrime(11); // true

isPrimitive

• title: isPrimitive
• tags: type,intermediate

Checks if the passed value is primitive or not.

• Create an object from val and compare it with val to determine if the passed value is primitive (i.e. not equal to the created object).

const isPrimitive = val => Object(val) !== val;

isPrimitive(null); // true
isPrimitive(undefined); // true
isPrimitive(50); // true
isPrimitive('Hello!'); // true
isPrimitive(false); // true
isPrimitive(Symbol()); // true
isPrimitive([]); // false
isPrimitive({}); // false

isPromiseLike

• title: isPromiseLike
• tags: type,function,promise,intermediate

Checks if an object looks like a Promise.

• Check if the object is not null, its typeof matches either object or function and if it has a .then property, which is also a function.

const isPromiseLike = obj =>
  obj !== null &&
  (typeof obj === 'object' || typeof obj === 'function') &&
  typeof obj.then === 'function';

isPromiseLike({
  then: function() {
    return '';
  }
}); // true
isPromiseLike(null); // false
isPromiseLike({}); // false

isReadableStream

• title: isReadableStream
• tags: node,type,intermediate

Checks if the given argument is a readable stream.

• Check if the value is different from null.
• Use typeof to check if the value is of type object and the pipe property is of type function.
• Additionally check if the typeof the _read and _readableState properties are function and object respectively.

const isReadableStream = val =>
  val !== null &&
  typeof val === 'object' &&
  typeof val.pipe === 'function' &&
  typeof val._read === 'function' &&
  typeof val._readableState === 'object';

const fs = require('fs');

isReadableStream(fs.createReadStream('test.txt')); // true

isSameDate

• title: isSameDate
• tags: date,beginner

Checks if a date is the same as another date.

• Use Date.prototype.toISOString() and strict equality checking (===) to check if the first date is the same as the second one.

const isSameDate = (dateA, dateB) =>
  dateA.toISOString() === dateB.toISOString();

isSameDate(new Date(2010, 10, 20), new Date(2010, 10, 20)); // true

isSessionStorageEnabled

• title: isSessionStorageEnabled
• tags: browser,intermediate

Checks if sessionStorage is enabled.

• Use a try...catch block to return true if all operations complete successfully, false otherwise.
• Use Storage.setItem() and Storage.removeItem() to test storing and deleting a value in window.sessionStorage.

const isSessionStorageEnabled = () => {
  try {
    const key = `__storage__test`;
    window.sessionStorage.setItem(key, null);
    window.sessionStorage.removeItem(key);
    return true;
  } catch (e) {
    return false;
  }
};

isSessionStorageEnabled(); // true, if sessionStorage is accessible

isSorted

• title: isSorted
• tags: array,intermediate

Checks if a numeric array is sorted.

• Calculate the ordering direction for the first pair of adjacent array elements.
• Return 0 if the given array is empty, only has one element or the direction changes for any pair of adjacent array elements.
• Use Math.sign() to covert the final value of direction to -1 (descending order) or 1 (ascending order).

const isSorted = arr => {
  if (arr.length <= 1) return 0;
  const direction = arr[1] - arr[0];
  for (let i = 2; i < arr.length; i++) {
    if ((arr[i] - arr[i - 1]) * direction < 0) return 0;
  }
  return Math.sign(direction);
};

isSorted([0, 1, 2, 2]); // 1
isSorted([4, 3, 2]); // -1
isSorted([4, 3, 5]); // 0
isSorted([4]); // 0

isStream

• title: isStream
• tags: node,type,intermediate

Checks if the given argument is a stream.

• Check if the value is different from null.
• Use typeof to check if the value is of type object and the pipe property is of type function.

const isStream = val =>
  val !== null && typeof val === 'object' && typeof val.pipe === 'function';

const fs = require('fs');

isStream(fs.createReadStream('test.txt')); // true

isString

• title: isString
• tags: type,string,beginner

Checks if the given argument is a string. Only works for string primitives.

• Use typeof to check if a value is classified as a string primitive.

const isString = val => typeof val === 'string';

isString('10'); // true

isSymbol

• title: isSymbol
• tags: type,beginner

Checks if the given argument is a symbol.

• Use typeof to check if a value is classified as a symbol primitive.

const isSymbol = val => typeof val === 'symbol';

isSymbol(Symbol('x')); // true

isTravisCI

• title: isTravisCI
• tags: node,intermediate

Checks if the current environment is Travis CI.

• Check if the current environment has the TRAVIS and CI environment variables (reference).

const isTravisCI = () => 'TRAVIS' in process.env && 'CI' in process.env;

isTravisCI(); // true (if code is running on Travis CI)

isUndefined

• title: isUndefined
• tags: type,beginner

Checks if the specified value is undefined.

• Use the strict equality operator to check if val is equal to undefined.

const isUndefined = val => val === undefined;

isUndefined(undefined); // true

isUpperCase

• title: isUpperCase
• tags: string,beginner

Checks if a string is upper case.

• Convert the given string to upper case, using String.prototype.toUpperCase() and compare it to the original.

const isUpperCase = str => str === str.toUpperCase();

isUpperCase('ABC'); // true
isUpperCase('A3@$'); // true
isUpperCase('aB4'); // false

isValidJSON

• title: isValidJSON
• tags: type,intermediate

Checks if the provided string is a valid JSON.

• Use JSON.parse() and a try... catch block to check if the provided string is a valid JSON.

const isValidJSON = str => {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
};

isValidJSON('{"name":"Adam","age":20}'); // true
isValidJSON('{"name":"Adam",age:"20"}'); // false
isValidJSON(null); // true

isWeekday

• title: isWeekday
• tags: date,beginner

Checks if the given date is a weekday.

• Use Date.prototype.getDay() to check weekday by using a modulo operator (%).
• Omit the argument, d, to use the current date as default.

const isWeekday = (d = new Date()) => d.getDay() % 6 !== 0;

isWeekday(); // true (if current date is 2019-07-19)

isWeekend

• title: isWeekend
• tags: date,beginner

Checks if the given date is a weekend.

• Use Date.prototype.getDay() to check weekend by using a modulo operator (%).
• Omit the argument, d, to use the current date as default.

const isWeekend = (d = new Date()) => d.getDay() % 6 === 0;

isWeekend(); // 2018-10-19 (if current date is 2018-10-18)

isWritableStream

• title: isWritableStream
• tags: node,type,intermediate

Checks if the given argument is a writable stream.

• Check if the value is different from null.
• Use typeof to check if the value is of type object and the pipe property is of type function.
• Additionally check if the typeof the _write and _writableState properties are function and object respectively.

const isWritableStream = val =>
  val !== null &&
  typeof val === 'object' &&
  typeof val.pipe === 'function' &&
  typeof val._write === 'function' &&
  typeof val._writableState === 'object';

const fs = require('fs');

isWritableStream(fs.createWriteStream('test.txt')); // true

javascript

JAVASCRIPT SNIPPETS

CSVToArray

• title: CSVToArray
• tags: string,array,intermediate

Converts a comma-separated values (CSV) string to a 2D array.

• Use Array.prototype.slice() and Array.prototype.indexOf('\n') to remove the first row (title row) if omitFirstRow is true.
• Use String.prototype.split('\n') to create a string for each row, then String.prototype.split(delimiter) to separate the values in each row.
• Omit the second argument, delimiter, to use a default delimiter of ,.
• Omit the third argument, omitFirstRow, to include the first row (title row) of the CSV string.

const CSVToArray = (data, delimiter = ',', omitFirstRow = false) =>
  data
    .slice(omitFirstRow ? data.indexOf('\n') + 1 : 0)
    .split('\n')
    .map(v => v.split(delimiter));

CSVToArray('a,b\nc,d'); // [['a', 'b'], ['c', 'd']];
CSVToArray('a;b\nc;d', ';'); // [['a', 'b'], ['c', 'd']];
CSVToArray('col1,col2\na,b\nc,d', ',', true); // [['a', 'b'], ['c', 'd']];

CSVToJSON

• title: CSVToJSON
• tags: string,object,advanced

Converts a comma-separated values (CSV) string to a 2D array of objects. The first row of the string is used as the title row.

• Use Array.prototype.slice() and Array.prototype.indexOf('\n') and String.prototype.split(delimiter) to separate the first row (title row) into values.
• Use String.prototype.split('\n') to create a string for each row, then Array.prototype.map() and String.prototype.split(delimiter) to separate the values in each row.
• Use Array.prototype.reduce() to create an object for each row's values, with the keys parsed from the title row.
• Omit the second argument, delimiter, to use a default delimiter of ,.

const CSVToJSON = (data, delimiter = ',') => {
  const titles = data.slice(0, data.indexOf('\n')).split(delimiter);
  return data
    .slice(data.indexOf('\n') + 1)
    .split('\n')
    .map(v => {
      const values = v.split(delimiter);
      return titles.reduce(
        (obj, title, index) => ((obj[title] = values[index]), obj),
        {}
      );
    });
};

CSVToJSON('col1,col2\na,b\nc,d');
// [{'col1': 'a', 'col2': 'b'}, {'col1': 'c', 'col2': 'd'}];
CSVToJSON('col1;col2\na;b\nc;d', ';');
// [{'col1': 'a', 'col2': 'b'}, {'col1': 'c', 'col2': 'd'}];

HSBToRGB

• title: HSBToRGB
• tags: math,intermediate

Converts a HSB color tuple to RGB format.

• Use the HSB to RGB conversion formula to convert to the appropriate format.
• The range of the input parameters is H: [0, 360], S: [0, 100], B: [0, 100].
• The range of all output values is [0, 255].

const HSBToRGB = (h, s, b) => {
  s /= 100;
  b /= 100;
  const k = (n) => (n + h / 60) % 6;
  const f = (n) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
  return [255 * f(5), 255 * f(3), 255 * f(1)];
};

HSBToRGB(18, 81, 99); // [252.45, 109.31084999999996, 47.965499999999984]

HSLToRGB

• title: HSLToRGB
• tags: math,intermediate

Converts a HSL color tuple to RGB format.

• Use the HSL to RGB conversion formula to convert to the appropriate format.
• The range of the input parameters is H: [0, 360], S: [0, 100], L: [0, 100].
• The range of all output values is [0, 255].

const HSLToRGB = (h, s, l) => {
  s /= 100;
  l /= 100;
  const k = n => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = n =>
    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [255 * f(0), 255 * f(8), 255 * f(4)];
};

HSLToRGB(13, 100, 11); // [56.1, 12.155, 0]

JSONToFile

• title: JSONToFile
• tags: node,intermediate

Writes a JSON object to a file.

• Use fs.writeFileSync(), template literals and JSON.stringify() to write a json object to a .json file.

const fs = require('fs');

const JSONToFile = (obj, filename) =>
  fs.writeFileSync(`${filename}.json`, JSON.stringify(obj, null, 2));

JSONToFile({ test: 'is passed' }, 'testJsonFile');
// writes the object to 'testJsonFile.json'

JSONtoCSV

• title: JSONtoCSV
• tags: array,string,object,advanced

Converts an array of objects to a comma-separated values (CSV) string that contains only the columns specified.

• Use Array.prototype.join(delimiter) to combine all the names in columns to create the first row.
• Use Array.prototype.map() and Array.prototype.reduce() to create a row for each object, substituting non-existent values with empty strings and only mapping values in columns.
• Use Array.prototype.join('\n') to combine all rows into a string.
• Omit the third argument, delimiter, to use a default delimiter of ,.

const JSONtoCSV = (arr, columns, delimiter = ',') =>
  [
    columns.join(delimiter),
    ...arr.map(obj =>
      columns.reduce(
        (acc, key) =>
          `${acc}${!acc.length ? '' : delimiter}"${!obj[key] ? '' : obj[key]}"`,
        ''
      )
    ),
  ].join('\n');

JSONtoCSV(
  [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }, { b: 7 }],
  ['a', 'b']
); // 'a,b\n"1","2"\n"3","4"\n"6",""\n"","7"'
JSONtoCSV(
  [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }, { b: 7 }],
  ['a', 'b'],
  ';'
); // 'a;b\n"1";"2"\n"3";"4"\n"6";""\n"";"7"'

RGBToHSB

• title: RGBToHSB
• tags: math,intermediate

Converts a RGB color tuple to HSB format.

• Use the RGB to HSB conversion formula to convert to the appropriate format.
• The range of all input parameters is [0, 255].
• The range of the resulting values is H: [0, 360], S: [0, 100], B: [0, 100].

const RGBToHSB = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const v = Math.max(r, g, b),
    n = v - Math.min(r, g, b);
  const h =
    n && v === r ? (g - b) / n : v === g ? 2 + (b - r) / n : 4 + (r - g) / n;
  return [60 * (h < 0 ? h + 6 : h), v && (n / v) * 100, v * 100];
};

RGBToHSB(252, 111, 48);
// [18.529411764705856, 80.95238095238095, 98.82352941176471]

RGBToHSL

• title: RGBToHSL
• tags: math,intermediate

Converts a RGB color tuple to HSL format.

• Use the RGB to HSL conversion formula to convert to the appropriate format.
• The range of all input parameters is [0, 255].
• The range of the resulting values is H: [0, 360], S: [0, 100], L: [0, 100].

const RGBToHSL = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const l = Math.max(r, g, b);
  const s = l - Math.min(r, g, b);
  const h = s
    ? l === r
      ? (g - b) / s
      : l === g
      ? 2 + (b - r) / s
      : 4 + (r - g) / s
    : 0;
  return [
    60 * h < 0 ? 60 * h + 360 : 60 * h,
    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
    (100 * (2 * l - s)) / 2,
  ];
};

RGBToHSL(45, 23, 11); // [21.17647, 60.71428, 10.98039]

RGBToHex

• title: RGBToHex
• tags: string,math,intermediate

Converts the values of RGB components to a hexadecimal color code.

• Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<<) and Number.prototype.toString(16).
• Use String.prototype.padStart(6, '0') to get a 6-digit hexadecimal value.

const RGBToHex = (r, g, b) =>
  ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');

RGBToHex(255, 165, 1); // 'ffa501'

URLJoin

• title: URLJoin
• tags: string,regexp,advanced

Joins all given URL segments together, then normalizes the resulting URL.

• Use String.prototype.join('/') to combine URL segments.
• Use a series of String.prototype.replace() calls with various regexps to normalize the resulting URL (remove double slashes, add proper slashes for protocol, remove slashes before parameters, combine parameters with '&' and normalize first parameter delimiter).

const URLJoin = (...args) =>
  args
    .join('/')
    .replace(/[\/]+/g, '/')
    .replace(/^(.+):\//, '$1://')
    .replace(/^file:/, 'file:/')
    .replace(/\/(\?|&|##[^!])/g, '$1')
    .replace(/\?/g, '&')
    .replace('&', '?');

URLJoin('http://www.google.com', 'a', '/b/cd', '?foo=123', '?bar=foo');
// 'http://www.google.com/a/b/cd?foo=123&bar=foo'

UUIDGeneratorBrowser

• title: UUIDGeneratorBrowser
• tags: browser,random,intermediate

Generates a UUID in a browser.

• Use Crypto.getRandomValues() to generate a UUID, compliant with RFC4122 version 4.
• Use Number.prototype.toString(16) to convert it to a proper UUID.

const UUIDGeneratorBrowser = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );

UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'

UUIDGeneratorNode

• title: UUIDGeneratorNode
• tags: node,random,intermediate

Generates a UUID in Node.JS.

• Use crypto.randomBytes() to generate a UUID, compliant with RFC4122 version 4.
• Use Number.prototype.toString(16) to convert it to a proper UUID.

const crypto = require('crypto');

const UUIDGeneratorNode = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (c ^ (crypto.randomBytes(1)[0] & (15 >> (c / 4)))).toString(16)
  );

UUIDGeneratorNode(); // '79c7c136-60ee-40a2-beb2-856f1feabefc'

accumulate

• title: accumulate
• tags: math,array,intermediate

Creates an array of partial sums.

• Use Array.prototype.reduce(), initialized with an empty array accumulator to iterate over nums.
• Use Array.prototype.slice(-1), the spread operator (...) and the unary + operator to add each value to the accumulator array containing the previous sums.

const accumulate = (...nums) =>
  nums.reduce((acc, n) => [...acc, n + +acc.slice(-1)], []);

accumulate(1, 2, 3, 4); // [1, 3, 6, 10]
accumulate(...[1, 2, 3, 4]); // [1, 3, 6, 10]

addClass

• title: addClass
• tags: browser,beginner

Adds a class to an HTML element.

• Use Element.classList and DOMTokenList.add() to add the specified class to the element.

const addClass = (el, className) => el.classList.add(className);

addClass(document.querySelector('p'), 'special');
// The paragraph will now have the 'special' class

addDaysToDate

• title: addDaysToDate
• tags: date,intermediate

Calculates the date of n days from the given date, returning its string representation.

• Use new Date() to create a date object from the first argument.
• Use Date.prototype.getDate() and Date.prototype.setDate() to add n days to the given date.
• Use Date.prototype.toISOString() to return a string in yyyy-mm-dd format.

const addDaysToDate = (date, n) => {
  const d = new Date(date);
  d.setDate(d.getDate() + n);
  return d.toISOString().split('T')[0];
};

addDaysToDate('2020-10-15', 10); // '2020-10-25'
addDaysToDate('2020-10-15', -10); // '2020-10-05'

addMinutesToDate

• title: addMinutesToDate
• tags: date,intermediate

Calculates the date of n minutes from the given date, returning its string representation.

• Use new Date() to create a date object from the first argument.
• Use Date.prototype.getTime() and Date.prototype.setTime() to add n minutes to the given date.
• Use Date.prototype.toISOString(), String.prototype.split() and String.prototype.replace() to return a string in yyyy-mm-dd HH:MM:SS format.

const addMinutesToDate = (date, n) => {
  const d = new Date(date);
  d.setTime(d.getTime() + n * 60000);
  return d.toISOString().split('.')[0].replace('T',' ');
};

addMinutesToDate('2020-10-19 12:00:00', 10); // '2020-10-19 12:10:00'
addMinutesToDate('2020-10-19', -10); // '2020-10-18 23:50:00'

addMultipleEvents

• title: addMultipleListeners
• tags: browser,event,intermediate

Adds multiple event listeners with the same handler to an element.

• Use Array.prototype.forEach() and EventTarget.addEventListener() to add multiple event listeners with an assigned callback function to an element.

const addMultipleListeners = (el, types, listener, options, useCapture) => {
  types.forEach(type =>
    el.addEventListener(type, listener, options, useCapture)
  );
};

addMultipleListeners(
  document.querySelector('.my-element'),
  ['click', 'mousedown'],
  () => { console.log('hello!') }
);

addStyles

• title: addStyles
• tags: browser,beginner

Adds the provided styles to the given element.

• Use Object.assign() and ElementCSSInlineStyle.style to merge the provided styles object into the style of the given element.

const addStyles = (el, styles) => Object.assign(el.style, styles);

addStyles(document.getElementById('my-element'), {
  background: 'red',
  color: '##ffff00',
  fontSize: '3rem'
});

addWeekDays

• title: addWeekDays
• tags: date,intermediate

Calculates the date after adding the given number of business days.

• Use Array.from() to construct an array with length equal to the count of business days to be added.
• Use Array.prototype.reduce() to iterate over the array, starting from startDate and incrementing, using Date.prototype.getDate() and Date.prototype.setDate().
• If the current date is on a weekend, update it again by adding either one day or two days to make it a weekday.
• NOTE: Does not take official holidays into account.

const addWeekDays = (startDate, count) =>
  Array.from({ length: count }).reduce(date => {
    date = new Date(date.setDate(date.getDate() + 1));
    if (date.getDay() % 6 === 0)
      date = new Date(date.setDate(date.getDate() + (date.getDay() / 6 + 1)));
    return date;
  }, startDate);

addWeekDays(new Date('Oct 09, 2020'), 5); // 'Oct 16, 2020'
addWeekDays(new Date('Oct 12, 2020'), 5); // 'Oct 19, 2020'

all

• title: all
• tags: array,beginner

Checks if the provided predicate function returns true for all elements in a collection.

• Use Array.prototype.every() to test if all elements in the collection return true based on fn.
• Omit the second argument, fn, to use Boolean as a default.

const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

allEqual

• title: allEqual
• tags: array,beginner

Checks if all elements in an array are equal.

• Use Array.prototype.every() to check if all the elements of the array are the same as the first one.
• Elements in the array are compared using the strict comparison operator, which does not account for NaN self-inequality.

const allEqual = arr => arr.every(val => val === arr[0]);

allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

allEqualBy

• title: allEqualBy
• tags: array,intermediate

Checks if all elements in an array are equal, based on the provided mapping function.

• Apply fn to the first element of arr.
• Use Array.prototype.every() to check if fn returns the same value for all elements in the array as it did for the first one.
• Elements in the array are compared using the strict comparison operator, which does not account for NaN self-inequality.

const allEqualBy = (arr, fn) => {
  const eql = fn(arr[0]);
  return arr.every(val => fn(val) === eql);
};

allEqualBy([1.1, 1.2, 1.3], Math.round); // true
allEqualBy([1.1, 1.3, 1.6], Math.round); // false

allUnique

• title: allUnique
• tags: array,beginner

Checks if all elements in an array are unique.

• Create a new Set from the mapped values to keep only unique occurrences.
• Use Array.prototype.length and Set.prototype.size to compare the length of the unique values to the original array.

const allUnique = arr => arr.length === new Set(arr).size;

allUnique([1, 2, 3, 4]); // true
allUnique([1, 1, 2, 3]); // false

allUniqueBy

• title: allUniqueBy
• tags: array,intermediate

Checks if all elements in an array are unique, based on the provided mapping function.

• Use Array.prototype.map() to apply fn to all elements in arr.
• Create a new Set from the mapped values to keep only unique occurrences.
• Use Array.prototype.length and Set.prototype.size to compare the length of the unique mapped values to the original array.

const allUniqueBy = (arr, fn) => arr.length === new Set(arr.map(fn)).size;

allUniqueBy([1.2, 2.4, 2.9], Math.round); // true
allUniqueBy([1.2, 2.3, 2.4], Math.round); // false

and

• title: and
• tags: math,logic,beginner unlisted: true

Checks if both arguments are true.

• Use the logical and (&&) operator on the two given values.

const and = (a, b) => a && b;

and(true, true); // true
and(true, false); // false
and(false, false); // false

any

• title: any
• tags: array,beginner

Checks if the provided predicate function returns true for at least one element in a collection.

• Use Array.prototype.some() to test if any elements in the collection return true based on fn.
• Omit the second argument, fn, to use Boolean as a default.

const any = (arr, fn = Boolean) => arr.some(fn);

any([0, 1, 2, 0], x => x >= 2); // true
any([0, 0, 1, 0]); // true

aperture

• title: aperture
• tags: array,intermediate

Creates an array of n-tuples of consecutive elements.

• Use Array.prototype.slice() and Array.prototype.map() to create an array of appropriate length.
• Populate the array with n-tuples of consecutive elements from arr.
• If n is greater than the length of arr, return an empty array.

const aperture = (n, arr) =>
  n > arr.length
    ? []
    : arr.slice(n - 1).map((v, i) => arr.slice(i, i + n));

aperture(2, [1, 2, 3, 4]); // [[1, 2], [2, 3], [3, 4]]
aperture(3, [1, 2, 3, 4]); // [[1, 2, 3], [2, 3, 4]]
aperture(5, [1, 2, 3, 4]); // []

approximatelyEqual

• title: approximatelyEqual
• tags: math,beginner

Checks if two numbers are approximately equal to each other.

• Use Math.abs() to compare the absolute difference of the two values to epsilon.
• Omit the third argument, epsilon, to use a default value of 0.001.

const approximatelyEqual = (v1, v2, epsilon = 0.001) =>
  Math.abs(v1 - v2) < epsilon;

approximatelyEqual(Math.PI / 2.0, 1.5708); // true

arithmeticProgression

• title: arithmeticProgression
• tags: math,algorithm,beginner

Creates an array of numbers in the arithmetic progression, starting with the given positive integer and up to the specified limit.

• Use Array.from() to create an array of the desired length, lim/n, and a map function to fill it with the desired values in the given range.

const arithmeticProgression  = (n, lim) =>
  Array.from({ length: Math.ceil(lim / n) }, (_, i) => (i + 1) * n );

arithmeticProgression(5, 25); // [5, 10, 15, 20, 25]

arrayToCSV

• title: arrayToCSV
• tags: array,string,intermediate

Converts a 2D array to a comma-separated values (CSV) string.

• Use Array.prototype.map() and Array.prototype.join(delimiter) to combine individual 1D arrays (rows) into strings.
• Use Array.prototype.join('\n') to combine all rows into a CSV string, separating each row with a newline.
• Omit the second argument, delimiter, to use a default delimiter of ,.

const arrayToCSV = (arr, delimiter = ',') =>
  arr
    .map(v =>
      v.map(x => (isNaN(x) ? `"${x.replace(/"/g, '""')}"` : x)).join(delimiter)
    )
    .join('\n');

arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'
arrayToCSV([['a', '"b" great'], ['c', 3.1415]]);
// '"a","""b"" great"\n"c",3.1415'

arrayToHTMLList

• title: arrayToHTMLList
• tags: browser,array,intermediate

Converts the given array elements into <li> tags and appends them to the list of the given id.

• Use Array.prototype.map() and Document.querySelector() to create a list of html tags.

const arrayToHTMLList = (arr, listID) => 
  document.querySelector(`##${listID}`).innerHTML += arr
    .map(item => `<li>${item}</li>`)
    .join('');

arrayToHTMLList(['item 1', 'item 2'], 'myListID');

ary

• title: ary
• tags: function,advanced

Creates a function that accepts up to n arguments, ignoring any additional arguments.

• Call the provided function, fn, with up to n arguments, using Array.prototype.slice(0, n) and the spread operator (...).

const ary = (fn, n) => (...args) => fn(...args.slice(0, n));

const firstTwoMax = ary(Math.max, 2);
[[2, 6, 'a'], [6, 4, 8], [10]].map(x => firstTwoMax(...x)); // [6, 6, 10]

atob

• title: atob
• tags: node,string,beginner

Decodes a string of data which has been encoded using base-64 encoding.

• Create a Buffer for the given string with base-64 encoding and use Buffer.toString('binary') to return the decoded string.

const atob = str => Buffer.from(str, 'base64').toString('binary');

atob('Zm9vYmFy'); // 'foobar'

attempt

• title: attempt
• tags: function,intermediate

Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.

• Use a try... catch block to return either the result of the function or an appropriate error.
• If the caught object is not an Error, use it to create a new Error.

const attempt = (fn, ...args) => {
  try {
    return fn(...args);
  } catch (e) {
    return e instanceof Error ? e : new Error(e);
  }
};

var elements = attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

average

• title: average
• tags: math,array,beginner

Calculates the average of two or more numbers.

• Use Array.prototype.reduce() to add each value to an accumulator, initialized with a value of 0.
• Divide the resulting array by its length.

const average = (...nums) =>
  nums.reduce((acc, val) => acc + val, 0) / nums.length;

average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2

averageBy

• title: averageBy
• tags: math,array,intermediate

Calculates the average of an array, after mapping each element to a value using the provided function.

• Use Array.prototype.map() to map each element to the value returned by fn.
• Use Array.prototype.reduce() to add each value to an accumulator, initialized with a value of 0.
• Divide the resulting array by its length.

const averageBy = (arr, fn) =>
  arr
    .map(typeof fn === 'function' ? fn : val => val[fn])
    .reduce((acc, val) => acc + val, 0) / arr.length;

averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5

bifurcate

• title: bifurcate
• tags: array,intermediate

Splits values into two groups, based on the result of the given filter array.

• Use Array.prototype.reduce() and Array.prototype.push() to add elements to groups, based on filter.
• If filter has a truthy value for any element, add it to the first group, otherwise add it to the second group.

const bifurcate = (arr, filter) =>
  arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [
    [],
    [],
  ]);

bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]);
// [ ['beep', 'boop', 'bar'], ['foo'] ]

bifurcateBy

• title: bifurcateBy
• tags: array,intermediate

Splits values into two groups, based on the result of the given filtering function.

• Use Array.prototype.reduce() and Array.prototype.push() to add elements to groups, based on the value returned by fn for each element.
• If fn returns a truthy value for any element, add it to the first group, otherwise add it to the second group.

const bifurcateBy = (arr, fn) =>
  arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [
    [],
    [],
  ]);

bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b');
// [ ['beep', 'boop', 'bar'], ['foo'] ]

binary

• title: binary
• tags: function,intermediate

Creates a function that accepts up to two arguments, ignoring any additional arguments.

• Call the provided function, fn, with the first two arguments given.

const binary = fn => (a, b) => fn(a, b);

['2', '1', '0'].map(binary(Math.max)); // [2, 1, 2]

binarySearch

• title: binarySearch
• tags: algorithm,array,beginner

Finds the index of a given element in a sorted array using the binary search algorithm.

• Declare the left and right search boundaries, l and r, initialized to 0 and the length of the array respectively.
• Use a while loop to repeatedly narrow down the search subarray, using Math.floor() to cut it in half.
• Return the index of the element if found, otherwise return -1.
• Note: Does not account for duplicate values in the array.

const binarySearch = (arr, item) => {
  let l = 0,
    r = arr.length - 1;
  while (l <= r) {
    const mid = Math.floor((l + r) / 2);
    const guess = arr[mid];
    if (guess === item) return mid;
    if (guess > item) r = mid - 1;
    else l = mid + 1;
  }
  return -1;
};

binarySearch([1, 2, 3, 4, 5], 1); // 0
binarySearch([1, 2, 3, 4, 5], 5); // 4
binarySearch([1, 2, 3, 4, 5], 6); // -1

bind

• title: bind
• tags: function,object,advanced

Creates a function that invokes fn with a given context, optionally prepending any additional supplied parameters to the arguments.

• Return a function that uses Function.prototype.apply() to apply the given context to fn.
• Use the spread operator (...) to prepend any additional supplied parameters to the arguments.