These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Aug 2018
niniyzni
@niniyzni
Aug 30 2018 01:09

hi,

  • I am trying to include google maps in angular component.
  • but I am getting the below error.
  • can you tell me how to fix it.
  • providing my code below.

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


Error in src/app/app.component.ts (11:3)
Unexpected token. A constructor, method, accessor, or property was expected.


import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(37.76487, -122.41948),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});
}
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:19

How is:

    <div id="splitter"><div id="splitter1"></div><div id="splitter2"></div></div>

any different from:

    <div id="splitter">
      <div id="splitter1"></div>
      <div id="splitter2"></div>
    </div>
Funny how I get two different results just by 'beautifying' the first code block to the second. :l
korzo
@korzo
Aug 30 2018 01:23
both looks same.
What's the problem with it?
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:23
I'm getting these two images (gonna paste them wait :D)
image.png
image.png
Just by changing the lines on my editor.. :l
image.png
Here is the code block in my editor
korzo
@korzo
Aug 30 2018 01:25
have divs display: inline ?
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:25
image.png
Yup. Inline-block. Here's the css
korzo
@korzo
Aug 30 2018 01:26
well, than it's a difference :)
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:26
Really! :D
korzo
@korzo
Aug 30 2018 01:26
if inline elements have whitespace between them, browser adds 4px margin to them
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:27
Oh..
How to remove it? D:
korzo
@korzo
Aug 30 2018 01:28
negative margin
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:28
Otherwise, I better let them in same line in my editor?
korzo
@korzo
Aug 30 2018 01:29
or use floats/flexbox
inline display has a lot of disadvantages
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:30
I set a negative 4px margin on my second splitter and it's working pretty fine. I won't run into any issues with that later, somehow?
I see. What you suggest instead? My purpose is to colorize half a div with a color and the other half with another
korzo
@korzo
Aug 30 2018 01:31
divs have no content?
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:32
Yup. Just the color that matter. :D
korzo
@korzo
Aug 30 2018 01:33
then you need only 2 divs:
parent with 1. color and child with other color and width 50%
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:33
Cool! I'm gonna try this right away. :D
They got to have the same height?
korzo
@korzo
Aug 30 2018 01:34
Yes.
Or you can try background gradient
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:35
Oh yeah! Totally forgot about this one. Thanks! :D
korzo
@korzo
Aug 30 2018 01:36
background: linear-gradient(to right, #f4f72e 0%,#f4f72e 50%,#207cca 50%,#207cca 100%);
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:39
Just what I wanted! Thank you so much! By the way, I'm making another portfolio, working on it late, due to the fact that we're more likely creative at night. :D
korzo
@korzo
Aug 30 2018 01:43
yeah, I'm most productive from 1 AM :)
Morchid Chellali
@Morched23MJ
Aug 30 2018 01:44
Have a happy productive night. Cya! :)
korzo
@korzo
Aug 30 2018 01:46
bye
niniyzni
@niniyzni
Aug 30 2018 03:04

hi,

  • can you tell me how to fix the below errors,
  • providing my stackblitz below

ERROR ReferenceError: google is not defined
ERROR TypeError: Converting circular structure to JSON

https://stackblitz.com/edit/angular-sjhlxx

aenkirch
@aenkirch
Aug 30 2018 06:30
@korzo Yes, and that's why I use the "%60" which should be equal
To 59 (-1%60=59) but the modulo operator (%) does not work
abraham anak agung
@padunk
Aug 30 2018 07:15
how come -1 % 60 is 59? isn't it wil be -1?
korzo
@korzo
Aug 30 2018 09:10
@aenkirch -1 % 60 == -1 , not 59, as @padunk said
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 30 2018 12:54
how to set category to a new website?
google's bots were useless that's why asking here
dinesh
@1532j0004kg
Aug 30 2018 15:40
Hi guys
Anybody have a experience in wordpress !?
dinesh
@1532j0004kg
Aug 30 2018 15:46
I need help in hosting.
rk
@rajkumart08_twitter
Aug 30 2018 17:17

hi,

  • I am trying to add marker to the google maps.
  • but I am facing below error.
    InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
  • can you tell me how to fix it.
  • providing code below.

https://stackblitz.com/edit/angular-gmaps-api-suvdaf?file=src/app/map-loader.ts

return MapLoader.load().then((gapi) => {
      this.map = new google.maps.Map(gmapElement.nativeElement, {
        center: new google.maps.LatLng(lat, lng),
        zoom: zoom,
        mapTypeId: type,
       // label: "A"
      });

      this.map1 = new google.maps.Marker({
        label: "A",
        position: { lat: 59.33555, lng: 18.029851 },
        map: map,
        title: 'Hello World!'
      });

      // let markerSimple = new google.maps.Marker({
      //   label: "A",
      //   position: { lat: 59.33555, lng: 18.029851 },
      //   map: map,
      //   title: 'Hello World!'
      // });
    });
Yogender
@yb1997
Aug 30 2018 17:43
Hey guys, today I was learning about events in JavaScript and thought it might be a good idea to learn it by implementing in real life so I came with this
https://codepen.io/ybisht1997/pen/BOLYop?editors=0010
would love to have you guys feedback
Ivan Ngundela
@ingundela
Aug 30 2018 18:20
hello everyone… need little help with my localhost code not working… I’m want o make some changes to my website (all project file are in my localhost folder) when I open the website from the localhost and doing some changes the css not working at all.. but when I open the project from the text editor it works… do you have any idea on what might be happening ?
Brad
@bradtaniguchi
Aug 30 2018 18:21
@ingundela what do you mean open the project from the text editor? Also how are you opening your website from localhost? (your using a dev server to serve the pages?)
Ivan Ngundela
@ingundela
Aug 30 2018 18:24
@bradtaniguchi from text editor I do right click on HTML and than open in browser … in the localhost I type localhost:8888/name of project
Brad
@bradtaniguchi
Aug 30 2018 18:24
@ingundela what text editor is this? Is it brackets?
and I assume your not using a dev-server then right?
Ivan Ngundela
@ingundela
Aug 30 2018 18:25
@bradtaniguchi I’m using sublime
Brad
@bradtaniguchi
Aug 30 2018 18:25
ah
My guess is your CSS isn't found when using the localhost method, since it isn't being served correctly for some reason. Your css is in external files right?
Ivan Ngundela
@ingundela
Aug 30 2018 18:26
@bradtaniguchi yes it is external file
Brad
@bradtaniguchi
Aug 30 2018 18:27
For the final time, are you using a dev-server to run your project locally? If you aren't id use one (live-server is nice) and if you are, then check its config
Ivan Ngundela
@ingundela
Aug 30 2018 18:27
@bradtaniguchi very strange… even when I do right click and do inspect the code is not changing ...
Brad
@bradtaniguchi
Aug 30 2018 18:27
Id also double check your dev-tools to see if errors are being thrown
Ivan Ngundela
@ingundela
Aug 30 2018 18:27
@bradtaniguchi not using dev server...
@bradtaniguchi Thanks… let me check out how to use live server
Brad
@bradtaniguchi
Aug 30 2018 18:29
yea, should take out some headache of serving your files, since you don't want to care much about it
Corey Davenport
@coreydavenport
Aug 30 2018 19:33
How should a website that basically serves as an e-book handle all that text data in a SPA? I'm not sure where to start.
Christopher McCormack
@cmccormack
Aug 30 2018 19:40
@coreydavenport how is the book stored on the backend? you could potentially load a segment at a time from the backend and when a user clicks forward or backward it can load the next/previous segment from the backend
Or load a big segment to cache locally and serve in pieces until close to the bounds of that segment
AJ Brommy
@AJ-Brommy
Aug 30 2018 21:05
Anybody know why if I put some links together in the html I get a menu as expected, but when I lay them out neatly, on new lines each, I get a pixel or two gap? I feel like we had something similar on here the other day, wish I was paying attention now lol
 <a href="#">Sign up</a>
 <a href="#">Features</a>
 <a href="#">Pricing</a>
this way gives me the gaps. although i think its more like padding. but its on one side. the right hand side. if I write them all next to each other in one long line. it works fine. the gap goes.
```
a{
  display: inline-block;
  padding: 0.5em;
  text-decoration: none;
  color: #eee;
  border-left: 2px solid #eee;
  font-size: 1.5em;
}
The css I have on them
Muhammed Karim
@MuhammedKarim
Aug 30 2018 21:08
Would be helpful if you could put it in a codepen :smile:
AJ Brommy
@AJ-Brommy
Aug 30 2018 21:09
oh sorry
dunno why i didn't think of that lol
Morchid Chellali
@Morched23MJ
Aug 30 2018 21:53
image.png
@AJ-Brommy, I found a super helpful software, that has the UX almost like Photoshop, it's called Gravit Designer. It's very useful for designing a website template. :)
Here's a template I made on it:
@AJ-Brommy, yes it's because the Browser adds a margin of 4px to inline-blocks. To remove it, do margin: -4px
The exact same thing happened to me yesterday. :D
The trick I use is to use font-size: 0 on the parent
rk
@rajkumart08_twitter
Aug 30 2018 22:13

hi,

  • I am trying to include d3 maps inside my angular component.
  • I was able to include google maps but not sure how to include d3 maps.
  • right now in console IO am seeing the below error
    ERROR TypeError: Cannot read property 'transform' of null
  • providing my stackblitz and code below.
  • can you please let me know how to fix it.

https://stackblitz.com/edit/angular-gmaps-api-qwyfyv?file=src/app/map/map.component.ts

   function zoomed() {
      let t = d3
        .event
        .transform
        ;
      countriesGroup
        .attr("transform", "translate(" + [t.x, t.y] + ")scale(" + t.k + ")")
        ;
    }

    // Define map zoom behaviour
    var zoom = d3
      .zoom()
      .on("zoom", zoomed)
      ;

    function getTextBox(selection) {
      selection
        .each(function (d) {
          d.bbox = this
            .getBBox();
        })
        ;
    }
newmoon
@newmoon
Aug 30 2018 22:15
@rajkumart08_twitter (or @niniyzni??) Try the D3 room: https://gitter.im/d3/d3
Keegan
@Keggatron
Aug 30 2018 22:33
Hi guys, I'm having issues using aliases with LESS
Here is my alias object from the webpack.config file
 alias: {

      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
      '@': path.resolve(__dirname, '../src'),
    },
Here are how I'm now trying to import my LESS files into another one of my LESS files
@import '@/less/variables';
@import '@/less/top_row';
@import '@/less/body';
@import '@/less/breakpoints';

h1 {
  margin-top: 4rem;
}
here is the error message that I'm getting when compiling
Can't resolve './@/less/breakpoints.less' in '/mnt/c/Users/Keegan/dev/masterpiece-schedule-portal/src/containers/Organization'
      in /mnt/c/Users/Keegan/dev/masterpiece-schedule-portal/src/containers/Organization/index.less (line 4, column 0)
so it looks as though LESS is appending ./ to the front of my import statement. Doing some research it turns out you're supposed to add a ~ to the front of the import statement
so when I do that, I'm still getting an error stating that the import can't be found
Can't resolve '@/less/breakpoints.less' in '/mnt/c/Users/Keegan/dev/masterpiece-schedule-portal/src/containers/Organization'
      in .../src/containers/Organization/index.less (line 4, column 0)
Mel Macaluso
@MelMacaluso
Aug 30 2018 22:38
~ in sass/scss is the alias for node_modules
Keegan
@Keggatron
Aug 30 2018 22:38
So I'm guessing LESS can't see what the alias is, and I'm wondering how I could set the at @ alias in the less-loader options
Mel Macaluso
@MelMacaluso
Aug 30 2018 22:40
The ~ when I use it I use it front of the directory not in front of the import
Ie. @import '~/flickity/dist/main.css'
When flickity is a npm package situated in node_modules
Keegan
@Keggatron
Aug 30 2018 22:41
Looking at this comment it seems that the tilde will work for things other than node-modules.
Mel Macaluso
@MelMacaluso
Aug 30 2018 22:42
Saw that, still is from one year ago, make sure you are using the right loader version or check its updated doc?
Or convert to a scss file 😂
Keegan
@Keggatron
Aug 30 2018 22:43
well if you look at the error responses using the ~ removed the ./ from in front of the file path
I can't I'm using Semantic-UI
I wish
I'm just wondering how to declare an alias for the less-loader in my webpack config file
or somehow make less-loader aware of the alias already declared
AJ Brommy
@AJ-Brommy
Aug 30 2018 22:46
@Morched23MJ @newmoon thanks for the info chaps :)
Morchid Chellali
@Morched23MJ
Aug 30 2018 22:56
:hand: