{"id":15389010,"url":"https://github.com/olange/learning-javascript","last_synced_at":"2025-03-27T23:17:55.033Z","repository":{"id":142244857,"uuid":"162700924","full_name":"olange/learning-javascript","owner":"olange","description":"Learning more about Javascript – quick reference, articles, useful resources, personal notes","archived":false,"fork":false,"pushed_at":"2020-01-06T15:57:21.000Z","size":46,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T01:24:27.241Z","etag":null,"topics":["async-await","code-retreat","generators","iterators","javascript","learning-notes","promises"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/olange.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-21T10:28:37.000Z","updated_at":"2020-01-06T15:57:23.000Z","dependencies_parsed_at":"2023-07-14T16:03:36.480Z","dependency_job_id":null,"html_url":"https://github.com/olange/learning-javascript","commit_stats":{"total_commits":31,"total_committers":2,"mean_commits":15.5,"dds":"0.032258064516129004","last_synced_commit":"94b4ca9f8801ee1500b56974dfce2273d1907745"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olange%2Flearning-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olange%2Flearning-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olange%2Flearning-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olange%2Flearning-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/olange","download_url":"https://codeload.github.com/olange/learning-javascript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245938228,"owners_count":20697008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async-await","code-retreat","generators","iterators","javascript","learning-notes","promises"],"created_at":"2024-10-01T14:58:53.141Z","updated_at":"2025-03-27T23:17:55.015Z","avatar_url":"https://github.com/olange.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learning Javascript\n\nLearning more about Javascript – articles, useful resources, personal notes.\n\n## Quick reference\n\n### Fundamentals\n\n* [Tips for common idioms](TIPS.md) _accessing property values while protecting from inexistent properties, and suggestions for other day-to-day idioms_\n* [2ality › Global scope](https://2ality.com/2019/07/global-scope.html) _How do JavaScript’s global variables really work? All about_ scopes, lexical environments, global object, global environment, module environments\n* [Mathias Bynens › Notes on `globalthis`](https://mathiasbynens.be/notes/globalthis)\n* [Lydia Hallie › JavaScript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co) _The infamous prototypal inheritance of Javascript presented in a step-by-step tutorial, with animated illustrations of property access_\n\n### Pull vs Push\n\nPull and Push are two different protocols that describe how a data _Producer_ can communicate with a data _Consumer_.\n\n| System |\tSingle value\t| Multiple values | Description |\n|---|---|---|---|\n| [Pull](https://rxjs-dev.firebaseapp.com/guide/observable#pull-versus-push) |\t**[Function](https://developer.mozilla.org/en-US/docs/Glossary/Function)** |\t**[Iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol)** | The _Consumer_ determines when it receives data from the data _Producer_. The _Producer_ itself is unaware of when the data will be delivered to the _Consumer_. |\n| [Push](https://rxjs-dev.firebaseapp.com/guide/observable#pull-versus-push) |\t**[Promise](https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise)** | **[Observable](https://rxjs-dev.firebaseapp.com/guide/observable)** | The _Producer_ determines when to send data to the _Consumer_. The _Consumer_ is unaware of when it will receive that data. |\n\n### Promises\n\n* [MDN › Javascript Guides › Using Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) All about their guarantees, chaining them, error propagation, composition, timing (passed-in functions are put on microtask queue, they never run immediately), nesting and common mistakes\n* Remember: `then()` expects a *function* (or two); that returns either a `Promise`; a scalar; or throws ([We have a problem with promises — Common mistakes with promises](https://t.co/rZyuKREaUW), Nolan Lawson, 18.05.2015)\n\n### Observables / RxJS\n\n* [`Observable`](https://rxjs-dev.firebaseapp.com/guide/observable) Observables are lazy push collections of multiple values. Represent the idea of an invokable collection of future values or events. `const observable = Observable.create( function (observer) { … })` The code of the ellipsis represents an _Observable execution_, a lazy computation that only happens for each `Observer` that subscribes. The execution produces multiple values over time, either synchronously or asynchronously.\n* `Observers` – a collection of callbacks, that knows how to listen to values delivered by the Observable. An `Observer` is an object with methods `next( value)`, `error( err)`, `complete()`. `observable.subscribe( observer)` is the way to start an _Observable execution_ and deliver values or events to the Observer of that execution. In an _Observable Execution_, zero to infinite Next notifications may be delivered; if either an Error or Complete notification is delivered, then nothing else can be delivered afterwards.\n* [`Subscription`](https://rxjs-dev.firebaseapp.com/guide/subscription) – an object that represents a disposable resource, usually the execution of an `Observable`; is primarily useful for cancelling the execution. Has one important method, `unsubscribe()`, that takes no argument and just disposes the resource held by the subscription.\n* [`Subject`](https://rxjs-dev.firebaseapp.com/guide/subject) – a special type of Observable, that allows values to be _multicasted_ to many Observers. While plain Observables are _unicast_ — each subscribed `Observer` owns an _independent execution_ of the `Observable` —, Subjects are _multicast_. The equivalent to an `EventEmitter`.\n* Operator – pure function that enables a functional programming style of dealing with collections, with operations like `map`, `filter`, `concat`, `reduce`, …\n* `Scheduler` – centralized dispatchers to control concurrency, allowing to coordinate when computation happens, on e.g. `setTimeout` or `requestAnimationFrame` or others.\n\n### Iteration protocols\n\n* [Iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) To be iterable, an object must implement the `@@iterator` method — meaning that the object (or one of the objects up its [prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)) must have a property with a `@@iterator` key, which is available via constant [`Symbol.iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator). The method `@@iterator` is a zero arguments function, that returns an object, conforming to the [iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol). (ES2015)\n* [Iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol) An object is an iterator, when it implements a `next()` method with the following semantics: a zero arguments function, that returns an object with at least the following two properties:\n  * `done` – a boolean with either the value _true_, if the iterator is past the end of the iterated sequence — in this case `value` optionally specifies the return value of the iterator; or the value _false_, if the iterator was able to produce the next value in the sequence; this is equivalent of not specifying the done property altogether.\n  * `value` – any JavaScript value returned by the iterator. Can be omitted when done is true. (ES2015)\n\n### Generators\n\n* **[`function*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) declaration** defines a generator function, which returns a [`Generator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) object. The returned `Generator` object conforms to both the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) and the [iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol) (ES2015).\n* **[`yield`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield) keyword** is used to pause and resume a [generator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) (`function*`). `[rv] = yield [expression];` _expression_ defines the value to return from the generator function via the iterator protocol; _rv_ returns the optional value passed to the generator's `next()` method to resume its execution. (ES2015)\n* **[`yield*`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*) expression** is used to delegate to another [generator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) or [iterable object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol). `yield* [[expression]];` _expression_ is the expression that returns an iterable object. (ES2015)\n\n### State and event propagation\n\n* [Westbrook Johnson › `composed: true` considered harmful?](https://dev.to/open-wc/composed-true-considered-harmful-5g59) _Detailed description of event propagation and description of a pattern for event propagation with state — which I would not recommend \u0026 adopt, yet it is an excellent article to learn the topic_\n* [Open WC › Managing events in your custom elements](https://open-wc.org/faq/events.html) _Patterns for listening and dispatching events in the context of Web Components_\n* [Peter Caisse › Modeling State with TypeScript](https://www.azavea.com/blog/2019/12/12/modeling-state-with-typescript/) _TypeScript `interfaces` and `unions` allow to describe the structure of data; common schema can be modeled in `generics`; and state transitions can be modeled with `conditional types` — which allow the compiler to capture and signal errors, when state is set to unintended values, due to typo, logic error or accidental type coercions. Note: error signaling happens at_ compile time, _however clever the compiler is; those techniques would not protect from malformed data suddenly provided by an upstream source, at_ runtime, _which is another common issue in production_.\n\n### Streams\n\n* [Learning using Streams, Observables and Transforms](https://github.com/olange/learning-streams/) articles, useful resources, personal notes\n\n### Web- and Service Workers\n\n* [Learning Service Workers](https://olange.github.io/learning-service-workers/) experiments, articles, reading notes\n* [Learning Service Workers › Reading notes › The Basics of Web Workers ](https://github.com/olange/learning-service-workers/issues/2)\n* **[`Transferable`]() interface** represents an object that can be transfered between different execution contexts, like the main thread and Web workers. The [`ArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), [`MessagePort`](https://developer.mozilla.org/en-US/docs/Web/API/MessagePort) and [`ImageBitmap`](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap) types implement this interface.\n* **[`ArrayBuffer`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) object** is used to represent a generic, fixed-length _raw binary_ data buffer. You cannot directly manipulate its contents; instead, you create one of the [typed array objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) or a [`DataView`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView) object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.\n* **[`ImageBitmap`](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap) interface** represents a bitmap image which can be drawn to a `\u003ccanvas\u003e` without undue latency; it can be created from a variety of source objects, using the [`createImageBitmap()`](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap) factory method. `ImageBitmap` provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folange%2Flearning-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folange%2Flearning-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folange%2Flearning-javascript/lists"}