Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Dec 21 2018 17:11
    @MadLittleMods banned @OmarAlmaqtri
  • Jun 05 2018 23:13
    @MadLittleMods banned @LWSS
  • May 25 2018 16:50
    @MadLittleMods banned @TheRedstoneTaco
Julian Gonggrijp
@jgonggrijp
I proposed Underscore utility functions for prototype-centric (as opposed to constructor-centric) programming. Would be interested in comments.
jashkenas/underscore#2947
Tunde Oretade
@tundeiness

Hello guys. I need help with a HTML structure. I have a header tag which is styled as a flexbox. It has two contents: a picture to the left and navigation links to the right. Now I want to introduce a line in the middle of the picture and the navigation link and the way I am going about it is to use flexbox order. For example:

.nav{ position: relative;
order: 0;
//other styles}
.nav::after{
   content: '';
   display: block;
    height: 1px;
    flex: 1 1 auto;
    width: 100%;
    background: #fff;
    order: -1;
}

the result should produce a line between the picture icon on the left hand side and the navigation container on the right hand side, but the line ends up in the navigation container(i.e the .nav class) instead of outside it. It's confusing how this is happening so I'd like a second pair of eyes to help solve it. Thanks.

Julian Gonggrijp
@jgonggrijp

@tundeiness Do you mean a line between the image and the links? A vertical line?

If so, why not just set a left border on the .nav?

1 reply
Oh I see, I think you mean a horizontal line.
I think ::after and ::before always go inside the matching element rather than outside it. You can attach the pseudoelement to the header element instead.
2 replies
Tunde Oretade
@tundeiness
hi guys. I need help. I have this Api that I am trying to consume: https://torre.bio/api/bios/ and I usually get this error Access to XMLHttpRequest at 'https://torre.bio/api/bios/john' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. on close investigation at the network tab I found out that any time I hit the above url I am being redirected to https://bio.torre.co/api/bios. Which seems to show that I may need a proxy server backend to handle access to this url. I have searched and nothing comes close to a solution. A stackoverflow respose "https://stackoverflow.com/questions/70114502/access-to-xmlhttprequest-at-from-origin-http-localhost4200-has-been-bloc " is a close answer but it was implemented with .Net. My app codebase is in react and I need help on setting up a proxy server to consume the API above. Thanks.
3 replies
yoshibomball1234
@yoshibomball1234
hey could I get some help with a javascript code pls?
Julian Gonggrijp
@jgonggrijp
@yoshibomball1234 https://dontasktoask.com
2 replies
Lauro
@Lauro235

Hi guys, I'm reaching to ask for a little help. I'm working through the codecademy js course and I've just done this task.

function monitorCount(rows, columns) {
  return rows * columns;
}

function costOfMonitors(rows, columns) {
  return monitorCount(rows, columns) * 200;
}

const totalCost = costOfMonitors(5, 4);

console.log(totalCost);

I want to check my understanding of how js handles the data and what the call stack status is during the evaluation. I think I have a good idea, but I'd like your feedback in case I've missed something or I'm totally wrong..

22 replies
Stephen James
@sjames1958gm
When you call sayHelloTo(‘John’), the value of coreText is ‘John’
This is the equivalent of
function sayHelloTo(coreText) { return “Hello “ + coreText }
This is essentially what prefix returns when called with “Hello “
svimanet
@svimanet:matrix.rongepaadl.com
[m]
Noobish question;
Whats this operator called? (Double exclamation mark)
return !!(confirmOne && confirmTwo);
svimanet
@svimanet:matrix.rongepaadl.com
[m]
:point_up: Edit: Noobish question;
Whats this operator called? (Double exclamation mark)
return !!(confirmOne && confirmTwo);
Edit: https://stackoverflow.com/questions/9284664/double-exclamation-points
:point_up: Edit: Noobish question;
Whats this operator called? (Double exclamation mark)
return !!(confirmOne && confirmTwo);
Edit: https://stackoverflow.com/questions/9284664/double-exclamation-points
Makes logical sense, but was hard to read. Noob mistake
Julian Gonggrijp
@jgonggrijp
@svimanet:matrix.rongepaadl.com The answer is "it has no name because it is just twice the single exclamation mark". But maybe you already figured that out. It's not entirely clear from your messages.
Stephen James
@sjames1958gm

The discussion stack overflow is why? I did think of one case that might apply.
if you wanted to place a boolean into a value in an object from the existence of a value in a variable

{
   value: anObject,
   exists: !!anObject
}

I believe this will ensure that exists becomes a boolean value

Julian Gonggrijp
@jgonggrijp
@sjames1958gm That's definitely the reason.
easyrahil
@easyrahil
hello everyone
Julian Gonggrijp
@jgonggrijp
Hi @easyrahil :wave:
Lauro
@Lauro235

Hi everyone, I have been doing a really cool John Smilga project (the Reviews project https://www.youtube.com/watch?v=3PHXvlpOkf4&t=2736s&ab_channel=freeCodeCamp.org) and would like to check my understanding..

Starter files

const reviews = [ {
    id: 1,
    name: "susan smith",
    job: "web developer",
    img:
      "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
    text:
      "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
  },
{object 2} etc];
const img = document.getElementById('person-img');
let currentItem = 0;

We have a DOM with an image in, which of course has a src attribute..

When the html loads we are running this so far...

window.addEventListener('DOMContentLoaded', function(){
  const item = reviews[currentItem];
  img.src = item.img;
})

I can see that img in this case refers to our getElementById variable, but I wanted to check about the .src part.
src is an attribute, but it seems to be being used as a property. The dot notation is selecting it? Is this correct?

item.img is pointing to the array index 0, but when it says .img it's reaching into the object property for img. Am I correct?

So when it says img.src = item.img it means that the source of the img variable should equal the value of the img property within the array?

Sorry for the waffling, but this is baffling me!

Gazook89
@Gazook89

src is an attribute, but it seems to be being used as a property. The dot notation is selecting it? Is this correct?

correct. you could also do img.id to get the id of the image (if it had one)

item.img is pointing to the array index 0, but when it says .img it's reaching into the object property for img. Am I correct?

correct. item is an object, and img is one of it's properties, and the value of img can be got with item.img

Gazook89
@Gazook89

@Lauro235

So when it says img.src = item.img it means that the source of the img variable should equal the value of the img property within the array?

correct. It is setting the image element to display whatever resource/URL is loaded into review[0].img

Lauro
@Lauro235
Thanks for all the help. I'm glad I understood that element correctly.
Dilshan Karunarathne
@dilshankarunarathne
@kevinJ045 I'd like to join your GitHub organization.
Can you send me an invitation ?
Lauro
@Lauro235
Hi everyone. Is there an extension on vscode that can take you through a JavaScript function step by step? I'm interested in following the recursion process and I saw a similar extension for Java that allowed you to step through each action in the call stack. Any help and suggestions are appreciated
Julian Gonggrijp
@jgonggrijp
@Lauro235 That's called (stepping with) a debugger. I don't know vscode, but I do know that you can debug JavaScript in every browser as well as in Node.js.
In browsers, open the developer tools, go to the "sources" tab, set breakpoints to your heart's content, then trigger the code you want to debug, e.g. by refreshing the page.
In Node.js, insert a line that goes debugger; to insert a breakpoint, then run the code with node inspect or use the inspect subcommand or --inspect option of whatever software sits between you and node, such as mocha, jest, etcetera.
2 replies
Stephen James
@sjames1958gm
VS Code allows you to set breakpoints in the node code and step through the code. You set the breakpoint in the code file and it stops execution at the breakpoint and puts you in the code file at that point.
5 replies
easyrahil
@easyrahil
hello all, I have a question: How to add a left off canvas panel in a chat script? only when person logged in the chat room. so when someone open the left panel the all chat content slide also./ ( https://chitchatx.com )
4 replies
Tunde Oretade
@tundeiness
Hi guys. So I am battling with the concept of 'responsive width'. here is the problem. I have a navbar that has two items: the brand section and a search input. On big screen, there is a space between the brand section and the search area. the search increases in width when users focus on the input taking up the space between the brand and the search section. However, on small screen, i'd like the space to reduce. I tried this with flexbox but the result isn't responsive enough. It resulted in me taking care of width with media queries and I do not want that. So I'd like to know if there is a better way to do this? I tried bootstraps w-50 class but the issue is that it did not account for other screens. Any help will go a long way. Thanks.
Julian Gonggrijp
@jgonggrijp
@tundeiness Could you show the relevant bits of HTML and CSS? That's a bit easier talking.
Marco Colia
@justoverclockl
hello guys how can i sum all numbers inside a for loop?

function sumUntil(maxValue) {
    let total = 0;
  for (let i = 1; i <= maxValue; i++) {
     console.log(i)



  }
}

console.log(sumUntil(5));
i want the result 1 + 2 + 3 + 4 + 5
i'm trying to understand loop
Stephen James
@sjames1958gm
@justoverclockl looks like you need to add i to total value in the loop, e.g. total += i
Gianfabio Pezzolla
@gianfabiopezzolla
@justoverclockl @sjames1958gm has rights, you need to loop in this way to reach your goal:
var sum = 0;
function sumUntil(maxValue) {
  for (let i = 1; i <= parseInt(maxValue); i++) {
     sum += i;
  }
}
const total = sumUntil(5)

console.log(sum);
// 15
Marco Colia
@justoverclockl
oh now is more clear, thanks
but why parseInt? we know that values are integer
and, what if i want this output? console.log(sumUntil(5)); // OUTPUT: 1 + 2 + 3 + 4 + 5 = 15
Marco Colia
@justoverclockl
@gianfabiopezzolla sono italiano comunque, grazie :D
Gianfabio Pezzolla
@gianfabiopezzolla
@justoverclockl Ciao Marco, di nulla figurati...
18 replies
Julian Gonggrijp
@jgonggrijp

I don't want to ruin your learning experience with regard to loops, but you can calculate the sum of a linear series of numbers using a formula. No need to iterate over all the numbers. :-)

function sumSeries(first, last, stride = 1) {
    const length = (last - first) / stride + 1;
    return (first + last) * length / 2;
}

How to use:

// sum of [1, 2, 3, 4, 5]
sumSeries(1, 5)

// sum of [5, 8, 11, 14] (step size 3)
sumSeries(5, 14, 3)

Credit due to Carl Friedrich Gauss (who was not the first to invent it).

Julian Gonggrijp
@jgonggrijp
@justoverclockl Coincidentally we had a nice thread about closures in January. :point_up: 13 januari 2022 10:12 I suggest reading that.
Marco Colia
@justoverclockl
i'm stucked on some getter and setter

const person = {
    get firstName() {
      return this.firstName;
    },
    set firstName(value) {
      this.firstName = value;
    },
    get lastName() {
      return this.lastName;
    },
    set lastName(value) {
      this.lastName = value;
    },
    fullName() {
        return `${this.firstName} ${this.lastName}`
    },
}


console.log(john.fullName()); // John Doe
console.log(simon.fullName()); // Simon Collins



/*
# Object Constructor - Exercise 1
Create the `person` object and define the methods within it
getter / setter for the properties: `firstName` and` lastName`.
Also define the `fullName ()` method within the object
which takes care of concatenating and returning the name and surname
of the person. Finally, construct two objects: `john` and` simon`,
both go to the value of `firstName` and` lastName`
and print the full name in the console
*/
how can i achieve the expected output?
if anyone can show a commented solution will be appreciated
Julian Gonggrijp
@jgonggrijp

@justoverclockl The reason your code doesn't work is that you are writing functions that keep infinitely calling themselves. To see why this is the case, let's take a moment to see how getters and setters work.

Normally when you write anObject.firstName, it literally means "give me the value of the firstName property of anObject". Likewise, when you write anObject.firstName = 'John', it means "set the value of the firstName property of anObject to 'John'".

Getters and setters change this. If you define a getter for firstName, this means that the firstName property of anObject is now a function. When you write anObject.firstName, this function is implicitly called and the result is returned. Likewise, if you define a setter for firstName, writing anObject.firstName = 'John' actually means that you are passing 'John' as an argument to a function.

In your code, you are doing this:

const person = {
    get firstName() {
      return this.firstName;
    },
    // ...
};

The middle line return this.firstName is implicitly calling the getter function itself. Which you just defined to run that middle line. So this will repeat in itself and never end. The other accessors have the same problem.

The way to fix this is to have a separate property that will hold the actual data. A common practice is to use the same name but with an underscore before it. In that case, your person object will look like this:

const person = {
    get firstName() {
      return this._firstName;
    },
    set firstName(value) {
      this._firstName = value;
    },
    get lastName() {
      return this._lastName;
    },
    set lastName(value) {
      this._lastName = value;
    },
    fullName() {
        return `${this.firstName} ${this.lastName}`
    },
};

Now you can create objects that inherit these accessors and the fullName method. You can supply the properties that hold the actual data while doing this. I'll show you the example for john:

const john = Object.create(person, {
    _firstName: 'John',
    _lastName: 'Doe',
});

For completeness, I'll mention that the use of accessors in this example is absolutely pointless. You can get the same result with less code and better performance if you just use regular properties:

const person = {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

const john = Object.create(person, {
    firstName: 'John',
    lastName: 'Doe',
});

Of course the exercise is still useful to get a grasp of how accessors work, but just remember that using them is not a goal in itself. You only need to spend code and effort on accessors if you need to perform extra work when a property is read or written, for example to ensure that multiple properties stay consistent with each other or to trigger events.