These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Dec 2017
Zerka1982
@Zerka1982
Dec 22 2017 00:24
@SakisBal your question is still unclear ...
VaseJS
@VaseJS
Dec 22 2017 01:26
@SakisBal I understand...I think. This is an API questions. The point of that exercise is to understand APIs and the answer to your question depends on which service you are using. Make sure you read and understand the parts of the API you're using and you should have an answer. When its a clear day, the API will have a "clear" icon that you can use. So you need to fetch this with your http request also and display it dynamically with each call to the API service you are using
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:43
so an API is like what one programmer wrote to allow other programmers to work with the same stuff
Wait so isn't an IDE just a big API sort of...
VaseJS
@VaseJS
Dec 22 2017 01:44
@TheRedstoneTaco Yes to the first, no (mostly) to the second part of your statment
an IDE is an editor specifically built with features for devs to use
that help them write code better and faster
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:45
I would argue but thanks
VaseJS
@VaseJS
Dec 22 2017 01:45
how, when I'm agreeing with you?
...its the internet
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:46
I have a question
VaseJS
@VaseJS
Dec 22 2017 01:46
we (may) have answers
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:46
What can I do to make my own website templates
Where I have some file template on my little server
VaseJS
@VaseJS
Dec 22 2017 01:46
make a website and reuse the code
html template API
javascript template API in es6
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:47
And I can serve people homepages, info pages, and other pages where there are all the same buttons at the top because they're all based on a template
VaseJS
@VaseJS
Dec 22 2017 01:47
yep
just start building
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:47
Javascript? Wouldn't I have to access the file within the server? I didn't know javascript could do file stuff
The answers I found involved php
VaseJS
@VaseJS
Dec 22 2017 01:47
this is what all these frameworks are doing on some level
no
js is front and backend
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:48
oh
VaseJS
@VaseJS
Dec 22 2017 01:48
its all in how you use your code
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:48
so I can use javascript to access and MVC boilerplate from one file to another given it's all hosted on the same server?
sorry not MVC
First time using that big word
VaseJS
@VaseJS
Dec 22 2017 01:49
your question is not clear, but I can say yes either way because JS can do just about anything with NodeJS now
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:50
do I have to install stuff on my server to write nodeJS
VaseJS
@VaseJS
Dec 22 2017 01:50
nodejs is the server
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 01:50
alright you shook me
I'm confused, but that's a good thing
VaseJS
@VaseJS
Dec 22 2017 01:50
do you know what Node is?
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 02:12
Nope
  • el nopo
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 02:52
so what is nodeJS
it allows one to run javascript outside of the browser. so anywhere were one can use C++ (as that's what its built with)
it can run on the backend as a server. in a raspberry pi, desktop, etc
people have use js to fly drones, make robots, etc
all with js
node has free js from the browser
NGraegin
@NGraegin
Dec 22 2017 03:17
Anyone here know how i can contact the developer of freeCodeCamp
Ken Haduch
@khaduch
Dec 22 2017 04:36
@NGraegin - you can file bug reports if there are specific issues that you are finding, or visit the Contributors chat room and make an inquiry there. https://gitter.im/FreeCodeCamp/Contributors - that's the link.
kerafyrm02
@kerafyrm02
Dec 22 2017 06:17
Anyone stuck & needs help?
Richard
@rylew0925
Dec 22 2017 06:39
Would someone please tell me why I can't output this code?
function myFunction() {
  var person = {fname: "John", lname: "Doe", age: 25};
  var text = "";
  var x;
  for (x in person) {
    text = text + person[x] + " ";
  }
}
console.log(text);
Markus Kiili
@Masd925
Dec 22 2017 06:40
@rylew0925 JS has function scope, so you can use text variable only inside that function.
Richard
@rylew0925
Dec 22 2017 06:41
You meant the console.log has to move inside the brackets?
Markus Kiili
@Masd925
Dec 22 2017 06:41
function myFunction() {
  var person = {fname: "John", lname: "Doe", age: 25};
  var text = "";
  var x;
  for (x in person) {
    text = text + person[x] + " ";
  }
  return text;
}
console.log(myFunction()); // 'John Doe 25'
or put the console log inside the function and call the function.
Richard
@rylew0925
Dec 22 2017 06:43
@Masd925 Thanks!
CamperBot
@camperbot
Dec 22 2017 06:43
rylew0925 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4621 | @masd925 |http://www.freecodecamp.org/masd925
Richard
@rylew0925
Dec 22 2017 06:46
what exactly does the "for in" loop do?
Markus Kiili
@Masd925
Dec 22 2017 06:48
@rylew0925 Loops over the enumerable (~not built-in) property keys of the object and the prototype chain.
The iteration order is not guaranteed to be the insertion order, so not a good idea to use on arrays or strings if the order matters.
Richard
@rylew0925
Dec 22 2017 06:50
So it loops over "John," "Doe," and "25" before outputting them in random order?
Markus Kiili
@Masd925
Dec 22 2017 06:51
@rylew0925 It loops over the property keys "fname" etc. Browsers seem to be iterating the for...in loop property keys in order, but the language standard doesn't guarantee it, so you should not rely on it. Better to use simple for loop or array iterators.
Something that is not guaranteed might also change in the future browser versions.
Richard
@rylew0925
Dec 22 2017 06:52
So I only use "for-in" loops if order does matter?
Markus Kiili
@Masd925
Dec 22 2017 06:52
Yes.
It also looks up the prototype chain for enumerable properties.
Richard
@rylew0925
Dec 22 2017 06:54
Speaking of prototype, what is the purpose of prototype in this code?
String.prototype.replaceAt = function(index, character) {
    return this.substr(0, index) + character + this.substr(index+character.length);
};


function titleCase(str) {
    var newTitle = str.split(' ');
    var updatedTitle = [];
    for (var st in newTitle) {
        updatedTitle[st] = newTitle[st].toLowerCase().replaceAt(0, newTitle[st].charAt(0).toUpperCase());
    }
    return updatedTitle.join(' ');
}
And why is there a "String" in the beginning?
Markus Kiili
@Masd925
Dec 22 2017 06:56
@rylew0925 String.prototype is the object that is the prototype of all the strings. It has all the string methods. This code adds a new method to that prototype.
So all strings can use those methods via the prototype reference.
Lower that new method is used.
Richard
@rylew0925
Dec 22 2017 06:58
So it's allowing the strings access to a specific method?
Markus Kiili
@Masd925
Dec 22 2017 06:59
@rylew0925 Yes, that adds a new method to string methods.
Richard
@rylew0925
Dec 22 2017 07:00
So the methods would be "return this.substr(0, index) + character + this.substr(index+character.length);"?
Markus Kiili
@Masd925
Dec 22 2017 07:03
There is a function that is assigned to a property of an object. In such situation the function is called a method.
Richard
@rylew0925
Dec 22 2017 07:04
So that would be where it starts with "function titleCase(str)"?
Markus Kiili
@Masd925
Dec 22 2017 07:05
@rylew0925 This is the function that is assigned as a method:
function(index, character) {
    return this.substr(0, index) + character + this.substr(index+character.length);
};
That is a function expression that generates a function (object).
Richard
@rylew0925
Dec 22 2017 07:07
Ah, now I see
What exactly would be the prototype? MDN was not very clear to me
Markus Kiili
@Masd925
Dec 22 2017 07:10
@rylew0925 In JS, every object has a prototype reference (can be null). That way objects can use properties of the prototype chain. Objects can be created using a constructor. Strings are generated using the constructor String. Constructors have a .prototype property that holds an object (a plain object {} by default) that is put as prototype of all new objects created with syntax new Constr();
So String.prototype is set as prototype of all new strings.
But String.prototype is a built-in prototype object with all the string methods for example.
Filip Havrlent
@fhavrlent
Dec 22 2017 07:15
Hello, could please somebody help with react-redux app -> https://github.com/fhavrlent/tomato-timer ? The issue is that while the actions are called on pc, it is not working on mobile devices (at least not on iPhone). The onClick is called normally, but the startCountDown() part is not working :worried:
Richard
@rylew0925
Dec 22 2017 07:16
Oh, so basically it's inheriting the traits from the prototype property?
Markus Kiili
@Masd925
Dec 22 2017 07:20
@rylew0925 Yes. In JS those properties are used via the prototype reference.
So all objects don't have a copy.
If you defined a method inside a constructor function, all new objects have a copy of the method. If you put a method on the protoype, there is only one method that all the new objects can use.
Joseph A. Sangine
@HTML-joe
Dec 22 2017 07:23
So i am making a random quote machine and already have most of what i need created. My question is are there any resources available to help me find quotes already matched with their perspective authors? I would need to do a lot of typing to get this one to work as is
I have it set up as an array with js and jquery
here is the link
https://codepen.io/JoeSanJr/pen/gowWmb?editors=1100
Joseph A. Sangine
@HTML-joe
Dec 22 2017 07:32
@fhavrlent thank you
CamperBot
@camperbot
Dec 22 2017 07:32
html-joe sends brownie points to @fhavrlent :sparkles: :thumbsup: :sparkles:
:cookie: 42 | @fhavrlent |http://www.freecodecamp.org/fhavrlent
Joseph A. Sangine
@HTML-joe
Dec 22 2017 07:33
I dont think that will do it though i think i will need an array format or a lot of copy and pasting
Markus Kiili
@Masd925
Dec 22 2017 07:35
@HTML-joe It is in very simple array format.
Joseph A. Sangine
@HTML-joe
Dec 22 2017 07:36
sorry let me re word this i am very new
i have it set so that there are two separate arrays being targeted. quote and author. I need 2 lists but both need to match up or i need to restructure the javascript but im not sure how
Richard
@rylew0925
Dec 22 2017 07:38
@Masd925 Thank you so much!
CamperBot
@camperbot
Dec 22 2017 07:38
rylew0925 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Filip Havrlent
@fhavrlent
Dec 22 2017 07:41
@HTML-joe That does not sound very nice. You might rather change the code, which is not hard actually. Have some randomNumber and quotesArray. Then do quotesArray[randomNumber].quoteAuthor and quotesArray[randomNumber].quoteText
Markus Kiili
@Masd925
Dec 22 2017 07:43
@HTML-joe That could be done with some simple array manipulation, but the @fhavrlent way is better.
Sorin Ruse
@sorinr
Dec 22 2017 07:43
@HTML-joe don't be afraid to start learning how to use an external api for your quotes. a simple search "free random quotes api" will bring you some info on such apis. read their docs and try using the one that seems easier to use
Joseph A. Sangine
@HTML-joe
Dec 22 2017 07:54
looks like i have some learning to do
i do not know what an api is
I just love learning this so thank you all for the information
Henry
@GitHub-Henry
Dec 22 2017 08:00
@HTML-joe quote api
Joseph A. Sangine
@HTML-joe
Dec 22 2017 08:06
this makes much more sense to me now thank you @GitHub-Henry
CamperBot
@camperbot
Dec 22 2017 08:06
html-joe sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 509 | @github-henry |http://www.freecodecamp.org/github-henry
Filip Havrlent
@fhavrlent
Dec 22 2017 08:09
@HTML-joe I forked your codepen and did the changes if you want to take a look - https://codepen.io/anon/pen/VyKybQ. I just used only a 4 entries from the array I linked.
Joseph A. Sangine
@HTML-joe
Dec 22 2017 08:22
wow thank you so much cleaner
i bet it is faster too if working with much more data
Danny Chan
@chandanny
Dec 22 2017 10:20
hello
i have question about RegExp
telephoneCheck("1 555)555-5555") false
telephoneCheck("(555-555-5555") false
how to check if only have '(' or ')' ,then return false
Igor
@flipmotion
Dec 22 2017 10:25
Use ramda
propOr
Function
Danny Chan
@chandanny
Dec 22 2017 10:26
i need to complete it through JavaScript RegExp
DerMann97
@DerMann97
Dec 22 2017 10:38
[JAVA] Hello guys does anyone know how can I represent an object I created n times in another class ? Thanks !
Markus Kiili
@Masd925
Dec 22 2017 10:38
@DerMann97 Do you wan't instances of the another class to hold references to those n objects?
Sweet Coding :)
@SweetCodingInc
Dec 22 2017 10:40
@DerMann97 Assuming MyObj is the type/class of object that you created, you will do
class ObjectConsumer{
  List<MyObj> myObjList;
}
and then
MyObj myObj = new MyObj();

ObjectConsumer consumer = new ObjectConsumer();

consumer.myObjList.add(myObj);
consumer.myObjList.add(myObj);
consumer.myObjList.add(myObj);
consumer.myObjList.add(myObj);
// n times
or loop
DerMann97
@DerMann97
Dec 22 2017 10:44
well I m a new in oop in my exercise they ask me to create a class video in which every video has an ID, genre, title and then create another class "Videos collecting" which represents n times the class video so I suppose it s an array of video ? (what you showed me) @SweetCodingInc
Sweet Coding :)
@SweetCodingInc
Dec 22 2017 10:45
@DerMann97 Yes... In Java, you need to use typed List
so in your Videos Collecting class you need to use List<Video>
alpox
@alpox
Dec 22 2017 10:46
Well if its exactly n times, a normal array can also be used
Markus Kiili
@Masd925
Dec 22 2017 10:46
@SweetCodingInc You would need to initialize the myObjList with something like an arrayList?
Sweet Coding :)
@SweetCodingInc
Dec 22 2017 10:46
can be used but should not be used
DerMann97
@DerMann97
Dec 22 2017 10:46
it s written that the n size should be given in the constructor
Sweet Coding :)
@SweetCodingInc
Dec 22 2017 10:46
@Masd925 Yes... I left that part out as that's obvious for java devs
it has to be
myObjList = new ArrayList<MyObj>();
should go in constructor
alpox
@alpox
Dec 22 2017 10:47
I wonder whats against using an array that it should not be used
Sweet Coding :)
@SweetCodingInc
Dec 22 2017 10:48
@DerMann97 is n going to be provided as a constructor param?
DerMann97
@DerMann97
Dec 22 2017 10:48
yes a constructor param
Sweet Coding :)
@SweetCodingInc
Dec 22 2017 10:48
@alpox : Array is fixed size list and thus statically allocated. ArrayList (and thereby, List) is not..
alpox
@alpox
Dec 22 2017 10:49
Exactly. So he has a fixed size anyway
Sweet Coding :)
@SweetCodingInc
Dec 22 2017 10:49
well.. this seems like school assignment...
no point getting into doing things the right way
DerMann97
@DerMann97
Dec 22 2017 10:50
yes it s a school assignment :)
Sweet Coding :)
@SweetCodingInc
Dec 22 2017 10:50
@DerMann97 Go for Array and ignore what I said
DerMann97
@DerMann97
Dec 22 2017 10:51
okay then Thanks guys ! @SweetCodingInc @alpox @Masd925
CamperBot
@camperbot
Dec 22 2017 10:51
dermann97 sends brownie points to @sweetcodinginc and @alpox and @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 1507 | @alpox |http://www.freecodecamp.org/alpox
:cookie: 175 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:star2: 4622 | @masd925 |http://www.freecodecamp.org/masd925
DerMann97
@DerMann97
Dec 22 2017 10:51
thanks @Masd925
CamperBot
@camperbot
Dec 22 2017 10:51
dermann97 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Anshul Adlakha
@anshuladlakha
Dec 22 2017 10:58
how can I call a function multiple times in javascript?
Markus Kiili
@Masd925
Dec 22 2017 11:00
@anshuladlakha With a loop for example.
primuscovenant
@primuscovenant
Dec 22 2017 12:24
@heroiczero thx
CamperBot
@camperbot
Dec 22 2017 12:24
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2113 | @heroiczero |http://www.freecodecamp.org/heroiczero
DerMann97
@DerMann97
Dec 22 2017 12:24
hello guys ! video[] videoCollectionArray = new video[n]; this is my array I would like to have the first free position of this array
how can I write it
video is an object I created
Markus Kiili
@Masd925
Dec 22 2017 12:35
@DerMann97 Something like:
int index = -1;
for(int i = 0; i < array.length; i++) {
    if(array[i] != null) index = i;
}
DerMann97
@DerMann97
Dec 22 2017 12:36
null means free ?
Markus Kiili
@Masd925
Dec 22 2017 12:37
Yeah, should make it break on first index found, but you get the idea there.
DerMann97
@DerMann97
Dec 22 2017 12:37
okay thanks @Masd925 ;)
CamperBot
@camperbot
Dec 22 2017 12:37
dermann97 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4623 | @masd925 |http://www.freecodecamp.org/masd925
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:11

https://codepen.io/pramodjsam/pen/WdGNRy?editors=1011

This is Twitch API app
can someone help me how to put logo image from ajax to logo column

Hammad
@newnewb
Dec 22 2017 13:12
Guys, I wanna ask
In react how do I use the result of an ajax request to loop and create components?
@pramodjsam what is it that you're missing?
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:14
@newnewb i am not able to put logo in twitch api app
the logo is in dataI, which is in the form of dataI.logo
Hammad
@newnewb
Dec 22 2017 13:16
yes
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:17
@newnewb how to take that logo and put it under logo(column)
Hammad
@newnewb
Dec 22 2017 13:18
well, let me try to make the json request and see how the data looks
@pramodjsam I can see the request
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:20
yeah
how to bring that under logo column
Hammad
@newnewb
Dec 22 2017 13:21
@pramodjsam this the result
{
    "mature": false,
    "status": "RERUN: Leenock vs. Patience - Open Bracket - IEM Cologne - StarCraft 2",
    "broadcaster_language": "en",
    "display_name": "ESL_SC2",
    "game": "StarCraft II",
    "language": "en",
    "_id": 30220059,
    "name": "esl_sc2",
    "created_at": "2012-05-02T09:59:20Z",
    "updated_at": "2017-12-22T13:04:19Z",
    "partner": true,
    "logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg",
    "video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/232bf86e5268cf88-channel_offline_image-1920x1080.png",
    "profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_banner-f8295b33d1846e75-480.jpeg",
    "profile_banner_background_color": "#050506",
    "url": "https://www.twitch.tv/esl_sc2",
    "views": 68985937,
    "followers": 199758,
    "_links": {
        "self": "https://api.twitch.tv/kraken/channels/esl_sc2",
        "follows": "https://api.twitch.tv/kraken/channels/esl_sc2/follows",
        "commercial": "https://api.twitch.tv/kraken/channels/esl_sc2/commercial",
        "stream_key": "https://api.twitch.tv/kraken/channels/esl_sc2/stream_key",
        "chat": "https://api.twitch.tv/kraken/chat/esl_sc2",
        "features": "https://api.twitch.tv/kraken/channels/esl_sc2/features",
        "subscriptions": "https://api.twitch.tv/kraken/channels/esl_sc2/subscriptions",
        "editors": "https://api.twitch.tv/kraken/channels/esl_sc2/editors",
        "teams": "https://api.twitch.tv/kraken/channels/esl_sc2/teams",
        "videos": "https://api.twitch.tv/kraken/channels/esl_sc2/videos"
    },
    "delay": null,
    "banner": null,
    "background": null
}
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:22
yeah
Hammad
@newnewb
Dec 22 2017 13:22
same way you're using the game name, use the logo as an src for your image
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:22
by dataI.logo i can take the logo
Hammad
@newnewb
Dec 22 2017 13:22
try to create an image tag and use that logo as src for it
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:23
but i am not able to get it.............i tried it
("#logo").attr("src", dataI);
isnt
?
SakisBal
@SakisBal
Dec 22 2017 13:24

@newnewb i have a question as well, i am getting this error:

Failed to load https://en.wikipedia.org/w/api.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

Hammad
@newnewb
Dec 22 2017 13:24
but you are creating the objects as you're going forward
Hammad
@newnewb
Dec 22 2017 13:25
@pramodjsam when did you create the image tag, to try to edit it?
@SakisBal let me see
SakisBal
@SakisBal
Dec 22 2017 13:26
tnx
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:26
i tried it before and didnt worked
BuntyBru
@BuntyBru
Dec 22 2017 13:27
div is a block element right?
SakisBal
@SakisBal
Dec 22 2017 13:28
what i am trying to do is use wikipedias api
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:32
@SakisBal in mediawiki there are lot of resource for it
SakisBal
@SakisBal
Dec 22 2017 13:32
yes but i cant see this error being solved there anywheer
this is the basic html
@SakisBal your have to take the value from the search form and use it in the space of "yoursearch" in the html given above
SakisBal
@SakisBal
Dec 22 2017 13:33
thanks but the error is still there :/
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:33
@SakisBal what is the error?
wait
wrong
Failed to load https://en.wikipedia.org/w/api.php?action=opensearch&search=random&callback=?: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:35
@SakisBal there must be some syntax error
SakisBal
@SakisBal
Dec 22 2017 13:35
im posting the pen again
Hammad
@newnewb
Dec 22 2017 13:35
@SakisBal as I remember, it's mostly because you're requesting from a different site
SakisBal
@SakisBal
Dec 22 2017 13:36
yes i have searched about it a bit
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:36
@SakisBal your are requesting in html
@SakisBal it should be in javascript right?
SakisBal
@SakisBal
Dec 22 2017 13:36
it is inside a script
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:37
SakisBal
@SakisBal
Dec 22 2017 13:37
doesnt that make it javascript?
i will move it to thye javascript file and see what it doesn
what is the differnece between $.ajax and $.getJSON
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:39
@SakisBal getJSON is a more simplified version, most of the inputs are as default in getJSON for example: type, dataType, json etc
SakisBal
@SakisBal
Dec 22 2017 13:39
so we would use $.ajax if we wanted to change one of those like for example the dataType
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:40

@SakisBal i dont think your pen should be in the way it is.

there should be form/input search area to input the search right?

SakisBal
@SakisBal
Dec 22 2017 13:40
i am just testing the api
Hammad
@newnewb
Dec 22 2017 13:40
@pramodjsam he's just testing out the ajax
SakisBal
@SakisBal
Dec 22 2017 13:40
for now
its alright i fond the mistake ;)
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:40
@SakisBal you have to use ajax to change the default values
SakisBal
@SakisBal
Dec 22 2017 13:40
thanks guys
it was a syntax error indeed
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:41
@newnewb do you know how to put the logo?
Hammad
@newnewb
Dec 22 2017 13:41
@pramodjsam let me double check
Hammad
@newnewb
Dec 22 2017 13:42
@SakisBal I think the problem was you were trying to fetch a website... not utilize the api
SakisBal
@SakisBal
Dec 22 2017 13:43
yep and i used $.get insead of $.getJSON :p
Hammad
@newnewb
Dec 22 2017 13:45
@pramodjsam add this to your script
$('#logo').append('<img src="'+dataI.logo+'"/>');
and style it
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:46
@newnewb thanks bro, it worked
CamperBot
@camperbot
Dec 22 2017 13:46
pramodjsam sends brownie points to @newnewb :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @newnewb |http://www.freecodecamp.org/newnewb
Hammad
@newnewb
Dec 22 2017 13:46
@pramodjsam you're welcome
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:47
@newnewb i was trying if statement, to place another image it there wasnt any image
Hammad
@newnewb
Dec 22 2017 13:47
I think you can use if(!dataI.logo) or something like that
depend on what the response looks like if there is no image
the one that i just mentioned works if it's undefined
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:49
var logo=dataI.logo;
if(logo==null){
$("#logo").append("img src=" (another image)">");
}else{
$("#logo").append("img src="+logo+">");
}
@newnewb isnt it correct?
Hammad
@newnewb
Dec 22 2017 13:49
give me a channel without a logo if you can
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:50
yeah i am looking for a channel without image
Hammad
@newnewb
Dec 22 2017 13:50
@pramodjsam but honestly it's too much hassle, since the channels you have all include images afaik
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:50
what is the difference between prepend and append?
Hammad
@newnewb
Dec 22 2017 13:51
prepend is to add before, append is to add after
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:51
what is attr then?
Hammad
@newnewb
Dec 22 2017 13:52
@pramodjsam attr? give me context? it's mostly the attribute like src or what not
@pramodjsam but you can only use attr after you create an element, which is why it didn't work for you the first time
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:53
@newnewb while i was checking in stackoverflow to add image, they had written to use attr
Hammad
@newnewb
Dec 22 2017 13:53
that's why we're using append, append creates a new element
@pramodjsam that is right
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:54

$("#profileImage").attr('src', result.user_image);

from stackoverflow

Hammad
@newnewb
Dec 22 2017 13:56
@pramodjsam that is for changing an image, what you were doing was creating an image
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:56
oh ok

i had styled it

but the problem now is it isnt coming in a row

Hammad
@newnewb
Dec 22 2017 13:57
@pramodjsam append adds HTML to the current element which is why you can see us using
<br/>
<img src=''>
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:57
@newnewb
img{
height:50px;
width:50px;
}
@newnewb i had styled it but , now its not coming in a row
Hammad
@newnewb
Dec 22 2017 13:59
you need to work abit more on your css
and the way you're generating the rows
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 13:59

@newnewb

<div class="row">
<div class="col-md-3" id="logo">Logo : <br></div>
<div class="col-md-3" id="user">User :<br></div>
<div class="col-md-3" id="status">Status :<br></div>
<div class="col-d-3" id="game">Game :<br></div>
</div>

@newnewb
img{
height:50px;
width:50px;
border-radius:50%;
}
@newnewb isnt it right?
Hammad
@newnewb
Dec 22 2017 14:00
but my question is, shouldn't every entry be a new row?
you only created 1 row
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:01
the entire row is in one div
@newnewb but the rest of the elements (ie user, game, status) and following the row
Hammad
@newnewb
Dec 22 2017 14:02
@pramodjsam look at my primitive design
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:02
@newnewb your design is great
@newnewb its entirely different from mine and by the way you did a great job on your project
Hammad
@newnewb
Dec 22 2017 14:03
thank you @pramodjsam
CamperBot
@camperbot
Dec 22 2017 14:03
:cookie: 259 | @pramodjsam |http://www.freecodecamp.org/pramodjsam
newnewb sends brownie points to @pramodjsam :sparkles: :thumbsup: :sparkles:
Hammad
@newnewb
Dec 22 2017 14:03
I was just trying to show you that, i spaced it using rows
SakisBal
@SakisBal
Dec 22 2017 14:03
keeping it simple is the key on programming i can see
Hammad
@newnewb
Dec 22 2017 14:03
every entry is a new row
SakisBal
@SakisBal
Dec 22 2017 14:03
too many images and too many stuff in your page will make it look abd
Hammad
@newnewb
Dec 22 2017 14:04
<div class='row channel'><a href='https://www.twitch.tv/"+channelName+"' target='blank'><b class='col-md-offset-3 col-md-1'>"+channelName+"</b></a><p class='col-md-6 col-md-offset-1'>"+status+"</p></div>
SakisBal
@SakisBal
Dec 22 2017 14:04
using a lot of space is good as well
makes it light on your eyes
Hammad
@newnewb
Dec 22 2017 14:04
if you can see, I use row on every entry,
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:04
@newnewb i had found the problem
the problem was i hadnt used break in javascript
@newnewb your method is a more definite and clear ......i admit it
Hammad
@newnewb
Dec 22 2017 14:05
using break is bad practice
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:05
@newnewb then what to do to move to another line after every loop?
Hammad
@newnewb
Dec 22 2017 14:05
don't rely on </br> a lot, it causes a lot of inconsistencies
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:05
@newnewb oh
Hammad
@newnewb
Dec 22 2017 14:05
using class='row' from bootstrap
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:06
@newnewb then for javascript. what to do
Hammad
@newnewb
Dec 22 2017 14:06
well we are using javascript to generate html & css in the end
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:07
@newnewb oh yeah
@newnewb thank man for taking your time and helping me
CamperBot
@camperbot
Dec 22 2017 14:07
pramodjsam sends brownie points to @newnewb :sparkles: :thumbsup: :sparkles:
api offline
Hammad
@newnewb
Dec 22 2017 14:07
 $("#user").append("<a target='blank' href='https://www.twitch.tv/"+name+"'>"+name+"</a><br>");
      $("#status").append("Online<br>");
      $("#game").append(data2.stream.game+"<br>");
      $('#logo').append('<img src="'+dataI.logo+'"/><br>');

-----------------------------------------------------------------------

html="<div class='row channel'><a href='https://www.twitch.tv/"+channelName+"' target='blank'><b class='col-md-offset-3 col-md-1'>"+channelName+"</b></a><p class='col-md-6 col-md-offset-1'>"+status+"</p></div>";

$("#all").append(html);
my code and your code are the same in principle
just the design is different
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:08
@newnewb yeah
Hammad
@newnewb
Dec 22 2017 14:08
try utilizing the 12 cols and using rows to differentiate lines
Pramod Jacob Sam
@pramodjsam
Dec 22 2017 14:09
@newnewb i will try it
Hammad
@newnewb
Dec 22 2017 14:11
now I need help with ReactJS Q_Q
just need 1 get help with looping and creating components that I receive from AJAX
to get*
SakisBal
@SakisBal
Dec 22 2017 14:17
welp if we could hellp we would
Caleb Cox
@CalebCox
Dec 22 2017 14:26
Anyone available to assist me with a whitespace issue I'm having on my portfolio? I can't figure this one out.
SakisBal
@SakisBal
Dec 22 2017 14:26
post it here and someone will probably see and try to help
Caleb Cox
@CalebCox
Dec 22 2017 14:26
screenshot inbound
SakisBal
@SakisBal
Dec 22 2017 14:27
we are ready for this
Caleb Cox
@CalebCox
Dec 22 2017 14:27
Screen Shot 2017-12-22 at 8.43.51 AM.png
SakisBal
@SakisBal
Dec 22 2017 14:27
would be better if it was code however
Caleb Cox
@CalebCox
Dec 22 2017 14:27
that's the issue lol, I don't know where at in my code I'm having a problem
live preview of the portfolio is at caleb-cox.com/dev/2018
it's all static HTML and CSS
no JS at this point
the screenshot is using Ghost CSS script to easily identify element borders. My html tag is set to width 100% but on any screen size smaller than 417px i get this whitespace to the right of the content
oddly enough, the issue isn't present on desktop browsers unless you view it in responsive mode using dev tools
I'm 100% baffled on the cause
SakisBal
@SakisBal
Dec 22 2017 14:31
i have no idea someone else might eb able to help... you could try however to put borders on everything to see which element might be causing the problem
Caleb Cox
@CalebCox
Dec 22 2017 14:32
That's what I did in the screenshot
SakisBal
@SakisBal
Dec 22 2017 14:32
right i see
Caleb Cox
@CalebCox
Dec 22 2017 14:32
when I force the html tag to go over 100%, say 116% it fixes itself but the content is now larger than the view width.
I uploaded it to that dev link I posted to check on an actual mobile device as I wasn't sure if it was an issue only present within dev tools but it's still there on mobile device such as an iPhone 6S and 7 Plus
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 14:46
So what IS nodeJS
Kudzu
@czhower
Dec 22 2017 14:54
Its a lib that lest you run JS on a server instead of in the browser, usually to create BE apps, but can be used for other things.
Ian
@toianw
Dec 22 2017 14:56
@CalebCox I think there's two problems. First is the nav doesn't wrap, second is the 100vw. Change those to 100%. In some browsers, at least, 100vw includes the width of the vertical scrollbar.
Caleb Cox
@CalebCox
Dec 22 2017 15:00
@toianw Thank you for pointing that out. I actually just found the Nav issue before seeing the notification but was unaware of the vw issue. I've corrected it and adjusted the margin of the nav as well and it appears to have resolved the issue!
CamperBot
@camperbot
Dec 22 2017 15:00
calebcox sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 500 | @toianw |http://www.freecodecamp.org/toianw
Ian
@toianw
Dec 22 2017 15:02
@CalebCox glad you solved it.
Caleb Cox
@CalebCox
Dec 22 2017 15:03
funny how one little element can cost you hours of troubleshooting
lol
Ian
@toianw
Dec 22 2017 15:06
dev tools is your friend.
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 15:18
Is there any easier way than opening up dev tools and copying the entire page?
Ken Haduch
@khaduch
Dec 22 2017 15:20
@TheRedstoneTaco - what are you trying to accomplish? If you just want the source for the page (or frame) right click and select either "View Page Source..." or "View Frame Source..." (I'm trying to guess what you are looking for... :) )
ro0tkit
@ro0tkit
Dec 22 2017 15:27
hey
Yingjie (Iris) Hu
@huyingjie
Dec 22 2017 15:29
I am doing data visualization.
       .attr("x", (d, i) => {
         // Add your code below this line
         i*30

         // Add your code above this line
       })
SakisBal
@SakisBal
Dec 22 2017 15:30
good
Yingjie (Iris) Hu
@huyingjie
Dec 22 2017 15:30
What is the name for (d, i)=>? I searched “closure” online, but tutorials do not give functions like this style. How can I find a tutorial for it?
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 15:30
@khaduch Thanks
CamperBot
@camperbot
Dec 22 2017 15:30
theredstonetaco sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3616 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Dec 22 2017 15:35

@huyingjie - these are probably ES6 "arrow" functions (how I've seen them named). What you show is equivalent to:

function(d, i) {
    // code here
}

Although there are differences. But you might already be aware of that. Documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Yingjie (Iris) Hu
@huyingjie
Dec 22 2017 15:37
@khaduch Thank you.
CamperBot
@camperbot
Dec 22 2017 15:37
huyingjie sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3617 | @khaduch |http://www.freecodecamp.org/khaduch
Yingjie (Iris) Hu
@huyingjie
Dec 22 2017 15:39
@khaduch I found the tutorial on the beta website using the keyword “arrow function"
you gave
Ken Haduch
@khaduch
Dec 22 2017 15:42
@huyingjie - this type is a part of the ES6 spec although I think that the format of it comes from some javascript "middleware" like TypeScript. (I'm not sure if middleware is the correct term in this situation) but my understanding of typescript is a layer that sits on top of JavaScript that is compiled or translated into javascript. They decided to implement the arrow functions natively into the JavaScript language.
kerafyrm02
@kerafyrm02
Dec 22 2017 15:42
anyone need help?
Kudzu
@czhower
Dec 22 2017 16:08
Arrow functions are not from TS. C# and many other langs have arrow functions. TS "got" them from C# essentially as TS is largely modeled after C#.
Arrow functions are mostly just a simpler syntax for JS.
Ken Haduch
@khaduch
Dec 22 2017 16:38
@czhower - thanks for the clarification. I didn't really know the history and am not familiar with C# or TypeScript.. Always good to have a more knowledgeable colleague to share the information. I might have heard of the TypeScript lineage, not realizing that it went back farther, but I guess that there is really nothing new under the sun?
CamperBot
@camperbot
Dec 22 2017 16:38
khaduch sends brownie points to @czhower :sparkles: :thumbsup: :sparkles:
:cookie: 41 | @czhower |http://www.freecodecamp.org/czhower
Kudzu
@czhower
Dec 22 2017 16:40
JS language wise is a very late comer to most features. Its a scripting lang so not meant to have everything, but when it does get expansions they are typically things deemed needed, but will be borrowed from existing langs.
Arrow funcs also help with "this". They "fix" this so its proper unlike non arrow funcs.
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 16:53
So where do I write nodeJS on my server?
When I create an html file on my server and write some scripts up in the header (or footer), am I writing JS or nodeJS?
Kudzu
@czhower
Dec 22 2017 16:57
JS
HTMl goes to browser
so thus does your JS
to use node you have to exercute on server manually or in response to a http request
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 17:10
So nodeJS can be used as a controller essentially
Kudzu
@czhower
Dec 22 2017 17:11
Depending on your meaning of controller, yes.
nodejs basically is a JS runtime environment that runs outside and without the browser. It lest you run JS places other than just inside a browser.
kerafyrm02
@kerafyrm02
Dec 22 2017 18:16
anyone need help?
Devansh-Anhal
@Devansh-Anhal
Dec 22 2017 18:24
Hi...May i know whats the purpose of creating a deadlink .
Henry
@GitHub-Henry
Dec 22 2017 18:31
@Devansh-Anhal sample web page, show a page design
Devansh-Anhal
@Devansh-Anhal
Dec 22 2017 18:39
I am learning via code camp
I just learnt how to make a dead link using a hash symbol
so i am asking why we do it?
Henry
@GitHub-Henry
Dec 22 2017 18:40
@Devansh-Anhal :+1:
Kudzu
@czhower
Dec 22 2017 18:40
@Devansh-Anhal Sometimes its used to add a click even to that it looks like a link but acts differently. Without the dead part, the link wont be "active" or look like an active link to the user.
So putting in an empty bookmark (#) tricks the CSS into rendering it to look active and not disabled so the click event functions as expected.
kerafyrm02
@kerafyrm02
Dec 22 2017 18:47
It also alllows you to jump to top of page.
Nikola Stojaković
@panther99
Dec 22 2017 18:48
Anyone working with Angular here? (not AngularJS)
Lisa Copeland
@lisacopeland
Dec 22 2017 18:49
what do you need @panther99
Nick Karnik
@theoutlander
Dec 22 2017 18:51
@lisacopeland my mouse was hovering over your icon and the profile popped up and said Redmond .... I'm from Redmond too ;)
Nikola Stojaković
@panther99
Dec 22 2017 18:51
Nothing now, it looks like problem is solved now. Thanks for quick response!
kerafyrm02
@kerafyrm02
Dec 22 2017 18:51
Never understood why ppl use angular .. when you can just do it with jquery.
Lisa Copeland
@lisacopeland
Dec 22 2017 18:51
@theoutlander Cool!
Nikola Stojaković
@panther99
Dec 22 2017 18:52
jQuery is just DOM manipulation library. Angular is full-fledged front-end framework.
Lisa Copeland
@lisacopeland
Dec 22 2017 18:52
@kerafyrm02 Angular has some pretty powerful capabilities! Try taking a course
kerafyrm02
@kerafyrm02
Dec 22 2017 18:52
i get what they are.. but you can still achive both with jquery
Nick Karnik
@theoutlander
Dec 22 2017 18:52
@kerafyrm02 you should take a look at http://youmightnotneedjquery.com/
Build your expertise in plain JS
kerafyrm02
@kerafyrm02
Dec 22 2017 18:53
js is too verbose for me.
i mean i still use it- but why type all the xtra code
ie for ajax calls ,. makes no sense to me to use the vanilla js approach
Nikola Stojaković
@panther99
Dec 22 2017 18:54
Nope. As I said, Angular is full-fledged front-end framework. It has routing component, services and your code is much better structured and easier to change. You can use RxJS to have Observables too.
kerafyrm02
@kerafyrm02
Dec 22 2017 18:55
give me an example of a site that you can build in angular and not using jquery
Nikola Stojaković
@panther99
Dec 22 2017 18:55
You may be able to implement all of this with jQuery, but it would take you too much time.
kerafyrm02
@kerafyrm02
Dec 22 2017 18:55
ok thought so
did you start angular 1.2? then went to 1.3?
Nikola Stojaković
@panther99
Dec 22 2017 18:55
That's why you don't get me. Angular 1 is AngularJS, I'm using Angular 4.
They're completely different beasts.
kerafyrm02
@kerafyrm02
Dec 22 2017 18:56
but did you use angular 1.2 then went to 1.3?
Nikola Stojaković
@panther99
Dec 22 2017 18:56
I started back then with AngularJS.
But I stopped using it.
And I recently started using Angular.
kerafyrm02
@kerafyrm02
Dec 22 2017 18:56
ok rememeber when 1.3 came out and 1.2 became usable
*unsuable
Nikola Stojaković
@panther99
Dec 22 2017 18:57
I already had experience with TypeScript so it was not such hassle.
Very powerful framework, although there are lot of things to learn and magic happens behind the scenes constantly.
kerafyrm02
@kerafyrm02
Dec 22 2017 18:57
one of the reasons i prefer jquery is bc it doesnt change drastically version to version
and debugging angular (at least the earlier versions) was pita
cant even use debugger;
Nikola Stojaković
@panther99
Dec 22 2017 18:58
I understand you, but you can't compare them. It's good for some small projects, but for bigger ones, it's better to use React or Angular (although this too are not completely comparable as well, I'm oversimplifyng things for a bit)
kerafyrm02
@kerafyrm02
Dec 22 2017 18:59
i just never understood the need to use it.
Nikola Stojaković
@panther99
Dec 22 2017 18:59
But you can write unit tests and use command line to debug it so it even make things better.
(although jQuery also has QUnit if I'm right, but that's much less powerful)
kerafyrm02
@kerafyrm02
Dec 22 2017 19:00
but thats what the console.log is
Henry
@GitHub-Henry
Dec 22 2017 19:00
image.png
kerafyrm02
@kerafyrm02
Dec 22 2017 19:00
you can just test there
Nick Karnik
@theoutlander
Dec 22 2017 19:00
@kerafyrm02 If you're interested in Ajax calls, try something like https://github.com/visionmedia/superagent
Use libraries that serve a specific purpose
Nikola Stojaković
@panther99
Dec 22 2017 19:01
Never mind, you will understand one day when you start using it. Good luck!
kerafyrm02
@kerafyrm02
Dec 22 2017 19:01
np. good disucssion anyhow
Nick Karnik
@theoutlander
Dec 22 2017 19:01
@kerafyrm02 there's a lot that goes into building a site.... frameworks like React help you better organize your code. It is an ecosystem that is fueled by plugins that allow you to do various things.
kerafyrm02
@kerafyrm02
Dec 22 2017 19:02
im a developer. i build custom websites. ive yet to see its purpose
Nick Karnik
@theoutlander
Dec 22 2017 19:02
JQuery is limited in what it can do ... it simplifies some JS related annoyances / incompatibilities across browsers
I would suggest that you drop that you start listening to the knowledgeable folks here
kerafyrm02
@kerafyrm02
Dec 22 2017 19:02
no problems with compatability issues for me.
Nick Karnik
@theoutlander
Dec 22 2017 19:02
And not be closed in with JQuery can do this ...
kerafyrm02
@kerafyrm02
Dec 22 2017 19:03
I'm not being closed. im asking for examples of sites that use it- any why it's better
Nick Karnik
@theoutlander
Dec 22 2017 19:03
There's a reason why the industry is moving towards React ... Angular (I'm not a fan of!)
kerafyrm02
@kerafyrm02
Dec 22 2017 19:03
$ off bootcamps
thats y
i use php / mysql / js (jquery) and build just about any site
Nick Karnik
@theoutlander
Dec 22 2017 19:04
Well, not all bootcamps are worth it
You don't have to go there to learn this tech
start with the libraries websites
I can build that same site 20 times faster that you can using React
kerafyrm02
@kerafyrm02
Dec 22 2017 19:05
basic website i made : www.coastalmister.com
Nick Karnik
@theoutlander
Dec 22 2017 19:05
It will be better structured
can scale to 1000's of developers working on it
And it will have lot of plugins available which will speed up my development
kerafyrm02
@kerafyrm02
Dec 22 2017 19:06
Or basic e-commerce : www.phoenixwaterbeds.com
Nick Karnik
@theoutlander
Dec 22 2017 19:06
If you're building a simple website like that, you don't need react ... it would help, but it may make it more complicated than you need it to be
kerafyrm02
@kerafyrm02
Dec 22 2017 19:06
what's a more complicated site?
Nick Karnik
@theoutlander
Dec 22 2017 19:06
Facebook
Henry
@GitHub-Henry
Dec 22 2017 19:06
@kerafyrm02 amazon
Nick Karnik
@theoutlander
Dec 22 2017 19:06
Applications ... mostly
What you're talking about are websites
there's a difference
When you have a complicated backend ...
lots of user actions / forms / states, etc.
kerafyrm02
@kerafyrm02
Dec 22 2017 19:07
So application based
Nick Karnik
@theoutlander
Dec 22 2017 19:07
API's
yes
maybe that's your confusion
I think I get what you're thinking
The simple websites you're designing don't need Angular
kerafyrm02
@kerafyrm02
Dec 22 2017 19:07
Ok that makes sense then. Bc amazon uses almost exclusively backend..
Nick Karnik
@theoutlander
Dec 22 2017 19:07
No
kerafyrm02
@kerafyrm02
Dec 22 2017 19:08
facebook is php
Nick Karnik
@theoutlander
Dec 22 2017 19:08
Web applications are a combination of a lot more things than that
Facebook used to be PHP
kerafyrm02
@kerafyrm02
Dec 22 2017 19:08
still is
Nick Karnik
@theoutlander
Dec 22 2017 19:08
It is React
you think they built react so others could use it?
kerafyrm02
@kerafyrm02
Dec 22 2017 19:08
yup --
Does google.com pass html validation?
Stephen James
@sjames1958gm
Dec 22 2017 19:09
React is front-end php is backend
kerafyrm02
@kerafyrm02
Dec 22 2017 19:09
no.
Nick Karnik
@theoutlander
Dec 22 2017 19:09
You really need to do your research
kerafyrm02
@kerafyrm02
Dec 22 2017 19:09
php is backend
Nick Karnik
@theoutlander
Dec 22 2017 19:09
React has server side generated pages too ....
PHP is not backend lol
kerafyrm02
@kerafyrm02
Dec 22 2017 19:09
omg lol
ok discussion over
Nick Karnik
@theoutlander
Dec 22 2017 19:10
what do you mean over?
Because you don't like my opinion?
kerafyrm02
@kerafyrm02
Dec 22 2017 19:10
Php is a backend language.
That's like 101 programming knowledge
Nick Karnik
@theoutlander
Dec 22 2017 19:10
PHP is a server side language for generating front-ends
kerafyrm02
@kerafyrm02
Dec 22 2017 19:10
@theoutlander
React has server side generated pages too .... 
PHP is not backend lol
That's wrong.
Nick Karnik
@theoutlander
Dec 22 2017 19:11
Explain
CamperBot
@camperbot
Dec 22 2017 19:11

freeCodeCamp Wiki:

:point_right: The freeCodeCamp wiki can be found on our forum.
Please follow the link and search there.
kerafyrm02
@kerafyrm02
Dec 22 2017 19:11
You said on one hand its a server side language (true) which is the same as (backend language)
Front end is it runs on the client
Like JS runs in browser
react runs in browser
Nick Karnik
@theoutlander
Dec 22 2017 19:12
You need to brush up on your concepts
kerafyrm02
@kerafyrm02
Dec 22 2017 19:12
lol.
Nick Karnik
@theoutlander
Dec 22 2017 19:12
If you're here to learn, I'd suggest you listen to what people have to say
kerafyrm02
@kerafyrm02
Dec 22 2017 19:12
For bad information?
Nick Karnik
@theoutlander
Dec 22 2017 19:12
Or you can go on in life with misconceptions
I can see how @panther99 gave up on you :D
kerafyrm02
@kerafyrm02
Dec 22 2017 19:13
backend/server side are the same
Nick Karnik
@theoutlander
Dec 22 2017 19:13
Ok dude
kerafyrm02
@kerafyrm02
Dec 22 2017 19:14
i care less if someone gives up-
frontend client side are same
im already a programmer- im telling you.
React is best known as a client-side JavaScript framework, but did you know you can (and perhaps should!) render React server-side?
krckyboy
@krckyboy
Dec 22 2017 19:27
Sorry for off topic, but could someone recommend a decent free Linux (xubuntu specifically, if possible) tutorial on YouTube or anywhere in general? Thank you.
alpox
@alpox
Dec 22 2017 20:09
@kerafyrm02 custom websites usually dont need much, so jquery is enough. Some animations, some things here and there. We talk about huge data-driven apps which hold a TON of state and talk with a server and a database permanently. You sure wont want to handle such applications in jquery. You would drown. Deep.
As you see, these are just very different usecases which cannot really be compared
Maduro-BL
@Maduro-BL
Dec 22 2017 20:20
i wonder why jquery cant be compiled to vanilla javascript
so we can use it in our development, and leave it out in production
alpox
@alpox
Dec 22 2017 20:22
@Maduro-BL jquery is vanilla javascript
No need to compile it
But why would you want to use it in development and take it out for production? Jquery does not help you with development
Maduro-BL
@Maduro-BL
Dec 22 2017 20:24
jquery is a library right? i read description in the video posted above: "Removing client-side React.js resulted in 50% performance"
alpox
@alpox
Dec 22 2017 20:25
Jquery is a library, yes.
Maduro-BL
@Maduro-BL
Dec 22 2017 20:25
I wondered why libraries like jquery need to run client-side
alpox
@alpox
Dec 22 2017 20:26
They are right when they use react for serveraide rendering. The server is just usually faster and can do caching so the client doesnt have to do much work upfront for rendering. The drawback is that the site gets less dynamic and the server gets more load which makes it more expensive on your side
Jquery is a library which directly manipulates the DOM. There is no need for jquery on serverside whatsoever. There are templating engines for rendering sites serverside. Jquery only brings some dynamica onto an else static page. That can only be done on clientside
Maduro-BL
@Maduro-BL
Dec 22 2017 20:28
right, just curious why jquery is needed client-side. why not use it to develope, then transpile, like typescript for example.
alpox
@alpox
Dec 22 2017 20:28
As i said, that would make absolutely no sense
Maduro-BL
@Maduro-BL
Dec 22 2017 20:28
jquery minipulates the DOM using vanilla javascript
Dan Lafferty
@DanLaff
Dec 22 2017 20:28
jQuery isn't "needed", it's designed to speed up development, so it's more of a convenience
But...it has overhead and that overhead is too much compared to better tools out there, like React
alpox
@alpox
Dec 22 2017 20:29
@Maduro-BL right. It manipulates the DOM. The DOM only exists on clientside.
@Maduro-BL transpiling is needed when you have to convert something from one thing to another. You dont have to do that with jquery. Also, jquery does not do that.
Maduro-BL
@Maduro-BL
Dec 22 2017 20:30
ok, if we open jquery.js (idk if thats the actual file library) its all vanilla javascript correct?
alpox
@alpox
Dec 22 2017 20:30
Yes it is
Maduro-BL
@Maduro-BL
Dec 22 2017 20:31
right... and we use lets say... $('someElement').find instead of vanilla docuemnt.getElement (not sure if correct).
jquery makes coding easier.
do we need it on the client side?
alpox
@alpox
Dec 22 2017 20:32
It makes no sense to do this on serverside because you dont have a document on serverside. No DOM available.
Maduro-BL
@Maduro-BL
Dec 22 2017 20:32
why not transpile $('div').find to document.getElemnt
alpox
@alpox
Dec 22 2017 20:32
Jquery makes development easier on the clientside ofc. (for simple things)
Dan Lafferty
@DanLaff
Dec 22 2017 20:33
jQuery can dynamically generate a dom just like javascript. It makes no sense to run server side, but you certainly can do it.
Maduro-BL
@Maduro-BL
Dec 22 2017 20:33
i see where i'm misunderstanding.
alpox
@alpox
Dec 22 2017 20:33
@Maduro-BL that also makes no sense when jquery internally itself does document.getElement... if you read its source
Maduro-BL
@Maduro-BL
Dec 22 2017 20:33
i didnt mean 'server side', i meant in developement
like typescript for example
alpox
@alpox
Dec 22 2017 20:34
@Maduro-BL you mean to transpile jquery structures to vanilla js. This makes not enough sense because it would not improve anythinf
Anything*
Maduro-BL
@Maduro-BL
Dec 22 2017 20:34
avoid adding the library on production?
quicker page loads
alpox
@alpox
Dec 22 2017 20:35
It would make it harder to work with it because you would have an additional buildstep. Also, it would make your sources bigger in the end if you use it at many places, or exactly the same as if you just use jquery like this (if optimized right)
@Maduro-BL It wouldnt get faster. The transpilation would expand your code a lot or to the same size of jquery sources in the end. It can only get worse when doing that
Dan Lafferty
@DanLaff
Dec 22 2017 20:36
@Maduro-BL if you're asking if there's a way to convert jquery to vanilla js, there is no way to do it.
Alpox, your explanation is very technical :)
Maduro-BL
@Maduro-BL
Dec 22 2017 20:36
fair enough, more curiosity than anything.
alpox
@alpox
Dec 22 2017 20:36
Well, it seems he wants it technical as he asks for why we dont do it :)
Muzamil
@mzmls
Dec 22 2017 20:36
hi! I can't seem to get the nav change the panel for home, profile, and contact.
https://codepen.io/mzmls/pen/LOoejJ
anyone know how to get that working?
Dan Lafferty
@DanLaff
Dec 22 2017 20:36
I assume this is a place for front end beginners, need some ELI5 responses :)
Maduro-BL
@Maduro-BL
Dec 22 2017 20:37
@alpox is right, i was wondering WHY we dont do it
alpox
@alpox
Dec 22 2017 20:41
@Maduro-BL actually, there is one thing you can do with jquery to make pageloads faster
Just for your curiosity
Maduro-BL
@Maduro-BL
Dec 22 2017 20:42
shoot
alpox
@alpox
Dec 22 2017 20:43
Javascript bundlers like Webpack or compilers lile the Google Closure Compiler integrated a technology named "Tree Shaking" lately. If you use one of those to compile your javascript, or bundle it (Webpack), it will optimize all your code in a manner that removes all code fragments which are not used anywhere in the code. So if you integrate jquery and you use only 1-2 of its methods, the unused rest of the library would be left out in your bundle.
Maduro-BL
@Maduro-BL
Dec 22 2017 20:44
{quote} Also, it would make your sources bigger in the end if you use it at many places{quote} < ---- what if we minified too?
@alpox , very cool
now that's a useful tool
alpox
@alpox
Dec 22 2017 20:45
Yea, and it sure does it for all youe code and libraries. Thats the cool thing
Muzamil
@mzmls
Dec 22 2017 20:45

https://codepen.io/mzmls/pen/LOoejJ

About me
Projects
Contact

alpox
@alpox
Dec 22 2017 20:45
And jquery.js usually already comes minified btw (jquery.min.js) so what you suggested above would not improve it either
Muzamil
@mzmls
Dec 22 2017 20:45
these links should navigate between different sections, but it needs js?
Maduro-BL
@Maduro-BL
Dec 22 2017 20:46
that was in question to your comment:" Also, it would make your sources bigger in the end if you use it at many places"
Dan Lafferty
@DanLaff
Dec 22 2017 20:47
@mzmls You don't have any different sections on your page. I'm confused. There's nothing to link to.
alpox
@alpox
Dec 22 2017 20:48
@Maduro-BL yes. Lets see all code as minified. If you use jquery.min.js + your code or only your code but transpiled theough a now imaginary jquery transpiler, the latter will most likely end up as a bigfer bundle
Bigger*
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 20:52
Do I need to put a <script></script> in the script part of my codepen?
alpox
@alpox
Dec 22 2017 20:53
@mzmls it seems you use bootstrap tabs there. Sadly i cannot check much from my phone but go sure that you use the right classes for the right version. There are differences between bootstrap version 4 and 3. Go sure that your CSS bootstrap version and your classes line up
@TheRedstoneTaco no need. Just code ahead
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 20:56
Do I need to include the <html> and <body> tags in the html part of my codepen?
alpox
@alpox
Dec 22 2017 20:57
Also no :) codepen doesnt want those tags in the html part
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 20:57
Do I need any tags in the css part?
alpox
@alpox
Dec 22 2017 20:57
If you need something im the head part, put it into the settings -> head
No. No tags needed for the css part
Only css
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 20:58
will I ever use Java for web development?
Or is web development too broad a spectrum to answer
Kaz Baig
@kbaig
Dec 22 2017 20:58
@TheRedstoneTaco for back end maybe
not sure how popular it is though
alpox
@alpox
Dec 22 2017 20:59
You CAN use java on backend. Actually you can also use it for frontend but i dont recommend it :D
Maduro-BL
@Maduro-BL
Dec 22 2017 21:00
@alpox i guess that depends on how much code we've got. If we have a small code base with sparse jquery use, use imaginary jquery transpile on this. It'll probably be a smaller bundle. I understand why we don't compile library during the build now. We'd end up with more code with all those pollyfills.
vmakar
@vmakar
Dec 22 2017 21:00
Hey guys, anyone familiar with the position: sticky tag? I could use a hand
Muzamil
@mzmls
Dec 22 2017 21:00
@alpox thanks
CamperBot
@camperbot
Dec 22 2017 21:00
mzmls sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1509 | @alpox |http://www.freecodecamp.org/alpox
Kaz Baig
@kbaig
Dec 22 2017 21:00
Apparently Go is gaining traction for back end in the Valley
vmakar
@vmakar
Dec 22 2017 21:01
I'm trying to make a navbar that is fixed on scroll with position:sticky but it isn't working
I think it's because the parent element has height:100%
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 21:01
computer, send brownie points to @kbaig
alpox
@alpox
Dec 22 2017 21:01
@Maduro-BL you are right that it may be smaller on small codebase. But i believe it does not make much sense to put effort into it for a very few kb and only on small codebases where you dont have to worry about its size yet anyway :)
CamperBot
@camperbot
Dec 22 2017 21:01
theredstonetaco sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 491 | @kbaig |http://www.freecodecamp.org/kbaig
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 21:02
alright
Maduro-BL
@Maduro-BL
Dec 22 2017 21:02
lol yeah, it makes sense
alpox
@alpox
Dec 22 2017 21:02
@kbaig yea it does. I dont much see why though except for some speed improvs
Kaz Baig
@kbaig
Dec 22 2017 21:04
@alpox A more modern back end language from a big company I guess. Seems like the dev experience is quite good too, based on the convo I had
alpox
@alpox
Dec 22 2017 21:04
May be. I stay away from it as long as they dont manage to get generics
Im currently much more onto clojure :D
Dan Lafferty
@DanLaff
Dec 22 2017 21:11
Muzamil
@mzmls
Dec 22 2017 21:26
@DanLaff that fixed it, thanks for your help
CamperBot
@camperbot
Dec 22 2017 21:26
mzmls sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:00
so is javascript inconsistent or too complicated for me?
Lisa Copeland
@lisacopeland
Dec 22 2017 22:00
@TheRedstoneTaco Just keep plugging away
There are so many great resources for learning JS
Nick Karnik
@theoutlander
Dec 22 2017 22:10
@TheRedstoneTaco what are you finding complicated?
Henry
@GitHub-Henry
Dec 22 2017 22:14
@theoutlander with a 6 volume series needed to explain JS in the YDKJS series, perhaps that speaks to the complexity of the language
Nick Karnik
@theoutlander
Dec 22 2017 22:14
sorry, wasn’t following the conversation
It’s the nature of the subject ...
most people have learnt this over long periods of time
with the need for instant gratification, it’s a bit hard to grasp enough to do something right away
Henry
@GitHub-Henry
Dec 22 2017 22:17
@theoutlander i was just agreeing with the thought that JS can be complex.
kind of like when I thought CSS was easy, until I tried to make a nice looking website
Nick Karnik
@theoutlander
Dec 22 2017 22:21
It’s easy to learn it
but you improve your recall the more you apply it
Henry
@GitHub-Henry
Dec 22 2017 22:24
@theoutlander kind of like cooking
Nick Karnik
@theoutlander
Dec 22 2017 22:24
Haha … i suck at cooking for that very reason!
Henry
@GitHub-Henry
Dec 22 2017 22:25
@theoutlander yeah, it's taken years, but i can finally make a few tasty things
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:39
@theoutlander closure. The fact that variables can be functions and functions can be nameless and there are so many specific cases
Sharp learning curve IMO
Kudzu
@czhower
Dec 22 2017 22:42
And variables as functions and functions without names is different than JS how?
Or C# or java for that matter? All support delegates and anon functions.
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:43
I learned comp sci essentials with C and Python
Not java
or C# or nodeJs
lol just think about someone who starts learning comp sci with nodeJS
Nick Karnik
@theoutlander
Dec 22 2017 22:44
yeah i hear u ...
i started with C++ myself
Henry
@GitHub-Henry
Dec 22 2017 22:44
assembly
Nick Karnik
@theoutlander
Dec 22 2017 22:44
:)
I own a few assembly books … been meaning to get around that some day
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:45
wow @GitHub-Henry
Kudzu
@czhower
Dec 22 2017 22:45
I dont recommend JS as a first lang, or if it is a first lang just as a short stop before tyring a another lang before coming back to JS.
Nick Karnik
@theoutlander
Dec 22 2017 22:45
so @TheRedstoneTaco, it is not that complex
which part is confusing ?
Kudzu
@czhower
Dec 22 2017 22:45
I do assembly on a daily basis most times.
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:45
some functions require other functions as input
that and I have never learned what "=>" means in JS
Henry
@GitHub-Henry
Dec 22 2017 22:46
@czhower mainframe or pc
Nick Karnik
@theoutlander
Dec 22 2017 22:46
but that’s more of an implementation detal
=> is a new operator in ES6 called fat arrow
() => {}
that’s the same as
function name() { … }
Kudzu
@czhower
Dec 22 2017 22:46
PC and embedded. Mostly x86/x64 right now, but will be doing ARM and have done a lot of other CPUs in the past from Z80 to 68xx and 68xxx and a few others.
Nick Karnik
@theoutlander
Dec 22 2017 22:47
it’s a short … since it has no name, it is an anonymous function
Kudzu
@czhower
Dec 22 2017 22:47
@theoutlander Its not exactly the same. There are some other diffs, such as how this is handled.
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:47
comuter, send @theoutlander brownie points (thanks)
Kudzu
@czhower
Dec 22 2017 22:47
and how arguments[] is handled.
Nick Karnik
@theoutlander
Dec 22 2017 22:47
@czhower are you refering to what this resolves to ?
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:47
hey wait a moment so in the front-end course, our JS courses have been all client-side JS right?
Nick Karnik
@theoutlander
Dec 22 2017 22:48
how is it handled ?
Kudzu
@czhower
Dec 22 2017 22:48
yes. This in an anon functino uses this of the parent method, function() wont

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

No separate this
Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). This proved to be less than ideal with an object-oriented style of programming.

prior to that you had to use call or bind, ro set this to a local var and then ref that local var inside the other func
Nick Karnik
@theoutlander
Dec 22 2017 22:49
Yes, but you are jumping the gun
Kudzu
@czhower
Dec 22 2017 22:49
That is a direct quote from the page.
With the non arrow funcs, this often ended up being something other than expected
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:50
can someone give me an example function the link was too far ahead for me
Kudzu
@czhower
Dec 22 2017 22:50
blob
Nick Karnik
@theoutlander
Dec 22 2017 22:50
so @czhower you need to slow down when explaining a concept :D
Kudzu
@czhower
Dec 22 2017 22:51
Check the link it explains it all in detail. My point was that () => is not exactly the same as using function()
On the surface its the same, but there are some subtle differences.
Hammad
@newnewb
Dec 22 2017 22:52

guys, can anyone check for me if these links are working or down them too? ``` Hint: To get the top 100 campers for the last 30 days: https://fcctop100.herokuapp.com/api/fccusers/top/recent.

Hint: To get the top 100 campers of all time: https://fcctop100.herokuapp.com/api/fccusers/top/alltime. ```

Kudzu
@czhower
Dec 22 2017 22:53
they arent responding here
after a while:
Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.
TheRedstoneTaco
@TheRedstoneTaco
Dec 22 2017 22:53
yeah those links are broke
Kudzu
@czhower
Dec 22 2017 22:54
They respond after a while - but with an error.
Nick Karnik
@theoutlander
Dec 22 2017 22:54
so @TheRedstoneTaco, there are a few other elements with arrow functions
they’re less verbose
as I mentioned earlier
as for what ‘this’ refers to within that function
arrow functions lexically bind their context to this
I can work on an example in a fiddle
Bakhtiiar Muzakparov
@muzakparov
Dec 22 2017 23:00
Hello guys, anyone had experience with refactoring large css files?
Dan Lafferty
@DanLaff
Dec 22 2017 23:05
@muzakparov What's your question?
Bakhtiiar Muzakparov
@muzakparov
Dec 22 2017 23:06
I have two large css files, I wonder where to start refactoring them
or what kind of strategy should I use to refactor it
Dan Lafferty
@DanLaff
Dec 22 2017 23:07
That's a broad question - are you looking for recommended reading?
Each answer is several pages long - it isn't a simple answer for gitter chat
Bakhtiiar Muzakparov
@muzakparov
Dec 22 2017 23:14
good point thanks
have you done it?
Nick Karnik
@theoutlander
Dec 22 2017 23:26
@TheRedstoneTaco sorry I got side-tracked here …. here’s an example https://codepen.io/theoutlander/pen/BJLgzZ?editors=0012
Dan Lafferty
@DanLaff
Dec 22 2017 23:29
@muzakparov Sorry, stepped away, yes I have refactored CSS before. Always refactor your CSS regularly - it's good to revisit it every time you make substantial changes
otherwise, you end up taking thousands of lines of CSS and thinking... hmmm where do I start? :)
Bakhtiiar Muzakparov
@muzakparov
Dec 22 2017 23:36
@DanLaff thanks,
CamperBot
@camperbot
Dec 22 2017 23:36
muzakparov sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
Bakhtiiar Muzakparov
@muzakparov
Dec 22 2017 23:37
dammit I have 14 000 lines of code and very very crappy and code wasnt written by me
:D
iso
@iso1048
Dec 22 2017 23:42
Hi. Any feedback on my tic tac toe game would be much appreciated. I am aware of a problem, where after a game is completed (computer wins or it is a draw), the hover effects for the two buttons at the bottom stop working, but when hte game is completed again and a new game starts, the hover effects work again - not sure why this is. (Also, I know the code is not that great - I still need to clean it up a bit) Thanks! https://codepen.io/gothamknight/pen/BJBXeb?editors=1010 (the reset button causes a page reload, which works fine in full screen view for me)