These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Sep 2018
niniyzni
@niniyzni
Sep 18 2018 00:19

hi,

https://stackblitz.com/edit/angular-2rrick?file=src/app/app.component.ts


 ERROR
Error: Uncaught (in promise): TypeError: Cannot read property 'countries' of undefined
TypeError: Cannot read property 'countries' of undefined
at eval (src/app/app.component.ts:52:72)

  d3.json("https://raw.githubusercontent.com/cszang/dendrobox/master/data/world-110m2.json")
      .then(function (topology) {
        // <---- Renamed it from data to topology
        console.log("------>", topology.feature);
        g.selectAll('path')
          .data(t.feature(topology, topology.feature.countries)
            .geometries)
          .enter()
          .append('path')
          .attr('d', path);
        console.log("ending json calling1");

      });
Brad
@bradtaniguchi
Sep 18 2018 00:24
@niniyzni the error states exactly what is wrong, your doing topology.feature.countries but feature is undefined, thus you cant' get countries from it
niniyzni
@niniyzni
Sep 18 2018 02:20
@bradtaniguchi hi,
using d3 I got the maps right now I am trying to implement a flight tracking system, can you tell me how to track flights in d3 maps by using mock data
https://stackblitz.com/edit/angular-qyohkv?file=src/app/app.component.ts
example: https://www.flightradar24.com/60,15/6
niniyzni
@niniyzni
Sep 18 2018 03:04

hi,

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

ERROR
Error: Uncaught (in promise): TypeError: Cannot read property 'type' of undefined
TypeError: Cannot read property 'type' of undefined


    d3.json("https://raw.githubusercontent.com/cszang/dendrobox/master/data/world-110m2.json")
      .then(function (airports) {
        // <---- Renamed it from data to topology
        //console.log("------>", topology.feature);
        g.selectAll('path')
          .data(t.feature(airports, airports.objects.airports).features)
          //.data(t.feature(topology, topology.objects.countries)
          //  .geometries)
          .enter()
          .append('path')
          .attr("id", function (d) { return d.id; })

          .attr('d', path);
        console.log("ending json calling1");

      });
Dmytro Holysh
@dmk1111
Sep 18 2018 07:17
@niniyzni I tried to debug your stackblitz - the problem that object airports doesn't have airports.objects.airports property
airports ------> 
{type: "Topology", transform: {…}, objects: {…}, arcs: Array(676)}
{arcs:(676) [Array(13), Array(11), Array(21), Array(9), Array(7), Array(13), Array(25), Array(552), Array(5), Array(16), Array(8), Array(10), Array(9), Array(17), Array(30), Array(36), Array(13), Array(9), Array(8), Array(5), Array(5), Array(7), Array(49), Array(224), Array(6), Array(7), Array(8), Array(7), Array(9), Array(7), Array(10), Array(9), Array(9), Array(7), Array(23), Array(7), Array(11), Array(22), Array(6), Array(9), Array(14), Array(32), Array(36), Array(45), Array(13), Array(35), Array(8), Array(3), Array(12), Array(26), Array(27), Array(10), Array(8), Array(12), Array(9), Array(9), Array(14), Array(6), Array(33), Array(9), Array(11), Array(21), Array(16), Array(10), Array(17), Array(9), Array(5), Array(9), Array(7), Array(42), Array(8), Array(9), Array(6), Array(7), Array(12), Array(6), Array(7), Array(11), Array(11), Array(10), Array(37), Array(7), Array(16), Array(9), Array(8), Array(16), Array(33), Array(11), Array(22), Array(4), Array(9), Array(6), Array(9), Array(44), Array(7), Array(8), Array(7), Array(12), Array(20), Array(20), …]
objects:countries:{type: "GeometryCollection", geometries: Array(177)}
land:{type: "MultiPolygon", arcs: Array(127)}
transform:{scale: Array(2), translate: Array(2)}
__proto__:Object
}
rh616
@rh616
Sep 18 2018 10:16
@rh616
if(a>0){
b = a
}else{
b = -a
}
how to write it in Ternary operator?
could anyone help me?
Nicolas Ramirez
@kamatheuska
Sep 18 2018 10:57

So, got a question, maybe a bit out of context, but since I am using Vue.js for the frontend, here it goes:

How can I make a user access my website only via a unique link, without the need for a proper authentication? This link should have an expiration date.

Maybe something like a token in the URL? 🤔🤔

Dmytro Holysh
@dmk1111
Sep 18 2018 11:20
@rh616 b = a > 0 ? a : -a
Christopher
@bradley1492
Sep 18 2018 13:07

Hello,
I am playing around with a responsive flexbox nav, and a question came to my mind.
There is no way of aligning the image with the red background perfectly with a css command with the navbar easyily?

Is the solution here always fiddling around with the image size manually to get them both to tie in together perfectly, or is the solution to resize the image to a perfect size beforehand and then just insert that?

Here's the pen I'm talking about:´

https://codepen.io/bradley1492/pen/pOQbOb

Edit: Hm now I did it manually by resizing the image but I want to know if there's a smarter way of doing things here?

Eric Weiss
@eweiss17
Sep 18 2018 13:36
@bradley1492 have the background of the image be the same as the background of the navbar
Christopher
@bradley1492
Sep 18 2018 13:37
@eweiss17 How do you mean that?
Eric Weiss
@eweiss17
Sep 18 2018 13:38
like in a photoediter
if the navbar is red
use a paintbucket so the background of the image is also red
so it matches up
I believe also png image files hav a 'invisible' background
ah you have a png file
Christopher
@bradley1492
Sep 18 2018 13:39

@eweiss17 oh I think maybe I didn`t formulate the question right, I was thinking about aligning the borders sort of automatically or ssomething not the color.

Like if I have a navbar already, sort of perfectly fit an image into the left area?

With one css command or somethin
Or is it always manually and hacky sort of?
Aligning the picture to the size of navbar
I don`t really care about the colors at the moment
only the borders
Eric Weiss
@eweiss17
Sep 18 2018 13:43
my bad so you want the border of the image to match up with the border of the nav bar?
Christopher
@bradley1492
Sep 18 2018 13:45
@eweiss17 Exactly but I wondered if there is another way than adjusting the width of the image until it sort of fits, but a computed way?
Or is it always a manual process?
Fitting image borders with navbar borders?
Eric Weiss
@eweiss17
Sep 18 2018 13:48
hmmm
can I ask why you want this?
Christopher
@bradley1492
Sep 18 2018 13:49
@eweiss17
@eweiss17 Because I am struggling to fit an image into the left side here and I began doubting myself if thiss manual process is the way a professional web developer does this or if there is some command to just fit the image into the left perfectly :D
It seems like a very common thing to do when making a nav
Eric Weiss
@eweiss17
Sep 18 2018 13:53
@bradley1492 i'll check out some of my own projects and see what I did
well it appears none of my projects have images in the navbar.... whoulda thunk
Eric Weiss
@eweiss17
Sep 18 2018 13:58
on the bootstrap website, their logo is actually an svg image
Christopher
@bradley1492
Sep 18 2018 14:04
hm you mean here the "bootstrap" word?
https://getbootstrap.com/docs/3.3/
mrbig033
@mrbig033
Sep 18 2018 14:10
I don't know if I should ask this here, but I cant find a general room for Freecodecamp... but: has Freecodecamp been translated other languages? Like in English to Portuguese, NOT Javascript to Ruby or anything like that.
mstellaluna
@mstellaluna
Sep 18 2018 14:12
@mrbig033 please ask in the main contributors room at https://gitter.im/FreeCodeCamp/Contributors as this where the FCC Core team and repository contributors are located. Eventually someone will answer you.
mrbig033
@mrbig033
Sep 18 2018 14:13
thank you, @mstellaluna
mstellaluna
@mstellaluna
Sep 18 2018 14:15
@mrbig033 in the meanwhile you can also check out the forums, there maybe a thread on this already. im not sure i don't use the forums. https://forum.freecodecamp.org/
you're welcome.
Alvis
@Flush7
Sep 18 2018 14:17
hi @mstellaluna wheres zirozipzilch and jodylecompte these days?
mrbig033
@mrbig033
Sep 18 2018 14:17
@mstellaluna it looks there are translations in progress, but nothing concrete. It's hard to search this subject because all the words have particular meaning in the programming namespace.
mstellaluna
@mstellaluna
Sep 18 2018 14:21
@Flush7 Sorry i don't know
@mrbig033 yea... someone in the contributor's room will eventually answer you
mrbig033
@mrbig033
Sep 18 2018 14:22
@mstellaluna cool, thanks again
mstellaluna
@mstellaluna
Sep 18 2018 14:22
anytime
alpox
@alpox
Sep 18 2018 14:27
@bradley1492 When you take out the a element of the page flow with position: absolute it has no possibility to align to its environment.
If you set a specific height to the nav, height: 100% on the image and don't use position: absolute for the a element, it should take the same height as the navbar and adjust the width with width: auto
Eric Weiss
@eweiss17
Sep 18 2018 14:29
sorry i stepped away for a bit. I agree though, try to avoid position absolute, if you can
alpox
@alpox
Sep 18 2018 14:31
@bradley1492 With display: flex and justify-content: space-between on the nav you then get the horizontal layout of the navbar
And removing height: 200px on the ul would adjust the height of the ul to the height of the navbar
Morchid Chellali
@Morched23MJ
Sep 18 2018 14:37
image.png
Is there a good way to make those two lines near the Front-End Developer text in pic?
Christopher
@bradley1492
Sep 18 2018 14:42
@alpox @eweiss17 thx a lot for your wonderful help.
I followed your instructions alpox it looks good but its torn apart now... Heres the pen:
https://codepen.io/bradley1492/pen/pOQbOb
Christopher
@bradley1492
Sep 18 2018 14:48
Why is the image now over the navbar?
Morchid Chellali
@Morched23MJ
Sep 18 2018 14:51
nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
@bradley1492, I added this code and it's working fine. You want it like that?
Christopher
@bradley1492
Sep 18 2018 14:53
@Morched23MJ many thanks, now it works, I just can`t see if the image is visually exactly the same height as the nav elements?!
Morchid Chellali
@Morched23MJ
Sep 18 2018 14:54
The image is bigger, but you can set the height of the navbar to the height of the image?
Christopher
@bradley1492
Sep 18 2018 14:54
@alpox that`s exactly what I wanted hahaha, the image needs cropping I think
@Morched23MJ @alpox understanding all that is another thing, flexbox really is more sophisticated than I thought
Morchid Chellali
@Morched23MJ
Sep 18 2018 14:57
Yup. I use flexbox everytime I want to set many elements in one row. :D
Christopher
@bradley1492
Sep 18 2018 14:58
This is sort of how I intended it to be
https://codepen.io/bradley1492/pen/MqzpPX
Eric Weiss
@eweiss17
Sep 18 2018 15:12
@bradley1492 so set the nav to be only as much width as needed?
Christopher
@bradley1492
Sep 18 2018 15:18
@eweiss17 How do you mean?
Morchid Chellali
@Morched23MJ
Sep 18 2018 15:21
image.png
How to achieve making that rectangle around my name? :l any ideas would be appreciated :D
Eric Weiss
@eweiss17
Sep 18 2018 15:22
@bradley1492 looks decent now, is that what you wanted?
what i meant is that your main-nav should not have an assigned width, it should just take up as much space as needed, and it seems like you already have that
Christopher
@bradley1492
Sep 18 2018 15:25
@eweiss17 jup exactly that's how I wanted it to look.
This is a good starting point for me to work now.
Thanks :)
Eric Weiss
@eweiss17
Sep 18 2018 15:26
think you figured it out mostly yourself
Christopher
@bradley1492
Sep 18 2018 15:30
jop sort of it follows me since days the issue
AJ Brommy
@AJ-Brommy
Sep 18 2018 19:19
Hmm.. ok.. I've got a slight dilemma...
Eric Weiss
@eweiss17
Sep 18 2018 19:20
Have you considered ignoring it until somebody complains about it?
AJ Brommy
@AJ-Brommy
Sep 18 2018 19:22
I'm on the technical document page project, on it I have a few <pre></pre> tags, these do not appear to listen to the overflow-wrap: break-word; css. I'm assuming it's because the purpose behind <pre> which is to display things exactly. So i'm not sure how best to proceed. It's only an issue when shrinking the width of the page. A little while before it changes to mobile layout, but then again I would imagine if a mobile screen be quite small it may do the same.
Nicandro
@nicandromts
Sep 18 2018 19:30
this place looks more alive... i like that
AJ Brommy
@AJ-Brommy
Sep 18 2018 19:30
:)
Nicandro
@nicandromts
Sep 18 2018 19:30
the YouCanDoTHis is a freakin cemetery
newmoon
@newmoon
Sep 18 2018 19:51
@AJ-Brommy Try word-break: break-all; instead of overflow-wrap: break-word; - or use both. Sometimes both are needed depending on the layout.
AJ Brommy
@AJ-Brommy
Sep 18 2018 20:14
Ah ok, thanks @mew
@newmoon lol
AJ Brommy
@AJ-Brommy
Sep 18 2018 20:45
neither works :( @newmoon
Looks like you'll need white-space: pre-wrap;
Not supported in IE/Edge unfortunately: https://caniuse.com/#search=pre-wrap
AJ Brommy
@AJ-Brommy
Sep 18 2018 21:24
Nice - that's done the trick. I need to learn the difference tho, but thanks :)
doh
it's working ok for me in edge
newmoon
@newmoon
Sep 18 2018 21:26
This works fine too in case you're concerned :) overflow-x: scroll;