anyone on?
@JMorris2000 hi
yo guys, anyone still sundaying /:
im having some f*cking nightmares with a jumbotron
share your pen link and we'll try to help
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 ?
and it doesnt work
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')
yea it is on my local folder
i think the img path is ok, since the css file is on a css folder
so, your image doesn't show up?
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
just a sec
ty mate
@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?
thats my folder
should i link it back by "../img/1.jpg"?
since the css file is in a css folder?
it should be "img/1.jpg"
@diegoignacious it should be just
/img/1.jpg
yep as @mstellaluna said
na, the mother of jumbotrons want to f*ck me tonight
it doesn't show the image :(
i've updated my folder
halp pls
anyone ?
Hi, who knows how to do this "Build a Tribute Page"? I am confused, please know if you know, very grateful!
please :worried:
@diegoignacious What exactly is the problem?
I see all images, but there are 5 missing js files.
Open devtools, network panel
I see all images, but there are 5 missing js files.
Open devtools, network panel
@korzo wow, didn't saw that comming, so you say i dont have js linked ?
or are they missing on the folder?
@diegoignacious you want your jumbotron inside the div.bg?
yea, cause in the snippet, the css structure comes with a bg and a jumbotron settings
so, it says .bg the .jumbotron
@diegoignacious I think js folder is not inside debug folder
and i should call <div class"jumbotron"> inside of a <div class"bg">
@diegoignacious
It expects js folder to be inside debug folder, as path is relative
<script type="text/javascript" src="js/move-top.js"></script>It expects js folder to be inside debug folder, as path is relative
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
then why do you close the
<div class="bg"></div> before opening the jumbotron?
i mean in html
@diegoignacious I can't find class jumbotron in your source.
there is only only one comented out
there is only only one comented out
in the html structure you have now, the div.bg as an empty div
@korzo its after section#about and after some commented html
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
Anyone with some Progressive web app experience here?
@diegoignacious so, in your case
var jumboHeight = $('.jumbotron').outerHeight(); should be var jumboHeight = $('.jumbotron-fluid').outerHeight();
@sorinr :point_up: October 23, 2017 4:25 AM
Also there are 2 extra
</div> tags. Line 115 and 117
@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
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?
hi has anyone got any pleasent experience on using react and debugging things?
@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
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
@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
i uninstalled it for Firefox
it never worked as you said
try chrome then
chrome by default does great
react devtools are available for chrome as well
i'm uninstalling ST3 for great good :)
because i have notepad++ to hilight things for me :)
@linkin-park oh my :D try vscode!
can someone give me a hand over why my @media doesnt work without <meta name="viewport" content="width=device-width, initial-scale=1.0">
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
@linkin-park i could usually find it anyway :D
@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
@ashwins93 i think you refer to the in create-react-app integrated redbox
it shows on the browser window itself, not on the console
@alpox the npm package
Yea
yep
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
similarly it gave me a file called variant.js 28 line no
@ashwins93 seems like that's the reason but @media doesn't have as prerequisite having a viewport meta tag
JVM? What setup do you have?
that is an example @alpox
@Athanasopoulos1 you do check for
max-width or min-width in media queries right?
@linkin-park ah xD
@ashwins93 of course..
after using eslint i can see the error
@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
if didnt play well i wont use react at all
Ye i would also go with create-react-app if i hqve to go react again
@Athanasopoulos1 since you've intrigued me i'm looking at the w3.org specification for html
@linkin-park also always check the jsx compiler output
@linkin-park they have some caveats on the reactjs site itself i think you skipped that
lol
@ashwins93 if you have something else to do dont bother spending your timefor this :) (btw if i find a solution i will post it)
@Athanasopoulos1 sure :+1:
just got rejected on my third job interview :worried:
¨(
:(
https://gist.github.com/linkin-park/57bbced931cb37f47554f69c4f7e9a08
this was the error
this was the error
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 :(
f! what if there is many files ill never be able to solve the issue :(
@Athanasopoulos1
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
found it, scroll down below to see the viewport item
@longnt80 dont give up mate :) it sometimes takes a while
@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
@linkin-park it says you forgot to export some element
i know that
but were you able to get the filename
i did source-map
@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
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
longnt80 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1379 | @alpox |http://www.freecodecamp.com/alpox
@Athanasopoulos1 media queries depend on the device width, i think on the mobile phones, the width is set according to landscape mode
@linkin-park is it possible that you are running in production mode? :D
by using meta we can make it work with portrait mode
width=device-widthDefines the pixel width of the viewport, or allows the viewport to adapt to the device's screen width.
@longnt80 yea thats not nice :( but keep your head up! That was only one then :) it often takes many to find the right place
i think the default width parameter takes the width from the length of a mobile screen
@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
by setting the meta tag we are asking the browser to determine width based on orientation
@Athanasopoulos1 you should have said that first
lol
what are the plugins i need to install in vscode
can someone give it thanks
can someone give it thanks
@Athanasopoulos1 you are not allowed to add meta tags?
hahaha :D @ashwins93 indeed i should !
@ashwins93 i can ONLY add media
and thats what troubles me
@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
i think i will ask him straight away cause he might have done a mistake
i always use meta viewport...
@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
@Athanasopoulos1 Alright
@alpox yeah, I'll keep looking
it's been making me depressed that I couldn't do much coding today
it's been making me depressed that I couldn't do much coding today
@longnt80 i couldnt do much coding for months :(
@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
@ashwins93 thanks anyway
athanasopoulos1 sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @ashwins93 |http://www.freecodecamp.com/ashwins93
@Athanasopoulos1 Lol do let me know how it goes
thanks @longnt80 @alpox
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
downloaded the things
need to reload the window :X
@ashwins93 i will keep you posted :P
@linkin-park btw, use create-react-app if you're just starting with reactjs
will save you lots of time
will save you lots of time
@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
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.
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 :'(
@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
weird world!
@linkin-park perhaps if you used create-react-app it wouldn't be so weird :P
it abstract away pain but did you see the problem?
but this is weird
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
Don't you mean devDependencies
well devdependencies in metadata of the folder like .git has
@linkin-park Its usual to install such things globally
;o
okay in vscode
it shows no of item installed 8
it shows no of item installed 8
but only 2 are visible
beautify and babel
@linkin-park You can scroll and make the part bigger
yea i got it :P
i need to change the theme :P
which theme is better :?
@linkin-park try oceanic-next
@linkin-park I'm using One Monokai 80s Theme
@linkin-park i'm using one dark pro :smile:
Anyone here know good source to learn redux?
A cool additional thing: https://github.com/tonsky/FiraCode
@padunk :wave:
Redux website itself :D
@alpox :wave:
ah yes off course, let me try
@padunk I see the creator of redux made also a series of videos:
https://egghead.io/courses/getting-started-with-redux
https://egghead.io/courses/getting-started-with-redux
@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...
anyway i think i have to watch it again and again...
padunk sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1381 | @alpox |http://www.freecodecamp.com/alpox
@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
@alpox
It is tiny (2kB, including dependencies).
how does that work!
instead of learning many things that does same thing is it possible to move to elm-lang?
@ashwins93 Thats because its only very few lines :D
@alpox yeah its impressive
I saw his demo video
he is a cool guy
@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
thats what makes functional as functional :)
@linkin-park Sure, thats why i say it has its right
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 :)
@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
i dont want to have runtime error in production
@linkin-park Well, then, elm would probably be right for you
in development i dont care :P
@linkin-park Elm is also known for the best error messages
i see
Still, i would make more advertisment for clojure :D
never know FP made error -> message -> simple
Clojure(Script) has awesome tooling and awesome libraries
:) it has its root of JVM
Only on serverside
And not necessarily there either
i found coffeescript is very nice
Uhm. Nope
i liked it :)
@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
@padunk maybe you should try these videos: https://www.youtube.com/watch?v=qrsle5quS7A&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_
@padunk also follow this tutorial: https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react
both of these helped me to understand Redux and applied it in a test project from a company I applied for within 3 days
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 :)
since if i say i like X he might not like it :)
I'd assume that they already googled it
@longnt80 thank you. Redux is too abstract for my brain :smile:
padunk sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 607 | @longnt80 |http://www.freecodecamp.com/longnt80
@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)
i need to learn react in 3 days :)
i'm done :(
i'm done :(
@linkin-park For elm there is usually not many resources
@linkin-park 3 days?
@linkin-park easy peasy
php
morning campers
morning @rscales02
need help with this
@relentless-coder You might need to supply the files option. It might not recognize those as javascript.
Maybe use
Maybe use
myscript_1508761436559.js the query string version may confuse.
centering the image on this pen? https://codepen.io/bestintown23/pen/VMRgqY
@bestintown23
.img {
display: flex;
justify-content: center;
}
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?
@Feldbot
x++ does not mean x + 1. It means x = x + 1. Therefore, y = x++ is the same as y = x = x + 1
@kbaig So x is actually reassigned after y is evaluated?
@Feldbot Work from right to left.
x is assigned x + 1. Then y is assigned the new value of x
@kbaig But in the console y remains 5, and x becomes 6?
@Feldbot Oh, you're right. That's funky but I suppose yeah that's it
@Feldbot to be more clear
var y = x++ is equivalent tovar y = x;
x = x + 1;
because post increment operator is used
@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.
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.
used*
if preincrement operator was used
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
https://codepen.io/Gh05d/pen/boyero?editors=0110
then
var y = ++x would be equivalent tox = x + 1;
var y = x
huh I've never seen
++x before. Probs one of those things I'd rather avoid for readability anyways
@kbaig It is different from
x++
look up preincrement and postincrement
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.
@Feldbot thats what i explained in that snippet
@ashwins93 Yep I got the gist from the names
cool
@Feldbot y is being assigned before x is incremented. If you did
y = ++x, y would be 6
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?
@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...
let x = 1;
let y = x + 1;x remains 1 here whereas y is 2
This is different from
let y = x ++, which is basically the same as writinglet 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.
@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.
@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
But that reassignment is held by y?
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
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
@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.
feldbot sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @kbaig |http://www.freecodecamp.com/kbaig
@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
@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.
feldbot sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @ashwins93 |http://www.freecodecamp.com/ashwins93
need help with my java project
@Feldbot you're welcome
@Feldbot As in I never use
++ in a line where I am assigning (=) or comparing (==/===) something
@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!
feldbot sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8603 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
@camperbot yw
@Feldbot That would be the way to think about it almost every time. As you can see, there are some exceptions
@kbaig Sorry, I didn't see the exceptions...
@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
@kbaig Oh no, there's that! Ha ha! Yes, thanks again!
feldbot sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
yw
how can i resize my email logo in my row of icons? https://codepen.io/bestintown23/pen/VMRgqY
try using max-width
looks like it might work for what you're doing @bestintown23
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
@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"
@Kennethli36 You translated it by 500px by using
position: relative and left: 500px
@Feldbot genius thank you
So you're saying make it look as it would without translation, and then just shift it to the right
@bestintown23 Glad to help! Have fun...
@kbaig ahh ok
@kbaig thanks
kennethli36 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @kbaig |http://www.freecodecamp.com/kbaig
@kbaig when u move like texts like h5 over to right is best to use position or margins? idk difference?
@Kennethli36 the difference is how it affects the other elements
@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
ahh ok alright ty @kbaig @ashwins93
kennethli36 sends brownie points to @kbaig and @ashwins93 :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 389 | @ashwins93 |http://www.freecodecamp.com/ashwins93
How can i place the text to be center underneath each image? https://codepen.io/bestintown23/pen/VMRgqY
@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.
@kbaig thanks bro
bestintown23 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @kbaig |http://www.freecodecamp.com/kbaig
how long you will take to study a framework , atleast for a beginner :P @ashwin93
why redux is required?
@korzo
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}");
}
}
well it seems alien to me :)
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
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?
@ashwins93 by the way why we need redux?
For scalable projects, performance
didnt get it :(
please explain it :)
let me share a video presentation by Dan Abramov
creator of Redux
k sure :)
this is the official site
yay!
video link ?
okay sorry the video is about React
he said he invented Redux while working on that video
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?
@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!
why cant i manage state in reactjs?
from the website
@linkin-park As a programmer you realize the importance about Immutable Objects right?
@linkin-park you can, redux just makes managing state simpler
i get some what
ya @ashwins93
Yeah Redux helps you make the state immutable
immutable makes sense in other language
but it never make sense here in js
@linkin-park Strings are immutable in JS
ya
and we can implement immutability in JS via the object model
we simply don't alter the objects
yes via trees
instead we create new objects on every change
Redux helps you to do that operation
creating new states whenever state changes
i can do that without redux right?
it doesn't alter states, the state is immutable
@linkin-park Yes you can
:/
But i don't think you can do it with this.setState()
ah! i see
but wait a min.
You can do it using setState, but you need to have the state already by passing it down to the component via props
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
and js is never multi threaded
and this makes no sense
This is why setState doesn't require for you to pass in the whole new state, just the bit you want to change
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.
@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
ofcourse not in js @alpox
@linkin-park of course there too
js is single threaded
I mean it makes sense there too
it never requires
Immutability has nothing to do with threading except that it also makes that easier
yes easier
But thats not at all the only thing why immutable data makes sense
it make sense only for that to me.
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.
i dont see that cant be done in vanilla js
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
@linkin-park you should watch the time travel video. Dan may be able to explain you better
i think
you can use that paradigm here but it really makes no sense in single threaded model
k i'm on to the video byz
@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*
hi all....can someone explain onthe factorialize challenge how 0!=1...??
immutable helps you to scale better :) the paradigm forces you to @vamshikrishna144
why is my h2 element looking kookoo? https://codepen.io/bestintown23/pen/VMRgqY
as i'm using erlang and haskell for fundo can see the way its run actor model
@linkin-park threading really really does not have much to do with immutability
@linkin-park right. Btw I miss Chester
if you realate that way it has nothing to do with it
@alpox
but it helps you scale
and maintain the state fine:)
Immutability helps to scalr, yes
Scel
Scale* damn phone :D
i miss chester too :(
@bestintown23 You have an extra
</div> right before your h2
i use it only for scaling
thats why its born :)
thats why its born :)
instead of
this i can go for fp
its just a different paradigm
@linkin-park not just instead of this
i really got hurt by
this
Yea it does hurt
But there are other things which hurt too :D
yea !
f! it
@linkin-park if you go with redux, also look into recompose sometime
but in multi threaded there is lot of side effects
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
using this paradigm removes the side effects
and this helps in scaling
so i dont see scaling part in js
@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
@flyfishingbarbara That is a mathematical rule not programmic
big codebase?
which interaction we are speaking here?
too abstract
@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
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
@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
for example const foo = []
But yes, immutability helps to reason about code so it helps with js too
foo is constant but the array can be changed
@linkin-park that doesnt make it immutabkle at all
Yea
so why they give const?
@linkin-park compiler optinizations
Optimizations*
oh!
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
@ashwins93 no. C++ const makes some instance fully constant
the pointer address can't be changed
@alpox i'm talking about pointers
@alpox pointedit
C++ is so friendly
C++. Friendly. Im out :D
In Java also if you set the array reference to be constant, you can still change the elements
C++. Friendly. Im out :D
Hahaha
:/ come on
i'm going to learn react :| will come back ;)
@linkin-park learn Redux while you're at it
did you see the video?
i didnt get redux , ill have some idea of react
bye all
hey any one experienced with sql available ?
@linkin-park :wave:
@j-cryer Yea
@linkin-park Bye
@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..
@j-cryer Hmm wait you want only 2 values?
Each from.. what? Singular value or subquery?
:-/ I want a
||= operator in javascript
@alpox sounds like a nice idea
@alpox what would you need that for?
@alpox
||=, ||== etc
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?
@jsd540 You would want to add a cdn as a resource
@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
@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
@kbaig Thanks!!
jsd540 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @kbaig |http://www.freecodecamp.com/kbaig
In any case, we don't need it as much now that we have default values in es6
@kbaig There are still cases where it can be handy, but it would just be a little sugar anyway :D
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
@KacperPL0 Where did you try to put
position: fixed? I don't see any in your pen
sorry about lat time @alpox was comparing threading instead of concurrency
my bad working with java made my life hell.
my bad working with java made my life hell.
@alpox oh, i deleted it. i put it in header{}
@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
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.
@alpox i have exactly like this and hover doesnt work for me :(
@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
thank you very much!!!!
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"
@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.
@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
@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
@alpox well, I'm messing up . So ,if I use the click event on the button with the code you gave, it isnt working.
@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
@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
@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.
@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
@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:
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
I don't know why it won't respond
@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
@alpox ahhh thank you very much for that. it says not working so at the very least it connects to jquery.
niloy513 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1384 | @alpox |http://www.freecodecamp.com/alpox
@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
https://wind-bow.glitch.me/twitch-apichannels/freecodecamp?callback=?
is this how the example should have been writting in your example you stated
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
niloy513 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
@Niloy513 np :-)
actually wait one last question sorry, but it works for streams but now channel any idea as to why?
@Niloy513 What do you mean?
If you use
When you want channel information you need
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.
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
@Niloy513 It works fine with channel too
ohhhh whoops I misunderstood
Thats the data you get
Ok I understand what you mean now apologies for the noobish questions
Never mind asking questions to clarify :D
The dark console theme is the best theme <3
Hello guys
howdy
Where do I get js jobs after completing this ffc course
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
yeah it's a no
@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.
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.
@mbpiner can u share the pen link?
Sure. Its very disorganized though, just trying to get the code to work before optimizing it.
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
@mbpiner https://gyazo.com/549dacc806b939e77cd3c9cb547d72a4 I think I got it just fine
i've been at this for a week. how do you solve css problems? i don't get it
@kbaig so you think its a problem with codePen?
@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){.....?
@mbpiner No I'm just pointing out that it seems to be working fine for me, assuming I'm not misunderstanding the issue
@sorinr I realize now that is superflous, but that $.getJSON works for now.
I'm talking about $.getJSON(newUrl, function(jsonData)
I'm talking about $.getJSON(newUrl, function(jsonData)
@dancancro practice
https://css-tricks.com/ has some good stuff
@kbaig Thats weird. Will it display dataTwo["geometry"].location.lat?
@mbpiner It's in the console in the screenshot I linked you
@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?
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;}
@victorja is hidden an id? if so, your css needs to reference
#hidden
@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
@moT01 correct
you want help on how to go about finding problems?
@kbaig yes I typed #hidden, gitter formatted it wrong
or you want help with your specific problem
@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
@mbpiner move the
$("#submit").click(function() {
var a = $("#address").val(); outside of the function doWeather() function and should work
are you using bootstrap?
yes
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
@victorja you need to add jquery UI
@kbaig So should I replace
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
for your link??
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
for your link??
@victorja well you need both
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";
@kbaig ok I'll add it to the header
@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
@kbaig now it works, thanks!
victorja sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @kbaig |http://www.freecodecamp.com/kbaig
@victorja np
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
ui are custom components, accordion datepicker slider... etc
https://jqueryui.com/
https://jqueryui.com/
jquery ui has additional functionality, such as the fadein function
great!
Do you need React Router to use hyperlinks in a react app?
@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