Web Development

Dan Pantry

13:54

@EBrown AngularJS is more like the straight A* student, and jQuery the dropout

EBrown

@DanPantry I can agree with that.

$(".main-datalist-results > *:not(#results-template)").each(function (i) {
    if ($(".purchase-quantity", this).eq(0).val() > 0) {
        if (ds.length > 1)
            ds = ds + ","
        ds = ds + "{\\\"ItemNumber\\\":\\\"" + $(".item-number", this).eq(0).html() + "\\\",\\\"Quantity\\\":" + $(".purchase-quantity", this).eq(0).val() + "}";
    }
});

I hate how that looks, which is why I hate jQuery.

There has to be better ways to write that.

Mast

Agreed.

Dan Pantry

That doesn't really look like a jQuery problem.

In the same way that I could write code similar to that in ASP MVC C# and not blame it on ASP MVC

EBrown

Well, I'm not great with JavaScript that's for sure, but still. jQuery just makes it such a pain in the arse to work with, I never have time to learn best-practices.

Dan Pantry

you could rewrite that to use objects and then JSON.stringify at the end

EBrown

13:57

I hate JavaScript, because I hate UI work.

I prefer backend Framework work.

Dan Pantry

I'm sorry but the only ugly part of that code is the bit that's not jQuery

Malachi

@EBrown I think that jQuery makes it easier

Dan Pantry

I don't see how you can blame that on jQuery or JavaScript in general

That's just someone not used to JavaScript/not someone who likes JavaScript using JavaScript

EBrown

Which is why I took about a week and developed a much more stable framework for this website.

Mast

I hate UI as well, but never used JS for it. Still hate JS.

Malachi

13:58

but I am with you on hating UI work....lol and writing content....get me a writer for that

EBrown

@DanPantry Regardless of the inner workings, and my lack of skill in JavaScript, this whole line ($(".main-datalist-results > *:not(#results-template)").each(function (i) {) pisses me off.

skiwi

Doing some UI stuff isn't that bad, getting paid for googling aroundf or a bit and playing with the layout until it looks nice

Dan Pantry

$('.js-datalist-results>li').each(function() { ... });

That code reeks of just bad design in the first place

I don't see how any of that has anything to do with JavaScript and everything to do with just being an ugly solution to a badly thought out problem. and that's not JavaScript's fault

EBrown

@DanPantry It is, though. JavaScript should have better, easier ways to do simple things like that.

Dan Pantry

@EBrown it does have simpler ways. I just listed them

EBrown

14:01

$('.js-datalist-results>li').each(function() { ... }); is no simpler...lol

Ismael Miguel

I don't get what's wrong with it

EBrown

It's ugly.

Ismael Miguel

But somewhat fast

Dan Pantry

@EBrown it eremoves the heavy coupling of the CSS selector.

If you really want to use plain JS you can do this:

const results = document.querySelector('.js-datalist-results>li');

EBrown

The problem is that I have to ignore the first row.

Dan Pantry

14:02

results.forEach(function(element) { .. })

Ismael Miguel

.js-datalist-results>li is a slow selector. .js-datalist-results li is way faster

Dan Pantry

@IsmaelMiguel it's not the selector he suggested, it's just his original selector had an > in it

Ismael Miguel

@DanPantry const in Javascript?

Dan Pantry

@EBrown how else would you suggest that?

@IsmaelMiguel ES6 is a thing, friend

EBrown

(Which is the the *:not(#results-template) bit.)

Dan Pantry

14:03

const and let are now things that exist

Ismael Miguel

@DanPantry Too soon.... Too soon

EBrown

Also, we have to support older browsers.

Dan Pantry

@IsmaelMiguel transpilers also exist

Ismael Miguel

Too soon for that...

Dan Pantry

You can use a transpiler for backwards compatibility.

Ismael Miguel

14:03

ES6 is still a baby

Malachi

hey guys this is getting pretty specific, and the conversation is getting pretty long, can we move it to another chat room more specified for this conversation?

Ismael Miguel

@Malachi The only specificity is the language and the version, in my opinion

Dan Pantry

ES6 is new, yes, but transpilers transpile to ES5, which is most definitely not new and can be used in lots of browsers all the way back to IE8, which is also not new.

Malachi

@IsmaelMiguel that's cool, just beginning to be a big conversation, which is okay, but it can flood business out of chat quickly. I enjoy the conversation and would love to follow the chat in another room

Ismael Miguel

@Malachi Can you make the room? If the others approve

EBrown

14:06

@Malachi I'm done with my anti-JavaScript rant anyway.

Dan Pantry

im happy to take this to another room

Ismael Miguel

Ping me the room later

Dan Pantry

although @IsmaelMiguel you should bear in mind that this main conversation is because @EBrown does not like javascript, rather than asking for improvements on the code he posted :P

Malachi

what should I call it?

Dan Pantry

@Malachi javascript vs reasonable people

4

Malachi

14:07

lol

EBrown

JavaScript sucks Donkey Balls

Or is that too blunt?

Ismael Miguel

Too graphic

EBrown

Damn

Dan Pantry

JavaScript sucks 2d donkey balls

javascript.png

Ismael Miguel

Nope, still uses too many graphics

Jsucks

Done

Malachi

14:08

how about Javascript Libraries

Dan Pantry

@Malachi lol

Ismael Miguel

Fine by me

Vogel612

so... Malachi, go use your room owner privileges

you should be able to create the room from the move messages dialog..

EBrown

You should make it something cunning.

Ismael Miguel

Greetings

Everything Web

EBrown

14:12

Monking

Ismael Miguel

(not mine)

So, what was wrong with that code?

EBrown

It's just ugly, man.

Ismael Miguel

Why?

EBrown

The mismannered way you have to manipulate JavaScript to server your needs is unpleasant.

A good language doesn't require the programmer to work around it.

Dan Pantry

Code for reference

$(".main-datalist-results > *:not(#results-template)").each(function (i) {
    if ($(".purchase-quantity", this).eq(0).val() > 0) {
        if (ds.length > 1)
            ds = ds + ","
        ds = ds + "{\\\"ItemNumber\\\":\\\"" + $(".item-number", this).eq(0).html() + "\\\",\\\"Quantity\\\":" + $(".purchase-quantity", this).eq(0).val() + "}";
    }
});

The only ugly things I see here are:

Ismael Miguel

14:13

Javascript was made to be changed to the way you wish

Malachi

← 77 messages moved from The 2nd Monitor

Ismael Miguel

.main-datalist-results > *:not(#results-template) really?

EBrown

Has to be.

Ismael Miguel

Who made that selector?

Dan Pantry

- Selector (not Javascript)
- The ugly JSON escaping (bad JavaScript)
- Unused i
- uncached `.purchase-quantity` value

the biggest problem here is you're mixing DOM access with business logic

Ismael Miguel

14:14

That selector is awful

God!

EBrown

That was a copy/paste from another project here.

Ismael Miguel

OH GOD!

EBrown

I don't do JavaScript.

Dan Pantry

Whoever wrote that JS was bad at JS

that is not representative of javascript - at all

Malachi

thank you, guys.

EBrown

14:15

I already told you they were bad at VB.NET.

Dan Pantry

that JSON object is just.. hilarious

Ismael Miguel

And css

Dan Pantry

and web dev, in general

EBrown

That JSON object gets posted back to the server.

Dan Pantry

what browser did this have to support?

Ismael Miguel

14:15

That selector will give me nightmares!

EBrown

            if (ds.length > 2) {
                $('#addToCartModal').modal('show');
                $.ajax({
                    type: "POST",
                    url: "/Entry.aspx/AddToCart",
                    data: '{Items: "' + ds + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnAddToCartSuccess,
                    failure: function (response) {
                        //alert(response.d);
                    }

Ismael Miguel

o.O

THAT JSON IS BROKEN!

EBrown

I commented out the failure alert because it's not necessary.

Ismael Miguel

IT IS INVALID!

Dan Pantry

"what's single responsibility principle" - the developer who wrote this code

EBrown

14:16

No it's not.

Ismael Miguel

It is

Dan Pantry

It is.

EBrown

Dan Pantry

\\\" becomes \" which is invalid json

Ismael Miguel

'{Items: "' + ds + '"}' should be '{"Items":"' + ds + '"}'

EBrown

14:17

You tell that to ASP.NET.

Dan Pantry

"{\\\"ItemNumber\\\":\\\"" + $(".item-number", this).eq(0).html() + "\\\",\\\"Quantity\\\":" + $(".purchase-quantity", this).eq(0).val() + "}"

this becomes

i cant even

i dont even want to write this out

EBrown

Yes, I know that bit, technically in the markup it's wrong, but if you omit the \\\" bit, and turn it into \" as expected, ASP.NET refuses to recognize it because somehow that \" is broken down to ", which is treated as a literal.

I had the exact same thought you do, but it doesn't work like that with ASP.NET.

Dan Pantry

the eval'd value becomes

'{"ItemNumber":"0","Quantity":1}'

I replaced first $ call with 0 and second with 1

EBrown

When it hits the server, correct.

Dan Pantry

so I suppose it is valid

the issue i have with that code is

why the hell is he writing theo bject by hand

Ismael Miguel

14:20

.main-datalist-results > *:not(#results-template) --> is that this hurts me deep in my soul!

EBrown

Because he (and just as well, I) don't trust JavaScript.

Dan Pantry

@IsmaelMiguel i know, right? could have just done .datalist__results .datalist__result

Ismael Miguel

.main-datalist-results :not(#results-template) --> This is better

Dan Pantry

@EBrown that's stupid.

I'm sorry but that is really stupid

There is no reason to not 'trust' javascript

the browser vendors

Ismael Miguel

@DanPantry XSS

Dan Pantry

14:21

except IE

EBrown

We only support IE.

Dan Pantry

@IsmaelMiguel XSS isn't going to be fixed by kludging a JSON string like that

@EBrown what version?

Ismael Miguel

@DanPantry I know

EBrown

So don't bring vendor arguments in here, because we are required to only support IE from 7 through 11.

Now, that particular setup only has to support 9/10/11.

Dan Pantry

our office has to support ie9 for a legacy project and angular in it's entirey works there

EBrown

14:21

The 7/8 versions see a completely different site.

Dan Pantry

and angular uses JSON.stringify extensively

EBrown

They don't get any fancy JavaScript.

Dan Pantry

JSON.stringify isn't fancy javascript, its built-in.

EBrown

I know that, but then I have to create objects.

And add items to them.

And I just don't have time for that.

Dan Pantry

....what?

EBrown

14:23

I would rather work on the core site functionality than mess around with JavaScript stuff that I really hate using anyway.

Mast

@DanPantry It's a very important part.

EBrown

I'm the only person in this company who knows even a little JavaScript, and I just don't enjoy it.

And I don't have time for it.

Dan Pantry

I'm sorry did you just say you would rather hack together nasty string concatenation than use javascript the way it was meant to be used?

EBrown

And it doesn't create any nasty bugs I cannot solve.

I didn't really hack it together, I Copy/Pasted it from other stuff.

And it works.

It just, bloody, works.

Dan Pantry

sure, it does

as long as you aren't a maintainer

if you're going to complain about something being ugly and then refuse to do it a way that actually works

EBrown

14:24

As soon as I start messing with extra, complex, stuff, it can fail.

Dan Pantry

you lose all right to complain it's ugly

EBrown

I wouldn't even know where to start with it, because JavaScript is so piss-poorly documented and standardized, that there's no easy way to find out what to do.

And just as well, the jQuery is required. We cannot remove or replace it (bootstrap, not my choice.)

I cannot swap it out for Angular, because our UI dev does not want to use it.

Honestly, the only reason this is here is because the owner wanted us to "eliminate page refreshes."

Dan Pantry

var ds = [];
$('.datalist-results *:not(#results-template)').each(function() {
  if($('.purchase-quantity', this).eq(0).val(0) > 0) {
    ds.push({ ItemNumber: ..., Quantity: ... });
  }
});
var json = JSON.stringify(ds);
// send json to server

and that's without removing the awful selector, without changing each to map and caching .purchase-quantity

var items = $('.datalist-results *:not(#results-template)').map(function(item) {
  return { ItemNumber: ..., Quantity: ... };
});
var json = JSON.stringify(items);

I presume the check for .purchase-quantity is to check whether or not the quantity is greater than 0.

EBrown

I do that server side.

Dan Pantry

You also do it client side, apparently

if ($(".purchase-quantity", this).eq(0).val() > 0) {

that's why I omitted it

EBrown

14:29

Yeah, but I really don't need to.

Dan Pantry

yeah, again - that's why I omitted it

EBrown

It's only there because the server was having JSON issues early on.

I assume the var items means that items will be lower-case in the JSON?

Dan Pantry

No, var items is a variable declaration.

It's no different from, say, int items

(except it's not an int but an array)

EBrown

Right, but what about telling the server that it's the Items parameter?

Or were you only intending to use it as the array of items?>

Dan Pantry

function addItemsToCart(items, onSuccess, onFailure) {
  var payload = { Items: items };
  var json = JSON.stringify(payload);
  $.ajax({
    type: 'post',
    url: '/entry.aspx/AddToCart',
    data: json,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: onSuccess,
    failure: onFailure
  });
}

function updateCart() {
  var cartItems = $('.main-datalist-results > *:not(#results-template)').map(function(element) {
    var item = {
      ItemNumber: $('.item-number', element).val(),

my stab at it (which includes your items parameter)

it's still not perfect but it's a darn sight better than what you had

EBrown

14:34

Damnit Visual Studio. Such a pain in the arse.

Dan Pantry

lol

I can't guarantee it will work or even do the same thing, I haven't tested it

it should be just a refactor but I don't really use jquery so -shrug-

EBrown

"Oh I see you selected text, let me just erase your clipboard."

Dan Pantry

i have to use the vim plugin to make vs bearable

Ismael Miguel

Just use Notepad++

Dan Pantry

@IsmaelMiguel notepad++ won't compile c# code and typescript and integrate with TFS

Mast

14:35

@IsmaelMiguel Notepad++ isn't colouring my JS all of a sudden...

Dan Pantry

all of which, unfortunately, my company requires

otherwise I use vim (or sublimetext)

Mast

At least they're using some form of source control.

Ismael Miguel

@DanPantry You can provide it a compiler, and it will compile the code

Dan Pantry

@IsmaelMiguel yes, but it won't manage my C# sln/proj files

Ismael Miguel

@Mast That's weird. Are you sure you didn't disabled highlighting?

@DanPantry True... :/

Dan Pantry

14:36

@Mast honestly, given the amount of a PITA TFS is I'd rather use no source control over TFS

Also doesnt help other developers do monolothic commits and don't use branches

Ismael Miguel

TFS?

Dan Pantry

microsofts bastardized attempt at SVN

Ismael Miguel

SVN?

Dan Pantry

subversion, old centrallized source control

Ismael Miguel

Oh

Dan Pantry

14:37

branching model involves creating separate copies of the entire source control tree for each branch

Ismael Miguel

I use backups

Mast

@IsmaelMiguel You never heard of SVN?!

Dan Pantry

and every commit has to be checked into the main server

Ismael Miguel

i barely can work with Github

Dan Pantry

I use git

Mast

14:38

Raise the alarm!

Dan Pantry

that's because you don't work on github

Ismael Miguel

@Mast I've heard before

Dan Pantry

github hosts git repos

Ismael Miguel

I've never used it or knew what it was

Mast

Git is good, SVN is good, just pick one. Don't use none.

Dan Pantry

14:38

I prefer git to SVn

SVN

EBrown

GIT > SVN

Unfortunately.

Dan Pantry

but im not teetotal enough to say SVN is bad

Mast

GIT is awesome, just a PITA to set up

Dan Pantry

just git suits my preference more

Ismael Miguel

I have no idea how it would work for me

EBrown

14:39

GIT is more powerful and SVN leaves a bit to be desired.

Dan Pantry

it is? :S

Mast

Every time I set up a new project it takes me a couple of hours to figure out how.

I never got the hang of it.

Dan Pantry

get the command line

Mast

Tried both.

Dan Pantry

git init && touch .gitignore && git add -A && git commit -m "initial commit"

or, if you have git extras

Ismael Miguel

14:40

How would GIT work with a website?

Dan Pantry

touch .gitignore && git setup

Ismael Miguel

To control it's source?

Dan Pantry

@IsmaelMiguel you'd store all of it's source in a git repository and then deploy it to amazon s3/whatever with a shell script

Mast

@IsmaelMiguel Just like with any other project.

Malachi

should have just dumped you guys into the Nth Monitor.... LOL you guys aren't really talking about JavaScript anymore...lol it's all good

Ismael Miguel

14:40

But I don't have amazon s3

Dan Pantry

@IsmaelMiguel you can use anything , doesnt have to be S3

github.com/lambdaexpression/cv

see this for example deploy script to s3

Ismael Miguel

We are talking about a service, which partially is about Javascript

@DanPantry I use a custom server

My boss pays for it

Dan Pantry

@IsmaelMiguel the thing I linked is my website at cv.lambdaexpression.io

EBrown

Well I'm still testing out @DanPantry's JavaScript rewrite of this crap.

Mast

@DanPantry Which creates a git repo in the local directory and adds the current files inside the current directory?

Dan Pantry

14:42

@Mast yes

Ismael Miguel

And besides, it would be a pain to test 1 character change

Dan Pantry

@IsmaelMiguel that's why you test on your local machine using a local http serverwhich points at your working directory.

or use automated tests.

Ismael Miguel

I can't

It's a centralized service that depends on a defines structure

with over 150 websites

Dan Pantry

if you can't test it in isolation, well

Mast

@DanPantry Stickied. Gonna try it with the next project.

Dan Pantry

14:44

@Mast Good luck, git is great but it's not easy (for newbies)

Mast

Using it is easy, SVN as well. Setting it up has always been my problem with it.

Dan Pantry

here's an example of a microservice REST program, you could look at the history to see how it developed and how I set it up. github.com/danpantry/identity

it's very basic and i haevn't finished it yet, but still

EBrown

Alright Dan, we're about to find out if this works

Dan Pantry

@EBrown Nothing ever works the first time :-)

2

EBrown

"Internal Server Error" on postback.

Dan Pantry

14:48

@EBrown good stuff :P

EBrown

Great.

It's because of the JSON.

Dan Pantry

well, Ididn't expect the client side bit to work so I am pleasantly surprised

What is it complaining about?

@IsmaelMiguel here's an example of a full-stack application hosted at champion.gg

github.com/danpantry/championweb

not sure how that's deployed, though, it's only a fork

EBrown

Oh I see, your JSON structure is not the same as it expects, methinks.

Dan Pantry

@EBrown it should be exactly the same 0.o

EBrown

Not even close.

Dan Pantry

14:50

it is exactly the same

unless the values are different

I'm not sure what .eq(0).html() does

Ah

it selects the first element from the set and then returns the html code

So the structure should be the same, its just the values that are different

EBrown

Not even close, man.

Dan Pantry

expcet for the part where you for some reason post {\\\"ItemNumber\\\":\\\

EBrown

Starts off as: "{"Items":{"0":{"ItemNumber":"","Quantity":""}

Dan Pantry

oh bugger

I know why

jquery's map returns an object instead of an array

because, you know, that makes sense

(it doesnt)

EBrown

I knew there was a reason I used simplistic markup. :P

Dan Pantry

14:53

every other map returns an array :P

and I did dsay I don't use jquery

> var items = [ { ItemNumber: "0", Quantity: "1" } ]
undefined
> var payload = { Items: items };
undefined
> JSON.stringify(payload);
'{"Items":[{"ItemNumber":"0","Quantity":"1"}]}'
>

if the map worked you'd end up with that.

EBrown

Except that's not how it's generated.

Yeah.

I get all this extra stuff at the end.

"length":38,"prevObject":{"0":{"location":{"ancestorOrigins":{"length":0}

Dan Pantry

Ahhhhhh, map sets index first and element second.

EBrown

Which are not valid.

At least, not for what the server is expecting.

Dan Pantry

this is literally just because of my inexperience with jQuery :P

.item-number isnt an input is it?

it's just a field

that would explain why you used .eq and .html

EBrown

No, it's a <span>.

Yeah.

Dan Pantry

14:56

replace updateCart with this.

function updateCart() {
  var cartItems = $('.main-datalist-results > *:not(#results-template)').map(function(_, element) {
    var item = {
      ItemNumber: $('.item-number', element).eq(0).html(),
      Quantity: $('.purchase-quantity', element).eq(0).html()
    };
    return item;
  });
  addItemsToCart(cartItems, OnAddToCartSuccess, function() {})
}

EBrown

<tr id="results-template" class="none">
                                        <td><span class="item-number"></span>
                                            <br />

Dan Pantry

also, Quantity should have eq(0).val() not eq(0).html()

sorry, Im sleepy. Check out the edit I made.

EBrown

Yeah, the debugger was complaining on return items...lol

Dan Pantry

it would have also complained on me passing updateCart to addItemsToCart.

EBrown

I was replacing that manually.

Dan Pantry

14:58

I really need to sleep lol

EBrown

I'm still getting a context and length parameter.

Dan Pantry

fk jquery

If you're still here in a few hours I'll help you rewrite this completely

but I have like

EBrown

Face it man, jQuery just doesn't work well.

I'll be here all day.

Dan Pantry

1 hour left in work

and there'se a lot of stuff I need to do

EBrown

It's 1100, and I leave work at 1700.

Dan Pantry

15:00

Yeah, that's why I avoid jQuery. My main point though is that javascript is not the problem

And javascript is not a bad language

but it CAN be written ugly/badly - just like every other language

For example - C# still has GOTO

EBrown

Yeah, but you cannot use GOTO for a line number unless you're Jon Skeet.

Dan Pantry

Jon Skeet doesn't code. His code writes itself.

EBrown

But, if you're willing to help me rewrite this, and it looks cleaner/better, I'll consider retracting some of my JavaScript hate.

Jon Skeet is the Chunk Norris of programming.

Dan Pantry

No problem. My rate is £20/h. Just kidding, I'll do it for free.

Just give me... 2 hours. I'll be home then.

EBrown

Right on, I'll still be here at work.

Ismael Miguel

15:03

@DanPantry A League of Legends' website?

Dan Pantry

@IsmaelMiguel yes. it's written in nodejs and angular (albeit badly)

Ismael Miguel

Oh, it is

I don't use those :/

Dan Pantry

The point is to show how git can be used for real websites, both static and server-hosted.

Dan Pantry

16:52

Hello

I am home now

EBrown

Very nice, is it a two hour drive for you?

Dan Pantry

No, it's a 30 minute walk

but it's 20 minutes from leaving work until that 30 minute walk

I finish at 5pm

EBrown

What timezone?

UTC+?

Dan Pantry

UTC

I think

EBrown

Ah, I'm UTC-4 atm.

Eastern Daylight Time.

Dan Pantry

16:55

MURIKA

im a brit so

EBrown

*Murica

No K, just a C.

Sometimes, 'Merica

I have a few British friends.

One is from Cannock, IIRC.

Dan Pantry

you have another one ;-)

I live in Wales, no idea where cannock is

I'm all out of pizza and i got a 20% raise today... well... I know how to solve this

Anyway, where do you want to start?

EBrown

Nowhere specific to me.

I can start sending JS and HTML over.

Plus I'm in maintenance mode atm. Just refactoring, cleaning and optimizing code.

So if you have any ideas of a good starting base, let me know man.

I'm all ears.

Also, now that you mention it, it's Pizza Day here at work as well.

Dan Pantry

Well, you know your code better than I do :)

You have pizza day at your work? I'm jealous

EBrown

Lunch starting in 5 minutes.

Or so.

Dan Pantry

16:59

Although getting a 20% raise today like it was nothing kinda makes up for not haing pizza day.

Web Development

Transcript for

Web Development