These are chat archives for FreeCodeCamp/HelpJavaScript

25th
May 2018
Mike Haslam
@Ongomobile
May 25 2018 04:05

I am new to React Native but do have some experience with React and Javascript.

I am building an RN app that I need the users to be able to use offline.

My Question is about image source files that are part of the UI of the app should they referenced locally in the app or can they be brought in by an API or CDN. Or persisted somehow.
What would be best practice so they could be available offline

Thanks, Mike Haslam

ArchivalBoat50
@ArchivalBoat50
May 25 2018 04:08
@czhower @JLuboff Sorry I didn't respond, I was at school
Could someone help me understand what a callback function is? I couldn't quite understand what it is after reading the documents.
Brad
@bradtaniguchi
May 25 2018 04:17
@ArchivalBoat50 A callback is usually an argument provided to a function that the function can call later. So think in real life, if your "busy" and someone calls you on your phone, they leave a callback number. (forget about caller id hehe) Once your finished, you can call that number. Same idea goes behind callbacks/promises/async await
The key insight is javascript doesn't "wait", in that it can perform some task, say make an http request to some server, and setup a callback to call once the server returns a response. In the mean time it will go handle other things.
Even if the server takes 5 seconds, or hell forever, the callback will just sit and wait until its required. This pattern is used a lot, as there are many possible "async" tasks
eptro
@eptro
May 25 2018 04:26
Hey guys! I was working on the Stand in Line problem fCC and despite getting the desired output, it is not letting me move on
I set up the line to test to mirror what one of the challenges asked for and get the same output on my console but its not recognizing it as correct.
Wait I found my problem sorry everyone!
ArchivalBoat50
@ArchivalBoat50
May 25 2018 04:36
@bradtaniguchi So it's a function passed in as an argument in another function?
Brad
@bradtaniguchi
May 25 2018 04:39
@ArchivalBoat50 yes that's part of it, but thats not what makes a callback a callback, since functions could represent an object or something
ArchivalBoat50
@ArchivalBoat50
May 25 2018 04:42
@bradtaniguchi Could you give me some simple examples to help me understand?
Brad
@bradtaniguchi
May 25 2018 04:45
@ArchivalBoat50 Something like setTimeout is a good example:
setTimeout(function() {
    console.log('hello world!');
}, 2000)
The setTimeout function takes 2 arguments, a "callback" and a number.
ArchivalBoat50
@ArchivalBoat50
May 25 2018 04:47
So the callback function logs "hello world" and the number is the the amount of time to be set? @bradtaniguchi
Brad
@bradtaniguchi
May 25 2018 04:48
Yes, the callback could be any function
You could write the same thing like this aswell:
function myCallback() {
   console.log('hello world');
}

setTimeout(myCallback, 2000); // notice how there's no ()
Bjorn van de Peut
@bjorno43
May 25 2018 04:48
In very simple words: A callback function is telling another function to perform the "callback function" when it's done. So the setTimeout function is told to wait 2 seconds and when it's done, perform the callback function
Well technically it's told to count down from 2000 milliseconds and then perform the callback function, but ok
Brad
@bradtaniguchi
May 25 2018 04:51
yea cmon get it right :P
ArchivalBoat50
@ArchivalBoat50
May 25 2018 04:53
@bjorno43 @bradtaniguchi Ah I think I understand now. But what does you mean by "javascript doesn't wait and can handle other things"?
Bjorn van de Peut
@bjorno43
May 25 2018 04:56
Simple. Say for example:
setTimeout(myCallback, 10000); // This will take 10 seconds
console.log('Hello'); // This comes after the setTimeout, but will be performed long before the 10 seconds are passed. IE: JS moves on doing other tasks.
ArchivalBoat50
@ArchivalBoat50
May 25 2018 04:57
@bjorno43 So it would essentially do it's job as soon as possible and will execute when 10 seconds passed?
Bjorn van de Peut
@bjorno43
May 25 2018 05:00
@ArchivalBoat50 Think of it like a cue. Javascript performs the timeout function. Therefor javascript is done. It can just move on. But the timeout function isn't finished yet. It's still doing his thing. Once it's finished, it will run the callback function. Basicly the entire settimeout function is running in memory while js moves on. Maybe a little bit like multi-threading. Not sure if that's the best way to describe it..
That's called asynchronous btw. JS is moving on to do other things while another part is still running. They're no longer running in sync
It's a very important concept for AJAX. If it wouldn't run asynchronous, the entire website would freeze untill the server responds. So if the server is down, the entire website would never work again untill the server is back up
ArchivalBoat50
@ArchivalBoat50
May 25 2018 05:04
@bjorno43 Oh so Javascript would start performing the timeout function, and will finish it's part, and it will keep going on reading all the other code in the program while the timeout function is finishing?
Brad
@bradtaniguchi
May 25 2018 05:05
Ah but javascript is in one place at one time tho
So onces the timeout is finished the engine will "jump" to finish it. Its just its a computer, so it switches contexts very fast. But its NOT doing 2 things at once
Bjorn van de Peut
@bjorno43
May 25 2018 05:05
Yes and no. It's a little bit hard to wrap your head around it. JS isn't running the timeout function anymore. It already did that. It's just still busy
Ye, like @bradtaniguchi said. That's a bit better to explain it
ArchivalBoat50
@ArchivalBoat50
May 25 2018 05:07
So while the timeout function is running, Javascript will run all the other code, and once the timeout function finishes, javascript will go back to execute it?
Bjorn van de Peut
@bjorno43
May 25 2018 05:07
No. It will go back to finish it
ArchivalBoat50
@ArchivalBoat50
May 25 2018 05:08
@bjorno43 Oh yeah I mean't finish not execute
@bjorno43 @bradtaniguchi I think I understand now.
Bjorn van de Peut
@bjorno43
May 25 2018 05:10
And that's the power of the callback function. In this case, the settimeout "calls" the callback function, telling JS to finish it. But if for some reason the callback function is never called, it doesn't cause issues with JS. JS simply finishes everything else and doesn't care
Brace yourself though. There are some caveats to callback functions you'll eventually run into
Yash Pratap Singh
@convexhull
May 25 2018 05:14
@bjorno43 do we have a lesson for callback function here at fcc ?
Bjorn van de Peut
@bjorno43
May 25 2018 05:15
Like a callback function returning true or false, actually returns it to the caller and not js itself
ArchivalBoat50
@ArchivalBoat50
May 25 2018 05:16
@bjorno43 I think that was a problem I was stuck while attempting to do the Seek and Destory algorithm
stuck with*
Bjorn van de Peut
@bjorno43
May 25 2018 05:21
@convexhull I haven't done the full course myself and looking at the map I don't see a specific lesson about it. There are plenty of guides you can find with Google about it though. This is one of those guides: https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced
@ArchivalBoat50 Ye, I run into that issue myself recently with one of the challenges. Don't remember which one it was, but a console log confirmed me that a false return was called, while true was actually returned. After doing a little research I learned that the callback did return false, just not to me, lol
ArchivalBoat50
@ArchivalBoat50
May 25 2018 05:27

Hey guys, I am struggling with the Seek and Destory algorithm.Here was my attempt in the Seek and Destroy algorithm:
My first attempt, this was when I have no idea what callback functions and arrow functions are and how they worked. This was more of a guess.

function destroyer(arr) {
  for (i=1; i<arguments.length; i++) {
    console.log(arguments[i]);
    return arr.filter(x => x = arguments[i]);
  }
  }


destroyer([1, 2, 3, 1, 2, 3], 2, 3);

Second attempt this is when I kind of knew what a callback function is, but this was a huge speedthrough:

function destroyer(arr) {
  for(i=1; i<arguments.length; i++) {
    console.log(arguments[i]);
    arr.forEach(function() {
      for (i=0; i<arr.length; i++) {
        if (arr[i] === arguments[i]) {
          arr = arr.splice(i, 1);
        }
      }
    });
    return arr;
  }

  }


destroyer([1, 2, 3, 1, 2, 3], 2, 3);

Anyone got any tips and lessons?

Bjorn van de Peut
@bjorno43
May 25 2018 05:28
Oh I remember that one! Not sure if I can actually review my answer to it, but I think I actually did that one with a oneliner, haha
JJ Megma
@megma_jj_twitter
May 25 2018 05:33
@JLuboff Is this for an auto email set up?
Pieter Stokkink
@forkerino
May 25 2018 05:47
@ArchivalBoat50 look into .filter
Bjorn van de Peut
@bjorno43
May 25 2018 05:54
@ArchivalBoat50 I can't find the oneliner so not entire sure I did it for that one. If so @anthonygallina1 probably has to laying around somewhere, ghehe. Anyway, my solution for that one that I do have was:
function destroyer(arr) {
  // Step 1: Get the arguments and convert to an array
  var args = Array.prototype.slice.call(arguments);
  args = [].slice.call(arguments);

  // Step 2: Get the input array and remove it from the args array
  var input = args.shift();
  arr = [];

  // Step 3: Filter the input array with the arguments array and
  // remove any duplicates
  arr = input.filter(function(val) {
    return args.indexOf(val) == -1;
  });

  // Step 4: Put the result back into arr
  return arr;
}

destroyer([3, 5, 1, 2, 2], 2, 3, 5);
Claudio Restifo
@Marmiz
May 25 2018 05:55
@ArchivalBoat50 with the new spread operators you can easily spread arguments into a new array :)
const destroyer = (arr, ...del) => arr.filter(n => del.indexOf(n) === -1 )
I think for loop is more efficient tho, so depends on how big of a data you have to iterate and remove.
ArchivalBoat50
@ArchivalBoat50
May 25 2018 05:58
I don't quite understand why arguments is converted to an array @bjorno43
Actually nvm, I know why
But why do you have to do Array.prototype.slice.call(arguments); to convert that into an array?
Is that sort of like a formula you memorize?
Bjorn van de Peut
@bjorno43
May 25 2018 06:04
@ArchivalBoat50 I actually took that one from the official docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments
Quote: "The arguments object is not an Array. It is similar to an Array, but does not have any Array properties except length. For example, it does not have the pop method. However it can be converted to a real Array:"
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
Bjorn van de Peut
@bjorno43
May 25 2018 06:13
Anyway, gotta go. Got to pickup my cat at the vet. Talk to you guys later :wave:
ArchivalBoat50
@ArchivalBoat50
May 25 2018 06:15
@bjorno43 Thanks for your help in helping me understand callback functions and the seek and destroy algorithm btw. Really appreciate it.
CamperBot
@camperbot
May 25 2018 06:15
archivalboat50 sends brownie points to @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @bjorno43 |http://www.freecodecamp.org/bjorno43
Rajat
@rajataudichya
May 25 2018 06:23
anyone there?
need help in accessing objects in an array
Jesse Croxford
@Jcroxford
May 25 2018 06:24
I might be able to help. What's the problem?
Rajat
@rajataudichya
May 25 2018 06:43
Thanks @Jcroxford
CamperBot
@camperbot
May 25 2018 06:43
rajataudichya sends brownie points to @jcroxford :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @jcroxford |http://www.freecodecamp.org/jcroxford
tsss85
@tsss85
May 25 2018 07:33

Hi,
I'm trying to make something like :

 $("#a:active").css('background-color','red');

it's doen't work !
someone can help me please ?

Blauelf
@Blauelf
May 25 2018 07:36
@ArchivalBoat50 An array doesn't have a slice method itself, it "inherits" it from Array.prototype, so [].slice and Array.prototype.slice point to the same function. arr.slice(arg1, arg2, arg3) this way is equivalent to Array.prototype.slice.call(arr, arg1, arg2, arg3). call calls Array.prototype.slice with arr as this, and passes the other arguments. Array methods are intentionally written in a way to support array-likes as well (array-like means length property and numeric properties for elements, arguments is one, but for example strings are, too). So Array.prototype.slice may take any array-like as input, but always returns an array as output. And we (ab)use that property here. ES6 would make this let args = [...arguments];, but as mentioned above, one should use rest arguments instead.
@tsss85 Won't work that way. $("#a:active") even if it does work will target only currently active links. The .css method adds inline CSS to an element, and there are no pseudo-classes in there. You might need a style sheet rule instead.
Shubham soni
@shubhamsoni2617
May 25 2018 07:57

function twoSum(num1,num2 ) {
var x1= num1.reverse().join().replace(/,/g , '');
var x2= num2.reverse().join().replace(/,/g , '');
var x3=parseInt(x1,10);
var x4=parseInt(x2,10);
var x5=x3+x4;
return Array.from([x5]);

}
twoSum([9,6,7],[9,9,9]);

//getting answer as [1768]. How to get [1,7,6,8]?

Blauelf
@Blauelf
May 25 2018 08:00

I don't like your solution (it will break on longer numbers), but you can return String(x5).split('').map(Number);

BTW, .join().replace(/,/g, '') is about same as .join('')

I'd take another approach, one where reverse actually makes sense. One with a loop and a carry over variable.
Shubham soni
@shubhamsoni2617
May 25 2018 08:03
@Blauelf Thanks for the suggestion. I am a newbie. Will try.
CamperBot
@camperbot
May 25 2018 08:03
shubhamsoni2617 sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
:star2: 4695 | @blauelf |http://www.freecodecamp.org/blauelf
Blauelf
@Blauelf
May 25 2018 08:05
@shubhamsoni2617 What is your input supposed to be, and what your output? When adding, you would want the digits from ones to tens to hundreds and so on (makes handling numbers of different length much easier), but if your input and output use the regular order, you would have to reverse on input and output. For your approach, you would need them in the regular order, but as I said, it's very limited by the Number type.
tsss85
@tsss85
May 25 2018 08:07
@Blauelf thanks you !
CamperBot
@camperbot
May 25 2018 08:07
tsss85 sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
:star2: 4696 | @blauelf |http://www.freecodecamp.org/blauelf
Shubham soni
@shubhamsoni2617
May 25 2018 08:07

@Blauelf trying some problems on https://leetcode.com/problems/add-two-numbers/description/

Objective is : You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order and each of their nodes contain a single digit. Add the two numbers and return it as a linked list.

Blauelf
@Blauelf
May 25 2018 08:08
Stored in reverse order is great. No reversal needed, as the output is supposed to be reversed, too.
Shubham soni
@shubhamsoni2617
May 25 2018 08:09
@Blauelf Could you please tell me more about it?
meanwhile, about the regular order.
Blauelf
@Blauelf
May 25 2018 08:16
How would you add two multi-digit numbers manually?
Shubham soni
@shubhamsoni2617
May 25 2018 08:17
@Blauelf First adding the last digit of numbers, if there is a carry over then it gets forwarded to the left.
Blauelf
@Blauelf
May 25 2018 08:20

And now we have digits reversed, so you begin at the left end. Which is great, as numbers of different length have their last digit at different indices, so this makes our work easier.

I wonder why the JavaScript version does not use a linked list as they proposed. I found handling the linked list the hardest (but still very basic) part.

Oh, they use linked lists, you just ignored that part so far.
Shubham soni
@shubhamsoni2617
May 25 2018 08:26
@Blauelf Let me check and read some stuffs regarding linked list,so that I can understand it. Thanks for the help.I appreciate that.
CamperBot
@camperbot
May 25 2018 08:26
shubhamsoni2617 sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
api offline
Shubham soni
@shubhamsoni2617
May 25 2018 08:28
@Blauelf
Could you please provide me some helpful links that you think I should read and understand regarding this particular problem?
Blauelf
@Blauelf
May 25 2018 08:33

I don't know helpful links, as I learnt that from books (yeah, this offline medium with infinite battery life, at least here in Germany pretty popular before broadband became available to many people living in larger cities).

Your "numbers" are linked lists. A linked list consists of nodes that each have a payload (here a digit) and a pointer to the next node. The last node has a special value in its pointer indicating end of list (in JavaScript, that's null).

Now you need to return your own linked list.

Kelechi Chinaka
@ke1echi
May 25 2018 08:37
@shubhamsoni2617 why not take cs50 and learn about this CS fundamentals
:wave: @Blauelf
Blauelf
@Blauelf
May 25 2018 08:37
Linked lists don't support looking up a specific node, you have to walk from the first node in one direction (and since these lists contain the numbers with digits reversed that's the right direction). Double-linked lists (storing a link to the next and previous nodes) allow for walking forward and back, but add more overhead.
Shubham soni
@shubhamsoni2617
May 25 2018 08:39
@Blauelf Thanks a ton. :)
CamperBot
@camperbot
May 25 2018 08:39
shubhamsoni2617 sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
api offline
Shubham soni
@shubhamsoni2617
May 25 2018 08:41
@kelechy Will surely check that.
Ayush Bahuguna
@relentless-coder
May 25 2018 12:25
hey, are there any react developers in here?
@shubhamsoni2617 :D
Jason Luboff
@JLuboff
May 25 2018 15:14
@megma_jj_twitter Its automated email messages, ya. I can watch in my console to see that they go out, but was verifying actual mail delivery hence all the emails.
Nate Mallison
@NJM8
May 25 2018 15:18
@JLuboff Can you take a look at my app? getting a 404 on all routes
or anyone
Jason Luboff
@JLuboff
May 25 2018 15:21
404 on all routes?
Nate Mallison
@NJM8
May 25 2018 15:23
Screen Shot 2018-05-25 at 11.22.56 AM.png
the auth routes should always serve either a success or error message for new user or log in
Jason Luboff
@JLuboff
May 25 2018 15:24

@NJM8 What happens if you remove this

app.use((req, res, next) => {
  const err = new Error('Not Found');
  err.status = 404;
  return next(err);
});

from app.js?

Nate Mallison
@NJM8
May 25 2018 15:25
Cannot GET /auth/signup
of course I'm just visiting the route with my browser served locally, the route is expecting data for making a user and tokens, I'm not really sure how to test that without the front end, which is built but reaches out the heroku backend app. Can I reach out to localhost in the front end if I have both running locally?
I looked into postman to test the routes, but didn't really get how to set it up
Jason Luboff
@JLuboff
May 25 2018 15:29
With postman you basically tell it the required data for the route i.e if the route is expecting a form, you include the form data to test
You sohuld be able to do everything locally?
Nate Mallison
@NJM8
May 25 2018 15:31
so axios.post('http://localhost:8000/auth/signup', {userdata}) is ok?
Jason Luboff
@JLuboff
May 25 2018 15:31
Never used axios.. so not sure hah but if thats from your front end, ya I don't see why not
Nate Mallison
@NJM8
May 25 2018 15:34
aha, TypeError: Cannot read property 'create' of undefined
now we are getting somewhere, thanks!
Jason Luboff
@JLuboff
May 25 2018 15:34
:+1:
Nate Mallison
@NJM8
May 25 2018 15:35
aaaaaaaaa
'User' vs 'Users'
Jason Luboff
@JLuboff
May 25 2018 15:35
That does make a difference :smile:
Nate Mallison
@NJM8
May 25 2018 15:41
running into cors now
Jason Luboff
@JLuboff
May 25 2018 15:41
Whoo! Get out of work early today
Nate Mallison
@NJM8
May 25 2018 15:41
nice
more time to help me
hahahah
Jason Luboff
@JLuboff
May 25 2018 15:41
More like less time!
Nate Mallison
@NJM8
May 25 2018 15:44
why am I getting cors when reaching out to the server on heroku
I don't get it
Jason Luboff
@JLuboff
May 25 2018 15:45
Dunno. I've never had any sort of CORS issue lol
Nate Mallison
@NJM8
May 25 2018 15:45
I run into it all the time, like every app
Jason Luboff
@JLuboff
May 25 2018 15:46
What're you doing that causes it? lol
Blauelf
@Blauelf
May 25 2018 15:50
CORS is... interesting, sometimes it's an HTTP/HTTPS issue (those are different servers in terms of CORS)
Very great if you're behind a HTTP-HTTPS proxy, and your HTTP-serving server believes it's publicly available under HTTP.
Jason Luboff
@JLuboff
May 25 2018 15:51
I get the reason for it, just not sure why he consistently has issues. In my backend development haven't had any issues with it but... we're using different methods I'm sure
Nate Mallison
@NJM8
May 25 2018 15:53
it's annoying and makes no sense is what it is. the whole premise is that you don't want to allow JS from other places into your site right? well then why do I have to tell my apps to allow JS from other sites? like, oh here is this protection mechanism, oh you want to do anything with JSON? yeah just disable it. dumb
Dimitris Nik.
@dimitrissnk
May 25 2018 15:53
Hey guys I just started the 3rd JS project which is the wiki viewer and I see, that in the example page, for the random article, he just opens the webpage, he doesn't get the JSON files from the API to display them on the page. Why that? Is it "harder", needs something "special" or he just did it that way because he wanted so? https://codepen.io/freeCodeCamp/full/wGqEga
Jason Luboff
@JLuboff
May 25 2018 15:54
@Dimitrios51 The user story is to simply have a button that takes you to a randon wikipedia article
Dimitris Nik.
@dimitrissnk
May 25 2018 15:55
@JLuboff Yeah I know that it is the simplest, but why don't he display the random article on the page and he opens the link? Is it harder to display the random article
?
Jason Luboff
@JLuboff
May 25 2018 15:56
@Dimitrios51 Well the link that FCC provides is a webpage, it is not an API endpoint. If you can query the API for a random article to get returned data, than theres no reason you couldn't do that
Dimitris Nik.
@dimitrissnk
May 25 2018 15:57
@JLuboff So, it needs more advanced programming to display that too?
Jason Luboff
@JLuboff
May 25 2018 15:58
I mean, theoritically, yes it would be more work. Not necessarily more advanced but more work.
Nate Mallison
@NJM8
May 25 2018 15:58
The wikipedia api is a beast, I found it very hard to deal with
I think they do have an endpoint to pull random articles but I couldn't get it to work
Dimitris Nik.
@dimitrissnk
May 25 2018 15:59
@JLuboff Okeyy, I see, this is what I am asking, tyy
Nate Mallison
@NJM8
May 25 2018 16:00
but there may be another way to do what you are thinking, of pulling a random article and displaying the content.
while using the same api endpoint as the normal search
:smile:
Jason Luboff
@JLuboff
May 25 2018 16:01
@NJM8 Use another API to get a random word and plug that returned word into the wiki API? :joy:
Blauelf
@Blauelf
May 25 2018 16:01
@NJM8 At least Wikipedia has the friendly origin=* CORS feature for anonymous APIs. Love this GET parameter.
Nate Mallison
@NJM8
May 25 2018 16:05
@JLuboff That's a great idea!!! You could market that
:clap: :sparkles: :fire:
dinesh
@1532j0004kg
May 25 2018 16:12
Is it possible to export the csv file into mongodb .
I knew that it is working in cmd line ...
Dimitris Nik.
@dimitrissnk
May 25 2018 16:13
@NJM8 Well, I will simply put the link in an <a> tag now and I will start working with the api and the search box and the I will see :P
Nate Mallison
@NJM8
May 25 2018 16:15
@Dimitrios51 @JLuboff and I are being sarcastic. That is what I did for my wikipedia viewer, the random button reaches out to the wordnik api and get a random word to search wikipedia for.
Jason Luboff
@JLuboff
May 25 2018 16:24
@1532j0004kg Export csv into mongo? Do you mean import? IF import, than yes you can do that
dinesh
@1532j0004kg
May 25 2018 16:25
Ya, I want to add the csv file content to existing database
I dont know it is export or import .
Jason Luboff
@JLuboff
May 25 2018 16:25
That is Import. Import is to bring in, Export is to take out
dinesh
@1532j0004kg
May 25 2018 16:26
Ya, I want to add the csv file content to existing database
At real time
have u tried that ?
Jason Luboff
@JLuboff
May 25 2018 16:27
@1532j0004kg I've only done a small bit using the command line. Here is an example using nodejs and ajax that may be of help http://programmerblog.net/import-csv-file-using-nodejs/
dinesh
@1532j0004kg
May 25 2018 16:29
Doing in cmd may be easy ...?
https://addressbook-express.glitch.me I want to do for this .
Jason Luboff
@JLuboff
May 25 2018 16:30
Yes, there is a built in tool mongoimport Take a look at the docs https://docs.mongodb.com/manual/reference/program/mongoimport/
dinesh
@1532j0004kg
May 25 2018 16:32
Ok i will try this one ... If i got the sollution , will share with you .... Thanks @JLuboff
CamperBot
@camperbot
May 25 2018 16:32
1532j0004kg sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2419 | @jluboff |http://www.freecodecamp.org/jluboff
Daniel Simeonov
@dbsimeonov
May 25 2018 17:44
Guys just question out of curiosity, I'm building a simple ui which has lots of items and each of them has the same styling. As I'm trying to do it with javascript, can I create a function that will take like 6 parameters and just call the function like that to build my UI ?
I mean is it a good practise or different way?
Brad
@bradtaniguchi
May 25 2018 17:46
Yes you CAN, what do you mean by doing it with javascript tho? I would make the template in JS, with the classes/styling. Don't update the dom for each item ya know?
Daniel Simeonov
@dbsimeonov
May 25 2018 17:51
Usually I used to do it with html hardcoded but as I learned new things, started to do it with javascript. Thanks will try it now :)
Brad
@bradtaniguchi
May 25 2018 17:53
np :D
Brad
@bradtaniguchi
May 25 2018 17:59
haha
So id assume you went with yes? :P
Daniel Simeonov
@dbsimeonov
May 25 2018 18:00
hah yes :D
I'm bad with objects but now is the time to learn
Brad
@bradtaniguchi
May 25 2018 18:02
JS "objects" are uber flexible, relate to JSON (the most common format data is exchanged from APIS) so they are pretty important
Daniel Simeonov
@dbsimeonov
May 25 2018 18:05
Never been so happy with javascript, made it work
In couple of minutes will share the code
Brad
@bradtaniguchi
May 25 2018 18:07
:+1: nice :D
Daniel Simeonov
@dbsimeonov
May 25 2018 18:11
@bradtaniguchi Would appreciate feedback
Brad
@bradtaniguchi
May 25 2018 18:17
@dbsimeonov Looks pretty good, not going to lie but your basically making your own front-end framework sorta deal haha
Daniel Simeonov
@dbsimeonov
May 25 2018 18:18
:D:D Thanks a lot!
Brad
@bradtaniguchi
May 25 2018 18:20
obviously a front-end framework does a lot more, but what you did is the basics of the core stuff most of them have(manipulating the dom)
Daniel Simeonov
@dbsimeonov
May 25 2018 18:23
@bradtaniguchi So basically my html should be just the layout. And the rest is css styling the elements, and everything else js ?
I ment should avoid to style from js
Brad
@bradtaniguchi
May 25 2018 18:24
Not necessarily, what I mean is instead of making a call for each individual action to update the dom, you could add all of it to a string, and update the dom with that string. (So it could be huge, and you make only 1 DOM change)
I only wanted to point out the potential performance downsides to doing what your currently doing
Daniel Simeonov
@dbsimeonov
May 25 2018 18:27
I'm not sure I understood it.
Recently friend showed me something like html template is that the same?
Have it all stored as string and just place the variables to their places
Brad
@bradtaniguchi
May 25 2018 18:30
I've heard about html template, but I have no experience using it (I'm an angular guy so angular handles all that sorta stuff for me :P) so I can't say where it would fit in the grand scheme of things. There's also template strings:
Jason Luboff
@JLuboff
May 25 2018 18:31
I use handlebars as a template engine (here's my useless comment of the day)
Brad
@bradtaniguchi
May 25 2018 18:31
const myTextContent = `Hello World!`;
const someTemplate = `<div>${myTextContent}</div>`
Nate Mallison
@NJM8
May 25 2018 18:32
Vue is great for quick things if you want, you can include it as a CDN link and just pop in some features, no need to re-write the whole app
Jason Luboff
@JLuboff
May 25 2018 18:32
Keep in mind template strings don't work in IE if you need that
(My not as useless comment of the day)
Kudzu
@czhower
May 25 2018 18:34
We stopped supporting IE. Its numbers are soooo tiny these days.. unless you have a customer who is stuck in IE for intranet compatibilty reasons..... We tell customers to use an older version of our product (still suported) if they need IE.
And its just so problematic.
Nate Mallison
@NJM8
May 25 2018 18:34
I was helping someone who needed to support down to ie8 or something, I said just serve them a download link to chrome
haha
Brad
@bradtaniguchi
May 25 2018 18:35
^ haha
Kudzu
@czhower
May 25 2018 18:36
blob
Daniel Simeonov
@dbsimeonov
May 25 2018 18:36
Recently saw a conference from Douglas Crockford and he was saying about the too many things coming out everyday and the issue with IE and his comment was "Lets just get rid of IE forever" :D :D
Jason Luboff
@JLuboff
May 25 2018 18:36
We still have quite a bit of Windows 7 machines in our domain and while we have Firefox and Chrome installed on most (if not all) computers, a lot of individuals use IE. Frustrating, but can't change it until all computers have been upgraded. And certain applications still need IE to work properly, like SSRS (we're running 2008 R2 SQL)
Brad
@bradtaniguchi
May 25 2018 18:37
damn IE/Edge are groupded together, so its hard totell, but its the same support as safari? geezx
Jason Luboff
@JLuboff
May 25 2018 18:38
Honestly...Edge isn't that bad IMO. I switch between FF and Edge depending on what I'm doing
Kudzu
@czhower
May 25 2018 18:38
Edge still has a lot of missing pieces.. but at least it generally is mostly HTML compliant now.
Jason Luboff
@JLuboff
May 25 2018 18:39
Edge (and by extension Bing) give me points..points I can use to get me some free shit!
Kudzu
@czhower
May 25 2018 18:42
There has been a movement to kill IE for over a decade.
I remember when IE7 came out. Internally at Microsoft we could NOT upgrade to IE7 for about a year after it came out because too many internal apps would not work with it. Those of us who had to have IE7 because of our jobs had to have 2 PCs or use Virtual Machines to keep IE6 alive for our internal functions.
Jason Luboff
@JLuboff
May 25 2018 18:44
It needs to die. But...at the same time..we (my company) need to upgrade some internal shit (mainly SSRS) to kill it
@czhower That sounds awful
but from what I've heard of MS...is not out of the ordinary
Kudzu
@czhower
May 25 2018 18:46
MS has a lot of good stuff, but the whole IE team and strategy was just insane.
Finally at least Edge is going in the right direction - a total new start and nothing to do with IE's base.
Jason Luboff
@JLuboff
May 25 2018 18:47
Except you know...that icon... I don't know how many users I've switched to Win10 and had them say "Ya I'm opening it in Internet Explorer" when its Edge
Norvin Burrus
@ndburrus
May 25 2018 18:50
@shubhamsoni2617 this may be helpful: :sparkles: