These are chat archives for FreeCodeCamp/Help

29th
Mar 2019
Magdaline Sisungo
@magdalinesisungo
Mar 29 06:28
@cmccormack Thank you,i tried my best and got the answer.
Rubykak
@Rubykak
Mar 29 08:09
<lable><input type="radio" name="indoor-outdoor"> Indoor</lable>
<lable><input type="radio" name="indoor-outdoor"> Outdoor</lable>
? what's my fault?
Momozor
@momozor
Mar 29 08:25
<lable> should be <label>
typo error
you need to apply it to both opening and closing tags
dyon gerwen
@fullstackinprogress_gitlab
Mar 29 09:45

i want to open this in a new tab i

<a className={styles['shop-button']} href={addAffiliateId(shops[0]['url'], affiliateId)}>{t('shop.goTo')} {shops[0]['name']}</a>

instead that it leaves the page its a react project im learning

Niraj Nandish
@Nirajn2311
Mar 29 13:40
A noob doubt in js here
Can someone explain why this happens
4 + 5 + "px" = "9px"  //(1)
"$" + 4 + 5 = "$45"  //(2)
I know that if there is a string and a + sign then the number gets converted to string and concatenated
But I'm kinda confused on the above 2 statements
Niraj Nandish
@Nirajn2311
Mar 29 13:47
Chuck it I cleared my doubt :laughing:
Jason Luboff
@JLuboff
Mar 29 15:09
@Nirajn2311 I believe its order of operations. On the first line, you have 4 +5 then +"px" so it first adds 4 and 5, thus 9 and then converts to a string to be "9px". In the second line, you start with a string + a number, thus converted to a string right away
Kelechi Chinaka
@ke1echi
Mar 29 15:29
arithmetic operators are left-to-right
now have a basic understanding of react after reading doc and a watching a tut buh tryin to make the drum machine and i feel lost.
is that normal? how did you feel when u started? @JLuboff
Jason Luboff
@JLuboff
Mar 29 15:31
@ke1echi When I first started? Frustrated and lost :)
It took me a good while to really start to understand
Christopher McCormack
@cmccormack
Mar 29 15:33
@ke1echi if you think of it as a top down flow, from parent to child, similar to how you would make the dom elements, it's not so bad. State is always passed down as props, and up through callbacks
Kelechi Chinaka
@ke1echi
Mar 29 15:51
I just hope it begins to make sense soon
any tut u might want to point me to? @JLuboff @cmccormack
Jason Luboff
@JLuboff
Mar 29 15:57
I didn't go through any tuts...just started building...reading the docs...bugging @cmccormack a bunch
Kelechi Chinaka
@ke1echi
Mar 29 15:58
I'll just go over the doc again
Christopher McCormack
@cmccormack
Mar 29 16:02
the docs are really good, the React team really cares about the users understanding how it all works
Momozor
@momozor
Mar 29 17:37
@cmccormack that's a blessing. Meanwhile..Cycle.js
i still don't understand it...
Christopher McCormack
@cmccormack
Mar 29 17:41
@momozor why use then?
Momozor
@momozor
Mar 29 17:44
I didn't, but still interesting though. They are using this Observable pattern.
Christopher McCormack
@cmccormack
Mar 29 17:49
I'm going to have to look into observables
Momozor
@momozor
Mar 29 17:50
awesome
Brad
@bradtaniguchi
Mar 29 17:59
Someone said observables :D
Momozor
@momozor
Mar 29 18:01
I seriously don't get it :laughing:
Christopher McCormack
@cmccormack
Mar 29 18:01
@bradtaniguchi you familiar with them?
Brad
@bradtaniguchi
Mar 29 18:01
NGRX is basically this lib (but for angular)
Angular already uses rxjs for reactive programming, and ngrx rides on that for a Reactive Redux/Flux setup
Christopher McCormack
@cmccormack
Mar 29 18:02
I have no idea what you're saying
Brad
@bradtaniguchi
Mar 29 18:02
Oh yea, I looked at some of their examples, looks like Angular XD
So you know promises right? Observables are promises that can emit multiple times over time
So like an EventEmitter is one
The thing with rxjs is they provide a bunch of operators todo stuff on those observables. Promises have 2 "operators" .then and .catch. Rxjs has similar ones, but with different purposes for different use-cases. It starts getting really complicated since theres so many options
Jason Luboff
@JLuboff
Mar 29 18:05
@cmccormack Thats how I feel half the time you're talking about React :P
Brad
@bradtaniguchi
Mar 29 18:05
Hahaha
Christopher McCormack
@cmccormack
Mar 29 18:05
doesn't seem very complicated, any good resources?
Brad
@bradtaniguchi
Mar 29 18:06
This is the best reference I refer to when trying to figurout WTF operators do:
Lots of examples there
Momozor
@momozor
Mar 29 18:06
thx a lot @bradtaniguchi
Brad
@bradtaniguchi
Mar 29 18:07
If your a fan of firebase (which also uses an rxjs based API) I'd check this out for real world examples. https://angularfirebase.com/lessons/
Momozor
@momozor
Mar 29 18:07
Learning RxJS and reactive programming is hard. There's the multitude of concepts, large API surface, and fundamental shift in mindset from an imperative to declarative style.
Ah
Brad
@bradtaniguchi
Mar 29 18:07
This is more for angular+firebase so it might be too much extra stuff, but the rxjs code in there is the same regardless
Angular's docs also has a whole section that goes over rxjs: https://angular.io/guide/observables
Here's the typeahead example that @JLuboff had a tough time doing with just promises:
import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

const searchBox = document.getElementById('search-box');

const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => e.target.value),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
);

typeahead.subscribe(data => {
 // Handle the data from the API
});
Jason Luboff
@JLuboff
Mar 29 18:15
I did who what now?\
Oh oh
I get it
Momozor
@momozor
Mar 29 18:16
anyway... can I get some feedbacks on my url shortener microservice project
someone said the button is painfully annoying :monkey_face:
Christopher McCormack
@cmccormack
Mar 29 18:18
I would agree
lol
Momozor
@momozor
Mar 29 18:18
aww
:laughing:
Christopher McCormack
@cmccormack
Mar 29 18:18
it's throbbing
Brad
@bradtaniguchi
Mar 29 18:19
hehe I just reported a bug that the UX on the app I'm working on sucks XD
Momozor
@momozor
Mar 29 18:19
yeah..I used animate.css (heartbeat) to do that
I thought it was cool
Brad
@bradtaniguchi
Mar 29 18:19
I feel like I am being shown one of those annoying ads with the throbbing button XD
Momozor
@momozor
Mar 29 18:20
:laughing: pats
my UI has the potential to give people PTSD
hah!
Liam Docherty
@liamdocherty
Mar 29 19:01
How much would you charge a client to add a newsletter system into their website?
May Kittens Devour Your Soul
@diomed
Mar 29 19:26
3fidy
Ali Rahman
@a1irahman
Mar 29 20:42
Hey everyone, I think I found a bug in the CSS lesson: Change the Color of Text. I completed the code as requested, and the test is coming up as not passed
Screen Shot 2019-03-29 at 4.40.51 PM.png
Niraj Nandish
@Nirajn2311
Mar 29 20:43
Did you check if the bug is there in the beta site - www.freecodecamp.rocks
Ali Rahman
@a1irahman
Mar 29 20:44
Not yet. I'll do that now
Niraj Nandish
@Nirajn2311
Mar 29 20:45
If the bug is there, then open an issue in the github repo of FCC with all details
Ali Rahman
@a1irahman
Mar 29 20:50
Will do thanks!
Ali Rahman
@a1irahman
Mar 29 20:57
Wait problem solved
I was using a CSS manipulating extension to change pages into dark mode, and it was not letting the code properly execute