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 »

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

geeves posted:

I made a change last night and forgot to edit it in.

Remove the 'seen" classes. It's the only way I could remove the background in the inspector.

code:

             document.querySelectorAll('tr.seen, tr.seen1, tr.seen2').forEach(function (el) {
                    el.classList.remove("seen");
                    el.classList.remove("seen1");
                    el.classList.remove("seen2");
                    el.style.backgroundColor = '#fff';
                    el.style.backgroundImage = 'none';
                    el.style.backgroundRepeat = 'none';
                });

Awww, yes. That does it, and I can add a slightly transparent color for the style. Thank you. I think all I need to worry about there is "seen". Not sure what seen1 or 2 is.

Code:

code:


(function() {
    'use strict';
    window.onload = function() {
        $('div.threadbar.top, div.threadbar.bottom, div.forumbar, #forum, #filter').css({
            'background-image': 'linear-gradient(to bottom, red 0%, blue 100%)',
            'background-origin': 'border-box',
            'border-spacing': '1px',
            'border': '1px solid transparent'
        });
        document.querySelectorAll('tr.seen').forEach(function (el) {
            el.classList.remove("seen");
            el.style.backgroundColor = 'rgba(0,0,0,.5)';
        });
    };
})();

# ? Jul 13, 2017 16:54

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 07:41

porksmash: Sep 30, 2008

Roadie posted:

It sounds like you've got two different versions of npm 5.0.x. They're still fiddling with the fine details of the package-lock.json format.

That was it! Much better now, thanks.

# ? Jul 13, 2017 21:47

huhu: Feb 24, 2006

For React, where is the balance in terms of deciding if HTML should go in a component.js file or in an html file?

# ? Jul 15, 2017 20:15

The Fool: Oct 16, 2003

Apart from the boiler plate html needed to load react, everything should be components

# ? Jul 15, 2017 20:24

huhu: Feb 24, 2006

The Fool posted:

Apart from the boiler plate html needed to load react, everything should be components

Great thanks.

New question. What am I missing here? (Might have spent way too much working on this today)

code:

	render(){ 
		let photo = this.state.photos[0];
		console.log(photo);
		return (
			<div className = "container">
				<div className = "row">
					<div className = "col-xs-4">
						<DirectionalTile/>
					</div>
				</div>
			</div>
		);
	}

console.log() shows:

code:

Object {id: "22898704631", owner: "126568985@N04", secret: "a35e7020b0", server: "736", farm: 1�}

Changing the following:

code:

let photo = this.state.photos[0].id;

Results in

code:

Uncaught TypeError: Cannot read property 'id' of undefined

# ? Jul 15, 2017 22:52

Dogcow: Jun 21, 2005

huhu posted:

Great thanks.

New question. What am I missing here? (Might have spent way too much working on this today)

code:


	render(){ 
		let photo = this.state.photos[0];
		console.log(photo);
		return (
			<div className = "container">
				<div className = "row">
					<div className = "col-xs-4">
						<DirectionalTile/>
					</div>
				</div>
			</div>
		);
	}

console.log() shows:

code:


Object {id: "22898704631", owner: "126568985@N04", secret: "a35e7020b0", server: "736", farm: 1�}

Changing the following:

code:


let photo = this.state.photos[0].id;

Results in

code:


Uncaught TypeError: Cannot read property 'id' of undefined

You're almost certainly getting that from the component rendering before your photos array is set in the state. Unless you are setting the photos array in your actual constructor the render method will be called before your state has that data.

# ? Jul 15, 2017 23:15

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

When using state, you want to set an initial state in your constructor.

code:

class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = { photos: [...etc...] };
    }
}

# ? Jul 16, 2017 14:27

huhu: Feb 24, 2006

Thanks for the replies.

New question. Is this article really the bare minimum to get Google Maps working with React? https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/ It feels like overkill. I'm trying to learn React with a project idea and I'm feeling no benefit yet of using it. I could probably build out my entire idea in plain JS/HTML/CSS with less code than that demo.

# ? Jul 19, 2017 00:39

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

Well, it looks like you can just install that package and use the Map component. The linked article is describing how he built it and a usage scenario.

For really simple stuff React can definitely be overkill, but the usage of that component doesn't seem bad at all.

edit: Additionally, it can be more complex or painful to integrate with 3rd party libraries as React then "loses control" unless you build it right.

# ? Jul 19, 2017 02:31

Roadie: Jun 30, 2013

huhu posted:

Thanks for the replies.

New question. Is this article really the bare minimum to get Google Maps working with React? https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/ It feels like overkill. I'm trying to learn React with a project idea and I'm feeling no benefit yet of using it. I could probably build out my entire idea in plain JS/HTML/CSS with less code than that demo.

Keep in mind that a bunch of that article is just walking back and forth across the same things to incrementally add new features, and then 90% of what's actually built out is to make a super generic Google Maps component meant to be reused in any project you ever make rather than a one-off with specific uses.

# ? Jul 20, 2017 01:33

Vesi: Jan 12, 2005; pikachu looking at?

Also depending on use case google maps licensing terms and costs can get complicated, consider using openlayers or leaflet if openstreetmap is good enough for you.

# ? Jul 20, 2017 18:21

huhu: Feb 24, 2006

Keeping the thread moving...

I've been scratching my head for like an hour now. I have a method setLocation which I pass to the component <Search />. Search.js takes that function in and calls it inside searchSubmit() which results in "bundle.js:34004 Uncaught TypeError: Cannot read property 'props' of null".

index.js

code:

import React from "react";
import { render } from "react-dom";
import axios from 'axios';

import { CenterTile } from "./components/CenterTile"
import { DirectionalTile } from "./components/DirectionalTile"
import Search from "./components/Search"

class App extends React.Component {
	// render() returns what needs to be rendered
	// jsx renders JavaScript that then writes the html out
	constructor(props){
		super(props);
		this.state = {
			"freshLoad": true,
			"location" : ""
		}
	}

	setLocation(location){
		console.log("setLocation called");
		this.setState( {
			"location": location,
			"freshLoad": false
		});

	}

	
	render(){ 
		return (
			<div className = "index">
				{!this.state.freshLoad &&
					<div>
						<div className = "leftContainer" style = {leftContainerStyle}>
							<div className = "imgsContainer" style = {imgsContainerStyle}>
								<div className = "img-row" style={imgRow}>
									<DirectionalTile />
									<DirectionalTile />
									<DirectionalTile />							
								</div>
								<div className = "img-row" style={imgRow}>
									<DirectionalTile />
									<CenterTile />
									<DirectionalTile />							
								</div>
								<div className = "img-row" style={imgRow}>
									<DirectionalTile />
									<DirectionalTile />
									<DirectionalTile />							
								</div>
							</div>
						</div>
						<div className = "rightContainer" style = {rightContainerStyle}>
							<h1>{this.state.location}</h1>
						</div>
					</div>
				} 
				{ this.state.freshLoad &&
					<Search setLocation = {this.setLocation.bind(this)} hello = {"Hello"}/>
				}
			</div>
		);
	} 
}

render(<App />, window.document.getElementById("app")); // How it should be rendered

Search.js

code:

import React from 'react';

export class Search extends React.Component {
    constructor(props){
        super(props);
    }

    searchSubmit(e){
        console.log("Character Change");
        if (e.key === 'Enter') {
            this.props.setLocation(e.target.value);
        }
    }

    render(){
        return(
            <div className = "Search" style = {searchStyle}>
                <label>Where would you like to go?</label><br />
                <input name = "welcomePrompt" id="welcomePrompt" style = {inputStyle} onKeyUp= {this.searchSubmit } />
            </div>
        );
    }
}

# ? Jul 21, 2017 20:36

reversefungi: Nov 27, 2003; Master of the high hat!

Try binding this inside your constructor function instead? Or using arrow syntax, which create-react-app supports inside of classes if you're using that. Maybe that'll help.

Edit: Actually I think what's happening is that, since you haven't bound "this" inside of searchSubmit, it's creating a whole new execution context inside of searchSubmit. Try binding this for searchSubmit and it should work.

code:

import React from 'react';

export class Search extends React.Component {
    constructor(props){
        super(props);
        this.searchSubmit = this.searchSubmit.bind(this);
    }

    searchSubmit(e){
        console.log("Character Change");
        if (e.key === 'Enter') {
            this.props.setLocation(e.target.value);
        }
    }

    render(){
        return(
            <div className = "Search" style = {searchStyle}>
                <label>Where would you like to go?</label><br />
                <input name = "welcomePrompt" id="welcomePrompt" style = {inputStyle} onKeyUp= {this.searchSubmit } />
            </div>
        );
    }
}

reversefungi fucked around with this message at 20:52 on Jul 21, 2017

# ? Jul 21, 2017 20:40

Dogcow: Jun 21, 2005

The Dark Wind posted:

Try binding this inside your constructor function instead? Or using arrow syntax, which create-react-app supports inside of classes if you're using that. Maybe that'll help.

Yeah this is the problem, just to be a bit clearer it's searchSubmit that has no bound 'this', so you need your constructor to do the binding:

code:


export class Search extends React.Component {
    constructor(props){
        super(props);
        this.searchSubmit = this.searchSubmit.bind(this);
    }

Or use the class arrow functions as mentioned.

# ? Jul 21, 2017 20:50

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

Any suggestions on a library or approach to doing some simple midi / audio work inside a typescript project? Midi.js exists, but it predates modern module formats. Specific goals are to produce audio for exercises like those at http://www.musictheory.net/exercises.

# ? Jul 29, 2017 08:27

salisbury shake: Dec 27, 2011

I'm a backend guy looking to learn React plus whatever the 2017 Javascript and front-end development stack looks like. I'm also trying to familiarize myself with front-end development and productivity tools.

Can anyone link me to any primers or resources on the above?

# ? Jul 29, 2017 18:58

zombienietzsche: Dec 9, 2003

If your JavaScript chops aren't already up to snuff I'd recommend starting by reading JavaScript : The Good Parts.

Then I really benefited from this tutorial series for learning react and redux:
https://learnredux.com/

# ? Jul 29, 2017 19:20

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

Newf posted:

Any suggestions on a library or approach to doing some simple midi / audio work inside a typescript project? Midi.js exists, but it predates modern module formats. Specific goals are to produce audio for exercises like those at http://www.musictheory.net/exercises.

I used tone.js a long time ago for a small project. It was pretty sweet

# ? Jul 29, 2017 19:51

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

Grump posted:

I used tone.js a long time ago for a small project. It was pretty sweet

This looks like it's going to fit the bill, and also will provide me the chance to write my first .d.ts wrapper. Thanks!

# ? Jul 30, 2017 19:40

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

salisbury shake posted:

I'm a backend guy looking to learn React plus whatever the 2017 Javascript and front-end development stack looks like. I'm also trying to familiarize myself with front-end development and productivity tools.

Can anyone link me to any primers or resources on the above?

Also look at create-react-app for starting a react project. It removes a lot of the overhead of figuring out babel/webpack first off.

# ? Jul 30, 2017 19:43

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

necrotic posted:

Also look at create-react-app for starting a react project. It removes a lot of the overhead of figuring out babel/webpack first off.

This. It just works, and 98% of the time it keeps just working as you add stuff.

# ? Jul 30, 2017 21:51

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

I'm using JavaScript and a canvas element that uses saves and restores for contexts. Works fine, but if I leave it on over night, it starts erroring like crazy that it can't find a matching save to a restore. There is a timer that updates a blinking cursor, but since it takes hours to get there, it's hard to debug. Any common issue to cause this?

# ? Aug 4, 2017 16:50

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

LP0 ON FIRE posted:

I'm using JavaScript and a canvas element that uses saves and restores for contexts. Works fine, but if I leave it on over night, it starts erroring like crazy that it can't find a matching save to a restore. There is a timer that updates a blinking cursor, but since it takes hours to get there, it's hard to debug. Any common issue to cause this?

I would speculate you've got some sort of memory leak and the browser is having a harder and harder time allocating memory. Or you don't have just 1 timer, but 1, then 2, then 3, then 4, etc, and after 8 hours you have 2000 timers running.

# ? Aug 4, 2017 17:04

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

Skandranon posted:

I would speculate you've got some sort of memory leak and the browser is having a harder and harder time allocating memory. Or you don't have just 1 timer, but 1, then 2, then 3, then 4, etc, and after 8 hours you have 2000 timers running.

Could be. I should see if I can keep track of context save and restores too to check if something weird is going on there too.

# ? Aug 4, 2017 17:33

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

I found this video interesting.

Guy finds a site selling a way to create popunder windows for Chrome and he reverse engineers how it works from their demo page.

https://www.youtube.com/watch?v=8UqHCrGdxOM

# ? Aug 4, 2017 19:03

huhu: Feb 24, 2006

My fun discovery of the week

code:

"1" + 1 
// "11"
"1" - 1
// 0

# ? Aug 4, 2017 22:06

The Fool: Oct 16, 2003

This is why people recommend typescript.

# ? Aug 4, 2017 22:12

Dogcow: Jun 21, 2005

huhu posted:

My fun discovery of the week
code:
"1" + 1 
// "11"
"1" - 1
// 0

I suppose this is obvious but to anyone else learning JS: the plus sign operator defaults to string concatenation when any of the operands are strings whereas minus sign operator just coerces the string to a number if possible. Yeah it's confusing and dumb and a good reason to use Typescript. Also you can set up ESLint to ensure use of ES6 template literals instead of string concatenation, which you should.

# ? Aug 4, 2017 22:53

ROFLburger: Jan 12, 2006

Thermopyle posted:

I found this video interesting.

Guy finds a site selling a way to create popunder windows for Chrome and he reverse engineers how it works from their demo page.

https://www.youtube.com/watch?v=8UqHCrGdxOM

Wow, good find. That whole channel looks interesting.

# ? Aug 4, 2017 23:11

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

Dogcow posted:

I suppose this is obvious but to anyone else learning JS: the plus sign operator defaults to string concatenation when any of the operands are strings whereas minus sign operator just coerces the string to a number if possible. Yeah it's confusing and dumb and a good reason to use Typescript. Also you can set up ESLint to ensure use of ES6 template literals instead of string concatenation, which you should.

Huh, I had assumed it only concatenated if the left side of the plus was a string because of all of the defensive empty strings I've seen in other peoples' code. I just to toString if I'm not sure - probably because I did Java first.

# ? Aug 7, 2017 18:18

qntm: Jun 17, 2009

JavaScript code:

'use strict';

const stream = require('stream')

let output = ""

const s = new stream.Transform({
	transform(chunk, _encoding, callback) {
		callback(null, chunk);
	}
})

s.on('data', function(chunk) {
	output += chunk
})

s.write('abc')

console.log(output)

This prints "abc". But is it guaranteed to print "abc"?

You can see that transform calls callback synchronously, but is it also guaranteed that write calls transform synchronously and that callback calls the data listener synchronously?

This works when I try it, and I think we have to have those guarantees, otherwise couldn't chunks hit transform or the data listener out of order? :confused:

qntm fucked around with this message at 23:09 on Aug 7, 2017

# ? Aug 7, 2017 23:07

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

qntm posted:

JavaScript code:
'use strict';

const stream = require('stream')

let output = ""

const s = new stream.Transform({
	transform(chunk, _encoding, callback) {
		callback(null, chunk);
	}
})

s.on('data', function(chunk) {
	output += chunk
})

s.write('abc')

console.log(output)
This prints "abc". But is it guaranteed to print "abc"?

You can see that transform calls callback synchronously, but is it also guaranteed that write calls transform synchronously and that callback calls the data listener synchronously?

This works when I try it, and I think we have to have those guarantees, otherwise couldn't chunks hit transform or the data listener out of order?

My guess it's entirely dependent on the internals of 'stream', right?

# ? Aug 7, 2017 23:25

huhu: Feb 24, 2006

Is there something similar to JavaScript: The Good Parts that you guys would recommend that is newer for just Vanilla JS? It's quite old at this point. I realize that my Vanilla JS is pretty lacking even though I've been writing it for ~2 years and I've done nothing but jQuery for awhile so I'm getting a little sloppy?

# ? Aug 10, 2017 18:01

canoshiz: Nov 6, 2005; THANK GOD FOR THE SMOKE MACHINE!

I like https://github.com/getify/You-Dont-Know-JS because it's open source and maintained quite well.

# ? Aug 10, 2017 19:33

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

yeah I always like referring to Airbnb's JS style guide for ES6 stuff too

https://github.com/airbnb/javascript

# ? Aug 10, 2017 19:36

huhu: Feb 24, 2006

Thanks for the recommendations.

I've got a new question. I have a table where a user can click edit on a row and via jQuery a new row will appear with nothing but input boxes. I have a file upload and I read that without "multipart/form-data" you can't upload the file. so I've wrapped the entire table in a form. However, I still can only get the file name and not the file. Is it correct to assume that the form is not recognizing the dynamically generated inputs? If so, how best to remedy this?

# ? Aug 11, 2017 19:41

Dogcow: Jun 21, 2005

huhu posted:

Thanks for the recommendations.

I've got a new question. I have a table where a user can click edit on a row and via jQuery a new row will appear with nothing but input boxes. I have a file upload and I read that without "multipart/form-data" you can't upload the file. so I've wrapped the entire table in a form. However, I still can only get the file name and not the file. Is it correct to assume that the form is not recognizing the dynamically generated inputs? If so, how best to remedy this?

By "getting" the file you mean on the back end on submitting the whole form? There shouldn't be any problem with dynamically creating form elements in that case as long as they exist when the form is submitted and the fact that you get a name value means the input does exist in the form. Can you post any code? How is the form submitted, regular old submit button or via JS?

# ? Aug 11, 2017 20:41

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

Make sure all the inputs have names?

# ? Aug 11, 2017 20:42

huhu: Feb 24, 2006

I do too much (terrible stuff) with AJAX these days. Rewrote it to just be a regular form submit and it works.

# ? Aug 11, 2017 21:19

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 07:41

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.

So I have been working with react for quite some time, and for the most part all of my components are self contained. I am now replacing an old JQuery widget, and the way it worked was it was fairly self contained but them exposed some functions via JQuery so other parts of the code could add data to the container.

I am not entirely sure how to do this with React. Would my only bet here be to do it via a redux-like store?

# ? Aug 14, 2017 17:10

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

«‹›277 »