These are chat archives for FreeCodeCamp/HelpJavaScript

6th
Jan 2018
Onome Sotu
@onomesotu
Jan 06 2018 00:29
@JLuboff Thank you
CamperBot
@camperbot
Jan 06 2018 00:29
onomesotu sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2289 | @jluboff |http://www.freecodecamp.org/jluboff
Onome Sotu
@onomesotu
Jan 06 2018 00:30
@ezioda004 Good suggestions. I will implement them. Thank you
CamperBot
@camperbot
Jan 06 2018 00:30
onomesotu sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Onome Sotu
@onomesotu
Jan 06 2018 00:30
@artoodeeto It's appreciated. Thanks
CamperBot
@camperbot
Jan 06 2018 00:30
onomesotu sends brownie points to @artoodeeto :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @artoodeeto |http://www.freecodecamp.org/artoodeeto
Ankur sharma
@ankur1163
Jan 06 2018 06:06
I am building a large scale app
project management app
I want to know what are the steps to better handle it
like, i started doing it. I created api first
and than created front end in react redux
is that the way?
any tutorial on this?
I feel like there must be some steps which large scale MERN app follows
Alex
@alexandrupintilei
Jan 06 2018 08:34
image.png
Whats wrong?
Maks Ushakov
@maks-ushakov
Jan 06 2018 08:58
@kelechy
What test you can't pass?
Kelechi Chinaka
@ke1echi
Jan 06 2018 10:07
fixed it
alpox
@alpox
Jan 06 2018 10:26

@ankur1163 Large scale apps are built by multiple people in sprints - architecture design comes usually first there. Its pretty much an iterative process though where they start with an MVP (Minimum Viable Product) and build new features after each other.
The API and the Frontend are usually created in parallel. As long as the Frontend people don't have the data of the server ready yet, they rely on fake data. There has to be an upfront API specification though so that they know what data will come from where so they can fake it properly.

If you're doing things alone, I'd do the api first and then the frontend as you say, but also iteratively - Integrate the api part which is needed for the first few features, then make the frontend for it. Then go to the server again to build up the base for more features.

Pieter Stokkink
@forkerino
Jan 06 2018 10:35
@alexandrupintilei you should not use global variables, because they keep their value between tests.
Christopher
@bradley1492
Jan 06 2018 11:16

Good morning,
I am looking for a way to count value occurrences in an array.

let testArr = [1,2,2];

Should tell me there is one 1and two 2
Is the best way here to go with reduce?

Pieter Stokkink
@forkerino
Jan 06 2018 11:17
@bradley1492 yeah, I would create an object in a .reduce
where keys are the elements and values are the count
if the elements are simple
Christopher
@bradley1492
Jan 06 2018 11:18
@forkerino Thanks what are keys in this context?
CamperBot
@camperbot
Jan 06 2018 11:18
bradley1492 sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 2958 | @forkerino |http://www.freecodecamp.org/forkerino
Pieter Stokkink
@forkerino
Jan 06 2018 11:18
{ key: value }
Christopher
@bradley1492
Jan 06 2018 11:18
okay, but I am dealing with an array, and not with an object here?
Pieter Stokkink
@forkerino
Jan 06 2018 11:19
so in your case { 1: 1, 2: 2 }, or if you would have 3 2's: { 2 : 3 }
@bradley1492 in reduce you can return whatever you want
Christopher
@bradley1492
Jan 06 2018 11:19
@forkerino I would change my array into an object inside of reduce?
Pieter Stokkink
@forkerino
Jan 06 2018 11:19
basically, yes.
let me whip up a snippet
Christopher
@bradley1492
Jan 06 2018 11:20
@forkerino thx
CamperBot
@camperbot
Jan 06 2018 11:20
bradley1492 sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
api offline
Pieter Stokkink
@forkerino
Jan 06 2018 11:20
arr.reduce((result, current) => {
  result[current] = result[current] ? result[current] + 1 : 1
  return result
}, {})
Something like that
[1,2,3,2,3,2].reduce((result, current) => {
  result[current] = result[current] ? result[current] + 1 : 1
  return result
}, {})
>> {1: 1, 2: 3, 3: 2}
This obviously won't work if your array has a more elaborate structure (containing either arrays, or objects, for example)
Christopher
@bradley1492
Jan 06 2018 11:22
@forkerino Okay I don't understand result[current] here
Pieter Stokkink
@forkerino
Jan 06 2018 11:23
@bradley1492 result is the object you are creating, current is the key you are accessing, if it already exists you add one, otherwise you initialize it to 1. Then you return the object for the next element in the array
so.... result starts as an empty object (see the {} just before the closing parenthesis), and then for each element you either increase the count or add a new key with value 1 to it.
Christopher
@bradley1492
Jan 06 2018 11:28

Okay, thanks for this explanation. I think in order to clearly understand this, I have to get to grips with reduce a bit more. Specially connecting with objects.
In my world reduce was only array based...
I didn't obviously know reduce could output objects if you input arrays.
But still this is quite helpful as it gives me sort of a list, on what things I have to understand next :)

Ahh one can create objects as starting points, this makes it a lot clearer

Pieter Stokkink
@forkerino
Jan 06 2018 11:29
@bradley1492 .reduce returns a single value, but that single value can be an object, an array, or basically any other data structure.
Christopher
@bradley1492
Jan 06 2018 11:31
Is this the thing when people mention the power of reduce being able to completely "transform" arrays into other data types? Because the starting point is always an array isn't it?
Pieter Stokkink
@forkerino
Jan 06 2018 11:32
yes
Christopher
@bradley1492
Jan 06 2018 11:35
Besides reduce I have to get into arrow functions ^^
Pieter Stokkink
@forkerino
Jan 06 2018 11:37
yeah, those are handy.
Razvan Jackson
@RazvanJackson
Jan 06 2018 11:49
Hey guys!
I have a problem with an animation
i have smth like this
.roulette-spin{
    --spin: 0px;
    animation-name: spin;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes spin{
    0% {background-position:-525px 0%}
    100% {background-position:var(--spin) 0%}
}
and smth like this in scrip
$roulette.css({'background-position-x': 0});
                $roulette.addClass('roulette-spin');
                $roulette.css({'--spin': -75 + posHelper - (1125 * 8)})
so first time is going well, but then is skipping that 5 sec animation-duration
Matej Bošnjak
@mbosnjak01
Jan 06 2018 12:09
Supp. Is there a way to make my app use certain .css file based on certain JS if statemets?
Markus Kiili
@Masd925
Jan 06 2018 12:57
@mbosnjak01 You can add and remove link elements from the head with JS, and there are also a StyleSheet and StyleSheetList api's on the dom.
Matej Bošnjak
@mbosnjak01
Jan 06 2018 12:59
@Masd925 Why didn't I think of that :( Thanks :D
CamperBot
@camperbot
Jan 06 2018 12:59
mbosnjak01 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4637 | @masd925 |http://www.freecodecamp.org/masd925
Ankur sharma
@ankur1163
Jan 06 2018 13:08
ok @alpox
is there are book, tutorial or course for it
I just want to take look from above
lke not actually coding
but how they do the architect stuff
alpox
@alpox
Jan 06 2018 13:09
@ankur1163 You may want to take a look at requirements engineering and software engineering processes
Ankur sharma
@ankur1163
Jan 06 2018 13:10
ok
alpox
@alpox
Jan 06 2018 13:14
@ankur1163 I usually don't learn from books so i just had to dig a bit to find a reference. https://www.amazon.com/Software-Engineering-Theory-Practice-4th/dp/0136061699 Is a recommended book from my university for the software engineering part. There is also another one but it would be in german :D
Ankur sharma
@ankur1163
Jan 06 2018 13:15
@alpox things are going to tough from here
:)
there is so many decisions to make
sometime i feel may be i am doing it all wrong
but as it works
i feel, its all goo
good
alpox
@alpox
Jan 06 2018 13:18
That are usual concerns. And you indeed could always have done something better. That won't ever go away ^^ You can only try your best and that will have to be good enough :-) Don't let yourself down from the many choices you have. Take some choices which seem valid for you and stick to them. Don't go change a whole architecture midways for a little to medium concern. That only costs time.
After all, you will be learning from every step you take
And you will know better every next time you have to make a decision :-)
Ankur sharma
@ankur1163
Jan 06 2018 13:19
yeah @alpox
Ankur sharma
@ankur1163
Jan 06 2018 13:31
I am thinking I should save some money
and hire some full stack developer from freelancer.com or upwork.com
whenever i have question, i should consult with him
this time, he will answer by seeing the whole app
Pieter Stokkink
@forkerino
Jan 06 2018 15:57
@ankur1163 I can recommend the book Clean Architecture by Uncle Bob. It doesn't go deep into the workflow, but does dive deep into architectural decision.
Ankur sharma
@ankur1163
Jan 06 2018 16:41
thanks @forkerino
CamperBot
@camperbot
Jan 06 2018 16:41
ankur1163 sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 2959 | @forkerino |http://www.freecodecamp.org/forkerino
Nazar
@IsaakNazar
Jan 06 2018 17:00
I cant figure out how to put on the page both channels?
https://codepen.io/NazarIsaak/pen/WdXZad
Alex
@alexandrupintilei
Jan 06 2018 17:10
hint?
image.png
Aditya
@ezioda004
Jan 06 2018 17:11
@IsaakNazar The "streams" parameter returns null if the channel is offline as you can see in the console.log(). If you want to get logo of a channel try "channels" parameter.
@alexandrupintilei You are comparing arrays directly to each other, while you need to compare elements of the arrays
Alex
@alexandrupintilei
Jan 06 2018 17:16
ok sec
Nazar
@IsaakNazar
Jan 06 2018 17:16
im trying to make it happen using if statement, but somewhere im wrong
@ezioda004
Alex
@alexandrupintilei
Jan 06 2018 17:17
image.png
@ezioda004
Fabien SHAN
@X140hu4
Jan 06 2018 17:20
You are comparing the same thing in the last screen
Aditya
@ezioda004
Jan 06 2018 17:21
@alexandrupintilei Your loop is iterating through arr while you need to iterate over arr[1] since you need to check if all of its elements are present in arr[0]
@IsaakNazar channel1.innerHTML = '<img src="' + theData.stream.channel.logo + '">' + '<a href="' + theData.stream.channel.url + '" ' + 'target="_blank">' + theData.stream.channel.display_name + '</a> <br>' is problematic. I suggest you console.log() the channels object returned and get data from that object accordingly.
Razvan Jackson
@RazvanJackson
Jan 06 2018 18:03
can someone help me with an animation?
Onome Sotu
@onomesotu
Jan 06 2018 18:22
@RazvanJackson You should post your question, and anyone who can help will reply you
MaciejReimann
@MaciejReimann
Jan 06 2018 19:16
@sjames1958gm Thanks again! Your suggestion on removing eventListeners was a really big help. Actually, I read a lot about adding them but never thought it would be necessary to remove them. Here is the code working as expected. Finally!
https://codepen.io/MaciejReimann/pen/xpLvRz
CamperBot
@camperbot
Jan 06 2018 19:16
maciejreimann sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8823 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Razvan Jackson
@RazvanJackson
Jan 06 2018 19:27
this is the css
```
.roulette-spin{
    --spin: 0px;
    animation-name: spin;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes spin{
    0% {background-position:-525px 0%}
    100% {background-position:var(--spin) 0%}
}
```
$roulette.css({'background-position-x': 0});
$roulette.addClass('roulette-spin');
$roulette.css({'--spin': -75 + posHelper - (1125 * 8)})
and like every 15 secs that script is triggered
first time animation is working fine, but after it's skipping that 5sec animation.
Stephen James
@sjames1958gm
Jan 06 2018 20:06
@MaciejReimann :+1: great - glad I could help