Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›4 »

MrMoo: Sep 14, 2000

It's about a page worth of code from what I've seen, haven't seen any super small versions so far.

You can pull in lodash-debounce on it's own. Polymer Debouncer is more comments than anything, but the majority of the work appears to be in their async module.

ES7 decorators maybe the way to go, a lot smaller implementation.

Otherwise for ES6, maybe this:

JavaScript code:

function debounce(func, wait) {
  let timeout
  return function(...args) {
    const context = this
    clearTimeout(timeout)
    timeout = setTimeout(() => func.apply(context, args), wait)
  }
}

MrMoo fucked around with this message at 02:40 on Jun 16, 2018

# ¿ Jun 16, 2018 02:32

Adbot: ADBOT LOVES YOU

# ¿ May 15, 2024 09:45

MrMoo: Sep 14, 2000

The problem is apparently more serious with touch devices, you can watch the Google video for details and what they have done to work around it with "passive event listeners".

https://www.youtube.com/watch?v=65VMej8n23A

https://developers.google.com/web/updates/2016/06/passive-event-listeners

LifeLynx posted:

What are lodash and debounce?

"lodash" is a gimmick name for variably curated JavaScript library of things. I guess the name derived from underscore "_" which was hip a while back.

"debounce" is an odd name with precedence in electronics about limiting the number of events received for a particular action. A specialised case of throttling. Usually throttling fires on both the leading and trailing edge of the time window, debouncing only one edge as above from necrotic. Also,

CHRIS COYIER posted:

Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds."

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

MrMoo fucked around with this message at 15:12 on Jun 16, 2018

# ¿ Jun 16, 2018 04:14

MrMoo: Sep 14, 2000

Pretty much, but then it goes into particular fields and whether credentials are permitted and things about when additional preflight requests are required. Usually browsers are nice enough they tell you what is wrong and how to fix it.

Anything with cookies and CORS is going to suck because CORS attacks usually work due to cookies.

# ¿ Jun 20, 2018 01:25

MrMoo: Sep 14, 2000

Mixing async await with Promise chains is the way to go, I don't understand when people want to go all in on just one or the other.

# ¿ Jul 13, 2018 19:49

MrMoo: Sep 14, 2000

geeves posted:

When I say forEach, I guess I should have clarified all of the array methods including map, reduce and filter. Usually if I'm using forEach I just use a regular loop given performance https://jsperf.com/fast-array-foreach

More variability here : https://jsperf.com/for-vs-foreach/293

# ¿ Jul 19, 2018 03:42

MrMoo: Sep 14, 2000

It's a bit odd as they don't include Array.reduce() which they are reimplementing.

# ¿ Jul 19, 2018 17:22

MrMoo: Sep 14, 2000

huhu posted:

Add a sleep function?

(from Google)

code:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

A slightly less awful sleep function:

JavaScript code:

// [url]https://stackoverflow.com/questions/38213668/promise-retry-design-patterns[/url]
function wait(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
}

await wait(100);

# ¿ Sep 4, 2018 14:16

MrMoo: Sep 14, 2000

Once you are in ES6/7 land you end up with a lot of empty lambda parameter functions like that. It's ugly for the most part everywhere.

JavaScript code:

wait(1000).then(() => someObj.someFunc())

It's so easy to mess this up and just insert the function call directly and have it actually work in testing then fail spectacularly in production.

JavaScript code:

wait(1000).then(someObj.someFunc())

MrMoo fucked around with this message at 17:23 on Nov 10, 2018

# ¿ Nov 10, 2018 17:15

MrMoo: Sep 14, 2000

Joda posted:

Are there any browsers except IE that haven't updated to at least ES6? Like sure, you might have to support that, but it's definitely not a general imperative as stated

Embedded hardware is still ES5 only, surprisingly all the digital signage from Samsung and LG are circa Safari 6.0 level browser tech.

# ¿ Nov 27, 2018 16:41

MrMoo: Sep 14, 2000

roomforthetuna posted:

Relatedly, has anyone here done anything with WebRTC? That's nearly as much of a clusterfuck to get going as webpack+typescript+npm. I got that working too, finally, and all it requires is like 14 messages through two server connections in order to establish one peer-to-peer connection.

Sounds like you are holding it wrong. The spec has changed a lot which is the most annoying. I have a video wall setup to render a 16K video with it.

# ¿ Jan 8, 2019 02:13

MrMoo: Sep 14, 2000

That last one looks like a TypeScript shortcut not EcmaScript, I�ve made that mistake.

# ¿ Jan 30, 2019 02:04

MrMoo: Sep 14, 2000

Kraus posted:

A friend of mine managed to bring it down to 36 characters:
code:
for(a=1,b=0;b<9e5;b=a+(a=b))print(b)
Where could there be three characters to save?

You should be able to avoid that �b=0� setup.

# ¿ Feb 2, 2019 04:39

MrMoo: Sep 14, 2000

Chenghiz posted:

There is an immutable version of moment called Luxon.

Thanks for that, I managed to update a bit of my NYSE work to now actually work in other timezones. It is rather unfortunate that neither Moment or Luxon appear to be able to provide seconds-past-the-epoch local to a timezone. I guess it's a bogus entity but it is a rather popular one.

I need to basically work in seconds-past-the-epoch in NYT anywhere in the world, but the APIs only support UTC underneath.

# ¿ Feb 11, 2019 18:22

MrMoo: Sep 14, 2000

Newf posted:

"Do not block the main thread" is a thing in javascript for the web. I assume it's also the case for an express app that handles client requests.

Is this as simple as making sure that all of the stuff I do is via methods marked async?

Easiest way to think of it is that JS has processes, via WebWorker, not threads. There is no sharing between processes and you must use message passing of some flavour. In browsers the Worker model is quite limited as you cannot spawn sub-workers outside of Firefox and worker-to-worker communication has to manually route through the main renderer thread.

# ¿ May 4, 2019 22:42

MrMoo: Sep 14, 2000

Lumpy posted:

JavaScript code:

const e = �eight�;
�Adding 4+4 is ${e}� // Adding 4+4 is ${e}
`Adding 4+4 is ${e}`  // Adding 4+4 is 8

I think your JS is broken, there is nowhere you will see "8" and not "eight".

# ¿ May 11, 2019 03:37

MrMoo: Sep 14, 2000

huhu posted:

I'm building an app where one aspect of it is that people rate pieces of content in real time. One person's rating would affect others. I'm leaning towards doing this with websockets. Does this make sense? If so, what's the deal with authenticating a websocket connection? Google is telling me lots of different things. I've already got authentication setup with JWTs and Express I'm wondering if I can reuse the JWT somehow and add it to each websocket message sent or when the connection is established. Or should I be doing something else?

Edit:

Found the snippet below on https://devcenter.heroku.com/articles/websocket-security#authentication-authorization

Would this make sense?

This depends upon your infrastructure, ideally authenticate as part of the WebSocket upgrade but it can be easier to farm that out to generic components and have authentication in the app layer instead, I.e. permit an unauthenticated state for read-only access.

# ¿ May 14, 2019 21:28

MrMoo: Sep 14, 2000

Does anyone know how to properly implement a texture atlas in modern THREE.js that uses geometry based UVs instead of hacking offset/repeat in the texture and cloning it's UUID? The latter now results in multiple texture uploads to the GPU.

I'm after a Sprite and PlaneGeometry based Mesh detail for a texture atlas and anything to do with UVs is confusing the hell out of me. I can see THREE.js examples for Minecraft have a texture atlas for BoxGeometry but that doesn't easily translate.

I've managed various messed up results, didn't save the really odd ones with trippy random dots and odd angles.

demo

It's supposed to look like this:

# ¿ Sep 25, 2019 22:56

MrMoo: Sep 14, 2000

The docs make it look worse that it needs to be. For simple key-value storage if you don't have localstorage, it is manageable. Wrapping in Promises is probably the way to go, something like this:

JavaScript code:

await open_db();
let store = get_object_store(DB_STORE, "readonly");
function wrap(request) {
        return new Promise((resolve, reject) => {
                request.onsuccess = resolve;
                request.onerror = e => {
                        console.error(e);
                        reject(e);
                };
        });
}
return wrap(store.get("settings"))

# ¿ Sep 26, 2019 21:52

MrMoo: Sep 14, 2000

I fixed it by manually testing every combination of {0, 1} UV values, :lol:

It ended up with some unused values, or at least with no effect on the output. I guess the vertex order used within THREEjs for a PlaneGeometry doesn�t match what anyone else normally uses.

WebGL is still making GBS threads it�s pants on performance though. At least the Chromium Team are pushing through daily updates for OffscreenCanvas. Performance in a WebWorker is more reliable.

I�m down to 10 GL calls a frame, I�ve been reading on how to get this down to 1, but that looks a bit tedious, grouping the meshes by material. Some of the THREEjs demos on their home page I assume do this to achieve the low GL call rate. FYI: you can debug the JavaScript and view renderer.info.render to see basic GL API stats.

MrMoo fucked around with this message at 14:45 on Oct 1, 2019

# ¿ Oct 1, 2019 14:38

MrMoo: Sep 14, 2000

The Fool posted:

Babel is kind of a requirement to do typescript and react.

That doesn�t make sense, Babel is a subset of TypeScript functionality. How else would it work? You compile TypeScript/ES9 or whatever to ES6 then transpile to ES5 in Babel?

# ¿ Oct 3, 2019 15:56

MrMoo: Sep 14, 2000

Thermopyle posted:

TS doesn't handle transpiling such features, babel does.

Technically Babel doesn�t either, they just ship a pack of polyfills. You can use those with ES5 targeted TypeScript output.

I use Babel and TypeScript for different projects, certainly not together as a pipeline.

# ¿ Oct 3, 2019 21:52

MrMoo: Sep 14, 2000

Babel-polyfill is a package in NPM for general ES6 polyfills for ES5, �Babel� itself is the transpiler.

You should realize webdev is a dump and the same name is used all over the place.

# ¿ Oct 4, 2019 02:12

MrMoo: Sep 14, 2000

I is dumb, no problem. I'm not a webdev so I only pick up changes from this thread.

It looks like Babel supports TypeScript now? Just to be even more confusing, and an odd situation.

https://babeljs.io/docs/en/next/babel-preset-typescript.html

# ¿ Oct 4, 2019 21:08

MrMoo: Sep 14, 2000

~~Anybody know why Chrome fails miserably when trying to profile a page with a SharedWorker?~~

Ha, my magical code destroys the profiler, fixed something else and now it actually works. Awesome.

MrMoo fucked around with this message at 20:32 on Nov 19, 2019

# ¿ Nov 19, 2019 19:56

MrMoo: Sep 14, 2000

Wikipedia has a nice summary of changes,

https://en.m.wikipedia.org/wiki/ECMAScript

Like ECMAScript 10 provides Object.fromEntries that you can use to convert a Map to an Object. Had to use that the other day. Versions 7 through 8 have important Promise and async await features.

# ¿ Nov 20, 2019 18:26

MrMoo: Sep 14, 2000

YouTube was rewritten for Polymer v1 a while ago, that includes shadow DOM. They should be moving onto LitHtml for webcomponents. It�s definitely not an extensive deployment of the tech though.

# ¿ Jan 5, 2020 17:07

MrMoo: Sep 14, 2000

I think Polymer v1 uses Shady DOM to simulate a Shadow DOM, so basically expect things to get more inconvenient.

https://www.polymer-project.org/blog/shadydom

# ¿ Jan 5, 2020 19:24

MrMoo: Sep 14, 2000

The obvious one is number-to-text in npm, did you try that?

idk, this stackoverflow just updated with an answer and a new package too: https://stackoverflow.com/questions/14766951/convert-digits-into-words-with-javascript

MrMoo fucked around with this message at 16:31 on May 12, 2020

# ¿ May 12, 2020 16:29

MrMoo: Sep 14, 2000

That's some confusing and ugly boilerplate. I've got used to the webcomponent angle,

JavaScript code:

class PosElement extends LitElement {
  render() {
    return html`<button @click=${e => this.count++}>You clicked me ${this.count} times.</button>`;
  }
  constructor() {
    super();
    this.count = 0;
  }
};

# ¿ Jun 27, 2020 02:41

MrMoo: Sep 14, 2000

Roadie posted:

...and while the hooks version is better for general class-lifecycle-management-causes-a-lot-of-pain-in-the-long-run-that-takes-too-long-to-explain-to-fit-into-this-margin reasons, the class-based React version is still better than the WebComponents equivalent because you can't do type-checking and all that stuff on a template string using existing tooling.

I think that�s what Typescript brings, for which LitHtml has full support for.

# ¿ Jun 27, 2020 14:28

MrMoo: Sep 14, 2000

Anyone with a positive experience with JS physics engines? They all seem to be abandoned for multiple years and various levels of cruft. The most egregious issue appears to be wanting to be the dominant API for everything instead of integrating into third party 3D engines when necessary.

I was after a basic swinging hinge dynamic, and the one engine I found not overly terrible, completely broke when changing basic parameters such as size of the objects. Actually kind of impressive how it could be so bad.

# ¿ Aug 12, 2020 16:50

MrMoo: Sep 14, 2000

The idea was to start with something basic and expand as necessary on other projects. Being a sledgehammer was expected.

# ¿ Aug 13, 2020 17:25

MrMoo: Sep 14, 2000

Of note Promise.all() was optimized a while back to actually run in part parallel giving boost over standard chaining.

I love abusing the Promise.then() syntax and ignoring the catch(). The chome :chome:

developers do not agree and love flagging warnings and errors. Kind of silly to force a .catch(e => { throw e; }) when trivial re-throwing was popularly frowned upon. Also a bit rear end that the throw has to be in a block.

# ¿ Sep 13, 2020 19:53

MrMoo: Sep 14, 2000

Randomly copying a console output example:

code:

 node:4796) UnhandledPromiseRejectionWarning: Unhandled promise rejection (r                                                                                               ejection id: 1): Error: spawn cmd ENOENT
[1] (node:4796) DeprecationWarning: Unhandled promise rejections are deprecated.
In the future, promise rejections that are not handled will terminate the Node.
js process with a non-zero exit code.

You need a rethrow for the above, or at least do something.

# ¿ Sep 13, 2020 21:52

MrMoo: Sep 14, 2000

You�ll have to find a �web scale� SQL server, I�m sure there are some out there.

In NoSQL land it�s trivial for access, especially for things like CouchDB where the index can itself be written in JavaScript.

# ¿ Nov 1, 2020 02:53

MrMoo: Sep 14, 2000

A lot of webapis are written by totally incompetent developers such that they do not process etags or If-Modified-Since headers, so it can quite frequently be a good idea. However note in modern practice you should write the app to not care and control the caching more in a service worker. If you can try and use the semantics of offline-first, i.e. serving from cache then running a refresh request in the background. Note Cache is a thing already in browser world.

# ¿ Nov 24, 2020 17:27

MrMoo: Sep 14, 2000

I'll just dump this here because :lol:

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

# ¿ Nov 24, 2020 22:02

MrMoo: Sep 14, 2000

Is the Content-Type one of the form submission ones? Try doing the same POST with just a vanilla <form></form>.

# ¿ Jan 29, 2021 16:12

MrMoo: Sep 14, 2000

I found v8 maxes out at 8GB (per the :chome:

Task Manager), even on a 16GB host.

There�s a case about it somewhere, don�t have the link to hand.

MrMoo fucked around with this message at 04:27 on Feb 12, 2021

# ¿ Feb 11, 2021 02:27

Adbot: ADBOT LOVES YOU

# ¿ May 15, 2024 09:45

MrMoo: Sep 14, 2000

I have a 800GB webpage with THREE.js, so I have all the fun. The 1.7Gb limit above is out of date, however Google will show you it a lot with NodeJS.

# ¿ Feb 11, 2021 15:25

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›4 »