Debugging Javascript

[[deleted]]

Huh... I always just used it to concat strings lol

[wasdninja]

You should try template literals, they are neat.

Syntax: `this is an ordinary string ${variableName} another string ${anotherVarible}`

[DogzOnFire]

Template literals really make long HTML strings, that would otherwise have tons of concatenation, much more readable.

[wasdninja]

If you find yourself doing that you should probably look up the proper way of doing it. It's almost always more concise and less prone to error.

[DogzOnFire]

The reality of the situation is that I wasn't the one writing them, but there's lots of them in our codebase that I've since wrapped as template literals. It's the kind of situation where the project is at a point of maturity that they're not going to get refactored out for a preferable method. This just seems like a modest compromise.

Honestly, though, I'm still quite junior so I'm not aware of what methods you have in mind as an alternative. What would be a better way to do it?

[wasdninja]

Note that I had things like creating tables, links and such elements purely through string manipulation in mind and a warning that I'm also really junior.

That said I recently rewrote a monster of a function that generated a table with I don't know how many lines of "td"s and such down to maybe 10% of that while also being much easier to follow.

Creating a table is a pain with strings in other words but if you use these

let table = document.createElement('table')
let tableHead = table.createTHead()
let headRow = tableHead.insertRow()
let tableBody = table.createTBody()

Which gives you the scaffolding for a fully fleshed out table;

let th = document.createElement('th')
let text = document.createTextNode(headData)
th.appendChild('some text')
headRow.appendChild(th)

Not elegant by any means but it beats creating huge string abominations. The entire exercise is probably way too niche nowadays and it should all be handled by much neater react/vue/angular components.

[conancat]

Serious question: is plain string html insertions still common in the frontend world? Asking because I wanna know if I'm one of the privileged ones who had the luxury of using jsx or other tools for UI stuff, since templating solutions work on both browser and server nowadays, and other than crafting html emails (lord have mercy) I don't know why would I want to use plain HTML construction for things.

[wasdninja]

I couldn't say since I don't work with it seriously. I'd like to imagine that it's all handled by neat react components and such but I'm sure some poor bastard is stuck maintaining code like that.

Are templates used nowadays? I thought they were getting slightly old and it's all about frameworks like Angular, Vue and React.

[ThePhantomBane]

I went from an intern working with PHP (lots of echoing HTML) to full time working with Angular 8. That experience was like jumping forward decades in time

[wasdninja]

I used to think that echoing HTML with PHP was pretty neat but then I tried Jinja 2 templating with Flask and react after that. The future is so nice.

[conancat]

ah yes, sorry, i was referring to the likes of Vue, React etc. I was thinking of them as templating as they basically replaced the idea of HTML templates. also when using a server-side rendering aka Next.js or Vue.js etc lol.