Is anyone here very familiar with javascript?
@janepohorecka yes, lots of us are familiar with javascript :) what's your question?
There's also: https://gitter.im/FreeCodeCamp/HelpJavaScript
@gulsvi Ah, thank you. Well, my problem is understanding javascript and how to truly use it in a timely, efficient manner. I am looking for reading/resource recommendations to properly learn the language from the bottom up.. Currently I am trying to manipulate SVG bezier curves so that I get a wavy animation. I have tried all day to implement this and all I am left with is a bunch of scribbles connected to my <button> tags. It's pretty frustrating to say the least. https://codepen.io/janepoho/pen/payygM
janepohorecka sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2584 | @gulsvi |http://www.freecodecamp.org/gulsvi
@janepohorecka We learn it from the ground up here - it's mostly self guided though. https://freecodecamp.org
As for your waves, this is one of those things where you might consider not using JavaScript - like here: https://codepen.io/andyfitz/pen/akAKdV
As for reading materials, you might want to check out Eloquent JavaScript or You Don't Know JS
@gulsvi yes, I have looked into trying to do it with css, but I want to challenge myself trying to do it with javascript
- the waves themselves will be far more irregular than this
Unfortunately, I'm not too familiar with SVG animation in JS @janepohorecka but maybe someone else will be able to help.
@gulsvi it's quite alright! Thank you for the reading recommendations.
janepohorecka sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Good luck!
@janepohorecka not sure what you're going for or if you're still playing with things - i made a little something - might get you on a track https://s.codepen.io/moT01/pen/OQNRbg - maybe the wrong track not sure
@moT01 he Tom, thank you for reaching out to me. That's not exactly what I am looking for. I want to make waves that pulsate up and down. Ive continued working on it and came up with: https://codepen.io/janepoho/pen/mXPEZV
janepohorecka sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 972 | @mot01 |http://www.freecodecamp.org/mot01
@moT01 But I want it to look more like this in the end:
@moT01 waves that are not completely uniform and have more gaps between them in certain areas
@moT01 first make them without moving and them somehow animate them.. I have never done this before so I don't really know all what I am doing :-P
sounds like a challenge alright
no libraries?
@moT01 I'd prefer to do it myself... unless there was a wicked easy library to use.
yea, not that i know of specifically - a quick search brings up a bunch https://css-tricks.com/lodge/svg/27-animating-svg-javascript/
but that does sound like a fun challenge - i may try and make something up - ill let you know if i come up with anything
I'm struggling with the creative / design aspect of projects. Can anyone help?
I seem to just get stuck feeling like I don't know what to make thats cool
as far as website design?
or just fun projects
@moT01 Well, regarding what we do here (web development) - but in general I guess. So, what happens is it makes the most sense ( to me ) to have some kind of front end design to go off of (step 1), then possibly to add use cases to that - eg: "image galery can be navigated using ...: , or, "there is a call to action button and it ... when you click it", and so on. That's step 2, then, last of all, code it up to make it look and perform that way.
I get stuck at step 1
Dunno if I'm good at picking good color combos and eye catching designs ( you know - the awesomess of it)
i hear ya, i suck there too
find a somewhat easy looking website and try to replicate it
find a somewhat easy looking website and try to replicate it
nothing found
nothing found
I guess there are no easy looking websites? :laughing:
ha
i didnt catch that
find a less easy one
find a less easy one
nothing found
nothing found
damn
That makes sense. Doesn't exacly leave me feeling like a hero but I guess it gets the job done.
@camperbot ^
Oh wati ...
did I just try to talk to a bot?
llol
it might help give you an eye for design
and im sure youll pick up a bunch of tricks and skills along the way
oh - this site has a slide show - i guess i gotta figure out how to do that
i did a few from here
you have to sign up and they send emails
@moT01 right on. That looks cool
here's the first one
@moT01 Thats cool man
@moT01 is it working?
That seems like a radical pace to try to do
Oh, I forgot ( until now ) --> there is this: http://www.csszengarden.com/
yea, they get kinda complex to do in a day - not sure you're supposed to replicate them - i think you're supposed to come up with your own similar site - i thought replicating would be better practice for me. If I go back to continuing those I will probly simplify the site - just do a page or two instead of the whole site
@moT01 I imagine that once a person does a few sites the pattern is relatively the same. Once the pattern is down then one can focus on the more intricate aspects / tweaking
no?
i suppose it depends on the complexity of the site
there's sort of a generic structure like those two i showed ya on a lot of sites - but they can get pretty complex and different as well
once you do something once - its something you have in your arsenal that you can use again and again
like if i wanted to make that navigation bar on the first site - i could just pretty much copy and paste
right on
^ my open source project, interested in feedback / collaborators
var $result = $div.append($img).append($('<div class="namePlus"></div>').append($p));
if (isOnline === 'online') {
$a.append($i);
$('.namePlus').append($span);
$result.append($a);
}
return $
Hello folks, I have question with this
I want to append
$span to the div namePlus
when I return it does not have
span.
var $result = $div.append($img).append($('<div class="namePlus"></div>').append($p));
if (isOnline === 'online') {
$a.append($i);
$('.namePlus').append($span);
$result.append($a);
}
return $result;
Could anyone please advise me how to put a tooltip on an image?
@Heathercoraje Always perform append operations as a last thing
$('.namePlus').append($span); will look for an element that is already in the DOM. And since you've not added it, you won't find it.
Instead, you can specify context for this search.
It should look like
$result.find('.namePlus').append($span);
I'd recommend you refactor it like
var $namePlusDiv = $('<div/>', { class: 'namePlus' });
var $result = $div.append($img);
if (isOnline === 'online') {
$a.append($i);
$namePlusDiv.append($span);
$result.append($namePlusDiv).append($a);
}
return $result;
@AlexOros
Hello guys, I have redone my tribute page, and looking for some feedback
https://alexoros.github.io/tribute-page/
Hello guys, I have redone my tribute page, and looking for some feedback
https://alexoros.github.io/tribute-page/
@AlexOros At the bottom of the page, change the colour of CARL SAGAN, the part where you hover and it pops up. Also, change the colour of your footer, doesn't go too well with the colour of the page, try to make it a less darker shade.
https://www.w3schools.com/colors/colors_shades.asp
https://www.w3schools.com/colors/colors_shades.asp
Also, I would say put the headings of the timeline in a different font to the actual text, but that's up to you @AlexOros
Thanks
You're welcome :) @AlexOros
@AlexOros One thing that is pretty common is making your text blocks too wide. When you make the text span the whole width of your page it makes it harder to read
Hey guys, Im having trouble updating my Vue JS component to show and hide -- it works with initial data but when you dynamically add a new element to the DOM, the click even fires but the show/hide doesn't work
could anyone help?
@JackEdwardLyons I don't have any vue experience, but I could take a look
Why cant I style my table like this, https://codepen.io/enigmacipher/pen/rJemQj using the div tag instead of using html selectors for table, tr, th. This is what I got when I used div class instead of selectors. https://codepen.io/enigmacipher/pen/RQaVJB
Using selectors wont work when I style multiple tables, adding classes to each element is time consuming. Would be nice to use a container
@enigmacipher you want to put a line between them
@enigmacipher https://css-tricks.com/complete-guide-table-element/
Hey all! :)
:wave:
HI Can Someone help me with a bit of yaml code
Yamk code here at FCC?
hello i am doing basic css but it seems I have a problem with
float left and inline-block. I was just wondering should I learn flexbox to make this layout good?? https://codepen.io/jcunanan05/pen/gWmraE
@jcunanan05 flex is very useful - i would recommend to learn it either way
https://www.youtube.com/watch?v=G7EIAgfkhmg
thanks @moT01 !! ok i should start learning it right now. Any advice for me how should i tackle the overlapping box in my codepen??
jcunanan05 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 973 | @mot01 |http://www.freecodecamp.org/mot01
ohhh i saw the guide. it may be the fastest solution
im not a fan of floats and dont use them much - perhaps cause i dont understand them completely and struggled the few times i used them
what are you going for
just putting the overlapping box in the container. haha maybe i should use flex then so the content would be inside the parent div
because float makes the content be on top of the parent that's why it overlaps i think
maybe i should remove that float and learn about flex containers haha
@jcunanan05 Why do you have
float: left on both child divs?
thanks @ezioda004 i should change it then
jcunanan05 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 430 | @ezioda004 |http://www.freecodecamp.org/ezioda004
@jcunanan05 I mean if you remove them it wont overflow, whats your intention exactly?
Hi guys! Can someone suggest me good resources on how to connect a React front-end to a back-end? How to package/distribute all the files? How to connect with the APIs? Which APIs are required? How using APIs in React is different than in JQuery? How to get real-time updates from the back-end?
Thanks!
Thanks!
@aguyinmontreal are you totally new to js
hi everyone, who can prompt how to align text to the middle with bootstrap. I can't cope in any way... https://codepen.io/etcIgor/pen/eVZRyy?editors=1000
@aguyinmontreal create-react-app is designed to create a distributable package for React.
The APIs would depend on the application.
You can use JQuery to make your API calls in React, just have to put the requests in specific life cycle methods (you can also use browser fetch API)
Real time updates would generally be done with web sockets and that is not React specific
The APIs would depend on the application.
You can use JQuery to make your API calls in React, just have to put the requests in specific life cycle methods (you can also use browser fetch API)
Real time updates would generally be done with web sockets and that is not React specific
@etcIgor which text are you trying to center?
that is under the image...
@kartikv20 no, I'm good with Express/NodeJs/Jquery / however React is new to me
for API, jQuery is outdated
use fetch
it has a relatively simple format
@kartikv20 whoaaa????
since when XMLHttpRequest become
outdated?
@sjames1958gm thanks, I heard that when using React, we had to avoid mix it with Jquery at all cost, what's your stand on that? What else do you suggest for APIs?
aguyinmontreal sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8935 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@etcIgor Since that
p has col-md-8 col-md-offset-2 tryp {
text-align: right;
}
@aguyinmontreal axios is good too
@aguyinmontreal I don't agree with avoid at all cost type statements. You use the tools that are appropriate.
I would look to solving the problem with native tools such as fetch API before going to use jquery.
Certainly a lot of jquery is HTML formatting which would not be useful when you are using React for that.
I would look to solving the problem with native tools such as fetch API before going to use jquery.
Certainly a lot of jquery is HTML formatting which would not be useful when you are using React for that.
but in the original version css is not used at all (
@SweetCodingInc well not outdated, but more people are shifting to fetch
@etcIgor Ok without CSS then add
class = "text-right" on that p
didn't help, will experiment further, thanks
Sure, its a bootstrap class and works fine when I tested on your pen.
@sjames1958gm so for example, on Gitlab, when people are adding comments on an open "issue", and I see the new comments appearing live on my screen, that's necessarily websockets? It cannot be done with API requests?
@aguyinmontreal you can use API calls for it, but then you need to poll the server manually every x amount of time
@aguyinmontreal Well you can periodically request updates, but that can put an extra load on the server depending on the number of clients
@forkerino @sjames1958gm alright! so web sockets is 100% the way to go? any other technology that can be used for that?
@aguyinmontreal I'd use the socket, I don't know of any good alternative (the API calls can work for moderate amount of users, for example an app that is only available for a limited number of users, but it doesn't scale well)
@aguyinmontreal Of course the backend will have to support web sockets, if not then polling will have to be used
@aguyinmontreal
STOMP is a well standardized technology. You could combine that with either socket api or SSE (server sent events)
@sjames1958gm what exactly do you mean by "polling", could you please provide me with a link? thanks
aguyinmontreal sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
@SweetCodingInc do you have a link for some suggestions on how to integrate
STOMP ?
the server?
@aguyinmontreal what's your backend?
node/java/.net
@SweetCodingInc NodeJS/Express
@aguyinmontreal polling just means to perriodically request information from the backend
@sjames1958gm alright! :)
@SweetCodingInc and on the React side?
I've used stompit extensively
React is client.. and for that you'll use stomp js
there is react-stomp
stomp.js is not for backend? https://stomp-js.github.io/stomp-websocket/codo/extra/docs-src/Usage.md.html
@aguyinmontreal check https://socket.io/
very easy to incorporate in a Node backend
@aguyinmontreal that's why i shared webstomp and stompit..
they're for backend
@forkerino checkout ExpressIO A neat and clean wrapper around express + socket.io
@SweetCodingInc :smile:
@forkerino socket.io is based on web sockets, or something else?
@aguyinmontreal websockets
@aguyinmontreal yeah, it just helps you feed stuff into a socket from the backend
@SweetCodingInc I meant I tought stomp.js was only for backend
stomp is also based on websockets but it has cleaner API. Without certain protocol, people tend to go apeshit with implementation
@aguyinmontreal oh.. no.. It's not that way.. Any socket app is gonna have client and server components
Alright! thanks all! @SweetCodingInc @forkerino @sjames1958gm @kartikv20 @jcunanan05
aguyinmontreal sends brownie points to @sweetcodinginc and @forkerino and @sjames1958gm and @kartikv20 and @jcunanan05 :sparkles: :thumbsup: :sparkles:
:cookie: 235 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:cookie: 270 | @jcunanan05 |http://www.freecodecamp.org/jcunanan05
api offline
:cookie: 200 | @kartikv20 |http://www.freecodecamp.org/kartikv20
:star2: 2981 | @forkerino |http://www.freecodecamp.org/forkerino
@jcunanan05 what is "axios" for?
@aguyinmontreal :+1:
@aguyinmontreal :+1:
axios is a library for doing API requests
a library to make ajax requests
fetch() is good enough, nowadays, in my opinion
so, axios is not a replacement to web socket
it's not even remotely related to websockets
handling text input in react is needlessly complicated, i hate it
wait what?
I find it quite easy
and interesting
the things you can handle after having a event handler as onchange to make tons of stuff
@tiagocorreiaalmeida unless you want to trigger an api call on input change...
yeah that what I was trying to say sorry :\
I want to set the value of the textarea at the bottom to what i type into the textarea above, how would I do this?
class Content extends Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
render() {
return (
<section className='content'>
<Container>
<Row>
<Col xs="12" sm="6">
<textarea
placeholder='Enter your code here'
className='form-control'
onChange={(value) => this.setState({ value })}>
</textarea>
</Col>
<Col xs="12" sm="6">
<textarea className='form-control'>
// How would I update this value every time I type something into the above textarea?
{this.state.input}
</textarea>
</Col>
</Row>
</Container>
</section >
);
}
};
@LeeConnelly12 You set value in state but you use input in the bottom text area. Try
{this.state.value}
@sjames1958gm I fixed it by setting the value attribute of textarea to this.state.value, thanks
leeconnelly12 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8936 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@LeeConnelly12 :100:
hey everyone
@Allaboutthatcode hey
anyone here?
hey hey hey
go ahead and ask your question
hi
I am having an issue with HTML, I can
t seem to change the size of the image just right.
using a css class decleration.
do you have a pen for it? @Allaboutthatcode
pen?
on code pen
do you have an account on https://codepen.io/
@Allaboutthatcode
no
best to make one, very useful :) @Allaboutthatcode
In the meantime you can post the code which you're having an issue with over here! @Allaboutthatcode
awesome. I saw you had an option to pay, not sure if it's useful to just have a free account.
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {color: red;}
.smaller-image{width:100px}
h2 {font-family: Lobster, Monospace;}
p {font-size: 16px;
font-family: Monospace;}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img src class="smaller-image" "https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
I'm having an issue with resizing the width of the image.
This is what I did so far.
I think you miss the ";" after 100px
@Allaboutthatcode very useful to have a free one if you're learning to code
okay, let me try that.
no dice :-/
<img src class="smaller-image" "https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "> Here is the error
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
does ur image display at all? @Allaboutthatcode
OOOOOOOOOOOOOOOOOOOOOOOOO
let me try that.
omg
that makes so much sense.
because "class" is one thing, in which you are telling it what do do, while src is the "source" and yeah.
Done?
one sec
sorry, @alexisss1928 beat me to it :D
:smile:
sorry I took so long
I was trying to type it out instead of copying and pasting so I learn what I am doing wrong.
no, that's cool bro @Allaboutthatcode
I am new to coding and I'm trying to teach myself as best as I can. I applied to my local college to pursue a four year degree in information technology and science.
Are you a full time web dev @MuhammedKarim ?
nope, I'm probably less of a programmer than you :D @Allaboutthatcode
but there are a lot of experienced people on here as well, who are always willing to help! @Allaboutthatcode
ooooooo
Do you freelance or work for a company? @MuhammedKarim
just like you, self-studying :) @Allaboutthatcode
ahhh, okay. That's cool. What courses have you taken? @MuhammedKarim
w3schhols, HTML, CSS and JS only so far. wbu? @Allaboutthatcode