These are chat archives for FreeCodeCamp/HelpJavaScript

8th
Dec 2018
Keggatron
@Keggatron
Dec 08 2018 00:02
str = [...str, str[0]].slice(1);
I think that works
Jason Luboff
@JLuboff
Dec 08 2018 00:07
@Keggatron What if "a" is not at position 0 though?
And perhaps I read it wrong initally, I thought he was saying first occurance of the letter, but if its just removing the first element and placing it at the end, than ya your solution is great
Keggatron
@Keggatron
Dec 08 2018 00:08
Oh sorry I read it as the first element
Jason Luboff
@JLuboff
Dec 08 2018 00:09
This would also work if its just the first element to the back str.push(str.shift())
Pagnito
@Pagnito
Dec 08 2018 00:50
Screen Shot 2018-12-07 at 7.50.06 PM.png
uughhhh, im feeling aroused by that right therr
got compression to finally work with firebase
hey i got a question about redis
actually let me back up
Pagnito
@Pagnito
Dec 08 2018 00:55
anyone can tell me and give me some links i can read on the built in automatic cache that the browsers use
Pagnito
@Pagnito
Dec 08 2018 01:53
is there a tool i can use to see all the state changes in react
Greg Duncan
@GregatGit
Dec 08 2018 03:39
@Pagnito you can use the chrome dev tools
Pagnito
@Pagnito
Dec 08 2018 03:39
yea i have the react dev tools but i mean seein all the state changes as a flow
Greg Duncan
@GregatGit
Dec 08 2018 03:40
@Pagnito are you using Redux?
i set up the redux chrome - it takes some fiddling but worth it
Pagnito
@Pagnito
Dec 08 2018 03:42
nah, not for this project
but yea i use the redux tools as well
but im not sure u understand what i mean
i mean i want to see every rerender in the console
ill pproly look into that later, i fixed my problem where i could of use that tool, on a different problem now O.o
Greg Duncan
@GregatGit
Dec 08 2018 03:44
right - good luck on that
Pagnito
@Pagnito
Dec 08 2018 03:49
thnx haha
Pagnito
@Pagnito
Dec 08 2018 04:15
hey anyone can help me wit facebook auth passport, it seems to not work in deployed version, cant obtain access token
Adel
@AdelMahjoub
Dec 08 2018 06:12
@JLuboff @alpox thanks :thumbsup:
Pagnito
@Pagnito
Dec 08 2018 06:22
i went thru 471 invocations of the auth flow today
lol
Mohammed Boudad
@matrixersp
Dec 08 2018 06:55
Can someone explain to me how this code is runs? I kind of not get it how the callback functions are placed in the queue
setTimeout(function() {
    console.log("Hi");
}, 2000);
setTimeout(function() {
    console.log(("Hello"));
}, 1000);
Aditya
@ezioda004
Dec 08 2018 07:04
@matrixersp On the main thread the first setTimeout function will execute, it'll pass the callback function to another box, we can call this WebAPI. Note this WebAPI wont pass the callback function to the queue until the timer (2000) expires. Same will happen with the 2nd setTimeout function and now the stack will be empty. After the time expries, both the callback will be passed to the queue and they will execute following FIFO rule.
Mohammed Boudad
@matrixersp
Dec 08 2018 07:07
I think I got it now, thanks @ezioda004
Aditya
@ezioda004
Dec 08 2018 07:12
@matrixersp For the sake completeness, queues are usually priority queues, so they wont follow FIFO/LILO rule if theres a higher priority available.
setTimeout(() => console.log("setTimeout"), 0);
Promise.resolve().then(_ => console.log("Promise"));

// Promise
// setTimeout
Promises are higher priority than setTimeout.
Yogender
@yb1997
Dec 08 2018 08:20
comparing NaN with a number always returns false, is it intentional or a quirk of js ?
Aditya
@ezioda004
Dec 08 2018 08:40

@yb1997 Its not JS quirk, but rather an implementation that JS follows (IEEE 754 standard), its same across many languages:

const x = Number.NaN;

console.log(x == x); // false
console.log(x == 2.0); // false

Python example:

x = float('nan')

print(x == x) # false
print(x == 2.0) # false

Java example:

class Main {
  public static void main(String[] args) {
    float x = Float.NaN;
    System.out.println(x == x); // false
    System.out.println(x == 2.0); // false
  }
}
Yogender
@yb1997
Dec 08 2018 08:43
@ezioda004 ok thanks but what I don't understand is how can it be false when NaN doesn't have anything in common with a number, it can neither be false or true
it feels like I'm comparing number 1 with an ant, how can 1 be greater or lesser than an ant ?
Aditya
@ezioda004
Dec 08 2018 08:44
@yb1997 NaN is a number itself:
typeof Number.NaN; // "number"
Yogender
@yb1997
Dec 08 2018 08:45
0_0 so you mean to say that Not a Number is a number ?
Aditya
@ezioda004
Dec 08 2018 08:45
Correct, its a number but rather a unique one
Again, this is same across all languages
Just remember it as a programming quirk
Yogender
@yb1997
Dec 08 2018 08:47
hmm I actually came across this problem in the following pen:
https://codepen.io/ybisht1997/pen/pQXgVV?editors=0010
the comments might help you understand the scenario
Aditya
@ezioda004
Dec 08 2018 08:49
Where is the NaN issue?
Yogender
@yb1997
Dec 08 2018 08:50
inside Bubble's draw method
I actually fixed it but just try to remove this keyword from size property on line 27
Aditya
@ezioda004
Dec 08 2018 08:55
Like this?
let insideX = pmouseX > this.x - size/2 && pmouseX < this.x + size/2;
let insideY = pmouseY > this.y - size/2 && pmouseY < this.y + size/2;
Yogender
@yb1997
Dec 08 2018 08:55
yup
Aditya
@ezioda004
Dec 08 2018 08:55
Still seems to work
Yogender
@yb1997
Dec 08 2018 08:56
notice how those bubbles never comes back
Aditya
@ezioda004
Dec 08 2018 08:57
Umm they are bouncing back, but I'm unable to click
Like drag
Yogender
@yb1997
Dec 08 2018 08:57
oh sorry my fault try to do it on line 22
Aditya
@ezioda004
Dec 08 2018 08:57
Oh I see in your pen
Yogender
@yb1997
Dec 08 2018 08:59
the thing is, it can be hard to track it down sometimes cuz it doesn't really throws any error
Aditya
@ezioda004
Dec 08 2018 08:59
Tbh, doing like size/2 should've thrown error
Yeah thats librarys fault
Yogender
@yb1997
Dec 08 2018 09:00
nah that library can't do much when JS allows it :smiley:
undefined/2 returns NaN
Aditya
@ezioda004
Dec 08 2018 09:01
No its not undefined
function Bubble(size){
  this.size = size;
}
Bubble.prototype.draw = function(){
  console.log(size);
}
var x = new Bubble(20);
x.draw(); // Error
The library you're using have try catch
So its catching the error and still running the code without throwing
Yogender
@yb1997
Dec 08 2018 09:02
hmm interesting, I haven't seen any error on my console, let me try it again
Aditya
@ezioda004
Dec 08 2018 09:03
If you try console.log(size) in the draw function you'll see repetitive log like:
ƒ (){var a="size() is not a valid p5 function, to set the size of the ";throw a+="drawing canvas, please use createCanvas() instead",new Error(a)}
Hard to catch these kinds of errors, thats why linters are so great
Yogender
@yb1997
Dec 08 2018 09:05
thanks a lot dude, caught it now
Aditya
@ezioda004
Dec 08 2018 09:07
:thumbsup:
yayne
@yayne
Dec 08 2018 14:34
Someone can help me simple way of game win and game over in javascript and they display on the same page by replace each other after the game finish
Spyrantis Theodoros
@thodorisanta
Dec 08 2018 14:51
whats the difference between for of and for in ?
yayne
@yayne
Dec 08 2018 14:55
@thodorisanta see this explanation ... easy and clear to understand https://alligator.io/js/for-of-for-in-loops/
Aditya
@ezioda004
Dec 08 2018 15:00
@thodorisanta for of iterates through all objects which have @@iterator protocol, usually arrays and for in iterates through all enumerable properties of objects.
That was more technical 😁
You can remember that you should use for of with arrays and for in with objects.
yayne
@yayne
Dec 08 2018 15:27
@ezioda004 do you familiar with my question please?
Aditya
@ezioda004
Dec 08 2018 15:28
@yayne Um you just want text to be changed on certain conditions right?
yayne
@yayne
Dec 08 2018 15:40
@ezioda004 for example there is a title "New Game" in my home page and i have a progress bar when start the game and then when the progress bar finish the game will end ... may be you win or you lose. So with this function i will "New Game" text to "Game over" if you lose the game... is it clear?
Aditya
@ezioda004
Dec 08 2018 15:46
@yayne Ok - that sounds fairly straightforward. You can add a callback function when the progress bar ends and then manipulate the DOM based on that. Do you a demo of the project? Like codepen or something?
yayne
@yayne
Dec 08 2018 15:49
no just i am working normally on web components ... that runs javascript code...
@ezioda004 may be i will put here the progress bar code , is it ok?
Aditya
@ezioda004
Dec 08 2018 15:52
If the code isnt huge then yeah paste it here, I gotta run for a bit but will check when I'm back
yayne
@yayne
Dec 08 2018 15:53
It has around 12 files
this is a progress bar ... Can you create a game win and game over function based on this... ?
chen121388
@chen121388
Dec 08 2018 16:41

// 定义 abTest
function abTest(a, b) {
// 请把你的代码写在这条注释以下

// 请把你的代码写在这条注释以上

return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}

// 你可以修改这一行来测试你的代码
abTest(2,2);

七染天
@lpl0614
Dec 08 2018 16:44
?
yayne
@yayne
Dec 08 2018 16:47
@lpl0614 are you familiar with Javascript?
Aditya
@ezioda004
Dec 08 2018 17:45
@yayne Sorry, had some work.
You can manipulate the DOM here:
 if(width >=100) {
  // do stuff here
  clearInterval(id);
}
Brad
@bradtaniguchi
Dec 08 2018 18:39
Ahhh, early morning Saturday programming :D
Christopher McCormack
@cmccormack
Dec 08 2018 18:40
@bradtaniguchi Every day you're programming
Brad
@bradtaniguchi
Dec 08 2018 18:40
Not every day, but most days :P
But today is different, I get to program what I want muhahaha
Christopher McCormack
@cmccormack
Dec 08 2018 18:41
Finally let out of your cage?
Brad
@bradtaniguchi
Dec 08 2018 18:42
It's docker time :D
Christopher McCormack
@cmccormack
Dec 08 2018 18:43
So... back into a cargo container?
lol
Brad
@bradtaniguchi
Dec 08 2018 18:43
Yes haha
Already hitting a wall, yay :D
Christopher McCormack
@cmccormack
Dec 08 2018 18:47
They have like 6 of them :D
Pagnito
@Pagnito
Dec 08 2018 18:50
hey do i have to use a package like busboy to recive files on the server?
i know firebase can upload files straight from the browser but i rly dont wanna download that big ass firebase.js into my bundle, plus i think this will be a good practice for me
Brad
@bradtaniguchi
Dec 08 2018 18:53
@cmccormack WOOOOOW XD
@Pagnito What exactly are you trying to achieve?
Pagnito
@Pagnito
Dec 08 2018 18:54
@bradtaniguchi sending a gif, trying to save it to firebase storage and its url to the databse
the last project i did, used busboy, but it didnt help me understand whats happening with the file and whats busboy doing
Brad
@bradtaniguchi
Dec 08 2018 19:01
@Pagnito So firebase storage = cloud storage right?
Pagnito
@Pagnito
Dec 08 2018 19:01
yea i guess
Brad
@bradtaniguchi
Dec 08 2018 19:01
You can either have a cloud function do it, acting as a middleman, or upload it directly from the client-side
Pagnito
@Pagnito
Dec 08 2018 19:01
yea thats what i mean, i dont wanna do it from the client side
im using formdata to send it
but im trying to find the simplest package i can use to parse it
Brad
@bradtaniguchi
Dec 08 2018 19:02
I'd juse use form-data, thats basically the no package option right
this one?
Brad
@bradtaniguchi
Dec 08 2018 19:04
Uh I'm talking about this:
const formData = new FormData();
formData.append('image', file);
// upload using a post request of the formData
Idk there was even a form-data npm package, whats it for
That package looks to be a nodejs version of the client-side form-data it seems like (that's why they are using require in the examples)
Pagnito
@Pagnito
Dec 08 2018 19:06
yea i know
i use that on the front end
im talkin about the back end
when i recieve that data
i need to parse it
and i just realized i dont know what part of the req its attached to
Brad
@bradtaniguchi
Dec 08 2018 19:08
Ah I see
Christopher McCormack
@cmccormack
Dec 08 2018 19:08
body?
Brad
@bradtaniguchi
Dec 08 2018 19:08
So your in a cloud function right? You should have access to the google-apis to do all the file-uploading without using any other library, and there should be docs for this use-case
Pagnito
@Pagnito
Dec 08 2018 19:12
@cmccormack yea i tried console loggin req.body.img and req.body.name, all the properties i filled into the form data but they all logged undefined
Christopher McCormack
@cmccormack
Dec 08 2018 19:13
did you log req.body?
Pagnito
@Pagnito
Dec 08 2018 19:13
ill try now
@bradtaniguchi yea ima check the docs in a sec too, so far i only seen their client side firebase.js methods
but u right they should have it, i dunno why i didnt think of it >.<
Brad
@bradtaniguchi
Dec 08 2018 19:14
dont check firebase, check google's docs on cloud-storage
Pagnito
@Pagnito
Dec 08 2018 19:17
this is what i get on req body
Buffer 2d 2d 2d 2d 2d 2d 57 65 62 4b 69 74 46 6f 72 6d 42 6f 75 6e 64 61 72 79 71 34 6f 42 4e 34 4a 67 46 4e 69 74 44 55 78 4f 0d 0a 43 6f 6e 74 65 6e 74 2d ... >
Christopher McCormack
@cmccormack
Dec 08 2018 19:18
you need to add body-parser
Pagnito
@Pagnito
Dec 08 2018 19:18
i do
Christopher McCormack
@cmccormack
Dec 08 2018 19:18
or run .toString() on it I think
Pagnito
@Pagnito
Dec 08 2018 19:18
do u mean the middleware body parse?
i have the app.use(bodyParser.json())
Christopher McCormack
@cmccormack
Dec 08 2018 19:19
you need the other one for normal forms
Pagnito
@Pagnito
Dec 08 2018 19:19
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
Christopher McCormack
@cmccormack
Dec 08 2018 19:19
// Body parsing - parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false, }))

// Body parsing - parse json
app.use(bodyParser.json())
ah ok
i'm not sure why it's still a stream though, you sure the middleware is before your endpoint?
Pagnito
@Pagnito
Dec 08 2018 19:20
i think it has something to do with the firebase cloud, because the other middleware doesnt seem to work either, app.use(compression())
i had to compress thru webpack
but cookieParser works O.o
Christopher McCormack
@cmccormack
Dec 08 2018 19:21
hmm
maybe remove cookieparser and see if it still works
maybe it's not doing anything :)
Pagnito
@Pagnito
Dec 08 2018 19:24
well i need the cookie parser for auth
but ill try
Spyrantis Theodoros
@thodorisanta
Dec 08 2018 19:24
can i change value with charAt? like word.charAt(0) = word.charAt(0).toUpperCase(); ?
Christopher McCormack
@cmccormack
Dec 08 2018 19:25
no Strings are immutable
you would have to change word itself to a new string
Spyrantis Theodoros
@thodorisanta
Dec 08 2018 19:25
okay thanks
Christopher McCormack
@cmccormack
Dec 08 2018 19:25
np
Spyrantis Theodoros
@thodorisanta
Dec 08 2018 19:26
word = word.charAt(0).toUpperCase() + word.slice(1);
i'll do it like that xD
Christopher McCormack
@cmccormack
Dec 08 2018 19:28
Sure you could also do word.slice(0,1) to grab the first char, just another way to do it
Pagnito
@Pagnito
Dec 08 2018 19:28
so this is what i got after typing console.log(req.body.toString())

haha
------WebKitFormBoundaryGcE4JuHAQRT6adFZ
Content-Disposition: form-data; name="user"

1388382347959918
------WebKitFormBoundaryGcE4JuHAQRT6adFZ
Content-Disposition: form-data; name="img"; filename="haha.gif"
Content-Type: image/gif

GIF89a���

��A�J�]��I�2�ek�"�0uӌ��)s�x���:��z����_TX����G�#0g���Hhq�j|��ZCε�d���s��dfz��F7����lfe9 �b_�t�+��j~ۨ��,v��O\�?��R��y'J�
��̰lV�pᆜԆ��x���X�B����4����
���o�3K�%�XjJ堋8�ש�l�c����H@�5�]��a���2�@H4�)�|��DU�L�!Y�
W,Q�R�ʏ�V(�p1}F\�F(�ጦ�P�P�e��\�x‡=�9f! ��FL�"5�q��C�����I�'��E]��U�B��\�2��
P�"��(� �U���ج�mp�3�}�}�iڤ"��4^�J������r�����B4�Y�2��<�z���5�&���͆��P��h�#*A�Mh����4'JQg����-j�E�a�6�!�$�N���L��N���<≼�����-+c@�L���� q5�j ��
�?��}x��>�a
щh:���jc oz��%��IJe)
��0��=��`���ȃe��D���d���]��104

Christopher McCormack
@cmccormack
Dec 08 2018 19:29
@Pagnito you may need to specify utf8
Aditya
@ezioda004
Dec 08 2018 19:29
@thodorisanta You could also treat string as an array, word[0]
Christopher McCormack
@cmccormack
Dec 08 2018 19:29
but that may be another format
Pagnito
@Pagnito
Dec 08 2018 19:31
still the same wit utf8
Spyrantis Theodoros
@thodorisanta
Dec 08 2018 19:32
@ezioda004 i kinda tried that but it didnt work in my code. can i use it like that? or do i have to split("") the word first?
Aditya
@ezioda004
Dec 08 2018 19:32
@thodorisanta Like this should work:
word = word[0].toUpperCase() + word.slice(1);
Spyrantis Theodoros
@thodorisanta
Dec 08 2018 19:33
@ezioda004 oh okay
i tried something like word[0] = word[0].toUpperCase(); :P and it didnt work
Aditya
@ezioda004
Dec 08 2018 19:34
Yeah that doesnt work cause strings are immutable unlike arrays
You cant change an element on a string
Pagnito
@Pagnito
Dec 08 2018 19:38
@cmccormack yea it seems body-parser doesnt handle multipar form data
Christopher McCormack
@cmccormack
Dec 08 2018 19:38
oh yeah do you need something like multer?
Pagnito
@Pagnito
Dec 08 2018 19:38
it seems so
but now i can take a rest in peace, go take a shower and come bak knowing im ok wit using busboy or multer
Christopher McCormack
@cmccormack
Dec 08 2018 19:43
nice
please note I've never used multer, just seen @JLuboff talk about it :)
Brad
@bradtaniguchi
Dec 08 2018 19:45
Let me see how we do it on our backend, since I know in one situation we pass form-data, idk how the backend deals with it tho, didn't work on it
yup were using const Multer = require('multer');
Jason Luboff
@JLuboff
Dec 08 2018 20:05
Yup I use multer with formdata
Christopher McCormack
@cmccormack
Dec 08 2018 20:06
@JLuboff :wave: I know you aren't sticking around but glad you confirmed!
Jason Luboff
@JLuboff
Dec 08 2018 20:13
Ya just a quick visit lol
Kelechi Chinaka
@ke1echi
Dec 08 2018 20:41
i feel terrible with styling/css
what good vid do i get to learn it
Christopher McCormack
@cmccormack
Dec 08 2018 20:41
@ke1echi I hear freeCodecamp has some CSS lessons
Kelechi Chinaka
@ke1echi
Dec 08 2018 20:45
ok
bootstrap can also do the job of css? @cmccormack
Christopher McCormack
@cmccormack
Dec 08 2018 20:47
bootstrap is mostly CSS, yes.
Kelechi Chinaka
@ke1echi
Dec 08 2018 20:48
so better i learn bootstrap then?
Christopher McCormack
@cmccormack
Dec 08 2018 20:50
no
Bootstrap is literally that - helps you bootstrap a good looking page without having to add any CSS. Does not mean you should not learn CSS
It's just another tool that can make your flow faster
Kelechi Chinaka
@ke1echi
Dec 08 2018 20:53
tnx @cmccormack
Christopher McCormack
@cmccormack
Dec 08 2018 20:53
np
Brad
@bradtaniguchi
Dec 08 2018 21:12
Damn I've never been this excited for getting errors, as long as they are different errors than I ran into before, I am making progress.
yayne
@yayne
Dec 08 2018 21:30
@ezioda004 ... are you here?
Pagnito
@Pagnito
Dec 08 2018 21:53
cant understand why my busboy on file event isnt firing
Brad
@bradtaniguchi
Dec 08 2018 22:02
Yo I can't understand why docker can't connect to mongodb :_D
Brad
@bradtaniguchi
Dec 08 2018 22:23
I figured out what is wrong, don't know why it's wrong but it is, and thus it took 4 hours of my life span away from me....
Pagnito
@Pagnito
Dec 08 2018 22:23
oof
@JLuboff yo
Pagnito
@Pagnito
Dec 08 2018 22:45
nvm got it to work