These are chat archives for FreeCodeCamp/HelpJavaScript

28th
Jan 2019
Kevin Peña
@kebien6020
Jan 28 00:17
@KWFE since you always return in your switch all of the if/else if are never executed (well, unless you pass something to cc which is not in the cases)
@KWFE also the if/else if code is equivalent to
if (count > 0) {
  return count + " Bet";
}
return count + " Hold";
Kevin Peña
@kebien6020
Jan 28 00:41
@KWFE Just looked at the challenge description. Are you sure you want to return from the switch statement? It seems to me that it should just change the value of the global variable count
Riadh
@KWFE
Jan 28 01:22
@kebien6020 thanks but still looking for the solution
Kevin Peña
@kebien6020
Jan 28 01:24
@KWFE You already changed it so that you no longer return from the switch, is that right?
@KWFE In that case, you should have your break statements as before
@KWFE Also, make sure that you are not overwriting the global count but adding or removing from it. (+= and -= assignment operators might help)
Pagnito
@Pagnito
Jan 28 01:28
damn i dunno some ppl write code on a white background without any syntax formatting and coloring
Riadh
@KWFE
Jan 28 01:30
@kebien6020 @kebien6020 give me couple of minutes i'll try again
Brad
@bradtaniguchi
Jan 28 01:33
@KWFE Keep working the problem, that's the actual learning experience. Even if it takes a while, the process is where its at
Riadh
@KWFE
Jan 28 01:34
@bradtaniguchi yes i am not trying to get the solution here
just correct me if i am so far from the correct solution
Brad
@bradtaniguchi
Jan 28 01:37
@KWFE haha isn't that getting help? XD
I'd get the correct solution, then focus on refactoring after.
You should be ablee to more or less figure out if your close or not, if you actually do understand your approach and the problem well enough
If you dont actually know what your doing even the slightest, I'd back up and get a better understanding of each part of the code.
Damn I just tried to see how large my app was and its still over 2mb :/
Gotta look into how I can split up the code more, gonna be a tough task
Kevin Peña
@kebien6020
Jan 28 01:41
@bradtaniguchi Webpack?
Just yesterday I spent quite a while figuring out code splitting with webpack and reduced a single bundle of ~2.3mb to a vendor bundle of 81Kb Gzipped, some other shared bundles of 10 ~ 20 kb gzipped of vendor code and the main bundle is like 1kb gzipped
Brad
@bradtaniguchi
Jan 28 01:44
@kebien6020 Yea, I tried splitting the modules up aggressively, but the build in setup wasn't good enough. Going to try to take a different approach probably
I didn't gzip anything, but I want to get it smaller
Kevin Peña
@kebien6020
Jan 28 01:46
The gzip part is a config on the server. I was using a custom server written in node and it was very straightforward to enable. The files to served are still plain text and the client code didn't have to be modified.
@bradtaniguchi A tool that helped me a ton was webpack-bundle-analyzer, it allowed me to actually see how was the code splitting working in an interactive page that looks like this
Brad
@bradtaniguchi
Jan 28 01:50
Yea I'll be using gzip in production, but I feel like I can optimize better before-hand (no idea how small the buddle will get with gzip at this time)
Kevin Peña
@kebien6020
Jan 28 01:50
image.png
Brad
@bradtaniguchi
Jan 28 01:51
Yes, I've used that tool before, but was just trying to find it haha. Going to run it now to see what I see
@kebien6020 Thanks, do you know of any other techniques to optimize the bundle beyond code splitting/tree shaking?
Kevin Peña
@kebien6020
Jan 28 01:54
Well there is minification which happens automatically if you use the mode: 'production' option in the webpack config
And there is the splash screen: In your main bundle you just load the neccesary js to display some kind of loading screen so that you get a faster time-to-first-draw, and if you code splitted by route then you ensure to just load the js for the current route, so that you optimize for time-to-interactive. Which was more or less my approach.
You can also look in the analyzed bundle for big libraries that are not neccessary all the time (like momentjs, that thing is huuuge), and load them lazily
Kevin Peña
@kebien6020
Jan 28 02:00
Using the environment variable for production makes it so that some libraries make some optimizations (react reduces its size by a lot, disabling detailed warning and errors, and other custom behavior). This is set automatically if you use mode: 'production', in the webpack config.
Another thing is that for tree shaking to be effective webpack has to see ES6 imports and exports, if you are using babel or typescript ensure that your imports and exports are not being transpiled away to commonjs require and module.exports.
Kevin Peña
@kebien6020
Jan 28 02:09
@bradtaniguchi Oh i forgot to @mention you
Brad
@bradtaniguchi
Jan 28 06:49
@kebien6020 No worries I stepped away from the CP, thanks for the response, sorry for not replying until now!
I ran the build and analyzer to see the gziped size, which comes down to 610kb (!), and it seems like 90% of the main build is mainly my "core" libraries used for the client-side, so it doesn't seem like I can do much in this regard :/
Korvax37
@smallpotato37
Jan 28 10:12
"1 eye for of 1 eye." Except number, space and comma, should this string be a palindrome?
May Kittens Devour Your Soul
@diomed
Jan 28 10:25
hello @smallpotato37 :cat:
Riadh
@KWFE
Jan 28 13:49
good morning
Danni
@youzelle
Jan 28 15:48
Hi, could someone give me a hint on where I've gone wrong with a challenge? I had to create a basic markdown parser, just for the header tag. The header lever is specified by the first set of #, so ## Header becomes <h2> header</h2> and ### ### header becomes <h3> ### header</h3>. My solution passed basic tests but failed a deep copy test on the last example. Here's what I did:
function markdownParser(markdown) {
    let md = markdown.trim();
    if (md.match(/#+(?:\s\w+)/)) {
      let regEx = /#+\s/;
      let tag = `h${md.split(' ')[0].length}`;
      return md.replace(regEx,`<${tag}>`) + `</${tag}>`;
    } else {
        return markdown;
    }
}
Jason Luboff
@JLuboff
Jan 28 16:07
Morning
Yogender
@yb1997
Jan 28 16:27
good evening
Jason Luboff
@JLuboff
Jan 28 16:32
How's it going?
Pagnito
@Pagnito
Jan 28 17:03
anyone familiar with webRTC?
Jason Luboff
@JLuboff
Jan 28 17:06
Nope
Yogender
@yb1997
Jan 28 17:18
@JLuboff good, what about you ?
Jason Luboff
@JLuboff
Jan 28 17:18
Doing alright. Just working away
Christopher McCormack
@cmccormack
Jan 28 17:21
Heya GM
Yogender
@yb1997
Jan 28 17:21
I don't why most of the websites I visit are using react but haven't really seen using angular
Jason Luboff
@JLuboff
Jan 28 17:21
@cmccormack What up?
Christopher McCormack
@cmccormack
Jan 28 17:21
nm man, was going to take the day off sick but work has a way of pulling you back in..
you?
Jason Luboff
@JLuboff
Jan 28 17:25
I'm guessing thats one of the negatives of working remote...can't really take a sick day heh
Just working on tests/algorithms
Christopher McCormack
@cmccormack
Jan 28 17:37
@JLuboff it is true. I'm not sick but I tweaked my back in the gym and sitting up in a chair all day is like torture
@JLuboff algorithms for work?
Jason Luboff
@JLuboff
Jan 28 17:38
Oh man... I'm feeling you on that. My lower back is killing me.
Ya
Christopher McCormack
@cmccormack
Jan 28 17:38
sounds like fun
Jason Luboff
@JLuboff
Jan 28 17:39
Ya ...not anything all that complex just a matter of writing it correctly lol
Christopher McCormack
@cmccormack
Jan 28 17:40
probably important lol
Jason Luboff
@JLuboff
Jan 28 17:41
Ya.. like... initially I was only writing my tests and function to handle data moving in one way instead of two ways (can be moved up or moved down)
Jason Luboff
@JLuboff
Jan 28 18:05
Alright. All tests are passing. Now to modify the React side of things..
Riadh
@KWFE
Jan 28 19:06
hi
plz who wants to help me with this?
var count = 0;

function cc(card) {
  // Only change code below this line

 switch (count) {

        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
            count + 1;
        case 7:
        case 8:
        case 9:
            count + 0;
        case 10:
        case "J":
        case "Q":
        case "K":
        case "A":
            count - 1;
    }

  if(count > 0){
    return count + " Bet";
  }else{
    return count + " Hold";
  }


  return "Change Me";
  // Only change code above this line
}

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');
Brad
@bradtaniguchi
Jan 28 19:11
@KWFE How much do you understand with the challenge?
Christopher McCormack
@cmccormack
Jan 28 19:14
@KWFE count + 1; what do you expect this to do?
Riadh
@KWFE
Jan 28 19:14
to add 1 to the general count
Christopher McCormack
@cmccormack
Jan 28 19:14
is that how you increment a variable though?
what you have written is simply an expression, but you aren't assigning it to anything
Riadh
@KWFE
Jan 28 19:17
i tried count++
Christopher McCormack
@cmccormack
Jan 28 19:18
and?
you gotta provide more info, what was the issue when you did that? I don't see any logs in your code, do you know what count is before it hits your if statement?
Riadh
@KWFE
Jan 28 19:19
no i don't
Christopher McCormack
@cmccormack
Jan 28 19:19
when in doubt, console.log your variables at strategic places and see what they contain, if they are different than what you expected, you can more easily troubleshoot
you say you did count++, where did you do that? What did you do for the case you needed to decrement count?
Riadh
@KWFE
Jan 28 19:22
function cc(card) {
    // Only change code below this line

    switch (count) {

        case 2:
        case 3:
        case 4:
        case 5:
        case 6:
             count ++;

        case 7:
        case 8:
        case 9:
             count ;



        case 10:
        case "J":
        case "Q":
        case "K":
        case "A":
             count--;
    }
Brad
@bradtaniguchi
Jan 28 19:22
@KWFE Do you know why any of the code doesn't work? If you don't, how are you suppose to figure out how to make it work?
The first part of learning is knowing what you don't know. If you skip learning what you don't know, you will end up just guessing your way to figuring out the problem, which doesn't work
Riadh
@KWFE
Jan 28 19:24
i don't know how to track problems
Brad
@bradtaniguchi
Jan 28 19:26
Then how will you be able to solve them?
Its like trying to learn to drive with a blind fold on
Jason Luboff
@JLuboff
Jan 28 19:26
count ++ !== count++; //true
Brad
@bradtaniguchi
Jan 28 19:27
@JLuboff stahp
Jason Luboff
@JLuboff
Jan 28 19:28
@bradtaniguchi :angry:
Brad
@bradtaniguchi
Jan 28 19:30
@KWFE I don't want to be offensive or anything, but its one thing to come in asking for help with a specific problem as you don't know how to fix it. It's another to walk in and say "its not working" and not knowing why
Riadh
@KWFE
Jan 28 19:32
its ok
RS
@RS357
Jan 28 19:37

hey guys, can anyone explain how this works under the hood? Like how it sorts an array of numbers from smallest to largest based on 'a-b'?

'array.sort((a, b) => (a - b));'

array.sort((a, b) => (a - b));
Brad
@bradtaniguchi
Jan 28 19:39
@RizwanSyed357 Are you asking about the actual .sort implementation, or the syntax?
Christopher McCormack
@cmccormack
Jan 28 19:44
@RizwanSyed357 this should explain it nicely
Basically, if the difference between a and b is negative, that means that a is less than b, so a will have a lower index than b (e.g., a=10, b=5, 10-5 == -5 a > b). If a is bigger than b, then the difference would be greater than 0, so b would be given a lower index.
If they are the same value, the difference is 0 and nothing changes for those two values in reference to their index
RS
@RS357
Jan 28 20:13
thanks @cmccormack ! I am at a coding meetup and a few of us were keen for an explanation.
Christopher McCormack
@cmccormack
Jan 28 20:13
Ah very cool!
The reason you need the callback function passed in the first place is because sort, by default, will sort each item as strings in lexicographical order. If you tried to sort numbers without a callback, you'd run into something like this:
> '2' > '19'
true
> [19,2].sort()
[ 19, 2 ]
> [19,2].sort((a,b) => a-b)
[ 2, 19 ]
but the following example will work fine without a callback:
> 'a' > 'b'
false
> ['b', 'a'].sort()
[ 'a', 'b' ]
Brad
@bradtaniguchi
Jan 28 20:27
@cmccormack Nice explinations :D
Yogender
@yb1997
Jan 28 20:30
@KWFE I think you might need a break
two breaks actually
Have a break, Have a kitkat
Christopher McCormack
@cmccormack
Jan 28 20:37
@bradtaniguchi thanks :)
Jason Luboff
@JLuboff
Jan 28 20:52
@cmccormack dropping some knowledge right now
Pagnito
@Pagnito
Jan 28 21:02
do u guys get sleepy really fast when you try to learn some really complicated new syntax
Jason Luboff
@JLuboff
Jan 28 21:04
Maybe not sleepy but I can have trouble staying focused on it
Pagnito
@Pagnito
Jan 28 21:06
yea i feel like my brain right now is a regular loop instead of a map, when im reading over the code and docs
Brad
@bradtaniguchi
Jan 28 21:08
@Pagnito Yea, that's why I usually just jump in and get dirty fast haha. I get energy from a challenge (but that's just me)
Pagnito
@Pagnito
Jan 28 21:08
@bradtaniguchi yea i feel same here, but im stuck >.<
Brad
@bradtaniguchi
Jan 28 21:09
haha yea, i'd consider that a challenge that must be overcomed, it must lose!!! haha
Jason Luboff
@JLuboff
Jan 28 21:10
@bradtaniguchi Thats sort of how I am.. but problem is...I'll end up figuring out how to do something but not necessarily know why or how to explain it to someone else heh
Brad
@bradtaniguchi
Jan 28 21:11
@JLuboff that's like teacher skills/communication skills. Idk if I'm good at that either, I usually just take a shotgun approach and try to explain it multiple times XD
Jason Luboff
@JLuboff
Jan 28 21:12
Eh... I guess I'm thinking at it as more of an interview question for example. I could know how to use the concept but not how to explain it
Brad
@bradtaniguchi
Jan 28 21:33
Yea I know what ya mean
Jason Luboff
@JLuboff
Jan 28 21:38
Plus....talking with someone like yourself or @alpox I always feel dumb :joy:
Brad
@bradtaniguchi
Jan 28 21:38
I feel dumb all the time, so no worries there XD
Jason Luboff
@JLuboff
Jan 28 21:38
Jeez...so that makes me super dumb lol
Jason Luboff
@JLuboff
Jan 28 21:44
I think I need to create a small npm package to shorthand JSON.stringify() considering how often I use it :joy:
Brad
@bradtaniguchi
Jan 28 21:47
@JLuboff Oh god, next you'd create a package for isOdd or something XD
Jason Luboff
@JLuboff
Jan 28 21:50
I'm not that petty.. I'm just getting tired of typing lol
Brad
@bradtaniguchi
Jan 28 22:00
just make a helper function, then find-replace hehe
Jason Luboff
@JLuboff
Jan 28 22:01
Ya I could do that.. but lets be honest..I'm not going to do either of those things
Brad
@bradtaniguchi
Jan 28 22:04
cmon that's like a 5 min job! XD
What if I say its fun to refactor code :P
Jason Luboff
@JLuboff
Jan 28 22:05
I actually shouldn't have any JSON.stringify() in my code unless its in a console.log...or maybe theres one place
Brad
@bradtaniguchi
Jan 28 22:07
Hmm I see
Jason Luboff
@JLuboff
Jan 28 22:07
Gah.. having to refactor some code right now becuase of last minute features and damn it. Damn all the code!
Brad
@bradtaniguchi
Jan 28 22:15
See if you used typescript, refactor is magnatudes easier :P
(how you feel is how my boss feels when I bring up tech we aren't using whenever there is an issue :P)
Jason Luboff
@JLuboff
Jan 28 22:16
That requires learning yet another thing lol
Think I figure out part of my issue. Maybe a async problem
Actual nah its not. Wasn't following my own console messages right lol
Brad
@bradtaniguchi
Jan 28 22:22
Haha, I will say out of all the possible technologies (redux, react, angular, jest) I think typescript will stand the test of time better than the rest. Yea there could be a stronger typed varient (like elm or something) but typescript is easy enough to transfer from JS, and is strong enough to scale. But let me get off my soap box haha
Jason Luboff
@JLuboff
Jan 28 22:23
Whats the biggest difference between JS and TS? Public/private classes? Data typing?
Brad
@bradtaniguchi
Jan 28 22:48

@JLuboff The main thing is the typing (hence the name). So for example, I told you about the single argument functions:

// in javascript
const myFunc = (params) => {
  console.log('p1', params.one);
  console.log('p2', params.two);
}
const myFunc = (params: {
  one: number,
  two: string
}) => {
  console.log('p1', params.one);
  console.log('p2', params.two);
}

The code is the same, it works the same, but if for some reason you call the function like this in TS:
myFunc({one: 'one', two: '2'})

typescript will throw an error telling you some like one is not a number. This is a very barebones example, but scale it up accross the entire app and you can do stuff like refactor you redux state in a few seconds without anything more than typescript checking the types
Jason Luboff
@JLuboff
Jan 28 22:49
Hmm interestin g
Brad
@bradtaniguchi
Jan 28 22:49
TS also gives you "babel" features, in that you can build for older browser version, and use the latest JS spec
Jason Luboff
@JLuboff
Jan 28 22:50
Oh thats nice
Brad
@bradtaniguchi
Jan 28 22:51
It takes a while to figuring out how to deal with linting errors, and setting up your types. But I consider it worth it the moment you need/want-to refactor your code
Jason Luboff
@JLuboff
Jan 28 22:52
I've worked with C# which would be kind of similar ( with having to specify data types). Also SQL uses data types
So maybe wouldn't be too hard to learn
Brad
@bradtaniguchi
Jan 28 22:54
Yea, if you delt with a strongly typed language then you should be fine. Just gotta wrap your head around the syntax, since it's kinda "tacked on", since all valid JS is valid TS. (you can change the extension of any JS file to TS and a TS linter will check it)
Jason Luboff
@JLuboff
Jan 28 22:55
I'd probably have to be better about how I redefine a variable...
Brad
@bradtaniguchi
Jan 28 23:04
The best rule is... don't ever reassign. Everything should be set as const, and use functions, ternaries, or other variables instead of let. (I type bad)
Jason Luboff
@JLuboff
Jan 28 23:06
don't everything is const?
Brad
@bradtaniguchi
Jan 28 23:09
oohh uh let me clear that up
ok there, that line was not clear at all haha
alpox
@alpox
Jan 28 23:12
Meh I'm done with TS. Doesn't do all too much good :D
Jason Luboff
@JLuboff
Jan 28 23:16
@bradtaniguchi Ohh. I do my best to use const
Brad
@bradtaniguchi
Jan 28 23:22
Yea keep using const haha
Kevin Peña
@kebien6020
Jan 28 23:30
I've found to be a good practice to just always default to const, but sometimes the ternaries inside ternaries turn horrible and let with reassign yields clearer code.
Just look more carefully to the logic whenever you encounter let.
const is also so easy to default to because objects declared as const can be modified, the binding of the variable to the object is const, the object itself is not constant
Brad
@bradtaniguchi
Jan 28 23:34
I started using const,functions and ternaries more aggresivly after reading an article where a person wrote an entire app without if statements
Kevin Peña
@kebien6020
Jan 28 23:36
Sounds like functional programming. In FP you dont use ifs or loops, and you never reassign or modify any data, ever.
Riadh
@KWFE
Jan 28 23:39
@kebien6020 would you please help me with the code i'v published before?
Kevin Peña
@kebien6020
Jan 28 23:39
Lately using react I've found that I don't use for loops anymore, just map everywhere, and sometimes filter or reduce
Brad
@bradtaniguchi
Jan 28 23:42
Yea totally, I liked the approach haha
Kevin Peña
@kebien6020
Jan 28 23:42
@KWFE You are never breaking in the switch. Someone before said you didn't need to, but that was because you were using return inside the switch. Now that you are not (which is fine), you need those break statements back.
The space in count ++ doesn't seem to affect per my testing, but its confusing so you should remove it.
image.png
Brad
@bradtaniguchi
Jan 28 23:47
@JLuboff I just realized yesterday when you said count ++ !== count++ and I told you to "stop", you were talking about the code... I thought you were just pointing out crazy stuff in JS. I'm very sorry
Jason Luboff
@JLuboff
Jan 28 23:49
@bradtaniguchi That was this morning lol. But all good, I thought you were saying stop becuase you were trying to drill a point in lol
Brad
@bradtaniguchi
Jan 28 23:49
Oh damn it was? Sorry, feels like a while back XD
Jason Luboff
@JLuboff
Jan 28 23:50
Ya like 4 hours ago :joy:
Brad
@bradtaniguchi
Jan 28 23:50
Oh no no, damn my memory is bad haha
Riadh
@KWFE
Jan 28 23:51
sorry for being stupid
its really makes me frustrating
no makes*
Kevin Peña
@kebien6020
Jan 28 23:54

@bradtaniguchi

I started using const,functions and ternaries more aggresivly after reading an article where a person wrote an entire app without if statements

Oh, I use ternaries a lot, just look at this bit of tsx

return (
  <Layout>
    <DuplicatedPriceDialog
      priceError={state.errorDuplicatedPrice}
      onClose={() => this.setState({errorDuplicatedPrice: null})}
    />
    {state.error ?
      <Alert
        type='error'
        message={state.error}
      /> :

      <ResponsiveContainer variant='normal'>
        <Paper className={classes.paper}>
          <Title {...props}>
            {state.mode === 'CREATE' ?
              'Crear Nuevo Cliente' :
              `Editando Cliente ${state.name}`
            }
          </Title>
          {state.errorSubmitting &&
            <Alert
              type='error'
              message={
                'Error ' +
                (state.mode === 'CREATE' ? 'creando' : 'actualizando') +
                ' el cliente favor intentarlo nuevamente'
              }
            />
          }
          {state.errorDuplicatedField &&
            <Alert
              type='error'
              message={
                'Error: El ' + getFieldDesc(state.errorDuplicatedField) +
                ' ya existe.'
              }
            />
          }
          // ...
Brad
@bradtaniguchi
Jan 28 23:55
@kebien6020 I don't use JSX (I'm an Angular dev) so it isn't necessary, but I think it comes out sensible in most cases. (just make sure its formatted sanely hehe
Kevin Peña
@kebien6020
Jan 28 23:56
The && acts somewhat as a ternary but without the else, due to shortcircuit rules
Yeah its because is incoplete and most tags are not closed in this code sample