These are chat archives for FreeCodeCamp/HelpJavaScript

7th
Apr 2018
Christopher McCormack
@cmccormack
Apr 07 2018 00:00
@anthonygallina1 Maybe just call those in componentDidMount a single time so it's not hammering the API
@anthonygallina1 Sorry I love to look at other's react code
anthonygallina1
@anthonygallina1
Apr 07 2018 00:01
np I didnt think you were trolling the CSS convo.
:v:
Thanks for the advice.
Christopher McCormack
@cmccormack
Apr 07 2018 00:03
@anthonygallina1 your css looks awesome I wish I had that kind of patience
anthonygallina1
@anthonygallina1
Apr 07 2018 00:10
@cmccormack been doing it since the 90's i could be better. But like i said it gets better with time. I dont mind doing CSS now.
Christopher McCormack
@cmccormack
Apr 07 2018 00:11
I don't think CSS even existed when I was making my first websites
that was an ugly time
anthonygallina1
@anthonygallina1
Apr 07 2018 00:11
yes
DHTML was a real improvement to inter activity
And flash was the big thing
Can do much of that now with transitions and CSS
I like it
Christopher McCormack
@cmccormack
Apr 07 2018 00:14
Is that what changed? I stopped messing with it around the end of the 90s and didn't really pick it back up until a few years ago
Yeah css animations is awesome
And Canvas
And SVG
anthonygallina1
@anthonygallina1
Apr 07 2018 00:14
I wish the cross browser thing would get better though
Kudzu
@czhower
Apr 07 2018 00:15
They stopped messing with it in the 90s as well:
"CSS level 3, which was started in 1998, is still under development as of 2014"
anthonygallina1
@anthonygallina1
Apr 07 2018 00:15
wow
thats a long time
Gulsvi
@gulsvi
Apr 07 2018 00:16
It's a little misleading - their are CSS modules and different revisions.
Christopher McCormack
@cmccormack
Apr 07 2018 00:17
For anyone that wasn't browsing the web back in the day - this is kind of how it looked - http://cedesign.net/
anthonygallina1
@anthonygallina1
Apr 07 2018 00:18
@cmccormack yup
Looks like early poser graphics angels
Christopher McCormack
@cmccormack
Apr 07 2018 00:19
Beautiful lens flares, JJ Abrams should hire the animator
anthonygallina1
@anthonygallina1
Apr 07 2018 00:20
Looks like photo shop lens flare to me
Christopher McCormack
@cmccormack
Apr 07 2018 00:25
the beta version haha
anthonygallina1
@anthonygallina1
Apr 07 2018 00:31
Beta When Lucas still owned it?
Before he sold it to Adobe?
Nate Mallison
@NJM8
Apr 07 2018 00:36
Anyone know a thing or two about removing event listeners?
I can't seem to get it right
All I can tell from the documentation is that the removeEventListener has to exactly match the addEventListner (more or less, the parameters can be entered differently). but it isn't working
buttonOne.addEventListener('mousedown', event => chooseASide(event));
buttonOne.removeEventListener('mousedown', event => chooseASide(event));
the remove is not working
anthonygallina1
@anthonygallina1
Apr 07 2018 00:41
buttonOne.addEventListener('mousedown', function (event) {
  return chooseASide(event);
});buttonOne.removeEventListener('mousedown', function (event) {
  return chooseASide(event);
});
Is it reachable after the return?
I'm guessing event => chooseASide(event)
is an anonymous function
Kudzu
@czhower
Apr 07 2018 00:44
On quick look, I think its that you need to remove the same instance and you are creating 2 instances as anons.
Norvin Burrus
@ndburrus
Apr 07 2018 00:44
@anthonygallina1
anthonygallina1
@anthonygallina1
Apr 07 2018 00:45
@ndburrus
Nate Mallison
@NJM8
Apr 07 2018 00:45
I don't even need the anonymous function, right?
    buttonOne.addEventListener('mousedown',  chooseASide));
anthonygallina1
@anthonygallina1
Apr 07 2018 00:45
inherits Run it through babel
Nate Mallison
@NJM8
Apr 07 2018 00:45
should still receive the event
Kudzu
@czhower
Apr 07 2018 00:45
Depends what you want to do, but without checking the docs I assume its same as other langs and works on instances so you would need to save the ref if its anon.
Norvin Burrus
@ndburrus
Apr 07 2018 00:46
@anthonygallina1 sorry, had comp issue/s
Nate Mallison
@NJM8
Apr 07 2018 00:48
nice, that worked
anthonygallina1
@anthonygallina1
Apr 07 2018 00:52
@NJM8 looks cleaner
Kudzu
@czhower
Apr 07 2018 00:52
IIRC return values are now shunned in favor of using the properties of the event argument for events.
anthonygallina1
@anthonygallina1
Apr 07 2018 00:54
No need for Sorry Good to see you
Nate Mallison
@NJM8
Apr 07 2018 00:55
@czhower Elaborate?
That is the prefered method today but return values still exist for compat back to 1.0.
anthonygallina1
@anthonygallina1
Apr 07 2018 00:57
So this would bubble alot? Hope i used the correc t term. https://codepen.io/anthonygallina/pen/oqMEWN
Kudzu
@czhower
Apr 07 2018 00:58
JS has a lot of things that can be done 2 or 10 ways because when they add stuff they usualy dont fix it "fully" and take a few tries, all the while leaving behind the old baggage. It should evolve with options or versions, but it doesnt so just be aware of this kind of stuff.
anthonygallina1
@anthonygallina1
Apr 07 2018 01:03
i need to refactor I am working on it now
i had a es6 one up but code pen boomarang and cors even though it is the same site didnt play well with it
Nate Mallison
@NJM8
Apr 07 2018 01:05
So here is a general question, I'm almost done with front end cert. A lot of these small apps are simple, no need for classes, prototypes, methods, anything really complex. I thought about doing some of the last ones that way to present more structure and show some knowledge there? Seems like over kill but all my apps starting to look the same
then I think how complex do you really want to make a tic tac toe game
anthonygallina1
@anthonygallina1
Apr 07 2018 01:06
good question
Kudzu
@czhower
Apr 07 2018 01:06
Depends if you plan to only do FE or move to BE. FE devs typically are "consumers" and dont implement objects etc...
Nate Mallison
@NJM8
Apr 07 2018 01:08
Good point
That actually helps to answer a much larger question about when I want to start looking for jobs
Kudzu
@czhower
Apr 07 2018 01:09
Most FE Devs are the modern VB devs, and mainframe devs before that... 90% of the devs usually just hook up a UI to a backend given to them.
Its a lower skill set, but the majority of work being done out there and always has even before web.
Nate Mallison
@NJM8
Apr 07 2018 01:10
Some people in my area looking for web dev apprenticeships, my portfolio isn't bad but I don't have any of my back end work polished and on there yet, I don't want to do HTML and CSS for the rest of my life.
especially not CSS, :smile:
Kudzu
@czhower
Apr 07 2018 01:11
There are a lot of FE only jobs. For your first 1-2 years any job is a job so long as pay is at least ok - its about getting verifiable experience.
After the 2 year mark or so you can be a bit more disciminating on your job choices.
Nate Mallison
@NJM8
Apr 07 2018 01:13
I definitely agree. I am very lucky and don't need a job for another 8-10 months. So I may apply for the experience of putting myself out there. Plus most in this area are small shops so a lot of devs are full stack to some degree.
Kudzu
@czhower
Apr 07 2018 01:13
once you get in a place, a lot can be learnt on the job for the other parts.
Nate Mallison
@NJM8
Apr 07 2018 01:14
I just don't want to get pigeon holed. Did that for the last 12 years. I'm done working for someone else's dreams
Kudzu
@czhower
Apr 07 2018 01:16
For the first 1-2 years prepare to be a drudge worker, but it will be new so it will be exciting for a while... get over that hump and learn as you go for BE, and dont forget to learn other langs too.
Henry
@GitHub-Henry
Apr 07 2018 01:16
python is hot
Kudzu
@czhower
Apr 07 2018 01:17
python is one of the ones I would suggest.
Henry
@GitHub-Henry
Apr 07 2018 01:18
high demand for react and python in the market
Nate Mallison
@NJM8
Apr 07 2018 01:18
I won't, I'm familiar with Python, done some Objective-C, regular C, and some Scheme
Kudzu
@czhower
Apr 07 2018 01:22
TypeScript is good - I dont use JS anymore, just TS which is a superset of JS and even Google is moving to TS.
ie, not exact comparison but TS to JS is what C++ is to C, but doesnt add complexity but adds type safety (not complete as it cant), and other things.
Its kind of like C# for JS.
Nate Mallison
@NJM8
Apr 07 2018 01:25
interesting comparison
Henry
@GitHub-Henry
Apr 07 2018 01:32
might want to consider market demand for language when selecting a language to learn
Kudzu
@czhower
Apr 07 2018 01:35
which is why I refused to learn COBOL... else they find you and send you to the basement never to return...
Nate Mallison
@NJM8
Apr 07 2018 01:37
Well I have a friend who has been pushing me to learn more C and C++ so he can try to hire me, but C and C++ have a much lower market share than the rest
although there are 7 open jobs in my city for C devs right now, most in the $90K plus range. :smile:
Kudzu
@czhower
Apr 07 2018 01:37
C isnt that widely used except in embedded. C++ is mostly xplat stuff. C++ is $$$
the thing with C and C++ is that most positions will not be for jr devs....
Nate Mallison
@NJM8
Apr 07 2018 01:38
yeah they are embedded, they make a magnetic tracking system for boring heads
yeah it wouldn't be an easy jump, but I write better code than there last 4 applicants. so I guess it all depends
Kudzu
@czhower
Apr 07 2018 01:41
never hurts to try. those who try a lot are more successful.
Nate Mallison
@NJM8
Apr 07 2018 01:42
the last one couldn't write a for loop, so I'll admit the bar is low. haha
Kudzu
@czhower
Apr 07 2018 01:42
its like sales, you just kept knocking on doors or making calls. Be like that one guy in school who wanst super popular but just asked enough people out till one agreed.
Stephen James
@sjames1958gm
Apr 07 2018 01:46
@NJM8 You realize that the most popular browser is written in C++ ?
Nate Mallison
@NJM8
Apr 07 2018 01:47
yes
Stephen James
@sjames1958gm
Apr 07 2018 01:47
nodejs is mostly C++
Kudzu
@czhower
Apr 07 2018 01:47
follow up on submitting applications and interviews too. I dont know if its still a practice but some employers used to wait and see who followed up to see who was really intersted in the job.
most xplat native code is C++
Stephen James
@sjames1958gm
Apr 07 2018 01:48
@NJM8 I would worry more about what you like to do, vs. language market share.
Kudzu
@czhower
Apr 07 2018 01:48
Thats the current major driver behind C++.
Nate Mallison
@NJM8
Apr 07 2018 01:49
This place looking for the web apprentice rubs me the wrong way a little, they have posted for a web apprentice each year for the past 4 but they only have 5 employees, 4 of which have been there the whole time. the position is supposed to be for on-boarding to full time. So where did all the other people go?
Some business I would say maybe they just did hire someone or no one applied, but this place is the premier web dev shop in the area. I'm sure they get plenty of applicants
Kudzu
@czhower
Apr 07 2018 01:49
a lot small of companies abuse jr devs... pay them squat and they dont stay. Not all, but its common enough to be wary of.
Nate Mallison
@NJM8
Apr 07 2018 01:50
@sjames1958gm yeah I don't care about market share, that's why most my projects are still vanilla JS and not react
Stephen James
@sjames1958gm
Apr 07 2018 01:50
@NJM8 But react is fun :)
Nate Mallison
@NJM8
Apr 07 2018 01:51
@czhower That's what I worry about. but still doesn't hurt to apply. I'm in a position to say no or work there for a bit to get the experience and move on.
@sjames1958gm Angular is fun
haha, actually I want to checkout Vue for my backend projects since they don't seem to care what you use. if I'm going to jump on a boat may as well pick the fastest rising one
Rahsheen Porter
@rahsheen
Apr 07 2018 01:53
React is super.
The funny thing about people saying you should stick with plain JS is that you don't just replace JS with a framework. You do plain js inside the framework. It doesn't completely do everything for you.
Henry
@GitHub-Henry
Apr 07 2018 01:55
language market demand is just an indicator of what skill set employers currently want, just so happens python and react are at the top of the heap, not to say that other languages are unmarketable, just not in as much demand in today's market place
Nate Mallison
@NJM8
Apr 07 2018 01:58
I'm not saying don't use react. I'm saying I don't need Node, Mongo, React, Vue, Babel, TypeScript, Redux, Grunt, Bower, Webpack, ect ect ect to make a calculator.
@czhower Why the interest in the plant?
Kudzu
@czhower
Apr 07 2018 02:06
plant?
oh kudzu?
blob
Nate Mallison
@NJM8
Apr 07 2018 02:07
yeah
Kudzu
@czhower
Apr 07 2018 02:08
given to me by a dev I used to share a back room office with.
Once a conference even goofed and stuck it on my plane reservation as my middle name...
Nate Mallison
@NJM8
Apr 07 2018 02:08
ah
Kudzu
@czhower
Apr 07 2018 02:09
I have a pic of the boarding pass on my old blog somewhere, I think on my MSDN blog.
Nate Mallison
@NJM8
Apr 07 2018 02:09
oops
Kudzu
@czhower
Apr 07 2018 02:11
just looked.. not there.. must have been after I left Microsoft. on my blog archive somewhere then but cant find it.
Ayush Bahuguna
@relentless-coder
Apr 07 2018 03:13
I'd be so happy, if every react app that I start, runs successfully at the first go
this is my index.js
import React from 'react';                                               
import {render} from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import './index.css';                                            
import {App} from './components/app.js';                     
import registerServiceWorker from './registerServiceWorker';                                          

render((    
    <BrowserRouter>                                                                          
        <App/>                                                                               
    </BrowserRouter>                                                                                     
), document.getElementById('root'));
registerServiceWorker();
and this is my app.js file
import React from 'react';     
import {Route, Switch} from 'react-dom';
import {Booking} from './booking/bookingContainer.js';

export const App = ()=>{       
    return (                   
        <Switch>
            <Route path="/booking" component={Booking}/>
        </Switch>              
    )     
}
Rahsheen Porter
@rahsheen
Apr 07 2018 03:15
There a question there?
Ayush Bahuguna
@relentless-coder
Apr 07 2018 03:15
but I get error that expected string, got undefined, kindly check the render method of App
Rahsheen Porter
@rahsheen
Apr 07 2018 03:17
Is this line correct? import {Route, Switch} from 'react-dom';
Or should that be react-router-dom?
Claudio Restifo
@Marmiz
Apr 07 2018 03:19
@relentless-coder I fear you are importing from the wrong module: it should be react-router-dom
oh, I'm late
Ayush Bahuguna
@relentless-coder
Apr 07 2018 03:20
@rahsheen @Marmiz yes, thank you, wonderful people.
CamperBot
@camperbot
Apr 07 2018 03:20
relentless-coder sends brownie points to @rahsheen and @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1456 | @rahsheen |http://www.freecodecamp.org/rahsheen
:star2: 1198 | @marmiz |http://www.freecodecamp.org/marmiz
Rahsheen Porter
@rahsheen
Apr 07 2018 03:33
Zunaid Aslam
@ZunaidAslam
Apr 07 2018 08:46

I think there is a bug in my code and i can't seem to figure it out.

var users = [ "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "abra" ];
In my app noobs2ninjas shows that it's streaming the same thing as abra. If I replace noob2ninjas with Robot Caleb then it also shows that Robot Caleb is streaming the same thing as abra.

So there is some problem with the last 2 which I can't seem to figure out.

abraham anak agung
@padunk
Apr 07 2018 09:26
@Zunaid-Aslam you have codepen? I think because the call is async
1Mher1
@1Mher1
Apr 07 2018 09:31
JavaScript: Make capitalize the first and last letter of each word in a string
document.getElementById("btn2").onclick=function(){
var text = document.getElementById("txt2").value;
for (var i = 0;x = text.length; i<x; i++) {
text[i] = text[i][0].toUpperCase() + text[i].substr(1);
}
console.log(text);
}
my code wht going wrong?
Stephen James
@sjames1958gm
Apr 07 2018 09:51
@1Mher1 Where are you changing the last letter in the word?
@1Mher1 Also, you probably need to change the string to an array of words.
Zunaid Aslam
@ZunaidAslam
Apr 07 2018 09:53
I can't seem to figure out why it's happening @padunk
Stephen James
@sjames1958gm
Apr 07 2018 09:55
@Zunaid-Aslam There is only one status variable - shared by all of the getJSON requests.
And you are making two indpendent getJSON calls, so the value of status when the second getJSON
has a likely chance of not being correct
Zunaid Aslam
@ZunaidAslam
Apr 07 2018 09:56
I am making 2 getjson calls because I need to get information from two apis
I dont know or learnt any other way
1Mher1
@1Mher1
Apr 07 2018 09:56
@sjames1958gm last letter i don't now what code used please help
Zunaid Aslam
@ZunaidAslam
Apr 07 2018 09:57
What is the problem if status variable is shared by all json? I did that on purpose. I put the online and offlien status inside the variable and used it in the other getjson to output along with other information
What do you suggest to fix the issue? @sjames1958gm
Stephen James
@sjames1958gm
Apr 07 2018 09:59
@Zunaid-Aslam
Well because you can't be sure the getJSON will all resolve in the correct timing.
If you use array forEach rather than a regular for loop you will get a separate status variable for each pair of getJSON
@Zunaid-Aslam
users.forEach(function(user) {
   var status;
});
@1Mher1 0 index is the first letter, then you need a different value for the last letter
Zunaid Aslam
@ZunaidAslam
Apr 07 2018 10:03
So there is a chance that the information is not given in sequence if i use 2 json calls
I will try to test forEach but I have to read more about it :)
Thanks @sjames1958gm
CamperBot
@camperbot
Apr 07 2018 10:03
zunaid-aslam sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9173 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
1Mher1
@1Mher1
Apr 07 2018 10:04
yes but what i can put 0 this is my capital first last I don't now please help
Stephen James
@sjames1958gm
Apr 07 2018 10:05
@1Mher1 Use the length to get the last letter (really the length - 1)
1Mher1
@1Mher1
Apr 07 2018 10:05
@sjames1958gm but in this code above message i was shown you they dont read Capital letter for first
@sjames1958gm again last letter don't done capital
Stephen James
@sjames1958gm
Apr 07 2018 10:07
@1Mher1
text[i][text[i].length - 1].toUpperCase()
If text was an array of words
1Mher1
@1Mher1
Apr 07 2018 10:11
@sjames1958gm again don't worked(((( https://codepen.io/1Mher1/pen/KorvMY
Stephen James
@sjames1958gm
Apr 07 2018 10:12
@1Mher1 What kind of value is text?
1Mher1
@1Mher1
Apr 07 2018 10:12
fix value don't have they can be for example hello world hello mher
all firt and last letter should be capital
Stephen James
@sjames1958gm
Apr 07 2018 10:13
@1Mher1 What type is text (string, array, number)?
1Mher1
@1Mher1
Apr 07 2018 10:13
string
Matej Bošnjak
@mbosnjak01
Apr 07 2018 10:13
you can't use for loop
on a single string
i mean
yes
Stephen James
@sjames1958gm
Apr 07 2018 10:14
@1Mher1 A string doesn't have two dimensions so text[i][0] is an error
1Mher1
@1Mher1
Apr 07 2018 10:15
or[i] or [0] ? correct?
Stephen James
@sjames1958gm
Apr 07 2018 10:16
text[i] is only one letter, so text[i][0] is that same letter
1Mher1
@1Mher1
Apr 07 2018 10:16
what I was changed again don't worked((((((((
Stephen James
@sjames1958gm
Apr 07 2018 10:17
"string"[0][0]
"s"
"string"[0][1]
undefined
Matej Bošnjak
@mbosnjak01
Apr 07 2018 10:17
@1Mher1 this will work
document.getElementById("btn2").addEventListener("click", function(){
  var text = document.getElementById("txt2").value;
  text = text[0].toUpperCase() + text.substr(1); 
  console.log(text);
})
Stephen James
@sjames1958gm
Apr 07 2018 10:19
@mbosnjak01 No, the challenge is to change the first and last letter of each "word" in the string.
Matej Bošnjak
@mbosnjak01
Apr 07 2018 10:19
oh
Stephen James
@sjames1958gm
Apr 07 2018 10:19
@1Mher1 It is probably best if you change the string into "words" first
1Mher1
@1Mher1
Apr 07 2018 10:21
@mbosnjak01 your code only worked first capital but i must put in my textarea text first and last letters should shown me in console.log
capital
Matej Bošnjak
@mbosnjak01
Apr 07 2018 10:21
yes @1Mher1 , didn't realize it's a different challenge
1Mher1
@1Mher1
Apr 07 2018 10:23
@sjames1958gm in my chellange I must put all small letters than in console.log must first and last letter do capital
Stephen James
@sjames1958gm
Apr 07 2018 10:25
@1Mher1
You said for each "word", where in your code are you getting any "words"
1Mher1
@1Mher1
Apr 07 2018 10:27
correct code i can't write?
!
Stephen James
@sjames1958gm
Apr 07 2018 10:29
@1Mher1 Do you know how to split a string into an array?
1Mher1
@1Mher1
Apr 07 2018 10:32
@sjames1958gm yes
Stephen James
@sjames1958gm
Apr 07 2018 10:33
The first step should be a single string to an array of words?
Then for each word you can toLowerCase and change first and last toUpperCase
After convert array of words -> string
1Mher1
@1Mher1
Apr 07 2018 10:35
@sjames1958gm again Don't worked https://codepen.io/1Mher1/pen/KorvMY
Stephen James
@sjames1958gm
Apr 07 2018 10:37
Use console.log at each step to see what is happening
Practicing debugging is important
1Mher1
@1Mher1
Apr 07 2018 10:39
@sjames1958gm two steps i was debugged but capital don't worked
Stephen James
@sjames1958gm
Apr 07 2018 10:41
@1Mher1 What is the value of text[i] in the loop?
1Mher1
@1Mher1
Apr 07 2018 10:46
i number
Stephen James
@sjames1958gm
Apr 07 2018 10:49
text[i] use console.log to see if the value is what you expect
1Mher1
@1Mher1
Apr 07 2018 10:52
in for cycle when I was consoloded shown me each letter example I wrote fgh they consoled
f
g
h
when I consoled if loop fghj they show me first my wroten word than j
Stephen James
@sjames1958gm
Apr 07 2018 10:53
So text[i] is a letter not a word
1Mher1
@1Mher1
Apr 07 2018 10:53
exactly last letter understand but capital don't understand
@sjames1958gm So?
Stephen James
@sjames1958gm
Apr 07 2018 10:55
@1Mher1 capital is same as Upper Case
1Mher1
@1Mher1
Apr 07 2018 11:00
@sjames1958gm why don't worked uppercase
code looks like okay
Stephen James
@sjames1958gm
Apr 07 2018 11:04
@1Mher1 text is a string so
text[i] = text[0].toUpperCase()
won't do anything because you cannot change a string
1Mher1
@1Mher1
Apr 07 2018 11:41
@sjames1958gm again don't worked
Chris
@ConnectCodes
Apr 07 2018 11:52
:wave:
Stephen James
@sjames1958gm
Apr 07 2018 11:54
@ConnectCodes :wave:
Chris
@ConnectCodes
Apr 07 2018 11:56
@sjames1958gm how is it going?
Stephen James
@sjames1958gm
Apr 07 2018 11:56
@ConnectCodes good - a chilly morning, but the coffee is hot
Chris
@ConnectCodes
Apr 07 2018 12:00
@sjames1958gm hah coffee is a must, im trying to cut down though
Chris
@ConnectCodes
Apr 07 2018 12:07
@sjames1958gm floating points is such a weird thing in javascript, can’t get over it
Stephen James
@sjames1958gm
Apr 07 2018 12:27
It's just the nature of trying to store base 10 numbers in base 2
@1Mher1 If there was only one word in the input
text = text[0].toUpperCase() + text.substr(1, text.length - 2) + text[text.length - 1].toUpperCase()
Kudzu
@czhower
Apr 07 2018 13:50
@ConnectCodes Whats weird about floating points? There is a lot of weird stuff in JS, but AFAIK floating point is standard in JS.
Nate Mallison
@NJM8
Apr 07 2018 13:56
Can anyone give some feedback on my tictactoe game? https://www.natethedev.com/FreeCodeCampFrontEndProjects/ticTacToe/ The computer is fairly easy to beat, I haven't decided if I am going to make it harder or not
Kudzu
@czhower
Apr 07 2018 14:03
TicTacToe is so simplified that it has quickly reached limits on how hard you can make it.
Nate Mallison
@NJM8
Apr 07 2018 14:04
yeah, I would just add a check to try to block some of the good opening plays
abraham anak agung
@padunk
Apr 07 2018 14:06
@NJM8 nice simple design, it quite hard to beat it, but it work fine.
Will Foster
@Will5592
Apr 07 2018 14:14
Hi all, Just got onto the build a calculator challenge, coded up the HTML and CSS quickly and now am onto the JS. I want to do this without jQuery, but not really got any idea of where to start. I'd rather not follow a guide but feeling a bit lost as to where to start. I've made a few variables to store inputs and hopefully will output them, but does anyone have a suggestion/resource that might assist without providing the answer?
Johnny
@JohnnyBizzel
Apr 07 2018 14:44
@Will5592 From my experience I wish I would have started by using an array or object to handle the formula expression.
@Will5592 There are 2 elements to this challenge. One is obviously the mathematics, the other is making a nice layout.
@Will5592 As far as resources? The best would be to look and see how others have done it I guess. But you are encouraged not to do that. However, if you are really stuck I would take a look at some and find one you can understand.
Will Foster
@Will5592
Apr 07 2018 14:49
@JohnnyBizzel Thanks for your input, I'll try and bear these in mind. Here is my current progress... https://codepen.io/Will5592/pen/ZxmEBq.
CamperBot
@camperbot
Apr 07 2018 14:49
will5592 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1816 | @johnnybizzel |http://www.freecodecamp.org/johnnybizzel
Will Foster
@Will5592
Apr 07 2018 14:49
I think it looks alright, but obviously the JS is in it's very early stages
Johnny
@JohnnyBizzel
Apr 07 2018 14:50
@Will5592 Yes, it's a good start. Now work on the functionality. I was actually working on mine today. It still has bugs!
That's another thing. Don't spend too long fixing the bugs as you will hit many!
Will Foster
@Will5592
Apr 07 2018 14:53
@JohnnyBizzel Right ok, I'll try to get it working nicely but not obsess over issues then. It will need to work of course though
Johnny
@JohnnyBizzel
Apr 07 2018 14:54
@Will5592 The way I did mine, I have an onclick event on the buttons and when clicked I use the event handler to work out which button was pressed. Then I do a switch case on the possible key pressed and work from there.
Will Foster
@Will5592
Apr 07 2018 14:56
See I have forgotten what event handlers are... I need relearn them I guess
Johnny
@JohnnyBizzel
Apr 07 2018 14:57
lol
Will Foster
@Will5592
Apr 07 2018 14:58
is an event listener the same as an event handler?#
or rather, the function that happens as a result of the click
Johnny
@JohnnyBizzel
Apr 07 2018 15:01
@Will5592 I don't think so. The event listener is waiting for the event to happen. The handler will deal with the event.
Perhaps read up on events: https://www.w3schools.com/js/js_events.asp
Nate Mallison
@NJM8
Apr 07 2018 15:17
@Will5592 Take a look at language parsers. Basically what you want to make is something that will take the input and process the math. Now when you look them up they are really complicated. I took the approach of painstakingly making sure the input, or what the user entered is perfectly formatted. Made the parser very easy to write.
Will Foster
@Will5592
Apr 07 2018 15:20
@NJM8 Ok, in theory though, the formatting should already be ok? As the user can only input predefined things? (I.E. The buttons they press)
Kudzu
@czhower
Apr 07 2018 15:48
If its just math you want to do (cant find original post), look at RPN (Reverse polish notation)
Will Foster
@Will5592
Apr 07 2018 15:49
OP was at 15.14 today, basically just doing the FCC calculator challenge
Nate Mallison
@NJM8
Apr 07 2018 15:56
@Will5592 Yes but you have to protect the input. You can't let the user put in 55x9.09.88/-22-45.4.4.4
and how do you know in your parser if - is a negative or a minus symbol
Will Foster
@Will5592
Apr 07 2018 15:57
@NJM8 Oh god yeah ok, didn't even think of that. That adds a new layer of complexity :(
Kudzu
@czhower
Apr 07 2018 15:58
If you dont have to worry about order of operations, no RPN is needed and its a simple straight through parse.
Nate Mallison
@NJM8
Apr 07 2018 15:59
RPN looks cool, like the reverse of scheme. I kinda thought of doing it take way but came up with something different
@Will5592 no peeking, haha
Kudzu
@czhower
Apr 07 2018 16:04
@NJM8 Only had time for a cursory look, but code looks very clean. Much better than I see from students usually.

This is fine and nothing wrong with it, but you may consider using the new for of/in functions now in JS rather than the method based foreaches.

This is one fo the many duplicate things in JS I talked about earlier. The form you used is fine but the syntax is a bit wordier and some JS debuggers have trouble debugging this form or have side effects.

  buttons.forEach(button => button.addEventListener('mouseout', event => {
    unHighlightButton(event);
  }));
The new forms also dont require an anon func, and and so run a bit faster too.
Nate Mallison
@NJM8
Apr 07 2018 16:06
thank you, I appreciate that. I go a little overboard with the comments sometimes but I find it helps me refactor and smooth things out a bit
Kudzu
@czhower
Apr 07 2018 16:07
comments are good to use.
Christopher McCormack
@cmccormack
Apr 07 2018 16:07
@NJM8 Agreed, the comments are a little much :) one problem with too many comments is that if you change something and don't update the comments, none of your comments will be trustworthy. In my opinion if you can make at least some of the code speak for itself you shouldn't need comments in that section
Kudzu
@czhower
Apr 07 2018 16:08
seems like most devs go to the extremes, too many comments, or none at all. I comment but only things that need a "header" or explain something that I would forget if returning to the code months later.
No.....
As code gets more complex, comments are a MUST. Remember you guys are doing very simple baby steps right now, it doesnt stay this way in the real world.
Nate Mallison
@NJM8
Apr 07 2018 16:08
I have read a lot about comments and seem some great examples where you should be adding why something is there, not what it does, it should say what it does by good naming
  // get the input and execute it
function executeInput(event){
Christopher McCormack
@cmccormack
Apr 07 2018 16:08
Comments are a must but they should NOT be required for every line of code
Nate Mallison
@NJM8
Apr 07 2018 16:09
so that is probably not needed
Kudzu
@czhower
Apr 07 2018 16:09
A JS dev once told me he had worked on a huge project! I asked him how big, he said 20,000 lines..... thats nothing. In the real world projects are easily 500,000 lines or millions in many cases.
No, definitely not every line. Some unis used to teach almost that, and its horrid.
Nate Mallison
@NJM8
Apr 07 2018 16:09
yup, I'll be toning it down over time
Kudzu
@czhower
Apr 07 2018 16:10
Example of when I comment...
```
protected Render(): void {
  // Do cell changes before super call.
  // Is null first pass, but will still cause !== to eval to true
  if (this._LastOrientation !== this.Orientation.Value) {
    this._LastOrientation = this.Orientation.Value;

    const xInline = this.Orientation.Value === Orientation.Horizontal;
    for (const xCell of this.GetAllCells()) {
      (xCell as CellNone).Inline.Value = xInline;
    }
  }

  super.Render();
}
```
Christopher McCormack
@cmccormack
Apr 07 2018 16:10
And that's all I'm saying - for example a small while loop that has descriptive variables may be able to have a summary comment above, and only need comments within if a particular line of code may be confusing
Kudzu
@czhower
Apr 07 2018 16:10
The comment is there to prevent a bug. In fact there was a bug, it was fixed, but commented to ensure it doesnt become a roach and creep back in.
Nate Mallison
@NJM8
Apr 07 2018 16:10
// initialize name var
let name =  'Nate';
great comment right there. hahah
Kudzu
@czhower
Apr 07 2018 16:10
ie I comment exceptions to rules, or complex code which the function may not be readily apparent.
Christopher McCormack
@cmccormack
Apr 07 2018 16:11
Right @NJM8 that line already speaks for itself
But you may want to comment around the context of that line and what it's used for
@czhower agreed
Those are preferred IMO instead of .foreach for the reasons I explained prior.
Christopher McCormack
@cmccormack
Apr 07 2018 16:12
for of is great
Nate Mallison
@NJM8
Apr 07 2018 16:13
@czhower My logic for the calculator parser is to take the input (which is perfectly clean), split it into an array, make another array where the elements match the PEMDAS order of the input (0 for numbers), then recursively process the arrays by higher precedence. I'm sure it isn't efficient but the idea is simple as long as the input is clean.
Kudzu
@czhower
Apr 07 2018 16:13
Its usual in coding to make it work first, and then incrememntally improve it after.
Will Foster
@Will5592
Apr 07 2018 16:14
Is using html "onclick" event handlers considered bad practice? Should I be trying to go down the route of doing everything in my JS files and targeting elements like that, rather than calling functions based on html onclicks?
Christopher McCormack
@cmccormack
Apr 07 2018 16:14
@Will5592 I would recommend the latter
Kudzu
@czhower
Apr 07 2018 16:15
its really up to you, but putting it in code keeps it on one place and is easier to follow so its better in most cases.
Christopher McCormack
@cmccormack
Apr 07 2018 16:15
I"m not sure if the former is bad practice though, but it does limit you
Kudzu
@czhower
Apr 07 2018 16:15
using addevent allows multiple handlers, onclick = does not.
Will Foster
@Will5592
Apr 07 2018 16:16
Right, so really I should be targeting things in my JS file with queryselectors, getelementsbyclassname etc.
Nate Mallison
@NJM8
Apr 07 2018 16:16
I prefer targeting in JS, more flexible. I'm not sure can you remove an onclick?
Kudzu
@czhower
Apr 07 2018 16:16
yes you can.
Christopher McCormack
@cmccormack
Apr 07 2018 16:16
you may be able to if you target it in js
Kudzu
@czhower
Apr 07 2018 16:16
if with addhandler you use remove hadnler, if onclick =, Id have to check bgut I thik you can set it to an empty value to clear it.
Nate Mallison
@NJM8
Apr 07 2018 16:16
makes sense
Kudzu
@czhower
Apr 07 2018 16:17
Thats the norm, but of course JS has a lot of stupid issues in it so Id have to double check the latter.
Christopher McCormack
@cmccormack
Apr 07 2018 16:17
that's actually a pretty fun question to go research - how JS adds listeners vs adding it to the element
Kudzu
@czhower
Apr 07 2018 16:18
its done the same internally, its juyst there is no += for events like in C# etc.. so = always overrides, while addevent allows multiple.
as far as I know anyway... as I said JS does so many weird things that one can never fully assume norms with JS.
I mean who else says Dec is 11?
Nate Mallison
@NJM8
Apr 07 2018 16:19
@czhower
  for (let button of buttons) {
    button.addEventListener('mouseout', unHighlightButton);
  }
like so?
Christopher McCormack
@cmccormack
Apr 07 2018 16:20
unHighlight? There must be a better word for that haha
although I can't think of it...
Nate Mallison
@NJM8
Apr 07 2018 16:20
yes I realized I shouldn't use anonymous functions in there, I'm not sure why I thought I needed it to pass the event through to the handler it comes through without. And as I found in my tictactoe game you can't remove an event listener if its added anonymously.
why not? the opposite is highlightButton
it's for adding classes for styling
Christopher McCormack
@cmccormack
Apr 07 2018 16:21
@NJM8 no just saying there must be a good antonym for highlight
Nate Mallison
@NJM8
Apr 07 2018 16:22
oh true
Christopher McCormack
@cmccormack
Apr 07 2018 16:22
hmm why use JS for highlight instead of just hover with CSS? just curious
Nate Mallison
@NJM8
Apr 07 2018 16:23
I wouldn't use it though, i like to keep the names similar, so when you see the function unHighlightButton you instinctively know it's the opposite of highlightButton
my calculator buttons are little more complex, I guess it could be done with just CSS, but i'm not as good at it
Christopher McCormack
@cmccormack
Apr 07 2018 16:25
In my head I instinctively think there must be a better way to do that without adding an unHighlightButton method
Nate Mallison
@NJM8
Apr 07 2018 16:25
The css styles for the buttons are 80 lines
Kudzu
@czhower
Apr 07 2018 16:26
@NJM8 yes. See how its cleaner looking? Plus the other advantages.
you can use const instead of let
Nate Mallison
@NJM8
Apr 07 2018 16:26
I guess active styling would've worked. I didn't really know much about it..... last week when I made it. :smile:
@czhower I do thanks
CamperBot
@camperbot
Apr 07 2018 16:26
njm8 sends brownie points to @czhower :sparkles: :thumbsup: :sparkles:
:cookie: 102 | @czhower |http://www.freecodecamp.org/czhower
Christopher McCormack
@cmccormack
Apr 07 2018 16:27
@NJM8 oh I see you're adding/removing classes
Nate Mallison
@NJM8
Apr 07 2018 16:27
ya
Christopher McCormack
@cmccormack
Apr 07 2018 16:28
@NJM8 there is a way to add CSS when the mousedown happens, I think it's like active and focus at the same time, let me check
Nate Mallison
@NJM8
Apr 07 2018 16:28
I think button:active probably wouldv'e worked. But I'm not great with CSS so my mind always says, make a class and add it with JS
Christopher McCormack
@cmccormack
Apr 07 2018 16:28
I actually learned it for my calculator so it may help
I used this:
.calc-btn:active,
.calc-btn:focus {
  box-shadow: inset 2px 2px 10px rgba(0,0,0,0.9);
  transform: translateY(4px);
}
looks ok
Nate Mallison
@NJM8
Apr 07 2018 16:29
I actually named the class buttonActive so I could just change it easily to test
Christopher McCormack
@cmccormack
Apr 07 2018 16:31
@NJM8 dangit now that you have me looking at my calculator I found a bug :D
Nate Mallison
@NJM8
Apr 07 2018 16:32
hahha
hey it works, now I can strip out all that JS
ugh, calc input bugs took me like 3 days
Christopher McCormack
@cmccormack
Apr 07 2018 16:34
@NJM8 that was truly one of the harder exercises - if I had been smarter I would have added a testing framework to test all my functions as I went
Nate Mallison
@NJM8
Apr 07 2018 16:36
I can't say I didn't break some fixes with other fixes. I generally dislike my input function, huge block of if statements with tons of boolean flags to make sure you can't input funny stuff
Christopher McCormack
@cmccormack
Apr 07 2018 16:39
@NJM8 My coding process is write some code > look at code and vomit > think of better way to write code while in shower > forget by the time I get back to my laptop
Nate Mallison
@NJM8
Apr 07 2018 16:41
sounds functional
Christopher McCormack
@cmccormack
Apr 07 2018 16:42
it's worked so far!
Will Foster
@Will5592
Apr 07 2018 17:20
Does anyone know how to append to inner html? Currently, everytime a button is pressed on my calculator, the innerhtml of my display div (screen) is being overwritten. I want to display every button press, so '1' then '2', becomes '12' rather than just '2'...
Mel Macaluso
@MelMacaluso
Apr 07 2018 17:21
give codepen
and we can have a look :)
It's not finished yet
Mel Macaluso
@MelMacaluso
Apr 07 2018 17:23
try += instead?
anyway I wouldn't do it like this, I will grab it after the user presses an operation
eg. user writes "1234" then grab it as soon as he presses "x"
Will Foster
@Will5592
Apr 07 2018 17:25
Yeah ok, but I was hoping to display the users button presses as well
Mel Macaluso
@MelMacaluso
Apr 07 2018 17:26
yeah my statement is not incompatible to what you just wrote :joy:
Kudzu
@czhower
Apr 07 2018 17:26
@Will5592 innerhtml = innerhtml + ....
or use children and add new spans.
Will Foster
@Will5592
Apr 07 2018 17:26
Thanks both, the innerHTML += worked, I just didn't think it would be that easy
Kudzu
@czhower
Apr 07 2018 17:27
Its slower, but for small things not worth worrying about. Can have impact when many elements in it.
Will Foster
@Will5592
Apr 07 2018 17:27
Ah ok, thanks
Kudzu
@czhower
Apr 07 2018 17:28
Many elemetns cause a big DOM reflow, thus in such cases better to use children and add a span.
Will Foster
@Will5592
Apr 07 2018 17:30
Do you think a switch statement would work here? So, I do something based on what is pressed? E.G. a number is pressed, append to current input. If an operator is pressed, remember that and then apply it when another number is inputted?
Christopher McCormack
@cmccormack
Apr 07 2018 17:32
@Will5592 you could use a switch, sure. I used just a bunch of if statements:
...
  if (buttonName == "clear") { 
    clearButtonPress(); 
  } else if (buttonName == "del") { 
    backspaceButtonPress(); 
  } else if (buttonName == "digit") { 
    digitButtonPress(buttonVal); 
  } else if (buttonName == "op") { 
    opButtonPress(buttonVal); 
  } else if (buttonName == "convert") {
    convertValue(text, conversions[buttonVal]); 
  } else if (buttonName == "eq") { 
    eqButtonPress(); 
  }
...
but this was a long time ago and I would probably do it differently now :D
Kudzu
@czhower
Apr 07 2018 17:36
ifs in many cases visually are cleaner and less prone to bugs creeping in. Just depends on the needs. I use switch, but I tend to prefer if. If its in a loop or a very large list, switch can be faster but not noticable in most cases.
you could also use an object and scan the keys and then have values as function ptrs.
no need to scan
just myfuncsbuttonName, js does the look up for you.
ug gittter killed formating.. like this:
myfuncs[buttonName](buttonVal);
Kudzu
@czhower
Apr 07 2018 17:46
let myfuncs: any = new object();
myfuncs.clear = clearButtonPress;
or if with params then use anon funcs to assign.
Christopher McCormack
@cmccormack
Apr 07 2018 17:48
@czhower what syntax is that? Doesn't work for me in node
let myfuncs: any = ...
Kudzu
@czhower
Apr 07 2018 17:48
TS from my head, JS may differ slightly or since I just did it adhoc it may have minor syntax errors, prob dont need the :any in JS
Christopher McCormack
@cmccormack
Apr 07 2018 17:48
Ah ok
Kudzu
@czhower
Apr 07 2018 17:49
in JS IIRC itgs just let myfuncs = new object();
Ive been doing JS since 95 when it appeared, but now am 100% TS so my brain tends to remember that now.
Christopher McCormack
@cmccormack
Apr 07 2018 17:49
Object
Will Foster
@Will5592
Apr 07 2018 17:49
What does myfuncs button name buttonval do? (Sorry for formatting I'm on my phone). I get the brackets bit is the arguments for the function but the square brackets?
Christopher McCormack
@cmccormack
Apr 07 2018 17:50
Square brackets is a property lookup on an object
Kudzu
@czhower
Apr 07 2018 17:50
it does a member lookup from a non literal.
Christopher McCormack
@cmccormack
Apr 07 2018 17:50
it can be used when you are using a variable or a string instead of the actual property name
Kudzu
@czhower
Apr 07 2018 17:50
not just props, member. Not all members are props. Some are fields, some are funcs.
Christopher McCormack
@cmccormack
Apr 07 2018 17:51
@czhower Do you have any examples of some that are members but not props?
@Will5592
> var object = { 'a': 'apple', 'b': 'banana' }
> object
{ a: 'apple', b: 'banana' }
> object.a
'apple'
> object['a']
'apple'
> object[a]
undefined
> var test = 'a'
> object[test]
'apple'
> object.test
undefined
Kudzu
@czhower
Apr 07 2018 17:51
functions
Will Foster
@Will5592
Apr 07 2018 17:51
Oh right so it's feeding in the property lookup and the args?
Kudzu
@czhower
Apr 07 2018 17:51
fields
args go in the (), member name in []
Will Foster
@Will5592
Apr 07 2018 17:52
Yeah ok cool
Kudzu
@czhower
Apr 07 2018 17:53
functions and fields are members, but not props. At least according to std CS terminology.
Christopher McCormack
@cmccormack
Apr 07 2018 17:53
@czhower I'm not sure I'm following the distinction, are you saying something like Object.log = console.log log would not be a property?
Kudzu
@czhower
Apr 07 2018 17:53
thats a field in CS terminology.
props have getters or setters.
from C#, but std among every other lang Ive used (dozens)
"Fields are ordinary member variables or member instances of a class. Properties are an abstraction to get and set their values. Properties are also called accessors because they offer a way to change and retrieve a field if you expose a field in the class as private."
Christopher McCormack
@cmccormack
Apr 07 2018 17:54
in CS wouldn't they be attributes not properties?
Kudzu
@czhower
Apr 07 2018 17:55
no.... attributes are totally different
Christopher McCormack
@cmccormack
Apr 07 2018 17:55
I'm not even sure if there is a standard for all these terms over all
Kudzu
@czhower
Apr 07 2018 17:55
Attributes mark a member, and they are not members.
There is
When 99% of langs do the same thing, its pretty much a standard even if ECMA or someone didnt write it down as such.
well no surprise here... lokos like JS agin screws norms:
so in JS they are both props, but thats not how it is normally.
so JS uses the word propery where nearly everyone else uses member, and property is different in the other places too.
Christopher McCormack
@cmccormack
Apr 07 2018 17:57
I believe it's because HTML already has attributes that mean something a bit different
Kudzu
@czhower
Apr 07 2018 17:57
JS is necessary for FE dev, but this is one reason it sucks as a first language, it teaches so many bad habits and poor terminology.
Christopher McCormack
@cmccormack
Apr 07 2018 17:58
@czhower what is a Field in this context?
Kudzu
@czhower
Apr 07 2018 17:59
in normal CS parlance, a field is a variable that is part of a class, a property has a getter or setter and is not a raw access to the value.
yes, thats generic field. I was talking about field within OOP context.
Christopher McCormack
@cmccormack
Apr 07 2018 18:00
So a Class instance variable is a field
Kudzu
@czhower
Apr 07 2018 18:00
but field in OOP is just a contexualized extension of that link definition.
yes.
Christopher McCormack
@cmccormack
Apr 07 2018 18:00
I guess that makes sense if I visualize it as a table
Kudzu
@czhower
Apr 07 2018 18:00
but you can have static fields in many langs too, its in instance var but on a static class.
Christopher McCormack
@cmccormack
Apr 07 2018 18:00
tables are about the only place I use the term field
So what is a property outside of JS?
Kudzu
@czhower
Apr 07 2018 18:01
its commmonly used in OOP langs, from C#, C++, VB.NET, Java, Delphi...
a property is when it uses a get or set to accesss it.
or some langs like delphi have a property keyword.
Christopher McCormack
@cmccormack
Apr 07 2018 18:02
you can use a get or set on an instance variable
so is a property a field in that context or am I missing a piece?
Kudzu
@czhower
Apr 07 2018 18:03
var obj = {
  log: ['a', 'b', 'c'],
  get latest() {
    if (this.log.length == 0) {
      return undefined;
    }
    return this.log[this.log.length - 1];
  }
}
in standard CS parlance, that makes it a prop. Becasue it has a get and/or set and access is via a func, not direct access to the raw value.
prop, not field ^
will edit
log is a field, latest is a prop in standard usage.
JS might be using implicit get/sets for fields underneath, but thast impl and thats not waht defines it normally but instead the code written.
var obj = {
  _log: number;
  get log() {
     return this._log;
  }
}
in that case, _log is a field (called a backing field in this case), and log is a prop.
"things" of an object are members and include props, fields, methods (functions of an object)
also props can be indexed, fields cant:
{get expression { ... } }
ugh.. gitter agian.. jsut sec
{get [expression]() { ... } }
Christopher McCormack
@cmccormack
Apr 07 2018 18:08
so in these examples latest and log are not considered methods/functions but props?
Raghav Sharma
@raghav4
Apr 07 2018 18:08
Hello Guys , i am working on a project which is nothing but a website portal for my college. I wanted to know how can i let only selected student to access the website. I don't want my website content visible to everyone
Kudzu
@czhower
Apr 07 2018 18:08
to index a field, you are indexing the value of the field itself, not the field.
@raghav6 if you are using apache you can set up rules in .htaccess, logins, etc...
or you can setup a login scheme but you'd need BE code to validate it unless you do it in the FE, btu then someoen cuold look at source and bypass.
Raghav Sharma
@raghav4
Apr 07 2018 18:11
Oh @czhower basically i am working on a college society project we guys are making a portal where we do provide students with resources but we do not want every student to see it.
Kudzu
@czhower
Apr 07 2018 18:11

@cmccormack latest is a prop, log is a field. JS calls them both props, but its not really proper.

functions have code. fields dont.

props themselves dont have code, but they use functinos as their getter and setter to help define the property but are not the prop itself.

Raghav Sharma
@raghav4
Apr 07 2018 18:11
So, what can help us for that?
Kudzu
@czhower
Apr 07 2018 18:12
a method is just terminology to separate non object functions from object functions in langs that support both. C# for example has no non object functions, everything is on an object.. but they are still called methods to be standard terminology.
Christopher McCormack
@cmccormack
Apr 07 2018 18:12
@raghav6 You can setup a backend server to handle authorization/authentication
Kudzu
@czhower
Apr 07 2018 18:13
method = object function - and in such langs function without qualifier usually means a non object function, but of course depends on context.
Christopher McCormack
@cmccormack
Apr 07 2018 18:13
@czhower I thought they were methods if they ARE on an object
Kudzu
@czhower
Apr 07 2018 18:13
yes, exactly. and object function.... a functino that exists on an object.
Christopher McCormack
@cmccormack
Apr 07 2018 18:13

ok this part confused me then

but they are still called methods to be standard terminology.

why wouldn't it be called a method if they are all objects
Kudzu
@czhower
Apr 07 2018 18:14
my point there was that C# ONLY allows functinos on methods.. you cannot declare a function in C# that is NOT on on object as you can in most langs. BUT they still call them methods and not functions to be consistent with other langs that can do non object based funcs.
Christopher McCormack
@cmccormack
Apr 07 2018 18:15
I see
Kudzu
@czhower
Apr 07 2018 18:15
well technically tehre is an exception - anon funcs in C#.... those are not techinically part of an object.
Christopher McCormack
@cmccormack
Apr 07 2018 18:15
hold on reading some more of your responses to make sure I"m clear :)
Kudzu
@czhower
Apr 07 2018 18:15
but you cant delcare global funcs like in C++, Delphi, etc.
(C# ^)
Christopher McCormack
@cmccormack
Apr 07 2018 18:17
IIRC Java was similar, you would instead make a helper static class or whatever if you just needed a function that did one thing and did it well
Kudzu
@czhower
Apr 07 2018 18:18
IIRC Java is same. .but its been nearly 15 years since I did Java.
Java is very capable, just not my cup of tea for a variety of reasons.
Christopher McCormack
@cmccormack
Apr 07 2018 18:19
I thought C# was basically cloned from Java to use with .net
Kudzu
@czhower
Apr 07 2018 18:19
No.....
Christopher McCormack
@cmccormack
Apr 07 2018 18:20

So in this example:

const myObj = {
   str: 'some text',
   add: function(a,b) { return a+b; }
}

would you consider str to be a field and add to be a method?

Kudzu
@czhower
Apr 07 2018 18:21

C# is based on C++ a bit, as is Java. .NET was to counter Java, but is not a clone by any means. .NET is heavily influenced by Delphi and C# is a bit too.

Anders did TS, C#, .NET and before that Delphi. I know him from the Delphi days, we both worked for Borland (I was never FTE though, but contracted and wrote significant pieces).

And I met him a few times when I worked at MS.
@cmccormack add has code. in CS parlance, both are members. str is a field (prop in JS), add is a method (function).
str has no code... add does. you might say using JS terminology that add is a prop which holds a func ptr, buit thats not a std way to think about it in std practice.
so in JS, rememeber - what everyone else calls a member, JS calls a prop.
Christopher McCormack
@cmccormack
Apr 07 2018 18:24
Haha that's pretty much how I had it abstracted in my head but I'm glad to get some better understanding of what is what
Thank you ver much @czhower!
CamperBot
@camperbot
Apr 07 2018 18:24
cmccormack sends brownie points to @czhower :sparkles: :thumbsup: :sparkles:
Stephen James
@sjames1958gm
Apr 07 2018 18:24
@cmccormack realize that all functions in js are defined on some object. I
CamperBot
@camperbot
Apr 07 2018 18:24
:cookie: 103 | @czhower |http://www.freecodecamp.org/czhower
Kudzu
@czhower
Apr 07 2018 18:24
@sjames1958gm yes, as I said with window, but its implicit.
so up for debate in that case, kind of a grey area.
Christopher McCormack
@cmccormack
Apr 07 2018 18:26
So all functions are members of an Object that can be accessed using the property name and the value is a pointer to the function code
Do I have most of that correct?
Stephen James
@sjames1958gm
Apr 07 2018 18:27
I would use the term reference when speaking of javascript
Christopher McCormack
@cmccormack
Apr 07 2018 18:28
Agreed @sjames1958gm just trying to generalize it outside of JS a bit
Kudzu
@czhower
Apr 07 2018 18:28
well in JS yes. But few langs implement methods that way. JS does it becuase it was designed to be simple - thats one of the few things in JS thats pretty cool actually. Well cool when you need simplicity.. not so cool in a bigger more complex scope.
Stephen James
@sjames1958gm
Apr 07 2018 18:28
@cmccormack ah ok
Kudzu
@czhower
Apr 07 2018 18:29
In most other langs methods are not function pointers stored in props. They have similar but they are called events, delegates ptrs, or a few other terms.
Christopher McCormack
@cmccormack
Apr 07 2018 18:29
How exactly do lambda functions/anon functions fit in in OO only languages
Kudzu
@czhower
Apr 07 2018 18:29
same as they do in JS.
Christopher McCormack
@cmccormack
Apr 07 2018 18:29
I mean in the terminology
would they still be methods of the object?
Kudzu
@czhower
Apr 07 2018 18:29
JS copied them from other langs, the look a lot like C# and C# probably borrowed them as well from somewhere.
not really.. they arent methods. They are usually just called anon funcs.
they may exist as an instance in the object, but they are not part of the object.
definitely not a method.
alpox
@alpox
Apr 07 2018 18:31
@cmccormack they are used to declare inline functions which are not tied to a class most of the time. In that cases they are not called methods.
Kudzu
@czhower
Apr 07 2018 18:31
Often used for events too, or lambdas.
or as arguments to functions (as is common in JS)
JS anon functs are VERY similar to C#.
Christopher McCormack
@cmccormack
Apr 07 2018 18:33
I very much appreciate the detailed explanations @czhower @sjames1958gm @alpox ! Always good to refine our understandings and be more accurate in what we tell others. thanks!
Kudzu
@czhower
Apr 07 2018 18:34
anytime
Withotu getting political, JS is the Trump of the coding world. But its here, and we have to deal with it. WASM in a few years will displace JS and make it the modern COBOL but WASM will run JS as well so it will be around for a while legacy wise but once WASM is ready people will flock to elm, python and others.
WASM isnt ready for primetime yet though.
Christopher McCormack
@cmccormack
Apr 07 2018 18:36
hmm so will languages like Python and Java be able to create a WASM "bytecode" that will be readable in the browser?
Kudzu
@czhower
Apr 07 2018 18:36
yep! no more need to crosscompile to JS.
and not hjsut those.. but C# etc.. LLVM already supports WASM in fact.
Christopher McCormack
@cmccormack
Apr 07 2018 18:37
Maybe it's time I start reading up on it :)
Kudzu
@czhower
Apr 07 2018 18:37
Latest FF already has WASM built in, but WASM still has some evolving to do especially around integration with JS and even DOM to be ready for prime time.
And there is a js impl of wasm even for other browsers.
thats been around for a while now.
Christopher McCormack
@cmccormack
Apr 07 2018 18:40
Maybe I"ll take a crack at doing some python work with WASM and jump on the bandwagon while it's still early lol
It's pretty cool though I look forward to seeing what can be done with WASM
I REALLY hope security is a major focus
Kudzu
@czhower
Apr 07 2018 18:54
WASM is like a JVM or .NET in the browser. WASM is not to far off of what LLVM uses, or even x86. Designed to be easy to output too.
a base x86 or any ML... not wtih the advanced ops.....
like simple ARM assembly with some higher level concepts added.
and thus it also compiles to machine code VERY fast.
eventually browsers will turn their JSVMs to run on wasm to run "loose" JS as we do today.
so JS will still run "as is", but on top of WASM instead. And when WASM is there, then we are not locked into JS anymore as the lingua franca at the point of a gun.
Kudzu
@czhower
Apr 07 2018 19:00
It will also help some with code protection as we wont have to send source into the browser anymore. Even for JS will be able to send WASM byte code. sure it can be decompiled, but a lot is lost in a decompile which creates a fair obstacle to most users.
Christopher McCormack
@cmccormack
Apr 07 2018 19:03
Kind of sucks for us that are so familiar with being able to see all the code but at least there's plenty of open code on different sites like github
Kudzu
@czhower
Apr 07 2018 19:04
people will still distribute code on GH, just as they do for open source projects in other langs. Its just about what goes to the browser and ability for commercial and other code to hide it better.
Christopher McCormack
@cmccormack
Apr 07 2018 19:06
I wonder why bother now when you can just run that on the server
Oh well :) I have to get running to see Ready Player One, have a great rest of the day and thanks for all the info!
Kudzu
@czhower
Apr 07 2018 19:07
Running on client reduces network traffic and distributes loads. Its the main frame model all over again, but few realize this.
FE devs are the modern equivalent of mainframe form painters.
Kudzu
@czhower
Apr 07 2018 19:20
We have a commercial product that goes back 22 years and in version 17 we are using TS to move a LOT of rendering code into the browser and its maknig huge gains in reducing server load when there are many users.
Ayush Bahuguna
@relentless-coder
Apr 07 2018 19:30
  function orderComplete(socketio, localSockets){                                                        
   return async function(data) {                                                                                                                                                                    
          try {                                                                                          
              const order = await Order.find({_id: data});                                               
              order.produced += order.quanity*1                                                          
              await order.save();                                                                        
              localSockets.forEach(el => socketio.to(el).emit('orderUpdated', `${_id}`));                
          }catch (err){                                                                                  
              console.log(err);                                                                          
          }                                                                                              
      }                                                                                                  
  }
Hello people, is this a wrong way to use async/await ?
Kudzu
@czhower
Apr 07 2018 19:34
are yoy getting errors? I dont use the async stuff much as its largely castrated, but off hand doenst the outer func need an async modifier too?
Ayush Bahuguna
@relentless-coder
Apr 07 2018 19:34
my eslint is throwing error, unexpected token function
Kudzu
@czhower
Apr 07 2018 19:36
try pyutting async before the first function as well, async funcs can only be called from other async funcs.
and offhand I dont think you need it after the return as well.
async is a decl modifier, not a call modifer AFAIR
async  function orderComplete(socketio, localSockets){                                                        
   return function(data) {                                                                                                                                                                    
          try {                                                                                          
              const order = await Order.find({_id: data});                                               
              order.produced += order.quanity*1                                                          
              await order.save();                                                                        
              localSockets.forEach(el => socketio.to(el).emit('orderUpdated', `${_id}`));                
          }catch (err){                                                                                  
              console.log(err);                                                                          
          }                                                                                              
      }                                                                                                  
  }
Ayush Bahuguna
@relentless-coder
Apr 07 2018 19:37
i think it's my eslint acting up, since it throws the same error when I use it on the outer function
Kudzu
@czhower
Apr 07 2018 19:37
didnt check that, thats just off the top of my head, and remember I dont use asyncs much in JS
eslint is pretty accurate.
did you also remove it after the return?
Ayush Bahuguna
@relentless-coder
Apr 07 2018 19:37
yes
Kudzu
@czhower
Apr 07 2018 19:38
do you have a simple otherwise ready to run sample in codepen?
await just says that "Im calling an async function, but I want to wait for it"
Ayush Bahuguna
@relentless-coder
Apr 07 2018 19:39
i mostly use async, and have used in the same code base wherever required, but eslint throws error with this particular piece of code
Kudzu
@czhower
Apr 07 2018 19:40
otherwise it queues the call, but since JS has no threads, you end up with cooperative single threaded multitasking. witout inter communicatino like even 16 bit apps have... JS has yet to catch up with other languages in the Win 3.0 world in this regard :(
maybe its otehr... does it give you a line number? Can you reduce it down to a simple example?
that is otherwise ready to test?
I have to go out for about 2 hours. If noone else responds, bring it down to a minimal ready to run example in codepen and I can look at it when I get back.
(ready to run other than the error you are encountering)
Ayush Bahuguna
@relentless-coder
Apr 07 2018 19:43
I tried the same thing with the example provided in mozilla's website, in the editor itself, I turned the asyncCall to an anonymous function, then wrapped it inside a function. It works
jusgoose
@gusd773
Apr 07 2018 20:31
no rush to answer this but if anybody can help me in private chat it concerns "php artisan migrate" translation from mac to windows in regards to laraval via the terminal; it's in this tutorial I am doing that the instructor suggested to check if the installation worked out but I received an error. I am a newbie to the command prompt to read that stuff just yet
Adel
@AdelMahjoub
Apr 07 2018 20:58
Here they are :fire: those easing functions http://robertpenner.com/easing/
jusgoose
@gusd773
Apr 07 2018 21:01
blob this is what it spits back
Adel
@AdelMahjoub
Apr 07 2018 21:03

it started out by "rewriting the wheel" :laughing:

-- Normalization
-- Taking a range of values and a value withinh that range
-- and converting that value to a number between 0 to 1
-- that indicate where the value lies within that range
-- @param<number> value
-- @param<number> min
-- @param<number> max
-- @return<number>
utils.norm = function(value, min, max) 
    return (value - min) / (max - min)
end

-- Liner interpolation, is the exact opposite of normalization
-- we start with a range and a normalized value
-- and it will return the value in that range that the normalized value points to
-- @param<number> norm: normalized value
-- @param<number> min
-- @param<number> max
-- @return<number>
utils.lerp = function(norm, min, max)
    return (max - min) * norm + min
end

-- @param<table{x<number>, y<number>}> p0: first end point 
-- @param<table{x<number>, y<number>}> p1: control point
-- @param<table{x<number>, y<number>}> p2: last end point
-- @param<number> t: normal value
-- @return <number> xFinal, yFinal
utils.quadraticBezier = function(p0, p1, p2, t)
    -- local x = utils.lerp(t, utils.lerp(t, p0.x, p1.x), utils.lerp(t, p1.x, p2.x))
    -- local y = utils.lerp(t, utils.lerp(t, p0.y, p1.y), utils.lerp(t, p1.y, p2.y))
    local x = math.pow(1 - t, 2) * p0.x + (1 - t) * 2 * t * p1.x + t * t * p2.x
    local y = math.pow(1 - t, 2) * p0.y + (1 - t) * 2 * t * p1.y + t * t * p2.y
    return x, y
end

But the duration was missing, and then miracle ! found those functions, now I can rest in piece :laughing:

kyle-kauzlarich
@kyle-kauzlarich
Apr 07 2018 21:20
hey could anyone help point me in the right direction in react for what im trying to do?
i have a component maping over some data that i set to state but in that data i have a link for the world im trying to send that link as a prop to a new class component and using componentDidMount trying to fetch the data from it mount it to the state then pull it down from the state and display it
Stephen James
@sjames1958gm
Apr 07 2018 21:35
@kyle-kauzlarich Seems reasonable, what is the issue?
kyle-kauzlarich
@kyle-kauzlarich
Apr 07 2018 21:50
@sjames1958gm the issue im running into is when render runs the first time before componentDidMount gets to do its magic it errors out since this.state.links is undefined until the mount
Stephen James
@sjames1958gm
Apr 07 2018 21:51
@kyle-kauzlarich Since you are doing async in your componentDidMount, your component should handle the case of no data. Until the async resolves
kyle-kauzlarich
@kyle-kauzlarich
Apr 07 2018 22:19
thanks i got it working more than it was my link data was wrong so the fetch was not getting the right format