Web Development

Dan Pantry

3:00 AM

o7

Phrancis

oi m8

Quill

okay now, what's your issue

Phrancis

Well not so much issue as much as questions

I've seen here and there people talk about creating objects in JS. And I mean just vanilla, no special libraries. I thought JS was functional mostly, so I was curious what the reality of it is

Quill

You can create an object specifying it's prototypes

Phrancis

You have a simple example we can work with?

Dan Pantry

3:03 AM

creating an object:

var object = {}

Alex L

If I may add something to that... is ES6 you can now create classes

Phrancis

no shit?

Dan Pantry

@AlexL Classes are just syntactic sugar around the prototype chain

Though it is worth knowing nonetheless

Creating an object from a prototype (ES5):

Quill

var prototypes = {
    "toString": function(){
        return Object.keys(this).join(",");
    }
}
Object.create(prototypes)

Alex L

developer.mozilla.org/en-US/docs/Web/JavaScript/…

Dan Pantry

3:04 AM

var prototype = {
  foo: function() {
    console.log('hello, world')
  }
}
var obj = Object.create(prototype)

obj.foo()
> hello, world

Equivalent code in ES6..

class MyClass {
  foo() {
    console.log('hello, world')
  }
}
var obj = new MyClass()
obj.foo()

Quill

It's kind of like how you modify .Equals in C#

Phrancis

But what's inside the var is a function, how does that differ from a function?

Quill

no difference

prototypes are functions

Phrancis

@Quill sorry m8 I don't C# :)

Dan Pantry

@Quill wot?

prototypes are Just Objects (tm)

Quill

3:06 AM

they're like an object of functions

Dan Pantry

Everything in Javascript is Just An Object

Quill

well they are

Dan Pantry

They don't have to be functions, they can also be properties

And prototypes can also have prototypes of their own

Quill

well yeah

it's basically just like:

Dan Pantry

@AlexL My god that page offers some bad practices

Phrancis

3:06 AM

To be fair there is not a huge amount of difference between a function and a method, when it comes down to it

Quill

yeah, pretty much

add ES6's new syntax to the mix

and you have similar looking languages

Alex L

@DanPantry It's literally the documentation, what part do you think is awful? just curious

Quill

@AlexL MDN docs are written by volunteers

Phrancis

Does var prototype have a special meaning, or could it be named anything at all?

Dan Pantry

@AlexL var Person = function () {}; ( why would you not name that function?); var MYAPP = MYAPP || {}; (wtf why?)

@Phrancis it can be named anything

Quill

3:08 AM

MYAPP.event = {
    addListener

Alex L

Is it not the official docs though?

Quill

use prototypes

Dan Pantry

@AlexL No. It's community sourced.

Alex L

Where are the official docs?

I must be missing something here

Dan Pantry

There are no 'official docs' for JavaScript, only the W3C standards and the implementations of them by vendors.

Quill

3:08 AM

@Phrancis prototype by itself is fine, but as a property of a variable it's locked

Alex L

That's what I thought, and since Mozilla stepped forward to create a community reviewed site for docs, I've always just accepted them :P

Dan Pantry

@Phrancis Like I said, prototypes are Just Objects. Up until you use Object.create on them, they act like objects. As such, you can name them like any other object.

@AlexL The docs on their methods and properties are pretty damn good. But that tutorial in particular is pretty crap.

Alex L

You should contribute :)

Dan Pantry

@AlexL I should do a lot of things.. ;-;

Phrancis

I'm gonna step out for a smoke but I want to learn more. You guys keep arguing about the documentation or something til I get back lol

Dan Pantry

3:10 AM

@Phrancis Lol we're not arguing :P I'll be here when you get back, just need to run to the shop to get a drink because I have my life in order

Alex L

Haha sorry we got jumbled into your discussion

Quill

Yeah, I've got hours left at work so I'll be online

Alex L

I walked into the SO Javascript chat for a few minutes the other day and wasn't impressed at all

Quill

Yeah, lot of help vampires

Anything in particular @AlexL?

Alex L

It was silent, which I wasn't expecting, and when I scrolled up through the last few hours of chat it was all off topic and everyone talked like a 10 year old. Maybe I just had bad timing

Quill

3:21 AM

I was in their for a few days once

there was next to no decent conversation

most of the regulars stopped chatting when help vampires or people with questions came along

Alex L

Sigh

anyways, care to review my review?

0

A: Multiple inheritance pattern for vehicle information

Very interesting concept, I could see this turning into a "Pimp my Ride" game. A few things before this is sent off to gamers: OOP It seems like you've kind of misunderstood what OOP is about. As it is, you have a lot of variables (not objects) which then are smushed together into a final conce...

I'm trying to take down some of these JS zombies and I wanna make sure I'm not misleading others

Quill

I don't think you can overload it like that

I think a setter with optional arguments should work

Phrancis

Shooting from the hip, how much (%) would you estimate the market uses/supports ES6?

Quill

Very little

5% maybe

You've got to compile your code down to ES5 before you can run it

Edge supports some ES6 syntax and no other browsers do

The big companies use it, as Babel.JS' homepage will tell you

but of course they use every technology the day after it comes out

Phrancis

OK in that case, assuming this ES

21 mins ago, by Dan Pantry

var prototype = {
  foo: function() {
    console.log('hello, world')
  }
}
var obj = Object.create(prototype)

obj.foo()
> hello, world

Quill

3:26 AM

that's ES5

Phrancis

Are things like void, static, private, public... supported?

Quill

No, those are ES6 keywords

Phrancis

I'm guessing the clever JS devs have figured out workarounds maybe?

Quill

babeljs.io/repl

Phrancis

ES6 looks a lot like Java to me

(which is a good thing I think)

Quill

3:27 AM

yeah, babeljs converts ES6 down to ES5, effectively performing the same

It may be a good thing to you, but it's a major syntax change that will stir the JavaScript community

Phrancis

No doubt

Quill

the old syntax will still be around though

so who knows, I guess

Phrancis

Not terribly interested in the controversy right now though, I'm sure I will at some point

Quill

void: return types aren't things
static: functions are default static, unless they use internal properties
public: well, kinda
private: you can use advanced closures to limit access

Phrancis

That's rough, but OK

Quill

3:30 AM

prototypes are absolutely the opposite of static, but some functions use internal properties that are kinda both

Phrancis

So if you don't return something, it's void by default eh?

Quill

I suppose so

the value of the function would be undefined

Phrancis

Close enough, I suppose

Quill

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

Phrancis

What about object variables or properties? Are those just var inside the object code?

Quill

3:32 AM

Babel.JS has some serious logic

Dan Pantry

back, did I miss anything

Quill

not really

Phrancis

^

Dan Pantry

@Phrancis public/private are not supported, no

Quill

@Phrancis internal properties are accessed like Java (?) this.foo = foo

ES6 to ES5 example

so static is a valid ES6 keyword

Dan Pantry

3:37 AM

Yep. It essentially compiles to this

function MyClass() {

}
MyClass.staticMember = function() {}

class MyClass {
  static staticMember() {}
}

Phrancis

OK cool

I think I get it

var addNums = {
    add: function(a,b) {
        return a + b;
    }
}
var obj = Object.create(addNums)
console.log(obj.add(2,3)); //5
console.log(obj.add(99999,null)); //99999

Dan Pantry

BTW there is no need to use prototypes all the time unless you want to use/simulate inheritance

That code you just linked would work just fine without Object.create

Phrancis

Is it "use" or "simulate"?

waits for "it depends"

Dan Pantry

It's technically simulate because prototypes != OOP inhertiance

Quill

The thing about that is that you can attach prototypes to other primitive types using .create

Dan Pantry

3:41 AM

(Which is why I dislike "OOP Javascript")

Phrancis

I would've figured JS devs would embrace the functional-ish style, instead of try to shoehorn OOP into it

(just an observation, nothing else)

Dan Pantry

@Phrancis Most do

most places you hear the words "OOP Javascript" are from enterprises or recruiters

Using OOP to describe js is quite funny because in js literally everything is an object

2

Phrancis

I kinda like functional personally, seems usually simpler

Dan Pantry

You couldn't get any more object-orientated than that

But people use OOP to denote 'classical' OOP like C#/Java

The functional stuff is a lot more flexible and easier to reason about

It encourages you to move away from storing state

and that makes stuff a LOT easier to test

Alex L

For a long time I coded nothing but functional PHP

Two bad things mixed together

Phrancis

3:44 AM

But JS has to be objects because it normally runs inside a browser program?

Dan Pantry

(or, rather, it encourages you to limit state)

@Phrancis No, it's nothing to do with the fact it runs in a browser.

Phrancis

oh

Dan Pantry

I mean, if you tried hard enough, you could write C scripts in the browser.

Alex L

Ew

Quill

these days lots of sites run on node and react

Dan Pantry

3:45 AM

The everything-is-an-object model is just part of javascript's programming model

A very valuable part, IMO. Having functions as objects is super useful

Phrancis

Is JS object-ism influenced much by HTML DOM and such?

Dan Pantry

I don't know. Possibly?

The W3C uses IDL specs to describe HTML elements

And those IDLs do quite closely resemble the JavaScript interfaces

So, maybe?

Phrancis

OK

Alex L

Haha hey @Quill just peeked at your profile, I'm 17 too :P

Phrancis

I got one more question/request... if I may

Dan Pantry

3:47 AM

Go for it, @Phrancis.

Quill

@AlexL :-)

Dan Pantry

I was 17 once. it was terrible

Phrancis

I often see things in JS that take a function as an argument, and that seems a bit "odd" to me at least. Normally these blocks end with a }); ... From my understanding a function returns an argument (including void) but I just can't seem to place it in my head in a way that makes sense

Or is it )};?

Dan Pantry

> I often see things in JS that take a function as an argument

Alex L

});

Dan Pantry

3:51 AM

This is called a higher-order function. It's a staple of functional programming.

You're thinking of something like this, right?

Phrancis

I think so

Dan Pantry

foo(function() { return doSomething() })

Quill

I tried to do JavaScript callbacks in C# earlier and it went horribly

Dan Pantry

or perhaps

foo(() => doSomething())

Phrancis

I only recall the first syntax @DanPantry

But yes, that

Dan Pantry

3:52 AM

@Quill Yeah, that's because callbacks are shitty. Use Task, which is C#'s promise.

LINQ in C# uses higher order functions correctly.

Quill

@DanPantry literally so horribly

Dan Pantry

There's a lot wrong in that file and I don't know where to start :P @Quill

@Phrancis What's the confusing part?

Phrancis

I don't know the confusing part yet, it just seems so foreign

Dan Pantry

@Phrancis It's becoming more and more common

Java and C# both use it now

Phrancis

Like I couldn't write one of those that does anything useful (like add 2 numbers) to save my life

Dan Pantry

3:54 AM

@Phrancis no, but you could use them to provide a functor for iterating over an array, for example.

Quill

@Phrancis you don't need to add them in the parameters by default

Dan Pantry

function each(array, functor) {
  for(var i = 0; i < array.length; i++) {
    functor(array[i], i, array)
  }
}

each([1,2,3], console.log)
> 1
> 2
> 3

Alex L

I felt forced to use tons of callbacks in my latest question

Dan Pantry

A better one would be the higher order map function..

function map(array, functor) {
  const newArray = []
  for(let i = 0; i < array.length; i++) {
    newArray[i] = functor(array[i])
  }
  return newArray
}

const newArray = map([1, 2, 3], a => a * 2)
console.log(newArray)
> 2
> 4
> 6

Phrancis

Presumably, functor is a different function?

Dan Pantry

3:57 AM

In each, functor is any function. It is passed 3 arguments; the object in the array, the index of that object, and the array itself.

Quill

var things = {
    house: houseFunc,
    floor: floorFunc,
    abc: abcFunc,
    foo: fooFunc
};
var thing = "abc";
things[thing]();

Dan Pantry

In map, functor is a function that takes an argument - which is an object. The return value of that function is then assigned to the same index as the originating objet in a new array, and the changed array is returned.

Quill

you might use that instead of a switch statement

Dan Pantry

This allows you to change a collection without modifying the original collection, which is handy.

javascript already has a map function, though.. Array.prototype.map, or [].map(..). It was just an example.

Phrancis

Is that way of doing things generally used in functional, e.g. instead of a for loop going over a map/array or whatever?

Dan Pantry

4:01 AM

it is generally preferable to use the functional alternatives yes

Quill

 let i = 0; i < array.length; i++

Dan Pantry

forEach isn't used much in my codebase because I prefer to use immutable functions and forEach promotes side effects

Quill

isn't let for constants?

Phrancis

I've never seen the word functor used, so it's a bit unfamiliar

Dan Pantry

const is for constants.

Quill

4:02 AM

meanwhile I really really like forEach

Dan Pantry

@Quill forEach is bad and you should feel bad. 8)

Quill

well let is constant syntax in Swift

Dan Pantry

The problem with forEach is that it encourages side effects

Quill

@DanPantry m e e e e e e h h h h h

Phrancis

let is the ES6 syntax for var AFAIK

Dan Pantry

4:02 AM

@Phrancis sort of

Phrancis

Well, better than var, but same idea

Dan Pantry

let is a block-scoped variable declaration which is mutable

it's basically a less shit var

Quill

LOL

79

A: LOL debugging are we? - Stack Overflow homepage alerts false

This one was my fault. UPDATE: Our 5 Why Assessment of the situation Problem: there is an alert on every page of Stack Overflow Why? Because Matt deployed a version of the Careers ad code with a debugging line in it Why? Because he forgot to remove it before pushing his change Why? Because...

Dan Pantry

lol

Phrancis

In summary, am I gathering that JS really should (often) be used like other FP (Lisp, F#, Haskell, etc.)? And was that FP already there all along and I just missed? Or do people just really suck at JS (in general)?

Dan Pantry

4:08 AM

@Phrancis FP has become more popular with libraries like lodash/underscore, ramda etc whicih have only really exploded into popularity since the advent of npm

Before that point it was mostly jQuery soup (because back in the dark ages, no standards existed, jQuery was necessary to maintain compatibility between IE and not-IE land)

Quill

There's also a lot of people that really suck at JavaScript

Dan Pantry

Yes, ^^^

Phrancis

lol

Dan Pantry

A lot of people don't view JavaScript as a "real" programming language (many CRitters included)

Quill

the whole no var necessary, no complexity in static, private, public

Dan Pantry

4:09 AM

As such they don't learn the nuances of it and such

And there's no doubt that JavaScript is the most popular (in terms of how much it is used) language in the world simply because it is on every single web page.

So you have a large pool of idiots

Quill

Bad JavaScript has more side effects than WebMD articles

Dan Pantry

But since ES5/ES6 and npm's existance, javascript has gotten a lot better

Quill

not to mention the massive amounts of tutorial pages

Phrancis

I've never met someone who has died of an illness from JS, but ok lol

Quill

often a lot of blog tutorial posts are horrible in quality and should feel bad for opening their blog

Dan Pantry

4:11 AM

It's not that blog tutorials are horrible, as such.

It's just that they rely heavily on jQuery as a crutch

a lot of people do

And that comes down to people viewing javascript as a toolkit rather than a language

Quill

and you get w3schools top of SEO

Phrancis

LOL^

Dan Pantry

Yeah, never pay attention to w3schools. MDN FTW

Quill

There's never a correct way to learn JS

Dan Pantry

w3schools is truly an awful resource, I have a plugin that makes sure it is removed from my search results

Phrancis

4:12 AM

W3S has half-reasonable SQL tutorial (the other half is broken because bad JavaScript)

Quill

no official source, so you get mismatched tutorials that teach you different things

Dan Pantry

It is a lot of fluff with not much useful info on at all, compared to MDN whicih has user curated standards docs

Javascript is basically the wild west of programming

If you do it right, though, it can be really elegant and neat and some of the most beautiful code you've written

Phrancis

No doubt^

Dan Pantry

If you do it wrong you end up with something that resembles an italian dish

I believe they call it "Mom's spaghetti"

~~knees weak arms are heavy~~

Phrancis

Had it going through my head before last post

Quill

4:14 AM

Eminem - "Mom's Spaghetti" (Music Video)

►

Dan Pantry

truly the reason why the internet was created.

Phrancis

lol

I have to say, FP feels quite "wild" compared to OOP, but maybe it's all part of the fun of it

You guys are great, don't let anyone tell you otherwise.

Alex L

lol you too there Phrancis

Quill

thanks @Phrancis, you too man :-)

Alex L

I remember when you first joined CR :')

Quill

4:29 AM

also definitely good for JS programmers, or maybe programmers in general:

devdocs.io

End of Life notification for IE8~10

Dan Pantry

hooray :D

ding dong the witch is dead

Phrancis

About fLIcking time!

Quill

in JavaScript on Stack Overflow Chat, 1 min ago, by ajaxGuru

why don't they change "node" in the doc to "item" or "id"

in JavaScript on Stack Overflow Chat, 1 min ago, by Quill

because they're nodes not items

in JavaScript on Stack Overflow Chat, 1 min ago, by ajaxGuru

people at first think nodejs

;-;

Phrancis

4:46 AM

Sounds like maybe someone who doesn't know JSON or XML much to know what nodes are

StackExchange

5:03 AM

0

Q: Pomodoro Timer in Javascript

I've made a Pomodoro Timer application. All it does is countdown from a time in minutes given by the user to 0:00. It does this first for a session time, and then switches to a break timer and continuously loops like this until the application is paused or closed. The time can be adjusted by cli...

javascript

Quill

gist: A customizable userscript for redesigning the PPCG website., 2016-01-05 18:25:18Z

PPCGUserscript.user.js

oh my

well this conversation in SO's JavaScript was one big facepalm

Dan Pantry

5:28 AM

The syntax I just linked in there is SUPER interesting, though

function sql(string, escapedArguments) {
  console.log(arguments)
}

const username = 'bar'
sql`SELECT * FROM accounts WHERE username=${username}`

sql will give you an array of strings which you can concatenate together

you concatenate them with the values of escapedArguments

so the first + second string in string would be concatenated with the first argument in escapedArguments

It's hard to explain

but basically in the example I gave

string will be ["SELECT * FROM accounts WHERE username=", ""] and escapedArguments will be { 1: 'bar' }

Quill

so how do you transform that into a query?

Dan Pantry

in that example, you would do something like

string[0] + escapeSomehow(escapedArguments['1']) + string[1]

Quill

right. that seems a little pointless

Dan Pantry

It isn't

Quill

what if you do multiple arguments

Dan Pantry

5:32 AM

Well, I gave a hard coded example lol

you could of course alter the code so it works with all numbers of args

Quill

5:55 AM

> me: can you provide a gist please?
*provides a completely unrelated gist*
me: can you provide one that's actually about the problem you want help with?
him: oh, you want an example

how does one

StackExchange

8:29 AM

0

Q: Capital market dashboard page

Problem statement The Capital market exercise contains a dashboard page of account names, built using AngularJS. Solution /* AccountsController.js */ appRoot.controller('AccountsController', function($scope){ $scope.rows = [ { name: 'Brokerage Account 3', ...

javascript html css angular.js

StackExchange

11:31 AM

-1

Q: How to optimize nested if?

Hi I want to know is there a better way to do this? condition_a is more important than b, b is more important than c, etc. var slot = condition_a if (!slot) { slot = condition_b if (!slot) { slot = condition_c if (!slot) { slot = condition_d if (!slot) { slot = c...

javascript

StackExchange

2:53 PM

0

Q: Nodejs Async get request

I made a small application that makes async calls to an api (local in this case). The target application will make a million of calls per day. With maxSockets set to 1 I had a time of 45 seconds. With maxSockets = 10, the execution time has dropped to 40 seconds. How can I make this code go fa...

javascript performance node.js

StackExchange

3:16 PM

0

Q: angularJS - changing page language using a service

I'm rebuilding a basic webpage using AngularJS, and want to implement changing languages when clicking an icon. So far I've build a service called 'langService', that has functions to set and get language. I then pass the service a value (say 'eng' or 'slo') with the set language function when cl...

javascript angular.js

StackExchange

7:22 PM

0

Q: Javascript extensive Promise chaining

I recently started working with JS Promises. What I always like to do, is create function, which returns a Promise with the final desired result, but I only do 1 operation/then. Consider something like this (this fetches the versions of an npm package in an array in reverse order): function pack...

javascript promise

StackExchange

8:57 PM

0

Q: XSS Sanitization of RSS Feeds using JS

I need to pull an rss feed with links, headlines, and descriptions onto the front page of a website, and while I would like to think the source is trustworthy, you can never rule out malicious actors. I also would like to avoid iframes, since a sufficiently secure iframe sandbox would impact the ...

javascript html security rss

Transcript for