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 »

n4: Jul 26, 2001; Poor Chu-Chu : (

I use webpack. It wasn't as challenging to learn as you might expect and it really does a lot for you. I think depending on the rest of your stack and what frameworks you're using webpack might be a more or less attractive option. I use Rails and React and webpack definitely simplifies a lot for me.

I actually don't know Gulp or Grunt and have been meaning to learn one of them just so I can say I've used it during interviews and such.

# ? May 19, 2016 16:21

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 03:57

Huzanko: Aug 4, 2015; by FactsAreUseless

Thermopyle posted:

You use webpack and don't use require. You use ES6 modules and use npm to manage your packages.

In this way, you're not tied to webpack, its just basically a way of shimming ES6 module support into the browser. If browsers ever support modules in a good way then you just stop using webpack and your code works the same way basically. So, you're not tying yourself to a specific build tool, you're tying yourself to the future of Javascript.

(of course this is JS web tooling so nothing is ever really that easy)

Webpack isn't more complicated than Ant and Maven, you're just familiar with them so it seems like it.

Also, you should use webpack instead of browserify. I started out using browserify and regretted wasting the time learning it if only because it seems like all of the examples for stuff I'm interested in have examples in webpack rather than browserify.

Ok. Good to know. I am interested in using ES6 stuff so if WebPack will let me do that in the browser then that's the way to go. It's just super loving lovely that first it was grunt, then it was gulp, bower was in there somewhere, then it was browserify, and now it's webpack. I am glad I have yet to get very deep into build tools since it's just a waste of time since something new that you just HAVE to use is out every week. It also really, really sucks that any courses and tutorials on JS frameworks now almost always rely on you picking up a build tool as well.

I'll give WebPack a shot, I guess, but I bet as soon as I learn it, it'll be old and poo poo.

# ? May 19, 2016 16:41

vardyparty: May 16, 2016

Noam Chomsky posted:

Ok. Good to know. I am interested in using ES6 stuff so if WebPack will let me do that in the browser then that's the way to go. It's just super loving lovely that first it was grunt, then it was gulp, bower was in there somewhere, then it was browserify, and now it's webpack. I am glad I have yet to get very deep into build tools since it's just a waste of time since something new that you just HAVE to use is out every week. It also really, really sucks that any courses and tutorials on JS frameworks now almost always rely on you picking up a build tool as well.

I'll give WebPack a shot, I guess, but I bet as soon as I learn it, it'll be old and poo poo.

Apologies if it's been posted before..
e: it has

# ? May 19, 2016 16:51

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

Is there a proper name for what I'm doing to do here with runUpdates? Basically I'm looking to pass in an initial state and some list of updaters to modify that state without having to do something like updateSomeVal(updatemyThing(state)) as that gets ugly pretty quickly.

code:

var state = {
  someVal: true,
  mything: 'x'
}

var runUpdates = function(data) {
  for (var i = 1; i < arguments.length; i++) {
    data = arguments[i](data);
  }
  return data;
}

var updateSomeVal = function(state) {
  state.someVal = !state.someVal;
  return state;
}

var updatemyThing = function(state) {
  state.mything = 'y';
  return state;
}

var newState = runUpdates(state, updateSomeVal, updatemyThing);

# ? May 19, 2016 18:31

tyrelhill: Jul 30, 2006

https://en.m.wikipedia.org/wiki/Visitor_pattern

# ? May 19, 2016 19:21

Sedro: Dec 31, 2008

Horn posted:

Is there a proper name for what I'm doing to do here with runUpdates? Basically I'm looking to pass in an initial state and some list of updaters to modify that state without having to do something like updateSomeVal(updatemyThing(state)) as that gets ugly pretty quickly.

Sounds like function composition

JavaScript code:

var compose = function(...fs) {
  return fs.reduce((a,b) => (...args) => a(b(...args)));
}

updateSomeVal(state);
updatemyThing(state);

var bothUpdates = compose(updateSomeVal, updatemyThing);
bothUpdates(state);

# ? May 19, 2016 19:53

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

Sedro posted:

Sounds like function composition

Thanks guys, this was enough for me to figure it out. If anyone else is wondering the lodash equivalent of this is _.flow.

# ? May 19, 2016 20:17

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

I have an onsite tomorrow, they asked me to build a simple app. I want to style the hell out of it with their logo/colors/fonts. Would that appear too overeager or presumptive in a candidate?

# ? May 24, 2016 04:26

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

Raskolnikov2089 posted:

I have an onsite tomorrow, they asked me to build a simple app. I want to style the hell out of it with their logo/colors/fonts. Would that appear too overeager or presumptive in a candidate?

If you start getting too fancy with presentation before the thing even works that's a surefire "don't hire this person" IMO. If you have some spare time, sure, make it pretty.

# ? May 24, 2016 04:29

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

Raskolnikov2089 posted:

I have an onsite tomorrow, they asked me to build a simple app. I want to style the hell out of it with their logo/colors/fonts. Would that appear too overeager or presumptive in a candidate?

Make it pretty, but I wouldn't use the company logo or colors

# ? May 24, 2016 11:47

Huzanko: Aug 4, 2015; by FactsAreUseless

Can anyone explain isomorphic JS to me in a way that doesn't make me want to stab the nearest living thing AND doesn't make it sound like it's just bullshit papering over the limitations of SPAs? Thanks.

# ? May 25, 2016 22:17

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

For the first load, rather than sending a template over, then letting the client hit the API and render before they can see their data, take the template and the data the API would've provided and render it server side. This is easier if you're using the exact same template code, that's the isomorphic js, just a fancy way of saying used by server and client alike. This is used to make the first render fast usually, that's all.

# ? May 25, 2016 22:31

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

Maluco Marinero posted:

For the first load, rather than sending a template over, then letting the client hit the API and render before they can see their data, take the template and the data the API would've provided and render it server side. This is easier if you're using the exact same template code, that's the isomorphic js, just a fancy way of saying used by server and client alike. This is used to make the first render fast usually, that's all.

It's important to note that this is really only useful for incremental/progressive rendering. If you're going to render the whole dataset up front, there's usually few benefits (SEO?) versus batching your DOM updates.

# ? May 25, 2016 22:44

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

Well, the SEO benefits are good if you can respond with an exact render of public pages within milliseconds. A SPA with public pages can benefit greatly from cached server side renders.

# ? May 25, 2016 22:55

geeves: Sep 16, 2004

vardyparty posted:

Semicolons or no semicolons?

Not using them looks cleaner and nicer like ruby or python code.

I had someone say this to me in an interview. Also about not using { } with if / else statements. He wasn't hired.

Strong Sauce posted:

Adding semicolons won't help someone in this case. Learning how ASI is implemented will.
code:
function a() {
  return
  { 
    b: 3;
  };
}

Yeah you're example is kind of tricky because to someone new to programming might not realize that an object is just an array of a map (key/value pair) so a comma would be used in that case (if there were more k/v pairs after).

quote:

The answer should be choose whatever works best for you.

If you're writing code just for you - do whatever you want. I personally think it's lazy and in poor practice not to use them. I've always been strict with semi-colons; I'm from a Java background, so it's just more natural to me.

In a team environment they should be enforced so there's less possible misinterpretation. At my company your code will not pass peer review. The time it can take to submit, reject, resubmit fixed code takes up more time than just using a semi-colon.

# ? May 26, 2016 00:23

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

geeves posted:

Yeah you're example is kind of tricky because to someone new to programming might not realize that an object is just an array of a map (key/value pair) so a comma would be used in that case (if there were more k/v pairs after).

I don't think that's the problem Strong Sauce was alluding to.

# ? May 26, 2016 04:01

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

Horn posted:

Is there a proper name for what I'm doing to do here with runUpdates? Basically I'm looking to pass in an initial state and some list of updaters to modify that state without having to do something like updateSomeVal(updatemyThing(state)) as that gets ugly pretty quickly.
code:
var state = {
  someVal: true,
  mything: 'x'
}

var runUpdates = function(data) {
  for (var i = 1; i < arguments.length; i++) {
    data = arguments[i](data);
  }
  return data;
}

var updateSomeVal = function(state) {
  state.someVal = !state.someVal;
  return state;
}

var updatemyThing = function(state) {
  state.mything = 'y';
  return state;
}

var newState = runUpdates(state, updateSomeVal, updatemyThing);

Sounds like you're reduceing the array of functions, to me.

(Prefer passing explicit arrays instead of using variadic functions, IMO.)

# ? May 26, 2016 14:30

tyrelhill: Jul 30, 2006

Jabor posted:

I don't think that's the problem Strong Sauce was alluding to.

JavaScript claims another skull for its throne.

The function returns undefined

# ? May 26, 2016 20:51

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Vulture Culture posted:

It's important to note that this is really only useful for incremental/progressive rendering. If you're going to render the whole dataset up front, there's usually few benefits (SEO?) versus batching your DOM updates.

Google is activating script tags now.

Thanks to the many who have answered my questions in this thread throughout the years as I learned how to program. Just scored my first front end gig at an agency for what seems to me an ungodly amount of money. I'm sure they'll work me like a dog, but I'm going to learn a lot.

# ? May 27, 2016 02:13

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

Raskolnikov2089 posted:

Google is activating script tags now.

I think Google might ration how much time they spend crawling a site. Pre-digesting your JS into HTML might mean they crawl your site more thoroughly or frequently.

Or not. I'm not an SEO guy.

# ? May 27, 2016 02:22

thehustler: Apr 17, 2004; I am very curious about this little crescendo

Can someone point me in the right direction with parsing text or html files grabbed with jQuery? The data I need is contained within the first <script> tag on various servers within my local network at work.

Eg

code:


<script>
var1 = value;
var2 = "whatever";

So far I've got this, to read in a list of IPs and request the right page:

code:


<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="IPs.txt"></script>
<script type="text/javascript">

for (var i = 0; i < IPs.length; i++) {
  $.ajax({  
    url: 'http://' + IPs[i] + '/notrxe_status.html',
    type: 'GET',
    dataType: 'html',
    data: null,
    success: function(data,status) {
      var data = $(data).find('script').first();
      // enter code here to write info to web page
    }
  });
}
</script>

That's been cribbed from tutorials and adapted to suit. I'm having a proper mental blank on how to actually parse the data coming in. Any helpful links? Is this going to be a regex thing?

Edit: IPs.txt is formatted as like
IPs = [
"Address here"
];

That'll work, right?

thehustler fucked around with this message at 18:39 on May 29, 2016

# ? May 29, 2016 18:34

The Fool: Oct 16, 2003

thehustler posted:

Can someone point me in the right direction with parsing text or html files grabbed with jQuery? The data I need is contained within the first <script> tag on various servers within my local network at work.

Eg
code:
<script>
var1 = value;
var2 = "whatever";
So far I've got this, to read in a list of IPs and request the right page:
code:
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="IPs.txt"></script>
<script type="text/javascript">

for (var i = 0; i < IPs.length; i++) {
  $.ajax({  
    url: 'http://' + IPs[i] + '/notrxe_status.html',
    type: 'GET',
    dataType: 'html',
    data: null,
    success: function(data,status) {
      var data = $(data).find('script').first();
      // enter code here to write info to web page
    }
  });
}
</script>
That's been cribbed from tutorials and adapted to suit. I'm having a proper mental blank on how to actually parse the data coming in. Any helpful links? Is this going to be a regex thing?

Edit: IPs.txt is formatted as like
IPs = [
"Address here"
];

That'll work, right?

I haven't used it myself, but this seems like the kind of thing phantomjs was built for.

http://phantomjs.org/

Check out this project:
http://nrabinowitz.github.io/pjscrape/

# ? May 29, 2016 19:29

Impotence: Nov 8, 2010; Lipstick Apathy

i am pretty sure ALL of those ips also need Access-Control-Allow-Origin headers for you to be able to read anything on them in a browser

Impotence fucked around with this message at 20:00 on May 29, 2016

# ? May 29, 2016 19:57

thehustler: Apr 17, 2004; I am very curious about this little crescendo

Really? I did wonder about that. They are all on the same LAN but different servers. They are actually AV control panels. I wonder what web server they run and whether I can add that.

# ? May 29, 2016 20:07

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

If you're just making a tool for your own use, you can probably make a greasemonkey script and use its GM_xmlhttpRequest to make cross-origin requests

# ? May 29, 2016 20:15

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

Biowarfare posted:

i am pretty sure ALL of those ips also need Access-Control-Allow-Origin headers for you to be able to read anything on them in a browser

No, script tags work cross-origin.

E: nm, misunderstood

# ? May 29, 2016 20:48

thehustler: Apr 17, 2004; I am very curious about this little crescendo

Aye guys you were right cross-domain blocked. And as far as I can see there's no way I change things on the server, given what kind of devices they are. I may well contact the manufacturer but if it's some cut down httpd I guess it'll be hard to do. Any way I can determine what the web server is on the devices? Will it be in some headers when I request a page from them?

This is supposed to be a simple internal solution for something, not sure I want to start running PHP/proxy stuff everywhere for it. A webpage to sit on a shared drive that can be called up as and when needed that will contact each projector/AV panel and read the data.

Looks like I may need another solution...

Edit: Hah, I did push the page to the device's web server and when I called it from there everything worked perfectly. Which is a bit of a punch in the face really

thehustler fucked around with this message at 11:58 on May 30, 2016

# ? May 30, 2016 09:00

thehustler: Apr 17, 2004; I am very curious about this little crescendo

Wait a minute. All the panels are in DHCP/DNS so I guess I could use document.domain couldn't I? And set it to the main host name?

This is only going to run internally on the LAN. Not even reachable on the VPN. Are there any security concerns if I do it? Will that even work?

# ? May 30, 2016 21:53

Impotence: Nov 8, 2010; Lipstick Apathy

if you control the browser you can force disable CORS on the browser end

(or just proxy the poo poo through your server)

# ? May 31, 2016 03:45

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

Or set up a proxy that always adds the header

# ? May 31, 2016 20:03

Thots and Prayers: Jul 13, 2006; A is the for the atrocious abominated acts that YOu committed. A is also for ass-i-nine, eight, seven, and six.

B, b, b - b is for your belligerent, bitchy, bottomless state of affairs, but why?

C is for the cantankerous condition of our character, you have no cut-out.; Grimey Drawer

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

There's a number of browser add-ins that will ignore the CORS stuff.

# ? May 31, 2016 20:11

MrMoo: Sep 14, 2000

I cannot remember if it still works but add a desktop shortcut to Chrome with "--disable-web-security" on the command line.

Don't forget the OPTIONS pre-flight request if using a proxy, e.g.

code:

...
use_backend cors_preflight if METH_OPTIONS
...

backend cors_preflight
errorfile 503 /etc/haproxy/dummy.503

and the dummy file, you may need to add Access-Control-Allow-Headers:

code:

HTTP/1.1 200 OK
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Content-Length: 0
Cache-Control: private

MrMoo fucked around with this message at 21:03 on May 31, 2016

# ? May 31, 2016 20:55

School of How: Jul 6, 2013; quite frankly I don't believe this talk about the market

I am in npm hell. I'm trying to add a module called "reddcore" to my browser project. The module's github is here: https://github.com/reddcoin-project/reddcore

When I follow the instructions to build a browser bundle, it all works fine, except when I try to do reddcore = require("reddcore") it just says "require is not defined"

The browser bundle gets built, and it looks like it works, but it just doesn't. I can't look through the source code because the generated source code is minified and completely unreadable.

How can I debug this?

# ? May 31, 2016 22:32

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

School of How posted:

I am in npm hell. I'm trying to add a module called "reddcore" to my browser project. The module's github is here: https://github.com/reddcoin-project/reddcore

When I follow the instructions to build a browser bundle, it all works fine, except when I try to do reddcore = require("reddcore") it just says "require is not defined"

The browser bundle gets built, and it looks like it works, but it just doesn't. I can't look through the source code because the generated source code is minified and completely unreadable.

How can I debug this?

In general, you do not (yet) use require in browsers (unless you are using something like webpack or browserify). I'm not sure if the bundle itself provides a require polyfill, but are you sure you have loaded the bundle.js before you try your code?

# ? Jun 1, 2016 00:37

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

Skandranon posted:

In general, you do not (yet) use require in browsers (unless you are using something like webpack or browserify.

I don't think you'll ever use require in browsers since ES2015 introduced import and friends...right?

# ? Jun 1, 2016 01:28

School of How: Jul 6, 2013; quite frankly I don't believe this talk about the market

Skandranon posted:

In general, you do not (yet) use require in browsers (unless you are using something like webpack or browserify). I'm not sure if the bundle itself provides a require polyfill, but are you sure you have loaded the bundle.js before you try your code?

This bundle.js was generated by browserify...

I'm positive the file is being embeded in the page. The contents of bundle.js look like this:

code:

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.bitcore = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({"./config":[function(require,module,exports){
(function (process,global,Buffer,__argument0,__argument1,__argument2,__argument3,__filename,__dirname){
module.exports={network:"livenet",logger:"normal"};

}).call(this,require('_process'),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {},require("buffer").Buffer,arguments[3],arguments[4],arguments[5],arguments[6],"/config.js","/")

},{"_process":214,"buffer":15}],"./const":[function(require,module,exports){
(function (process,global,Buffer,__argument0,__argument1,__argument2,__argument3,__filename,__dirname){
MSG={TX:1,BLOCK:2,FILTERED_BLOCK:3},MSG.to_str=function(t){switch(t){case MSG.TX:return"transaction";case MSG.BLOCK:return"block";case MSG.FILTERED_BLOCK:return"filtered block";default:return"unknown"}},exports.MSG=MSG;

}).call(this,require('_process'),typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {},require("buffer").Buffer,arguments[3],arguments[4],arguments[5],arguments[6],"/const.js","/")

},{"_process":214,"buffer":15}],"./lib/Address":[function(require,module,exports){

I can see "require" in there, but when I try to call it from my code it says undefined. I'm not enough of a javascript master to decipher that mess... This is what I hate about the node ecosystem. Nothing can be simple and just work. There are always snags along the way, and layers and layers of obfuscation to have to climb over.

By the way, the require line was taken directly from that lib's documentation page. I've also seen other node projects use require in the browser like that too.

# ? Jun 1, 2016 07:47

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

Thermopyle posted:

I don't think you'll ever use require in browsers since ES2015 introduced import and friends...right?

browsers will eventually support import but it isn't implemented in the browsers (nor node) yet. the spec added them but never explained how they would be implemented and now they realize their mistake so a lot of it is being delayed.

# ? Jun 1, 2016 09:23

thehustler: Apr 17, 2004; I am very curious about this little crescendo

Thanks for the help guys, getting closer. Would love to do this without modifying my colleagues' browsers or whatever but if that's the only way it'll have to do.

Any idea why this is whining at me?

code:

      var scripttocheck = htmlDoc.getElementsByTagName("script")[0].childNodes[0].nodeValue; // Extract variables from page
      var splitted = scripttocheck.split(";",14);
      var projname[i] = splitted[2].substring(8,splitted[2].length-2);
      var projlamphrs[i] = splitted[13].substring(8,splitted[13].length-2);

SyntaxError: missing ; before statement

It seems to whine after the split and I don't know why. Do I need to escape that ; in the split or something?

# ? Jun 1, 2016 12:54

Depressing Box: Jun 27, 2010; Half-price sideshow.

You're trying to reference a key in a variable at the same time you're declaring it with var. If projname and projlamphrs already exist, just use:

code:

projname[i] = splitted[2].substring(8,splitted[2].length-2);
projlamphrs[i] = splitted[13].substring(8,splitted[13].length-2);

# ? Jun 1, 2016 13:29

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 03:57

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

MrMoo posted:

I cannot remember if it still works but add a desktop shortcut to Chrome with "--disable-web-security" on the command line.

Please, no. This is super dangerous. If you accidentally end up browsing the internet with that flag set you are incredibly vulnerable. The flag's name is not overstated.

# ? Jun 1, 2016 13:39

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

«‹›277 »