These are chat archives for FreeCodeCamp/Help

26th
Oct 2018
Christopher McCormack
@cmccormack
Oct 26 2018 00:16
@yozhikvtumane Did you really just hardcode the answers? lol
Aditya
@ezioda004
Oct 26 2018 00:52
We should add random tests :D
Christopher McCormack
@cmccormack
Oct 26 2018 00:56
I think that's a great idea!
codewars does that too I think
Aditya
@ezioda004
Oct 26 2018 01:00
Yeah, I reckon it'd be hard to do it in every challenge but few of them can certainly use random tests so we can avoid hard-coded solutions
Christopher McCormack
@cmccormack
Oct 26 2018 01:14
Could maybe use one of those ipsum generators
Kranti Nebhwani
@darkphotonKN
Oct 26 2018 02:10
does anyone have experience with dealing with copyright of logos
logos of frameworks and languages
so like the javascript, css, html logos, and others like mongodb and .net etc
absolutely no information online unless i search for generic logo copy right which they say check the individual company's info about letting you use their logos but none of those come up
Christopher McCormack
@cmccormack
Oct 26 2018 02:41
@darkphotonKN I believe logos are trademarks, not copyrights, have you searched for trademarks?
Kranti Nebhwani
@darkphotonKN
Oct 26 2018 02:42
@cmccormack ah ok ty ill have a look again
Aditya
@ezioda004
Oct 26 2018 02:51
@darkphotonKN If you're looking for programming logos, then devicons is great, it's all SVG and under MIT license.
Kranti Nebhwani
@darkphotonKN
Oct 26 2018 02:52
@ezioda004 saved my life as always :) kudos bro
kinopotato
@kinopotato
Oct 26 2018 02:55
Hello, can someone please help me with JS regex? I need to match the first letter of each word
so I have /\b\w/g
but it's also matching m in I'm
I need to only match I in I'm
can someone please tell me if it's possible to do this with the approach that I'm doing?
Christopher McCormack
@cmccormack
Oct 26 2018 02:56
@kinopotato hi welcome!
Aditya
@ezioda004
Oct 26 2018 02:57
@kinopotato Try this /^\w/
Wait thats not gonna work
This does /^\w|(?<=\s)\w/g
"Hello World".match(/^\w|(?<=\s)\w/g); // ["H", "W"]
kinopotato
@kinopotato
Oct 26 2018 03:03
@cmccormack thanks for the welcome!
@ezioda004 Hi, I'm still new so it'll take a white to digest all that symbols, I feel like a calculator xD thanks for the info, I'll try to take this in
Aditya
@ezioda004
Oct 26 2018 03:04
@kinopotato No worries, feel free to ask if any of that is not understandable.
kinopotato
@kinopotato
Oct 26 2018 03:06
@ezioda004 So I've been staring at this for about a minute before I realized that I was literally just staring at it for a minute and my brain didn't even try to understand what's happening xD Would you be so kind to please recommend a good resource for JS regex? I already did the FCC basic but for the life of me I can't digest what you did.
Aditya
@ezioda004
Oct 26 2018 03:06
@cmccormack I cant find a concrete info on this but if we do import x from "someFile.js", this will look into dependency and then node_modules folder and wont look into the current folder, right?
Christopher McCormack
@cmccormack
Oct 26 2018 03:06
What do you mean into dependency?
my understanding is if you don't pass a relative path it will check node_modules first
Should be the same as CommonJS
Aditya
@ezioda004
Oct 26 2018 03:08
@kinopotato Tbh I havent even done fcc's regex, but ^\w is basically selecting the first letter of the string then we have | which is OR and (?<=\s)\w is negative lookbehind, you can read more about it here
@cmccormack Dependency meaning first it looks into the files which are added as direct dependency in package.json after that it looks for other files in node_modules folder
kinopotato
@kinopotato
Oct 26 2018 03:09
ahhh lookbehind and lookahead, my mortal regex enemies. Thanks a lot, I'll read this :D
Christopher McCormack
@cmccormack
Oct 26 2018 03:09
those should all be in node_modules though
Aditya
@ezioda004
Oct 26 2018 03:10
Yeah those are all in node_modules but I believe it follows that order (dont quote me)
Anyway my question is: that above import wont look the file in the same folder, right?
Christopher McCormack
@cmccormack
Oct 26 2018 03:11
I don't think it will
but I am not sure sorry :)
Aditya
@ezioda004
Oct 26 2018 03:11
I'm confirming because this is the current behavior with React/Webpack, it throws error
Christopher McCormack
@cmccormack
Oct 26 2018 03:11
every time I read up on that stuff the part about how it traverses is always very short
Aditya
@ezioda004
Oct 26 2018 03:11
So I'm just making sure it's not webpack thingy
Alright gonna experiment with Node
Christopher McCormack
@cmccormack
Oct 26 2018 03:15
@ezioda004 what's the error?
Aditya
@ezioda004
Oct 26 2018 03:16
@cmccormack "Cannot find module"
Christopher McCormack
@cmccormack
Oct 26 2018 03:16
haha
very descriptive
what is throwing the error, webpack?
Aditya
@ezioda004
Oct 26 2018 03:16
Lol thats what I remember
1 sec
Claudio Restifo
@Marmiz
Oct 26 2018 03:23
@ezioda004 Import path in Webpack behave the same as if you were using path module of Node.
So anything that doesn't start with / , ./ or similar , I think node goes into the parent dir and add /node_modules for you
actually I think you can configure it, but every webpack.config I've seen has a const path = require('path'); and a path.resolve :)
`
Aditya
@ezioda004
Oct 26 2018 03:25
@cmccormack Module not found: Can't resolve x file
@Marmiz So thats standard ES6 module behavior right? Because I cant find this info on MDN
Christopher McCormack
@cmccormack
Oct 26 2018 03:28
path is usually just used to join or resolve __dirname to a folder like ./src or ./public or whatever
as far as imports I think it follows the rules you stated
@ezioda004 do you have it in your dependencies?
Aditya
@ezioda004
Oct 26 2018 03:29
Yeah I checked on Node, its not resolving as well
Claudio Restifo
@Marmiz
Oct 26 2018 03:30

@ezioda004 no I think it's strictly Node.js behaviour.

The standard ES6 is like any other link in your page

Aditya
@ezioda004
Oct 26 2018 03:30
@cmccormack Its for this challenge
Claudio Restifo
@Marmiz
Oct 26 2018 03:31
so in standard es6 you have to say manually say node_modules/myModule/dist/something.min.js for example
Aditya
@ezioda004
Oct 26 2018 03:31

The code below requires the contents of a file, "capitalize_strings", found in the same directory as it, imported.

But import * as x from "./capitalize_strings"; this doesnt pass whereas import * as x from "capitalize_strings"; does

Claudio Restifo
@Marmiz
Oct 26 2018 03:32
is it on webpack?
Aditya
@ezioda004
Oct 26 2018 03:32
@Marmiz Gotcha, thanks for clearing!
Claudio Restifo
@Marmiz
Oct 26 2018 03:32
here's the node docs
Christopher McCormack
@cmccormack
Oct 26 2018 03:34
Ah
Aditya
@ezioda004
Oct 26 2018 03:34
@Marmiz Wait no I dont think thats just Node behavior
Christopher McCormack
@cmccormack
Oct 26 2018 03:34
so does webpack do the work of hitting the node_modules folder for you when your bundling locally using import?
if true that would be my confusion, as I've only used import with webpack/parcel
Claudio Restifo
@Marmiz
Oct 26 2018 03:37
@cmccormack I think it does if you require path from node and then ask to build the dist with path: __dirname
(classic node)
Christopher McCormack
@cmccormack
Oct 26 2018 03:37
under what property in the webpack config? I don't see that in mine other than the output dir
Claudio Restifo
@Marmiz
Oct 26 2018 03:38
I know for a fact that you can change this if you want to have some modules exposed and others not if you are doing some sort of hybrid server / client bundling.
@cmccormack let me check one of mine
Christopher McCormack
@cmccormack
Oct 26 2018 03:39
resolve.modules defaults to:
module.exports = {
  //...
  resolve: {
    modules: ['node_modules']
  }
};
Aditya
@ezioda004
Oct 26 2018 03:41

so does webpack do the work of hitting the node_modules folder for you when your bundling locally using import?

Seems like so
I'm doing import React from "react "; in node with experimental modules on and its not resolving

Christopher McCormack
@cmccormack
Oct 26 2018 03:41
space in it
is that in your test too?
not sure if it matters
Claudio Restifo
@Marmiz
Oct 26 2018 03:42
@ezioda004 how's your webpack config
Aditya
@ezioda004
Oct 26 2018 03:42
It doesnt, the trailing space gets trimmed (I've tested)
@Marmiz I'm not using webpack, this is just me experimenting on native node support of ES6 modules
Christopher McCormack
@cmccormack
Oct 26 2018 03:42
Cool so that's good to know before I bang my head later doing something without Webpack, thanks!
Aditya
@ezioda004
Oct 26 2018 03:44
I guess it makes sense, even with React/Webpack you'll have to use require() if you import anything outisde /src folder
Claudio Restifo
@Marmiz
Oct 26 2018 03:44

@ezioda004 wait can you use import in node? since when?

I thought node was still on require :)

Aditya
@ezioda004
Oct 26 2018 03:44
But I guess that was webpack preventing, idk at this point lol
Christopher McCormack
@cmccormack
Oct 26 2018 03:44
Pretty cool you can do something like this in webpack2:
resolve: {
  modules: [
    path.resolve(__dirname + '/src'),
    path.resolve(__dirname + '/node_modules')
  ]
}
Aditya
@ezioda004
Oct 26 2018 03:45
@Marmiz Since Node 10, its experimental tho https://nodejs.org/api/esm.html
@cmccormack That makes sense lol
Claudio Restifo
@Marmiz
Oct 26 2018 03:46
lol mjs extension :)
Aditya
@ezioda004
Oct 26 2018 03:47
Cant win em all, it apparently conflicts with require() and hence the extension
Christopher McCormack
@cmccormack
Oct 26 2018 03:47

I guess it makes sense, even with React/Webpack you'll have to use require() if you import anything outisde /src folder

Not sure I follow this, for frontend stuff I've never needed require, and you don't have to have it in ./src necessarily

Claudio Restifo
@Marmiz
Oct 26 2018 03:48
that's because webpack does it for you
Christopher McCormack
@cmccormack
Oct 26 2018 03:48
right
Claudio Restifo
@Marmiz
Oct 26 2018 03:48
(or gulp or grunt or whateva)
Christopher McCormack
@cmccormack
Oct 26 2018 03:48
so not sure about the require part
Claudio Restifo
@Marmiz
Oct 26 2018 03:48
require is "official" node sintax
*syntax
Aditya
@ezioda004
Oct 26 2018 03:48
Yeah thats webpack thingy, example I had an image file in /public folder but import wouldnt let me import
Christopher McCormack
@cmccormack
Oct 26 2018 03:49
right, node itself wraps whatever you load in a require object I believe
@ezioda004 it should
Claudio Restifo
@Marmiz
Oct 26 2018 03:49
@cmccormack think has the same resolution of imports in cpp
Aditya
@ezioda004
Oct 26 2018 03:49
@cmccormack Its webpack preventing, it doesnt let you import anything outside /src folder
/src and /node_modules
I'm talking about CRA webpack config
Christopher McCormack
@cmccormack
Oct 26 2018 03:50
oh
I don't ever use CRA
that may be why I was confused haha
Claudio Restifo
@Marmiz
Oct 26 2018 03:51

CRA webpack config

well, that's another thing. Can you see the webpack.config without ejecting in a CRA?

Christopher McCormack
@cmccormack
Oct 26 2018 03:51
yes
it's deep in the scripts I think
in node_modules
Aditya
@ezioda004
Oct 26 2018 03:51
Oh boy, thats gotta be deep
Claudio Restifo
@Marmiz
Oct 26 2018 03:51
grep or github?
Christopher McCormack
@cmccormack
Oct 26 2018 03:51
last I checked anyway that was like a year ago
Claudio Restifo
@Marmiz
Oct 26 2018 03:51
they had a major update
Aditya
@ezioda004
Oct 26 2018 03:52
Just make a quick CRA and eject :D
Claudio Restifo
@Marmiz
Oct 26 2018 03:52
i think it's now officially in v.2
Christopher McCormack
@cmccormack
Oct 26 2018 03:53
it's in node_modules/react-scripts/config
so not that deep I guess
forgot I made a CRA app to test something the other day :)
Aditya
@ezioda004
Oct 26 2018 03:54
This conversation shows why CRA is good at abstracting these things away but in future it comes to bite you back
Christopher McCormack
@cmccormack
Oct 26 2018 03:54
yeah
it's why I moved away from it
had a hard time a while ago doing some small things
but then it got a lot harder until it wasn't
almost nothing is as hard to troubleshoot as a bundler that's slightly misconfigured
Aditya
@ezioda004
Oct 26 2018 03:57
Its convenient though
/shrug
Claudio Restifo
@Marmiz
Oct 26 2018 03:57

I don't agree. It's a great starting point even for large custom production project.

If ever comes the need to actually tweak that stuff, you can always eject.
I think it's a great tool and the case that actually comes back biting is not that common

but who cares anyway, makes everything SS, until next year where we'll switch into a single massive JQuery file
<3
Aditya
@ezioda004
Oct 26 2018 03:59

until next year where we'll switch into a single massive JQuery file

Dear God

Christopher McCormack
@cmccormack
Oct 26 2018 04:00
Don't agree about what though? I"m not sure i'm aware of all the benefits, as my apps are fairly small and pretty well optimized after some experimenting
like, what are the built in CRA tools that maybe I'm missing out on?
Aditya
@ezioda004
Oct 26 2018 04:01
I personally never had problem with CRA except situations like this where I get curious for academic purposes
Christopher McCormack
@cmccormack
Oct 26 2018 04:02
heck I was playing with it the other day because someone was talking about how large their build was, I don't think CRA even includes a compression plugin
Claudio Restifo
@Marmiz
Oct 26 2018 04:03
@cmccormack tbh it's the fact that reduce the overhead and fatigue of setting up a project by yourself. Which imho is a "bigger" deal than I'd like to admit
Christopher McCormack
@cmccormack
Oct 26 2018 04:04
You could just clone my vaporware react-boilerplate lol
Claudio Restifo
@Marmiz
Oct 26 2018 04:04
p.s. the i don't agree didn't had much sense :)
Christopher McCormack
@cmccormack
Oct 26 2018 04:04
got started on it but didn't enjoy doing the scripting to replace package.json etc...
I totally agree that it's a quick way to start though
@ezioda004 hey do you want to contribute to my react boilerplate? :D
Aditya
@ezioda004
Oct 26 2018 04:09
@cmccormack Hows this const my_changes = require("jquery");?
Christopher McCormack
@cmccormack
Oct 26 2018 04:09
jquery in a node file eh?
hah why not
Aditya
@ezioda004
Oct 26 2018 04:11
Hah, I'll try to contribute once this crazy week ends :)
Christopher McCormack
@cmccormack
Oct 26 2018 04:11
week eh?
optimist!
Aditya
@ezioda004
Oct 26 2018 04:14
Haha, you're right its CleanTheMessNovember
Christopher McCormack
@cmccormack
Oct 26 2018 04:19
@ezioda004 I"m going to guess next year before it's below 100 again
Aditya
@ezioda004
Oct 26 2018 04:21
@cmccormack Thats optimistic :D
Claudio Restifo
@Marmiz
Oct 26 2018 05:41
@ezioda004 any tip on regex? I'm quite terrible with it
Aditya
@ezioda004
Oct 26 2018 05:53
@Marmiz fcc challenges are great way to get started, after you memorize the key concepts mainly like what each of these means ^$(?=)(?!)(?<=).*+, it gets super easy. Ofc MDN is great for quick reference and if you forget what the signs means and regex101 is great for testing out.
Claudio Restifo
@Marmiz
Oct 26 2018 05:54
oh no I meant

If I want to test if the string is exactly 5 or 10 number:

([\d]{5} | [\d]{10})

will work?

cos I fear any value between will still match since the first condition is met
Aditya
@ezioda004
Oct 26 2018 05:58
@Marmiz Is there a space b/w?
Claudio Restifo
@Marmiz
Oct 26 2018 05:58
nope
Aditya
@ezioda004
Oct 26 2018 05:59
If no then I think it short circuits and matches 5 twice
Claudio Restifo
@Marmiz
Oct 26 2018 05:59
is for a input number. I want to see if i can validate it using html before using js
so using a pattern
the goal is "the value must be exactly n or m char"
so it's not {n,m}
Aditya
@ezioda004
Oct 26 2018 06:00
Yeah but its short circuiting, try here https://regex101.com/
If the number is exactly 10 digits long, then its also 5 digits long
[\d]{10}|([\d]{5}) this matches 10 first and then 5
Claudio Restifo
@Marmiz
Oct 26 2018 06:02
yeh... but then again input number don't accept pattern
damn
Aditya
@ezioda004
Oct 26 2018 06:03
Any reason why you cant use .length?
Claudio Restifo
@Marmiz
Oct 26 2018 06:04
is there a lenght?
you mean min and max?
Aditya
@ezioda004
Oct 26 2018 06:05
No I mean you have a string, and you are checking how many characters long it is, then use .length property?
(I may have not understood the question)
Claudio Restifo
@Marmiz
Oct 26 2018 06:06
yeah but that requires JS validation
Aditya
@ezioda004
Oct 26 2018 06:06
Oh
Claudio Restifo
@Marmiz
Oct 26 2018 06:06
I was trying to avoid it at this stage
and rely only on HTML5 input attributes
Aditya
@ezioda004
Oct 26 2018 06:07
So its a number which should be either 5 or 10 character long?
Claudio Restifo
@Marmiz
Oct 26 2018 06:07
anyway pattern is only usable on "string" type of input, in my case is number so doesn't matter ^^
@ezioda004 yoep
I'll go with min and max. IT's not the best for now will do
Aditya
@ezioda004
Oct 26 2018 06:08
In that case yours should work without the g flag
Claudio Restifo
@Marmiz
Oct 26 2018 06:11

How it changes. It will still match.
if my boundaries are 5 and 10, a 7 length string will still produce a match...

... no?

Aditya
@ezioda004
Oct 26 2018 06:14
@Marmiz Yes, try this ^(\d{5}|\d{10})$
Claudio Restifo
@Marmiz
Oct 26 2018 06:16
wow! That's... it (i think) @ezioda004
word boundaries
jeez that was actually simple
Aditya
@ezioda004
Oct 26 2018 06:16
@Marmiz I'm trying to break it, but seems to work so far
Yeah I think that'll do!
Claudio Restifo
@Marmiz
Oct 26 2018 06:18
I have server side validation
anyway. this was just to do a quick run on FE as well
Aditya
@ezioda004
Oct 26 2018 06:21
I usually do FE validation with React, since most of the times its a controlled form
kinopotato
@kinopotato
Oct 26 2018 06:23

hello again, can someone please tell me why my loop is only running once?
function bouncer(arr) {
let newArr = [...arr];
for (let i = 0; i < newArr.length; i++) {
if (newArr[i] === false){
console.log(arr[i]);
}
}
}

bouncer([false, null, 0, NaN, undefined, ""]);

so it's supposed to remove the false-y elements, but because it's only running once I used log to see what's happening. and I really can't figure it out why it's only running once despite it being a for loop

Manish Giri
@Manish-Giri
Oct 26 2018 06:31
@kinopotato how do you know its running only once
kinopotato
@kinopotato
Oct 26 2018 06:32
the console.log only runs once, though when I placed a log outside of the loop it ran the whole length. I have no clue what's going on
Manish Giri
@Manish-Giri
Oct 26 2018 06:33
change your if to this
if (!newArr[i]){
console.log(arr[i]);
}
kinopotato
@kinopotato
Oct 26 2018 06:35
that worked, but why O.O is "not true" not the same as false?
Manish Giri
@Manish-Giri
Oct 26 2018 06:36
When you do === false
You’re checking if the thing on the left is the Boolean value false exactly
While undefined, null, “” are falsy values, they’re not the Boolean value false per se.. it’s more like they’re “coerced” to the false value.
kinopotato
@kinopotato
Oct 26 2018 06:38
so in my case, it is more important that I know which values are not true rather than knowing which values are false. huh,
ahhhh, so that's why they weren't running
Manish Giri
@Manish-Giri
Oct 26 2018 06:38
Right
And if you use == instead of === in your original code
It should still work
kinopotato
@kinopotato
Oct 26 2018 06:39
each time I tried to do something like console.log("" === true); it always returned false so I thought there should be no problem
when I use ==, it's not getting the boolean false
Manish Giri
@Manish-Giri
Oct 26 2018 06:39
=== checks both the type and value, and “undefined” and “Boolean” aren’t the same types, so it returns false
Even though their values are the same - falsy
Same for the other array elements
kinopotato
@kinopotato
Oct 26 2018 06:40
still so many things I have to learn O.O
@Manish-Giri duuude thank you so much!
Manish Giri
@Manish-Giri
Oct 26 2018 06:41
Anytime!
kinopotato
@kinopotato
Oct 26 2018 06:46

I still can't get this thing to work :| what am I doing wrong?
function bouncer(arr) {
let newArr = [...arr];
for (let i = 0; i < newArr.length; i++) {
if (!newArr[i] || newArr[i] === false){
newArr.splice(i, 1);
}
}
console.log(newArr);
return newArr;
}

bouncer([false, null, 0, NaN, undefined, ""]);

it's returning //NaN, underfined, ""
even when I splice arr instead of newArr, it's still not going as planned, it's splitting the 2 arrays somehow
Manish Giri
@Manish-Giri
Oct 26 2018 06:50
why don't you try the reverse
let newArr = [];
let this be an empty array
then loop through arr - for (let i = 0; i < arr.length; i++) {
for any item that's truthy ie (not falsy), push it to newArr
kinopotato
@kinopotato
Oct 26 2018 06:52
that looks like a reasonable approach, but what's the flaw in my logic? It's splitting it but how? the newArr isn't supposed to be changing
Manish Giri
@Manish-Giri
Oct 26 2018 06:53
generally, its not advisable to mutate the array while you're looping through it..its said to produce unreliable results.
kinopotato
@kinopotato
Oct 26 2018 06:54
but i'm looping through newArr and splicing arr, and I used ...arr to copy arr into newArr so they're not supposed to be "connected" from what I understand
Manish Giri
@Manish-Giri
Oct 26 2018 06:55
for (let i = 0; i < newArr.length; i++) {
if (!newArr[i] || newArr[i] === false){
newArr.splice(i, 1);
}
your code is performing looping on newArr and splicing on newArr too
there's no arr in there
kinopotato
@kinopotato
Oct 26 2018 06:57
oh sorry, I also tried splicing arr
what's weird is that the half of the original elements go to newArr and the other half stays in arr
you know what, I'll just follow the approach you told me with push xD
I don't think I have understand the fundamentals enough to know how I'm wrong, so I'll just do as you said xD
here take a look
check out the console logs on the right
it's skipping null, NaN and ""
i think its due to the fact that you're iterating over newArr while its length is changing at the same time due to the splice
kinopotato
@kinopotato
Oct 26 2018 07:01
[ null, NaN, '' ]
is what returns when I splice arr instead of newArr
so even when I'm splicing arr instead of newArr, it's doing the same thing
Manish Giri
@Manish-Giri
Oct 26 2018 07:02
can you post that code
splicing arr
kinopotato
@kinopotato
Oct 26 2018 07:04
it's the same, I just changed newArr.splice to arr.splice
also the return, changed it to arr
Manish Giri
@Manish-Giri
Oct 26 2018 07:04
while looping over arr?
kinopotato
@kinopotato
Oct 26 2018 07:04
function bouncer(arr) {
let newArr = [...arr];
for (let i = 0; i < newArr.length; i++) {
console.log(newArr[i]);
if (!newArr[i]){
console.log(newArr);
arr.splice(i, 1);
}
console.log("---")
}
return arr;
}
bouncer([false, null, 0, NaN, undefined, ""]);
Manish Giri
@Manish-Giri
Oct 26 2018 07:09
figured it out
look at the logs
so after the first splice, false gets removed from arr
now i is 1
since false is removed from arr, all its element shift down by 1
so null is now at 0, and 0 is at 1
kinopotato
@kinopotato
Oct 26 2018 07:11
so the index does not reset?
ohhhh
Manish Giri
@Manish-Giri
Oct 26 2018 07:11
why would it
kinopotato
@kinopotato
Oct 26 2018 07:11
beceause newArr has a different index
Manish Giri
@Manish-Giri
Oct 26 2018 07:11
the index is based on newArr
not arr
kinopotato
@kinopotato
Oct 26 2018 07:11
and if you loop arr, it would also be problematic
ohhhhhh
Manish Giri
@Manish-Giri
Oct 26 2018 07:11
right
kinopotato
@kinopotato
Oct 26 2018 07:11
holy crap
Manish Giri
@Manish-Giri
Oct 26 2018 07:11
hence
don't mutate while looping
lol
kinopotato
@kinopotato
Oct 26 2018 07:12
xD
thanks man, again, thanks. This is the kind of experience I need to understand coding xD
Manish Giri
@Manish-Giri
Oct 26 2018 07:12
sure thing
here's another solution
function bouncer(arr) {
  return arr.filter(e=>e);
}
short and sweet
kinopotato
@kinopotato
Oct 26 2018 07:14
e?
Manish Giri
@Manish-Giri
Oct 26 2018 07:14
don't worry about what it's doing for now, you'll study about it later
kinopotato
@kinopotato
Oct 26 2018 07:14
I just saw the solution in FCC, it just filtered boolean
Manish Giri
@Manish-Giri
Oct 26 2018 07:14
just know that eventually things will get easier
kinopotato
@kinopotato
Oct 26 2018 07:14
which I don't get since boolean is both true and false
god I hope you're right. I keep thinking I'm that special guy that will never understand this thing, haha
Manish Giri
@Manish-Giri
Oct 26 2018 07:14
it's using Boolean() to coerce/cast the array element
nah its okay
kinopotato
@kinopotato
Oct 26 2018 07:15
so how does it know to filter the falsy ones?
Manish Giri
@Manish-Giri
Oct 26 2018 07:17
its kinds how filter() works
it returns only those elements which return a truthy value
they explain it better than i can lol
kinopotato
@kinopotato
Oct 26 2018 07:20
this is what they call low level understanding?
Manish Giri
@Manish-Giri
Oct 26 2018 07:22
i guess
kinopotato
@kinopotato
Oct 26 2018 07:23
time to read more then, haha. alright man, thanks again!
Manish Giri
@Manish-Giri
Oct 26 2018 07:23
:thumbsup:
BuntyBru
@BuntyBru
Oct 26 2018 09:58
I have this object 
apple[

    {
        name:"california",
        date:"20 days back"
    },
    {
        name:"dallas",
        date:"24 days back"
    },
    {
        name:"denver",
        date:"3 days back"
    }
]
and i want to delete the denver one by passing the name, How can i do it
Yang
@a99061
Oct 26 2018 10:01
<style>
.larger-image {
width: 500px;
}
</style>
BuntyBru
@BuntyBru
Oct 26 2018 10:04
i will have to use filter
but how
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:05

Hello everyone! I am working on a small project that is still not fully conceptualized and would like to have some feedback. I am building an authorization module with Vue, Node.js and Mongoose. My idea is to simplify the whole auth process (server, views, etc) and have sort of like a module, like a lego piece, that I can just plug into any vue + vue-router + vuex project and just work.

I am working with two repositories, one for showing the components + server in action, and the other that would be the actual module:

Deploy on Heroku: https://vue-auth-components.herokuapp.com/

Vue Cli 3 code: https://github.com/kamatheuska/proto-vue-auth
Actual Project: https://github.com/kamatheuska/vue-auth-components-server

I feel that I am making progress although I have a long way to way, in all senses. Criticism is very welcomed, that is how you learn :punch:! Thanks for the help!

Claudio Restifo
@Marmiz
Oct 26 2018 10:09
@BuntyBru reduce it to only the object in which name is not the one you want to remove?
if you know that there's only one of that, you can loop, as soon as you get to that one, exit the loop, keep track of the index, remove that index
BuntyBru
@BuntyBru
Oct 26 2018 10:12
@Marmiz no function related to this scenario
?
Claudio Restifo
@Marmiz
Oct 26 2018 10:12
convert from array to map, use name as map key, remove that key. (get back to array)
there are so many different ways :)
@BuntyBru well, you still have to read the object content unfortunately
BuntyBru
@BuntyBru
Oct 26 2018 10:14
@Marmiz
cant convert array to map
using angular for a task
and lot of asynchronous code
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:15
let noDenver = apple.filter(el => el.name !== 'denver')
@BuntyBru
assuming apple is an Array
not an object
Claudio Restifo
@Marmiz
Oct 26 2018 10:16
@kamatheuska I hoped he arrived to that by himself
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:17
@Marmiz I think your hints were a bit confusing
:smile:
Claudio Restifo
@Marmiz
Oct 26 2018 10:17
better than a straight answer
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:17
convert array to map?
Claudio Restifo
@Marmiz
Oct 26 2018 10:17
why not. Is actually efficient
is way overdoing a simple thing
Claudio Restifo
@Marmiz
Oct 26 2018 10:18
I'd reduce or use index in a lonely case scenario for bigger data
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:18
maybe if he had 10 thousand type of apples, which seems unlikely
Claudio Restifo
@Marmiz
Oct 26 2018 10:18
who knows. People likes apples
BuntyBru
@BuntyBru
Oct 26 2018 10:18

maybe if he had 10 thousand type of apples, which seems unlikely

yes

Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:19
@Marmiz confusing is not the same as helping...you gave three options, no hint to a particular direction whatsever. But you are right, I shouldn't just give the answer :P
Claudio Restifo
@Marmiz
Oct 26 2018 10:19
btw I was proposing solution that came off the top of my head, just to show how many different ways there are to do that
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:20
fair enough
Claudio Restifo
@Marmiz
Oct 26 2018 10:20
or in other way: there's not a single way to do that
choose the one you are more confortable with
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:20
he asked
filter
:smiley:
Claudio Restifo
@Marmiz
Oct 26 2018 10:20
but no code whatsoever
BuntyBru
@BuntyBru
Oct 26 2018 10:21
i will have to use filter , i know
but how for an array of objects
Claudio Restifo
@Marmiz
Oct 26 2018 10:21
that's the thing, you don't have to
BuntyBru
@BuntyBru
Oct 26 2018 10:21
where i want to remove just the object
Claudio Restifo
@Marmiz
Oct 26 2018 10:21
you can use any kind of loop
BuntyBru
@BuntyBru
Oct 26 2018 10:21
with the name "Denver"
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:22
@Marmiz is actually right
Claudio Restifo
@Marmiz
Oct 26 2018 10:22
I mean go for whatever you are confortable with :)
as long as you do it yourself
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:22
no need for Array.prototype.filter, precisely that high ordere method
BuntyBru
@BuntyBru
Oct 26 2018 10:22
@kamatheuska then
Claudio Restifo
@Marmiz
Oct 26 2018 10:22
cos I think me and @kamatheuska know already how to do that ;)
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:23
well..an old for loop might be an option
you loop through your Array (which is not an object)
BuntyBru
@BuntyBru
Oct 26 2018 10:24
Can i use splice
?
Claudio Restifo
@Marmiz
Oct 26 2018 10:25
if you are more confortable with an imperative stile of coding
[pseudocode]
var indexes = [];
for i in array.lenth {
  if array[i].name === "what I'm looking for" -> indexes.push(i)
}

array.remove indexes

or
var keep []
for i in array.lenth {
  if array[i].name !== "what I'm looking for" -> keep.push(array[i])
}
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:25
and check if each element of the array has a name property equal to denver
BuntyBru
@BuntyBru
Oct 26 2018 10:25
 for(var i=0; i < ar.length; i++) {
       if(ar[i].name == "denver")
       {
          ar.splice(i,1);
       }
    }
Claudio Restifo
@Marmiz
Oct 26 2018 10:26
never change the content of an array while looping :)
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:26
yep, bad idea :)
Claudio Restifo
@Marmiz
Oct 26 2018 10:26
splice change the array. Use other methods :)
I gave you two possible solutions @BuntyBru
or use filter, may look scarier but it's what was made for :)
kinopotato
@kinopotato
Oct 26 2018 10:38
Hello again :) I was hoping to ask if there's a way to match a character set with another character set using JS regex while disregarding order? So for example compare [for] to [floor] will return true since for is there

I'm trying to get this to work, I almost have it:
function mutation(arr) {
let compareMe = arr.pop();
console.log(compareMe);
let regex = "["+compareMe+"]";
console.log(regex + " regex");
let newRegex = new RegExp(regex, "ig");
console.log(arr);
return newRegex.test(arr);
}

mutation(["floor", "for"]);

but when I input hello/hey it still returns true because he is a match. I don't know how to proceed from here

Johnny
@JohnnyBizzel
Oct 26 2018 10:49
@kindpotato Try this regex test /[h]+[e]+[l]+/gi
May Kittens Devour Your Soul
@diomed
Oct 26 2018 10:54
@kamatheuska I've fixed json. still no go
Nicolas Ramirez
@kamatheuska
Oct 26 2018 10:55
Oh, man...regex makes me dizzie every time...
kinopotato
@kinopotato
Oct 26 2018 11:00
@JohnnyBizzel I don't know if that can work with RegExp, with regular regex that should work, but since the regex is a variable, I'm limited on how I can implement that. Though I'm trying to make a nested if statement that will check for every character but I'm not sure if that's a good idea to use regex that way
Johnny
@JohnnyBizzel
Oct 26 2018 11:01
@kinopotato If you don't have to use regex then https://www.w3schools.com/jsref/jsref_includes.asp string includes will probably do it.
kinopotato
@kinopotato
Oct 26 2018 11:03
well this looks nifty xD I'll try this instead
Johnny
@JohnnyBizzel
Oct 26 2018 11:03
:+1:
indexOf is another one
kinopotato
@kinopotato
Oct 26 2018 11:06
it seems whether using indexof or includes I still need to separate the string into characters and make a loop of some sort
Johnny
@JohnnyBizzel
Oct 26 2018 11:17
@kinopotato Yes but as soon as you get a false you can break the loop
Smootimus
@Smootimus
Oct 26 2018 11:30
👀
kinopotato
@kinopotato
Oct 26 2018 11:44
hello, why isn't this true?
x = ["h", "e", "l", "l", "o"];
y = ["h", "e", "l", "l", "o"];
let result = x.includes(y);
result; //false
korzo
@korzo
Oct 26 2018 11:45
@kinopotato Because x hasn't array y
kinopotato
@kinopotato
Oct 26 2018 11:45
so the contents aren't the ones being compared?
korzo
@korzo
Oct 26 2018 11:46
@kinopotato It would be true in this case
y = ["h", "e", "l", "l", "o"];
x = ["h", "e", "l", "l", "o", y];
let result = x.includes(y);
kinopotato
@kinopotato
Oct 26 2018 11:47
so .uncludes() doesn't take a variable as parameter?
or array?
korzo
@korzo
Oct 26 2018 11:49
@kinopotato Array.prototype.includes tests if array contains same element as parameter
@kinopotato it's the same as
x = ["h", "e", "l", "l", "o"];
y = ["h", "e", "l", "l", "o"];
let result = x.indexOf(y) !== -1;
also x === y; // false
May Kittens Devour Your Soul
@diomed
Oct 26 2018 11:58
octocat.png
Anand Potukuchi
@anandpotukchi
Oct 26 2018 12:21
hi
Eric Weiss
@eweiss17
Oct 26 2018 12:34
@diomed that picture is.... unsettling
Nicolas Ramirez
@kamatheuska
Oct 26 2018 12:50
Hi! who is interested on doing a npm package soon?
I need some feedback on my project :)
May Kittens Devour Your Soul
@diomed
Oct 26 2018 12:58
@eweiss17 I as a person am ... unsettling
Nicolas Ramirez
@kamatheuska
Oct 26 2018 13:05
no, you aren't :smile:
go do your JSON haha
Fernando L. Estuesta
@champolot
Oct 26 2018 13:07
help?
s there any one here could help me on my code
UI.prototype.showAlert = function(message, className) {};
i get an error saying className is declared but its value is never read
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:13
@champolot please gice soem context
@eweiss17 took your advice
i'm set to interview with a startup on Monday
Fernando L. Estuesta
@champolot
Oct 26 2018 13:14

function Book(title, author, isbn) {
this.title = title;
this.author = author;
this.isbn = isbn;
}

function UI() {}

UI.prototype.addBookToList = function(book) {
const list = document.getElementById('book-list');
const row = document.createElement('tr');
row.innerHTML = <td>${book.title}</td> <td>${book.author}</td> <td>${book.isbn}</td> <td><a href="#" class="delete">X </a></td>;
list.appendChild(row);
};
const apply = new Book(tite);
UI.prototype.showAlert = function(tite) {};

UI.prototype.clearFields = function() {
document.getElementById('title').value = '';
document.getElementById('author').value = '';
document.getElementById('isbn').value = '';
};

document.getElementById('book-form').addEventListener('submit', function(e) {
const title = document.getElementById('title').value,
author = document.getElementById('author').value,
isbn = document.getElementById('isbn').value;

const book = new Book(title, author, isbn);

const ui = new UI();

if (title === '' || author === '' || isbn === '') {
ui.showAlert('Please fill all', 'error');
} else {
ui.addBookToList(book);
ui.clearFields();
}

e.preventDefault();
});

thats my whole code
Eric Weiss
@eweiss17
Oct 26 2018 13:15
@anandpotukchi It will be good experience regardless of landing a position or not because you will now have clearer expectations.
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:15
@champolot please encapuslate hte code in code
and not as text
use backticks
@champolot
Fernando L. Estuesta
@champolot
Oct 26 2018 13:16

`function Book(title, author, isbn) {
this.title = title;
this.author = author;
this.isbn = isbn;
}

function UI() {}

UI.prototype.addBookToList = function(book) {
const list = document.getElementById('book-list');
const row = document.createElement('tr');
row.innerHTML = <td>${book.title}</td> <td>${book.author}</td> <td>${book.isbn}</td> <td><a href="#" class="delete">X </a></td>;
list.appendChild(row);
};
const apply = new Book(tite);
UI.prototype.showAlert = function(tite) {};

UI.prototype.clearFields = function() {
document.getElementById('title').value = '';
document.getElementById('author').value = '';
document.getElementById('isbn').value = '';
};

document.getElementById('book-form').addEventListener('submit', function(e) {
const title = document.getElementById('title').value,
author = document.getElementById('author').value,
isbn = document.getElementById('isbn').value;

const book = new Book(title, author, isbn);

const ui = new UI();

if (title === '' || author === '' || isbn === '') {
ui.showAlert('Please fill all', 'error');
} else {
ui.addBookToList(book);
ui.clearFields();
}

e.preventDefault();
});
`

Eric Weiss
@eweiss17
Oct 26 2018 13:17
```
code
```
Fernando L. Estuesta
@champolot
Oct 26 2018 13:17
function Book(title, author, isbn) {
  this.title = title;
  this.author = author;
  this.isbn = isbn;
}

function UI() {}

UI.prototype.addBookToList = function(book) {
  const list = document.getElementById('book-list');
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>${book.title}</td>
    <td>${book.author}</td>
    <td>${book.isbn}</td>
    <td><a href="#" class="delete">X </a></td>
    `;
  list.appendChild(row);
};
const apply = new Book(tite);
UI.prototype.showAlert = function(tite) {};

UI.prototype.clearFields = function() {
  document.getElementById('title').value = '';
  document.getElementById('author').value = '';
  document.getElementById('isbn').value = '';
};

document.getElementById('book-form').addEventListener('submit', function(e) {
  const title = document.getElementById('title').value,
    author = document.getElementById('author').value,
    isbn = document.getElementById('isbn').value;

  const book = new Book(title, author, isbn);

  const ui = new UI();

  if (title === '' || author === '' || isbn === '') {
    ui.showAlert('Please fill all', 'error');
  } else {
    ui.addBookToList(book);
    ui.clearFields();
  }

  e.preventDefault();
});
oh ok sorry about that
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:18
@champolot what's the error
is it an fcc challenge
if yes please share the link
Fernando L. Estuesta
@champolot
Oct 26 2018 13:19
function Book(title, author, isbn) {
  this.title = title;
  this.author = author;
  this.isbn = isbn;
}

function UI() {}

UI.prototype.addBookToList = function(book) {
  const list = document.getElementById('book-list');
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>${book.title}</td>
    <td>${book.author}</td>
    <td>${book.isbn}</td>
    <td><a href="#" class="delete">X </a></td>
    `;
  list.appendChild(row);
};

UI.prototype.showAlert = function(message,className) {};

UI.prototype.clearFields = function() {
  document.getElementById('title').value = '';
  document.getElementById('author').value = '';
  document.getElementById('isbn').value = '';
};

document.getElementById('book-form').addEventListener('submit', function(e) {
  const title = document.getElementById('title').value,
    author = document.getElementById('author').value,
    isbn = document.getElementById('isbn').value;

  const book = new Book(title, author, isbn);

  const ui = new UI();

  if (title === '' || author === '' || isbn === '') {
    ui.showAlert('Please fill all', 'error');
  } else {
    ui.addBookToList(book);
    ui.clearFields();
  }

  e.preventDefault();
});
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:20
@champolot which chalenge is it?
Fernando L. Estuesta
@champolot
Oct 26 2018 13:20
no sorry i were just giving a try if i could ask a help here
Eric Weiss
@eweiss17
Oct 26 2018 13:20
unrelated to fcc
Fernando L. Estuesta
@champolot
Oct 26 2018 13:21
yeah
sorry about that again
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:21
@champolot what's the problem
you need to give context
you canask questions unrelated to fcc
not a problem
but give context
Johnny
@JohnnyBizzel
Oct 26 2018 13:22
@champolot I do not see any errors in that code
Fernando L. Estuesta
@champolot
Oct 26 2018 13:22
I if hover on my code
UI.prototype.showAlert = function(message, className) {};
on message or className, theres this message saying className is not declared but its value is never used
currently using vscode
Johnny
@JohnnyBizzel
Oct 26 2018 13:23
@champolot Comment className out, or just remove it
Fernando L. Estuesta
@champolot
Oct 26 2018 13:23
what do you mean comment it out
Johnny
@JohnnyBizzel
Oct 26 2018 13:24
UI.prototype.showAlert = function(message,className) {}; < nothing happening, get rid of it!
:hibiscus:
:nut_and_bolt:
:bridge_at_night:
:vertical_traffic_light:
:horse:
:game_die:
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:26
bojack horseman
Johnny
@JohnnyBizzel
Oct 26 2018 13:26
:bread:
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:26
someone's bored
Johnny
@JohnnyBizzel
Oct 26 2018 13:26
@champolot Hello??? You still there?
{crickets}
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:26
oh, I know this one - it's called hooky street
Johnny
@JohnnyBizzel
Oct 26 2018 13:26
Del Boy!!
Fernando L. Estuesta
@champolot
Oct 26 2018 13:27
hahahahah! sorry for being idle
Niraj Nandish
@Nirajn2311
Oct 26 2018 13:27
@diomed your json is all wrong
Fernando L. Estuesta
@champolot
Oct 26 2018 13:27
dont know how to comment it
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:27
@Nirajn2311 `lol
Johnny
@JohnnyBizzel
Oct 26 2018 13:27
//
usually (at the start of the line)
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:27
@champolot //
Eric Weiss
@eweiss17
Oct 26 2018 13:28
CTRL + /
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:28
@Nirajn2311 it's not anymore
Johnny
@JohnnyBizzel
Oct 26 2018 13:28
// this line is a comment
/* this is also a comment */
Fernando L. Estuesta
@champolot
Oct 26 2018 13:28
//UI.prototype.showAlert = function(message, className) {};
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:28
yes
Johnny
@JohnnyBizzel
Oct 26 2018 13:28
IF you did FCC course you would know this :P
Fernando L. Estuesta
@champolot
Oct 26 2018 13:28
// UI.prototype.showAlert = function(message, className) {};
hahaaha
Johnny
@JohnnyBizzel
Oct 26 2018 13:28
It's free you know!
Fernando L. Estuesta
@champolot
Oct 26 2018 13:28
im being awkward now lol
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:29

IF you did FCC course you would know this :P

well, now, it's just awkward

oops. beat me to it
Eric Weiss
@eweiss17
Oct 26 2018 13:29
I'm not familar with prototypes too much i guess... but why do you have functions with no content inside them?
Niraj Nandish
@Nirajn2311
Oct 26 2018 13:29
@diomed now its 404: Not Found
Johnny
@JohnnyBizzel
Oct 26 2018 13:29
@eweiss17 My thoughts exactly
Niraj Nandish
@Nirajn2311
Oct 26 2018 13:30
Nice one :cat: learn json,then request data
Johnny
@JohnnyBizzel
Oct 26 2018 13:31
How long does it take to learn json?
5-10 minutes?
Fernando L. Estuesta
@champolot
Oct 26 2018 13:31
uhmmm actually....im following a tutorial. then his code is working while mine is not
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:31
@JohnnyBizzel 2
Johnny
@JohnnyBizzel
Oct 26 2018 13:31
@champolot That figures
Fernando L. Estuesta
@champolot
Oct 26 2018 13:31
HAHAHHAHA
Johnny
@JohnnyBizzel
Oct 26 2018 13:31
@anandpotukchi probably
Fernando L. Estuesta
@champolot
Oct 26 2018 13:31
exactly
Johnny
@JohnnyBizzel
Oct 26 2018 13:32
@champolot Did the guy explain anything?
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:32
@champolot read the tutorial
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:32
@Nirajn2311 impossible
Niraj Nandish
@Nirajn2311
Oct 26 2018 13:32
@anandpotukchi for a :cat: it takes around 1 - 2 days
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:32
lol
Niraj Nandish
@Nirajn2311
Oct 26 2018 13:32
@diomed check it
Johnny
@JohnnyBizzel
Oct 26 2018 13:33
@champolot This is definitely incomplete UI.prototype.showAlert = function(message, className) {};
Fernando L. Estuesta
@champolot
Oct 26 2018 13:33
uhmmmm
im actually watching it
maybe I'll just jump to the another vid and just skip to it.. it should actually work even though is incomplete
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:34
@champolot AND YOU FREAKING ASKED A QUESTION? FIGURES
Fernando L. Estuesta
@champolot
Oct 26 2018 13:34
it turns out that message and className turns gray
while on his vid. it shows blue and it's actually working
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:35
@champolot COMPLETE THE DAMN TUTORIAL
Fernando L. Estuesta
@champolot
Oct 26 2018 13:35
i just want answers man. Im trying to learn it
Eric Weiss
@eweiss17
Oct 26 2018 13:35
lol he went full caps lock
Fernando L. Estuesta
@champolot
Oct 26 2018 13:35
or just to figure it out why its not working
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:35
f
Johnny
@JohnnyBizzel
Oct 26 2018 13:36
@champolot ui.showAlert('Please fill all', 'error'); this will fail because the function does nothing
Fernando L. Estuesta
@champolot
Oct 26 2018 13:36
ok wait ill fill it out
Johnny
@JohnnyBizzel
Oct 26 2018 13:36
@champolot so I would remove this until you complete the function definition
Do I win a prize? :cake: :candy:
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:37
you get nothing.
good day, sir
Anand Potukuchi
@anandpotukchi
Oct 26 2018 13:37
@champolot you are like a :cat: just like @diomed
Johnny
@JohnnyBizzel
Oct 26 2018 13:37
Sorry Mr Wonka
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:37
@anandpotukchi you are just like @anandpotukchi
Niraj Nandish
@Nirajn2311
Oct 26 2018 13:37
@JohnnyBizzel teach JSON to some people, and youll get a :chocolate_bar:
Johnny
@JohnnyBizzel
Oct 26 2018 13:38
:yum:
Fernando L. Estuesta
@champolot
Oct 26 2018 13:38
uhmmm...no even though i fill it out it will still show the word saying . className is not declared but its value is never read
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:38
what is JSON but a bunch of names and "" and "" and "" and {} and [] and errors
Niraj Nandish
@Nirajn2311
Oct 26 2018 13:39
@diomed U FORGOT TO PUT THE {} AROUND YOUR WHOLE GODDAMN DATA, WHO FORGETS THAT
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:39
:cat: does
see your private message
Fernando L. Estuesta
@champolot
Oct 26 2018 13:40
sorry guys. I'll just skip the vid.
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:40
@champolot what are u building?
Fernando L. Estuesta
@champolot
Oct 26 2018 13:40
heres the end of the final code
showAlert(message, className) {
    // Create div
    const div = document.createElement('div');
    // Add classes
    div.className = `alert ${className}`;
    // Add text
    div.appendChild(document.createTextNode(message));
    // Get parent
    const container = document.querySelector('.container');
    const form = document.getElementById('book-form');
    // Insert alert
    container.insertBefore(div, form);

    // Timeout after 3 sec
    setTimeout(function() {
      document.querySelector('.alert').remove();
    }, 3000);
  }
a library @diomed
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:42
@champolot i'm interested in a library
Fernando L. Estuesta
@champolot
Oct 26 2018 13:42
@Nirajn2311 its just a system
@diomed its just for learning purposes
May Kittens Devour Your Soul
@diomed
Oct 26 2018 13:42
@Nirajn2311 that your site?
This site uses cryptoransomware to personalize your experience, analyze site usage, and offer tailored promotions.
Fernando L. Estuesta
@champolot
Oct 26 2018 13:45
thanks for the help guys. what i mean you really did an effort just to answer my problem
Niraj Nandish
@Nirajn2311
Oct 26 2018 13:46
@diomed what else does it look like to you, a :fish:
Johnny
@JohnnyBizzel
Oct 26 2018 13:58
@champolot Working https://jsbin.com/zeropazixi
I didn't see that last code you posted yet
Fernando L. Estuesta
@champolot
Oct 26 2018 14:04
well thats odd. you're a genius!
I was really at point of losing hope to continue the vid.
Fernando L. Estuesta
@champolot
Oct 26 2018 14:12

you really did figure it out like what you've said here @JohnnyBizzel
ui.showAlert('Please fill all', 'error'); this will fail because the function does nothing.

UI.prototype.showAlert = function(message,className)

what i couldnt figure it out is that message,className turns out blue while me is gray which mean its not working

**what i couldnt figure it out is that on the vid message,className turns out blue while me is gray which mean its not working
Johnny
@JohnnyBizzel
Oct 26 2018 14:21

@champolot

UI.prototype.showAlert = function(message,className) {
  alert(message, className);
  //document.write(className + ": " +  message)
};

is all I added there

yj
@atangyj
Oct 26 2018 14:21
Hi all, I have a React Refs question. I have a DrumPad component, this component includes audio element. I use React.createRef to access the audio element, so when I click the DrumPad, it can play the audio. However, my question is I have several instances of DrumPad component, how can I create several refs for each? Here’s my script: https://goo.gl/nW4iJz
Johnny
@JohnnyBizzel
Oct 26 2018 14:22
@atangyj make them separate components?
yj
@atangyj
Oct 26 2018 14:24
but they are all buttons with different audio source.
Johnny
@JohnnyBizzel
Oct 26 2018 14:24

@atangyj What about another parameter in then renderDrumPad(i) function
eg) renderDrumPad(i, ref){

{this.renderDrumPad(0, 'Q')} etc

yj
@atangyj
Oct 26 2018 14:26
let me try
thanks
Momozor
@momozor
Oct 26 2018 14:53
meow meow
May Kittens Devour Your Soul
@diomed
Oct 26 2018 15:08
frrrrrrrrrrrrrrr :cat:
Niraj Nandish
@Nirajn2311
Oct 26 2018 15:13
@diomed your data is all messed up :angry: , Its killing me
May Kittens Devour Your Soul
@diomed
Oct 26 2018 15:19
@Nirajn2311 what data?
it's all validated
:cat: coding = best coding
diomed @diomed = :cat: dev
Aditya
@ezioda004
Oct 26 2018 15:22
@atangyj I created the ref on the parent component which contained all the other DrumPad, didnt have to create extra refs.
Niraj Nandish
@Nirajn2311
Oct 26 2018 15:26
@diomed Now im sure, YOU DONT KNOW JSON AS YOUR DATA IS MESSED UP AND ALSO IT HAS UNDEFINED VALUES FOR SOME PROPERTIES
Momozor
@momozor
Oct 26 2018 15:45
:cat2:
Christopher McCormack
@cmccormack
Oct 26 2018 15:46
That cat is going places
Momozor
@momozor
Oct 26 2018 15:52
:cat:
Eric Weiss
@eweiss17
Oct 26 2018 15:55
why not just skip the middleman and write all your code in assembly?
Aditya
@ezioda004
Oct 26 2018 15:55
Why not skip the middleman and write all your code in binary?
Christopher McCormack
@cmccormack
Oct 26 2018 15:55
I dope my code directly into the silicon
王振宇
@wangzhenyuxiansen
Oct 26 2018 15:56

p是英文paragraph段落的缩写,经常被用来创建一个段落,就和你写作文一样。

任务:在副标题下面新增一个段落,段落内容是:Hello Paragraph。

段落的标签是什么
What is the label of the paragraph
Hello
is anybody there
Niraj Nandish
@Nirajn2311
Oct 26 2018 15:57
ENGLISH
Christopher McCormack
@cmccormack
Oct 26 2018 15:57
@wangzhenyuxiansen may want to try https://gitter.im/FreeCodeCamp/chinese
王振宇
@wangzhenyuxiansen
Oct 26 2018 15:57
Paragraph: abbreviation for paragraph in English, often used to create a paragraph just as you would write a composition.
Task: add a Paragraph below the subtitle, which reads: Hello Paragraph.
Yago Estévez
@yagoestevez
Oct 26 2018 15:57
"I dope my code directly into the silicon" 😂😂
Christopher McCormack
@cmccormack
Oct 26 2018 15:58
@wangzhenyuxiansen what is your question?
Eric Weiss
@eweiss17
Oct 26 2018 15:58
was that translated via google translate?
王振宇
@wangzhenyuxiansen
Oct 26 2018 15:58
Notification paragraph elements

p English English paragraph analysis: the abbreviation, often used to create a paragraph, just like you write.

Task: Add a paragraph below the subtitle, the paragraph content is: Hello Paragraph.

Is translated by Google
Eric Weiss
@eweiss17
Oct 26 2018 16:00
<p>Hello Paragraph.</p> ??
Johnny
@JohnnyBizzel
Oct 26 2018 16:00
<p>Hello Paragraph.</p>
王振宇
@wangzhenyuxiansen
Oct 26 2018 16:00
yes Yes, Thanks
Spool up the FTL drive!
Where to open
Eric Weiss
@eweiss17
Oct 26 2018 16:07
what lol
Christopher McCormack
@cmccormack
Oct 26 2018 16:08
BSG reference?
not sure about open
Anand Potukuchi
@anandpotukchi
Oct 26 2018 16:40
I tried axios
still not working
changed the API too
@cmccormack
Christopher McCormack
@cmccormack
Oct 26 2018 16:44
@anandpotukchi you're not logging your error anywhere
TypeError: response.json is not a function
@anandpotukchi you can probably work directly with response.data
Anand Potukuchi
@anandpotukchi
Oct 26 2018 16:45
where do i log the error
Christopher McCormack
@cmccormack
Oct 26 2018 16:45
@anandpotukchi you're setting your error in error in state but you don't display it. maybe add a console.error(error) to your .catch
Radek
@radekjohn
Oct 26 2018 16:46

Hi,
I am trying to write my Drum machine in React. It is still very unfinished, but i acomplisked to play a sound, when i click on the button. The problem is, that the tests still say:

"When I click on a .drum-pad element, the audio clip contained in its child <audio> element should be triggered."

What am I doing wrong?

This is my machine:
https://codepen.io/radekjohn/pen/VErMqV?editors=0011

Anand Potukuchi
@anandpotukchi
Oct 26 2018 16:46

just did

cant' see anything

@cmccormack
Christopher McCormack
@cmccormack
Oct 26 2018 16:46
I did and saw it fine
did you save?
Kyle Holm
@thekholm80
Oct 26 2018 16:47
@diomed x
Christopher McCormack
@cmccormack
Oct 26 2018 16:48
@thekholm80 ready for the newest changes? https://reactjs.org/docs/hooks-intro.html
Kyle Holm
@thekholm80
Oct 26 2018 16:49
Classes confuse both people and machines
looks handy though
Christopher McCormack
@cmccormack
Oct 26 2018 16:50
@radekjohn you aren't actually referencing your audio element when you play it
Kyle Holm
@thekholm80
Oct 26 2018 16:50
i can't tell you how many times i've converted a function to a class after the fact, just to add state
Christopher McCormack
@cmccormack
Oct 26 2018 16:50
consider using something like ref or finding the element through another process to invoke the methods
@thekholm80 I think there are VS Code extensions just to do that
because it happens so often
Radek
@radekjohn
Oct 26 2018 16:52
@cmccormack Yeah. But its quite unfair. the sound is playing
Christopher McCormack
@cmccormack
Oct 26 2018 16:53
@radekjohn tests gotta test :) We've all had to deal with the odd tests for this project haha
It does spell that out in the user story though
doesn't say sound plays, it says specifically the audio element sound plays
When I click on a .drum-pad element, the audio clip contained in its child <audio> element should be triggered.
ref made it pretty easy
I think @ezioda004 did it a different way if you want to pick his brain
Radek
@radekjohn
Oct 26 2018 16:55
OK, I see it. Thanks. I will try some other way.
See you all later.
Christopher McCormack
@cmccormack
Oct 26 2018 16:56
@radekjohn see ya
Aditya
@ezioda004
Oct 26 2018 16:57
@thekholm80 @cmccormack No more class syntax in React? Jeez, I'm starting to get annoyed with React
Christopher McCormack
@cmccormack
Oct 26 2018 16:59
Classes are still cleaner looking than these functions with state so they'll probably stick around
There are no plans to remove classes from React
Aditya
@ezioda004
Oct 26 2018 17:00
They better not, I understand they want to avoid classes for the sake of "inheritance vs composition" argument and because of this, but its not that hard or maybe I'm a bit biased
Niraj Nandish
@Nirajn2311
Oct 26 2018 17:03
main-qimg-d9b8c3c5cacad3b611693631f77cfd18-c.jpeg
@diomed in your case it was one day, thanks to your improper JSON skills
Anand Potukuchi
@anandpotukchi
Oct 26 2018 17:04
f @Nirajn2311 lol
Christopher McCormack
@cmccormack
Oct 26 2018 17:05
Do github gists now support json files properly?
Niraj Nandish
@Nirajn2311
Oct 26 2018 17:05
Yeah
Christopher McCormack
@cmccormack
Oct 26 2018 17:05
I remember they were the wrong mimetype previously
that may be why rawgit is shutting down
thanks @Nirajn2311
Niraj Nandish
@Nirajn2311
Oct 26 2018 17:06
you save it in json format and a file name with .json
click raw, and copy the link
Christopher McCormack
@cmccormack
Oct 26 2018 17:07
yeah when I used that last year it didn't work properly as it wasn't hosted as an application/json mimetype I believe
good to know they changed that!
Christopher McCormack
@cmccormack
Oct 26 2018 17:15
hmm I don't think they did change it but it still seems to work fine with fetch
cache-control,max-age=300, content-type,text/plain; charset=utf-8, expires,Fri, 26 Oct 2018 17:17:43 GMT
Christopher McCormack
@cmccormack
Oct 26 2018 17:25

Just tested it, the proper way to get a gist us using something like

https://api.github.com/gists/69c3152c0b0c8fae9cd82727a86cc5fe

not the raw data, as the former will be in the proper content type

May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:36
@Nirajn2311 how dare you :interrobang: my improper JSON skills are fantastic. they are paramount!
Thanks, human :yum: :cat: is forever grateful
@Transfusion what's the theme of your blog
May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:43
@cmccormack so that is how to use gist, huh?
Christopher McCormack
@cmccormack
Oct 26 2018 17:43
yeah
making a pen for it
May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:44
I just went on raw and copied link. lol
Nicolas Ramirez
@kamatheuska
Oct 26 2018 17:45
@Nirajn2311 He is just trolling
Aditya
@ezioda004
Oct 26 2018 17:45
@cmccormack Where is webpack config saved in CRA?
Nicolas Ramirez
@kamatheuska
Oct 26 2018 17:45
it was fun for a while, but got old to be honest :)
May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:45
@kamatheuska how am I trolling???
Christopher McCormack
@cmccormack
Oct 26 2018 17:45
node_modules/react-scripts/configs I think
you can eject as well which brings it forward to the main dir
Nicolas Ramirez
@kamatheuska
Oct 26 2018 17:46
I didn't mentioned you :) @diomed
Aditya
@ezioda004
Oct 26 2018 17:46
Oh no, no ejection
Nicolas Ramirez
@kamatheuska
Oct 26 2018 17:46
I'm talking about another cat
:V
May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:46
@kamatheuska u literally posted screenshot of your talk with me :disappointed:
Nicolas Ramirez
@kamatheuska
Oct 26 2018 17:46
oh shoot.
My bad
May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:46
and I'm not trolling :(
Christopher McCormack
@cmccormack
Oct 26 2018 17:46
@ezioda004 why no ejection?
Nicolas Ramirez
@kamatheuska
Oct 26 2018 17:47
No, you aren't :smile:
Aditya
@ezioda004
Oct 26 2018 17:47
@cmccormack I found it, thanks
May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:47
@kamatheuska really, this was supposed to be working app for me to get info to make it useful for future use
Nicolas Ramirez
@kamatheuska
Oct 26 2018 17:47
sure kitty cat, sure.
that OTHER cat made us lose time for nothing, although it certainly was fun...but you are ok
May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:49
I didn't know that JSON was bad, and I fixed it following webpage you gave me, unsure what remained bad after that, man :disappointed:
Momozor
@momozor
Oct 26 2018 17:58
urm
May Kittens Devour Your Soul
@diomed
Oct 26 2018 17:58
how are you, kitty? @faraco
Momozor
@momozor
Oct 26 2018 17:59
leaving. bye
yj
@atangyj
Oct 26 2018 18:04
Hi all, I have a react question. I have a Drum component and it has this.state ={volume: 0, isOn: true}. I create a turnOffVolume function. When the function called, it changes the state to volume: 0, isOn: false. However, i check in the console and found only volume’s state has changed. Can anyone help me figure out why? Here’s my script https://goo.gl/nW4iJz
Christopher McCormack
@cmccormack
Oct 26 2018 18:05
@atangyj are you logging state before setState completes?
it is usually asynchronous - you can use the second argument to log only after completion:
  turnOffVolume(){
    this.setState({
      volume: 0,
      isOn: !this.state.isOn
    }, state => console.log(state.isOn))
  }
yj
@atangyj
Oct 26 2018 18:07
@cmccormack Sorry, what do u mean loggin state?
Christopher McCormack
@cmccormack
Oct 26 2018 18:07
I'm not actually certain if you can use it like that, you might just use () => console.log(this.state.isOn) if not
However, i check in the console and found only volume’s state has changed
yj
@atangyj
Oct 26 2018 18:07
i see
Christopher McCormack
@cmccormack
Oct 26 2018 18:07
What check are you doing here?
log or using React dev tools?
@atangyj your logic for turning off isn't correct, you are toggling but you should be setting it to false
yj
@atangyj
Oct 26 2018 18:08
I check the value of state by react developer tool
Christopher McCormack
@cmccormack
Oct 26 2018 18:10
Your current implementation would be better suited in a toggleMuted or similar function
yj
@atangyj
Oct 26 2018 18:10
I know the logic you mean, I just want to check if I write in the correct way, and found the state does not change by that line of script
I thought I should be able to change the state of isOn by this.setState({isOn: !this.state.isOn})
but it doesn’t work
Aditya
@ezioda004
Oct 26 2018 18:12
@atangyj That seems fine, have you tried logging as suggested by @cmccormack by adding a callback after setState?
Christopher McCormack
@cmccormack
Oct 26 2018 18:14
works for me
yj
@atangyj
Oct 26 2018 18:14
I’ve just tried. I print two times, false then true
Christopher McCormack
@cmccormack
Oct 26 2018 18:15
for me it prints true false, false true, true false etc..
so it's toggling it fine
I gotta run for a few, hopefully @ezioda004 can set you in the right direction
yj
@atangyj
Oct 26 2018 18:16
Thanks!
@ezioda004 could you tell me why it prints two times ?
Niraj Nandish
@Nirajn2311
Oct 26 2018 18:19
@cmccormack is your codepen regarding fetching json from github working
May Kittens Devour Your Soul
@diomed
Oct 26 2018 18:19
@Nirajn2311 lol, u chopped me file
you might have mentioned that :yum:
Aditya
@ezioda004
Oct 26 2018 18:20
@atangyj Do you have codepen or something similar where I could test? Its hard to tell by just looking because it seems like it should work fine - @cmccormack's example works fine
Niraj Nandish
@Nirajn2311
Oct 26 2018 18:20
@diomed what are you talking about
May Kittens Devour Your Soul
@diomed
Oct 26 2018 18:22
your gist has 499 items; original has 1577
Niraj Nandish
@Nirajn2311
Oct 26 2018 18:31
@diomed your data was taken from your gist where string had symbols
Momozor
@momozor
Oct 26 2018 18:31
@diomed anyway. I'm fine. thanks. how about you?
May Kittens Devour Your Soul
@diomed
Oct 26 2018 18:32
@Nirajn2311 did you significantly change that file?
@faraco I'm okay. glad you'rrrrr fine ._.
Niraj Nandish
@Nirajn2311
Oct 26 2018 18:33
@diomed and then you are changing the case of the data
WHAT CAME TO YOUR MIND WHEN YOU THOUGHT OF CHANGING SYMBOLS TO LOWERCASE
🤯🤯
The first 1000 enties are all right
May Kittens Devour Your Soul
@diomed
Oct 26 2018 18:34
@Nirajn2311 IDK what you talking about
Niraj Nandish
@Nirajn2311
Oct 26 2018 18:34
but for simplicity i reduced it to 500
May Kittens Devour Your Soul
@diomed
Oct 26 2018 18:35
so last 500 aren't all right?
wait. what symbols are you even talking about?
Niraj Nandish
@Nirajn2311
Oct 26 2018 18:35
“()-“ these symbols
yj
@atangyj
Oct 26 2018 18:36
@ezioda004 can you see my script?
Niraj Nandish
@Nirajn2311
Oct 26 2018 18:36
Check id 1103
The author has brackets
May Kittens Devour Your Soul
@diomed
Oct 26 2018 18:37
yes?
Aditya
@ezioda004
Oct 26 2018 18:38
@atangyj Yes, I'm looking. It has bunch of error due to import issues, not ideal to test out but I'm removing those to test.
yj
@atangyj
Oct 26 2018 18:38
Nah...
Aditya
@ezioda004
Oct 26 2018 18:41
@atangyj Seems to be working as intended, with correct toggle, heres the fork https://codesandbox.io/s/6jmxwx0zyk
Aditya
@ezioda004
Oct 26 2018 18:47
Oops, updated now
yj
@atangyj
Oct 26 2018 19:05
@ezioda004 yes, it works
Well, does it differ from the value on react developer tool?
Aditya
@ezioda004
Oct 26 2018 19:15
@atangyj It shouldnt but I dont use react dev tools so I cant be sure, I'd suggest trying regular console.log()
yj
@atangyj
Oct 26 2018 19:15
Okay, thanks very much
Nicolas Ramirez
@kamatheuska
Oct 26 2018 19:16
Hello everyone!
I am working on a small project that is still not fully conceptualized and would like to have some feedback. I am building an authorization module with Vue, Node.js and Mongoose. My idea is to simplify the whole auth process (server, views, etc) and have sort of like a module, like a lego piece, that I can just plug into any vue + vue-router + vuex project and just work.
Could someone give me a hand? Just taking a look or any small though would be enough, I just want to talk about it
Johnny
@JohnnyBizzel
Oct 26 2018 19:39
@kamatheuska Are you using Axios? (I am using firebase as the backend in my Vue app)
Nicolas Ramirez
@kamatheuska
Oct 26 2018 19:45
yes! I use axios to comunicate with my express server @JohnnyBizzel
Johnny
@JohnnyBizzel
Oct 26 2018 19:46
That is the way it is done on the udemy couse I was watching
Nicolas Ramirez
@kamatheuska
Oct 26 2018 19:46
yep, axios is great
Johnny
@JohnnyBizzel
Oct 26 2018 19:46
Looks great
Nicolas Ramirez
@kamatheuska
Oct 26 2018 19:47
thanks! I want to do something like a module, but I am not sure how..
like, npm install my-cool-vue-auth and then plug it inside any vuejs app
Johnny
@JohnnyBizzel
Oct 26 2018 19:48
have an export function I guess
I could export it...
oh my head hurts
Johnny
@JohnnyBizzel
Oct 26 2018 19:51
What is the difference between mutations and getters?
@kamatheuska How do you configure the DB? The user will want access to the user accounts
Nicolas Ramirez
@kamatheuska
Oct 26 2018 19:56
well, mutations alter the state of an app. Getters should only retreive data from the state, like computed properties.
@JohnnyBizzel
thanks for the article!
I am using mongo and mongoose. The user should only define a couple of environment variables (process.env.MONGODB_URI and process.env.JWT_SECRET) passing a URI for his DB and a secret salt
hehe you are actually helping me write the README. Thanks a lot!
If you see anything else that bugs you I would appreciate it
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:00
Anyone over here who knows about apis
Christopher McCormack
@cmccormack
Oct 26 2018 20:02
In general?
@Nirajn2311
What's the question?
Aditya
@ezioda004
Oct 26 2018 20:03
Insert API analogy here
BuntyBru
@BuntyBru
Oct 26 2018 20:03
@Nirajn2311 tell me
@Marmiz solved the issue
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:04
Lets say i am a complete newbie to apis
BuntyBru
@BuntyBru
Oct 26 2018 20:04
ok
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:06
@Nirajn2311 sure! what do you need=
do you want to understand something about it?
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:07
Well like i want to know -
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:07
what?
Aditya
@ezioda004
Oct 26 2018 20:08
@cmccormack Have you completed the React curriculum in fcc?
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:08
  • the prerequisites
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:08
need to specifiy a bit
Christopher McCormack
@cmccormack
Oct 26 2018 20:08
@ezioda004 I think so
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:08
will power haha
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:08
gitter is shit in mobile
cant even go to next line
Aditya
@ezioda004
Oct 26 2018 20:08
@cmccormack Can you help me out with auditing it? I've been asked to do that so we can update the whole section to React 16.
Currently its 2 years old.
Christopher McCormack
@cmccormack
Oct 26 2018 20:09
@ezioda004 sure. I don't remember it being that out of date though
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:10
@kamatheuska yeah so i wanted to know like the preqrequisites, any resources or is FCC course on apis enough
Aditya
@ezioda004
Oct 26 2018 20:10
@cmccormack Certain lifecycle methods are deprecated now (need to update that) and we can teach better practices such as using class fields etc.
Christopher McCormack
@cmccormack
Oct 26 2018 20:10
Want to jump forward a bit and add stuff like hooks and lazy and suspense?
Class properties aren't quite in JS yet though I don't think
Aditya
@ezioda004
Oct 26 2018 20:11
Is that a good idea? Its still in Alpha, way too early.
Thats true but its more or less finalized and even used in React docs, so I think we can add a note thats its not standardized.
Christopher McCormack
@cmccormack
Oct 26 2018 20:12
yeah I was joking :)
Aditya
@ezioda004
Oct 26 2018 20:12
Context API is something I can see being added.
Christopher McCormack
@cmccormack
Oct 26 2018 20:12
yeah that would be useful
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:13
@kamatheuska thx for the link, looks like i should have google first before asking here
Christopher McCormack
@cmccormack
Oct 26 2018 20:14
@ezioda004 I don't think it will even work in codepen yet though, you need to import babel-polyfill I believe
But that can be added to a note
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:15
guys how to make :x: appear only upon typing
[in input field]
Christopher McCormack
@cmccormack
Oct 26 2018 20:15
in Vue?
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:15
in Vue
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:16
The symbol?
Christopher McCormack
@cmccormack
Oct 26 2018 20:16
you should have an event handler for an input, something like input or onChange, check the value of the input each time it is triggered and only display the X when not empty
Aditya
@ezioda004
Oct 26 2018 20:16
@cmccormack It works in codepen I think.
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:17
@Nirajn2311 as far as I understand the subject, you are asking something like, what the internet is. The question needs to be reduced a bit :smile:
input:invalid + span:after,
select:invalid + span:after {
  content: '✖';
  color: #ff8b8b;
  padding: 0 0.5rem;
  font-size: 2rem;
  vertical-align: middle;
}
input:valid + span:after,
select:valid + span:after {
  content: '✓';
  color: #11950d;
  padding: 0 0.5rem;
  font-size: 2rem;
  vertical-align: middle;
}
@diomed
had that hanging around, it is posted somewhere in MDN
Christopher McCormack
@cmccormack
Oct 26 2018 20:18
I guess it does, wasn't working for me a few weeks ago
maybe they updated babel
pen
Aditya
@ezioda004
Oct 26 2018 20:20
@cmccormack Exactly, so you think its fine to add with a note?
Also we can add PropTypes as static fields
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:20
@cmccormack HTML and CSS can do the job alone, I think
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:21
@kamatheuska let me rephrase, where should i begin if i were to start learning apis
Christopher McCormack
@cmccormack
Oct 26 2018 20:22
@kamatheuska the job of what?
oh adding the x
I see
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:22
@Nirajn2311 what about this video
Christopher McCormack
@cmccormack
Oct 26 2018 20:22
that's cool
@ezioda004 I think that's a good idea as well, I think one of the proptypes challenges isn't quite accurate
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:23
@cmccormack yeah, I saw it in MDN a while ago...trying to find the source, but I have been using it since.
Christopher McCormack
@cmccormack
Oct 26 2018 20:23
I think they still use the built-in
@kamatheuska it's simple but very effective I like it!
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:24
then you do something like
<form>
  <input ... required><span>
</form>
Christopher McCormack
@cmccormack
Oct 26 2018 20:25
@ezioda004 is there a unique issue board we can post these or maybe a project or something?
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:25
yeah, MDN is awesome, is amazing how complex HTML can get
@Nirajn2311 that video is pretty good on presenting what an API is
just realised i was an API and quit my job at pizzahut
Aditya
@ezioda004
Oct 26 2018 20:27
@cmccormack Issue board for discussion?
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:27
lol
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:27
@kamatheuska nice one, the waiter example cleared up the definition of an api
Christopher McCormack
@cmccormack
Oct 26 2018 20:29
@ezioda004 or just tasks for a specific area of work
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:29
@Nirajn2311 cool
Christopher McCormack
@cmccormack
Oct 26 2018 20:30
@Nirajn2311 FCC has an API section :)
it's not bad
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:32
Thats one more thing i forgot
DMZ
@DMZ011
Oct 26 2018 20:33
@JLuboff
Aditya
@ezioda004
Oct 26 2018 20:33
@cmccormack Specific area of work? Can you elaborate?
Jason Luboff
@JLuboff
Oct 26 2018 20:33
oh...look at this
DMZ
@DMZ011
Oct 26 2018 20:33
lol
Aditya
@ezioda004
Oct 26 2018 20:34
Hi Jason, fancy seeing you here
Christopher McCormack
@cmccormack
Oct 26 2018 20:34
who's this guy?
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:34
@cmccormack how is it in terms of a user who just started knowing about api
DMZ
@DMZ011
Oct 26 2018 20:34
@JLuboff new to FCC?
Jason Luboff
@JLuboff
Oct 26 2018 20:34
I didn't even know this room existed :joy:
Christopher McCormack
@cmccormack
Oct 26 2018 20:34
@Nirajn2311 do you know node/express at all?
Jason Luboff
@JLuboff
Oct 26 2018 20:34
@DMZ011 Whats FCC
Christopher McCormack
@cmccormack
Oct 26 2018 20:34
@JLuboff oh man you didn't know about the cat room??
Aditya
@ezioda004
Oct 26 2018 20:34
I've heard he's a SQL jedi
DMZ
@DMZ011
Oct 26 2018 20:34
@JLuboff welcome to free code camp, feel free to ask questions if u need help
Jason Luboff
@JLuboff
Oct 26 2018 20:34
I don't much care for cats...
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:35
@Nirajn2311 FreeCodeCamp API is more backend focused, not frontend
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:35
@cmccormack no
Aditya
@ezioda004
Oct 26 2018 20:35
@Nirajn2311 There is frontend API stuff in fcc
Christopher McCormack
@cmccormack
Oct 26 2018 20:36
@Nirajn2311 I recommend going through it, it's really not too bad, and it's all JavaScript so at least you know the language
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:36
@ezioda004 i was searching for that just now :)
Aditya
@ezioda004
Oct 26 2018 20:37
@kamatheuska Its not the best, but helps out with API projects like weather, quote generator etc
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:37
trying to do a project would be my aproach. One of the FCC projects would do.
yeah, for sure, I did it a while ago
sure helps! FCC rocks man :)
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:37
The thing is i have been doing js, css and html for a while now along with sometime in vue and i didnt know where to go forward
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:38
@Nirajn2311 man, I ask myself that question every day. Now has become part of the fun
try doing the projects, like the random quote generator
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:40
Thx for all the info
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:40
@Nirajn2311 do project for me in vue :smiling_imp:
Christopher McCormack
@cmccormack
Oct 26 2018 20:40
Several of us have finished or are close to completing the FCC API certs so feel free to ask away @Nirajn2311
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:40
@diomed learn json properly and read code before experimenting with it
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:41
@kamatheuska this was faster than css v-if="search.length"
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:41
hahahahaha
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:41
Nice, digitalocean just sent mail to collect tshirt
Christopher McCormack
@cmccormack
Oct 26 2018 20:41
Our own @JLuboff wrote the de-facto Simpsons Quote Generator API
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:41
@Nirajn2311 congrats :tada:
Jason Luboff
@JLuboff
Oct 26 2018 20:41
Oh hey, I wrote that!
Christopher McCormack
@cmccormack
Oct 26 2018 20:41
@JLuboff yeah that guy!
Jason Luboff
@JLuboff
Oct 26 2018 20:41
I should probably update it though.
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:41
I have one too!
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:41
u wrote him mail to collect tshirt?
Christopher McCormack
@cmccormack
Oct 26 2018 20:42
you should add one of those old school counters @JLuboff
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:42
u work for digitalocean?
Jason Luboff
@JLuboff
Oct 26 2018 20:42
@cmccormack The visitor counter?
Christopher McCormack
@cmccormack
Oct 26 2018 20:42
images.jpg
Christopher McCormack
@cmccormack
Oct 26 2018 20:42
I thought those were magic when I first started doing web stuff in the 90s
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:42
just hit that
Christopher McCormack
@cmccormack
Oct 26 2018 20:43
@kamatheuska really cool homepage!
using SVG like a boss
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:43
@Nirajn2311 you can send your request to my api :D :D https://www.nikameush.com/api/quote
Jason Luboff
@JLuboff
Oct 26 2018 20:43
@cmccormack Ah...ya I used those plus there was a website that you could sign up for a counter and than embed it in your website and it would track unique users and you could look at graphs and stuff
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:43
@cmccormack this is how you know that Matrix is movie from 90es.
is has that green on black, but also classic horrible gray border
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:44
@cmccormack thanks! it was a pain though...
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:44
Shoplifting is a victimless crime, like punching someone in the dark.
Nelson is right
Christopher McCormack
@cmccormack
Oct 26 2018 20:44
@diomed yeah the green and black go way back to terminals, as it provided very good contrast, also amber and black
but the skumorphic bezels... definitely 90s
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:44
I kinda liked skeudomorphism - how Apple did it
Christopher McCormack
@cmccormack
Oct 26 2018 20:45
@kamatheuska when will EarthBNB be up??
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:45
@cmccormack too bad that clients dont really get it...I am building something more tradition to try and get some cash
that is the first functionality that i wanted, like a more developed message constructor
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:46
@kamatheuska whats the spelling of the last month of a year
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:47
oh, shit, I must do a dummy auth there
well..soon! haha @cmccormack
Christopher McCormack
@cmccormack
Oct 26 2018 20:47
haha
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:48
here, i just surge it http://odd-zephyr.surge.sh/
@cmccormack
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:49
@kamatheuska your cv has a spelling mistake
weong spelling of Dec
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:50
pft. who needs good spelling on cv
it's not like it's on internet
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:51
Pfft, who needs good developers in the world
its not like we need good ui/ux
DMZ
@DMZ011
Oct 26 2018 20:52
are u guys familiar with intranets?
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:52
it's not like json is causing problems
AMIRITE?
Jason Luboff
@JLuboff
Oct 26 2018 20:53
@DMZ011 Yes
DMZ
@DMZ011
Oct 26 2018 20:53
if I wanna design one, for learning purposes
on o365
do u have some samples for intranets
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:53
@Nirajn2311 many haha
I am actually using now a different CV
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:54
@diomed who are you asking
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:55
humans
Jason Luboff
@JLuboff
Oct 26 2018 20:55
@DMZ011 Not sure I understand. An intranet is just an internal website to your company. Generally not accessible outside the internal network
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:56
Okay @diomed which specific human are you specifically asking for specific information
DMZ
@DMZ011
Oct 26 2018 20:56
@JLuboff yeah, but it can have custom design
navigation, search, etc
but it's focused on the business rather than publishing info online like internet sites
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:57
@Nirajn2311 do u know sass
Nicolas Ramirez
@kamatheuska
Oct 26 2018 20:57
hahahahha stop it hahaha @diomed
Niraj Nandish
@Nirajn2311
Oct 26 2018 20:57
I have chosen api next, sass comes later
diomed @diomed yawns
Jason Luboff
@JLuboff
Oct 26 2018 20:58
@DMZ011 Ya it can be whatever you want :D Its still a website
DMZ
@DMZ011
Oct 26 2018 20:58
hmm
May Kittens Devour Your Soul
@diomed
Oct 26 2018 20:59
intranet is an ogre swamp
Patrick Black
@Mortiferr
Oct 26 2018 21:04
If anyone knows python I would really appreciate any tips you have for me in #python!!
Christopher McCormack
@cmccormack
Oct 26 2018 21:06
@Mortiferr why are you opening the same file twice within the same method?
Patrick Black
@Mortiferr
Oct 26 2018 21:07
@cmccormack where?
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:07
@kamatheuska port me smth to vue
@Mortiferr you should have stayed a :heart: surgeon
Christopher McCormack
@cmccormack
Oct 26 2018 21:07
@Mortiferr
with open("products.json", "w") as write_file:
    with open("products.json", "w") as write_file:
Patrick Black
@Mortiferr
Oct 26 2018 21:08
@cmccormack I'm opening 3 seperate files, products.json``cat_template.html and index.html
@cmccormack looks like I can't copy and paste
It's not actually like that in my file
@diomed why
Nicolas Ramirez
@kamatheuska
Oct 26 2018 21:10
@diomed sure, can do. Send me stuff :)
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:10
it's less stressful
Patrick Black
@Mortiferr
Oct 26 2018 21:11
@diomed haha you're not very wrong
I actually quit lol
I work at a small promotional products company as a web developer now
Nicolas Ramirez
@kamatheuska
Oct 26 2018 21:11
@cmccormack @diomed by the way, I would love to contribute to FCC, is there something I could do?
Looking all the issues I just don't know where to start..
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:14
@kamatheuska there's no need to contribute to FCC. a lot of people are doing that. contribute to vue :cat: community rather
Aditya
@ezioda004
Oct 26 2018 21:14
@kamatheuska Easiest way would be starting out by improving our guides.
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:15
#boring
Nicolas Ramirez
@kamatheuska
Oct 26 2018 21:15
I can translate to Spanish and german relatively good
@ezioda004 guides, you mean the descriptions in the challenges?
Aditya
@ezioda004
Oct 26 2018 21:16
@kamatheuska Helping out with translations would be great! By guides I mean https://guide.freecodecamp.org/
They are articles.
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:16
@kamatheuska Bigote de la cabra Es Cameron Diaz
Nicolas Ramirez
@kamatheuska
Oct 26 2018 21:17
@ezioda004 there are sooo many people translating, I have checked that, it is amazing...
wow
didn't know that page
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:17
help with bugs that have been fixed 100nds of times, yet, somehow users still can't pass task without running into them
Nicolas Ramirez
@kamatheuska
Oct 26 2018 21:18
man, that is amazing
Aditya
@ezioda004
Oct 26 2018 21:19
@kamatheuska True, but we could use more people! We have 9k+ PR's open and any sort of help with translation is highly appreciated.
Nicolas Ramirez
@kamatheuska
Oct 26 2018 21:19
is like the Library of Alexandria
sure!
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:20
@kamatheuska you mean, it'll crash and burn in the end, right? :fire:
Nicolas Ramirez
@kamatheuska
Oct 26 2018 21:21
everything crashes and burns
I mean that it is a great source of knowledge....although is archived in GitHub. I suppose that is not a problem when submitting PR's...
Aditya
@ezioda004
Oct 26 2018 21:23
@kamatheuska We've migrated it to the main repository. Everything's at https://github.com/freeCodeCamp/freeCodeCamp
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:27
@ezioda004 just 5000 to go, huh?
Nicolas Ramirez
@kamatheuska
Oct 26 2018 21:27
I see +8000
Aditya
@ezioda004
Oct 26 2018 21:28
@diomed Github apprently cant parse over 5k :D, its current over 8k
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:29
you guys need a new team of moderators
Christopher McCormack
@cmccormack
Oct 26 2018 21:29
Like power rangers but with bellies?
May Kittens Devour Your Soul
@diomed
Oct 26 2018 21:30
and red bull
Ahmad Abdolsaheb
@ahmadabdolsaheb
Oct 26 2018 21:47
@RandellDawson @RandellDawson
Elias Curran
@eliascurran
Oct 26 2018 22:03
i'm having trouble getting the code to submit the text once i click the button
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    // change code below this line
      this.setState({
        submit: event.preventDefault()
      })
    };
    // change code above this line

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          { /* change code below this line */ }
          <input type="text" value={this.state.input} onChange={this.handleChange} />
          { /* change code above this line */ }
          <button type='submit'>Submit!</button>
        </form>
        { /* change code below this line */ }
        <h1>{this.state.submit}</h1>
        { /* change code above this line */ }
      </div>
    );
  }
};
Aditya
@ezioda004
Oct 26 2018 22:07
@eliascurran event.preventDefault() should not be inside .setState(), also you'd want to set submit as this.state.input.
Elias Curran
@eliascurran
Oct 26 2018 22:07
ok
should i put preventDefault() in onChange ?
Christopher McCormack
@cmccormack
Oct 26 2018 22:11
@eliascurran just move it outside the setState
it's usually used at the top of a submit handler
Aditya
@ezioda004
Oct 26 2018 22:11
@eliascurran No, inside handleSubmit(), like this:
handleSubmit(event){
  event.preventDefault();
  //setState here
}
Elias Curran
@eliascurran
Oct 26 2018 22:19
thanks @ezioda004 it worked
Francisco Lopez
@fLopezSDragon
Oct 26 2018 22:34
Hi im having trouble with the js part of the yelp camp project. I keep getting an error that says something about process.env.IP and PORT when i launch the server and run the basic app