These are chat archives for FreeCodeCamp/HelpFrontEnd

23rd
Oct 2017
JMorris2000
@JMorris2000
Oct 23 2017 00:57
anyone on?
korzo
@korzo
Oct 23 2017 01:24
@JMorris2000 hi
diegoignacious
@diegoignacious
Oct 23 2017 01:36
yo guys, anyone still sundaying /:
im having some f*cking nightmares with a jumbotron
Sorin Ruse
@sorinr
Oct 23 2017 01:43
share your pen link and we'll try to help
diegoignacious
@diegoignacious
Oct 23 2017 01:44
codepen doesnt love me
thing is, i have a jumbotron section on my landing, but background wont print it, i've checked 100 times css and html selectors, or things and i dont get it
may i share a capture first ?
image.png
image.png
and it doesnt work
Sorin Ruse
@sorinr
Oct 23 2017 01:47
your 1.jpg image is on your computer same as the html page and css?
think your path to the img is the problem url('../img/1.jpg')
diegoignacious
@diegoignacious
Oct 23 2017 01:51
yea it is on my local folder
i think the img path is ok, since the css file is on a css folder
Sorin Ruse
@sorinr
Oct 23 2017 01:52
so, your image doesn't show up?
diegoignacious
@diegoignacious
Oct 23 2017 01:52
ya, the whole "jumbotron" section isn't working
i just can see the text
look
i've uploaded a "debug" folder to my personal website
cuz, im too stupid to use codepen
Sorin Ruse
@sorinr
Oct 23 2017 01:55
just a sec
diegoignacious
@diegoignacious
Oct 23 2017 01:55
ty mate
mstellaluna
@mstellaluna
Oct 23 2017 01:56
@diegoignacious are you sure that the correct path? as it stands .../img/1.jpg is telling it go up 1 folder and then go into the img folder. if your img folder is in the same location as your html file, you don't need the leading .... if you open your dev console and re-load the page what's the error message that is being logged? 404 not found?
diegoignacious
@diegoignacious
Oct 23 2017 01:58
image.png
thats my folder
should i link it back by "../img/1.jpg"?
since the css file is in a css folder?
Sorin Ruse
@sorinr
Oct 23 2017 01:59
it should be "img/1.jpg"
mstellaluna
@mstellaluna
Oct 23 2017 01:59
@diegoignacious it should be just /img/1.jpg
Sorin Ruse
@sorinr
Oct 23 2017 02:00
yep as @mstellaluna said
diegoignacious
@diegoignacious
Oct 23 2017 02:04
na, the mother of jumbotrons want to f*ck me tonight
it doesn't show the image :(
i've updated my folder
halp pls
diegoignacious
@diegoignacious
Oct 23 2017 02:11
anyone ?
George H
@laohe027
Oct 23 2017 02:12
Hi, who knows how to do this "Build a Tribute Page"? I am confused, please know if you know, very grateful!
diegoignacious
@diegoignacious
Oct 23 2017 02:12
please :worried:
korzo
@korzo
Oct 23 2017 02:13
@diegoignacious What exactly is the problem?
I see all images, but there are 5 missing js files.
Open devtools, network panel
diegoignacious
@diegoignacious
Oct 23 2017 02:16
@korzo wow, didn't saw that comming, so you say i dont have js linked ?
or are they missing on the folder?
Sorin Ruse
@sorinr
Oct 23 2017 02:16
@diegoignacious you want your jumbotron inside the div.bg?
diegoignacious
@diegoignacious
Oct 23 2017 02:17
yea, cause in the snippet, the css structure comes with a bg and a jumbotron settings
so, it says .bg the .jumbotron
korzo
@korzo
Oct 23 2017 02:18
@diegoignacious I think js folder is not inside debug folder
diegoignacious
@diegoignacious
Oct 23 2017 02:18
and i should call <div class"jumbotron"> inside of a <div class"bg">
korzo
@korzo
Oct 23 2017 02:19
@diegoignacious <script type="text/javascript" src="js/move-top.js"></script>
It expects js folder to be inside debug folder, as path is relative
diegoignacious
@diegoignacious
Oct 23 2017 02:19
ya @korzo they weren't at the folder, but they ain't the problem there, these js files are from a move-top function
im dealing with the jumbotron section
and it the thing is that it doesn't show me the image of the background
Sorin Ruse
@sorinr
Oct 23 2017 02:21
then why do you close the <div class="bg"></div> before opening the jumbotron?
diegoignacious
@diegoignacious
Oct 23 2017 02:21
image.png
Sorin Ruse
@sorinr
Oct 23 2017 02:23
i mean in html
korzo
@korzo
Oct 23 2017 02:25
@diegoignacious I can't find class jumbotron in your source.
there is only only one comented out
image.png
Sorin Ruse
@sorinr
Oct 23 2017 02:28
in the html structure you have now, the div.bg as an empty div
@korzo its after section#about and after some commented html
diegoignacious
@diegoignacious
Oct 23 2017 02:32
alright so, i've tryed everything with this
lets do something, and i can maybe go to sleep
may you help me to implement that on my css/html/bootstrap files ?
i want to take the "parallax jumbotron" section over that link
and edit it to my website
basically , im having a piece of code like this
image.png
Fredrik Strand Oseberg
@FredrikOseberg
Oct 23 2017 02:55
Anyone with some Progressive web app experience here?
Sorin Ruse
@sorinr
Oct 23 2017 03:09
@diegoignacious so, in your case var jumboHeight = $('.jumbotron').outerHeight(); should be var jumboHeight = $('.jumbotron-fluid').outerHeight();
korzo
@korzo
Oct 23 2017 03:11
@sorinr :point_up: October 23, 2017 4:25 AM
Also there are 2 extra </div> tags. Line 115 and 117
Sorin Ruse
@sorinr
Oct 23 2017 03:14
@korzo yes. thats why i said he should change in the js script the selector from $('.jumbotron') to $('.jumbotron-fluid') as it is defined in the html
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 06:52
Hello people! Im having a problem with a project im working on. Its a school exercise. I was given a website to make it look mobile friendly with @media but when i try to do some changes they don't take effect. Ive searched on the net and i have found that including the "viewport" in a meta tag (<meta name="viewport" content="width=device-width, initial-scale=1.0">) fixes this problem. Why does @media gets affected but that meta tag?
linkin-park
@linkin-park
Oct 23 2017 07:06
hi has anyone got any pleasent experience on using react and debugging things?
Ashwin
@ashwins93
Oct 23 2017 07:08
@linkin-park thats a tough question
lol what kind of bug are you up against?
you used the words "pleasant" and "debugging" in the same sentence
linkin-park
@linkin-park
Oct 23 2017 07:09
well the devtool never shows the correct file where things have gone wrong
fu! it
i changed all the things from source-maps to others
Ashwin
@ashwins93
Oct 23 2017 07:10
@linkin-park there is an addon for firefox
i think it must be available for other browsers as well
but i'm using the React tools for firefox
it shows the React elements in the debugger
its available for Chrome
linkin-park
@linkin-park
Oct 23 2017 07:12
i uninstalled it for Firefox
it never worked as you said
Ashwin
@ashwins93
Oct 23 2017 07:12
try chrome then
linkin-park
@linkin-park
Oct 23 2017 07:12
chrome by default does great
Ashwin
@ashwins93
Oct 23 2017 07:12
react devtools are available for chrome as well
linkin-park
@linkin-park
Oct 23 2017 07:13
i'm uninstalling ST3 for great good :)
because i have notepad++ to hilight things for me :)
alpox
@alpox
Oct 23 2017 07:14
@linkin-park oh my :D try vscode!
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:14
can someone give me a hand over why my @media doesnt work without <meta name="viewport" content="width=device-width, initial-scale=1.0">
linkin-park
@linkin-park
Oct 23 2017 07:16
if i'm using React for production someday ill go mad :)
incase:!
it will tell the error but never shows where
no file name nor line no :P
alpox
@alpox
Oct 23 2017 07:18
@linkin-park i could usually find it anyway :D
Ashwin
@ashwins93
Oct 23 2017 07:18
@Athanasopoulos1 If i had to take a guess, i think that meta tag sets the viewport width parameter so that all the width:100% kind of rules can be calculated properly
@linkin-park Usually React shows the error on the page itself, showing the exact line where it gets messed up, in a nice color
i don't know how you have set up your project
are you using create-react-app
if you use create-react-app and you run a development server
then you will get a lot of info about the bugs
alpox
@alpox
Oct 23 2017 07:20
@ashwins93 i think you refer to the in create-react-app integrated redbox
Ashwin
@ashwins93
Oct 23 2017 07:20
it shows on the browser window itself, not on the console
@alpox the npm package
alpox
@alpox
Oct 23 2017 07:20
Yea
Ashwin
@ashwins93
Oct 23 2017 07:20
yep
linkin-park
@linkin-park
Oct 23 2017 07:20
its like saying there is a NPE but there no file name mentioned :) giving JVM thing .
similarly it gave me a file called variant.js 28 line no
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:20
@ashwins93 seems like that's the reason but @media doesn't have as prerequisite having a viewport meta tag
alpox
@alpox
Oct 23 2017 07:20
JVM? What setup do you have?
linkin-park
@linkin-park
Oct 23 2017 07:21
that is an example @alpox
Ashwin
@ashwins93
Oct 23 2017 07:21
@Athanasopoulos1 you do check for max-width or min-width in media queries right?
alpox
@alpox
Oct 23 2017 07:21
@linkin-park ah xD
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:21
@ashwins93 of course..
linkin-park
@linkin-park
Oct 23 2017 07:21
after using eslint i can see the error
Ashwin
@ashwins93
Oct 23 2017 07:21
@linkin-park React doesn't play well if you are trying to integrate with another project which doesn't have react
you will be better off if you do your entire project in React
with the create-react-app
@Athanasopoulos1 i guess it has to do something with that
linkin-park
@linkin-park
Oct 23 2017 07:22
if didnt play well i wont use react at all
alpox
@alpox
Oct 23 2017 07:22
Ye i would also go with create-react-app if i hqve to go react again
Ashwin
@ashwins93
Oct 23 2017 07:23
@Athanasopoulos1 since you've intrigued me i'm looking at the w3.org specification for html
alpox
@alpox
Oct 23 2017 07:23
@linkin-park also always check the jsx compiler output
Ashwin
@ashwins93
Oct 23 2017 07:23
@linkin-park they have some caveats on the reactjs site itself i think you skipped that
lol
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:25
@ashwins93 if you have something else to do dont bother spending your timefor this :) (btw if i find a solution i will post it)
Ashwin
@ashwins93
Oct 23 2017 07:25
@Athanasopoulos1 sure :+1:
Long Nguyen
@longnt80
Oct 23 2017 07:26
just got rejected on my third job interview :worried:
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:26
¨(
:(
can you tell me what is file name
or line no :/
i had just a single component fine i found the problem.
f! what if there is many files ill never be able to solve the issue :(
Ashwin
@ashwins93
Oct 23 2017 07:28

@Athanasopoulos1

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

found it, scroll down below to see the viewport item

alpox
@alpox
Oct 23 2017 07:28
@longnt80 dont give up mate :) it sometimes takes a while
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:30
@ashwins93 okay, got that, but why does it affect the @media when i declare that the statement will occur only on some specific pixels? hmmm
Ashwin
@ashwins93
Oct 23 2017 07:30
@linkin-park it says you forgot to export some element
linkin-park
@linkin-park
Oct 23 2017 07:31
i know that
but were you able to get the filename
i did source-map
Long Nguyen
@longnt80
Oct 23 2017 07:31
@alpox thanks
the first 2 wasn't so bad because I didn't like those companies
but I like this one so it made me sad
also the interviewer talked to me for more than an hour which made me I think that it went well
CamperBot
@camperbot
Oct 23 2017 07:31
longnt80 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1379 | @alpox |http://www.freecodecamp.com/alpox
Ashwin
@ashwins93
Oct 23 2017 07:31
@Athanasopoulos1 media queries depend on the device width, i think on the mobile phones, the width is set according to landscape mode
alpox
@alpox
Oct 23 2017 07:32
@linkin-park is it possible that you are running in production mode? :D
Ashwin
@ashwins93
Oct 23 2017 07:32
by using meta we can make it work with portrait mode
width=device-width
Defines the pixel width of the viewport, or allows the viewport to adapt to the device's screen width.
alpox
@alpox
Oct 23 2017 07:33
@longnt80 yea thats not nice :( but keep your head up! That was only one then :) it often takes many to find the right place
Ashwin
@ashwins93
Oct 23 2017 07:33
i think the default width parameter takes the width from the length of a mobile screen
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:33
@ashwins93 here is my problem. i was given this site as an exercise, and i can only edit the code to add @media... so im trying to find out how... The professor cant be stupid :P
Ashwin
@ashwins93
Oct 23 2017 07:34
by setting the meta tag we are asking the browser to determine width based on orientation
@Athanasopoulos1 you should have said that first
lol
linkin-park
@linkin-park
Oct 23 2017 07:34
what are the plugins i need to install in vscode
can someone give it thanks
Ashwin
@ashwins93
Oct 23 2017 07:34
@Athanasopoulos1 you are not allowed to add meta tags?
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:34
hahaha :D @ashwins93 indeed i should !
@ashwins93 i can ONLY add media
and thats what troubles me
Ashwin
@ashwins93
Oct 23 2017 07:35
@Athanasopoulos1 in that case you can go with measuring the resolution instead of the width
i'm not sure how it would work though
max-resolution = 100dpi
phones usually have a large dpi
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:36
i think i will ask him straight away cause he might have done a mistake
i always use meta viewport...
alpox
@alpox
Oct 23 2017 07:36
@linkin-park really depends on your needs. It has a lot of things baked in. You may want eslint as example and Prettier for formatting
Ashwin
@ashwins93
Oct 23 2017 07:37
@Athanasopoulos1 Alright
Long Nguyen
@longnt80
Oct 23 2017 07:37
@alpox yeah, I'll keep looking
it's been making me depressed that I couldn't do much coding today
alpox
@alpox
Oct 23 2017 07:38
@longnt80 i couldnt do much coding for months :(
Long Nguyen
@longnt80
Oct 23 2017 07:39

@linkin-park

what are the plugins i need to install in vscode

Babel syntax
ESlint
Reactjs code snippets

@alpox yeah, sometimes it's hard to keep motivated
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:40
@ashwins93 thanks anyway
CamperBot
@camperbot
Oct 23 2017 07:40
athanasopoulos1 sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 23 2017 07:41
@Athanasopoulos1 Lol do let me know how it goes
linkin-park
@linkin-park
Oct 23 2017 07:41
thanks @longnt80 @alpox
CamperBot
@camperbot
Oct 23 2017 07:41
linkin-park sends brownie points to @longnt80 and @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1380 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 606 | @longnt80 |http://www.freecodecamp.com/longnt80
linkin-park
@linkin-park
Oct 23 2017 07:41
downloaded the things
need to reload the window :X
Athanasopoulos Kostas
@Athanasopoulos1
Oct 23 2017 07:42
@ashwins93 i will keep you posted :P
Long Nguyen
@longnt80
Oct 23 2017 07:42
@linkin-park btw, use create-react-app if you're just starting with reactjs
will save you lots of time
Ashwin
@ashwins93
Oct 23 2017 07:42
@Athanasopoulos1 haha looking forward to it

@linkin-park btw, use create-react-app if you're just starting with reactjs

+1

@linkin-park by now you must consider how many people have recommended you lol
linkin-park
@linkin-park
Oct 23 2017 07:46
have you see n this
to use specific environment i need to install this environment globally
eslint for example npm install -g eslint
are you kiddin me?
any alternative
based on this error from vscode after eslint plugin installed in VSCODE
Failed to load the ESLint library for the document
To use ESLint for single JavaScript file install eslint globally using 'npm install -g eslint'.
You need to reopen VS Code after installing eslint.
i'm doing this for frontend work :'(
Long Nguyen
@longnt80
Oct 23 2017 07:51
@linkin-park I think you just need to install eslint locally in your project?
I didn't install eslint globally
If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install
@linkin-park and if you'd use create-react-app, eslint would be setup by default
linkin-park
@linkin-park
Oct 23 2017 07:57
weird world!
Ashwin
@ashwins93
Oct 23 2017 07:58
@linkin-park perhaps if you used create-react-app it wouldn't be so weird :P
linkin-park
@linkin-park
Oct 23 2017 08:01
it abstract away pain but did you see the problem?
but this is weird
if i'm using a plugin it always stays with IDE
it never can harm my environment :)
in the sense i dont need to part of my dev/prod env
Ashwin
@ashwins93
Oct 23 2017 08:04
Don't you mean devDependencies
linkin-park
@linkin-park
Oct 23 2017 08:05
well devdependencies in metadata of the folder like .git has
alpox
@alpox
Oct 23 2017 08:16
@linkin-park Its usual to install such things globally
linkin-park
@linkin-park
Oct 23 2017 08:23
;o
okay in vscode
it shows no of item installed 8
but only 2 are visible
beautify and babel
alpox
@alpox
Oct 23 2017 08:26
@linkin-park You can scroll and make the part bigger
linkin-park
@linkin-park
Oct 23 2017 08:26
yea i got it :P
i need to change the theme :P
which theme is better :?
Ashwin
@ashwins93
Oct 23 2017 08:27
@linkin-park try oceanic-next
alpox
@alpox
Oct 23 2017 08:27
@linkin-park I'm using One Monokai 80s Theme
abraham anak agung
@padunk
Oct 23 2017 08:29
@linkin-park i'm using one dark pro :smile:
Anyone here know good source to learn redux?
alpox
@alpox
Oct 23 2017 08:29
A cool additional thing: https://github.com/tonsky/FiraCode
@padunk :wave:
Redux website itself :D
abraham anak agung
@padunk
Oct 23 2017 08:30
@alpox :wave:
ah yes off course, let me try
alpox
@alpox
Oct 23 2017 08:35
@padunk I see the creator of redux made also a series of videos:
https://egghead.io/courses/getting-started-with-redux
abraham anak agung
@padunk
Oct 23 2017 08:38
@alpox Thank you, i saw that one before but i still don't get it :smile: maybe i am a slow learner.
anyway i think i have to watch it again and again...
CamperBot
@camperbot
Oct 23 2017 08:38
padunk sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1381 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 23 2017 08:38
@padunk I thought the docs at http://redux.js.org/ are quite good
@padunk Be aware of the roadmap on the left side :D (index)
It is sometimes collapsed
Ashwin
@ashwins93
Oct 23 2017 08:39

@alpox

It is tiny (2kB, including dependencies).

how does that work!

linkin-park
@linkin-park
Oct 23 2017 08:40
instead of learning many things that does same thing is it possible to move to elm-lang?
alpox
@alpox
Oct 23 2017 08:40
@ashwins93 Thats because its only very few lines :D
Ashwin
@ashwins93
Oct 23 2017 08:40
@alpox yeah its impressive
I saw his demo video
he is a cool guy
alpox
@alpox
Oct 23 2017 08:41
@linkin-park Sure it is. Elm is quite nice in some measures but it forces you to do everything exactly their way with no excuse. Thats one thing i didn't like much about it. It prohibits generalization in most cases (Does not necessarily have to be a bad thing though)
Also, Javascript interop can be a pain at times, but that also has its right
@linkin-park I'm moving to Clojure land now though
linkin-park
@linkin-park
Oct 23 2017 08:42
thats what makes functional as functional :)
alpox
@alpox
Oct 23 2017 08:43
@linkin-park Sure, thats why i say it has its right
linkin-park
@linkin-park
Oct 23 2017 08:43
just that i'm curious if elm has better community few years from now it has its right and i have right to quit react :)
alpox
@alpox
Oct 23 2017 08:44
@linkin-park They will stay coexisting. Not everyone likes elm and companies often don't want to move to such a language mostly because javascript devs are easier to get.
I myself moved away from elm because it was too much of a cage
linkin-park
@linkin-park
Oct 23 2017 08:45
i dont want to have runtime error in production
alpox
@alpox
Oct 23 2017 08:45
@linkin-park Well, then, elm would probably be right for you
linkin-park
@linkin-park
Oct 23 2017 08:45
in development i dont care :P
alpox
@alpox
Oct 23 2017 08:46
@linkin-park Elm is also known for the best error messages
linkin-park
@linkin-park
Oct 23 2017 08:46
i see
alpox
@alpox
Oct 23 2017 08:46
Still, i would make more advertisment for clojure :D
linkin-park
@linkin-park
Oct 23 2017 08:46
never know FP made error -> message -> simple
alpox
@alpox
Oct 23 2017 08:46
Clojure(Script) has awesome tooling and awesome libraries
linkin-park
@linkin-park
Oct 23 2017 08:47
:) it has its root of JVM
alpox
@alpox
Oct 23 2017 08:47
Only on serverside
And not necessarily there either
linkin-park
@linkin-park
Oct 23 2017 08:47
i found coffeescript is very nice
alpox
@alpox
Oct 23 2017 08:48
Uhm. Nope
linkin-park
@linkin-park
Oct 23 2017 08:48
i liked it :)
alpox
@alpox
Oct 23 2017 08:53
@linkin-park Elm was too much for me after i tried to implement flash-messages. Something that simple is terribly complicated in elm
Mostly because its time-bound and involves html transitions
Long Nguyen
@longnt80
Oct 23 2017 08:59
both of these helped me to understand Redux and applied it in a test project from a company I applied for within 3 days
linkin-park
@linkin-park
Oct 23 2017 09:04
flash message @alpox
?
there is too many tutorials if someone ask me any resource would say google it :)
since if i say i like X he might not like it :)
Long Nguyen
@longnt80
Oct 23 2017 09:07
I'd assume that they already googled it
abraham anak agung
@padunk
Oct 23 2017 09:07
@longnt80 thank you. Redux is too abstract for my brain :smile:
CamperBot
@camperbot
Oct 23 2017 09:07
padunk sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 607 | @longnt80 |http://www.freecodecamp.com/longnt80
Long Nguyen
@longnt80
Oct 23 2017 09:09
@padunk for me, I just viewed the first 7 videos from that series to grasp some basic ideas, then I followed the tutorial on codepen
because I wanted to get it quickly (I needed to understand and implement Redux in the project in less than 3 days)
linkin-park
@linkin-park
Oct 23 2017 09:12
i need to learn react in 3 days :)
i'm done :(
alpox
@alpox
Oct 23 2017 09:14
@linkin-park For elm there is usually not many resources
Ashwin
@ashwins93
Oct 23 2017 09:21
@linkin-park 3 days?
korzo
@korzo
Oct 23 2017 09:40
@linkin-park easy peasy
Rokas Lakstauskas
@rokiszb
Oct 23 2017 11:50
php
rscales02
@rscales02
Oct 23 2017 12:06
morning campers
Ashwin
@ashwins93
Oct 23 2017 12:34
morning @rscales02
need help with this
Stephen James
@sjames1958gm
Oct 23 2017 13:13
@relentless-coder You might need to supply the files option. It might not recognize those as javascript.
Maybe use myscript_1508761436559.js the query string version may confuse.
Chris
@bestintown23
Oct 23 2017 14:28
centering the image on this pen? https://codepen.io/bestintown23/pen/VMRgqY
Kaz Baig
@kbaig
Oct 23 2017 14:44
@bestintown23
.img {
    display: flex;
    justify-content: center;
}
Daniel Feldman
@Feldbot
Oct 23 2017 14:58

Hi. This seems super basic, but I'm not understanding something basic about incrementing variables:

var x = 5;
var y = x++;
console.log("x: ", x); 
console.log("y: ", y);

Why does X get evaluated to 6? I understand that in y the value of x is incremented after evaluation, but why does x change at all?

Kaz Baig
@kbaig
Oct 23 2017 15:01
@Feldbot x++ does not mean x + 1. It means x = x + 1. Therefore, y = x++ is the same as y = x = x + 1
Daniel Feldman
@Feldbot
Oct 23 2017 15:03
@kbaig So x is actually reassigned after y is evaluated?
Kaz Baig
@kbaig
Oct 23 2017 15:04
@Feldbot Work from right to left. x is assigned x + 1. Then y is assigned the new value of x
Daniel Feldman
@Feldbot
Oct 23 2017 15:05
@kbaig But in the console y remains 5, and x becomes 6?
Kaz Baig
@kbaig
Oct 23 2017 15:06
@Feldbot Oh, you're right. That's funky but I suppose yeah that's it
Ashwin
@ashwins93
Oct 23 2017 15:06
@Feldbot to be more clear var y = x++ is equivalent to
var y = x;
x = x + 1;
because post increment operator is used
Stephen James
@sjames1958gm
Oct 23 2017 15:06
@Feldbot
x++ means after using x then increment it. so y gets the value of x before the increment
++x means increment x then use it.
Ashwin
@ashwins93
Oct 23 2017 15:06
used*
if preincrement operator was used
Pascal Clanget
@Gh05d
Oct 23 2017 15:07
Hi Guys, would you mind taking a look at my css and give me some tips for the styling?
https://codepen.io/Gh05d/pen/boyero?editors=0110
Ashwin
@ashwins93
Oct 23 2017 15:07
then var y = ++x would be equivalent to
x = x + 1;
var y = x
Kaz Baig
@kbaig
Oct 23 2017 15:07
huh I've never seen ++x before. Probs one of those things I'd rather avoid for readability anyways
Ashwin
@ashwins93
Oct 23 2017 15:08
@kbaig It is different from x++
look up preincrement and postincrement
Daniel Feldman
@Feldbot
Oct 23 2017 15:08
I think I get the idea behind prefix and postfixing with shorthand, I just don't understand why x changes instead of y in the code.
Ashwin
@ashwins93
Oct 23 2017 15:09
@Feldbot thats what i explained in that snippet
Kaz Baig
@kbaig
Oct 23 2017 15:10
@ashwins93 Yep I got the gist from the names
Ashwin
@ashwins93
Oct 23 2017 15:10
cool
Kaz Baig
@kbaig
Oct 23 2017 15:11
@Feldbot y is being assigned before x is incremented. If you did y = ++x, y would be 6
Daniel Feldman
@Feldbot
Oct 23 2017 15:16
Why does the variable x change value? Shouldn't variable y reflect any changes after it evaluates y?
Doesn't y hold the result of x being modified just in it's own variable and x should be unchanged since it is it's own variable?
Kaz Baig
@kbaig
Oct 23 2017 15:18
@Feldbot No, it is not dynamic in that sense.
let x = 1;
let y = 2;
y = x;
x ++;
x will be 2 here, y will be 1
y is not being assigned whatever is in x at all times, it is simply taking the value stored in x and assigning that same value to y
I think I might have misinterpreted your question...
Kaz Baig
@kbaig
Oct 23 2017 15:23
let x = 1;
let y = x + 1;
As you expect, x remains 1 here whereas y is 2
This is different from let y = x ++, which is basically the same as writing
let y = x;
x = x + 1;
x++ is not the same as x + 1. x++ reassigns x without having to explicitly state that you are making an assignment.
Daniel Feldman
@Feldbot
Oct 23 2017 15:31
@kbaig But that variable y would hold the reassigned value of the incrementing of x in that variable context... So why would variable x itself change?
@kbaig Sorry, I feel like I'm echoing the same question. I'm just not seeing it.
Kaz Baig
@kbaig
Oct 23 2017 15:32
@Feldbot Because x++ is not shorthand for x + 1, it is shorthand for x = x + 1, ie you're reassigning x
x is changing because x++ means change the value of x to one more than it is right now
Daniel Feldman
@Feldbot
Oct 23 2017 15:33
But that reassignment is held by y?
Kaz Baig
@kbaig
Oct 23 2017 15:33
yes but you are doing more than one operation in one line by writing y = x ++
this one line does the exact same thing as if you were to write down
y = x;
x = x + 1;
Forget about y for a second
Type the following into the console:
let x = 0;
x
x + 1
x
x ++
x
Notice that the difference between x + 1 and x++ is that you are only reassigning x in the latter
Kaz Baig
@kbaig
Oct 23 2017 15:43
So if you're doing y = x + 1, the engine is reading that as find what the value of x is, add 1, and assign that total value to y
Which is different from y = x ++, which is interpreted is find the current value of x, assign y that same value, and then reassign x to 1 more than it is right now
Daniel Feldman
@Feldbot
Oct 23 2017 15:55
@kbaig I think I see the theory now. I can't believe how confusing that is to see. It seems contrary to how I think of variables working. Thanks a bunch for the breakdown, that was very helpful.
CamperBot
@camperbot
Oct 23 2017 15:55
feldbot sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @kbaig |http://www.freecodecamp.com/kbaig
Kaz Baig
@kbaig
Oct 23 2017 15:56
@Feldbot No problem. I'd recommend, and this is something I practice in my own code, to only use the ++ operator in situations without the equals sign. It's a lot more readable and no need to get into the headache of using shorthand that doesn't actually shorten things
Daniel Feldman
@Feldbot
Oct 23 2017 15:57
@kbaig As you mentioned, reading right to left seems key. How do you mean using it without the equals sign?
@ashwins93 Thanks for the help, much appreciated.
CamperBot
@camperbot
Oct 23 2017 16:01
feldbot sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Safham123
@Safham123
Oct 23 2017 16:01
need help with my java project
Ashwin
@ashwins93
Oct 23 2017 16:01
@Feldbot you're welcome
Kaz Baig
@kbaig
Oct 23 2017 16:04
@Feldbot As in I never use ++ in a line where I am assigning (=) or comparing (==/===) something
Daniel Feldman
@Feldbot
Oct 23 2017 16:06
@kbaig Okay, that makes sense, good to keep a better mental and visual snapshot of what is going on. One other question, do you evaluate all variable assignments from right to left? That is, is that how the engine evaluates variable assignments for all expressions/statements?
@sjames1958gm Thanks for the help!
CamperBot
@camperbot
Oct 23 2017 16:08
feldbot sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8603 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Oct 23 2017 16:08
@camperbot yw
Kaz Baig
@kbaig
Oct 23 2017 16:09
@Feldbot That would be the way to think about it almost every time. As you can see, there are some exceptions
Daniel Feldman
@Feldbot
Oct 23 2017 16:11
@kbaig Sorry, I didn't see the exceptions...
Kaz Baig
@kbaig
Oct 23 2017 16:12
@Feldbot y = x ++ wouldn't necessarily be read as if it was happening right to left because x was being incremented after y was assigned a value
^exception
Daniel Feldman
@Feldbot
Oct 23 2017 16:14
@kbaig Oh no, there's that! Ha ha! Yes, thanks again!
CamperBot
@camperbot
Oct 23 2017 16:14
feldbot sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Kaz Baig
@kbaig
Oct 23 2017 16:14
yw
Chris
@bestintown23
Oct 23 2017 16:32
how can i resize my email logo in my row of icons? https://codepen.io/bestintown23/pen/VMRgqY
Tom
@moT01
Oct 23 2017 16:35
try using max-width
looks like it might work for what you're doing @bestintown23
Kennethli36
@Kennethli36
Oct 23 2017 16:52
Hey Can i get some help? Why is my page overflowing on to right? i know i can fix this by overflow-x: hidden; but how come its overflowing. And for moving my h5 Text over to right is best way move text by using position and right. https://codepen.io/Kennayy/pen/vewZaX
Sorry im new to coding
Daniel Feldman
@Feldbot
Oct 23 2017 16:53
@bestintown23 You can always put a width attribute on your HTML img tag too, like <img src="https://s20.postimg.org/t3n507v8t/email_icon.png" alt="" width="50px"
Kaz Baig
@kbaig
Oct 23 2017 16:56
@Kennethli36 You translated it by 500px by using position: relative and left: 500px
Chris
@bestintown23
Oct 23 2017 16:57
@Feldbot genius thank you
Kaz Baig
@kbaig
Oct 23 2017 16:57
So you're saying make it look as it would without translation, and then just shift it to the right
Daniel Feldman
@Feldbot
Oct 23 2017 16:57
@bestintown23 Glad to help! Have fun...
Kennethli36
@Kennethli36
Oct 23 2017 16:57
@kbaig ahh ok
@kbaig thanks
CamperBot
@camperbot
Oct 23 2017 16:58
kennethli36 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @kbaig |http://www.freecodecamp.com/kbaig
Kennethli36
@Kennethli36
Oct 23 2017 17:05
@kbaig when u move like texts like h5 over to right is best to use position or margins? idk difference?
Ashwin
@ashwins93
Oct 23 2017 17:06
@Kennethli36 the difference is how it affects the other elements
Kaz Baig
@kbaig
Oct 23 2017 17:06
@Kennethli36 position is just moving things around while maintaining the shape it already had. Padding will change the shape of the element. Margin will change the spacing between the element and others
Kennethli36
@Kennethli36
Oct 23 2017 17:07
ahh ok alright ty @kbaig @ashwins93
CamperBot
@camperbot
Oct 23 2017 17:07
kennethli36 sends brownie points to @kbaig and @ashwins93 :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 389 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Chris
@bestintown23
Oct 23 2017 17:08
How can i place the text to be center underneath each image? https://codepen.io/bestintown23/pen/VMRgqY
Kaz Baig
@kbaig
Oct 23 2017 17:11
@bestintown23 You currently have both the text and image as inline elements. You need the text to be a block element.
The <figcaption> element is meant to caption images and also happens to be a block element by default.
Chris
@bestintown23
Oct 23 2017 17:13
@kbaig thanks bro
CamperBot
@camperbot
Oct 23 2017 17:13
bestintown23 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @kbaig |http://www.freecodecamp.com/kbaig
linkin-park
@linkin-park
Oct 23 2017 17:13
how long you will take to study a framework , atleast for a beginner :P @ashwin93
why redux is required?
@korzo
Jake
@JakeDVirus
Oct 23 2017 17:18
Is there anything wrong in the snippet given below?? just wana confirm
@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media only screen and (-webkit-min-device-pixel-ratio : 1.5),
   only screen and (-o-min-device-pixel-ratio: 3/2),
   only screen and (min--moz-device-pixel-ratio: 1.5),
   only screen and (min-device-pixel-ratio: 1.5),
   only screen and (min-resolution: 144dpi) {
    background-image: url("#{$at2x_path}"); 
  }

  @media only screen and (-webkit-min-device-pixel-ratio : 2.5),
   only screen and (-o-min-device-pixel-ratio: 5/2),
   only screen and (min--moz-device-pixel-ratio: 2.5),
   only screen and (min-device-pixel-ratio: 2.5),
   only screen and (min-resolution: 216dpi) {
    background-image: url("#{$at2x_path}"); 
  }
}
linkin-park
@linkin-park
Oct 23 2017 17:19
well it seems alien to me :)
Ashwin
@ashwins93
Oct 23 2017 17:20

how long you will take to study a framework , atleast for a beginner :P @ashwin93

You know that i study CA. So as with my academics, i take everything very slowly. In depth analysis and then proceed.

@linkin-park
linkin-park
@linkin-park
Oct 23 2017 17:22
oh i told to you with respect to your reply "3 days"
@ashwins93
i dont have a habit of studying framework for along time :(
@ashwins93 by the way why we need redux?
Ashwin
@ashwins93
Oct 23 2017 17:24

@ashwins93 by the way why we need redux?

For scalable projects, performance

linkin-park
@linkin-park
Oct 23 2017 17:24
didnt get it :(
please explain it :)
Ashwin
@ashwins93
Oct 23 2017 17:24
let me share a video presentation by Dan Abramov
creator of Redux
linkin-park
@linkin-park
Oct 23 2017 17:25
k sure :)
this is the official site
linkin-park
@linkin-park
Oct 23 2017 17:25
yay!
video link ?
Ashwin
@ashwins93
Oct 23 2017 17:26
okay sorry the video is about React
he said he invented Redux while working on that video
linkin-park
@linkin-park
Oct 23 2017 17:27
we can do the things in react right?
what we can do in redux
so why we need to move from react to redux for state management?
Ashwin
@ashwins93
Oct 23 2017 17:30
@linkin-park Oh no Redux manages Models
Redux can work with any View engine
you can use Vue or anything
or just vanilla JS
for the View
Redux is just 2 kb
!

The Gist

The whole state of your app is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.

That's it!

linkin-park
@linkin-park
Oct 23 2017 17:31
why cant i manage state in reactjs?
Ashwin
@ashwins93
Oct 23 2017 17:32
from the website
@linkin-park As a programmer you realize the importance about Immutable Objects right?
Kaz Baig
@kbaig
Oct 23 2017 17:32
@linkin-park you can, redux just makes managing state simpler
linkin-park
@linkin-park
Oct 23 2017 17:32
i get some what
ya @ashwins93
Ashwin
@ashwins93
Oct 23 2017 17:32
Yeah Redux helps you make the state immutable
linkin-park
@linkin-park
Oct 23 2017 17:32
immutable makes sense in other language
but it never make sense here in js
Ashwin
@ashwins93
Oct 23 2017 17:33
@linkin-park Strings are immutable in JS
linkin-park
@linkin-park
Oct 23 2017 17:33
ya
Ashwin
@ashwins93
Oct 23 2017 17:33
and we can implement immutability in JS via the object model
we simply don't alter the objects
linkin-park
@linkin-park
Oct 23 2017 17:33
yes via trees
Ashwin
@ashwins93
Oct 23 2017 17:33
instead we create new objects on every change
Redux helps you to do that operation
creating new states whenever state changes
linkin-park
@linkin-park
Oct 23 2017 17:34
i can do that without redux right?
Ashwin
@ashwins93
Oct 23 2017 17:34
it doesn't alter states, the state is immutable
@linkin-park Yes you can
linkin-park
@linkin-park
Oct 23 2017 17:34
:/
Ashwin
@ashwins93
Oct 23 2017 17:35
But i don't think you can do it with this.setState()
linkin-park
@linkin-park
Oct 23 2017 17:35
ah! i see
but wait a min.
Kaz Baig
@kbaig
Oct 23 2017 17:35
You can do it using setState, but you need to have the state already by passing it down to the component via props
linkin-park
@linkin-park
Oct 23 2017 17:36
the only reason you may like FP is because of immutablity and this allows to scale in multithreaded env
and js is never multi threaded
and this makes no sense
Kaz Baig
@kbaig
Oct 23 2017 17:36
This is why setState doesn't require for you to pass in the whole new state, just the bit you want to change
linkin-park
@linkin-park
Oct 23 2017 17:38
i started reading states let me finish this :) and ill come back again to ask questions.'
and FP in js really makes no sense as sense.
alpox
@alpox
Oct 23 2017 17:39
@linkin-park immutability can make sense in every language
Its just not that easy to accomplish and is not as performant as in pure FP languages
linkin-park
@linkin-park
Oct 23 2017 17:40
ofcourse not in js @alpox
alpox
@alpox
Oct 23 2017 17:40
@linkin-park of course there too
linkin-park
@linkin-park
Oct 23 2017 17:40
js is single threaded
alpox
@alpox
Oct 23 2017 17:40
I mean it makes sense there too
linkin-park
@linkin-park
Oct 23 2017 17:40
it never requires
alpox
@alpox
Oct 23 2017 17:40
Immutability has nothing to do with threading except that it also makes that easier
linkin-park
@linkin-park
Oct 23 2017 17:41
yes easier
alpox
@alpox
Oct 23 2017 17:41
But thats not at all the only thing why immutable data makes sense
linkin-park
@linkin-park
Oct 23 2017 17:42
it make sense only for that to me.
alpox
@alpox
Oct 23 2017 17:43
Immutability gives you certain possibilities like: easy time-travel (data insight of older states), less entanglement - data doesnt just get changed anywhere in your app, so common state is not shared. This makes it MUCH easier to reason about an application.
linkin-park
@linkin-park
Oct 23 2017 17:43
i dont see that cant be done in vanilla js
alpox
@alpox
Oct 23 2017 17:43
Else, with mutable state, you can call functions or methods and you have no idea what else that function changes and updates what you didnt think of, all behind the scenes
Ashwin
@ashwins93
Oct 23 2017 17:44
@linkin-park you should watch the time travel video. Dan may be able to explain you better
i think
linkin-park
@linkin-park
Oct 23 2017 17:44
you can use that paradigm here but it really makes no sense in single threaded model
k i'm on to the video byz
Vamshi Gudipati
@vamshikrishna144
Oct 23 2017 17:50
@linkin-park threading has nothing to do with immutable data. It is just maintaining your state(data) of the application in a smarter way, usually in scalable(apps that have relative big data) apps
relatively*
Barbara Pentoney
@flyfishingbarbara
Oct 23 2017 17:51
hi all....can someone explain onthe factorialize challenge how 0!=1...??
linkin-park
@linkin-park
Oct 23 2017 17:51
immutable helps you to scale better :) the paradigm forces you to @vamshikrishna144
Chris
@bestintown23
Oct 23 2017 17:51
why is my h2 element looking kookoo? https://codepen.io/bestintown23/pen/VMRgqY
linkin-park
@linkin-park
Oct 23 2017 17:52
as i'm using erlang and haskell for fundo can see the way its run actor model
alpox
@alpox
Oct 23 2017 17:53
@linkin-park threading really really does not have much to do with immutability
Vamshi Gudipati
@vamshikrishna144
Oct 23 2017 17:53
@linkin-park right. Btw I miss Chester
linkin-park
@linkin-park
Oct 23 2017 17:53
if you realate that way it has nothing to do with it
@alpox
but it helps you scale
and maintain the state fine:)
alpox
@alpox
Oct 23 2017 17:54
Immutability helps to scalr, yes
Scel
Scale* damn phone :D
linkin-park
@linkin-park
Oct 23 2017 17:54
i miss chester too :(
Kaz Baig
@kbaig
Oct 23 2017 17:55
@bestintown23 You have an extra </div> right before your h2
linkin-park
@linkin-park
Oct 23 2017 17:55
i use it only for scaling
thats why its born :)
instead of this i can go for fp
its just a different paradigm
alpox
@alpox
Oct 23 2017 17:57
@linkin-park not just instead of this
linkin-park
@linkin-park
Oct 23 2017 17:58
i really got hurt by this
alpox
@alpox
Oct 23 2017 17:58
Yea it does hurt
But there are other things which hurt too :D
linkin-park
@linkin-park
Oct 23 2017 17:58
yea !
f! it
alpox
@alpox
Oct 23 2017 17:59
@linkin-park if you go with redux, also look into recompose sometime
linkin-park
@linkin-park
Oct 23 2017 17:59
but in multi threaded there is lot of side effects
alpox
@alpox
Oct 23 2017 18:00
With recompose you wont have to make any react class anymore and can use functional components only
@linkin-park side effects are in all threading models as long as you have mutable state
linkin-park
@linkin-park
Oct 23 2017 18:00
using this paradigm removes the side effects
and this helps in scaling
so i dont see scaling part in js
alpox
@alpox
Oct 23 2017 18:01
@linkin-park depends on what you call scaling. There are different ways to scale
Immutability helps a lot when scaling to a big codebase
With a lot of interaction
Ashwin
@ashwins93
Oct 23 2017 18:01
@flyfishingbarbara That is a mathematical rule not programmic
linkin-park
@linkin-park
Oct 23 2017 18:03
big codebase?
which interaction we are speaking here?
too abstract
alpox
@alpox
Oct 23 2017 18:04
@linkin-park interaction between different parts of your code.
With big codebase i mean if you have an application with tons of code and a lot of moving data
linkin-park
@linkin-park
Oct 23 2017 18:05
i really want to understand this reactjs why they compare with other framework and how this makes it better :/
js really sucks and this paradigm help you feel better with the language?
:P
alpox
@alpox
Oct 23 2017 18:07
@linkin-park i usually use the paradigm through vanilla js. Js does suck. Who doesnt see that probably never used a better language :D i myself move to Clojure atm
linkin-park
@linkin-park
Oct 23 2017 18:08
for example const foo = []
alpox
@alpox
Oct 23 2017 18:08
But yes, immutability helps to reason about code so it helps with js too
linkin-park
@linkin-park
Oct 23 2017 18:08
foo is constant but the array can be changed
alpox
@alpox
Oct 23 2017 18:08
@linkin-park that doesnt make it immutabkle at all
Yea
linkin-park
@linkin-park
Oct 23 2017 18:08
so why they give const?
alpox
@alpox
Oct 23 2017 18:09
@linkin-park compiler optinizations
Optimizations*
linkin-park
@linkin-park
Oct 23 2017 18:09
oh!
Ashwin
@ashwins93
Oct 23 2017 18:09

for example const foo = []

this is true for all the languages

you cant reassign foo
but you can reassign what's inside foo
think of C
its just a constant pointer
alpox
@alpox
Oct 23 2017 18:10
@ashwins93 no. C++ const makes some instance fully constant
Ashwin
@ashwins93
Oct 23 2017 18:10
the pointer address can't be changed
@alpox i'm talking about pointers
linkin-park
@linkin-park
Oct 23 2017 18:10
@alpox pointedit
C++ is so friendly
alpox
@alpox
Oct 23 2017 18:11
C++. Friendly. Im out :D
Ashwin
@ashwins93
Oct 23 2017 18:11
In Java also if you set the array reference to be constant, you can still change the elements

C++. Friendly. Im out :D

Hahaha

linkin-park
@linkin-park
Oct 23 2017 18:12
:/ come on
i'm going to learn react :| will come back ;)
Ashwin
@ashwins93
Oct 23 2017 18:13
@linkin-park learn Redux while you're at it
did you see the video?
linkin-park
@linkin-park
Oct 23 2017 18:20
i didnt get redux , ill have some idea of react
bye all
Jessie Cryer
@j-cryer
Oct 23 2017 18:22
hey any one experienced with sql available ?
alpox
@alpox
Oct 23 2017 18:22
@linkin-park :wave:
@j-cryer Yea
Ashwin
@ashwins93
Oct 23 2017 18:23
@linkin-park Bye
Jessie Cryer
@j-cryer
Oct 23 2017 18:25
@alpox Is there an elegant way to return two separate values from multiple select statement in one query? ie.
SELECT var = expression; SELECT var = expression;
@j-cryer If not I'll have to perform multiple queries and before I write two queries I want to make sure there's not an easy method to accomplish this.
oops i tagged myself..
alpox
@alpox
Oct 23 2017 18:27
@j-cryer Hmm wait you want only 2 values?
Each from.. what? Singular value or subquery?
alpox
@alpox
Oct 23 2017 18:47
:-/ I want a ||= operator in javascript
Ashwin
@ashwins93
Oct 23 2017 18:52
@alpox sounds like a nice idea
Kaz Baig
@kbaig
Oct 23 2017 19:04
@alpox what would you need that for?
Sorin Ruse
@sorinr
Oct 23 2017 19:11
@alpox ||=, ||== etc
Jose Diaz
@jsd540
Oct 23 2017 20:10
Thinking of using magicSuggest or awesomplete for a search function, but not sure how to include a dependency when I finally transfer everything to codepen. Any suggestions?
Kaz Baig
@kbaig
Oct 23 2017 20:12
@jsd540 You would want to add a cdn as a resource
alpox
@alpox
Oct 23 2017 20:14
@sorinr ||== doesn't make much sense in my eyes
@kbaig I'd want it instead of a = a || b to just do a ||= b. I think this actually exists in some languages
Kaz Baig
@kbaig
Oct 23 2017 20:16
@alpox oh I thought you wanted it for comparison
I like writing it out the full way so that it looks like a fallback pattern anyway
Jose Diaz
@jsd540
Oct 23 2017 20:17
@kbaig Thanks!!
CamperBot
@camperbot
Oct 23 2017 20:17
jsd540 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @kbaig |http://www.freecodecamp.com/kbaig
Kaz Baig
@kbaig
Oct 23 2017 20:17
In any case, we don't need it as much now that we have default values in es6
alpox
@alpox
Oct 23 2017 20:18
@kbaig There are still cases where it can be handy, but it would just be a little sugar anyway :D
Kacper
@KacperPL0
Oct 23 2017 20:22
hello guys! I have a problem... i'm trying to make a fixed top nav menu in my portfolio page but when i made position: fixed my hover doesnt work. how can i do it all work? Here's my link: https://codepen.io/Kathaspar/pen/OjEwJr
alpox
@alpox
Oct 23 2017 20:24
@KacperPL0 Where did you try to put position: fixed? I don't see any in your pen
linkin-park
@linkin-park
Oct 23 2017 20:25
sorry about lat time @alpox was comparing threading instead of concurrency
my bad working with java made my life hell.
Kacper
@KacperPL0
Oct 23 2017 20:25
@alpox oh, i deleted it. i put it in header{}
alpox
@alpox
Oct 23 2017 20:26
@linkin-park Hmm kinda goes in about the same pot because threading allows concurrency in some cases
@KacperPL0 Works for me there though :-) just the rest of the styling goes a bit off, but position: fixed does its work

@KacperPL0

header {
  background: white;
  position: fixed;
  width: 100%;
}

Looks about right like this

Dan Cancro
@dancancro
Oct 23 2017 20:29

CSS problem

CSS is my biggest problem. Does anyone have a good system for rooting out CSS problems or a tutorial that describes a methodology for doing it? A CSS problem comes from some element or elements having a bad value or bad values of some attributes. I find solving these things almost as hard as picking a lock.
Kacper
@KacperPL0
Oct 23 2017 20:30
@alpox i have exactly like this and hover doesnt work for me :(
alpox
@alpox
Oct 23 2017 20:30
@KacperPL0 Hover?
What hover
@KacperPL0 Ah now i see your problem :D

@KacperPL0

header {
  background: white;
  position: fixed;
  width: 100%;
  z-index: 100;
}

try it like this

Kacper
@KacperPL0
Oct 23 2017 20:33
thank you very much!!!!
shilpi verma
@shilpiverma509
Oct 23 2017 20:34
Hi guys, I need help with a simple to-do task. When I try to click the checkbox , i need to mark a task ad completed. Nothing's happening. Here's a link to my code
with completed, I mean add a class "taskCompleted" which has a text-decoration of "line-through"
alpox
@alpox
Oct 23 2017 20:39

@shilpiverma509 You use this code for adding the class taskCompleted.

$(".checked").on('click','li',()=>{
       $('this').addClass("taskCompleted");
   });

Now, at the time you want to add those eventlistener to all buttons with class checked, those buttons don't yet exist because you didn't add any todos yet. (At page load).

@shilpiverma509 Thats why nothing happens on click of the button.
@shilpiverma509 Another note is that you delegate the event to all li descendants - but those would have to be descendants of the button with class checked - but the button itself doesn't have any descendants.
Also, you use 'this' as a string which should be the keyword this (No string). That keyword cannot be used in an arrow function though, because the arrow function keeps the lexical scope. Use function() {} instead if you have to access the this keyword in a jquery callback.
shilpi verma
@shilpiverma509
Oct 23 2017 20:49

@alpox Ahh, I get it now. So, I think I should use

$("#todos").on('click','li',function(){
$(this).addClass("taskCompleted");
});
Now, it will delegate the events to all li descendants

alpox
@alpox
Oct 23 2017 20:49
@shilpiverma509 Well now you don't have the click event on the button - but on the whole li element :D if thats what you want, yea
shilpi verma
@shilpiverma509
Oct 23 2017 20:51
@alpox well, I'm messing up . So ,if I use the click event on the button with the code you gave, it isnt working.
alpox
@alpox
Oct 23 2017 20:51
@shilpiverma509 The code i gave was copy-paste of your code to show context
@shilpiverma509 You'd have to use the click function on the button right after it gets added - and then inside the click function you have to somehow get a reference to the li element
shilpi verma
@shilpiverma509
Oct 23 2017 20:53
@alpox If i try to add a click event on the whole li element ,it works but as soon as I add a new task, the "taskCompleted" class goes away
alpox
@alpox
Oct 23 2017 20:54
@shilpiverma509 Yes, because you override all todo elements with the method show each time you call add.
This means that all eventhandlers to the elements are gone, as well as their status

@shilpiverma509 The way to create a working todo list as you do is a complicated one done with jquery. Its just a nasty tool for that.
When you want to use jquery and not have a bad life, don't draw everything newly each time you add/remove something.

Except you know how to handle some global state which holds all information about the look of all elements and redraw them correctly through the known state.

Kaz Baig
@kbaig
Oct 23 2017 20:57
@shilpiverma509 At the end of the day, you're still trying to replicate checkbox inputs with labels. You can just do that using an input and a label element
shilpi verma
@shilpiverma509
Oct 23 2017 21:03
@alpox @kbaig you guys are right. I'm unnecessarily complicating things here . I will try this using input elements or update my show() function
thanks :+1:
Niloy513
@Niloy513
Oct 23 2017 21:17
anyone here got some time to be able to help me out here with the twitch api
https://codepen.io/Niloy513/pen/yzRPYO?editors=1010
I don't know why it won't respond
alpox
@alpox
Oct 23 2017 21:22
@Niloy513 First thing, use glitch instead of gomix in the url - they changed their domain
@Niloy513 Then you get cors issues - you already defined your variable cb for using a jsonp request but you don't use it. Just add it to the url
@Niloy513 Well, actually not just the cb - you also have to access the right endpoints - streams as example or channels - with a username
Niloy513
@Niloy513
Oct 23 2017 21:25
@alpox ahhh thank you very much for that. it says not working so at the very least it connects to jquery.
CamperBot
@camperbot
Oct 23 2017 21:25
niloy513 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1384 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 23 2017 21:26
@Niloy513 url+ch+"freecodecamp"+cb would as example give you a good url for the freecodecamp channel. If you exchange chwith st you get the stream which is currently offline and data.stream would be therefore null.
@Niloy513 Yea just console.log(data); to see what exactly you get back
Niloy513
@Niloy513
Oct 23 2017 21:30
https://wind-bow.glitch.me/twitch-apichannels/freecodecamp?callback=?
is this how the example should have been writting in your example you stated
ahh nvm I got it, forgot the foward dash
@alpox Thanks again
CamperBot
@camperbot
Oct 23 2017 21:31
niloy513 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
alpox
@alpox
Oct 23 2017 21:32
@Niloy513 np :-)
Niloy513
@Niloy513
Oct 23 2017 21:34
actually wait one last question sorry, but it works for streams but now channel any idea as to why?
alpox
@alpox
Oct 23 2017 21:34
@Niloy513 What do you mean?
If you use url+st+"freecodecamp"+cb, you get the stream information. If the stream is offline, data.stream is null. If its online, you get data.
When you want channel information you need url+ch+"freecodecamp"+cb. That gives you general information without the need that the channel is currently streaming.
Niloy513
@Niloy513
Oct 23 2017 21:35
I saved it, so if you look at my program, whenever I put streams on there it works fine, but if I exchange it with channels it comes off as an error
alpox
@alpox
Oct 23 2017 21:36
@Niloy513 It works fine with channel too
Niloy513
@Niloy513
Oct 23 2017 21:36
ohhhh whoops I misunderstood
alpox
@alpox
Oct 23 2017 21:37
Thats the data you get
image.png
Niloy513
@Niloy513
Oct 23 2017 21:37
Ok I understand what you mean now apologies for the noobish questions
alpox
@alpox
Oct 23 2017 21:37
Never mind asking questions to clarify :D
Lee
@LeeConnelly12
Oct 23 2017 21:43
The dark console theme is the best theme <3
jsnovice
@jsnovice
Oct 23 2017 21:50
Hello guys
Clarice
@NinjaPlease84
Oct 23 2017 21:54
howdy
jsnovice
@jsnovice
Oct 23 2017 21:57
Where do I get js jobs after completing this ffc course
Jake
@JakeDVirus
Oct 23 2017 22:22
just a quick question based on little confusion. i can have multiple id attribute on a specific element like <div id="one two three"></div>, isn't it?
i got the answer and that is "No" :D
Kaz Baig
@kbaig
Oct 23 2017 22:26
yeah it's a no
Sorin Ruse
@sorinr
Oct 23 2017 22:30
@alpox do u remember what was the reason for fcc to introduce the "https://wind-bow.glitch.me/twitch-api/streams/freecodecamp?callback=?" api call instead of just using your own account on twitch api directly?. i've seen that my twitch app is still working.
mbpiner
@mbpiner
Oct 23 2017 22:40

Hi all, I'm working on the front end weather app project. It's not a required user story, but I was trying to add a feature that pulled JSON from another API.

I get the JSON with jQuery's .getJSON, JSON.stringify it, and console.log that data. It looks just as it does in the browser but of course I can't access the data in it in string form. So I use JSON.parse. Once it is parsed, the value I am looking for DISAPPEARS, and only and empty Object {} is shown. I've already checked to make sure the JSON is valid. Any ideas?

geometry: Object { bounds: Object {}, location: Object {}, location_type: "APPROXIMATE", viewport: Object {} }
What I'm looking for is a number found in an object inside location.
Sorin Ruse
@sorinr
Oct 23 2017 22:44
@mbpiner can u share the pen link?
mbpiner
@mbpiner
Oct 23 2017 22:45
Sure. Its very disorganized though, just trying to get the code to work before optimizing it.
Sorin Ruse
@sorinr
Oct 23 2017 22:47
i'll do my best in reading ur code. go ahead and share it
So, I'm using google's geocoding API to get new coordinates to input into FCC weather API from an inputted address
So you could view weather at your location + any other inputted. Just type in a city and hit primary and you'll see the location data where coordinates would be is empty
To see what I mean, go down to console.log(dataTw) - I accidentally backspaced the "o" before saving
and put dataOne instead of dataTwo. Youll get the whole JSON string with location coordinates and everything
but after parsing it, the coordinates are gone
Kaz Baig
@kbaig
Oct 23 2017 22:54
@mbpiner https://gyazo.com/549dacc806b939e77cd3c9cb547d72a4 I think I got it just fine
Dan Cancro
@dancancro
Oct 23 2017 22:57
i've been at this for a week. how do you solve css problems? i don't get it
mbpiner
@mbpiner
Oct 23 2017 22:57
@kbaig so you think its a problem with codePen?
Sorin Ruse
@sorinr
Oct 23 2017 22:58
@mbpiner why do u need to use these two functions (JSON.stringify and JSON.parse) instead of working directly with the object "result" u get from here $.getJSON(b, function(result){.....?
Kaz Baig
@kbaig
Oct 23 2017 22:59
@mbpiner No I'm just pointing out that it seems to be working fine for me, assuming I'm not misunderstanding the issue
mbpiner
@mbpiner
Oct 23 2017 23:00
@sorinr I realize now that is superflous, but that $.getJSON works for now.
I'm talking about $.getJSON(newUrl, function(jsonData)
Tom
@moT01
Oct 23 2017 23:01
@dancancro practice
https://css-tricks.com/ has some good stuff
mbpiner
@mbpiner
Oct 23 2017 23:01
@kbaig Thats weird. Will it display dataTwo["geometry"].location.lat?
Kaz Baig
@kbaig
Oct 23 2017 23:03
@mbpiner It's in the console in the screenshot I linked you
Dan Cancro
@dancancro
Oct 23 2017 23:11

@moT01 here's what i did. i added a working demo as a new feature to my application contained in a nest of other elements. my application has lots of other css. so there are conflicts. i run both apps side by side and inspect an element with a problem. i go through the computed properties list of the element in both apps, looking for differences. if i find one that's different and can be toggled, i do that and see what happens. then i go up one element in the tree and do the same thing. i usually don't find the problem, but if i find something that i can toggle off and fix the problem i compare that attribute's original and updated value in my app to the good value for that same attribute in the demo app. and here's the rub... in the demo app the value is the same as the original one in my app. so i want the computed value to be what it is in the demo, but i also want the element to look the same way it does in the demo. so i'm stuck.

does that make sense? is this what you would do?

Victor Abeledo
@victorja
Oct 23 2017 23:11

Hi guys, do you know how can I add jquery to my .js file? I want to add a fadeIn effect I tried this:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--AGREGO JQUERY --> <script src="script.js"></script>
.js file:

$(document).ready(function(){ $("#hidden").fadeIn(); });
css

hidden{

display:none;

}

Kaz Baig
@kbaig
Oct 23 2017 23:17
@victorja is hidden an id? if so, your css needs to reference #hidden
Tom
@moT01
Oct 23 2017 23:19
@dancancro that sounds like one way to debug, by both apps you mean the one where you added something and the one before you added it?
im not sure what you're asking
Dan Cancro
@dancancro
Oct 23 2017 23:19
@moT01 correct
Tom
@moT01
Oct 23 2017 23:19
you want help on how to go about finding problems?
Victor Abeledo
@victorja
Oct 23 2017 23:19
@kbaig yes I typed #hidden, gitter formatted it wrong
Tom
@moT01
Oct 23 2017 23:19
or you want help with your specific problem
Dan Cancro
@dancancro
Oct 23 2017 23:20
@moT01 yes, i'm looking for general problem solving ideas. i must be doing something wrong for the solutions to this kind of problem to be so elusive to me
Sorin Ruse
@sorinr
Oct 23 2017 23:21
@mbpiner move the $("#submit").click(function() { var a = $("#address").val(); outside of the function doWeather() function and should work
Tom
@moT01
Oct 23 2017 23:21
are you using bootstrap?
Dan Cancro
@dancancro
Oct 23 2017 23:22
yes
Tom
@moT01
Oct 23 2017 23:22
i will add !important to things to override everything else
for instance, i put in color: blue and nothing happens
then i put color: blue !important and it changes to blue
i know something else is taking precedence
sounds like the right word there
dont forget you can style right in the dev tools
Kaz Baig
@kbaig
Oct 23 2017 23:24
@victorja you need to add jquery UI
Victor Abeledo
@victorja
Oct 23 2017 23:26
@kbaig So should I replace
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
for your link??
Kaz Baig
@kbaig
Oct 23 2017 23:26
@victorja well you need both
Lee
@LeeConnelly12
Oct 23 2017 23:28
How do i access the string passed into this string.prototype function?
String.prototype.toJadenCase = function () {
  return this.split` `.map(x => x[0].toUpperCase())
};

str.toJadenCase(), "How Can Mirrors Be Real If Our Eyes Aren't Real";
Victor Abeledo
@victorja
Oct 23 2017 23:28
@kbaig ok I'll add it to the header
Sorin Ruse
@sorinr
Oct 23 2017 23:30
@mbpiner i would sepparate the functions like: 1. geolocation that will pass the lat and long to your "getweather" function. 2. function reading the input that also pass the value inserted to the function responsible for weather getting the weather, 3. onclick function that read the input and pass it to the "getweather" function
Victor Abeledo
@victorja
Oct 23 2017 23:30
@kbaig now it works, thanks!
CamperBot
@camperbot
Oct 23 2017 23:30
victorja sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @kbaig |http://www.freecodecamp.com/kbaig
Kaz Baig
@kbaig
Oct 23 2017 23:33
@victorja np
Victor Abeledo
@victorja
Oct 23 2017 23:33
What is the difference between the 2 links? I mean jqery and jquery ui
I am just beginning to use them (and js in general) in my projects
Moisés Man
@moigithub
Oct 23 2017 23:36
ui are custom components, accordion datepicker slider... etc
https://jqueryui.com/
Kaz Baig
@kbaig
Oct 23 2017 23:36
jquery ui has additional functionality, such as the fadein function
Victor Abeledo
@victorja
Oct 23 2017 23:37
great!
Richard Monastra
@rmonastra
Oct 23 2017 23:51
Do you need React Router to use hyperlinks in a react app?
Sorin Ruse
@sorinr
Oct 23 2017 23:59
@rmonastra i would say no. u can use reacts just as a part of your web app. where u want it. u r free to manage all the other parts by yourself