javascript

• Long ago I read [[javascript: the good parts]].
• Never really got into it though.
• [[closures]] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
• [[mdn]] https://developer.mozilla.org/en-US/docs/Web/JavaScript
• [[re introduction]] https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

Javascript 😡🤬😤😭

• node_modules
  • 

    ⥅ [[Pasted image 20210909000251.png]]

• Webpack
• convoluted ecosystem which seems to change every three month
• npm or yarn, and bad package dependencies in general
  • 

    ⥅ [[Pasted image 20210909000558.png]]

  • Javascript

  • 

    ⥅ [[v299B9aGThOY3qd8tdZ4GqElkMrgX9tHp1Z8.gif]]

• lack of a standard build system or a standard library

• • Javascript

• dynamically and loosely typed, with almost no restrictions
  • 

    ⥅ [[Pasted image 20210909001630.png]]

  • 

    ⥅ [[Pasted image 20210909001733.png]]

  • 

    ⥅ [[Pasted image 20210909001742.png]]

  • 

    ⥅ [[Pasted image 20210909001802.png]]

• design flaws
  • deno needs to exist

  • Javascript

  • typescript needs to exist
• [[insecure nature]]
• The pedantic framework wars
  • 

    ⥅ [[Pasted image 20210909003148.png]]

• .then.then.then.then

  • How 2 return variable from promise aaaa

  • Javascript

• 

  ⥅ [[Pasted image 20210908234903.png]]

• 

  ⥅ [[Pasted image 20210909002454.png]]

• Javascript

• 

  ⥅ [[Pasted image 20210909002635.png]]

  (https://jsben.ch/vSgoN)
• 

  ⥅ [[Pasted image 20210909001938.png]]

  • 

    ⥅ [[Pasted image 20210909002024.png]]

  • https://josephg.com/blog/electron-is-flash-for-the-desktop/
    • https://idlewords.com/talks/website_obesity.htm
• 

  ⥅ [[Pasted image 20210909002233.png]]

• 

  ⥅ [[Pasted image 20210928211831.png]]

im not fucking sorry i needed this rant [[For Me, Not You]] worst programming lang

It's a terrible language, but given its status as the de-facto language of the web, it has an incredible ecosystem of tools developed to help out.

Libraries

Functional Programming

Fantasyland
Specification for algebra in JavaScript

Folktale
A corresponding standard library

Staticland
Fantasyland but without classes

Tools

Typescript

functional programing for ts

3D

MatterJS

Rigid body physics engine

Phaser
2d game framework

ThreeJS

flexbox for react-three-fiber

UI Dev

https://github.com/davidkpiano/xstate :: state machines for the web

Meta

Acorn
js parser in js

EsLint config

Hardcore config functional config

Etc

ImmutableJS: Immutable data structures Ramda: Better JS functional programming Typescript with these two is the de factor pure programming ecosystem.

Organice :: Org mode without emacs automerge :: a CRDT that allows concurrent modification Turbolinks :: framework agnostic way of rendering views on server side and swapping in throuhg a socket sanctuary :: strict javascript functions composed functionally excellent article on javascript generators

CRDTs

an excellent resource on conflict-free replicated datatypes https://github.com/sweet-js/sweet-core https://github.com/atom/node-spellchecker

node

advanced javascript optimizer https://github.com/calmm-js/partial.lenses lenses in javascript alloyjs browser based visualizations Parsing in JavaScript: all the tools and libraries you can use Deep JavaScript: Theory and techniques Chess programs in C, Java and Javascript, also 8080 emulator javascript is so hard to use now! https://nh2.me/ host gpg key on my website like this person does. i also like the 'tell me something' button with the hidden (black on black) text! https://healeycodes.com/creating-randomness/

Table of Contents

• [[related]] [[nodejs]]
• [2019-09-29] Practical Ways to Write Better JavaScript - Stack Overflow Blog
• [2020-03-13] Wes Bos on Twitter: "🔥 Optional Chaining (deep property checking) is now in Chrome, Firefox and babel-preset-env 7.8.0. This is a huge improvement in checking if nested properties exist! https://t.co/ypmHeQ8rGw" / Twitter
• [2019-11-10] fuck, replace only replaces first occurence if string is used??
• [[use let instead of var]] [[drill]]
• [[looping over collection { for x of arr }]]
• [[date parsing]]
• [2019-07-14] Enabling Async/Await and Generator Functions in Babel and Node JS
• [2019-07-14] javascript - Is it safe to use async/await now? - Stack Overflow
• [2020-11-10] javascript - Is async await truly non-blocking in the browser? - Stack Overflow
• [[https://github.com/feltcoop/why-svelte]]
• [2020-03-10] Why Svelte is our choice for a large web project | Hacker News
• [2019-06-30] Implementing infinite scrolling : reactjs
• [2019-08-01] google chrome extension - Injecting iframe into page with restrictive Content Security Policy - Stack Overflow
• [2020-05-02] Patching an NPM dependency without going completely insane
• [[Tweet from Guy Bedford (@guybedford), at Dec 27, 19:23]] [[js]] [[repl]]
• [2019-08-18] stidges/jquery-searchable: Tiny, fast jQuery plugin to search through elements as you type. [[search]]
• [2019-08-18] flexsearch - npm [[search]]
• [[codemirror search widget]] [[js]]
• [2020-01-30] Svelte 3: Rethinking reactivity
• [2020-07-18] javascript - Easiest way to sort DOM nodes? - Stack Overflow [[js]]
• [2020-06-21] A little bit of plain JavaScript can do a lot | Hacker News
• [2019-09-06] A small trick on using console.log to print data in JavaScript | Lobsters [[js]]
• [2020-06-05] MaterialFuture: "Tried out DenoJS to play around with Vue and it w…" - Merveilles [[js]]
• [2020-04-02] How to manage HTML DOM with vanilla JavaScript only?
• [2021-01-03] IMO, long names like appendChild, getElementById, createTextNode, etc discourage use of vanilla js [[plt]] [[js]]
• [[inspecting object]] [[nodejs]] [[debug]]
• [2020-04-08] antonmedv/codejar: An embeddable code editor for the browser 🍯
• [2019-08-28] Flow vs Typescript /r/javascript [[flow]] [[js]]
• [2019-09-01] npm vs. yarn - which one and why? : javascript
• [2019-07-22] things that js has: destructing objects, named arguments https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6
• [2019-01-04] eslint is best apparently [[js]]
• [2019-09-21] addyosmani/es6-tools: An aggregation of tooling for using ES6 today
• [2018-12-13] javascript - Inserting large quantities in IndexedDB's objectstore blocks UI - Stack Overflow
• [2019-07-07] Testing: Jest or Mocha? /r/vuejs [[js]]
• [2019-07-07] How to Fix JavaScript Callbacks Variable Scope Problems | Pluralsight | Pluralsight
• [2021-01-07] vasturiano/react-force-graph: React component for 2D, 3D, VR and AR force directed graphs [[viz]] [[js]]
• [2020-11-11] Advanced features in Flow | sitr.us
• [[Js flow example with tweets l, then could post on JavaScript subreddit?]] [[js]] [[toblog]] [[errors]]
• [2019-12-22] BigInt Eilish 🌟 on Twitter: "@sveltejs Rewrote my Twitter search from React to Svelte @Reactjs 42kb Code: https://t.co/4fDXi7hqwG Site: https://t.co/Ync9baSs2n @Sveltejs 5kb Code: https://t.co/lD1gywleNp Site: https://t.co/pgmavoPLBy Had trouble w/ eslint/prettier, but overall much less code to write cc @wgao19 https://t.co/BthQ2I6C77" / Twitter
• [2020-06-04] Show HN: Grid.js – Advanced table library that works everywhere
• [2020-07-21] Show HN: Datagridxl.js – No-nonsense fast Excel-like data table library
• [2021-03-13] Vanilla List • The Vanilla JavaScript Repository [[javascript]]
• [2021-04-30] Use console.log() like a pro - Marko Denic - Web Developer [[drill]] [[javascript]]

related [[nodejs]]

[2019-09-29] Practical Ways to Write Better JavaScript - Stack Overflow Blog

https://stackoverflow.blog/2019/09/12/practical-ways-to-write-better-javascript/

[2020-03-13] Wes Bos on Twitter: "🔥 Optional Chaining (deep property checking) is now in Chrome, Firefox and babel-preset-env 7.8.0. This is a huge improvement in checking if nested properties exist! https://t.co/ypmHeQ8rGw" / Twitter

<https://twitter.com/wesbos/status/1238468738946646017 pull>

Optional Chaining (deep property checking) is now in Chrome, Firefox and babel-preset-env 7.8.0.
This is a huge improvement in checking if nested properties exist!

[2019-11-10] fuck, replace only replaces first occurence if string is used??

use let instead of var [[drill]]

SCHEDULED: [2022-03-25]

looping over collection { for x of arr }

date parsing

http://www.datejs.com/ looks ok, supports fuzzy stuff like 'next week', 'previous month', etc

[2019-07-14] Enabling Async/Await and Generator Functions in Babel and Node JS

https://medium.com/@binyamin/enabling-async-await-and-generator-functions-in-babel-node-and-express-71e941b183e2

Uncaught ReferenceError: regeneratorRuntime is not defined
I found this answer to my troubles and it worked when I implemented it. Just change .babelrc to the following:
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ],
    "@babel/preset-react"
  ]
}

[2019-07-14] javascript - Is it safe to use async/await now? - Stack Overflow

https://stackoverflow.com/questions/42183155/is-it-safe-to-use-async-await-now

So depending on what you think is acceptable it is either safe or not safe. Note the following:
    This question was originally asked on 2017, and we have come a long way so async/await is much more safe to use now.
    By 2019, most mobile devices already support async/await.
    Node 8 is released on May 2017 so it should be safe to use async/await on Node.js unless your Node.js servers are very outdated.

[2020-11-10] javascript - Is async await truly non-blocking in the browser? - Stack Overflow

Points for the worker without an external file. That's one cool trick

https://github.com/feltcoop/why-svelte

[2020-03-10] Why Svelte is our choice for a large web project | Hacker News

https://news.ycombinator.com/item?id=22534639

[2019-06-30] Implementing infinite scrolling : reactjs

https://www.reddit.com/r/reactjs/comments/7z87o9/implementing_infinite_scrolling/

ssuming its only 100 items, i'd just display them all from the start, and let scroll do what scroll does. if you're trying to simplify a real world example where you might have 1000's of initially returned items, then something similar to /u/pqnst but instead of just slicing 0,(page * 20), you'd have to slice(20 * (page - 1), 20 * page) and account for the height of the sliced out elements in the scrollTop of the scrolling container

[2019-08-01] google chrome extension - Injecting iframe into page with restrictive Content Security Policy - Stack Overflow

https://stackoverflow.com/questions/24641592/injecting-iframe-into-page-with-restrictive-content-security-policy

[2020-05-02] Patching an NPM dependency without going completely insane

Tweet from Guy Bedford (@guybedford), at Dec 27, 19:23 [[js]] [[repl]]

Periodic reminder that `await import('//dev.jspm.io/[pkg]')` allows you to import anything from npm in the browser instantly. I often use this in the console to test things out.

<https://twitter.com/guybedford/status/1202022281633030145 pull>

[2019-08-18] stidges/jquery-searchable: Tiny, fast jQuery plugin to search through elements as you type. [[search]]

https://github.com/stidges/jquery-searchable

Tiny, fast jQuery plugin to search through elements as you type.

[2019-08-18] flexsearch - npm [[search]]

https://www.npmjs.com/package/flexsearch

codemirror search widget [[js]]

[2020-01-30] Svelte 3: Rethinking reactivity

https://svelte.dev/blog/svelte-3-rethinking-reactivity

Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like
that eat into your frame budget and tax the garbage collector.
Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.

[2020-07-18] javascript - Easiest way to sort DOM nodes? - Stack Overflow [[js]]

By using list.children instead of list.childNodes, you can avoid the check for text nodes.

[2020-06-21] A little bit of plain JavaScript can do a lot | Hacker News

A bit more minified/modern version of this that I'm using:
    function $e(t='div',p={},c=[]){
      let el=document.createElement(t);
      Object.assign(el,p);
      el.append(...c);
      return el;
    }
    var $t=document.createTextNode.bind(document);

[2019-09-06] A small trick on using console.log to print data in JavaScript | Lobsters [[js]]

https://lobste.rs/s/u2dyrr/small_trick_on_using_console_log_print

console.log("User(%o", user)
console.table is also useful
    faitswulff avatar faitswulff 3 hours ago | link |
I’ve started to use console.table for pretty much everything. It’s so nice.

[2020-06-05] [MaterialFuture: "Tried out DenoJS to play around with Vue and it w…" - Merveilles](https://merveilles.town/@materialfuture/104292286688572143 pull) [[js]]

Tried out DenoJS to play around with Vue and it was very pleasant to use.
I'm going to have to read more into it, but I think any personal JS projects will be using Deno simply due to the lack of dependencies and speed.

[2020-04-02] How to manage HTML DOM with vanilla JavaScript only?

https://htmldom.dev/

[2021-01-03] IMO, long names like appendChild, getElementById, createTextNode, etc discourage use of vanilla js [[plt]] [[js]]

inspecting object [[nodejs]] [[debug]]

let util = require('util')
console.log(util.inspect(resp, {showHidden: false, depth: 1}))

[2020-04-08] antonmedv/codejar: An embeddable code editor for the browser 🍯

https://github.com/antonmedv/codejar

CodeJar honey_pot can be used via modules:
<script type="module">
  import {CodeJar} from 'https://medv.io/codejar/codejar.js'
</script>

[2019-08-28] Flow vs Typescript /r/javascript [[flow]] [[js]]

Having used both (Flow for one very large project and TypeScript for a few less large projects) I am very much in the TypeScript camp now.

Firstly, DefinitelyTyped has vastly more library defs available than flow-typed, which matters a whole lot more than you might realize. It's pretty rare that `npm install @types/name-of-package` comes up empty.

Secondly, Flow feels slower and buggier; I use VS Code full-time and have found that TS reacts to code changes far more quickly and accurately than Flow (almost instantaneously across an entire project), and provides much more useful error messages (I lost count of the number of times I saw `merge_strict_job exception: Utils_js.Key_not_found("LeaderHeap")`, which I believe usually indicates a bug in Flow itself but is also completely useless and extremely difficult to debug). Of course I realize that TS and Code are both Microsoft products so it's not surprising that TS works better, but even in Atom with Nuclide I found that Flow was a bit slow to catch up to things, and still sometimes threw very cryptic errors.

Finally, TS has a pretty solid built-in compiler which tracks the official spec, and natively supports features like `async`/`await`.

To your original question, I'm currently working on a React-heavy project with TS and have found it to have excellent support. Flow works very well with React as well, which is to be expected since both come from Facebook. I think either would be a fine decision, but definitely feel TS has the edge in stability and speed.

[2019-09-01] npm vs. yarn - which one and why? : javascript

https://www.reddit.com/r/javascript/comments/ad6zoj/npm_vs_yarn_which_one_and_why/

npm has greatly improved since the original days of yarn. With lock files and better dependency tree management, I find very few reasons to use yarn nowadays.
I'd say use npm until you find a feature from yarn that requires you to switch. npm is included with every Node.js install.

[2019-07-22] things that js has: destructing objects, named arguments https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6

[2019-01-04] eslint is best apparently [[js]]

[2019-09-21] addyosmani/es6-tools: An aggregation of tooling for using ES6 today

https://github.com/addyosmani/es6-tools#readme

[2018-12-13] javascript - Inserting large quantities in IndexedDB's objectstore blocks UI - Stack Overflow

https://stackoverflow.com/questions/10471759/inserting-large-quantities-in-indexeddbs-objectstore-blocks-ui

[2019-07-07] Testing: Jest or Mocha? /r/vuejs [[js]]

Jest is amazing! It is out of the box , takes way less time to run the tests than mocha. A small side note: If you're using a vue js app, you are going to want to take a look at [Vue Test Utils](https://vue-test-utils.vuejs.org/). Makes life so much easier. Also sinon.js for spies and fakes. PM me if you need tips and tricks to start with automated testing. 

[2019-07-07] How to Fix JavaScript Callbacks Variable Scope Problems | Pluralsight | Pluralsight

https://www.pluralsight.com/guides/javascript-callbacks-variable-scope-problem

ECMAScript 6 introduces the let keyword which allows you to declare a variable scoped to the nearest enclosing block and not global like var does. Thus the closure problem can be solved simply by replacing var with let:

[2021-01-07] vasturiano/react-force-graph: React component for 2D, 3D, VR and AR force directed graphs [[viz]] [[js]]

[2020-11-11] Advanced features in Flow | sitr.us

Js flow example with tweets l, then could post on JavaScript subreddit? [[js]] [[toblog]] [[errors]]

[2019-12-22] BigInt Eilish 🌟 on Twitter: "@sveltejs Rewrote my Twitter search from React to Svelte @Reactjs 42kb Code: https://t.co/4fDXi7hqwG Site: https://t.co/Ync9baSs2n @Sveltejs 5kb Code: https://t.co/lD1gywleNp Site: https://t.co/pgmavoPLBy Had trouble w/ eslint/prettier, but overall much less code to write cc @wgao19 https://t.co/BthQ2I6C77" / Twitter

<https://twitter.com/swyx/status/1208461215069945856 pull>

Rewrote my Twitter search from React to Svelte
@Reactjs  42kb
Code: https://github.com/sw-yx/bettertwitter/tree/reactapp
Site: https://inspiring-fermat.netlify.com

@Sveltejs 5kb
Code: https://github.com/sw-yx/bettertwitter/tree/master
Site: https://bettertwitter.netlify.com
Had trouble w/ eslint/prettier, but overall much less code to write

[2020-06-04] Show HN: Grid.js – Advanced table library that works everywhere

https://gridjs.io/?hn

[2020-07-21] Show HN: Datagridxl.js – No-nonsense fast Excel-like data table library

https://datagridxl.com

[2021-03-13] Vanilla List • The Vanilla JavaScript Repository [[javascript]]

[2021-04-30] Use console.log() like a pro - Marko Denic - Web Developer [[drill]] [[javascript]]

• console.group() and console.groupEnd()

  Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().

• console.time() and console.timeEnd()

  console.time() – Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page. console.timeEnd() – Stops the specified timer and logs the elapsed time in seconds since it started.

JavaScript

JavaScript (or js) is the primary programming language interpreted by web browsers. That is, it runs on the client's browser rather than on a backend server.

Related entries:

• [[econ-ipsum]]
• [[hash-viewer]]