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.

«‹›277 »

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Roadies suggestion of adding a property to the anonymous function did indeed solve the problem. And thank you for that. This was a weird situation but it seems to work now. Thank you all so much and sorry for the rabbit hole this caused.

# ? Sep 20, 2017 19:34

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 07:37

Ranzear: Jul 25, 2013

Just sounded like it leaned a bit toward my approach. Duck types passed into static functions is my personal pattern, which then does fun stuff like allowing multiple useful types per object and perfect de/serialization. It works really well in javascript and I've thought to formalize it further by namespacing the properties of an object by the added class.

# ? Sep 20, 2017 20:16

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

wait....typescript is like super easy to pickup. Why have I not been using this before?

# ? Sep 20, 2017 20:49

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Ranzear posted:

Just sounded like it leaned a bit toward my approach. Duck types passed into static functions is my personal pattern, which then does fun stuff like allowing multiple useful types per object and perfect de/serialization. It works really well in javascript and I've thought to formalize it further by namespacing the properties of an object by the added class.

I'm afraid I don't completely understand. Can you provide an example?

# ? Sep 20, 2017 20:56

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

The Dark Wind posted:

This is why you can do things as delightfully weird as
JavaScript code:
let foo = [];
foo[1.618] = "gently caress";
foo[1.618]; // "gently caress"

Yeah the whole object property access by string(coerced in your case) trick also makes it pretty convenient to write a Trie data structure

# ? Sep 20, 2017 21:57

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Grump posted:

wait....typescript is like super easy to pickup. Why have I not been using this before?

No idea... I've been banging on about it here for 3 years now... I assume it is because you enjoy suffering.

# ? Sep 20, 2017 22:57

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Is Flow like TypeScript without the need to define interfaces and types for everything? I basically want ES6 with something like React's propTypes in a vanilla ES6 setup but TypeScript feels like such overkill for anything smaller than a full-blown SPA.

# ? Sep 20, 2017 23:21

Kekekela: Oct 28, 2004

IAmKale posted:

Is Flow like TypeScript without the need to define interfaces and types for everything? I basically want ES6 with something like React's propTypes in a vanilla ES6 setup but TypeScript feels like such overkill for anything smaller than a full-blown SPA.

I haven't used TS but as I understand it yeah. In flow, you only need to set up annotations if you put the @flow directive at the top of the page.

# ? Sep 21, 2017 00:14

Dominoes: Sep 20, 2007

It's optional in TS too: Don't specify a type, and don't use the noImplicitAny compiler flag in tsconfig.

# ? Sep 21, 2017 00:30

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

IAmKale posted:

Is Flow like TypeScript without the need to define interfaces and types for everything? I basically want ES6 with something like React's propTypes in a vanilla ES6 setup but TypeScript feels like such overkill for anything smaller than a full-blown SPA.

You don't have to define any types or interfaces with TS.

# ? Sep 21, 2017 00:41

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Thermopyle posted:

You don't have to define any types or interfaces with TS.

But then, what's the use other than being able to use some es6 sugar like ()=> ?

# ? Sep 21, 2017 07:23

'ST: Jul 24, 2003; "The world has nothing to fear from military ambition in our Government."

The point is that you can gradually add typing information with both Flow and TypeScript. You don't need to annotate your entire project in one fell swoop, nor do you even need to annotate everything in a single module. I've been pleasantly surprised at how easy it is to integrate both of these systems into existing projects. Add annotations to one function you're refactoring/fixing, add annotations to the places where you're calling it, and so on.

# ? Sep 21, 2017 11:54

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Bruegels Fuckbooks posted:

But then, what's the use other than being able to use some es6 sugar like ()=> ?

Even if you don't add types, any d.ts files you are using will give you types and you get a lot of useful type inference and intellisense. And if one day you realize adding types helps, you may, at your leisure.

# ? Sep 21, 2017 16:43

Ranzear: Jul 25, 2013

Knifegrab posted:

I'm afraid I don't completely understand. Can you provide an example?

It wasn't too relevant, just that your functions sounded duck-typed and you just needed to label them that way. I yammerd about my pattern a bit in the horrors thread because that's where it belongs.

Short version though, since Tanks Game doesn't quite implement it all and Boats Game doesn't have any web-facing code yet:

Suppose you have a Tank and a Missile. Both have sight radiuses and both can move forward and steer and collide. Nominative types would have a Tank type and a Missile type and they'd both inherit from some other class that implements seeing and moving/colliding and references the functions for these on each object and each object's type overrides these as necessary (missile can only move forwards, etc).

What my pattern does instead is keep them plain data objects (no references, nothing to rebuild on deserializing) and classes are more like mutations and a set of static functions. Both the missile and the tank have the 'sight' type, which adds a sight radius property that is set by passing the object and a value into the class mutator for Sight. When I iterate through game objects (this part is a little up in the air still, it has several passes), I see that it has the sight type and call Sight.update(~) with the object as the first argument. Because the object is duck-typed to have sight properties, it has everything it needs to be added to the broadphase pass for sight radiuses and pass seen things to its controller. The same happens for movement and collision, a Mover class with their movement and turning speeds, and a collision class that gives them collision shape properties and makes them get picked up for collision broadphase.

The idea is you can just look at an objects types and call Type.update(object) for each, grouping types into passes by the order they need to be updated for a full game step.

An important bit to note is that a function like Sight.update(~) can be entirely different between Server and Client, such as extra code for seeing cloaked units and such. Because the objects are without any references I can do an awful lot of just shoving them through a websocket and they Just Work� at the other end. I do a lot of strong client simulation and sever-side vision, so consistent and complete game objects that I can hide or unhide from a client are important.

I guess they're more like hybrid types: They're duck-typed for passing into static functions by that type, but use multiple nominatives for checking whether they can and should be passed into those functions. There's no inheritance or hierarchy to check though.

Ranzear fucked around with this message at 18:42 on Sep 21, 2017

# ? Sep 21, 2017 18:30

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Ahh I see thanks for the explanation!

Alright guys I have another zany and stupid problem. We hook into ajax's beforeSend option to handle some csrf and what not token insertion.

In another part of the product I need to hook into beforeSend to do some other magic mumbo jumbo. The problem is, while these two components typically exist together, they cannot and will not interact. And I've found that if I set beforeSend in my component, it overrides the old function and we lose our csrf token.

I have google'd and google'd but I cannot seem to find a way to access what ajax's global "beforeSend" function was. If I could I would just grab it, and set my new function which also calls the old function as well.

So does anyone know a way to solve this intelligently?

# ? Sep 21, 2017 18:39

Ranzear: Jul 25, 2013

code:

let foo.hookBeforeSend = foo.beforeSend;

foo.beforeSend = function(bar) {
	// stuff
	foo.hookBeforeSend(bar);
}

Nevermind, I see you thought of that, and it's finding the beforeSend to hook that's the problem.

This is a JQuery thing, isn't it?

code:

 $.ajaxSetup({
            beforeSend: function(xhr, settings)
~

I see that in places.

Ranzear fucked around with this message at 18:48 on Sep 21, 2017

# ? Sep 21, 2017 18:45

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Ranzear posted:

code:
let foo.hookBeforeSend = foo.beforeSend;

foo.beforeSend = function(bar) {
	// stuff
	foo.hookBeforeSend(bar);
}
Nevermind, I see you thought of that, and it's finding the beforeSend to hook that's the problem.

This is a JQuery thing, isn't it?
code:
 $.ajaxSetup({
            beforeSend: function(xhr, settings)
~
I see that in places.

Yeah that is how you setup beforeSend, but I was hoping to figure out how to access Beforesend.

But the good news is since I don't need to modify the headers or do anything with the request but instead just monitor that a request is taking place I was able to accomplish this by binding to the gloabl every ajaxSend and ajaxComplete:

code:


$(document).ajaxSend((e, jqXHR, settings) => {
      //do my thing
})
$(document).ajaxComplete((e, jqXHR, settings) => {
     //cleanup
}

# ? Sep 21, 2017 19:05

Roadie: Jun 30, 2013

Are there any decorator gurus around? I've got a thing like this:

code:

/**
 * derives from otherValue
 */
get occasionallyChanges() {
  if (this._occasionallyChanges && this.otherValue.equals(this._lastOtherValue)) {
    return this._occasionallyChanges
  }

  this._lastOtherValue = this.otherValue
  // compute based on otherValue
  this._occasionallyChanges = ...

  return this._occasionallyChanges
}

and I want to turn it into a thing like this:

code:

// Use otherValue as a key for memoized value
@memoize(function() {
  return this.otherValue
})
get occasionallyChanges() {
  // compute based on otherValue
  return ...
}

but I don't know how, or even indeed if it's possible, to get the object instance context inside the decorator function so I bind it for this or use whatever other workaround.

Roadie fucked around with this message at 02:34 on Sep 23, 2017

# ? Sep 23, 2017 02:29

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

gmq posted:

Apparently CoffeeScript refused to die honorably.

Does this work as an alternative to `decaffeinate`, so that I can get rid of all this coffeescript?

# ? Sep 23, 2017 18:07

huhu: Feb 24, 2006

Does anyone have any suggestions for mixing OAuth2 with React/Redux?

My quick Google search turns up https://github.com/lynndylanhurley/redux-auth which seems to be well maintained.

# ? Sep 24, 2017 02:41

Odette: Mar 19, 2011

Nolgthorn posted:

Does this work as an alternative to `decaffeinate`, so that I can get rid of all this coffeescript?

code:

$ npm install rimraf
$ npx rimraf src

# ? Sep 24, 2017 05:18

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

That worked thanks.

# ? Sep 24, 2017 09:22

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

So a week ago I said typescript was awesome, but i tried integrating it into my react project and was ready to pull my hair out.

So many errors that I wasn't understanding and there isn't really good tutorials for React Typescript, or at least I wasn't finding any

Like I tried doing this:

code:

props.searchResults.map((element: {}, index: number) => <li key={element.id}></li>)

and i got an error that said "property id does not exist on type {}"

teen phone cutie fucked around with this message at 01:30 on Sep 25, 2017

# ? Sep 24, 2017 23:55

necrotic: Aug 2, 2005; I owe my brother big time for this!

# ? Sep 25, 2017 03:21

lunar detritus: May 6, 2009

Grump posted:

So a week ago I said typescript was awesome, but i tried integrating it into my react project and was ready to pull my hair out.

So many errors that I wasn't understanding and there isn't really good tutorials for React Typescript, or at least I wasn't finding any

Like I tried doing this:
code:
props.searchResults.map((element: {}, index: number) => <li key={element.id}></li>)
and i got an error that said "property id does not exist on type {}"

That got discussed last page but the short answer is that by using {} you're telling typescript that element is an empty object.

# ? Sep 25, 2017 03:25

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Grump posted:

So a week ago I said typescript was awesome, but i tried integrating it into my react project and was ready to pull my hair out.

So many errors that I wasn't understanding and there isn't really good tutorials for React Typescript, or at least I wasn't finding any

Like I tried doing this:
code:
props.searchResults.map((element: {}, index: number) => <li key={element.id}></li>)
and i got an error that said "property id does not exist on type {}"

Use <any> or <object>

# ? Sep 25, 2017 05:35

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

ah that makes sense.

Also, does anyone use code formatters for .tsx files in VSCode? I have Beautify and React Beautify, but they both format the code really badly, despite me having typescript turned on in Beautify

teen phone cutie fucked around with this message at 10:52 on Sep 25, 2017

# ? Sep 25, 2017 10:42

Dominoes: Sep 20, 2007

Grump posted:

So a week ago I said typescript was awesome, but i tried integrating it into my react project and was ready to pull my hair out.

So many errors that I wasn't understanding and there isn't really good tutorials for React Typescript, or at least I wasn't finding any

Like I tried doing this:
code:
props.searchResults.map((element: {}, index: number) => <li key={element.id}></li>)
and i got an error that said "property id does not exist on type {}"

Typescript's a pain when dealing with DOM elements. Like skand said, I'd just <any> them. Make sure you have noImplicityAny = false in your config.

# ? Sep 25, 2017 16:30

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

DOM elements are a pain, but I found it useful to learn how to type them if only because it helped me understand DOM elements, React's pseudo elements, and typescript a lot better.

# ? Sep 25, 2017 16:59

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Roadie posted:

Are there any decorator gurus around? I've got a thing like this:
code:
/**
 * derives from otherValue
 */
get occasionallyChanges() {
  if (this._occasionallyChanges && this.otherValue.equals(this._lastOtherValue)) {
    return this._occasionallyChanges
  }

  this._lastOtherValue = this.otherValue
  // compute based on otherValue
  this._occasionallyChanges = ...

  return this._occasionallyChanges
}
and I want to turn it into a thing like this:
code:
// Use otherValue as a key for memoized value
@memoize(function() {
  return this.otherValue
})
get occasionallyChanges() {
  // compute based on otherValue
  return ...
}
but I don't know how, or even indeed if it's possible, to get the object instance context inside the decorator function so I bind it for this or use whatever other workaround.

Decorators get the target, key and descriptor passed in, in that order, so you should be able to hit target.otherValue (or occasionallyChanges? I'm not clear on that from your description) from inside the decorator. You'd probably want to generalize that in a decorator factory that takes the property name as a string.

# ? Sep 25, 2017 17:29

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Skandranon posted:

Use <any> or <object>

So <object> didn't work but <any> did :jerry:

# ? Sep 26, 2017 00:03

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

Grump posted:

So <object> didn't work but <any> did

...because any means it could be anything. You're looking for something like this: {[key:string]: any}.

# ? Sep 26, 2017 00:28

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

How is { [key: string]: any } different from { [giraffe: string]: any }?

# ? Sep 26, 2017 00:42

Sedro: Dec 31, 2008

Nolgthorn posted:

How is { [key: string]: any } different from { [giraffe: string]: any }?

It makes no difference besides documentation. It's like `function f(key: string): any` vs `function f(giraffe: string): any`.

# ? Sep 26, 2017 01:09

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Sedro posted:

It makes no difference besides documentation. It's like `function f(key: string): any` vs `function f(giraffe: string): any`.

I think it's even LESS functional than that. You are able to extract that giraffe parameter name at runtime, you will never get that name from a TypeScript interface at runtime. Purely decoration.

# ? Sep 26, 2017 01:11

Sedro: Dec 31, 2008

Skandranon posted:

I think it's even LESS functional than that. You are able to extract that giraffe parameter name at runtime, you will never get that name from a TypeScript interface at runtime. Purely decoration.

That's true. I like to pretend that reflecting over function arguments isn't even possible

# ? Sep 26, 2017 01:21

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

I'm making a Turtle drawing environment in typescript, which is going to be used by kids from grades 6-8 under my guidance. Is tween.js still the go to js library for animating things?

Any suggestions on a strategy for:

- making turtles complete their animated movements sequentially. eg:

JavaScript code:

let t = new Turtle();
t.move(100);
t.turnLeft(1/4); // this code shouldn't execute until the previous movement has finished
t.move(100);

- allowing for [named?] families of turtles to move simultaneously. As an example, I'd like to be able to recreate the effect of this nice tree by making each recursive generation a group that can co-move.

My current idea is that each movement command from a turtle (with a pen down) throws some object which describes the animation request into a singleton that manages a queue of them according to... rules.

Maybe animating commands can return some control type object?

JavaScript code:

let t = new Turtle();
let politeTurtle = new Turtle();

t.move(100);
t.turnLeft(1/4);
let tFinished = t.move(100);

politeTurtle.move(45).after(tFinished);

# ? Sep 26, 2017 06:39

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Newf posted:

I'm making a Turtle drawing environment in typescript, which is going to be used by kids from grades 6-8 under my guidance. Is tween.js still the go to js library for animating things?

Any suggestions on a strategy for:

- making turtles complete their animated movements sequentially. eg:

- allowing for [named?] families of turtles to move simultaneously. As an example, I'd like to be able to recreate the effect of this nice tree by making each recursive generation a group that can co-move.

My current idea is that each movement command from a turtle (with a pen down) throws some object which describes the animation request into a singleton that manages a queue of them according to... rules.

So, having all move operations return the Turtle object itself allows for easy chaining of movement, and is a good idea. Doesn't need to be a special one.

For your grouping idea, you could just define a group as an array of Turtles. JavaScript already makes it pretty easy to execute functions across an array. You could even write some static function wrappers if you want to make a nicer API, but it's probably a better lesson if they just learn to work with groups.

code:

let turtles = [ new Turtle(), new Turtle() ];
_.forEach( turtles, t => t.move(100) );

# ? Sep 26, 2017 17:23

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I have a react module that isn't being recognized in my typescript project and it's telling me to install "@types/my_module" or declare it in the d.ts file.

It doesn't look like I can run @types/my_module.

I get that d.ts is a declaration file and after looking through the typescript docs, I kinda get what it is, but how do i write one and in which directory does it go? Do i have seperate declaration files for each module or one file for everything?

# ? Sep 26, 2017 23:29

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 07:37

Dogcow: Jun 21, 2005

Grump posted:

I have a react module that isn't being recognized in my typescript project and it's telling me to install "@types/my_module" or declare it in the d.ts file.

It doesn't look like I can run @types/my_module.

I get that d.ts is a declaration file and after looking through the typescript docs, I kinda get what it is, but how do i write one and in which directory does it go? Do i have seperate declaration files for each module or one file for everything?

"my_module" is something you wrote or an NPM package? If it's an NPM package of any popularity it probably has a typings module, search the NPM index for them with "@types/my_module" and install with NPM etc. If it's your own module yeah you have to write a module.d.ts file for it. I think if it's a functional React component (just a pure function returns React DOM) you could probably just write a simple function signature for it that includes the props and children (typed to the right React DOM element)?

# ? Sep 27, 2017 00:56

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

«‹›277 »