# [paulirish/memory-stats.js](https://github.com/paulirish/memory-stats.js)

https://github.com/vigneshshanmugam/react-memorystats/blob/master/src/memory-stats.js

- https://github.com/vigneshshanmugam/react-memorystats/blob/master/src/memory-stats.js

<Alert type='info' header='See also' text='https://trackjs.com/blog/monitoring-javascript-memory/' />

https://web.dev/monitor-total-page-memory-usage/

https://nodachisoft.com/common/en/article/en000005/

Memory stats monitoring #jsVanilla

# Custom fetch-retry in legacy projects

`fetchRetry.js`
```js
function wait(delay) {
  return new Promise((resolve) => setTimeout(resolve, delay))
}

function fetchRetry({ url, delay = 1000, tries = 0, fetchOptions = {} }) {
  let __triesLeft = tries
  function onError(err) {
    __triesLeft = !!__triesLeft ? __triesLeft - 1 : 0

    if (!__triesLeft) throw err

    return wait(delay).then(() => fetchRetry({ url, delay, tries: __triesLeft, fetchOptions }))
  }
  return fetch(url, fetchOptions).catch(onError)
}
```

### Usage
```js
// --- NOTE: Target action
// 1. Try to use different IPs
const ips = ['178.248.232.203', '2.58.70.214', '159.65.25.117', getAPIBaseUrl()]
const getBaseUrl = ({ ip, url }) => (!validateAnything.hasProtocol(ip) ? `https://${ip}${url}` : `${ip}${url}`)
const getEndpoints = ({ url }) =>
  ips
    .map((ip) => getBaseUrl({ url, ip }))
    .filter((url) => validateAnything.isValidURL(url))
const endpoints = getEndpoints({ url: '/partner_api/tradein/accept' })
const abortController = new AbortController()
const tries = 20

Promise.first(
  endpoints.map((url) =>
    fetchRetry({
      url,
      delay: 30000,
      tries,
      fetchOptions: {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
        signal: abortController.signal,
      },
    })
  )
)
  .then(async (response) => {
    // QuicklyDone fulfils first

    const res = await response.json()
    if (res.ok) {
      abortController.abort()
      targetAction(res)
    } else throw new Error('/accept response is not ok!')
  })
  .catch((errs) => {
    // Arrary of rejections (if no one resolved)
    // Провалено (ips.length * tries) попыток

    // Or one main Error?
  })
// ---
```

`validateAnything.js`
```js
const validateAnything = {
  hasProtocol(str) {
    const pattern = new RegExp('https?:\\/\\/')
    return !!pattern.test(str)
  },
  hasWWW(str) {
    const pattern = new RegExp(/www./)
    return !!pattern.test(str)
  },
  isValidURL(str) {
    const pattern = new RegExp(/(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/)
    return !!pattern.test(str)
  },
}
```

### Polyfills
```js
if (!Promise.first)
  // https://github.com/huruji/p-first
  Promise.first = function (e) {
    return Promise.all(
      e.map(function (e) {
        return e.then(
          function (e) {
            return Promise.reject(e)
          },
          function (e) {
            return Promise.resolve(e)
          }
        )
      })
    ).then(
      function (e) {
        return Promise.reject(e)
      },
      function (e) {
        return Promise.resolve(e)
      }
    )
  }

if (!Promise.any)
  Promise.any = (o) =>
    new Promise((i, l) => {
      var n, t, v, d, e
      let u = !1,
        c = [],
        h = 0,
        f = []
      function a(o) {
        u || ((u = !0), i(o))
      }
      function r(o) {
        f.push(o), f.length >= h && l(f)
      }
      for (let i of o) h++, c.push(i)
      for (let o of c)
        void 0 !== (null === (n = o) || void 0 === n ? void 0 : n.then) ||
        void 0 !== (null === (t = o) || void 0 === t ? void 0 : t.catch)
          ? (null === (d = null === (v = o) || void 0 === v ? void 0 : v.then((o) => a(o))) ||
              void 0 === d ||
              d.catch((o) => {}),
            null === (e = o) || void 0 === e || e.catch((o) => r(o)))
          : a(o)
    })
```

*See also https://gitlab.com/smartprice/ringeo/-/merge_requests/1818*

#jsVanilla | fetchRetry #smartpriceRINGEO #promise #TCP/IP

```js
// NOTE: Polyfill
if (!Promise.first)
  // https://github.com/huruji/p-first
  Promise.first = function(e){return Promise.all(e.map(function(e){return e.then(function(e){return Promise.reject(e)},function(e){return Promise.resolve(e)})})).then(function(e){return Promise.reject(e)},function(e){return Promise.resolve(e)})};

const SlowlyDone = new Promise((resolve, _reject) => {
  setTimeout(resolve, 10000, "Done slowly");
}); // resolves after 10000ms

const QuicklyDone = new Promise((resolve, _reject) => {
  setTimeout(resolve, 200, "Done quickly");
}); // resolves after 100ms

const Rejection = new Promise((_resolve, reject) => {
  setTimeout(reject, 100, "Rejected"); // always rejected
});

Promise.first([
  SlowlyDone,
  QuicklyDone,
  Rejection,
])
  .then((value) => {
    console.log(value);
    // QuicklyDone fulfils first
  })
  .catch((err) => {
    console.log(err);
    // Arrary of rejections (if no one resolved)
  });

// expected output: Done quickly
```
<Alert type='info' text='ES6 polyfill for `Promise.first` https://github.com/juneidysoo/promise-first/blob/master/index.js' header='See also' />

Promise.first  #polyfill #jsVanilla

```js
// NOTE: The method Promise.any was supported in node.js 15.0.0
// If your node.js version is old, so you could update it and try again
// ...or use polyfill:
if (!Promise.any)
  Promise.any=o=>new Promise(((i,l)=>{var n,t,v,d,e;let u=!1,c=[],h=0,f=[];function a(o){u||(u=!0,i(o))}function r(o){f.push(o),f.length>=h&&l(f)}for(let i of o)h++,c.push(i);for(let o of c)void 0!==(null===(n=o)||void 0===n?void 0:n.then)||void 0!==(null===(t=o)||void 0===t?void 0:t.catch)?(null===(d=null===(v=o)||void 0===v?void 0:v.then((o=>a(o))))||void 0===d||d.catch((o=>{})),null===(e=o)||void 0===e||e.catch((o=>r(o)))):a(o)}));

const SlowlyDone = new Promise((resolve, _reject) => {
  setTimeout(resolve, 500, "Done slowly");
}); // resolves after 500ms

const QuicklyDone = new Promise((resolve, _reject) => {
  setTimeout(resolve, 200, "Done quickly");
}); // resolves after 100ms

const Rejection = new Promise((_resolve, reject) => {
  setTimeout(reject, 100, "Rejected"); // always rejected
});

Promise.any([
  SlowlyDone,
  QuicklyDone,
  Rejection,
])
  .then((value) => {
    console.log(value);
    // QuicklyDone fulfils first
  })
  .catch((err) => {
    console.log(err);
    // Arrary of rejections (if no one resolved)
  });

// expected output: Done quickly
```

Promise.any #polyfill  #jsVanilla

# [MatchMedia](https://www.youtube.com/watch?v=vvieEwYX02c)

## React hook

*Используется для определения типа устройства*

> See also [useMatchMedia hook src](https://codesandbox.io/s/use-match-media-o9kwlj)

<Alert type='info' header='$ yarn add' text='[use-match-media-hook](https://github.com/jepser/use-match-media)' />

### Source
```js
import { useState, useLayoutEffect } from "react";

const queries = [
  "(max-width: 766px)",
  "(min-width: 767px) and (max-width: 1199px)",
  "(min-width: 1200px)"
];

export const useMatchMedia = () => {
  const mediaQueryLists = queries.map((query) => window.matchMedia(query));
  const getValues = () => mediaQueryLists.map((list) => list.matches);
  const [values, setValues] = useState(getValues);

  useLayoutEffect(() => {
    const handler = () => setValues(getValues);

    mediaQueryLists.forEach((list) =>
      list.addEventListener("change", handler));

    return () =>
      mediaQueryLists.forEach((list) =>
        list.removeEventListener("change", handler)
      );
  }, []);

  return ["isMobile", "isTablet", "isDesktop"].reduce(
    (acc, screen, index) => ({
      ...acc,
      [screen]: values[index]
    }),
    {}
  );
};
```

### Usage
```jsx
import { useMatchMedia } from "./hooks";
import "./styles.css";

export default function App() {
  const { isMobile, isTablet, isDesktop } = useMatchMedia();

  console.log(isMobile);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {isMobile && <h2>Hello from mobile</h2>}
      {isTablet && <h2>Hello from tablet</h2>}
      {isDesktop && <h2>Hello from desktop</h2>}
    </div>
  );
}
```

<YoutubePlayer videoId='vvieEwYX02c' />

## Web API
https://developer.mozilla.org/ru/docs/Web/API/Window/matchMedia

```js
if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}
```

#reactHook | useMatchMedia #jsVanilla #webAPI

# [2021.stateofjs.com](https://2021.stateofjs.com/)

https://www.youtube.com/watch?v=25rjNjDULQ0

State Of JS 2021 #jsVanilla

https://github.com/pravosleva/my-remont-2020-frontend.demo/commit/1dbcae16a6633c9c4edfa3ef3a3b6e9cd8ce1c84#diff-47714c94bf3496ba91cbdeaba7ed3b378b005a38c9abd5341d261e48c31c57e1

```js
export function clone(item) {
  if (!item) return item // null, undefined values check

  const types = [Number, String, Boolean]
  let result

  // normalizing primitives if someone did new String('aaa'), or new Number('444');
  types.forEach(function (type) {
    if (item instanceof type) result = type(item)
  })

  if (typeof result == 'undefined') {
    if (Object.prototype.toString.call(item) === '[object Array]') {
      result = []
      item.forEach(function (child, index, array) {
        result[index] = clone(child)
      })
    } else if (typeof item == 'object') {
      // testing that this is DOM
      if (item.nodeType && typeof item.cloneNode == 'function') {
        result = item.cloneNode(true)
      } else if (!item.prototype) {
        // check that this is a literal
        if (item instanceof Date) {
          result = new Date(item)
        } else {
          // it is an object literal
          result = {}
          for (var i in item) result[i] = clone(item[i])
        }
      } else {
        // depending what you would like here,
        // just keep the reference, or create new object
        if (false && item.constructor) {
        } else {
          result = item
        }
      }
    } else {
      result = item
    }
  }

  return result
}
```

#jsVanilla | clone object

```ts
const getWords = (search: string): string[] =>
  search?.toLowerCase().split(' ').filter((str) => !!str)

// NOTE: v1. Совпадение по всем словам
const _testRoomNameByAllWords = ({ room, words }: { room: string, words: string[] }): boolean => {
  const modifiedWords = words.join(' ').replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
  // Split your string at spaces & Encapsulate your words inside regex groups:
  const regexpGroups = modifiedWords.split(' ').map((w) => ['(?=.*' + w + ')'])
  // Create a regex pattern:
  const regexp = new RegExp('^' + regexpGroups.join('') + '.*$', 'im')

  return regexp.test(room)
}

// NOTE: v2. Совпадение по хотябы одному слову
const testRoomNameByAnyWord = ({ room, words }: { room: string, words: string[] }): boolean => {
  const modifiedWords = words.join(' ').replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
  const regexpGroups = modifiedWords.split(' ').map((w) => ['(?=.*' + w + ')'])
  const regexp = new RegExp('^' + regexpGroups.join('|') + '.*$', 'im')

  return regexp.test(room)
}
```

## Usage
```js
const roomNameTest = ({ search, room }: { search: string, room: string }) => {
  const words = getWords(search)
  return testRoomNameByAnyWord({ room, words })
}

// So:
roomNames.filter((r) => roomNameTest({ room: r, search }))
```

#jsVanilla | поиск по словам: Узкий и Расширенный

[Toast Notification to Detect Internet Connection in HTML CSS & JavaScript](https://www.youtube.com/watch?v=i1J8XqX2rlE)

#jsVanilla #network | Toast Notification to Detect Internet Connection in HTML CSS & JavaScript

https://busy-lace-heather.glitch.me/

```js
// Schedules the next memory measurement using setTimeout with
// a randomized interval.
function scheduleMeasurement() {
  if (!performance.measureUserAgentSpecificMemory) {
    console.log(
      "performance.measureUserAgentSpecificMemory() is not available. " +
        "Currently only Chrome 85.0.4178.0+ supports it as an Origin Trial."
    );
    return;
  }
  const interval = measurementInterval();
  console.log(
    "Scheduling memory measurement in " +
      Math.round(interval / 1000) +
      " seconds."
  );
  setTimeout(performMeasurement, interval);
}

// Start measurements after page load on the main window.
window.onload = function() {
  scheduleMeasurement();
};

// Computes a random interval in milliseconds such that on
// average there is one measurement every five minutes.
// See https://bit.ly/3bR0hys for an explanation of the math.
function measurementInterval() {
  const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
  return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
}

// Invokes the API, records the result, and schedules
// the next measurement.
async function performMeasurement() {
  // 1. Invoke performance.measureUserAgentSpecificMemory().
  let result;
  try {
    result = await performance.measureUserAgentSpecificMemory();
  } catch (error) {
    if (error instanceof DOMException && error.name === "SecurityError") {
      console.log("The context is not secure.");
      console.log(
        "Make sure that Site Isolation is enabled in Chrome " +
          "and that the page is not embedded as an iframe."
      );
      return;
    }
    // Rethrow other errors.
    throw error;
  }
  // 2. Record the result.
  console.log("Memory usage:", result);
  // 3. Schedule the next measurement.
  scheduleMeasurement();
}
```

#jsVanilla #webAPI Memory stat exp

Here is the retrier implemented using an Async Generator:
```js
async function* retrier({ attempts = Infinity, delay = 100 }) {
  for (let i = 0; i < attempts; i++) {
    yield i
    await pause(delay)
  }
}
```

Fake HTTP request sample:
```js
const tryHttp = ({ arg }) => {
  if (arg < 3) return Promise.reject({ ok: false, message: 'Fck u' })
  return Promise.resolve({ ok: true })
}
```

Retryable HTTP client sample (high level API for usage in code):
```js
const yourHttpClient = async ({ onEarchIterator, validator }) => {

  // NOTE: Now, if you want to use this,
  // all you have to do is to use a for await loop:
  for await (const i of retrier({ attempts: 10, delay: 500 })) {
    const result = await tryHttp({ arg: i })
      .then((res) => res)
      .catch((err) => err)
    onEarchIterator(result)
    if (validator.result(result)) break
  }
}
```

Usage sample:
```js
yourHttpClient({
  onEarchIterator: (res) => {
    // NOTE: We have event on each iterate
    console.log('- this is your event after request', res)
  },
  validator: {
    // NOTE: We have access to each response
    result: (res) => res.ok === true,
  },
})
```

See also [retry-on-error-js](https://github.com/emartech/retry-on-error-js)

Retryable HTTP client generators based #jsVanilla

`service-bus.js`

```js
// --- LOADER
const fullscreenLayoutElmId = 'fullscreen-loader-layout'

const loader = document.createElement('div')
loader.id = fullscreenLayoutElmId
loader.classList.add('sp-none')
loader.style.animation = 'fadein 0.3s linear'

const spinner = document.createElement('div')
spinner.classList.add('nw-loader')
loader.appendChild(spinner)

const body = document.getElementsByTagName('body')[0]
body.appendChild(loader)

window.addEventListener(
  'fullscreen-loader.disable',
  function () {
    const targetBox = document.getElementById(fullscreenLayoutElmId)
    if (!!targetBox) targetBox.classList.toggle('sp-none', true)
  }
)
window.addEventListener(
  'fullscreen-loader.enable',
  function () {
    const targetBox = document.getElementById(fullscreenLayoutElmId)
    if (!!targetBox) targetBox.classList.toggle('sp-none', false)
  }
)
// ---

// USAGE:
window.dispatchEvent(new Event('fullscreen-loader.enable'))
```

```css
#fullscreen-loader-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;

  transition: 0.2s;
  pointer-events: none;
  animation: fadein 0.2s;
}
```

#jsVanilla #webAPI | #serviceBus #fullscreenLoader

`service-bus.js`

```js
// -- IS BROWSER TAB ACTIVE
document.addEventListener("visibilitychange", function() {
  // If false - than browser tab is active
  console.log(document.hidden);
});
// --
```

#jsVanilla #webAPI | Is browser tab active #serviceBus

***One Liner:***
```js
const getDaysArray = function(s,e) {for(var a=[],d=new Date(s);d<=e;d.setDate(d.getDate()+1)){ a.push(new Date(d));}return a;};
```

*Long version:*
```js
const getDaysArray = function (start, end) {
    for(const arr=[], dt=new Date(start); dt<=end; dt.setDate(dt.getDate()+1)) {
        arr.push(new Date(dt));
    }
    return arr;
};
```

***List dates in between:***
```js
const daylist = getDaysArray(new Date("2018-05-01"), new Date("2018-07-01"));
daylist.map((v) => v.toISOString().slice(0,10)).join("\n")
/*
Output: 
2018-05-01
2018-05-02
2018-05-03
...
2018-06-30
2018-07-01
*/
```

***Days from a past date until now:***
```js
const daylist = getDaysArray(new Date("2018-05-01"), new Date());

daylist.map((v) => v.toISOString().slice(0,10)).join("\n")
```

#jsVanilla | Get array of dates between 2 dates

# JS utils

- **[thalesrc/js-utils](https://github.com/thalesrc/js-utils)**

#jsVanilla | helpful #utils

```js
// worker
function getWebWorkerSupport() {
  return (typeof (Worker) !== "undefined") ? true : false;
}
if (getWebWorkerSupport() == true) {
  var radius, size, message;
  worker = new Worker("worker.js");
  worker.onmessage = function(event) {
    alert(event.data); 
    document.getElementById("hidden").value = event.data;
  };
  document.getElementById("btn").onclick = function() {
    radius = document.getElementById("tcircle").value;
    size = document.getElementById("tsquare").value; 
    message = { 'radius': radius, 'size': size }; 
    worker.postMessage(message);
  }
}
```

#webWorker #jsVanilla | Web Worker support

https://www.google.com/amp/s/habr.com/ru/amp/post/651161/

#jsVanilla ES2022

https://qna.habr.com/q/459329

```js
function permut8(arr, prepend) {
  var i, version, el, result = [];
  prepend = prepend || [];
  if(arr.length === 1) return [arr];
  for( i=0; i<arr.length; i++) {
    if( arr.length === 2) {
      result.push( prepend.concat( [arr[i], arr[(i+1)%2]] ));
    } else {
      version = arr.slice();
      el = version.splice(i,1);
      result = result.concat( permut8( version, prepend.concat(el)));
    }
  }  
  return result;
}

var test = permut8( 'abcd'.split('') );
test.map( e=>e.join(' ')).join("\n")
/*
a b c d
a b d c
a c b d
a c d b
a d b c
a d c b
b a c d
b a d c
b c a d
b c d a
b d a c
b d c a
c a b d
c a d b
c b a d
c b d a
c d a b
c d b a
d a b c
d a c b
d b a c
d b c a
d c a b
d c b a
*/
```

http://selection4test.ru

#jsVanilla | Array combinations

## Object.assign

https://ru.hexlet.io/qna/javascript/questions/kak-rabotat-metod-assign-v-js

## [Поверхностное и глубокое копирование](https://doka.guide/js/shallow-or-deep-clone/)

При копировании объектов или массивов JavaScript копирует данные только на один уровень вглубь. Этот тип копирования называется поверхностным (shallow).

Если необходимо полностью скопировать сложную структуру данных, например, массив с объектами, то нужно делать глубокое (deep) или полное копирование данных. JavaScript включает функцию structuredClone(), которая позволяет выполнять глубокое копирование сложных структур данных.

#jsVanilla Копирование объекта

```
unshift -> [array] <- push
shift   <- [array] -> pop
```

#jsVanilla Array methods

https://github.com/SanichKotikov/sort-array-objects/blob/master/src/index.ts

#jsVanilla | Sort array of objects

https://github.com/chdh/commons-math-interpolation/blob/master/src/Akima.ts

https://www.npmjs.com/package/math-interpolate

#jsVanilla | interpotation

https://gitlab.com/catamphetamine/libphonenumber-js

#jsVanilla | Phone validator

https://www.npmjs.com/package/virtual-scroller#dom

#jsVanilla | Virtual scroller

https://stackoverflow.com/questions/53584705/javascript-extending-es6-class-setter-will-inheriting-getter

#jsVanilla | How to update getter

https://gomakethings.com/check-if-two-arrays-or-objects-are-equal-with-javascript/

#jsVanilla | Check if two arrays or objects are equal with JavaScript 

```js
function ascSort (a, b) {
  return a < b ? -1 : (b > a ? 1 : 0);
}

function descSort (a, b) {
  return b < a ? -1 : (a > b ? 1 : 0);
}
```

#jsVanilla | sort asc desc

https://www.youtube.com/watch?v=ah5voE_SGjo

#jsVanilla #generators #redux-saga 2021

https://bobbyhadz.com/blog/javascript-get-first-n-characters-of-string#:~:text=To%20get%20the%20first%20N,characters%20of%20the%20original%20string.

#jsVanilla | splice; check n chars of string

https://stackoverflow.com/questions/403967/how-may-i-reference-the-script-tag-that-loaded-the-currently-executing-script

#jsVanilla | Get current script

https://webdesign.tutsplus.com/tutorials/smooth-scrolling-vanilla-javascript--cms-35165

How to Implement Smooth Scrolling With CSS & JavaScript | #jsVanilla

As this is a concern of presentation, a pure CSS solution would be ideal. However, this question was posed in 2012, and although relative positioning / negative margin solutions have been suggested, these approaches seem rather hacky, create potential flow issues, and cannot respond dynamically to changes in the DOM / viewport.

With that in mind I believe that using JavaScript is still (February 2017) the best approach. Below is a vanilla-JS solution which will respond both to anchor clicks and resolve the page hash on load (See JSFiddle).

```js
(function(document, history, location) {
  var HISTORY_SUPPORT = !!(history && history.pushState);

  var anchorScrolls = {
    ANCHOR_REGEX: /^#[^ ]+$/,
    OFFSET_HEIGHT_PX: 50,

    /**
     * Establish events, and fix initial scroll position if a hash is provided.
     */
    init: function() {
      this.scrollToCurrent();
      window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
      document.body.addEventListener('click', this.delegateAnchors.bind(this));
    },

    /**
     * Return the offset amount to deduct from the normal scroll position.
     * Modify as appropriate to allow for dynamic calculations
     */
    getFixedOffset: function() {
      return this.OFFSET_HEIGHT_PX;
    },

    /**
     * If the provided href is an anchor which resolves to an element on the
     * page, scroll to it.
     * @param  {String} href
     * @return {Boolean} - Was the href an anchor.
     */
    scrollIfAnchor: function(href, pushToHistory) {
      var match, rect, anchorOffset;

      if(!this.ANCHOR_REGEX.test(href)) {
        return false;
      }

      // href.slice(1) - оцениваемая часть строки, начиная со второго символа (в данном случае, совпадает с id элемента)
      match = document.getElementById(href.slice(1));

      if(match) {
        rect = match.getBoundingClientRect();
        anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
        window.scrollTo(window.pageXOffset, anchorOffset);

        // Add the state to history as-per normal anchor links
        if(HISTORY_SUPPORT && pushToHistory) {
          history.pushState({}, document.title, location.pathname + href);
        }
      }

      return !!match;
    },

    /**
     * Attempt to scroll to the current location's hash.
     */
    scrollToCurrent: function() {
      this.scrollIfAnchor(window.location.hash);
    },

    /**
     * If the click event's target was an anchor, fix the scroll position.
     */
    delegateAnchors: function(e) {
      var elem = e.target;

      if(
        elem.nodeName === 'A' &&
        this.scrollIfAnchor(elem.getAttribute('href'), true)
      ) {
        e.preventDefault();
      }
    }
  };

  window.addEventListener(
    'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
  );
})(window.document, window.history, window.location);
```

#jsVanilla | jump to local href

```js
function dynamicSort(property) {
  var sortOrder = 1;
  if (property[0] === "-") {
    sortOrder = -1;
    property = property.substr(1);
  }
  return function (a,b) {
    /* next line works with strings and numbers, 
      * and you may want to customize it to your needs
      */
    var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
    return result * sortOrder;
  }
}
```

#jsVanilla | Array dynamic sort (array of objects by fieldname)

**For ES8 (ES 2017)**
```js
const mapOne = new Map([['a', 1], ['b', 2], ['c' , 3]]);

for (const [key, value] of mapOne.entries()) {
  console.log(key, value);
}
```

**For ES6 (ES 2015)**
```js
var myMap = new Map();

myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

for (const [key, value] of myMap.entries()) {
  console.log(key, value);
}
```

**Pre ES6**
```js
for (var m in myMap){
    for (var i = 0; i < myMap[m].length; i++){
      // Do something with myMap[m][i] ...
    }
} 
```

https://hackinbits.com/articles/how-to-iterate-a-map-in-javascript---map-part-2

#jsVanilla | How to iterate Map object

`create-polling.src.js`

```js
// NOTE: https://levelup.gitconnected.com/polling-in-javascript-ab2d6378705a

const poll = ({ fn, validate, interval, maxAttempts }) => {
  console.log('Start poll...')
  let attempts = 0

  const executePoll = async (resolve, reject) => {
    // console.log('- poll')
    const result = await fn()
    attempts++;

    if (validate(result)) {
      return resolve(result)
    } else if (!!maxAttempts && attempts === maxAttempts) {
      return reject(new Error('Exceeded max attempts'))
    } else {
      setTimeout(executePoll, interval, resolve, reject)
    }
  };

  return new Promise(executePoll);
};
```

## Usage
```js
poll({
  fn: mockApiAndStateRefresher,
  // NOTE: validate завязана на внешнюю переменную
  validate: () => !window.proxiedState.payout_card.isPollingEnabled,
  interval: 1000,
})
  .then((res) => {
    log('payout_card', 'POLLING END: RESOLVED')
    log('payout_card', res)

    // const tradeinId = window.proxiedState.tradeinId;
    // const bankRuName = window.proxiedState.payout_card.selectedBankRuName;

    // lockSubmitIfSbpSber();
    
    switch (res.status) {
      case EStatus.Pending:
      // case EStatus.Added: // закрыть iframe и запомнить, что карта привязана (card_number_ending — последние 4 цифры номера для отображения в UI
      // case EStatus.Retry:
      // case EStatus.Canceled: // закрыть iframe и запомнить, что карта не привязана
          break;
      default:
        // openResErrModal({ message: `Неожиданное значение статуса: ${res.status}${res.message ? `; ${res.message}` : ''}` }, 'ERR #25-1')
        updateWidgetUI();
        log('payout_card', 'NOTE: Неожиданный кейс');
        break;
    }
  })
  .catch((err) => {
    log('payout_card', 'POLLING END: REJECTED');
    console.error(err);
    openResErrModal(err, 'ERR #25');
  })
```

## mockApi sample
```js
let c = 0
const mockApiSample= async () => {
    // const url =  ...
    // const body = ...

    const res = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    })
      .then(response => response.json())
      .catch((err) => ({ isOk: false, message: err.message || 'No msg', isErrored: err instanceof Error }));
    
    switch (true) {
      case (res.status !== EStatus.Pending && !res.isErrored):
        c = 0
        break;
      default:
        c += 1
        break;
    }

    return res
};
```

#jsVanilla #polling #smartpriceLegacy

## Looper sample

```js
useEffect(() => {
  const looper = MakeLooper(1000)()
  const refresh = () => {
    // Do anything...
  }

  looper.start(refresh)

  return () => { looper.stop() }
}, [])
```

`MakeLooper.src.ts`
```js
export const MakeLooper = (ms = 1000) => {
  let timer: any;
  let wasStopped = false;

  return () => {
    const start = (cb: () => void) => {
      // console.log("Run");
      if (!wasStopped) {
        timer = setTimeout(function () {
          // console.log("Looper done and will be restarted.");
          if (cb) cb();
          start(cb);
        }, ms);
      }
    };
    const stop = () => {
      // console.log("Looper stopped");
      wasStopped = true;
      clearTimeout(timer);
    };
    return { start, stop };
  };
}
```

[Example](https://github.com/pravosleva/express-helper/blob/master/src/server/utils/socket/state/cpuStateInstance.ts)

#react #jsVanilla | Looper sample #MakeLooper #smartpriceLegacy

https://tutorial.eyehunts.com/js/remove-first-n-elements-from-array-javascript-example-code/

#jsVanilla | Remove elements from #array

**[Основные сведения об объектах Web Worker](https://www.html5rocks.com/ru/tutorials/workers/basics/)**

https://www.w3schools.com/html/html5_webworkers.asp

#jsVanilla #webWorker | Tutorial

https://www.youtube.com/watch?v=wX0pb6CBS-c

```js
const makeHiddenOnOutsideClick = (elm) => {
  document.addEventlistener('click', function(e) {
    // If user clicks inside the element then do nothing
    if (e.target.closest(box) return
    // If user clicks outside the element, hide it
    box.classList.remove('active')
  })
}

const box = document.querySelector('.box')

makeHiddenOnOutsideClick(box)
```

🧯 #jsVanilla | How to Detect Clicks Outside of Elements with Vanilla JavaScript #smartprice

[Наблюдатель (шаблон проектирования)](https://ru.wikipedia.org/wiki/%D0%9D%D0%B0%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C_(%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)#%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B)

```js
class Observable {
	constructor() {
		this.listeners = {};
	}

	// Подписаться.
	on(e, callback) {
		if (this.listeners[e] == undefined) {
            this.listeners[e] = {};

		    this.listeners[e].eventProperty = {};
		    this.listeners[e].eventProperty.isOnOnce = false;

		    this.listeners[e].data = [];
        }
		this.listeners[e].data.push(callback);
	}

	// Подписаться единожды.
	onOnce(e, callback) {
		this.on(e, callback);
		this.listeners[e].eventProperty.isOnOnce = true;
	}

	// Отписаться.
	off(e, callback) {
		this.listeners[e].data = this.listeners[e].data.
			filter(function (listener) { return listener !== callback; });
	}

	// Разослать сообщение подписчикам.
	emit(e, data) {
		if (this.listeners[e] == undefined || this.listeners[e].data == undefined) {
			return;
		}

		let itObj = this;		

		this.listeners[e].data.forEach(listener => {
			if(itObj.listeners[e].eventProperty.isOnOnce) {
				itObj.off(e, itObj.listeners[e].data[0]);
			}	
			listener(data);
		});
	}
}
```

#jsVanilla | #pattern Observable

https://www.youtube.com/watch?v=uFIl4BvYne0

![img](https://i.ytimg.com/vi_webp/uFIl4BvYne0/maxresdefault.webp)

🧯 #jsVanilla | Custom Select Menu Dropdown #smartprice

<YoutubePlayer videoId='p4XQeUaskeQ' />

https://www.youtube.com/watch?v=p4XQeUaskeQ

## 🔥 Sort objects

**[github.com/SanichKotikov/sort-array-objects](https://github.com/SanichKotikov/sort-array-objects)**

#jsVanilla | Array methods #sortObjects

```js
const frames = document.getElementsByTagName('iframe');
Array.from(frames).forEach(function(item, i) {});
```

#jsVanilla | Перебрать элементы DOM в массиве; Iterable DOM elements

https://www.npmjs.com/package/jeep-photoviewer

#jsVanilla | Photo viewer

```js
const newName = `${nowDate.toISOString().slice(0,10)}_ts(${ts})_from(${detected.connData.name})_room(${detected.connData.room}).${ext}`

/* SAMPLE 1:
  const txt = "This is (my) simple text";
  const re = /$(.*)$/;
  console.log(txt.match(re)[1]);​ // my
*/

/* SAMPLE 2:
console.log(new RegExp(/\[(.*)\]/).test('[123]')) // true
const re = new RegExp(/\[(.*)\]/)
console.log('[123]'.match(re)[1]) // 123
*/
```

#jsVanilla | RegExp; Find word between brackets

Given a JavaScript object,
```js
var obj = { a: { b: '1', c: '2' } }
```
and a string
```js
"a.b"
```
how can I convert the string to dot notation so I can go
```js
var val = obj.a.b;
```
If the string was just 'a', I could use obj[a]. But this is more complex. I imagine there is some straightforward method, but it escapes me at present.

> https://stackoverflow.com/questions/6393943/convert-a-javascript-string-in-dot-notation-into-an-object-reference

Here's an elegant one-liner that's 10x shorter than the other solutions:
```js
function index(obj,i) {return obj[i]}

'a.b.etc'.split('.').reduce(index, obj)
```

Or in ECMAScript 6:
```js
'a.b.etc'.split('.').reduce((o,i)=> o[i], obj)
```

#jsVanilla | Convert a JavaScript string in dot notation into an object reference

#jsVanilla | es2022

defined as 24 hours, and any 'variation' in that due to Daylight Savings Time is actually a switch of timezones. If you don't distinguish between timezones already, trying to figure out a time difference is going to put you in a world of hurt, not least because the DST switchover 'repeats' time. Stay in one timezone, though, and it all works. – 
icktoofay
 May 21 '14 at 5:40
16
@trisweb—even something as simple as getting a difference in days is more complex than your comment. How many days between 10pm Tuesday and 9am Wednesday? Your algorithm says 0. Others might think 1. – 
RobG
 Oct 19 '15 at 1:53
1
@RobG relativists might even think more than 1 or less than 0. It all depends on the observer. – 
Innocent Bystander
 Jun 25 '18 at 21:59 
Show 1 more comment
Up vote
96
Down vote

```js
var DateDiff = {

    inDays: function(d1, d2) {
        var t2 = d2.getTime();
        var t1 = d1.getTime();

        return parseInt((t2-t1)/(24*3600*1000));
    },

    inWeeks: function(d1, d2) {
        var t2 = d2.getTime();
        var t1 = d1.getTime();

        return parseInt((t2-t1)/(24*3600*1000*7));
    },

    inMonths: function(d1, d2) {
        var d1Y = d1.getFullYear();
        var d2Y = d2.getFullYear();
        var d1M = d1.getMonth();
        var d2M = d2.getMonth();

        return (d2M+12*d2Y)-(d1M+12*d1Y);
    },

    inYears: function(d1, d2) {
        return d2.getFullYear()-d1.getFullYear();
    }
}
```

#jsVanilla | Dates diff

```js
if (new RegExp(substrings.join("|")).test(string)) {
    // At least one match
}
```

```js
const substrings = ['connect', 'ready'];
const str = 'disconnect';

if (substrings.some(v => str === v)) {
   // Will only return when the `str` is included in the `substrings`
}
```

#jsVanilla | How to check if a string contains text from an array of substrings in JavaScript?

#jsVanilla | Удалить последний символ строки

#hotkey #jsVanilla

```js
// NOTE: See also https://www.cssscript.com/demo/format-phone-numbers-phoneinput/
  function formatPhoneString(phoneStr) {
    const defaultFormat = '+{0}&nbsp;({1}{2}{3})&nbsp;{4}{5}{6}&nbsp;{7}{8}&nbsp;{9}{10}';
    let strArr = phoneStr.split('');
    let formattedStr = defaultFormat;

    for (let i = 0; i < strArr.length; i++)
      formattedStr = formattedStr.replace('{' + i + '}', strArr[i]);

    if (formattedStr.indexOf('{') === -1)
      return formattedStr;
    else
      return formattedStr.substring(0, formattedStr.indexOf('{'));
  }
  newLink.innerHTML = formatPhoneString(href.split('+')[1]);
```

#prettyPhone #jsVanilla

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

#jsNativeAPI #jsVanilla #prettyPrice #нативноеАПИ

```js
function* Counter() {
  let count = 0
  while (true) yield count++
}
const counter = Counter()

// Usage: counter.next().value
```

#jsVanilla | Counter; Простой счетчик #jsGenerators

```ts
const getRandomInteger = (min: number, max: number) =>
  Math.round(min - 0.5 + Math.random() * (max - min + 1));
```

#jsVanilla | Get random integer in interval

*Есть лучший вариант для записи такой последовательности?*

```js
fn1.then(() => {
  fn2.then(() => {
    fn3.finally(() => {
      // Some code...
    })
  })
})
```

> да, вкладывать промисы никогда не надо
> из then `fn1.then` возвращаете `fn2`
> и строите плоскую цепочку промисов

```js
fn1
  .then(() => fn2)
  .then(() => fn3)
  .finally(() => {
    // Some code...
  })
```

#jsVanilla #promise | Promise hell

#jsVanilla #readableTime

<YoutubePlayer videoId='nWonb3A6N5U' />

**[Stunning CSS & Javascript Effects | June 2020](https://www.youtube.com/watch?v=nWonb3A6N5U)**

- 3: [Creative Page Scroll Progress Bar with Number Percentage](https://www.youtube.com/watch?v=cL_dytFgasA)
- 4: [Stunning Animation on Page Scroll using GSAP's ScrollTrigger](https://www.youtube.com/watch?v=Dn4dIv4oa1s)
- 9: [Making a Calendar in Vanilla Javascript](https://www.youtube.com/watch?v=kn1bNLMTgdo)
- 12: [CSS3 Shiny Button Hover Effects | Html CSS](https://www.youtube.com/watch?v=XYZlMVocjwE)
- 14: [CSS Only Non-Rectangular Header](https://www.youtube.com/watch?v=mqzSY6Qy0yk)
- 16: [Text Typography Portrait using Html & CSS | CSS Effects](https://www.youtube.com/watch?v=NLCc1zYBEUU)

#cssVanilla | Effects samples 2020 06 #jsVanilla

```js
import ConditionTypes from '~/utils/condition_types';

const baseTool = {
  alpha: function (a, b) {
    a = a.toUpperCase();
    b = b.toUpperCase();
    return a < b ? -1 : a > b ? 1 : 0;
  },
  number: function (a, b) {
    a = parseFloat(a);
    b = parseFloat(b);
    return a - b;
  },
};

export class Designer {
  getSortedMemorylist(arr) {
    const result = [];
    let counter = 0;
    try {
      const sorted = arr.sort((e1, e2) =>
        baseTool.number(e1.split(' ')[0], e2.split(' ')[0])
      );

      return sorted;
    } catch (err) {
      console.log(err);
      return arr;
    }
  }
}
```

jsVanilla