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 »

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

Bruegels Fuckbooks posted:

As a general rule, the "let's pull random javascript libraries that do cool things and smash them together" style of JS development is just a pain to work with. I would say:

a) Minimize the library use in your project. If you don't really need the whole library, or can do it yourself, just cut it. Vanilla JS is almost always easier to deal with than library slop.
b) Consider converting to a compile-to-JS language like typescript. Raw JS is more difficult to maintain than compile to JS languages.
c) Minimize the amount of stuff done in the browser - web apis are easier to test and maintain, and it'll be easier to refactor when someone decides to get rid of your flavor of the month UI library.

Seconding all of this, especially the TypeScript part. It will make your life a lot easier, immediately and in the long term as well.

# ? Nov 30, 2015 17:29

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 04:25

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Chenghiz posted:

eshint

Surprise surprise, there is a new Javascript-related thing that does what an old thing did.

How is eslint better than jshint?

# ? Nov 30, 2015 18:24

my effigy burns: Aug 23, 2015; IF I'M NOT SHITPOSTING ABOUT HOW I, A JUNIOR DEVELOPER IN JAVASCRIPT KNOW EVERYTHING THERE IS TO KNOW, PLEASE CHECK TO BE SURE MY ACCOUNT WAS NOT COMPROMISED BY A CLIENT-SIDE BOTNET, TIA

Wheany posted:

Surprise surprise, there is a new Javascript-related thing that does what an old thing did.

How is eslint better than jshint?

It's plugins have better support for stuff like JSX, which is all but required for using React. It just seems way worse at first because they decided to embrace The Node Way , which means you have to track down and install all the plugins yourself, and define them again at the beginning of every project.

# ? Nov 30, 2015 18:43

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Eslint supports a fair amount of stuff right out of the box, the only plugin I use is for react. I have basically one .eslintrc file I copy into each new project and maybe tweak a bit, but it's pretty painless.

# ? Nov 30, 2015 21:31

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

Wheany posted:

For me the first step to "getting" Javascript, was when I realized that Javascript has function scope. Any var you declare is visible everywhere in the function. Or at least it helped me not make as many mistakes.

The second step probably was realizing that it has first class functions. And what first class functions are

My hints are:
Use strict mode and JSHint right from the start.

Anyone who really wants to understand JS should have a firm grasp of everything in this article: http://jibbering.com/faq/notes/closures/
It's ostensibly about closures but it covers a lot of topics.

# ? Dec 1, 2015 00:44

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

I'm teaching myself JavaScript, staring off by reading http://eloquentjavascript.net/

For some reason, the author does not use curly braces for conditional loops, and it makes my eye twitch. Is this something prevalent in the professional JS programming community? it just turns code into a garbled mess to me.

code:

function printFarmInventory(cows, chickens) {
  var cowString = String(cows);
  while (cowString.length < 3)
    cowString = "0" + cowString;
  console.log(cowString + " Cows");
  var chickenString = String(chickens);
  while (chickenString.length < 3)
    chickenString = "0" + chickenString;
  console.log(chickenString + " Chickens");
}
printFarmInventory(7, 11);

Also I just learned about recursive functions and my brain hurts.

# ? Dec 1, 2015 01:01

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

ddiddles posted:

I'm teaching myself JavaScript, staring off by reading http://eloquentjavascript.net/

For some reason, the author does not use curly braces for conditional loops, and it makes my eye twitch. Is this something prevalent in the professional JS programming community? it just turns code into a garbled mess to me.
code:
function printFarmInventory(cows, chickens) {
  var cowString = String(cows);
  while (cowString.length < 3)
    cowString = "0" + cowString;
  console.log(cowString + " Cows");
  var chickenString = String(chickens);
  while (chickenString.length < 3)
    chickenString = "0" + chickenString;
  console.log(chickenString + " Chickens");
}
printFarmInventory(7, 11);
Also I just learned about recursive functions and my brain hurts.

It's not that big of a deal... I prefer to avoid braces for 1 line loops/conditional statements, though I would have added some more whitespace to that chunk so it's easier to see how it's laid out. It's really more of a personal preference thing.

# ? Dec 1, 2015 01:53

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

I have no earthly idea why people prefer to get rid of control structures and whitespace that make the language more readable.

Remember, programming languages are for you, the programmer, to express what you want the computer to do and to communicate that to other programmers.

Be verbose. Don't be stingy on whitespace. You can always run your code through a minifier but there's no reason to make your code harder to read.

# ? Dec 1, 2015 02:07

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Marijn is great and his book is great, but that brace/whitespace style is unclean. Probably just to deal with page space limitations, he knows better. :colbert:

# ? Dec 1, 2015 02:15

ROFLburger: Jan 12, 2006

What npm packages do you guys like to use for more convenient http requests? Node's native http seems like a bit of a pain in the balls

# ? Dec 1, 2015 04:12

fantastic in plastic: Jun 15, 2007; The Socialist Workers Party's newspaper proved to be a tough sell to downtown businessmen.

ROFLburger posted:

What npm packages do you guys like to use for more convenient http requests? Node's native http seems like a bit of a pain in the balls

https://github.com/request/request

# ? Dec 1, 2015 05:21

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

I'm a big fan of Needle

# ? Dec 1, 2015 05:23

Strong Sauce: Jul 2, 2003; You know I am not really your father.

jshint is now actually jshint and jscs. seriously considering forcing myself to "learn" eslint just to do away with this kinda dumbness.

# ? Dec 1, 2015 09:30

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

my effigy burns posted:

It's plugins have better support for stuff like JSX, which is all but required for using React. It just seems way worse at first because they decided to embrace The Node Way , which means you have to track down and install all the plugins yourself, and define them again at the beginning of every project.

Okay, but if I'm not using React, is there any reason why I should select eslint over jshint or is there any reason to switch from jshint to eslint? I haven't felt that there are any omissions in jshint and afaik, they've not crawled up their own rear end in a top hat like Douglas Crockford with jslint.

# ? Dec 1, 2015 10:32

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Wheany posted:

Okay, but if I'm not using React, is there any reason why I should select eslint over jshint or is there any reason to switch from jshint to eslint? I haven't felt that there are any omissions in jshint and afaik, they've not crawled up their own rear end in a top hat like Douglas Crockford with jslint.

It's just more extensible. eslint has plugins that add additional linting options for JSX, for instance: https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules

If you have no need for any of the plugins, don't switch.

# ? Dec 1, 2015 15:58

Analytic Engine: May 18, 2009; not the analytical engine

Chenghiz posted:

It's just more extensible. eslint has plugins that add additional linting options for JSX, for instance: https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules

If you have no need for any of the plugins, don't switch.

It's also less obsessed with sticking to Doug Crawford's favorite JS code conventions.

# ? Dec 1, 2015 16:06

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Analytic Engine posted:

It's also less obsessed with sticking to Doug Crawford's favorite JS code conventions.

...less obsessed than JSHint? Because I thought JSHint mostly doesn't care about Crockford's conventions either.

# ? Dec 1, 2015 16:27

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

I was on a plane recently, writing a little Node script to scrape data from an ancient server, running locally. I was using promises, which resulted in hundreds of near-simulateneous requests going out. I needed a way to throttle requests and I didn't have Internet access. What I came up with was a little wrapper library that implemented lock behind the scenes. It seems to work just fine. Is this is a totally dumb way of doing things? Are there better ways?

Kobayashi fucked around with this message at 03:56 on Jan 26, 2016

# ? Dec 1, 2015 17:40

obstipator: Nov 8, 2009; by FactsAreUseless

async.eachLimit() should be able to handle it best
https://www.npmjs.com/package/async#each

# ? Dec 1, 2015 18:03

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Yeah, if you want to rate limit, you should base unlocking on the conclusion of existing requests, not arbitrary timeouts. (Actually all asynchronous work should follow that, avoid setTimeout as far as practicable, it invites race conditions to form)

# ? Dec 1, 2015 20:25

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

External timeouts are also test-hostile.

# ? Dec 1, 2015 20:38

Analytic Engine: May 18, 2009; not the analytical engine

Wheany posted:

...less obsessed than JSHint? Because I thought JSHint mostly doesn't care about Crockford's conventions either.

Might have meant the other Js*int

# ? Dec 1, 2015 23:57

Death by Cranes: May 3, 2006; These Blockbuster bombs don't go off unless you hit them ju-u-u-u-st right.

Hi guys,
I usually use Adobe Egde for producing webbanners and throw them into Adform (bannerservice thing), but now I have to go around that with this one job. Long story short, I just want the whole stage clickable. Right now I have:

<script>
var clickArea = document.getElementById('Stage');

clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

clickArea.onclick = function() {
window.open(clickTAGvalue,landingpagetarget);
}
clickArea.style.cursor = "pointer";
</script>

But it only works ~40% of the times I open the .html file locally. In IE the banners doesn't even show, but that's apparently IE/Edge clashing. Great. But is my stage click correct? I'm not a great JS'er in any way, unfortunately.

# ? Dec 2, 2015 12:57

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.

I'm using chart js for some visualizations and trying to get this canvas element to resize appropriately is a night mare. Chart js can be made to be responsive and it works decently but it shrinks both height and width when I shrink the browser when I just want it to shrink the width. However disabling chart js "maintain aspect ratio" setting causes further weirdness where my chat actually grows in size on browser shrink.

Is anyone experienced in this?

https://github.com/nnnick/Chart.js/issues/423

Knifegrab fucked around with this message at 19:36 on Dec 3, 2015

# ? Dec 2, 2015 17:05

Aurium: Oct 10, 2010

So I'm not primarily a javascript developer, and am mostly ignorant of it's best practices.

Moving on. I'm developing a cross platform bluetooth app using phonegap, and this plugin: https://github.com/randdusing/BluetoothLE

It's life cycle is

readme posted:

initialize
scan (if device address is unknown)
connect
discover OR services/characteristics/descriptors (iOS)
read/subscribe/write characteristics AND read/write descriptors
disconnect
close

Pretty much every function you use gives a call back when it finishes. What's the best way to continue onto the next step? Do I just put a call to the next function in the callback of the previous? I did it briefly and it felt it made a mess in terms of following flow of the program.

Do I throw an event, and then watch for it elsewhere? This feels logical, but I can't help but feel that it's because I know how to do that, and now every problem looks like a nail.

# ? Dec 6, 2015 06:37

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

I would recommend exploring promises, look into the npm libraries bluebird and async. The first is a Promises library, and the second is just a general async utility library. Between them you should be able to build a callback system that is probably going to be less vulnerable to race conditions than using straight up events. (Depends on the complexity of course, but when that complexity goes up I find promises easier to reason about and therefore more predictable, less prone to mistakes)

# ? Dec 6, 2015 07:07

Hadlock: Nov 9, 2004

I'm supposed to QA a website that is ruby back end with Javascript/Angular front end. Has about 150 features/widgets/user stories/use cases spread over 21 pages, although 80% of the features are spread over perhaps 5 pages. The front end sits on top of Bootstrap 2 or 3.

According to Ruby Mine there's about 85% code coverage for unit testing using rspec but it's that last 15%, apparently 95% front end stuff, that is really biting us in the sales demos. It's a pretty robust code base, about 4 years old but it's gotten to the point where new features are breaking old ones faster than the developers themselves can figure it out.

I'm supposed to pick a test suite and design the fine-grained test suite/process. I'm thinking TestRails, as it looks ok and has pretty deep hooks in to Jira, our new workflow/ticketing system. Also because at the moment we're pretty in love with using software as a service for loving everything.

What kind of software should I look at for comprehensive front end QA? ha;lp

Hadlock fucked around with this message at 09:25 on Dec 8, 2015

# ? Dec 8, 2015 09:22

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

I'm not really a QA guy and haven't dealt with it directly myself, but at a previous job our QA team relied heavily on Selenium http://www.seleniumhq.org/ for browser automation and seemed pretty satisfied with it.

# ? Dec 8, 2015 10:46

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

Browserstack or Sauce Labs + Selenium seems pretty popular.

# ? Dec 8, 2015 16:25

Aurium: Oct 10, 2010

Maluco Marinero posted:

I would recommend exploring promises, look into the npm libraries bluebird and async. The first is a Promises library, and the second is just a general async utility library. Between them you should be able to build a callback system that is probably going to be less vulnerable to race conditions than using straight up events. (Depends on the complexity of course, but when that complexity goes up I find promises easier to reason about and therefore more predictable, less prone to mistakes)

Thanks. Reading stuff about these makes it sound like exactly what I was looking for. Now to figure out how to wrap up the functions I'm given in them.

# ? Dec 8, 2015 21:45

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

I've been checking out Firebase and I'm liking what I see so far - generous free-tier features, built in easy-to-use user authentication, and a JSON-oriented database structure that appeals to my puny JavaScript-laden brain. Are there any caveats or gotchas that I should look out for as a naive front-end dev? I don't know enough to say if their rules-based approach to validation and access permissions is a stroke of genius, business as usual, or completely retarded.

# ? Dec 9, 2015 20:14

Hadlock: Nov 9, 2004

Thermopyle posted:

Browserstack or Sauce Labs + Selenium seems pretty popular.

Yeah I ended up at a talk tonight (free beer! free pizza! what am I in college again??) where docker and some Continious Inegration company gave talks on setting up docker and then selenium webdriver containers to do your test case stuff.

However I am NOT enjoying the Selenium Web IDE. What a piece of garbage. The UIX is pretty loving janky and the way the tests are saved is amateur hour at best.

Is anyone writing their webdriver tests with the Selenium IDE? I'm guessing you just write it in whateverSpec? It seems like you run in to race conditions constantly.

Is this the wrong thread to talk about front end testing?

# ? Dec 10, 2015 11:14

Tigren: Oct 3, 2003

Hadlock posted:

Yeah I ended up at a talk tonight (free beer! free pizza! what am I in college again??) where docker and some Continious Inegration company gave talks on setting up docker and then selenium webdriver containers to do your test case stuff.

However I am NOT enjoying the Selenium Web IDE. What a piece of garbage. The UIX is pretty loving janky and the way the tests are saved is amateur hour at best.

Is anyone writing their webdriver tests with the Selenium IDE? I'm guessing you just write it in whateverSpec? It seems like you run in to race conditions constantly.

Is this the wrong thread to talk about front end testing?

Was this at VMWare? I thought about going to that then fell asleep. Pissed I missed free pizza.

# ? Dec 10, 2015 18:12

Hed: Mar 31, 2004; Fun Shoe

I'm loving around with a project at home and trying to de-duplicate a collection.

I'm making objects with two properties: "node_id" and "port". So for a contrived example I want to do:

code:

let nodePortMappings = [{"node_id": "A", "port": "12/4"},
                        {"node_id": "A", "port": "6/10"},
                        {"node_id": "A", "port": "6/10"},
                        {"node_id": "B", "port": "6/4"},
                        {"node_id": "B", "port": "6/4"},
                        {"node_id": "B", "port": "5/4"}
                        ];

console.log("There are " + nodePortMappings.length + " node/port combinations");
// return 6

let uniqueNodePortMappings = new Set(nodePortMappings);
console.log("There are " + uniqueNodePortMappings.size + " unique node/port combinations");
// return 4

Now obviously none of these will collapse because of the way object equivalence is done. So I could do my own iteration across and deep-check the two properties and that the values assigned are equivalent.

But what should I actually do? The endgame is to send off the sequence to my web server to lookup the adjacencies. If this were another language, I might create a port object and provide "equals" and/or "hash" methods to store them, but is there something I should be doing instead in JS world?

# ? Dec 11, 2015 02:31

Hed: Mar 31, 2004; Fun Shoe

I just ended up joining the strings with a delimiter and putting those into a set. Still would be interested to hear the "true JavaScript way" though

# ? Dec 11, 2015 23:24

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

Hed posted:

I just ended up joining the strings with a delimiter and putting those into a set. Still would be interested to hear the "true JavaScript way" though

What is wrong with an "isEquals" function that checks the values directly? Concatenating a string complicates things unnecessarily.

# ? Dec 11, 2015 23:46

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

As far as I can tell, the "suggested" approach is in fact to serialize your object to a string in some way and use that string as your map key. Alternatively, you could implement a hash-based Set/Map using your own equality method on top of the existing Map class.

# ? Dec 12, 2015 01:45

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

You could convert it to an ES6 Set; only unique values are allowed, so dupes drop out automatically. Depends if ES6 is an option, of course.

# ? Dec 12, 2015 12:12

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

Will that work with objects that are equivalent but not equal? His array has 2 objects that are duplicated, but that doesn't mean they're the same object.

# ? Dec 13, 2015 16:51

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 04:25

Sedro: Dec 31, 2008

It won't work. ES6 Map and Set use === on their keys. The best you can do is convert the object to a string

JavaScript code:

let mm = new Map(nodePortMappings.map(m => [ `${m.node_id}|${m.port}`, m ]))
mm.size
> 4
JSON.stringify(Array.from(mm.values()))
> "[{"node_id":"A","port":"12/4"},{"node_id":"A","port":"6/10"},{"node_id":"B","port":"6/4"},{"node_id":"B","port":"5/4"}]"

# ? Dec 13, 2015 19:35

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

«‹›277 »