These are chat archives for FreeCodeCamp/HelpFrontEnd

23rd
Mar 2018
Rob
@PGFracing
Mar 23 2018 01:54
Good evening :)
JoEezy
@JoEeeezy_twitter
Mar 23 2018 02:03
a small amount negative letter spacing can make text look way better even with basic fonts :smile:
German Gamboa Gonzalez
@germangamboa95
Mar 23 2018 02:46
Can I have some feedback on my dummy text generator? https://germangamboa95.github.io/loremGenerator.io/
Nate Mallison
@NJM8
Mar 23 2018 02:49
@germangamboa95 looks good!
extra points for using materialize
I'm a fan myself. I would suggest adding a copy to clipboard button, and maybe use the lorem ipsum text? I think it is standard for placeholder text as it looks very similar to actual writing or something like that
German Gamboa Gonzalez
@germangamboa95
Mar 23 2018 02:54
@NJM8 Thanks! good idea on making the text easier to copy! And it is a few paragraphs taken from a tale of two cities. My idea is to hook it up to a data base and allow people to add to the list of words and phrases to make it a bit more interactive :)
CamperBot
@camperbot
Mar 23 2018 02:54
germangamboa95 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @njm8 |http://www.freecodecamp.org/njm8
German Gamboa Gonzalez
@germangamboa95
Mar 23 2018 02:54
Currently going thru a coding bootcamp:) I am making myself create a project each day:P
Ken Haduch
@khaduch
Mar 23 2018 03:17
@germangamboa95 - that's a neat little project - sounds like a good idea that you have going with a project a day. Nice work!
@DarkxPunk - where did you come up with that super-complex selector?
Ken Haduch
@khaduch
Mar 23 2018 03:42
@DarkxPunk - I'm not experienced with this :target pseudo-class. but it seems that there is some confusion in my mind (looking at the docs for this feature) in that you are trying to highlight the anchor that is selecting the target, as opposed to what seems to be the way the examples are specified, highlighting the destination that would be selected by the link? The fact that is seems to almost be working (if I'm interpreting your results correctly) might be misleading as opposed to the way that this is supposed to work?
hensn5250
@hensn5250
Mar 23 2018 03:43
@khaduch I was trying to help solve @DarkxPunk 's issue earlier but I was ending up down a rabbit hole. I was going to change the <a> tags to buttons and use the ':default' pseudo-element to cause the first element to be focused when the page load.
DarkxPunk
@DarkxPunk
Mar 23 2018 03:45
There is a default pseudo element? What the hell that do XD
hensn5250
@hensn5250
Mar 23 2018 03:46
@DarkxPunk yes but it's limited to button, input, and other form elements
Ken Haduch
@khaduch
Mar 23 2018 03:47
@hensn5250 - it just seems that the way he almost has it working and the way the examples are coded and working (on the MDN page) is kind of the opposite. If I take his pen and put some text in those <span> elements, and add a CSS to select span:target - those span element's text string get highlighted, in line with the example on the MDN doc page for :target
DarkxPunk
@DarkxPunk
Mar 23 2018 03:47
Sadly you can’t really use buttons because I need anchors to do the targeting XD
hensn5250
@hensn5250
Mar 23 2018 03:48
@DarkxPunk I tried the above with your existing code but it didn't work. Some issues with specificity w/ other selector may have been the issue.
DarkxPunk
@DarkxPunk
Mar 23 2018 03:48
It seems :target and dependencies override :hove XD
I am a css crazy man trying to do things I shouldn’t XD
I want it to work!
hensn5250
@hensn5250
Mar 23 2018 03:49
@khaduch I see. False positives. I was wondering why he chose to use the ':target' pseudo-class
Sorin Ruse
@sorinr
Mar 23 2018 03:50
@germangamboa95 i would make it as a plugin function where you can use it in js like: document.getElementById('element#').text(loremGenerator(n)) where n is the number of words you want to be generated
German Gamboa Gonzalez
@germangamboa95
Mar 23 2018 03:51
@sorinr Thanks! that is also a good idea. I am trying to implement the copy to clip board feature. I'll do that one next.
CamperBot
@camperbot
Mar 23 2018 03:51
germangamboa95 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1408 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Mar 23 2018 03:55
@germangamboa95 the advantage of a helper function like that is that you keep your html prototype clean and its much easier to test the layout for elements with different amount of text in it
DarkxPunk
@DarkxPunk
Mar 23 2018 03:56
@hensn5250 @khaduch My ideal is if someone loads the page, the first tab is active, then when someone switches they get the new tab but it uses :target which means that if someone forwards the URL the recipient would hit the page and get scrolled down to that section showing the correct information XD
I must make it work!
German Gamboa Gonzalez
@germangamboa95
Mar 23 2018 04:04
@sorinr True. I always struggle with knowing how plan out my code and which design patterns to use. Also do you know if there is anyway to make a copy to clip board functionality without having to create a hidden input field?
I am using select() and document.execCommand("Copy");
Ken Haduch
@khaduch
Mar 23 2018 04:08
@germangamboa95 - this page looks like it has lots of info about copying to clipboard... looks like some of the stuff that you are using is discussed there.
Sorin Ruse
@sorinr
Mar 23 2018 04:13
@khaduch :wave:
German Gamboa Gonzalez
@germangamboa95
Mar 23 2018 04:13
@khaduch Thanks! You guys are always great help!
CamperBot
@camperbot
Mar 23 2018 04:13
germangamboa95 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3812 | @khaduch |http://www.freecodecamp.org/khaduch
hensn5250
@hensn5250
Mar 23 2018 04:13
@DarkxPunk I don't understand the bottom half of your last message but it sounds cool. Try removing some of the extra stuff like the transitions. Keep it as basic as possible so you can find where the problems are. As far as using the anchor tags , you can nest them inside the button tags, but you would need some JS to make that work properly. Good luck.
Ken Haduch
@khaduch
Mar 23 2018 04:13
@sorinr - hello, my friend. How are things going?
German Gamboa Gonzalez
@germangamboa95
Mar 23 2018 04:14
I added the copy to clipboard functionality. its hacky but it works:P https://germangamboa95.github.io/loremGenerator.io/
Sorin Ruse
@sorinr
Mar 23 2018 04:15
@khaduch great. I'm in a planning phase of a new project and i'm exited about it
Sorin Ruse
@sorinr
Mar 23 2018 04:44
@germangamboa95 just add some popup message to inform the user the text has been copied to the clipboard
@germangamboa95 you can use a tooltip that will show up after document.execCommand("Copy");
JoEezy
@JoEeeezy_twitter
Mar 23 2018 05:24
can the syntax colors in this chat be found as a theme ?
i like them alot
Rob
@PGFracing
Mar 23 2018 05:24
just use a html color code chart
JoEezy
@JoEeeezy_twitter
Mar 23 2018 05:25
:+1:
JoEezy
@JoEeeezy_twitter
Mar 23 2018 06:03
if an api asks to limit requests to no more than 10 per minute does that means using .getJSON with $(document).ready is a bad idea (I'm assuming every time a user loads the page it's gonna request data from the api)
how would i make it so it doesn't request with the page and only requests data every minute or so? (or am i misunderstanding the way it works?)
JoEezy
@JoEeeezy_twitter
Mar 23 2018 06:09
hmm i'm starting to wonder if maybe i have to use a server for something like that ...
Sorin Ruse
@sorinr
Mar 23 2018 06:11
@JoEeeezy_twitter if you are using codepen for your development i highly recommend you to disable in settings->behavior the auto-updating preview because any time you make a little change in code you will get a new call to the api. As an alternative you can make an api call, grab the response, put it in a variable and work with that var until you finish your all design and then switch back to live api calls
JoEezy
@JoEeeezy_twitter
Mar 23 2018 06:14
ah good advice thank you will do that now :+1:
Abhinav Mishra
@abhinav-m
Mar 23 2018 07:56
@Xapuu Hmm, i think for this use case, i might have to use the redux store(i was inclined of doing it the other way) , i need to make an api call with the saved data, so it seems like a good idea to save it in the redux store
mahmoud hisham mahmoud
@m-elattar
Mar 23 2018 09:04
hello guys i currently using Gulp , i want any package dealing with SVG extentions
coderNewby
@coderNewby
Mar 23 2018 09:49
@DarrenfJ thanks for the advice
CamperBot
@camperbot
Mar 23 2018 09:49
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2435 | @darrenfj |http://www.freecodecamp.org/darrenfj
Stephen James
@sjames1958gm
Mar 23 2018 09:57
@JoEeeezy_twitter You are correct from the client side it will not be possible to completely restrict the requests to the API. because
the requests could come from different browsers, I guess from the same browser you could use local storage to limit
new requests by time, if the data is not too dynamic that might work, but you might end up with stale views of data.
Even on the server side you would have this same stale data problem, but you might be able to shorten the delay
because you can cache for more than one client, thus reducing the API load further.
Roman Struna
@RomchyFCC
Mar 23 2018 11:53
What are best practices in React in regards to popups? Should be rendered on document load and when a button is clicked it would (show/hide) OR would it be better to call reactDOM render method and render it on click? and unmount it after the interaction is over
Inga Vaiciakauskaite
@ingava
Mar 23 2018 11:56
I wonder is someone could help me with this. I'm working on a react app. I have a search input and I need to send a tracking event (I have a function for this) only when a user stops typing for 500 ms. So for the input field I have an onChange function which resets the state. Thats all fine and good. But how can I send a tracking event only when a user stops typing for 500 ms? I understand that this involves setTimeout but I just can't figure out exactly how to do this. This is more of an advanced stuff but perhaps someone has already run into something similar? Thanks
@RomchyFCC usually, I just have a local state in that component saying something like { showPopup: false }. Then onClick I change the state from false to true. And in the render() method I check for the value in the state and then depending on it render the popup. Something like this:
<div>
   {this.state.showPopup && <Popup/>}
</div>
Roman Struna
@RomchyFCC
Mar 23 2018 12:01
@ingava Yes I've seen that before, I implemented it both ways but I dunno which is more performant/better :/
Nate Mallison
@NJM8
Mar 23 2018 12:01
@ingava I think you can have a global variable, call it timer or something, when the user is typing have onChange reset that timer, then start it again. That way each keypress resets the timer.
something like this:
let myTimer;

// array of all keycodes you want to check against
const keys = [];

function doStuff(){
  // whatever you want to do when user hasn't been typing
}

function onChange(event){
  if (keys.includes(event.keyCode)) {
   clearTimeout(myTimer);
   myTimer = setTimeout(doStuff, 500);
  }
}
Stephen James
@sjames1958gm
Mar 23 2018 12:10
@ingava You can implement as @NJM8 says, but don't make it a global, make the value a class variable.
In case you have to use the same component more than once. You could even store the timer reference as a state variable.
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:10
@NJM8 oh wait, I had that already but didn't realise it was working properly! Thanks a lot. My final functions looks a little bit different but I think it is essentially the same thing
CamperBot
@camperbot
Mar 23 2018 12:10
ingava sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @njm8 |http://www.freecodecamp.org/njm8
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:11
@sjames1958gm yeah, I'll show you what I've got
Stephen James
@sjames1958gm
Mar 23 2018 12:12
@ingava :+1:
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:12
jeez, one sec
  _handleSearchChange = search => {
    this.setState({ search });


   if (this.timer) clearTimeout(this.timer);

    this.timer = setTimeout(() => {
      trackEvent('Clicked Instant Search Result', { search });
    }, 500);

  };
@sjames1958gm @NJM8 what do you think? I'm also clearing the timeout on componentWillUnmount to prevent memory leakage
Nate Mallison
@NJM8
Mar 23 2018 12:16
@ingava I haven't gotten to react yet.... so it looks like magic :smile:
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:16
@NJM8 oh really? :D React is really cool. It looks like you have pretty solid JS foundations so you'll be fine
Nate Mallison
@NJM8
Mar 23 2018 12:22
Thanks. I spent a lot of time on other tutorials in between the FCC foundations and the intermediate front end projects. I finished the intermediate algorithms last night. I started them on Wednesday. :smile:
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:25
@NJM8 I can see that you enjoy doing algorithms. I cannot say the same about me but I feel that this is my weakest place so I've started doing more of them. I'm working as a dev but usually I don't need to write any difficult algorithms. However, when I do run into them, my brain just hurts! So I've started practicing more
Nate Mallison
@NJM8
Mar 23 2018 12:29
Yup, more and more and more. Here are some resources you may like: https://www.rithmschool.com/courses - JS courses are great, brief and lots of practice. Also codewars.com or exercism.io. I really like those two because you can see other peoples solutions to the problem.
What language is your website in?
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:32
@NJM8 do you mean the one I'm working on right now? I'm working remotely for a company that builds various products. Currently, I'm working on a Chrome extension and a website. This product hasn't been officially released yet: https://usefyi.com/app
@NJM8 I've tried codewars.com but the website is very slow. I'll look into exercism, I've heard of it on a podcast some time ago
Stephen James
@sjames1958gm
Mar 23 2018 12:33
@ingava Looks fine
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:33
@sjames1958gm thanks a lot
CamperBot
@camperbot
Mar 23 2018 12:33
ingava sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9127 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 23 2018 12:35
Speaking of algorithm, for my current project I needed to convert a string of hex digits to an array of integers from 0-255.
I basically did what the chunky monkey challenge did to pick the hex digits off two at a time (then used parseInt(str, 16) ) to create the array.
abraham anak agung
@padunk
Mar 23 2018 12:36
@ingava just curious, what did trackevent do?
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:37
@padunk this is for my company to see how users behave. It is not visible in that code snippet but the function sends an event to a service called 'amplitude'. You can the login to the amplitude website and see what your users did, what they searched for an so on. It helps to understand how the product is being used and if it needs to be adjusted in some ways
abraham anak agung
@padunk
Mar 23 2018 12:38
@sjames1958gm like changing color hex to rgb number?
Stephen James
@sjames1958gm
Mar 23 2018 12:38
@padunk Yes
abraham anak agung
@padunk
Mar 23 2018 12:39
@ingava oh i see. Thanks
CamperBot
@camperbot
Mar 23 2018 12:39
padunk sends brownie points to @ingava :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @ingava |http://www.freecodecamp.org/ingava
abraham anak agung
@padunk
Mar 23 2018 12:40
@sjames1958gm i still dont know how to do that, need to try it sometimes :smile:
Stephen James
@sjames1958gm
Mar 23 2018 12:41
@padunk Yeah, I am doing some crypto stuff in nodejs and the DB values are strings and crypto needs arrays of bytes
Markus Kiili
@Masd925
Mar 23 2018 12:42
@sjames1958gm My first tough JS algorithm to make at work was to find the possible zero of a complicated function. First try was a very compact and beautiful recursive algorithm that crashed the browser in no time.
Stephen James
@sjames1958gm
Mar 23 2018 12:43
@Masd925 That is the special meaning of recursive "descent".
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:44
@Masd925 ha ha, great sory!
Markus Kiili
@Masd925
Mar 23 2018 12:44
@sjames1958gm Yeah. A simple for loop that checked the parameter range with accuracy intervals was better.
abraham anak agung
@padunk
Mar 23 2018 12:46
What is the basic of making recursive function? Sometime still stuck at making one
Nate Mallison
@NJM8
Mar 23 2018 12:46
@ingava I would definitely do this course. CS fundamentals in JS. Making your own data structures, search and sort algorithms. great stuff. I meant the website in your profile. girlscode.it
@padunk A recursive function is one that calls itself. It will have a terminating condition, if that condition is not met it calls itself again adjusting the parameters somehow, working towards the condition.
Markus Kiili
@Masd925
Mar 23 2018 12:48
@padunk Function code can contain calls to functions. I recursion it happens to be a call to the same function (each call makes a separate execution context).
Inga Vaiciakauskaite
@ingava
Mar 23 2018 12:48
@NJM8 thanks! Oh I see, it is my blog about my coding journey. It's in Lithuanian
Nate Mallison
@NJM8
Mar 23 2018 12:49
what get's confusing is that when the function calls itself it is not executed right away, but rolled up in memory, then when you hit the termination condition they all unroll.
abraham anak agung
@padunk
Mar 23 2018 12:51
@NJM8 yes, i still do that, crash the browser when making recursive function
Nate Mallison
@NJM8
Mar 23 2018 12:51
well, yeah you have to be careful it will actually hit the terminator
If it doesn't it has to retain all the function calls in memory
then crash
just like a while loop
but a bit different
@padunk consider this:
function printOne(num){
  if (num === 1) {
    console.log(num);
  } else {
    printOne(num - 1);
  }
}

printOne(5);
abraham anak agung
@padunk
Mar 23 2018 12:55
@NJM8 so the terminator is num === 1 right?
Nate Mallison
@NJM8
Mar 23 2018 12:56
yes
so if num is 1 we print, otherwise call function again, change parameter working towards terminator
now consider this one:
function printOne(num){
  for (let i = num; i > 0; i--) {
    if (num === 1) {
      console.log(num);
    }
  }
}
abraham anak agung
@padunk
Mar 23 2018 13:01
@NJM8 that wont run right? for loops condition is going to infinite loop?
Markus Kiili
@Masd925
Mar 23 2018 13:01
@NJM8 if(i===1) and console.log(i) perhaps.
Nate Mallison
@NJM8
Mar 23 2018 13:01
oh
i wrote it wrong, lol
see now? So it does the same thing but with an iterator. What's important here is to think about how the computer works it.
with the iterative, more or less we:
call function
Markus Kiili
@Masd925
Mar 23 2018 13:03
@padunk In programming languages that optimize recursion well (not JS), that recursion would be as efficient as that loop.
Nate Mallison
@NJM8
Mar 23 2018 13:03
start loop
i = 5, do nothing
i = 4, do nothing
i = 3, do nothing
i = 2, do nothing
i = 1, Print it
abraham anak agung
@padunk
Mar 23 2018 13:05
@NJM8 yes, i think i get it now. @Masd925 really? I tought for loops is better than recursive, cause it takea more memory?
Nate Mallison
@NJM8
Mar 23 2018 13:07
with the recursive one:
it will grow inside itself,
printOne(5)
printOne(printOne(4))
printOne(printOne(printOne(3)))
printOne(printOne(printOne(printOne(2))))
printOne(printOne(printOne(printOne(printOne(1)))))
printOne(printOne(printOne(printOne(1))))
printOne(printOne(printOne(1)))
printOne(printOne(1))
printOne(1)
Markus Kiili
@Masd925
Mar 23 2018 13:07
@padunk In languages that optimize recursion well, such recursion is effectively turned into a loop, I think. So they have same efficiency.
Nate Mallison
@NJM8
Mar 23 2018 13:08
efficiency depends on the languages implementation. Some languages have tail recursion optimizations so it performs better in memory
but my example is contrived, you would never need to write that function one way or the other to be faster. recursion is useful when the operation can be defined in terms of itself
like traversing a binary tree
abraham anak agung
@padunk
Mar 23 2018 13:10
@NJM8 @Masd925 thanks guys, this is a new learning subject for me.
CamperBot
@camperbot
Mar 23 2018 13:10
padunk sends brownie points to @njm8 and @masd925 :sparkles: :thumbsup: :sparkles:
abraham anak agung
@padunk
Mar 23 2018 13:12
@NJM8 dont know what a binary tree is. I am Reading abouy data structure and algo, it turns out that Java have a linklist built in and js just have array :smile:
Nate Mallison
@NJM8
Mar 23 2018 13:12
Sure thing! Start reading SICP. Great stuff, and very confusing, lol
abraham anak agung
@padunk
Mar 23 2018 13:12
Sti
Still have eloquent js to read next :smile:
Nate Mallison
@NJM8
Mar 23 2018 13:13
binary tree is just a node with two nodes, left is less value, right it higher value. each of them is a node, left lesser right higher, and so on.
    10
   /   \
  5    8
 / \   / \
2   3 6   9
Nate Mallison
@NJM8
Mar 23 2018 13:19
recursion to find the 3 would be :
function findVal(tree, val){
  if (tree.num === val) {
    return tree.num;
  } else {
    if (val > tree.left.num) {
      return findVal(tree.right, val);
    } else {
      return findVal(tree.left, val);
    }
  }
}

findVal(tree, 3);
yup, and JS array is just an object. It's objects all the way down. :smile:
abraham anak agung
@padunk
Mar 23 2018 13:50
@NJM8 what the data in tree looks like? An object?
Nate Mallison
@NJM8
Mar 23 2018 13:51
like the picture above, 10, 5, 8 etc
abraham anak agung
@padunk
Mar 23 2018 13:54
@NJM8
Nate Mallison
@NJM8
Mar 23 2018 13:54
my BST code, you can the node structure and tree base at the beginning
That search function up there may not work. but the stuff on my github definitely does
abraham anak agung
@padunk
Mar 23 2018 13:56
Sorry, i am on mobile. @NJM8 great link. Thanks again
CamperBot
@camperbot
Mar 23 2018 13:56
padunk sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
api offline
Nate Mallison
@NJM8
Mar 23 2018 14:04
Sure thing!
dinesh
@1532j0004kg
Mar 23 2018 15:21
guys i have a big dougbt . . We can able to create a front end app with html,css,js . then , why we need to learn framework (react) for frontend .
can anybody please tell
Dardan Demiri
@dardandmr
Mar 23 2018 15:30
@1532j0004kg
Because with Frameworks you can acheve more things in les time
And you can manage them better for scalability
Markus Kiili
@Masd925
Mar 23 2018 15:32
@1532j0004kg Libraries and frameworks make doing standard tasks easier. Front-end frameworks help generating content from data etc.
Nate Mallison
@NJM8
Mar 23 2018 15:33
@1532j0004kg stuff that FCC hands you early on like the wikipedia viewer don't really need a framework, but they can be nice. Now imagine trying to recreate your operating system with JS. It would be a nightmare. Frameworks provide a simpler and more structured way to build complex apps. Plus when someone else works on that app with you, if they know the framework you both can work on the same code an understand what it does. If anyone can understand some of the JS I have written bless them. HA
dinesh
@1532j0004kg
Mar 23 2018 15:44
@ndburrus @NJM8 @Masd925 @dardandmr thanks
Norvin Burrus
@ndburrus
Mar 23 2018 15:45
@1532j0004kg you're welcome! enjoy :+1:
Nitin bisht
@ntnbst
Mar 23 2018 17:08
Anyone used react router with Material UI ??
mahmoud hisham mahmoud
@m-elattar
Mar 23 2018 17:10
@ndburrus thx man (y)
CamperBot
@camperbot
Mar 23 2018 17:10
:star2: 2189 | @ndburrus |http://www.freecodecamp.org/ndburrus
m-elattar sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
Norvin Burrus
@ndburrus
Mar 23 2018 17:28
@m-elattar you're welcome! enjoy :+1:
Dardan Demiri
@dardandmr
Mar 23 2018 17:30
For All the campers a Great gift from Microsoft
https://www.visualstudio.com/dev-essentials/
Brad
@bradtaniguchi
Mar 23 2018 17:31
@dardandmr Wait can I get Visual Studios Community on linux???
Dardan Demiri
@dardandmr
Mar 23 2018 17:31
I think so
Check it out
there are a lot of Free Stuff
Brad
@bradtaniguchi
Mar 23 2018 17:32
Nope, only Mac and Windows are supported
Dardan Demiri
@dardandmr
Mar 23 2018 17:32
Free Courses
blob
blob
Brad
@bradtaniguchi
Mar 23 2018 17:33
Best thing out of all of that is the azure credit, but then idk if I want to go out and use azure
Dardan Demiri
@dardandmr
Mar 23 2018 17:34
Amazing Stuff I Wish I Knew Earlier
Brad
@bradtaniguchi
Mar 23 2018 17:36
I know google gives you 300$ credit you can use when you signup and has a bunch always free tier stuff as well. I'm to scared to try MS products, I only develop on Linux so support probably is patchy
Dardan Demiri
@dardandmr
Mar 23 2018 17:37
@bradtaniguchi That's great
Brad
@bradtaniguchi
Mar 23 2018 17:37
@dardandmr Thanks tho, always nice to find free stuff :D
CamperBot
@camperbot
Mar 23 2018 17:37
bradtaniguchi sends brownie points to @dardandmr :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @dardandmr |http://www.freecodecamp.org/dardandmr
Dardan Demiri
@dardandmr
Mar 23 2018 17:38
You are welcome ;)

you can check the for
LinkedIn Learning - 3 month Premium subscription
Pluralsight - Free for 3 months

Great stuff

DarkxPunk
@DarkxPunk
Mar 23 2018 18:08
Hey bright minds. Anyone wanna try and solve a weird issue I am having XD
Brad
@bradtaniguchi
Mar 23 2018 18:08
@DarkxPunk I think that is what we usually do haha
DarkxPunk
@DarkxPunk
Mar 23 2018 18:09
I know what the problem is its finding a way to circumvent.
I need the "general inquries" to highlight on hover, when other tabs are selected.
Brad
@bradtaniguchi
Mar 23 2018 18:11
Say your issue again?
Wait nevermind I understand
Gulsvi
@gulsvi
Mar 23 2018 18:12
@DarkxPunk Any reason you don't use :active and :hover instead?
err :focus
DarkxPunk
@DarkxPunk
Mar 23 2018 18:24
@gulsvi Could you clarify further, I am not following?
niniyzni
@niniyzni
Mar 23 2018 18:34

hi,

  • when user clicks third time in the checkbox it should show red color.
  • it should go in a loop.
  • can you tell me how to achieve it.
  • providing my code below
  • I used if condition for multiple of 3 but its not working

https://stackblitz.com/edit/angular-c8ggww?file=app/app.component.ts

lagunasurfer
@lagunasurfer
Mar 23 2018 18:45
Hi everyone,is anyone onlien right now?
online**
Well if anyone is here, im having trouble with my project- cant seem to get my image to be circular
Here'sthe code
<img class ="small profile" src ="http://i0.kym-cdn.com/entries/icons/original/000/011/365/GRUMPYCAT.jpg" alt ="profile pic" align="right" height="150px" width="250px">
I'm using this page as reference but its not working
I tried it this way and it didnt work.
<img class ="img-circle" src ="http://i0.kym-cdn.com/entries/icons/original/000/011/365/GRUMPYCAT.jpg" alt ="profile pic" align="right" height="150px" width="250px">
DarkxPunk
@DarkxPunk
Mar 23 2018 18:50
You nested the .small inside .profile
You need to close .profile
@lagunasurfer
lagunasurfer
@lagunasurfer
Mar 23 2018 18:52
oh, thank you
DarkxPunk
@DarkxPunk
Mar 23 2018 18:53
@lagunasurfer Happens to the best of us.
Just last week I forgot to add the : XD
Went over the code 6 times XD
Nate Mallison
@NJM8
Mar 23 2018 18:55
@DarkxPunk Any reason you aren't using JS just to add a custom class to style clicked elements?
DarkxPunk
@DarkxPunk
Mar 23 2018 18:56
@NJM8 Because I am addicted to CCS3?
Nate Mallison
@NJM8
Mar 23 2018 18:56
Or you could use a checkbox group and style the checked element?
@DarkxPunk No worries, we all have our vices. :smile:
DarkxPunk
@DarkxPunk
Mar 23 2018 18:57
@NJM8 Yeah my original used radio buttons, worked great, but then I discovered :target and fell in love.
Nate Mallison
@NJM8
Mar 23 2018 18:58
ah, so the problem is really just having that first element selected off the bat, right? it looks like the complex selector to do that is preventing the hover
DarkxPunk
@DarkxPunk
Mar 23 2018 19:03
@NJM8 You are exactly right
Nate Mallison
@NJM8
Mar 23 2018 19:05
Well I got that far, I have no idea what half that CSS does there. lol
JS? sure, CSS? I struggle
DarkxPunk
@DarkxPunk
Mar 23 2018 19:11
Well it seems :target supersedes :hover.
Nate Mallison
@NJM8
Mar 23 2018 19:16
@DarkxPunk :smile:
.call-to-action.inverse:hover {
    color: #ffffff !important;
    box-shadow: inset 0 0 0.7501vw 0.15vw #ffffff !important;
    background-color: #e73748 !important;
    transition: color 0.2s ease,
                    box-shadow 0.2s ease,
                    background-color 0.2s ease !important;
}
try that puppy out
DarkxPunk
@DarkxPunk
Mar 23 2018 19:17
:laughing:
HA HA HA XD
I have been stressing about this for almost a week! XD
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:19
body { color: orange; }

#usa { border-bottom: 16000px solid grey; }

.muslims { display: none !important; }

.women { font-size: xx-small; }

.migrants--undocumented {
  position: relative;
  bottom: -2000000px;
}

.press { speak: none; }

.policies { perspective: none; }

#usa:after { content: 'absolutely ruined'; }
<!DOCTYPE html>
<html>
<head>
  <title>Trump.css</title>
  <link rel="stylesheet" href="/trumpcss/latest/trump.latest.css">
</head>
<body>

  <section id="usa">
    <!-- use #usa to draw 1600px wide border at bottom of container -->

    <div class="muslims">Not visible</div>
    <div class="women">Very small font</div>
    <div class="migrants--undocumented">Move container 2000000px down</div>
    <p class="press">Disable browsers text-to-speak functionality</p>
    <canvas class="policies">
      <!-- disable perspective -->
    </canvas>

    <!-- use #usa and get a :after pseudo element containing the text "absolutely ruined" -->
  </section>

</body>
</html>
DarkxPunk
@DarkxPunk
Mar 23 2018 19:20
@SweetCodingInc smh smh
Michael Grienauer
@mgrienauer
Mar 23 2018 19:20
hey guys, i uploaded my weather project to codepen but for some reason it isn't making the api call? can you guys take a look and see if its working for you? https://codepen.io/mike93og/full/qReQJe/
it worked for me earlier today
DarkxPunk
@DarkxPunk
Mar 23 2018 19:20
@NJM8 You make me feel absolutely dumb but at the same time I could kiss you XD
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:21
what is the rule of thumb on using div classes vs div ID's? i currently just use ID's so i can target them in jquery specifically but i guess you can do that with class as well... is it just preference or am i missing something here?
DarkxPunk
@DarkxPunk
Mar 23 2018 19:21
@JoEeeezy_twitter IDs are for single elements on a page that needs distinct styling
@JoEeeezy_twitter Class are for many elements on a page that need shared styling
Nate Mallison
@NJM8
Mar 23 2018 19:22
@DarkxPunk happy to help, helps me learn. :smile:
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:22
As a rule of thumb do not use id for styling purpose @JoEeeezy_twitter
DarkxPunk
@DarkxPunk
Mar 23 2018 19:22
@SweetCodingInc @JoEeeezy_twitter I disagree with that
@SweetCodingInc @JoEeeezy_twitter There is a time and place for both.
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:23
there are are always exception to the rule
we're not talking about exceptions... as a rule of thumb, keep ids for what they're intended to do
identification
not styling
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:24
ok, i guess i haven't seen the pros and cons of using ID's for styling since my projects are so small
DarkxPunk
@DarkxPunk
Mar 23 2018 19:24
@SweetCodingInc Not using IDs for styles is in no way a rule… If you are styling a single element you style its ID, you styling multiple elements you use Class… Thats the rule. Even from W3 themselves...
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:24
@mgrienauer works here
i've only used the bootstrap classes so far and whatever doesn't look right i give it an id and tweak it in CSS
DarkxPunk
@DarkxPunk
Mar 23 2018 19:25
@JoEeeezy_twitter Yeah you will mostly use classes since it is far more versitile and obviously is shared. But dont be afraid to style a div if the style is distinct to that id.
@JoEeeezy_twitter That can work, it all depends if you plan to reuse that style of not.
or*
Michael Grienauer
@mgrienauer
Mar 23 2018 19:26
@JoEeeezy_twitter hmm maybe its just my computer, thanks
CamperBot
@camperbot
Mar 23 2018 19:26
mgrienauer sends brownie points to @joeeeezy_twitter :sparkles: :thumbsup: :sparkles:
api offline
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:26
@DarkxPunk makes sense :+1:
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:26
@DarkxPunk I haven't run into any official w3 standard that recommends this
DarkxPunk
@DarkxPunk
Mar 23 2018 19:27
@SweetCodingInc No official w3 standard recommends because this isnt a recommendation, it is how ids and classes functiona and how they are used. There is no rule that says "dont style IDs only use for identifiers" it doesnt exist.
@SweetCodingInc However in the w3 standards on CSS it does specifically outline how IDs and Classes are used.
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:28
Point me to the source? @DarkxPunk
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:30
https://codepen.io/yaezah/pen/XEgpqK can someone help me with this, i'm trying to add the search button to the right of the text input , i've tried "display: inline" and "display: inline-block;" and pretty much all the others but I'm not sure why it stays under it
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:31
@JoEeeezy_twitter That's because your input and button are in two different divs
DarkxPunk
@DarkxPunk
Mar 23 2018 19:32
@SweetCodingInc https://www.w3.org/TR/CSS21/selector.html%23id-selectors 5.9 talks about IDs, nothing in there about not styling an ID.
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:34
@SweetCodingInc i had them in the same divs yesterday and kept changing things around to see what works, by the time i gave up they were in two separate divs xD
DarkxPunk
@DarkxPunk
Mar 23 2018 19:34
@SweetCodingInc If you want to say "Id recommend avoiding styling IDs because Classes are more versitile" you would have an argument. However you didnt say that, you claimed there was some rule about not styling IDs which there isnt one.
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:34
@DarkxPunk It also doesn't say "if you want to style a single element you must use and ID and for multiple elements you use classes"
Opting to use IDs to style individual element is your preference not "that's how CSS works"
DarkxPunk
@DarkxPunk
Mar 23 2018 19:36
@SweetCodingInc You are absolutely right. But IDs only apply to a single element thus logic proceeds it that you use IDs if you want to target a single element.
@SweetCodingInc Classes are for styling multiple elements. IDs are for styling single elements. That is defined clearly. It doesnt say you cant use a class a single time, but it is self evident that the use for classes is for multiple elements...
@SweetCodingInc What you define as a rule may be your thoughts on "best practices" but it is far from a rule, nor is it what classes are meant to be used for.
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:38
@DarkxPunk As far as I am concerned I'd stick to the semantics of terminology. Id to uniquely identify an element from JS. Element identitication and element styling are two separate concerns. Therefore I would not mix them together
@DarkxPunk Also, going by same logic, using IDs to style one element and class to style multiple elements is your perspective on what you think is a best practice. Not a rule.
Anyway, back to @JoEeeezy_twitter
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:41
:eyes:
DarkxPunk
@DarkxPunk
Mar 23 2018 19:41
@SweetCodingInc Its not a best practive its the objective definition of Classes and IDs XD
Classes are for multiple elements IDs are for single elements
Whether that is JS, CSS, whatever.
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:42
I removed them from the separate divs.. they seem to behave the same way.. I'm assuming it has something to do with my bootstrap columns since i dont understand the grid system too well
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:43
@DarkxPunk What you say is valid as long as styling and only styling is concerned...
My point is the identification mechanism should stay out of styling mechanism
@JoEeeezy_twitter I checked your markup. you have col-md-4 so the width is not sufficient to fit both input and button
lagunasurfer
@lagunasurfer
Mar 23 2018 19:45
@DarkxPunk thanks a ton! It worked!
CamperBot
@camperbot
Mar 23 2018 19:45
lagunasurfer sends brownie points to @darkxpunk :sparkles: :thumbsup: :sparkles:
:cookie: 115 | @darkxpunk |http://www.freecodecamp.org/darkxpunk
DarkxPunk
@DarkxPunk
Mar 23 2018 19:48
@SweetCodingInc And when did Classes become strictly a styling mechanism?
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:48
Gulsvi
@gulsvi
Mar 23 2018 19:49
@JoEeeezy_twitter The standard bootstrap 3.3 way to do this is with the form-inline class:
<div class="form-inline">
    <div class="search input-group">
        <input class="form-control" id="searchbar" type="text" placeholder="What are you looking for?">
    </div>
    <button class="btn btn-primary" id="searchbtn"> Search Wikipedia</button>
</div>
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:50
@JoEeeezy_twitter The .form-control element scales to fit it's container. So you need to restrict it's width by assigning a width property to it.
also remove margin-top from the button
this will automatically align both input and button correctly
Gulsvi
@gulsvi
Mar 23 2018 19:51
You'll definitely want to practice with the grid some more though and figure out whether or not you want to use Bootstrap 4 or Bootstrap 3. You have Bootstrap 3 added to your codepen, but you're using some Bootstrap 4 classes.
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:51
aah thank you ... i'm still weak with bootstrap.. for some reason i only used "col" classes on divs only .. didnt know you could add them to inputs too
i was all over trhe place lol https://i.imgur.com/m8w5Lge.png
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:52
@JoEeeezy_twitter haha...
Gulsvi
@gulsvi
Mar 23 2018 19:52
col is a bootstrap 4 class name - it won't work with the version of bootstrap that you have added to your pen @JoEeeezy_twitter
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:52
@gulsvi bs 4 classes would be ignored
Gulsvi
@gulsvi
Mar 23 2018 19:52
Exactly
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 19:52
I got confused in the beginning lol
bs 3.5
Gulsvi
@gulsvi
Mar 23 2018 19:53
uhhh 3.3 :)
JoEezy
@JoEeeezy_twitter
Mar 23 2018 19:53
@gulsvi ah that makes sense
John
@tertiaryidentifier
Mar 23 2018 19:57
Hi all, I am really baffled why my second $.get request isn't working for the weather viewer. Could someone please assist?
Gulsvi
@gulsvi
Mar 23 2018 19:59
@tertiaryidentifier callurl is undefined in your code where you are calling it - your second $.get runs before the call to freegeoip.net finishes
Eric Weiss
@eweiss17
Mar 23 2018 19:59
you need to encapsulate the second call within the first one to access data that you got from the first one
John
@tertiaryidentifier
Mar 23 2018 19:59
but callurl is a global variable and if I console.log() it outside of the first .get request it fully displays
Eric Weiss
@eweiss17
Mar 23 2018 20:00
the js runs async
Gulsvi
@gulsvi
Mar 23 2018 20:00
Global variables don't work like that with asynchronous calls like $.get
John
@tertiaryidentifier
Mar 23 2018 20:00
oooohhhh
okay, right, thanks I'll try that!
Gulsvi
@gulsvi
Mar 23 2018 20:00
Your code has to go out to a server, get the data, and bring it back. Meanwhile all your other code keeps on running
Eric Weiss
@eweiss17
Mar 23 2018 20:00
$.get{ *code to get data 
     $.get (data gotten) {
  }
}
something like that
John
@tertiaryidentifier
Mar 23 2018 20:01
cool. second question, once nested, can I use the argument "data" twice, or do I have to call it something different for the nested .get request
Sweet Coding :)
@SweetCodingInc
Mar 23 2018 20:01
@tertiaryidentifier Just move your 2nd call inside callback of first
$(document).ready(function() {
  var callurl = "";

  $.get(
    "https://freegeoip.net/json/",
    function(response) {
      $("#location").html(
        "<h1>" + response.city + ", " + response.region_name + "</h1>"
      );

      var lat = Math.round(response.latitude);
      var long = Math.round(response.longitude);
      callurl =
        "https://fcc-weather-api.glitch.me/api/current?lat=" +
        lat +
        "&lon=" +
        long;
      $.get(callurl, function(data) {
        console.log(data);
        $("#temperature").html("<h3>" + data["main"]["temp"] + "</h3>");
      });
    },
    "jsonp"
  );
});
John
@tertiaryidentifier
Mar 23 2018 20:01
yep it's working now, thanks everyone
Gulsvi
@gulsvi
Mar 23 2018 20:02
@tertiaryidentifier It's best to use a variable specific to the data you're getting - clean and readable (locationData, weatherData)
Eric Weiss
@eweiss17
Mar 23 2018 20:02
how come you are using just get over ajax or getjson?
Gulsvi
@gulsvi
Mar 23 2018 20:03
$.get and $.getJSON are both shorthand $.ajax calls
Eric Weiss
@eweiss17
Mar 23 2018 20:03
is he using it to specify jsonp over just json
i know that they are shorthand
John
@tertiaryidentifier
Mar 23 2018 20:04
I got rid of jsonp, I saw that somewhere and now I realize I don't need it
I just use .get because it is easy and .ajax is confusing for me ...
Eric Weiss
@eweiss17
Mar 23 2018 20:08
ok fair enough
niniyzni
@niniyzni
Mar 23 2018 20:23

Hi,

  • I am trying to pass four of my test cases.
  • but its failing...
  • i tried to solve it by using push, concat, indexof methods but its not working
  • can you tell me how to fix it.
  • providing my code below

https://jsfiddle.net/28zxkzcs/

Diego Mayer
@Chrono79
Mar 23 2018 21:24
Is there any css guru I can bother with a problem?
alpox
@alpox
Mar 23 2018 21:41
@Chrono79 Depends on the nature of the embargo
lawlercoppter
@lawlercoppter
Mar 23 2018 21:43

does anyone have a moment to try and help me figure out why im getting redundant output of c and d in this code block?
function chunkArrayInGroups(arr, size) {
// Break it up.
arrMeasure=0;
tempArr=[0];

while(arrMeasure<arr.length)
{
tempArr.push(arr.slice(0, size));

}

arr=tempArr;
return arr;
}

chunkArrayInGroups(["a", "b", "c", "d"], 2);

Diego Mayer
@Chrono79
Mar 23 2018 21:46
@lawlercoppter that code has an infinite loop
lawlercoppter
@lawlercoppter
Mar 23 2018 21:47
oh my bad. i think i pasted in an earlier version
one second

function chunkArrayInGroups(arr, size) {
// Break it up.
arrMeasure=0;
tempArr=arr;
f=0;

while(arrMeasure<arr.length)
{

  tempArr[fuk] = arr.slice(arrMeasure, arrMeasure + size);      
  fuk++
  arrMeasure+=size;
  console.log(f);
  if(f>size)
  {break;}
}

arr=tempArr;
return arr;
}

chunkArrayInGroups(["a", "b", "c", "d"], 2);

sry f=fuk, went to fix my variable names and didn't fix them all
Diego Mayer
@Chrono79
Mar 23 2018 21:54
you're overwriting the input array
use a new array and push the items inside
tempArr=arr; is not a copy, it's another reference to the same array
lawlercoppter
@lawlercoppter
Mar 23 2018 21:57
ahhh tyvm @Chrono79
Cristian
@GummyGod
Mar 23 2018 22:13
Can anyone help me with a really hard project(NOT FCC RELATED)?