znote-folder-backup-10-11-2022_11-43-24.json

[{"id":"_2q4sixhdg","temp":true,"dirty":true,"lazy":false,"value":"\n## Install react\n`npm i -S react`\n`npm i -S react-dom`\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst LikeButton = (props) => {\n  return <h1>{props.name}</h1>;\n}\nReactDOM.render(<LikeButton \n  name=\"Hello from React!\" />\n  , htmlEl);\n```\n\n","lock":false,"filename":"react-test","tags":[],"project":"znote>demo","lastUpdatedTime":1665473285333,"pin":false,"cloud":false},{"id":"a7bb6fca-feec-4d53-a5ad-153e9a286e8e","temp":true,"dirty":true,"lazy":false,"value":"---\ndescription: General Stuff\nauthor: Anthony\ndate: 20/03/2021\ntags: \n- tag1\n- tag2\nnumber_sections: true\n---\n\nGthub style YAML header\n\n","lock":false,"filename":"yaml header","tags":[],"project":"znote>demo","lastUpdatedTime":1661860234362,"pin":false,"cloud":false},{"id":"e8d2f98a-6ea6-482d-92f0-2560aedca10d","temp":true,"dirty":true,"lazy":false,"value":"## Population count\n```js\nconst r = await fetch('http://api.worldbank.org/v2/countries/USA/indicators/SP.POP.TOTL?per_page=5000&format=json')\nconst json = await r.json();\nconst result = json[1]\nawait printTable(result);\n//printJSON(result);\n```\n\n## Graph\n```js\n//hide\nasync function load(country) {\n  const r = await fetch('http://api.worldbank.org/v2/countries/'+country+'/indicators/SP.POP.TOTL?per_page=5000&format=json')\n  const json = await r.json();\n  const result = json[1].map(year => [year.date, year.value]);\n  return result;\n}\n\nconst usa = await load('USA');\nconst china = await load('CHN');\nconst india = await load('IND');\n\nconst data = [{\n  y: usa.map(r=>r[1]),\n  x: usa.map(r=>r[0]),\n  name: \"USA\",\n  type: 'scatter'\n},\n{\n  y: china.map(r=>r[1]),\n  x: china.map(r=>r[0]),\n  name: \"CHINA\",\n  type: 'scatter'\n},\n{\n  y: india.map(r=>r[1]),\n  x: india.map(r=>r[0]),\n  name: \"INDIA\",\n  type: 'scatter'\n}\n];\n\nconst layout = {\n  height: 400,\n  width: 500\n}\n\nPlotly.newPlot(el, data, layout);\n```","lock":false,"filename":"Population graph","tags":["#climat"],"project":"znote>demo","lastUpdatedTime":1661860279180,"pin":false,"cloud":false},{"id":"b8a29327-3bba-4d9d-81c3-1913c4864dd6","temp":true,"dirty":true,"lazy":false,"value":"## Global Temperature anomalies\n```js\nconst r = await fetch('https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/global/time-series/globe/land_ocean/ytd/12/1880-2016.json')\nconst json = await r.json();\n//printJSON(json);\nconst result = Object.entries(json.data).map(year => [year[0], year[1]]);\n\nconst data = [{\n  y: result.map(r=>r[1]),\n  x: result.map(r=>r[0]),\n  type: 'scatter'\n}];\n\nconst layout = {\n  title: \"World temperature anomalies\",\n  height: 400,\n  width: 500\n}\n\nPlotly.newPlot(el, data, layout);\n```\n\n\n## US Annual Average Temperature and Anomaly \n```js\nconst r = await fetch('https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/national/time-series/110-tavg-ytd-12-1895-2016.json?base_prd=true&begbaseyear=1901&endbaseyear=2000')\nconst json = await r.json();\n//printJSON(json);\nconst result = Object.entries(json.data).map(year => [year[0].substring(0,4), year[1].anomaly]);\nconst data = [{\n  y: result.map(r=>r[1]/1.8), // fahrenheit to celcius\n  x: result.map(r=>r[0]),\n  type: 'scatter'\n}];\n\nconst layout = {\n  title: \"US temperature anomalies (Celcius)\",\n  height: 400,\n  width: 500\n}\n\nPlotly.newPlot(el, data, layout);\n```\n\n## Europe average temperature anomalies\n```js\nconst r = await fetch('https://www.ncei.noaa.gov/cag/global/time-series/europe/land/1/7/1880-2022/data.json')\nconst json = await r.json();\n//printJSON(json);\nconst result = Object.entries(json.data).map(year => [year[0].substring(0,4), year[1]]);\nconst data = [{\n  y: result.map(r=>r[1]),\n  x: result.map(r=>r[0]),\n  type: 'scatter'\n}];\n\nconst layout = {\n  title: \"Europe temperature anomalies\",\n  height: 400,\n  width: 500\n}\n\nPlotly.newPlot(el, data, layout);\n```","lock":false,"filename":"Climate temp anomalies","tags":["#climat"],"project":"znote>demo","lastUpdatedTime":1661860229651,"pin":false,"cloud":false},{"id":"c9f12f8f-7b84-4ee0-b8ee-31ab14d7be9d","temp":true,"dirty":true,"lazy":false,"value":"## ISS position\n\n```js\nconst r = await fetch('http://api.open-notify.org/iss-now.json')\nconst json = await r.json();\n\nvar data = [{\n    type: 'scattergeo',\n    lon: [json.iss_position.longitude],\n    lat: [json.iss_position.latitude],\n    marker: {size: 13,},\n    name: 'ISS',\n}];\n\nvar layout = {\n    geo: {\n        scope: 'world',\n        resolution: 50,        \n        showland: true,\n        countrycolor: '#d3d3d3'\n    }\n};\n\nPlotly.newPlot(el, data, layout);\n```","lock":false,"filename":"ISS position","tags":[],"project":"znote>demo","lastUpdatedTime":1661860253486,"pin":false,"cloud":false},{"id":"c8e10afc-3f57-4b6c-b4ec-72c0a1ae4e9d","temp":true,"dirty":true,"lazy":false,"value":"## Random Cat PNG\n```js\nconst r = await fetch('https://cataas.com/cat', {cache: \"no-store\"})\nconst bytes = await r.arrayBuffer();\n\n// could be a custom function\nconst blob = new Blob([bytes], { type: \"image/png\" });\nconst imageUrl = URL.createObjectURL(blob);\nconst img = createElement(\"img\");\nimg.src = imageUrl;\nhtmlEl.innerHTML = \"\"; \nhtmlEl.append(img);\n```\n\n## Random Cat GIF\n```js\nconst r = await fetch('https://cataas.com/cat/gif', {cache: \"no-store\"})\nconst bytes = await r.arrayBuffer();\nawait printAsImage(bytes);\n```\n\n\n```\n//custom function\nasync function printAsImage(bytes) {\n  const blob = new Blob([bytes], { type: \"image/png\" });\n  const imageUrl = URL.createObjectURL(blob);\n  const img = createElement(\"img\");\n  img.src = imageUrl;\n  htmlEl.innerHTML = \"\"; \n  htmlEl.append(img);\n}\n```","lock":false,"filename":"Random Cat","tags":[],"project":"znote>demo","lastUpdatedTime":1661860238995,"pin":false,"cloud":false},{"id":"a8dea3a9-b786-43e1-b1fb-00e5d198fc40","temp":true,"dirty":true,"lazy":false,"value":"# SVG tester\n```html ubuntu\n<svg viewBox=\"-70 -70 140 140\">\n\n  <defs>\n    <path id=\"b\" d=\"M 23,-20 A32,32 0,0,0 -23,-20 L -40,-30 A42,42 0,0,1 -14,-47 A17,17 0,0,0 14,-47 A42,42 0,0,1 40,-30 Z\"/>\n    <circle id=\"h\" cx=\"0\" cy=\"-57\" r=\"12\"/>\n  </defs>\n\n  <g transform=\"translate(5,5)\" opacity=\"0.125\">\n    <use xlink:href=\"#h\" transform=\"rotate(30)\"/>\n    <use xlink:href=\"#h\" transform=\"rotate(150)\"/>\n    <use xlink:href=\"#b\" transform=\"rotate(30)\"/>\n    <use xlink:href=\"#h\" transform=\"rotate(-90)\"/>\n    <use xlink:href=\"#b\" transform=\"rotate(150)\"/>\n    <use xlink:href=\"#b\" transform=\"rotate(-90)\"/>\n  </g>\n\n  \n  <use xlink:href=\"#h\" fill=\"#d00\" transform=\"rotate(30)\"/>\n  <use xlink:href=\"#b\" fill=\"#f40\" transform=\"rotate(30)\"/>\n  <use xlink:href=\"#h\" fill=\"#f80\" transform=\"rotate(150)\"/>\n  <use xlink:href=\"#b\" fill=\"#d00\" transform=\"rotate(150)\"/>\n  <use xlink:href=\"#h\" fill=\"#f40\" transform=\"rotate(-90)\"/>\n  <use xlink:href=\"#b\" fill=\"#f80\" transform=\"rotate(-90)\"/>\n\n\n</svg>\n```\n\n```html android\n<svg viewBox=\"0 0 96 105\">\n  <g fill=\"#97C024\" \n    stroke=\"#97C024\" \n    stroke-linejoin=\"round\" \n    stroke-linecap=\"round\">\n    <!-- body -->\n    <path d=\"M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z\" stroke-width=\"12\"/>\n    <!-- ears -->\n    <path d=\"M32,5l5,10M64,5l-6,10 \" stroke-width=\"2\"/>\n  </g>\n\n  <!-- head -->\n  <path d=\"M22,35h51v10h-51zM22,33c0-31,51-31,51,0\" fill=\"#97C024\"/>\n  <!-- eyes -->\n  <g fill=\"#FFF\">\n    <circle cx=\"36\" cy=\"22\" r=\"2\"/>\n    <circle cx=\"59\" cy=\"22\" r=\"2\"/>\n  </g>\n</svg>\n```\n\n```html rubyforge\n<svg viewBox=\"0 0 100 100\">\n  <path d=\"M16,22l40,-14l33,28l-10,42l-40,14l-32-28z\" stroke=\"#000\" stroke-width=\"2\" fill=\"#e82323\"/>\n  <path d=\"M19,25l36,-12l28,24 c-12,49 -45,-15 -62,32 l-10-6z\" fill=\"#edc6c6\"/>\n</svg>\n```\n\n```js\nprint(loadBlock('rubyforge')) // try: ubuntu/android/rubyforge\n```","lock":false,"filename":"SVG tester","tags":[],"project":"znote>demo","lastUpdatedTime":1661860248862,"pin":false,"cloud":false},{"id":"21034ee5-5d61-40d5-8ff6-47de907516b2","temp":true,"dirty":true,"lazy":false,"value":"# Ray.so\nCreate beautiful code image\n\n```js code\nconst array1 = [1, 4, 9, 16];\nconst map1 = array1.map(x => x * 2)\nconsole.log(map1)\n```\n\n```js\nconst COLORS=\"midnight\" \nconst BACKGROUND=\"true\"\nconst DARK_MODE=\"true\"\nconst PADDING=\"64\"\nconst LANGUAGE=\"auto\"\nconst TITLE=\"Untitled-1\"\nconst CODE=btoa(loadBlock(\"code\"))\nopen(`https://ray.so/?colors=${COLORS}&background=${BACKGROUND}&darkMode=${DARK_MODE}&padding=${PADDING}&title=${TITLE}&code=${CODE}&language=${LANGUAGE}`)\n```","lock":false,"filename":"Ray.so code image","tags":[],"project":"znote>demo","lastUpdatedTime":1661860323736,"pin":false,"cloud":false},{"id":"2df43a2b-6672-44d7-92e0-445d9e089a25","temp":true,"dirty":true,"lazy":false,"value":"## Active fires in the World\nIn this notebook we use the **last 7d of active fires**. \n\n**Where get data?**\nYou can ask a specific location in history with the links below:\n[Last fires data](https://firms.modaps.eosdis.nasa.gov/active_fire/#firms-txt)\n[Ask archives data](https://firms.modaps.eosdis.nasa.gov/download/create.php)\n\nGlobals **vars** and **functions** *(play me before others blocks)*\n```js\n//global 1\n//hide\nconst basePath = \"/Users/alagrede/Desktop/znote/znote-public-github/examples/data/\"; // change me!\n\n// custom functions\nasync function listDays(start, end) {\n    for(var arr=[], dt=new Date(start); \n            dt<=new Date(end); \n            dt.setDate(dt.getDate()+1)){\n        arr.push(new Date(dt).toISOString().slice(0,10));\n    }\n    return arr;\n}\n\nasync function sleep(time) {\n  await new Promise(r => setTimeout(r, time));\n}\n```\n\n**Download the last 7 days into a file**\n```js\nconst r = await fetch('https://firms.modaps.eosdis.nasa.gov/data/active_fire/modis-c6.1/csv/MODIS_C6_1_Global_7d.csv')\nconst content = await r.text();\n_fs.writeFileSync(basePath + 'modis-active-fire.csv', content);\nprint(\"Done!\");\n```\n\nShow data\n```js\nconst df = await dfd.readCSV(\"https://firms.modaps.eosdis.nasa.gov/data/active_fire/modis-c6.1/csv/MODIS_C6_1_Global_7d.csv\");\nprint(df.ctypes);\n```\n\n\n## Active fires on the world map\nShow last **7 days** of active fires\n```js\n//hide\nconst last7d = basePath + \"modis-active-fire.csv\";\nconst content = _fs.readFileSync(last7d, 'utf8');\n\nfunction show(date) {\n    const latLong = content.split('\\n').filter(r=>String(r.split(\",\")[5]).startsWith(date)).map(r => [r.split(\",\")[0], r.split(\",\")[1]]) // lat/long\n    latLong.shift(); // remove header\n\n    var data = [{\n        type: 'scattergeo',\n        lon: latLong.map(r=>r[1]),\n        lat: latLong.map(r=>r[0]),\n        marker: {size: 2, color:'red'},\n    }];\n\n    var layout = {\n        geo: {\n            // Africa\n            //center: { lat: -16.400190, lon: 22.515316},\n            //projection: {\n            //    scale: 1.5\n            //},\n            scope: 'world', // \"africa\" | \"asia\" | \"europe\" | \"north america\" | \"south america\" | \"usa\" | \"world\"\n            resolution: 50,\n            showland: true,\n            showocean: true,\n            //bgcolor:\"#46484A\",\n        },\n        title: date,\n        //paper_bgcolor:\"#46484A\",\n    };\n\n    Plotly.newPlot(el, data, layout);\n}\n\nconst today = new Date(); // new Date(\"2022-08-24\")\nconst lastWeek = new Date();\nlastWeek.setDate(today.getDate()-7); // new Date(\"2022-08-18\") \n\nvar daylist = await listDays(\n    lastWeek,\n    today);\n\nfor(const day of daylist) {\n    show(day);\n    await sleep(500);  \n}\n```\n\n## France\n### Evolution of active fires in france from 2001 to today\n```js\n//hide\n// All France fires\nconst allfires = basePath + \"fire_archive_M-C61_290304.csv\";\nconst content = _fs.readFileSync(allfires, 'utf8');\nconst activeFires = content.split('\\n');\nactiveFires.shift();\nconst count = activeFires\n    // map to month\n    .map(r=>String(r.split(\",\")[5]).slice(0,7)) // date field like 2008-08\n    // map to year\n    //.map(r=>String(r.split(\",\")[5]).slice(0,4)) // date field like 2008\n    // group by\n    .reduce((total, value) => {\n        total[value] = (total[value] || 0) + 1;\n        return total;\n    }, {});\n\n\nconst data = [{\n  y: Object.values(count),\n  x: Object.keys(count),\n  type: 'scatter'\n}];\n\nconst layout = {\n  title: \"Evolution of active fires in france\",\n  height: 400,\n  width: 500\n}\n\nPlotly.newPlot(el, data, layout);\n```\n\n\n\n","lock":false,"filename":"Active fires","tags":["#climat"],"project":"znote>demo","lastUpdatedTime":1664271289853,"pin":false,"cloud":false},{"id":"390c5a11-e6da-452f-aea1-c152ad83b004","temp":true,"dirty":true,"lazy":false,"value":"# D3 World map\n\n**Install**\n- d3 - `https://d3js.org/d3.v7.min.js`\n- topojson - `https://unpkg.com/topojson@3`\n\n```js scripts=d3,topojson\n//hide\nconst svg = d3.create(\"svg\");\nsvg.attr(\"width\", \"100%\")\nsvg.attr(\"height\", \"500px\")\n\nconst projection = d3.geoNaturalEarth1();\nconst pathGenerator = d3.geoPath().projection(projection);\n\nsvg.append('path')\n    .style(\"fill\", \"#4242e4\")\n    .attr('d', pathGenerator({type: 'Sphere'}));\n\n\nd3.json('https://unpkg.com/world-atlas@1.1.4/world/110m.json')\n.then(data => {\n    const countries = topojson.feature(data, data.objects.countries);\n    svg.selectAll('path').data(countries.features)\n    .enter().append('path')\n        .style(\"fill\", \"lightgreen\")\n        .style(\"stroke\", \"black\")\n        .style(\"stroke-opacity\", \"0.1\")\n        .attr('d', pathGenerator);\n    print(svg.node().outerHTML)\n});\n```","lock":false,"filename":"D3 Globe","tags":[],"project":"znote>demo","lastUpdatedTime":1665481309518,"pin":false,"cloud":false},{"id":"3a770381-3b1b-4657-8795-31d73e8e8e44","temp":true,"dirty":true,"lazy":false,"value":"\n## Make SQL query\n\n[Blog 💡: Use Znote as SQL client](https://blog.znote.io/2021/sql-functions/)\n\n### Install NPM packages\nInstall SQL driver for your database\n```bash\nnpm install --save mysql2\n```\n\nInstall tablify to read results as table\n```bash\nnpm install --save tablify\n```\n\n### Create SQL functions\nCreate these 2 functions *f(x)* below to connect to your database and tablify results\n```\n// custom functions\nasync function localSQL(sqlQuery) {\n  const { Sequelize } = require('sequelize');\n  const sequelize = new Sequelize(\"\", \"root\", \"root\", {  \n    dialect: \"mysql\"/* one of 'mysql' | 'mariadb' | 'postgres' | 'mssql' */,\n    host: \"localhost\"\n  });\n\n  sequelize.authenticate();\n  const [results, metadata] = await sequelize.query(sqlQuery);\n  \n  sequelize.close()\n  return results;\n}\n\nasync function printSQL(sqlQuery) {\n  const tablify = require('tablify').tablify\n  print(tablify(await localSQL(sqlQuery)));\n}\n```\n\n### Make SQL query on your database\n```js\nawait printSQL(\"select * from book.vente_item limit 10\");\n```","lock":false,"filename":"SQL demo","tags":[],"project":"znote>demo","lastUpdatedTime":1664092103584,"pin":false,"cloud":false},{"id":"46481d06-2e40-4be0-b040-2f39630984eb","temp":true,"dirty":true,"lazy":false,"value":"```js\n//hide\nawait printSQL(\"select * from book.vente_item limit 20 offset 1\");\n```","lock":false,"filename":"SQL exploration","tags":["#guide"],"project":"znote>demo","lastUpdatedTime":1664274783623,"pin":false,"cloud":false},{"id":"c7fc63bd-44f6-4967-a384-c6f4c8b98dc8","temp":true,"dirty":true,"lazy":false,"value":"\n# Use P5\nhttps://p5js.org/\n\nIn the **Package** popup add: \nname:`p5`\nurl:`https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js`\n\n**P5** is used here in [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)\n\n\n```js scripts=p5\n//hide\nconst s = p => {\n\n  p.setup = function() {\n    const canvas = p.createCanvas(700, 410);\n  };\n\n  p.draw = function() {\n    p.background(0);\n    p.fill(255);\n    p.rect(p.mouseX, p.mouseY, 50, 50);\n  }\n};\n\nhtmlEl.innerHTML = '' // reset result div before to load P5\nconst P5 = new p5(s, htmlEl); // htmlEl is the \n```","lock":false,"filename":"P5 demo","tags":[],"project":"znote>demo","lastUpdatedTime":1664886179635,"pin":false,"cloud":false},{"id":"913dcc97-5944-47d3-88b7-dc5f61fc8638","temp":true,"dirty":true,"lazy":false,"value":"# DanfoJS read local file\nThe browser version of **DanfoJS** is loaded by default.\n\n\n## Save a remote file locally\n```js\n// Get Url\nconst r = await fetch('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')\nconst content = await r.text();\n// Write ti file\n_fs.writeFileSync('/Users/alagrede/Desktop/finance-charts-apple.csv', content);\nprint(\"Done!\")\n```\n\n## Read local file\nThe browser version only support *http://* urls.\nTo read local file, use Node FS API like below:\n```js\nconst data = _fs.readFileSync('/Users/alagrede/Desktop/finance-charts-apple.csv', 'utf8');\n//print(data)\nconst blob = new Blob([data], {\n  type: \"application/text\",\n});\n\nconst df = await dfd.readCSV(blob);\nprint(df);\n```\n\n## Use DanfoJS node package\nYou can also use the Node version of DanfoJS then run your code directly with your local Node installation:\n\n`npm i -S danfo-node`\n```js\n//exec :/usr/local/opt/node@14/bin/node\nconst dfd = require(\"danfojs-node\")\nlet df = await dfd.readCSV('file:///Users/alagrede/Desktop/finance-charts-apple.csv')\nprint(df)\n```\n\n","lock":false,"filename":"Danfo read local file","tags":[],"project":"znote>demo","lastUpdatedTime":1664960842566,"pin":false,"cloud":false},{"id":"3d21bd5e-9b61-4cd7-b31b-ab3387f62acc","temp":true,"dirty":true,"lazy":false,"value":"# ThreeGlobe World map\n\n**Install**\n- three - `https://unpkg.com/three@0.145.0/build/three.js`\n- threeControls - `https://unpkg.com/three/examples/js/controls/TrackballControls.js`\n- threeGlobe - `https://unpkg.com/three-globe@2.24.8/dist/three-globe.min.js`\n\n```js scripts=three,threeControls,threeGlobe\n//hide\n//  Gen random data\nconst N = 300;\nconst gData = [...Array(N).keys()].map(() => ({\n    lat: (Math.random() - 0.5) * 180,\n    lng: (Math.random() - 0.5) * 360,\n    size: Math.random() / 3,\n    color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]\n}));\n\nconst Globe = new ThreeGlobe()\n    .globeImageUrl('https://unpkg.com/three-globe/example/img/earth-dark.jpg')\n    .bumpImageUrl('https://unpkg.com/three-globe/example/img/earth-topology.png')\n    .pointsData(gData)\n    .pointAltitude('size')\n    .pointColor('color');\n\nsetTimeout(() => {\n    gData.forEach(d => d.size = Math.random());\n    Globe.pointsData(gData);\n}, 4000);\n\n// Setup renderer\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(500, 500);\nhtmlEl.appendChild(renderer.domElement);\n\n// Setup scene\nconst scene = new THREE.Scene();\nscene.add(Globe);\nscene.add(new THREE.AmbientLight(0xbbbbbb));\nscene.add(new THREE.DirectionalLight(0xffffff, 0.6));\n\n// Setup camera\nconst camera = new THREE.PerspectiveCamera();\ncamera.aspect = 500/500;\ncamera.updateProjectionMatrix();\ncamera.position.z = 500;\n\n// Add camera controls\nconst tbControls = new THREE.TrackballControls(camera, renderer.domElement);\ntbControls.minDistance = 101;\ntbControls.rotateSpeed = 5;\ntbControls.zoomSpeed = 0.8;\n\n// Kick-off renderer\n(function animate() { // IIFE\n    // Frame cycle\n    tbControls.update();\n    renderer.render(scene, camera);\n    requestAnimationFrame(animate);\n})();\n```","lock":false,"filename":"ThreeGlobe Basic","tags":[],"project":"znote>demo","lastUpdatedTime":1665481328235,"pin":false,"cloud":false},{"id":"42ab5058-2f81-4431-bd2a-010f34b2561a","temp":true,"dirty":true,"lazy":false,"value":"# Satellites demo\n\n**Install scripts**\n- three - `https://unpkg.com/three@0.145.0/build/three.js`\n- threeControls - `https://unpkg.com/three/examples/js/controls/TrackballControls.js`\n- threeGlobe - `https://unpkg.com/three-globe@2.24.8/dist/three-globe.min.js`\n- satellite - `https://unpkg.com/satellite.js/dist/satellite.min.js`\n\n```js scripts=three,threeControls,threeGlobe,satellite\n//hide\nconst EARTH_RADIUS_KM = 6371; // km\nconst SAT_SIZE = 80; // km\nconst TIME_STEP = 3 * 1000; // per frame\n\nconst Globe = new ThreeGlobe()\n    .globeImageUrl('https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg')\n    .objectLat('lat')\n    .objectLng('lng')\n    .objectAltitude('alt');\n\nconst satGeometry = new THREE.OctahedronGeometry(SAT_SIZE * Globe.getGlobeRadius() / EARTH_RADIUS_KM / 2, 0);\nconst satMaterial = new THREE.MeshLambertMaterial({ color: 'palegreen', transparent: true, opacity: 0.7 });\nGlobe.objectThreeObject(() => new THREE.Mesh(satGeometry, satMaterial));\n\nconst result = await fetch('https://raw.githubusercontent.com/vasturiano/three-globe/master/example/satellites/space-track-leo.txt');\nconst rawData = await result.text();\n\nconst tleData = rawData.replace(/\\r/g, '').split(/\\n(?=[^12])/).map(tle => tle.split('\\n'));\nconst satData = tleData.map(([name, ...tle]) => ({\nsatrec: satellite.twoline2satrec(...tle),\nname: name.trim().replace(/^0 /, '')\n}));\n\n// time ticker\nlet time = new Date();\n(function frameTicker() {\nrequestAnimationFrame(frameTicker);\n\ntime = new Date(+time + TIME_STEP);\n\n// Update satellite positions\nconst gmst = satellite.gstime(time);\nsatData.forEach(d => {\n    const eci = satellite.propagate(d.satrec, time);\n    if (eci.position) {\n    const gdPos = satellite.eciToGeodetic(eci.position, gmst);\n    d.lat = satellite.radiansToDegrees(gdPos.latitude);\n    d.lng = satellite.radiansToDegrees(gdPos.longitude);\n    d.alt = gdPos.height / EARTH_RADIUS_KM\n    }\n});\n\nGlobe.objectsData(satData);\n})();\n\n\n//\n\n// Setup renderer\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setSize(500, 500);\nhtmlEl.innerHTML = '' // reset\nhtmlEl.appendChild(renderer.domElement);\n\n// Setup scene\nconst scene = new THREE.Scene();\nscene.add(Globe);\nscene.add(new THREE.AmbientLight(0xbbbbbb));\nscene.add(new THREE.DirectionalLight(0xffffff, 0.6));\n\n// Setup camera\nconst camera = new THREE.PerspectiveCamera();\ncamera.aspect = 500/500;\ncamera.updateProjectionMatrix();\ncamera.position.z = 400;\n\n// Add camera controls\nconst tbControls = new THREE.TrackballControls(camera, renderer.domElement);\ntbControls.minDistance = 101;\ntbControls.rotateSpeed = 5;\ntbControls.zoomSpeed = 0.8;\n\n// Kick-off renderer\n(function animate() { // IIFE\n    // Frame cycle\n    tbControls.update();\n    renderer.render(scene, camera);\n    requestAnimationFrame(animate);\n})();\n\n```","lock":false,"filename":"ThreeGlobe satellites","tags":[],"project":"znote>demo","lastUpdatedTime":1665481343948,"pin":false,"cloud":false},{"id":"df3d13d7-5fff-41fb-adee-ba0863ae6729","temp":true,"dirty":true,"lazy":false,"value":"# Playwright demo\n\n**npm package installation**\n`npm i -S playwright`\n\nOpen browser and **take a screenshot**\n```js\nconst { chromium } = require('playwright');\n\nconst browser = await chromium.launch();\nconst page = await browser.newPage();\nawait page.goto('https://playwright.dev/');\n\nconst results = await page.$(\"[class*=heroTitle]\");\nconst text = await results.evaluate(element => element.innerText);\nprint(text); // Get text from title\nawait page.screenshot({ path: '/Users/alagrede/example.png' });\n//open(\"/Users/alagrede/example.png\");\nawait browser.close();\n```\n\n\n## Links\n- [Automated Headless Browser scripting in Node.js with Playwright](https://www.twilio.com/blog/automated-headless-browser-scripting-in-node-js-with-playwright)\n- [Playwright Library](https://playwright.dev/docs/api/class-playwright)","lock":false,"filename":"Playwright","tags":[],"project":"znote>demo","lastUpdatedTime":1664964897384,"pin":false,"cloud":false},{"id":"f99c78f6-79a3-4a54-90e3-f00543b99fc9","temp":true,"dirty":true,"lazy":false,"value":"# Express client/server demo\nExample of node backend with express and client with fetch\n\n## Installation\nInstall NPM packages\n`npm i -S express`\n`npm i -S body-parser`\n\n# Server\n```js\n//exec: /usr/local/opt/node@14/bin/node\nconst express = require('express')\nconst bodyParser = require('body-parser');\nconst app = express()\n\napp.get('/', function (req, res) {\n  res.send('Hello World')\n})\n// POST HTML Form\napp.post('/subscribe', \n    express.urlencoded({extended: true}), \n    async (request, response) => {\n  print(`email ${request.body.email}`)\n  response.sendStatus(200);\n})\n\n// POST JSON data\napp.post('/activate', bodyParser.json(), async (request, response) => {\n  printJSON(request.body);\n  response.sendStatus(200);\n})\n\napp.listen(4000)\n```\n\n\n# Client\n## Post form with JS\n```js\nconst data = new URLSearchParams();\ndata.append('email', 'name@domain.com');\n\nconst result = await fetch(\"http://localhost:4000/subscribe\", {\n        body: data,\n        method: \"post\"\n});\nprint(await result.text())\n```\n\n## Post form with HTML\n```html form\n    <form action=\"http://localhost:4000/contact\" method=\"POST\">\n        Email: <input type=\"text\" name=\"email\" id=\"email\" required>\n        <button type=\"submit\">Submit</button>\n    </form>\n```\n\n```js\nconst form = loadBlock('form')\nprint(form)\n```\n\n## POST JSON\n```js\nconst data = {name: \"Anthony\"}\nconst result = await fetch(\"http://localhost:4000/activate\", {\n        body: JSON.stringify(data),\n        method: \"post\",\n        headers: {'Content-Type': 'application/json'}\n});\nprint(await result.text())\n```","lock":false,"filename":"Express demo","tags":[],"project":"znote>demo","lastUpdatedTime":1665328454006,"pin":false,"cloud":false}]