====== Interesting JS ES ======

  * standard for development https://remix.run/
  * es  levels support (es6 es next)  https://node.green/
  * https://www.better.dev/declaring-javascript-variables-var-let-const
  * interactive map https://witcher3map.com/t/#3/64.00/70.56
  * sandbox example https://www.w3resource.com/javascript-exercises/javascript-date-exercise-7.php

====== Javascript Tranding popularity trand insight ======
  * https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190
  * https://insights.stackoverflow.com/trends
  * https://insights.stackoverflow.com/survey/2021#

====== Data Visualization ======
  * https://habr.com/ru/companies/astralinux/articles/814881/ - holoviews


===== Programming Javascript JS ES=====
  * https://jsoneditoronline.org/ json online
  * [[https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#document-ready|Jquery to vanilla javascript]]

===== javascipt Components =====
  * https://bit.dev/ - components for all components
===== Javascript JSON ===== 
    JMESPath - features[?geometry.type == `LineString`]
   
<code javascript>
// Filter function for https://jsoneditoronline.org/ and recursive filter names
function query(data) {
  return _.chain(data)
    .mapValues(value => {
      if (_.isPlainObject(value)) {
        return filterKeys(value, ['name','mess']);
      }
      return value;
    })
    .pickBy(obj => _.isPlainObject(obj) && Object.keys(obj).length > 0)
    .map( (item) => item["object Object"])
    .value();
}

function filterKeys(obj, wildcards) {
  const result = {};
  const filter = (val, key, parent) => {
    if (_.isPlainObject(val)) {
      _.forEach(val, filter);
    }
    if (_.some(wildcards, wildcard => _.includes(key, wildcard))) {
      _.set(result, `${parent}.${key}`, val);
    }
  };
  filter(obj, 'root', 'root');
  return result;
}

</code>
==== Javascript.Chrome ====
  - [[https://twitter.com/sulco/status/1177559150563344384?s=09|`document.designMode`]] that feeling when you first discovered **`document.designMode`** https://t.co/bxA1otzCjN

  * [[http://bgrins.github.io/devtools-snippets/#console-save|Chrome console snippete]]

++++ Chrome console load library |
<code JAVASCRIPT>
async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);
</code>
++++

++++ Chrome console save method |
<code JAVASCRIPT>
(function(console){

console.save = function(data, filename){

    if(!data) {
        console.error('Console.save: No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }
})(console)
</code>
++++

++++ Process obect |
<code JAVASCRIPT>
var sorted = vpns.reduce(
	(result, vpn) => {
       Object.keys(vpn).reduce((c, k) => (c[k.toLowerCase()] = vpn[k], c), {});
       result[vpn.Login.toLowerCase()]=vpn;
    return result;
    },
 []);



var sorted = vpns.reduce(
	(result, vpn) => {
       
       var key = vpn.Login.toLowerCase(); //first property: a, b, c
       result[key] = vpn;
       return result;
    },
    {});
</code>
++++

++++ Manipulating data |
<code JAVASCRIPT>
// Yandex maps example
"{"type":"Feature","id":10,"geometry":{"type":"Point","coordinates":[56.257111,58.012524]},"properties":{"description":"Россия, Пермь, улица Луначарского, 4","iconCaption":"3102 (1771 чел.)","marker-color":"#ed4543"}}"

{
type: b.type,
id: b.id,
geometry: b.geometry,
type: b.geometry.type,
long:    b.geometry.coordinates[0]  ,
lat:   b.geometry.coordinates[1]  ,
properties: b.properties,
description: b.properties.description,
iconCaption: b.properties.iconCaption,
markercolor: b.properties.marker-color
}

b=a.features.map( (b) => { return   {
	type:  b.type,
	id:    b.id,
	type:  b.geometry.type,
	long:  b.geometry.coordinates[0]  ,
	lat:   b.geometry.coordinates[1]  ,
	description: b.properties.description,
	iconCaption: b.properties.iconCaption?b.properties.iconCaption:"none",
	markercolor: b.properties["marker-color"]
  };
}

)
</code>
++++
++++ Example Fetch |
<code JAVASCRIPT>
http://127.0.0.1:3000/map

http://127.0.0.1:3000/api/id/24867

var url = new URL("http://127.0.0.1:3000/api/id/24867"),
    params = {lat:35.696233, long:139.570431};
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
</code>
++++ 

==== Javascript Google Api====
  * [[https://www.freecodecamp.org/news/cjn-google-sheets-as-json-endpoint/|How to use Google Sheets as a JSON Endpoint]]

===== React =====
  * Theo - ping․gg interesting author - https://www.youtube.com/watch?v=7m14f0ZzMyY (vite,nextjs,vercel)

==== NodeJS ====
  * https://npmcompare.com/ - compare library
  * rust on javascript , deno against nodejs https://habr.com/ru/post/591173/
  * [[https://habr.com/ru/post/485294/|Современный курс по Node.js в 2020]]
=== Nodejs.log ===
  * [[https://blog.morizyun.com/javascript/library-typescript-pino-logger.html|library typescript pino logger]]
=== Node.js speed ===
  * [[https://www.smashingmagazine.com/2018/06/nodejs-tools-techniques-performance-servers/|Keeping Node.js Fast]] [[https://medium.com/@smashingmag/keeping-node-js-fast-tools-techniques-and-tips-for-making-high-performance-node-js-servers-8cfcb55e3d7| Medium ]]



==== Angular ====
  * [[https://blog.bitsrc.io/10-useful-angular-features-youve-probably-never-used-e9e33f5c35a7|Angular reuse]]