These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Apr 2018
include*engine
@newtothat
Apr 25 2018 00:11
do devs use grid and flexbox for networking website? or they use OOP?
LydaTech
@lydatech
Apr 25 2018 00:11
apples and oranges
@newtothat youre compairing 2 items that dont really go together.
include*engine
@newtothat
Apr 25 2018 00:14
i mean one of them
LydaTech
@lydatech
Apr 25 2018 00:14
@newtothat (grid and Flex) != (OOP)
include*engine
@newtothat
Apr 25 2018 00:14
why am i asking this question ? because i am learning php and i got that there is OOP php
LydaTech
@lydatech
Apr 25 2018 00:15
@newtothat ok so grid and flex are css (styling) where OOP would apply to scripting and coding
include*engine
@newtothat
Apr 25 2018 00:18
ok what i think is im not sure yet but if you create layout with one of three css like flexbox or grid or old version of layout like with floating etc.
now imagine you have users and databases and when they post or create something your flexbox won't work for that or grid ? a dev says that
i asked a youtuber he teaches web development on youtube "mmtuts " multimedia tutorials
LydaTech
@lydatech
Apr 25 2018 00:18
flex and grid would both work with the dynamic content
include*engine
@newtothat
Apr 25 2018 00:19
so he said that it is created using oop server side
i mean oop
php he said
LydaTech
@lydatech
Apr 25 2018 00:19
@newtothat ok first I would google a bit to understand what OOP is
any css you apply will work with what the server is generatiing in PHP
@newtothat And if he really said that and not a misunderstanding dont take advice from him
include*engine
@newtothat
Apr 25 2018 00:21
ok sad robot maybe i got him wrong
but my question was
if i create a website with databases and users usually you allow users to post or comment and how this happens so widht and height streches out so he said "it is created using object oriented programming "
i mean height only
LydaTech
@lydatech
Apr 25 2018 00:25
@newtothat no you are not understanding
lets see
say you have a database
include*engine
@newtothat
Apr 25 2018 00:26
ok?
LydaTech
@lydatech
Apr 25 2018 00:26
and in php you make a call to that database. For example a user and their info
include*engine
@newtothat
Apr 25 2018 00:26
go on
so?
LydaTech
@lydatech
Apr 25 2018 00:27
what is returned to you is "content" generated by the PHP. How PHP gets that info and stores it would be where OOP is used
Once its returned to you, you would use css like flexbox or grid to change how it would be displayed on the webpage
TonyRednil
@TonyRednil
Apr 25 2018 00:29
For the Caesars Cipher challenge of freeCodeCamp.org am I going to have to convert each argument into an array in order to be able to run them through the cipher?
LydaTech
@lydatech
Apr 25 2018 00:29
Do you understand? Its 2 different levels of whats going on when displaying the page to the browser. One manages the object (PHP) one displays the object (CSS)
Brad
@bradtaniguchi
Apr 25 2018 00:29
@TonyRednil I (like most people) don't remember the challenge directly, you prolly have to post more details. (plus were too lazy to look the challenge up haha)
include*engine
@newtothat
Apr 25 2018 00:30
so it means we use all of them?
LydaTech
@lydatech
Apr 25 2018 00:31
@newtothat yes you can. Youre not required to use OOP methods in php but it is useful
TonyRednil
@TonyRednil
Apr 25 2018 00:31
So in the challenge you are given an argument of strings and you are supposed to run those through the ROT13 cipher. Which means A = N, B = O and so on because you basically move 13 letters down the alphabet. The first argument I'm given is "SERR PBQR PNZC" which when ran through the function should out put "FREE CODE CAMP". I know strings are immutable so I'm gonna have to convert each string into an array right?
include*engine
@newtothat
Apr 25 2018 00:33
@lydatech ok thank you and do you know any fresh tutorials updated php and oop which i can follow
Stephen James
@sjames1958gm
Apr 25 2018 00:33
@TonyRednil you move the lower 13 letters A-M up 13
Brad
@bradtaniguchi
Apr 25 2018 00:33
@TonyRednil yea, I would split the string to an array, do your manipulations, and then join them back together at the end
TonyRednil
@TonyRednil
Apr 25 2018 00:33
@bradtaniguchi am I also going to have to use a for each loop or is there a way to not type as much?
include*engine
@newtothat
Apr 25 2018 00:34
if anyone knows drop the link please
Stephen James
@sjames1958gm
Apr 25 2018 00:34
@TonyRednil Some sort of loop - you could use .map if you know that one
TonyRednil
@TonyRednil
Apr 25 2018 00:34
@sjames1958gm I'm sure I could look it up.
LydaTech
@lydatech
Apr 25 2018 00:34
Brad
@bradtaniguchi
Apr 25 2018 00:34
@TonyRednil my tips were split and joincheck mdm ;D
Stephen James
@sjames1958gm
Apr 25 2018 00:35
@TonyRednil map provides a mechanism for converting one array to a new array
LydaTech
@lydatech
Apr 25 2018 00:36
@newtothat dont worry too much about the age of any tutorials you come across. PHP is a mature language and most of them will still be relevant
include*engine
@newtothat
Apr 25 2018 00:36
@lydatech i already follow him lol i love his "sometimes british and sometimes american " accent mxed with dennish
Stephen James
@sjames1958gm
Apr 25 2018 00:36
split and join with a loop in the middle :)
Brad
@bradtaniguchi
Apr 25 2018 00:38
@TonyRednil Yea, as @sjames1958gm said a split, map and then join is what I would do in this situation
Or if your unconfortable with using map, then use another loop
anthonygallina1
@anthonygallina1
Apr 25 2018 00:38
yup
include*engine
@newtothat
Apr 25 2018 00:39
@lydatech so it means is it ok to learn from bucky roberts php too? 200 tutorials but 2011
7 years
Gustavo Santana
@santanaG
Apr 25 2018 00:39

Maybe some fresh pair of eyes can help me, the following code keeps producing an error:

import https from 'https';

const options = {
  hostname: 'api.github.com',
  path: '/authorizations',
  method: 'POST',
  headers: {
    Authorization: 'Basic <username:password>',
    'Content-Type': 'application/json',
    'User-Agent': 'santanaG',
  },
  parameters: {
    scopes: [
      'user', 'public_repo', 'repo', 'repo_deployment', 'repo:status', 'read:repo_hook', 'read:org', 'read:public_key', 'read:gpg_key',
    ],
    note: 'Testing out token fetching',
  },
};

const test = https.request(options, (res) => {
  console.log(`StatusCode: ${res.statusCode}`);
  console.log('headers: ', res.headers);

  res.on('data', data => console.log(JSON.parse(data)));
}).on('error', error => console.log(error));

test.end();

Basically a 400 Bad Request:

StatusCode: 400
headers:  { server: 'GitHub.com',
  date: 'Wed, 25 Apr 2018 00:34:38 GMT',
  'content-type': 'application/json; charset=utf-8',
  'content-length': '138',
  connection: 'close',
  status: '400 Bad Request',
  'x-ratelimit-limit': '5000',
  'x-ratelimit-remaining': '4862',
  'x-ratelimit-reset': '1524619413',
  'x-github-media-type': 'github.v3; format=json',
  'access-control-expose-headers': 'ETag, Link, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval',
  'access-control-allow-origin': '*',
  'strict-transport-security': 'max-age=31536000; includeSubdomains; preload',
  'x-frame-options': 'deny',
  'x-content-type-options': 'nosniff',
  'x-xss-protection': '1; mode=block',
  'referrer-policy': 'origin-when-cross-origin, strict-origin-when-cross-origin',
  'content-security-policy': 'default-src \'none\'',
  'x-runtime-rack': '0.038454',
  'x-github-request-id': 'EE14:52AF:184E007:2F0A3C9:5ADFCD1E' }
{ message: 'Problems parsing JSON',
  documentation_url: 'https://developer.github.com/v3/oauth_authorizations/#create-a-new-authorization' }

FIXED
A glance would be helpful. A solution, even better. I am on the latest version of node using https.

Brad
@bradtaniguchi
Apr 25 2018 00:40
@santanaG Must you post the code twice? Also whats the error?
Gustavo Santana
@santanaG
Apr 25 2018 00:41
@bradtaniguchi I messed up, just edited it
Brad
@bradtaniguchi
Apr 25 2018 00:44
You have a dangling comma at the end of scopes array
That's valid in JS, but maybe its blowing up in JSON
@santanaG
Gustavo Santana
@santanaG
Apr 25 2018 00:44
Just checked. Still same issue. I believe Node is smart enough to remove those
node
woops
Brad
@bradtaniguchi
Apr 25 2018 00:46
hmm
Gustavo Santana
@santanaG
Apr 25 2018 00:46
Yup, just double checked with JSON.stringify on node
it removes dangling commas
I am completely stumped
Brad
@bradtaniguchi
Apr 25 2018 00:49
Gotta be something with the options not being right (pretty given) im looking thru the documentations when I get a chance
LydaTech
@lydatech
Apr 25 2018 00:50
@newtothat yeah the concepts will be really close. PHP 5.3 was releases in 2009 and 5.4 in 2012. so if youre working with the 5.x releases youll be ok
Gustavo Santana
@santanaG
Apr 25 2018 00:50
You are probably right: when I remove Authorization: 'Basic <username:password>’ it tells me I need authorization. Gives me the error when I add it
everywhere I see it, including a library that actually does this for you the header is set up that way though.
Brad
@bradtaniguchi
Apr 25 2018 00:51
I cant find anywhere in the docs for parameters tho, but then im not a node guy
include*engine
@newtothat
Apr 25 2018 00:54
@lydatech ok thank you for spending time to answer my questons.I really appreciate it
TonyRednil
@TonyRednil
Apr 25 2018 00:54
So if I am understanding this map function right I can have it set so that when my input is 65 it's gonna immediately spit out 78 if I have those two numbers mapped together?
So I want to map like 65 through 77 to 78 through 90?
Brad
@bradtaniguchi
Apr 25 2018 00:56
so map applies a function to EACH element in the array, and returns the modified values in another array.
Gustavo Santana
@santanaG
Apr 25 2018 00:56
@bradtaniguchi oauth_authorization
LydaTech
@lydatech
Apr 25 2018 00:56
@newtothat :+1:
Brad
@bradtaniguchi
Apr 25 2018 00:59
@santanaG Parameters is just the name of the stuff you send in the post body right?
not the https argument you past as the options.
It looks like sending a post request with an object as the body looks pretty manual:
anthonygallina1
@anthonygallina1
Apr 25 2018 01:00
theres route params too in node
Brad
@bradtaniguchi
Apr 25 2018 01:00
@anthonygallina1 Is that what the endpoint exists? I don't use the github api so idk :/
anthonygallina1
@anthonygallina1
Apr 25 2018 01:00
I never tried to write my own post though Just reads
Brad
@bradtaniguchi
Apr 25 2018 01:01
I mean they are showing what looks like a "body" of json under the parameters section, so id assume that's what you need to send
anthonygallina1
@anthonygallina1
Apr 25 2018 01:02
I dunno 'referrer-policy': 'origin-when-cross-origin, strict-origin-when-cross-origin', 'content-security-policy': 'default-src \'none\'', interesting though
Wild card route ? 'access-control-allow-origin': '*',
Ya I dunno
TonyRednil
@TonyRednil
Apr 25 2018 01:06
So if I were to map the first 13 alphabet values appropriately to the second 13 it would look something like this?
first  = map (second, 78, 90, 65, 77);
Brad
@bradtaniguchi
Apr 25 2018 01:07
its arr.map(function() {}) if thats what your asking
TonyRednil
@TonyRednil
Apr 25 2018 01:07
@bradtaniguchi I'm just trying to understand how this all works....
Brad
@bradtaniguchi
Apr 25 2018 01:08
@TonyRednil Im telling ya, checkout the examples on mdn, and run your own on jsbin, or codepen just to understand how the map function works, before you try to use it.
Moisés Man
@moigithub
Apr 25 2018 01:10
function map(arr, fn){
  let newArr=[];
  for(let i = 0 ; i < arr.length; i++){
           let newElem = fn( arr[i] );   // apply the function to each arr element
          newArr.push( newElem );
   }
   return newArr;
}
buiphuking
@buiphuking
Apr 25 2018 01:13
@Feldbot
i want it look like 100% the original
this is the problem
Gustavo Santana
@santanaG
Apr 25 2018 01:20
I CANT EVEN BELIEVE THIS, I AM A LOOOOOOSERRRR LMAO!
If you had one guess @bradtaniguchi on which line was the problem. Which one would you say?
Gustavo Santana
@santanaG
Apr 25 2018 01:25
@anthonygallina1 ? what about it?
Stephen James
@sjames1958gm
Apr 25 2018 01:26
@santanaG line 1
Gustavo Santana
@santanaG
Apr 25 2018 01:27
@sjames1958gm Nope! Though I cannot tell if you are jesting :smile:
anthonygallina1
@anthonygallina1
Apr 25 2018 01:28
Welp give me a day to read the docs And play with the code Post and much is on that link
Gustavo Santana
@santanaG
Apr 25 2018 01:29
@anthonygallina1 Well the issue had nothing to do with my request really
@anthonygallina1 I was doing that just fine
Abhilash Kumar
@apravink
Apr 25 2018 01:29
Hey y'all. Anyone else come close to giving up with the Sinon game?
anthonygallina1
@anthonygallina1
Apr 25 2018 01:30
oh I saw no sniff etc and thought it was authorization issue Sry
Gustavo Santana
@santanaG
Apr 25 2018 01:30
@anthonygallina1 No It was me being trusting things on my end
I was parsing the data unnecessarily
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 01:42
hi all, anyone faced the issue of paragraphs not wrapping to a new line in IE?
Stephen James
@sjames1958gm
Apr 25 2018 01:44
@santanaG I was - since I didn't know anything about your problem :)
Ken Haduch
@khaduch
Apr 25 2018 01:44
@brittanyrutherford -- are you using any new-ish CSS properties to do the wrapping? There are things that might not be supported in IE? You can check http://caniuse.com/ (if you haven't done so already) to see about supported / unsupported features. Do you have a link for your project?
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 01:45
@khaduch thanks, no i don't have a link to my project. i just have a paragraph tag with very long text.
so i have main and aside, inside main, i have p tag, and inside, a very long paragraph, on chrome it works fine, on ie, it doesn't wrap and pushes aside and a horizontal scroll appears
Dhaval Vira
@dhavalveera
Apr 25 2018 01:46
have you write code for IE ?
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 01:46
@dhavalveera what do u mean?
code for IE?
Gustavo Santana
@santanaG
Apr 25 2018 01:47
@sjames1958gm Good! I am not too tired to notice these things at least!
Dhaval Vira
@dhavalveera
Apr 25 2018 01:47
-webkit = for Chrome & i think Safari
-moz = for Mozilla Firefox
like this there is code for IE as well
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 01:48
i think the problem is with white-space
but there's something specific for IE for it
Dhaval Vira
@dhavalveera
Apr 25 2018 01:48
@brittanyrutherford all Web Browser is not supporting all the HTML5 Codes
to make them support you have to mention that for this XYZ Browser it should work like thiz
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 01:50
yea but i dont know what property to change in the first place
i tried word-wrap, white-space
nothing is working in ie
Gustavo Santana
@santanaG
Apr 25 2018 01:50
I was wrong! Ugh.
Dhaval Vira
@dhavalveera
Apr 25 2018 01:51
@brittanyrutherford just a moment

@brittanyrutherford :- <!--[if lte IE 8]>

<script src="html5.js" type="text/javascript"></script>
<![endif]-->

put this in head tag & try
@brittanyrutherford :- or this = <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> (add this into Head)
Ken Haduch
@khaduch
Apr 25 2018 01:54
@dhavalveera - does the html5.js script have to be in the same directory as the webpage or is there some other trick?
Dhaval Vira
@dhavalveera
Apr 25 2018 01:55
I have search it on Google
Ken Haduch
@khaduch
Apr 25 2018 02:00
@brittanyrutherford - https://remysharp.com/2009/01/07/html5-enabling-script - this page (although it looks like it's old) gives details of how to enable HTML5 features for IE. Perhaps @dhavalveera 's post is correct, too, but you would need an html5.js to be able to be loaded. Maybe his post or the one that I linked will help?
Dhaval Vira
@dhavalveera
Apr 25 2018 02:01
@khaduch = <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> (add this into Head)
maybe this can be work as well
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 02:04
why do i need to load a js file?
it's a css issue
i just don't know the exact css rules to handle it
Dhaval Vira
@dhavalveera
Apr 25 2018 02:11
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> (add this into Head)
add this into your Head & try
Ken Haduch
@khaduch
Apr 25 2018 02:17
@brittanyrutherford - it's used to implement a technique that is described here that forces IE to properly handle elements that it doesn't otherwise handle normally. It might not help here because from what you are saying (except for possibly main - is that a new element? I just looked it up and saw that it is...) it looks like you are using pretty much plain HTML elements?
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 02:18
@khaduch when do u mean by plain html elements?
Dhaval Vira
@dhavalveera
Apr 25 2018 02:18
Brittany :- have you tried <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> (add this into Head) this one ?
Ken Haduch
@khaduch
Apr 25 2018 02:19
@brittanyrutherford - like the <p> tag - that should be supported by IE, I would guess... :) Oh, I guess that <aside> is also new? So I'm wondering if IE is not properly handling styling related to those elements?
i don't have IE installed on my computer anymore, so I'd like to play around with it but I think that Windows 10 tossed it? Oh, maybe it is still there... fun time!
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 02:23
aaaah
i get what u mean
so probably if i change these to regular divs
Dhaval Vira
@dhavalveera
Apr 25 2018 02:23
?
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 02:23
it might work?
i didn't know that IE doesn't understand main and aside
Dhaval Vira
@dhavalveera
Apr 25 2018 02:24

@brittanyrutherford have you tried this ?

Brittany :- have you tried <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> (add this into Head) this one ?

Ken Haduch
@khaduch
Apr 25 2018 02:24
It might be good for a quick trial? @brittanyrutherford
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 02:24
@khaduch yeah
@dhavalveera i have it for Edge
but not chrome =1
but it's already rendered in Edge mode
Dhaval Vira
@dhavalveera
Apr 25 2018 02:24
so still it is not working ?
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 02:24
yeah
but would main and aside affect the p tags inside?
@khaduch
Dhaval Vira
@dhavalveera
Apr 25 2018 02:25
sometime you have to declare that where p tag is located
like main p or aside p
or main #p or .p
something like tha
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 02:26
yea i did that
somethibg like div.wrapper main p { ... }
Dhaval Vira
@dhavalveera
Apr 25 2018 02:26
main have any class or id ?
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 02:27
no
just main and aside
Dhaval Vira
@dhavalveera
Apr 25 2018 02:27
k
Ken Haduch
@khaduch
Apr 25 2018 02:41
@brittanyrutherford - well, my IE test is showing a fairly normal handling of the long paragraph. So I don't know if I have enough of the same context that you are using in your code, I just put a <main> element and a <p> element inside it. It seems to wrap normally, and I tried a couple other white-space settings and it seemed to handle them properly (at least the same as Opera is doing.)
Ken Haduch
@khaduch
Apr 25 2018 03:09
@brittanyrutherford - one thing that I can see is in the Internet Explorer F12 tools (devtools) it doesn't understand the <main> and <aside> tags - it shows them rather strangely if I set the IE Browser Emulation to an older version. For example, it will just show <aside></aside> at the place of the opening tag, and </aside><//aside> at the place where the closing tag is in the document.
Not really helpful to your situation, necessarily, but somewhat interesting...
include*engine
@newtothat
Apr 25 2018 03:19
in hosting websites there is something im confused with
they wrote there 1. one website 2. limitless website?
do they mean webpage by writing that?
  1. month;ly 1.5 $
  2. monthly 5 $
Dhaval Vira
@dhavalveera
Apr 25 2018 03:22
hey @newtothat
include*engine
@newtothat
Apr 25 2018 03:22
hi
Dhaval Vira
@dhavalveera
Apr 25 2018 03:22
from where you are going to Purchase Hosting Service
include*engine
@newtothat
Apr 25 2018 03:22
turkey?
Dhaval Vira
@dhavalveera
Apr 25 2018 03:22
not Country dude, Hosting Service
include*engine
@newtothat
Apr 25 2018 03:22
ohh you mean website?
Dhaval Vira
@dhavalveera
Apr 25 2018 03:22
Yes
Claudio Restifo
@Marmiz
Apr 25 2018 03:23

@newtothat usually webpage !== website:

  • webpage: home page/ landing page / about us ...
  • website: can be a whole domain with sub domain.

Better ask directly to the provider to be sure :)

Dhaval Vira
@dhavalveera
Apr 25 2018 03:23
which Hosting Service you are checking
include*engine
@newtothat
Apr 25 2018 03:23
@Marmiz i know a website have all subpages
but if i buy first one that means i cant have more than one page? like only one option?
Dhaval Vira
@dhavalveera
Apr 25 2018 03:24
@newtothat dude text me directly
include*engine
@newtothat
Apr 25 2018 03:25
@dhavalveera im just looking which one is cheaper
i went to natro.com godaddy and few others
im just checking for now
Dhaval Vira
@dhavalveera
Apr 25 2018 03:25
I will definitely help you
plz ping me directly
Jeff Lung YK
@jefflung
Apr 25 2018 03:47
hi, anyone think Svelte is worth to move from React? thanks
coderNewby
@coderNewby
Apr 25 2018 04:44
have another PM for you @DarrenfJ thanks
zootechdrum
@zootechdrum
Apr 25 2018 05:20
anyone here successfully link weathericon cdn to codepen?
All I am getting are black bard
black bars
Claudio Restifo
@Marmiz
Apr 25 2018 05:22
@zootechdrum you probably need font awesome with those as well
Markus Kiili
@Masd925
Apr 25 2018 05:22
Morning.
zootechdrum
@zootechdrum
Apr 25 2018 05:22
really
@Marmiz Let me find that cdn
@Marmiz na nothing happened
Claudio Restifo
@Marmiz
Apr 25 2018 05:25
@zootechdrum pen?
@Marmiz I copied all the cdn just to see if one would work.
Claudio Restifo
@Marmiz
Apr 25 2018 05:33
When they are rendered like that means that they are not treated as fonts
zootechdrum
@zootechdrum
Apr 25 2018 05:34
@Marmiz thats valuable info
so i need to somehow find a way to display as fonts
Claudio Restifo
@Marmiz
Apr 25 2018 05:36
@zootechdrum went to the github page, they don't mention any CDN, are you sure is loaded in page?
they just tell you to download and place it in a font directory at the same level as your css
zootechdrum
@zootechdrum
Apr 25 2018 05:36
@Marmiz yeah i noticed that too
I have been looking at other codepens with the same cdn thats supposed to have worked but their images are not showing up at all
heres the link for the cdn
Claudio Restifo
@Marmiz
Apr 25 2018 05:43
well, there's an error in console saying that it cannot import a font, perhaps is the one required for this icons
zootechdrum
@zootechdrum
Apr 25 2018 05:44
Ah shit.
Ali Bulut
@ali27001
Apr 25 2018 06:20
image.png
why am I getting this error
  var flag2 = true;
                        this.search.toLowerCase().split(' ').some(function (dat) {
                            if(item.soru_alt_baslik.toLowerCase().includes(dat) != true){
                                flag2 = false;
                            }
                        });
Brad
@bradtaniguchi
Apr 25 2018 06:21
@ali27001 this.search is undefined, need more context to where this code is
Ali Bulut
@ali27001
Apr 25 2018 06:22
show more code ?
jess
@jessmear
Apr 25 2018 06:23
Anyone around who is familiar with uglify-js?
Brad
@bradtaniguchi
Apr 25 2018 06:25
@ali27001 Yes show more code
Ben Thomas
@jub8jive
Apr 25 2018 06:29
hi
im building the tribute page..how do i get a picture for the page?
do i just use the img src="link"
Ali Bulut
@ali27001
Apr 25 2018 06:33
computed: {
filteredCustomers :function() {
if(!this.veriler) return [];
if(!this.search) return this.veriler;
const nestedResults = this.veriler.map(function(data) {
data.datalar.filter(function(item) {
                var flag3 = true;  //tue ile baslayıp boslukları ayrı dızı yapıyor. sonra dat ile hepsini tek tek kontrol ediyor. true degilse flag false olup sıradakine geçiyor.
                this.search.toLowerCase().split(' ').some(function (dat) {
                  if (item.soru_icerik.toLowerCase().includes(dat) != true) {
                    flag3 = false;
                  }
                });

                if (flag3) {
                  return true;
                }
"Unable to get property 'toLowerCase' of undefined or null reference"
Nazar
@IsaakNazar
Apr 25 2018 07:09
hey everybody!
Claudio Restifo
@Marmiz
Apr 25 2018 07:12
@ali27001 try a console.log of this and see if it's still pointing to the class instance or filter has binded it
Markus Kiili
@Masd925
Apr 25 2018 07:12
@IsaakNazar Hi.
Nazar
@IsaakNazar
Apr 25 2018 07:19
@Masd925 @Marmiz :wave:
Claudio Restifo
@Marmiz
Apr 25 2018 07:19
@IsaakNazar :wave:
Markus Kiili
@Masd925
Apr 25 2018 07:20
:wave:
Nazar
@IsaakNazar
Apr 25 2018 07:21
kata link
guys, cant get an array of proper fractions, any suggestions?
function properFractions(n){
  let result = [];
  let finalArr = [];
  let arrOfPrimes = arrayOfPrimeNums(n);
  for (let i = 1; i < n; i++) {
    result.push([i, n]);
  }
  for (let i = 0; i < result.length; i++) {
    for (let j = 0; j < arrOfPrimes.length; j++) {
      if ( result[i][0] % arrOfPrimes[j] === 0 &&
            result[i][1] % arrOfPrimes[j] !== 0 )
              finalArr.push(result[i]);
    }
  }

  return finalArr;
}
console.log(properFractions(15))



function isPrime(n) {
  let arr = [];
  for (var i = 2; i < n; i++) {
    if(n%i === 0) return false;
  }
  return true;
}

function arrayOfPrimeNums(n) {
  let arr = [];
  for (var i = 1; i <= n; i++) {
    arr.push(i)
  }
  return arr.filter(elem => isPrime(elem));
}
Ali Bulut
@ali27001
Apr 25 2018 07:49
The key "shrink-to-fit" is not recognized and ignored.
I'm experiencing such a problem on the tablet
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
attached
but not working on tablet
Jefferson
@jeffersonnnn
Apr 25 2018 08:20
hi guys.
Nazar
@IsaakNazar
Apr 25 2018 08:27
@jeffersonnnn :wave:
Dhaval Vira
@dhavalveera
Apr 25 2018 08:31
hi
krckyboy
@krckyboy
Apr 25 2018 09:17
Can I use <script defer> instead of having a chunk of code inside window.onload? Am I going to get the same results? I want to execute the code once the page has fully loaded, so am I going to get the same results with different methods (defer and window.onload)?
Stephen James
@sjames1958gm
Apr 25 2018 09:30
@krckyboy You can just reference a function in window.onload
I would prefer onload as it is more explicit as to when the code runs
Donnie
@Donnie-D
Apr 25 2018 09:36
hi fellas! i just sat down to start on the Wikipedia challenge. Funny enough, I don't understand the hints enough nor the challenge itself when I read it :laughing: . Anybody willing to give us a push :car:
what is the diffenrece b/w mediawiki and media wiki action api?
Donnie
@Donnie-D
Apr 25 2018 09:41
and what is the media wiki installation this page talks about? :scream:
Stephen James
@sjames1958gm
Apr 25 2018 09:46
The installation is if you want to install a wiki on your own server (not really relevant to this project)
The action API just means that the URL contains actions that describe the data to be returned
Donnie
@Donnie-D
Apr 25 2018 09:51
@sjames1958gm and there is a link given in the challenge for wiki sandbox. its got so many strange options and boxes its horrifying :fearful: . (only sandboxes i remember are the ones fun for the kiddies. why cant we have life simpler and less scary)
Stephen James
@sjames1958gm
Apr 25 2018 09:52
@Donnie-D Yeah, you aren't the first to say that :)
Donnie
@Donnie-D
Apr 25 2018 09:53
:satisfied:
Stephen James
@sjames1958gm
Apr 25 2018 09:54
Maybe this page is more useful
https://www.mediawiki.org/wiki/API:Search_and_discovery
Donnie
@Donnie-D
Apr 25 2018 09:58
@sjames1958gm if i am getting this right (which i generally dont :smile: ) I have to get that main url for Wikipedia upon my every search and attach an action at the end showing my search intent or something so that it brings up the results?
Stephen James
@sjames1958gm
Apr 25 2018 10:00
@Donnie-D Yes, it will return json that you format onto your page.
Generally you can put the URL into your browser address bar to get a view of the format
Actually I think I used the API described on this page :)
https://www.mediawiki.org/wiki/API:Search
There are many ways to get the same data
Donnie
@Donnie-D
Apr 25 2018 10:02
i am gonna use the dutch one. that way people cant tell if i am geting the right results :thought_balloon:
Stephen James
@sjames1958gm
Apr 25 2018 10:03
lol
https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=Albert%20Einstein
Here is a sample query for info about Albert Einstein from that page above
Donnie
@Donnie-D
Apr 25 2018 10:07
@sjames1958gm were you born a legend or just grew into one? : :+1: :bow: I am going to read the links you shared. Actually the one before the last egyptian hieroglyphs you shared does seem to be a point to start :smile:
https://www.mediawiki.org/wiki/API:Search this one
Stephen James
@sjames1958gm
Apr 25 2018 10:08
@Donnie-D I was a legend in a previous life, just kept going in this one :)
:+1:
Donnie
@Donnie-D
Apr 25 2018 10:08
so the legend is back then hahahah :clap:
i am going to copy those links in a pvt msg which might cause you offense but i have a solid reason. my laptop battery is about to die and the charger is far away in the other room. If i dont save this info now i'll be doomed
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 10:22
@khaduch I believe my problem is that when I use display flex on the main container, paragraphs inside start acting weird
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 10:35
so apparently, if the root element is set to display flex, the inner paragraphs or any text, don't wrap on IE
alpox
@alpox
Apr 25 2018 10:38
IE.... waaaaah
Markus Kiili
@Masd925
Apr 25 2018 10:58
...makes web development fun :sparkles:
Brittany Rutherford
@brittanyrutherford
Apr 25 2018 11:17
seems like the parent flex container should have max-width property set
otherwise everything else will start causing issues with width when flex is used
Kingsley
@Kingwindie
Apr 25 2018 11:28
 $(".navBar li").click(function() {
    $(this).addClass("activeLink");
  });

//css
.activeLink {
  background-color: slateblue;
  text-align: center;
  transition: 0.3s all linear;
}

//html
 <nav class="navBar">

            <li>
                <a href="homepage.html">Home</a>
            </li>

            <li>
                <a href="catalog.html">Catalog</a>
            </li>

            <li>
                <a href="#">About Us</a>
            </li>
</navBar>
so i have this piece of code that i can succefully toggle the classes between them,but i have a problem with it,when i click on a link like the first two,after the page refreshes the class does not exist anymore,how can i make the class stay when it loads the new page
Marianissimus
@Marianissimus
Apr 25 2018 11:36
well, only with front-end, you basically can't @Kingwindie . the class that you assign via js will dissapear on reload
what you can do is set an active link inside the HTML, say <a href="homepage.html" class="activeLink">
Stephen James
@sjames1958gm
Apr 25 2018 11:37
@Kingwindie You will have to reapply the class when you navigate the the specific page
Marianissimus
@Marianissimus
Apr 25 2018 11:38
and, yes, like @sjames1958gm says, reapply the class. also remove said class from the other elements inside the ul
( btw, you would better apply the class to the <a> tag, not the li; - a is the link itself) but this is just a matter of preferance
Kingsley
@Kingwindie
Apr 25 2018 11:46
@Marianissimus right,i want the color to span the whole li,i don't like how it looks on the a element only
@Marianissimus @sjames1958gm thanks
@Marianissimus @sjames1958gm if you look at stackoverflow and click on the nav links,that is what i am aiming for
Ken Haduch
@khaduch
Apr 25 2018 13:36
@brittanyrutherford - :point_up: April 25, 2018 6:22 AM - helpful information to know how you have it set up. That's a good reason to post all of the code in some way. Hope that you got it fixed!
Darren
@DarrenfJ
Apr 25 2018 14:01
morning fCC
hey brutha! @khaduch how goes it?
Marc
@MWBauer
Apr 25 2018 14:26
Morning everyone!
Marc
@MWBauer
Apr 25 2018 14:37
Ya'll disappeared....
Marc
@MWBauer
Apr 25 2018 15:02
anyone here...have a moment to help?
Finit
@xubeng
Apr 25 2018 15:07
evening
Marc
@MWBauer
Apr 25 2018 15:07
Hey there. How are you?
Finit
@xubeng
Apr 25 2018 15:08
fine
Marc
@MWBauer
Apr 25 2018 15:08
Glad to hear it.
You teaching or learning tonight?
Finit
@xubeng
Apr 25 2018 15:11
learning and relax
Marc
@MWBauer
Apr 25 2018 15:14
Codepen has gotten a little screwy
It's decided that I need another half a page on the right side. How do I correct that?
范鼎
@Ding-Fan
Apr 25 2018 15:17
I can't understand your question.
Have you tried close & reopen Codepen?
Marc
@MWBauer
Apr 25 2018 15:18
As I'm coding, I have text floating around a box and the box is half a page to the right, beyond the normal right border.
I just opened it and some of my code is gone and now it's doing this.
范鼎
@Ding-Fan
Apr 25 2018 15:19
It's weird
Did you login?
Marc
@MWBauer
Apr 25 2018 15:20
yes. Was just walking thru the settings to make sure that everything is right.
范鼎
@Ding-Fan
Apr 25 2018 15:20
Your code wouldn't lost if you have "auto save" switched on
Marc
@MWBauer
Apr 25 2018 15:20
I have it switched on. I have left and come back a dozen times and not lost anything.
范鼎
@Ding-Fan
Apr 25 2018 15:21
Can you share me your code link?
范鼎
@Ding-Fan
Apr 25 2018 15:23
image.png
Is this troubled you?
Marc
@MWBauer
Apr 25 2018 15:23
yes
范鼎
@Ding-Fan
Apr 25 2018 15:24
You can click Tidy to format your code
image.png
Marc
@MWBauer
Apr 25 2018 15:24
I went back and looked at the div.floated code and I don't see anything that says stretch the page
I've already done that.
范鼎
@Ding-Fan
Apr 25 2018 15:26
Analyze could tell you some error/warning
I noticed that you put more than one <html> </html> in the HTML part
That's the reason your float goes wired
If you've read this
image.png
范鼎
@Ding-Fan
Apr 25 2018 15:32
You wouldn't made this mistake :smiley:
Marc
@MWBauer
Apr 25 2018 15:35
Oh no, I guarantee I would make a mistake. I'm good at that.
范鼎
@Ding-Fan
Apr 25 2018 15:35
haha
Marc
@MWBauer
Apr 25 2018 15:37
I've taken all of the <html> tags out. Now look at it
it wants me to use the scoped attribute, but my research says that it's not used anymore and removed from most browsers.
It also says that style can't be a child of body, but I don't have a style within body.
范鼎
@Ding-Fan
Apr 25 2018 15:40
every thing you put in HTML editor
is in a <body></body>
image.png
you should merge the two <style></style> into one
Actually, you could put all your style sheets in the CSS editor
Marc
@MWBauer
Apr 25 2018 15:45
I'm walking through a book trying to learn the many different things. Do you think that it would be a good idea to start a new pen with each new chapter or each new lesson within the chapter? I was trying to just make a large project running them all together.
范鼎
@Ding-Fan
Apr 25 2018 15:45
Of course!
Marc
@MWBauer
Apr 25 2018 15:46
of course what?
范鼎
@Ding-Fan
Apr 25 2018 15:46
One Codepen for one project
Marc
@MWBauer
Apr 25 2018 15:47
That's horrible.
范鼎
@Ding-Fan
Apr 25 2018 15:48
That's the way to learn when you can't handle all of them.
Marc
@MWBauer
Apr 25 2018 15:50
So, how would I put multiple lessons on one playground?
范鼎
@Ding-Fan
Apr 25 2018 15:51
CSS is abbreviation of Cascading Style Sheets
Marc
@MWBauer
Apr 25 2018 15:54
hr.style-seven { overflow: visible; /* For IE */ 
height: 30px;
 border-style: solid; 
border-color: black; 
border-width: 1px 0 0 0; 
border-radius: 20px; } 
hr.style-seven:before { /* Not really supposed to work, but does */ 
display: block; 
content: ""; 
height: 30px; 
margin-top: -31px; 
border-style: solid;
 border-color: black; 
border-width: 0 0 1px 0;
 border-radius: 20px; }
How do I call this onto my page?
范鼎
@Ding-Fan
Apr 25 2018 15:54
If you want to merge multiple lessons into one, you should keep thinking about the new, unite Cascading Style Sheets without any conflict.

How do I call this onto my page?

In the CSS editor

Marc
@MWBauer
Apr 25 2018 15:55
I can copy the code in, but how do I use it in the html screen so that I can see it on my page?
范鼎
@Ding-Fan
Apr 25 2018 15:56
See it on your page?
Do you know what does CSS do?
Marc
@MWBauer
Apr 25 2018 15:57
You're aggravating me. If you have code, what do you do with it? You want to use it. You have to call it. How do I call this so that I can see it on my page?
范鼎
@Ding-Fan
Apr 25 2018 15:58
Put your CSS in CSS editor, Codepen call it for you.
Marc
@MWBauer
Apr 25 2018 15:59
In the CSS window I type ```
范鼎
@Ding-Fan
Apr 25 2018 15:59
image.png
Marc
@MWBauer
Apr 25 2018 16:00

In the CSS window I type

p    {color: red}

Then, when I use the <p> tag I call that design so that my text is red.

Now, how do I call this <hr>?
范鼎
@Ding-Fan
Apr 25 2018 16:04
I haven't tried your CSS, if them works, <hr /> tag would use that CSS.
Marc
@MWBauer
Apr 25 2018 16:04
but it doesn't
范鼎
@Ding-Fan
Apr 25 2018 16:05
<hr class="style-seven" />
Marc
@MWBauer
Apr 25 2018 16:05
Thank you.
范鼎
@Ding-Fan
Apr 25 2018 16:06
hr.style-seven
hr is for <hr />
.style-seven is for any element with class="style-seven"
what does hr.style-seven do?
Marc
@MWBauer
Apr 25 2018 16:07
Check out that page i pasted
范鼎
@Ding-Fan
Apr 25 2018 16:07

hr.style-seven
hr is for <hr />
.style-seven is for any element with class="style-seven"
what does hr.style-seven do?

Any <hr /> with class="style-seven"

Devina
@Devina
Apr 25 2018 16:08
hr{ border-color} would work too
范鼎
@Ding-Fan
Apr 25 2018 16:09
@MWBauer You really should follow your book step by step, mate
Marc
@MWBauer
Apr 25 2018 16:09
I'm trying to. But I'm also trying to do and be more along the way.
The creativity is what leads to being able to learn new things and using them allows me to remember them so that I can use them later.
Ken Haduch
@khaduch
Apr 25 2018 16:21
@MWBauer :point_up: April 25, 2018 11:45 AM - it's probably best to make a new pen for each new concept. Possibly one pen could be used for more than one thing, but you have to watch for things that might conflict with each other. You could try to make the CSS (styles, classes, etc.) unique for each section by using BEM style of naming, perhaps, but that wouldn't directly correspond to your material in the lessons. At least that's a couple thoughts that I had on that.
Marc
@MWBauer
Apr 25 2018 16:23
@khaduch THank you, sir. What is BEM>
范鼎
@Ding-Fan
Apr 25 2018 16:23
Marc
@MWBauer
Apr 25 2018 16:24
I ended up deleting the entire contents of Playground2 and renaming it for the lesson I was working on.
And then did the next one the same way.
Finally got my <hr/> working right.
with Ding-Fan's help
Ken Haduch
@khaduch
Apr 25 2018 16:26
@MWBauer - I put a link above http://getbem.com - a naming style for CSS classes that you could use (possibly) to make unique names for different sections of a lesson that you're working on. I learned about it in a React course that I am working my way through...
Marc
@MWBauer
Apr 25 2018 16:27
SO, I could make one playground and just be careful of my element names?
BEM Block Element modifier. Does it allow for design within each block?
That doesn't roll over to other blocks?
Ken Haduch
@khaduch
Apr 25 2018 16:29
@MWBauer - that is what I'm thinking. I'm just reading an article about it that is linked to on on that BEM site - https://blog.decaf.de/2015/06/24/why-bem-in-a-nutshell/ - it points out things about CSS inheritance and it's just the kind of thing that you could run into trying to mix several examples on a page. So, I think you could carefully name classes, etc. for different sections and avoid many problems and confusion.
Marc
@MWBauer
Apr 25 2018 16:30
And this is why I keep looking for you. Awesome info!
Thanks for sharing.
I have it open on another screen. I will look at it later. Wife is asking for my attentiong.
Take care.
:coffee:
Ken Haduch
@khaduch
Apr 25 2018 16:47
@MWBauer - great! Good luck with the learning!
Victor De Los Santos
@rdelosh
Apr 25 2018 16:51
hello, can somebody help me out with a question I have on the night life coordination app project?
So the app should reset the # of people going to events everyday right?
and so how can we achieve this in mongoose?
Tiago Correia
@tiagocorreiaalmeida
Apr 25 2018 17:10
I think what I did was check if I have he place stored and if so if its date creation is bigger than one day delete it if not just create the new one
Something like that I think
Or everytimebsomeone would say they are going toan event I would deletr all tge outdated eventes
Other approach could be a setimeout that would run evrry 24 hours
Either way theres probably better ways
coderNewby
@coderNewby
Apr 25 2018 19:10
this BEM sounds like a great thing to know thanks for the links @khaduch
Ken Haduch
@khaduch
Apr 25 2018 19:35
@coderNewby - yes, check it out and see what you think! You're welcome...
include*engine
@newtothat
Apr 25 2018 19:42
everyone says you have to build ,bobile and
mobile responsive website first
but what about applications?
Brad
@bradtaniguchi
Apr 25 2018 19:43
@newtothat Are you asking if you should build mobile-responsive web applications?
include*engine
@newtothat
Apr 25 2018 19:44
yes
but
on play store if you have your app already?
do you still need to make your wwesite responsive?
Brad
@bradtaniguchi
Apr 25 2018 19:45
A web app != a phone app
include*engine
@newtothat
Apr 25 2018 19:45
i know
Brad
@bradtaniguchi
Apr 25 2018 19:46
Ok, so like you can take google-drive as an example. They don't take a responsive approach, they take a Reactive approach. If you go to google drive on your phones browser (not the app) it will show correctly, but if you go on the desktop you get a totally different site.
include*engine
@newtothat
Apr 25 2018 19:46
but usually tutorials teach you that you have to build a responive website
Brad
@bradtaniguchi
Apr 25 2018 19:47
But if you shrink your screen on desktop and go to google-drive it isn't responsive and basically breaks
websites are different than web-apps, since web-apps are usually pretty complex
You can responsivly handle some navigation bar stuff, but if you have complex actions (such as ones available on google drive) you will have a much more difficult time.
include*engine
@newtothat
Apr 25 2018 19:48
if you have something like facebook do you have to make all of your pages responsive on-by-one?
Brad
@bradtaniguchi
Apr 25 2018 19:50
If I had complete control of a project as complex as facebook, I wouldn't I would take a Reactive approach.
The issue being facebook is heavy, so sending responsive code with the logic is A LOT more
include*engine
@newtothat
Apr 25 2018 19:51
what is reactive approach?
what do you mean
Brad
@bradtaniguchi
Apr 25 2018 19:52
The server finds out what type of defvice your accessing the site with and serves a different front-end essentially to you. So back to the drive example, its the same web-url, but different front-end to accomidate you if your on a desktop or mobile.
Your could probably get away with a redirect too
Yea so I double checked google drive, they send you to this url on mobile:
drive.google.com/drive/u/0/mobile/my-drive, where as on desktop, there is no mobile part of the url
include*engine
@newtothat
Apr 25 2018 19:54
do you have to learn a language for it?
Brad
@bradtaniguchi
Apr 25 2018 19:54
This is probably more of an architecture thing than anything.
Heres an article (first google result) of the comparison between reactive and responseive
include*engine
@newtothat
Apr 25 2018 19:55
probably needs a cs degree
Brad
@bradtaniguchi
Apr 25 2018 20:14
@newtothat Uhh I didn't learn any of this from school, nor have I ever heard of any school teaching this.
alpox
@alpox
Apr 25 2018 20:33
@bradtaniguchi I'm just finishing my cs degree. Can confirm. Universities wouldn't teach that
Amit Patel
@AmitP88
Apr 25 2018 20:48

hey guys, I'm working on the Twitch Channels api project and I'm trying to access the data of channels that are offline as follows:

$(document).ready(function() {
    var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

    for(var i = 0; i < channels.length; i++) {
      $.ajax({
        'url': 'https://wind-bow.glitch.me/twitch-api/streams/' + channels[i],
        'type': 'GET',
        'dataType': 'json',
        'success': function(stream_data) {
          console.log(stream_data);

          var status_background;

          if (stream_data.stream === null) {
            // If channel is offline
            status_background = 'class="offline"';

            $.ajax({
              'url': 'https://wind-bow.glitch.me/twitch-api/channels/' + channels[i] + '?callback=?',
              'type': 'GET',
              'dataType': 'json',
              'success': function(offline_channel_data) {
                console.log(offline_channel_data);
              }
            });              

          } else {
            // If channel is currently streaming
            status_background = 'class="online"';

            $("#streamers").append(
              '<tr ' + status_background + '>' +       
                '<td class="channel_logo_cell">' + '<img src=' + "'" + stream_data.stream.channel.logo + "'" + 'class="channel_logo"' + '/>' + '</td>' +
                '<td>' + '<a href=' + stream_data.stream.channel.url + ' ' + 'target=_blank' + ' ' + 'class="channel_name"' + '>' + stream_data.stream.channel.display_name + '</a>' + '</td>' +
                '<td>' + '<h3>' + stream_data.stream.stream_type + '</h3>' + '</td>' +
              '</tr>'
            );            
          }

        }
      });
    }
});

According to the dev console (I'll post a screenshot below), the data of offline channels is coming up as undefined. I suspect that it's because my for loop isn't being applied for the ajax call using the /channels url, but I don't understand why. Both ajax calls are using channels[i] and both are nested inside the for loop, so I don't quite understand why this isn't being applied.

ajax_call.png
Gulsvi
@gulsvi
Apr 25 2018 20:54
@AmitP88 Try using a .forEach() - it has a callback to handle the asynchronous ajax call for you.
Amit Patel
@AmitP88
Apr 25 2018 20:55
@gulsvi isn't using forEach considered bad practice? or is it acceptable in this circumstance?
Gulsvi
@gulsvi
Apr 25 2018 20:55
@AmitP88 I've never heard anyone say anything bad about forEach :)
At this point, I hear using var is a bad practice since the current version of JS with let and const has been out for 3 years now. We should be using those instead, and if you replace the var in your for loop with let, your ajax calls should also work out fine
Amit Patel
@AmitP88
Apr 25 2018 20:56
@gulsvi ah ok. I thought I read something online about that, but I guess not lol.
ahhhh I see. yeah, I know, that's es6. I still gotta practice that
so I could just replace var with let and I won't have to use forEach?
or should I do both?
oh nvm, I just looked at my code again and realized that was a dumb question haha
marcus dylan johnson
@mdjohns
Apr 25 2018 20:59
the forEach is also a bit more compact than a regular for loop. It’s nice to not have to type the whole for(let i = 0; i < …) every time.
Gulsvi
@gulsvi
Apr 25 2018 21:01
@AmitP88 It's best to not put async calls or functions in a for loop - there are cases where you can do it, but usually not a good move
This might explain a little better what's going on:
for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log("for(var): " + i), 1000);
}

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log("for(let): " + i), 1000);
}

[0, 1, 2, 3, 4].forEach(i => setTimeout(() => console.log("forEach: " + i), 1000));
Gulsvi
@gulsvi
Apr 25 2018 21:01
compare the console output for those three counters
Amit Patel
@AmitP88
Apr 25 2018 21:02
@gulsvi hmmm, so I need to change the logic of my code?
Gulsvi
@gulsvi
Apr 25 2018 21:02
setTimeout here is an async call, like $.ajax
Brad
@bradtaniguchi
Apr 25 2018 21:02
Id use the forEach ONLY if the following isn't true with the use-case:
Gulsvi
@gulsvi
Apr 25 2018 21:02
You need to use a forEach instead of a for loop - no need to change any logic
Brad
@bradtaniguchi
Apr 25 2018 21:02
  1. find,reduce,filter, every isn't a better choice
Amit Patel
@AmitP88
Apr 25 2018 21:02
ah ok
Brad
@bradtaniguchi
Apr 25 2018 21:02
  1. you can break through the loop.
If either one of those is a possiblity don't use the forEach, otherwise its fine AFAIK
Amit Patel
@AmitP88
Apr 25 2018 21:13
ok, I think I've done it (at least it works in the browser with no errors) :
$(document).ready(function() {
    var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

    channels.forEach(function(channel){
      $.ajax({
        'url': 'https://wind-bow.glitch.me/twitch-api/streams/' + channel,
        'type': 'GET',
        'dataType': 'json',
        'success': function(stream_data) {
          console.log(stream_data);

          var status_background;

          if (stream_data.stream === null) {
            // If channel is offline
            status_background = 'class="offline"';
          console.log(channel);            

            $.ajax({
              'url': 'https://wind-bow.glitch.me/twitch-api/channels/' + channel + '?callback=?',
              'type': 'GET',
              'dataType': 'json',
              'success': function(offline_channel_data) {
                console.log(offline_channel_data);

                $("#streamers").append(
                  '<tr ' + status_background + '>' +       
                    '<td class="channel_logo_cell">' + '<img src=' + "'" + offline_channel_data.logo + "'" + 'class="channel_logo"' + '/>' + '</td>' +
                    '<td>' + '<a href=' + offline_channel_data.url + ' ' + 'target=_blank' + ' ' + 'class="channel_name"' + '>' + offline_channel_data.display_name + '</a>' + '</td>' +
                    '<td>' + '<h3>' + 'Offline' + '</h3>' + '</td>' +
                  '</tr>'
                );
              }
            });              

          } else {
            // If channel is currently streaming
            status_background = 'class="online"';

            $("#streamers").append(
              '<tr ' + status_background + '>' +       
                '<td class="channel_logo_cell">' + '<img src=' + "'" + stream_data.stream.channel.logo + "'" + 'class="channel_logo"' + '/>' + '</td>' +
                '<td>' + '<a href=' + stream_data.stream.channel.url + ' ' + 'target=_blank' + ' ' + 'class="channel_name"' + '>' + stream_data.stream.channel.display_name + '</a>' + '</td>' +
                '<td>' + '<h3>' + stream_data.stream.stream_type + '</h3>' + '</td>' +
              '</tr>'
            );
          }

        }
      });
    });
});
Alvin
@AlvinW89
Apr 25 2018 22:53
Working on Portfolio, fwwdback on design:
Screen Shot 2018-04-25 at 6.53.00 PM.png
so far
eeflores
@eeflores
Apr 25 2018 23:01
good start?
Alvin
@AlvinW89
Apr 25 2018 23:11
Yea, just started
it mostly Bootstrap 4
eeflores
@eeflores
Apr 25 2018 23:14
:+1: