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 »

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

xiw posted:

I'm having a real poo poo of a time getting into the kind of frontend development i'm being asked to do, which is things like customise Bigcommerce through JS injected scripts. It feels like an infinite nightmare of reading minified JS from thirdparties and trying to reverseengineer it and change behaviour. Is this actually a usual thing (hey this compiled JS does X, change it to do Y by intercepting mutators and hunting events and charting out its flow) or am i starting with the hard stuff?

it's really dispiriting since i feel like i'm spending days staring at the debugger and occasionally get a win but often it's just 'nope i can't figure out how to do this short of breaking into react's hidden state fields' and i've wasted a lot of time.

what the gently caress no, it isn't supposed to be like this at all im so sorry.

# ? Jun 23, 2020 10:36

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 02:37

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.

xiw posted:

I'm having a real poo poo of a time getting into the kind of frontend development i'm being asked to do, which is things like customise Bigcommerce through JS injected scripts. It feels like an infinite nightmare of reading minified JS from thirdparties and trying to reverseengineer it and change behaviour. Is this actually a usual thing (hey this compiled JS does X, change it to do Y by intercepting mutators and hunting events and charting out its flow) or am i starting with the hard stuff?

it's really dispiriting since i feel like i'm spending days staring at the debugger and occasionally get a win but often it's just 'nope i can't figure out how to do this short of breaking into react's hidden state fields' and i've wasted a lot of time.

i've never heard of anyone doing it like this. either you're missing something about a debug mode or your lead is evil.

# ? Jun 23, 2020 13:37

gamer roomie is 41: May 3, 2020

gamer roomie is 41 fucked around with this message at 15:36 on Jul 17, 2020

# ? Jun 23, 2020 16:15

wearing a lampshade: Mar 6, 2013

i dont really get what you're asking, what validation errors? and stupid qustion but have you tried <br/>

if you want to make sure its not being read as html then you need to make sure whatever you're outputting is being treated as a string.

you can try replacing < with < and > with > (html entities) or you can modify however you're making the JSON go in wherever it is you're making it go. not having visibility there makes it hard to give a suggestion though

# ? Jun 23, 2020 16:28

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.

gamer roomie is 41 posted:

If there is a <br> tag in JSON, how do I keep it but not have it cause a formatting error, or have it actually read as a line break?

If I have the sentence "Look out<br>the window" and I want that <br> to be a part of what come out the other end, how do I do that?

It looks like this. There's a text field in some dashboard that I can use to edit the values in thoughts, manually entering the sentences (including the <br>)
code:
"thoughts":[
    "Look out<br>the window",
    "My cat <br> is cool",
    "Wow I am typing"
],
Is there some combination of slashes that would make it so that I don't get the validation errors? It's actually making a line break in the output. I've tried doing a bunch of \ and / and " combos but nothing works.

Is there a way to do this? I am not familiar with this beyond knowing that the <br>s need to be in there and I create those values, sorry if this is a dumb question and thanks!

The validation is trying to save you from cross site scripting - e.g. if you could put a <br> tag, you could put a <script>alert("cross site scripting possible")</script> tag...

# ? Jun 23, 2020 16:29

wearing a lampshade: Mar 6, 2013

yeah disregard mine. the way you have it should work.

from devtools in a mozilla new tab...

code:

const ob = {
  "thoughts":[
    "Look out<br>the window",
    "My cat <br> is cool",
    "Wow I am typing"�
<- undefined
ob.thoughts
<- Array(3) [ "Look out<br>the window", "My cat <br> is cool", "Wow I am typing" ]

const searchwrapper = document.querySelector('.search-wrapper')
<- undefined
searchwrapper.innerText = ob.thoughts[0]
<- "Look out<br>the window"

# ? Jun 23, 2020 16:31

gamer roomie is 41: May 3, 2020

gamer roomie is 41 fucked around with this message at 15:36 on Jul 17, 2020

# ? Jun 23, 2020 17:12

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.

gamer roomie is 41 posted:

Thanks gang. This is new to me so the help articles and stack overflow answers go way over my head, as they presume some knowledge.

I'm not using dev tools to look at it, I was just looking at the page (url in the address bar, whatever pops up in the main window I take to be the output). Is that different from what you see in dev tools, since the main window interprets <br>'s?

I also didn't know this, I just saw "error on line XYZ" a few times where the breaks were and assumed that was it. If that's not the case and this is actually valid, I will gladly leave it.

There are ways of inserting html in a page and having it work, but I feel like the error is probably resulting from some kind of js based HTML sanitizer, and throwing an exception if you try to use unsafe text - there are different approaches that HTML sanitizers can use, but the context you're getting the error message in is unclear (e.g. is this a react app, angular app, some kind of custom code.) In principle you wouldn't get this message with a pure html/js message so it's likely coming from some kind of framework or custom js that is trying to protect you from yourself. The control may be expecting the text to be escaped or something, but the specifics would depend on the implementation.

# ? Jun 23, 2020 17:49

wearing a lampshade: Mar 6, 2013

yeah what frameworks *are* you using?

# ? Jun 23, 2020 17:51

FSMC: Apr 27, 2003; I love to live this lie

Osmosisch posted:

Look into webpack.

Wheany posted:

Seconding webpack. The tutorial/getting started on the official website is pretty good too. Once you get the project structure mostly there, you can start adding plugins to the mix

Thanks guys, it's pretty much exactly what I'm looking for. One more question.

I'm making a bookmarklet and want to use webpack to insert the bookmarklet into a html page. I don't really understand half the stuff I read so am probably missing something obvious, but most things I've found are great tutorials or plugins that create a bookmarklet but then say something like, then you copy and paste the javascript into the bookmarklet. I don't want to be copying and pasting that javascript into a bookmarklet or html file, I just want to inline the javascript into the a source html file. I've found plugins that inline the scripts in <script> tags but I want to use a link tag to make a bookmarklet. Here is a simple example of what I want.

Source bookmarklet.js

code:

alert('hello "world"!');

Source bookmarket.html.

code:

<!DOCTYPE html><html> <head> </head>
  <body>
    <div>Drag to bookmark bar
      <a href=#SOURCEbookmarklet.js#>Bookmarklet</a>
    </div>
  </body>
</html>

Desired output

code:

<!DOCTYPE html><html> <head> </head>
  <body>
    <div>Drag to bookmark bar
      <a href="javascript: (function(){alert('hello &quot;world&quot;!');})()">Bookmarklet</a>
    </div>
  </body>
</html>

I think I've found plugins that converts the javascript to a bookmarklet, but just need that last step to inline the bookmarklet into the html link that users can drag to the bookmark bar.

# ? Jun 23, 2020 20:23

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Hello thread I want to increase my knowledge of React but I can't think of any simple things to build to learn...
Any suggestions+

# ? Jun 23, 2020 20:34

The Fool: Oct 16, 2003

Empress Brosephine posted:

Hello thread I want to increase my knowledge of React but I can't think of any simple things to build to learn...
Any suggestions+

A suggestion/idea tracker

Use local storage if you don�t want to do any backend stuff

Suggested features:
A list view and a detail view
List view filter options based on attributes of the idea
Add and delete buttons
The ability to reorder items
Up/down voting items
Comments

# ? Jun 23, 2020 21:28

wearing a lampshade: Mar 6, 2013

if you work with wordpress you can try to 1:1 a react app with wordpress frontend, all of the content is exposed as json by default these days, just graphql into that poo poo and away you go.

# ? Jun 23, 2020 21:33

wearing a lampshade: Mar 6, 2013

should say not 1:1, it should be a marked improvement in terms of smoothness & usability in the frontend and the scalability in your code base otherwise its a waste of time lol

# ? Jun 23, 2020 21:35

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Thanks for the help. I wanna try that WordPress thing because the bulk of the work I do is on WordPress and I hate it.

# ? Jun 23, 2020 22:36

wearing a lampshade: Mar 6, 2013

Same

# ? Jun 23, 2020 22:41

Roadie: Jun 30, 2013

For React stuff, I can't recommend Next.js highly enough. It's a tiny bit more setup work than create-react-app but is even better at making all the fiddly bullshit just Go Away. Make some React components in a folder tree and run next export and it will generate a full static build for you that already includes routing, efficient code-splitting, and all that other stuff that you now don't really have to think about.

# ? Jun 23, 2020 22:48

wearing a lampshade: Mar 6, 2013

Oh Woah thank you that sounds excellent

# ? Jun 23, 2020 22:49

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

I'm still really early into learning and haven't gotten to routes yet but the one time I experienced it they were horrible. I'll try next though that sounds nice.

# ? Jun 23, 2020 22:54

Sous Videodrome: Apr 9, 2020

Empress Brosephine posted:

Hello thread I want to increase my knowledge of React but I can't think of any simple things to build to learn...
Any suggestions+

I wrote a long form tutorial on making a flashcard app using React, TypeScript, Jest, and React Testing Library: It's here on dev.to

# ? Jun 23, 2020 23:08

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Awesome. Thanks looking forward to trying it out

# ? Jun 23, 2020 23:14

wearing a lampshade: Mar 6, 2013

everytime i talk about react someone tells me to just use vue. i haven't used vue yet, but is it that much better?

# ? Jun 24, 2020 02:58

Roadie: Jun 30, 2013

Vue is easier, and also easier to shoot yourself in the foot with. React can be statically analyzed in a way that's just not really possible with Vue because of fundamental design differences.

# ? Jun 24, 2020 03:12

Sous Videodrome: Apr 9, 2020

React is really nice once you get the hang of it. It's well supported, the documentation is good, and you can do a lot with it. Plus the development in the last couple years has made it really easy and fast to write good, reusable code. But there's big drama cause a lot of the react team left facebook this month over facebooks policies about platforming racists. So we'll see what effect that has.

# ? Jun 24, 2020 07:39

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

Roadie posted:

For React stuff, I can't recommend Next.js highly enough. It's a tiny bit more setup work than create-react-app but is even better at making all the fiddly bullshit just Go Away. Make some React components in a folder tree and run next export and it will generate a full static build for you that already includes routing, efficient code-splitting, and all that other stuff that you now don't really have to think about.

Is that a Gatsby-like thing?

# ? Jun 26, 2020 01:55

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

albany academy posted:

everytime i talk about react someone tells me to just use vue. i haven't used vue yet, but is it that much better?

I like it a lot. For a personal project I would definitely prefer it, I find it easier to use and better structured than react. But either because I'm wrong, or a lot of people just haven't tried it, I don't seem to be in the majority.

They're both doing essentially the same thing.

# ? Jun 26, 2020 08:03

Roadie: Jun 30, 2013

Lumpy posted:

Is that a Gatsby-like thing?

It's a React framework that handles routing, server-side rendering, bundling (no need to deal with Webpack) and a bunch of other stuff in a very intuitive and pain-free way, with most of it happening with no configuration needed just by making component files at given paths.

Nolgthorn posted:

I like it a lot. For a personal project I would definitely prefer it, I find it easier to use and better structured than react. But either because I'm wrong, or a lot of people just haven't tried it, I don't seem to be in the majority.

They're both doing essentially the same thing.

The main thing that you're missing is that if you go pure React, you can load up to the gills on static analysis tooling that's only practical because of the React approach of the code and the view template being the same thing. It makes proactive bug-checking much easier.

Roadie fucked around with this message at 08:11 on Jun 26, 2020

# ? Jun 26, 2020 08:09

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

I don't really understand that.

Vue also has single file modules if that's what you mean. You can do that fancy CSS/js/html in the same file thing if you want to.

# ? Jun 26, 2020 08:24

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

Roadie posted:

It's a React framework that handles routing, server-side rendering, bundling (no need to deal with Webpack) and a bunch of other stuff in a very intuitive and pain-free way, with most of it happening with no configuration needed just by making component files at given paths.

Ahh, cool. I will have to check it out!

# ? Jun 26, 2020 17:52

Roadie: Jun 30, 2013

Nolgthorn posted:

I don't really understand that.

Vue also has single file modules if that's what you mean. You can do that fancy CSS/js/html in the same file thing if you want to.

It's the difference between

HTML code:

<template>
  <button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>

<script>
  module.exports = {
    data: function () {
        return {
        count: 0
        }
    }
  }
</script>

and

JavaScript code:

export default function() {
  const [count, setCount] = useCount(0);

  return (
    <button onClick={() => setCount(count + 1)}>You clicked me {count} times.</button>
  )
}

You can't statically analyze the first one without elaborate custom tooling. You can statically analyze the second one using exactly all the same stuff you already have for JS (or any JS derivatives, including strictly typed Typescript), because without the JSX pretty syntax, it's actually this:

JavaScript code:

export default function() {
  const [count, setCount] = useCount(0);

  return React.createElement(
    'button',
    { onClick: () => setCount(count + 1) },
    "You clicked me ", count, " times."
  )
}

Roadie fucked around with this message at 01:49 on Jun 27, 2020

# ? Jun 27, 2020 01:47

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

Roadie: Jun 30, 2013

MrMoo posted:

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;
  }
};

You can do this too in React:

code:

export default class {
  state = {
    count: 0
  }

  render () {
    return (
      <button onClick={() => setState(state => ({ ...state, count: state.count + 1 }))}>You clicked me {count} times.</button>
    )
  }
}

...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.

Roadie fucked around with this message at 04:16 on Jun 27, 2020

# ? Jun 27, 2020 04:13

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

After working in React for 2.5 years, and then Vue for the past 6 months, I'll say this. There's a few definitive reasons I don't like Vue

* There's not nearly as many stackoverflow answers around the tooling and other compatible libs, which can add hours to my troubleshooting process
* two-way (but also compatible with one-way) data binding is confusing and i hate it, and having to support both when creating your own abstracted components is a PITA
* you can't control the conditions for when a component re-renders

# ? Jun 27, 2020 04:25

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

The Fool: Oct 16, 2003

I don�t have a lot to add to this conversation except that React functional components + hooks + typescript is super pleasant to work with

# ? Jun 27, 2020 18:17

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

The Fool posted:

I don’t have a lot to add to this conversation except that React functional components + hooks + typescript is super pleasant to work with

Amen. I love it.

# ? Jun 27, 2020 18:24

drainpipe: May 17, 2004; AAHHHHHHH!!!!

I'm trying to do learn some typescript client-side development, but I can't figure out the module system (I don't have much experience with client-side or typescript in general so pretend I know nothing).

Let's say I have a simple hello world app that I broke into two files just so to use importing:

foo.ts

code:

import { bar } from './bar'

window.addEventListener('load', bar)

bar.ts

code:

export function bar() {
	window.alert('Hello world')
}

I compile these with tsc into foo.js and bar.js, and I have an html file with <script type="module" src="foo.js"></script> in the header.

The error I'm getting is "Failed to load resource: the server responded with a status of 404 (Not Found)" for the "bar" file. It's trying to import './bar' when it should be importing from './bar.js' file. Manually going into the generated foo.js file and changing the import to 'bar.js' makes it work, but is there a way to configure the tsconfig to automatically add the '.js'? Am I even doing this the right way?

Here is my tsconfig.json which I don't really have any idea what is going on

code:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "es6", 
    "lib": ["es2016", "dom"],
    "outDir": "static/",
    "rootDirs": ["scripts/"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,  
    "forceConsistentCasingInFileNames": true,

  }
}

edit: realized my tsconfig was missing some stuff

edit2: nevermind, I put the js extension in the import statements in the .ts files and it worked lol

drainpipe fucked around with this message at 02:28 on Jun 28, 2020

# ? Jun 28, 2020 01:02

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

drainpipe, if you don't feel like writing file extensions, you can do this (assuming you're using babel for transpiling code):

code:

$ yarn install --dev babel-plugin-module-resolver

and inside your babel config file:

JavaScript code:

	"plugins": [
		"@babel/proposal-class-properties",
		"@babel/proposal-object-rest-spread",
		"@babel/plugin-transform-modules-commonjs",
		[
			"module-resolver",
			{
				"root": [
					"."
				],
				"extensions": [
					".ts",
					".tsx",
					".js",
					".jsx",
					".es",
					".es6",
					".mjs"
				]
			}
		]
	]

additionally, if you'd like to be able to do importing with absolute paths, for example:

JavaScript code:

import { something } from 'src/whatever/something'

you can add this to your tsconfig:

JavaScript code:

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  }

# ? Jun 28, 2020 04:40

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

The Fool posted:

I don�t have a lot to add to this conversation except that React functional components + hooks + typescript is super pleasant to work with

I took far to long to get on the Typescript train, but I�m loving it, and hooks made the already wonderful React drat near perfect.

# ? Jun 28, 2020 15:27

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 02:37

drainpipe: May 17, 2004; AAHHHHHHH!!!!

Grump posted:

drainpipe, if you don't feel like writing file extensions, you can do this (assuming you're using babel for transpiling code):

Thanks, but I'm using the vanilla tsc, not babel. I'm not familiar with the javascript/node environment, and all the tools is honestly kinda overwhelming. I had read that Webpack was also something I could have used for this. Is there a tldr rundown of all these tools?

# ? Jun 28, 2020 18:11

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

«‹›277 »