These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Jun 2018
Christopher McCormack
@cmccormack
Jun 27 2018 00:53
Yup @newtothat that's responsiveness, it can be done in many ways. There are some simple, some more complex depending on how you want to implement it. You can use media queries to change all of your CSS depending on the size of the screen, it's very cool
Terry Reynolds
@terryjreynolds
Jun 27 2018 02:49
Anyone else notice that on new curriculum challenges, if you complete one and return to it, your answer is often not there?
German Gamboa Gonzalez
@germangamboa95
Jun 27 2018 03:56
Alright guys, I took the feedback I got from you yesterday. how is my portfolio looking now? https://germangamboa95.github.io/vue-portfolio.io/#/
the loading screen is there since the images where downloading slowly.
which I now realize its because I didn't optimize them -.-
Vladislav Ivanov
@developer4eto
Jun 27 2018 04:23
@germangamboa95 good job
abraham anak agung
@padunk
Jun 27 2018 05:57
@germangamboa95 the feature projects cards didn't align correctly
markclynch
@markclynch
Jun 27 2018 06:32
import React, { Component } from 'react';


class Fan extends Component {
  render() {
    console.log(this.props.conditions.temp);
    return (
      <div>
        {this.props.conditions.hotOrNot > 85 ? (
          <button className="button" style={{backgroundColor:"red"}}>{this.props.conditions.temp}</button>
        ) : (
          <button className="button" style={{backgroundColor:"green"}}>{this.props.conditions.temp}</button>
        )}


      </div>
    );
  }
}

export default Fan;
Wondering if there's another way to do this in CSS that's less convoluted? I just used conditional rendering to make it look red or green based on if above or below 85 degrees temperature.
Aditya
@ezioda004
Jun 27 2018 06:50

@markclynch Another way would be defining CSS classes say

.red {
  background-color: "red";
}
.green {
  background-color: "green";
}

import this CSS file

import React, { Component } from 'react';
import "./style.css";

class Fan extends Component {
  render() {
    console.log(this.props.conditions.temp);
    return (
      <div>
        <button className = {`button ${this.props.conditions.hotOrNot > 85 ? `red` : `green`}`}>{this.props.conditions.temp}</button>
      </div>
    );
  }
}

export default Fan;

And conditionally rendering classes instead of whole element.

markclynch
@markclynch
Jun 27 2018 06:51
Okay, that makes sense.
I'm in general staying clear of backticks :) haha
I know I can't really
but that's a lot cleaner looking than my monstrocity thanks @ezioda004
Aditya
@ezioda004
Jun 27 2018 06:53
Template literals are great, especially with React. You can do great things with it but it can also get complex if overused and no problem! :thumbsup:
markclynch
@markclynch
Jun 27 2018 06:54
@ezioda004 Have you used styled components much then?
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 06:58
Hi, I don't know how to filter an array of number for return only the "Int"
Aditya
@ezioda004
Jun 27 2018 06:59
@markclynch Yes, I use them but I prefer keeping styles separated and importing them instead. Styled components/CSS modules are cool and probably better practice but depending on project I dont mind either and mostly its personal preference.
markclynch
@markclynch
Jun 27 2018 07:00
@ezioda004 Could you point me in the right direction of how in react to control an animation? I have a spinning react logo that I want to add an onClick method to stop and start it.
The plan is if it is spinning it indicates the fan is on, if not it indicates fan off.
there will be several things manipulated when this happens, but my issues all seem to be making things look right, functions and math et. all I'm fine with.
Aditya
@ezioda004
Jun 27 2018 07:03
@AlbertoGiambone First you need to figure the logic how to separate intand float (decimals). After that you can use that logic and use .filter() method.
@markclynch I have not used animations in React such way. Checking the animations section in official docs might help.
That should help
markclynch
@markclynch
Jun 27 2018 07:07
@ezioda004 Didn't even know about that,that may be useful later, seems pretty cool you can basically have an animation pop up on load then disappear on unmounting. slightly different than what I'm looking for. I think my misunderstanding is I don't know how to complete this in vanilla JS even. I have huge problems manipulating css elements inside javascript and react.js :worried:
@ezioda004 Not sure if I should just setup state with an isOn boolean and then I could conditionally render a static image or a spinning one using a toggle method, but again that sounds like it wouldn't be quite right.
markclynch
@markclynch
Jun 27 2018 07:13
I'll definately need that method anyhow and the onClick function would toggle between true and false anyway.
alpox
@alpox
Jun 27 2018 07:15
@markclynch i would conditionally add or remove a class from the logo and make the logo spin with css if the class is set
markclynch
@markclynch
Jun 27 2018 07:16
@alpox Thanks, I'll do some googling as I didn't think that was something really doable.
conditionally adding or removing a class javascript sounds like a decent place to start googling
Claudio Restifo
@Marmiz
Jun 27 2018 07:17

@markclynch have you looked into styled-components?
Or any other JS-in-CSS alternative?

Makes working with react (ie JS) super easy

markclynch
@markclynch
Jun 27 2018 07:17
I started looking at it
Just watched one video
@Marmiz I watched this one Glen Maddern - Styling React Apps with Styled Components
But I'm so new that these guys don't talk like I'm an idiot
so they don't show exactly how things are done, more high level concepts
Claudio Restifo
@Marmiz
Jun 27 2018 07:18
@markclynch why watch a video. Read the docs and you're good to go :smile:
alpox
@alpox
Jun 27 2018 07:19
I usually use styled-components too. They are great
markclynch
@markclynch
Jun 27 2018 07:19
Yeah, it's funny, I watched like a million videos on React
and got next to no understanding
then read the docs haha, now I'm starting to get it
@Marmiz does the react team like styled components?
Claudio Restifo
@Marmiz
Jun 27 2018 07:20

never been fond of videos.
I generally consider docs and books the best resources to learn (at least for me).

With videos I ended up building something as they show, but unable to build what I wanted by myself :smile:

markclynch
@markclynch
Jun 27 2018 07:21
@Marmiz yeah
alpox
@alpox
Jun 27 2018 07:22
Videos just dont really teach and are not good for references
markclynch
@markclynch
Jun 27 2018 07:22
@alpox Well, Dan Abrimov's Redux videos are pretty good
Claudio Restifo
@Marmiz
Jun 27 2018 07:22

does the react team like styled components?

why should that matter?

markclynch
@markclynch
Jun 27 2018 07:23
Just curious.
I know they wont endorse many libraries that come about
Claudio Restifo
@Marmiz
Jun 27 2018 07:23
anyway one of the creator is the one who made react-router and parto of React. (not a FB employee tho :) )
markclynch
@markclynch
Jun 27 2018 07:24
I'm just a bit lost
I mean I literally just finally got conditional rendering using ES6 syntax today lol
Aditya
@ezioda004
Jun 27 2018 07:24
@markclynch Heres a quick example of how you can do spin animation with react. Basically an implementation of what @alpox said.
markclynch
@markclynch
Jun 27 2018 07:24
by got I mean understand :)
alpox
@alpox
Jun 27 2018 07:25
`className="{ spin: isOn}
Ups my phone sent before i was done
className={ spin: isOn}
markclynch
@markclynch
Jun 27 2018 07:26
@ezioda004 cool, but is there a way to get it less choppy? Like just pause the spin, so it freezes frame then continues?
It's resetting to original placement on each render
maybe I can play and see if e.preventDefault would work :)
Aditya
@ezioda004
Jun 27 2018 07:27
I'm sure theres a way, though CSS gives me midlife crisis.
markclynch
@markclynch
Jun 27 2018 07:27
@ezioda004 lol
markclynch
@markclynch
Jun 27 2018 07:29
actually I think i meant e.stopPropagation
but not sure lol
alpox
@alpox
Jun 27 2018 07:30
@markclynch they only help if the event bubbles and makes events trigger that you dont want - or in case of preventDefault to prevent the default action (ex form submit)
markclynch
@markclynch
Jun 27 2018 07:31
too much nonsense in my brain I always remember things that aren't helping
@alpox That looks like it may be helpful.
Is there any system resource concerns when running infinite loop animations at very high speeds?
Like if you rotated it at .00000000000000001 seconds a full 360 degrees
alpox
@alpox
Jun 27 2018 07:34
I dont think there is, i believe the framerate stays the same so you will never see all positions in between.
Aditya
@ezioda004
Jun 27 2018 07:38
@markclynch I updated the example with animation-play-state.
markclynch
@markclynch
Jun 27 2018 07:39
Damn, how long have you coded that you can just whip things like that up so fast?
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:39
Yo :wave:
Next gigi hadid💁
@1Droka_twitter
Jun 27 2018 07:39
hey i will work in a project and i will specialize to do the front end can anyone advise me from where i should start learning?
markclynch
@markclynch
Jun 27 2018 07:40
FCC as good a place as any
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:40
@1Droka_twitter https://www.freecodecamp.org Good luck :smile:
Next gigi hadid💁
@1Droka_twitter
Jun 27 2018 07:40
what is FCC?
Aditya
@ezioda004
Jun 27 2018 07:40
I started programming with web-dev only, like 6-ish months ago. It gets easier with time, reading docs helps a lot.
markclynch
@markclynch
Jun 27 2018 07:42
@ezioda004 Yeah, I think I just need to keep grinding. I started a year ago part time just doing FCC, but I think building my own projects gives me a lot more learning, and need to stop watching so much youtube :)
just read the docs
man, didn't know I could conditionally set the pause function like that.
with ${code} you can do magic
Next gigi hadid💁
@1Droka_twitter
Jun 27 2018 07:43
U @bjorno43 I signed in now
Aditya
@ezioda004
Jun 27 2018 07:44
@markclynch Oh yes building projects is the best way to learn and watching YT vids has its own place but it cannot replace practical knowledge.
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:44
Real world projects certainly learn you a whole lot more than following a couple of courses and guides. However, make sure you're ready for them. Programming is like swimming. You can't dive into the ocean without getting your swimming certificates first
markclynch
@markclynch
Jun 27 2018 07:44
@bjorno43 Yeah, I just simplified my project I'm working on for my technical interview for internship
I tried to do way too much for me to handle
I barely knew ES6
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:45
@1Droka_twitter Great. Then start the curriculum. It's all completely free and by the time you're finished, you're well on your way :smile:
markclynch
@markclynch
Jun 27 2018 07:45
and wanted to code a working UI for a greenhouse control system that could monitor and report temperature, humidity, soil moisture content, control fans and dehumidifiers.
So I shortened it to just show temperature and fake fan control with this spin.
and have a background color change if temperature is within optimal range
Next gigi hadid💁
@1Droka_twitter
Jun 27 2018 07:46
@bjorno43 sorry but once i finish it i will be ready to work on the project as front end ?
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:47
@1Droka_twitter Yes. You'll definitely be ready for front end development
@markclynch It's a bold project. Interfacing with devises outside of the web is a challenge on its own. I hope you'll get there :)
markclynch
@markclynch
Jun 27 2018 07:49
@bjorno43 It'd be all node.js server side controlled through Internet of Things devices set up on wifi.
Next gigi hadid💁
@1Droka_twitter
Jun 27 2018 07:49
they aske me for the required i should learn are
HTML
CSS or sass
Bootstrap for responsive design
Jquery
markclynch
@markclynch
Jun 27 2018 07:49
with a React front end
there's an SDK that's not too complex to do controls and pull API data from monitors
that said, it's not my end goal. my tech interview is only asking me for 80 lines of code that I've iterated through a handful of times to optimize or improve so that I really understand it. Then he'll ask me to add something, change something and we'll go from there.
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:51
@1Droka_twitter By the time you're finished with the curriculum, I promise you'll be able to tackle all of those
markclynch
@markclynch
Jun 27 2018 07:51
he wants to know if I have the aptitude not that I'm all there. It's an internship
@1Droka_twitter Oh yeah, you finish FCC's front end and you'll get those things.
I could apply for those types of positions right now. I'm moving on to learning more to secure an even better job.
Should be 50 - 70k to start 150K $USD after 3-5 years if I'm good
for React
Next gigi hadid💁
@1Droka_twitter
Jun 27 2018 07:53
@bjorno43 @markclynch Thank you so so much , i hope
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:56
I'm a full stack dev myself. Though I prefer working on back end. I'm the kind of guy that fixes the engine. Let someone else worrrie about the design, haha
markclynch
@markclynch
Jun 27 2018 07:56
@bjorno43 I'd like to get more into back end eventually
I really like node.js, mongodb and express
I hate angular
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:57
I never really did any of those
Aditya
@ezioda004
Jun 27 2018 07:57
@bjorno43 Relevant
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:58
@ezioda004 :joy:
Nah, I can do front-end. I just don't really like it :P
markclynch
@markclynch
Jun 27 2018 07:58
That's so funny
I think that's more like me now
I can make the engine work, but it's ugly as %$#^
Claudio Restifo
@Marmiz
Jun 27 2018 07:59
I do mostly front but that does not mean I have to be good at design... there are designers for that! :smile:
Bjorn van de Peut
@bjorno43
Jun 27 2018 07:59
But back in my learning days Node didn't exist yet. Back then it was all PHP. That's why I prefer it, haha
markclynch
@markclynch
Jun 27 2018 07:59
@Marmiz Yeah, but I can't even get most of my elements to be where I want them on the page lol. Thanks god for css-grid
I literally have to use that mapped out grid though to set things up the one like this ```
aaaabbbb
aaaabbbb
ccccccccc
ccccccccc
then spend 30 minutes editing everything so it looks sorta okay
Bjorn van de Peut
@bjorno43
Jun 27 2018 08:01
Earlier someone was a bit mad that we refused to help him pass (cheat) on a test about CSS. He argued that he couldn't help it that the test was 10+ years old while his question was about CSS grid. Now it could be me, but I'm pretty sure 10 years ago CSS grid wasn't a thing :laughing:
markclynch
@markclynch
Jun 27 2018 08:02
lol, no it wasn't
10 years ago I'm pretty sure it was all about floats
float / clear
Bjorn van de Peut
@bjorno43
Jun 27 2018 08:03
True, lol
markclynch
@markclynch
Jun 27 2018 08:05
I haven't coded in 20 years
and when I did it was only C++
I looked at Javascript briefly, but thought nah that's for losers who can't code for realz
Bjorn van de Peut
@bjorno43
Jun 27 2018 08:05
Well if you know C++, todays languages should be quite the breeze, haha
markclynch
@markclynch
Jun 27 2018 08:06
I "knew" it sorta, theoretically.
I never used it a day in my life, learned it in Comp Scie
then got into finance instead
They are easier to learn.
but I'm not sure they're tougher to master
Bjorn van de Peut
@bjorno43
Jun 27 2018 08:07
Oh ok. I only did C++ once. I was running a private World of Warcraft server and that was made in C++. So I started messing around with that
Next gigi hadid💁
@1Droka_twitter
Jun 27 2018 08:07
WHAT i completed 11 of 1408 coding challenges :ok_woman:
markclynch
@markclynch
Jun 27 2018 08:08
I'd like to re-learn C++ at some point and help my cryptocurrency's main dev doing stuff, but it's gonna take a lot
Bjorn van de Peut
@bjorno43
Jun 27 2018 08:08
@1Droka_twitter There you go :smile: Brace yourself though. It'll get progressively harder
markclynch
@markclynch
Jun 27 2018 08:08
yeah, it'll start getting really annoying, get used to coming to this chat room :)
Bjorn van de Peut
@bjorno43
Jun 27 2018 08:10
I've dropped C++ after that. Picked up C# and finished my master in software engineering with it last year
markclynch
@markclynch
Jun 27 2018 08:42
@bjorno43 You like C# that much better?
Bjorn van de Peut
@bjorno43
Jun 27 2018 08:47
@markclynch It's a lot easier than C++ and OOP. So ye, I definitely prefer it
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 09:36

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
function inter (int) {
return int.isInteger;
};
const squaredIntegers = realNumberArray.filter(inter);

I don't know why this don't return an array of Int...
someone can help me?

alpox
@alpox
Jun 27 2018 09:39
@AlbertoGiambone You forgot the () to call the function isInteger --> int.isInteger()
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 09:40
if I put () this is the message: int.isInteger is not a function. (In 'int.isInteger()', 'int.isInteger' is undefined)
@alpox if I put () this is the message: int.isInteger is not a function. (In 'int.isInteger()', 'int.isInteger' is undefined)
alpox
@alpox
Jun 27 2018 09:41
@AlbertoGiambone Right, i'm still half asleep it seems :D
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 09:41
@alpox ;)
alpox
@alpox
Jun 27 2018 09:41
The function is Number.isInteger(int)
The function isInteger exists only on the Number constructor
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 09:42
@alpox ok, now this is the output: squaredIntegers should be [16, 1764, 36]
alpox
@alpox
Jun 27 2018 09:43
Until now your output should be [4, 42, 6]
You still have to square them
Mandeep
@mandeephub
Jun 27 2018 09:46
Can any one tell how to test web app
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 09:48
@alpox ok, I wrote this:
function inter (int) {
return Number.isInteger();
};
const squaredIntegers = Math.pow(realNumberArray.filter(inter), 2);
but off course is not working ;)
alpox
@alpox
Jun 27 2018 09:53
@AlbertoGiambone Yea you cannot set an array to the power of 2 :D
You have to target each number
So what you are looking for is the method .map
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 09:57
@alpox thanks!
alpox
@alpox
Jun 27 2018 10:00
@AlbertoGiambone np
hellhound123
@hellhound123
Jun 27 2018 14:00
Hey guys, I'm trying to get radio buttons working on my survey form, but my input labels seem to be affected by my focus selectors that I used before. How can I get them to be below the title? I don't really want to use a <p> or heading element, or is that the only way? Here's the pen: https://codepen.io/Pixel123/pen/NzByep
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 14:16
I need to square one array, I try to use " const squaredIntegers = a.map(Math.pow(a, 2));
"
but is non working..
Aditya
@ezioda004
Jun 27 2018 14:22
@AlbertoGiambone .map() takes a callback function, so it should be const squaredIntegers = a.map(val => Math.pow(val, 2));
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 14:26
@ezioda004 this don't return the square of the array
Aditya
@ezioda004
Jun 27 2018 14:28
@AlbertoGiambone Seems to be working
const a = [2, 3, 4];
const squaredIntegers = a.map(val => Math.pow(val, 2));
console.log(squaredIntegers) // [4, 9, 16]
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 14:35
@ezioda004 ahhh ok,
but in FCC don't
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
// change code below this line
function inter (int) {
return Number.isInteger();
};
const a = realNumberArray.filter(inter);
const squaredIntegers = a.map(val => Math.pow(val, 2));
// change code above this line
return squaredIntegers;
};
Moisés Man
@moigithub
Jun 27 2018 14:37
@AlbertoGiambone seems like isInteger function missing something
which value u testing ?
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 14:38
@moigithub const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
Moisés Man
@moigithub
Jun 27 2018 14:39
function inter (int) {
   return Number.isInteger();  /// u not passing anything to that function
};
const a = realNumberArray.filter(inter);
u can check syntaxis /examples here
http://mdn.io/isinteger
https://www.w3schools.com/jsref/jsref_isinteger.asp
AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 15:09

@moigithub 16:39

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";

function inter (int) {
return Number.isInteger(realNumberArray);
};
const a = realNumberArray.filter(inter);
const squaredIntegers = a.map(val => Math.pow(val, 2));

return squaredIntegers;
};
now yes, but it's still the same
now

Aditya
@ezioda004
Jun 27 2018 15:15

@AlbertoGiambone Number.isInteger(realNumberArray); the argument passed is..wrong. The usage of isInteger is Number.isInteger(num) so for example

Number.isInteger(1.2) //false
Number.isInteger(3) //true

You're passing array instead, also you should look up documentation of .filter() and what parameters the callback function takes.

AlbertoGiambone
@AlbertoGiambone
Jun 27 2018 15:16
@ezioda004 ahhh ok thank's
German Gamboa Gonzalez
@germangamboa95
Jun 27 2018 16:52
@padunk Yeah those have been giving my a hard time. I am going to throw CSS grid in there instead of using Materialize's grid since it still uses floats and that might be the cause of that.
@developer4eto thanks
Pixxel123
@Pixxel123
Jun 27 2018 18:10
Still struggling with my earlier pen, is there any way to only select certain <labels>? I've tried putting all the ones I want to have the same effect in a class, but it's still affecting a few that I don't want to be affected
Pixxel123
@Pixxel123
Jun 27 2018 19:00
I've figured it out, just had to add different classes to them, and change the focus selector to the relevant class instead of pointing at the label tag!
Kent Saeteurn
@sansae
Jun 27 2018 21:05

Hello... can anyone help me understand why my image isn't displaying for my Twitch Viewer app?

I actually completed this challenge about a year ago and it was working fine, but when I checked on it last week, I noticed the stream logo/image was not displaying. Everything else does, but not the image. I can't figure out why. I thought that perhaps the link to the image was broken, but I created another pen to test it, and it worked perfectly fine.

Can anyone please help me figure out what's wrong?

Ryan Williams
@Ryanwfile
Jun 27 2018 21:27

The first challenge in SASS says to create a variable and assign it to the color property of the .blog-post class and h2 element, after doing this and getting the desired results on the screen the challenge says I need to "Your .blog-post element should have a </code>color</code> of red.
Your h2 elements should have a </code>color</code> of red."

Not sure what to do to make this work, here is the code

<style type='text/sass'>
   $text-color:red;

  .blog-post, h2 {
    color:  $text-color;
  }
</style>
Daniel
@Feldbot
Jun 27 2018 22:38
Hi, I'm working on the Simon app and trying to toggle a class with jQuery toggleClass. If you turn the game on and hit Strict mode, you will see that the class is being toggled on and off, but nothing is actually happening to my indicator above the button, which should turn red or black alternately when the button is clicked. I have a general .red-indicator css class that has a red background-color, but it isn't being applied. Any ideas why this isn't working?
Tom
@moT01
Jun 27 2018 22:45
@Feldbot the properties you put on the id are taking precedence
add !important to your red indicator and it will work - background-color: rgb(255,0,0) !important;
Daniel
@Feldbot
Jun 27 2018 22:47
@moT01 I tried changing div#strict_indicator to a class, and changing the order of .red-indicator in the css and it still didn't work.
Tom
@moT01
Jun 27 2018 22:50
try removing the div from the selector
Daniel
@Feldbot
Jun 27 2018 22:52
@moT01 Huh... removing div did the trick. Why did that work?
Tom
@moT01
Jun 27 2018 22:53
selectors give value to what properties get applied
for instance you had div#strict_indicator
that has two selectors
which gives more value
than just #strict_indicator
so we lowered the value by removing the div which let the .red_indicator not get overridden
Moisés Man
@moigithub
Jun 27 2018 22:56
"css specificity"
Tom
@moT01
Jun 27 2018 22:57
something like that - adding !important makes it have the most value I think - so it's a good way to test if your properties are getting overridden by other properties
Daniel
@Feldbot
Jun 27 2018 22:58
@moT01 I think I am still confused with some of the basics of css selector specificity. I thought by writing div#strict_indicator, I was just targeting one selector with an ID applied to it. How/when does it become two selectors? How do you check the value?
@moT01 I guess I was also under the impression that in writing my CSS it was good to use compound selectors by way of legible semantics, that one could more clearly see what the selection applied to that general, shorter selectors.
Tom
@moT01
Jun 27 2018 22:59
im not sure if there's a way to check the value on the fly, but you could look it up - you used two selectors to target one element
im not sure what best practices are - i dont usually use more than one selector unless I need to
cause you could have put like 6 on there
body>div>div>div>div#strict_indicator
Daniel
@Feldbot
Jun 27 2018 23:02
@Tom I think the !important addition is what is making it work, it doesn't seem to matter if it is preceded by div or not.
Tom
@moT01
Jun 27 2018 23:03
yes, like I said - adding that makes it have the most value possible I think
I do know its not something you want to be using all over the place though
as it can complicate things - but in this case it's not a bad spot to use it
so yea, you can fix it by adding that or the other way (removing div)
Daniel
@Feldbot
Jun 27 2018 23:06
@Tom That is a good point about all the potential selectors I could have! I'd like to write it without !important, I always see how that is bad style and can cause conflicts. I'm not sure how to write this without it or how to make the specificity higher. I did try reordering in the css and it didn't seem to matter. If I remove div and !important both it doesn't work.
Tom
@moT01
Jun 27 2018 23:08
change it to a class instead of id
i think id's take over classes
Daniel
@Feldbot
Jun 27 2018 23:08
@Tom Bingo! That has a lower value
Tom
@moT01
Jun 27 2018 23:09
:+1:
Daniel
@Feldbot
Jun 27 2018 23:10
@Tom That is something else I find somewhat confusing about css basics. I thought if I was using something only once it was good to have an ID on it so it would have higher specificity, so I do that a lot, but I'm wondering if it isn't a better practice to just have classes for everything, and just use an ID similar to when you want something to be !important (and just used once).
@moT01 Thanks a bunch for the help, much appreciated!
Tom
@moT01
Jun 27 2018 23:12
ive heard it's bad practice or something to use ids but I dont see a problem with it - but I would still probly use class most of the time
Daniel
@Feldbot
Jun 27 2018 23:18
@moT01 And you think better to write the css selectors sparingly too, by using the bare minimum selector? Here is an example I'm curious about... You have a button element with a class of green. In the css is it better to write .green only? For reading comprehension it seems like it is better to say button.green so I can see what it applies to quickly. But what I hear you saying is that it's then two selectors that then have a higher assigned specificity value. And you'd only use compound selectors because you need to target something very specifically, with higher specificity?
Tom
@moT01
Jun 27 2018 23:21
i think .green is just a bad name in this case - I always prefer readability - I would maybe name it .btn_green or something
Daniel
@Feldbot
Jun 27 2018 23:23
@moT01 Pure gold. That makes a lot of sense. Thanks!
Tom
@moT01
Jun 27 2018 23:27
sure thing
Daniel
@Feldbot
Jun 27 2018 23:47
@sansae If you change your <img id="logo0"> tag to <div id="logo0"> that displays the image. Somehow you were getting two image tags nested with one closing tag.