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
Roger Luedecke
@Shadowolf7
When I press return after using the backticks, it enters a newline.
Julian Gonggrijp
@jgonggrijp
Oh right. There is a little icon in the top right corner of the box where you're typing your message. When it shows a pair of talking balloons, typing return will send the message immediately. When it shows a keyboard, it will enter a newline instead. You can press that icon to switch between the modes. You can always type shift-return to enter a newline rather than sending your message.
Roger Luedecke
@Shadowolf7
GOtcha, thanks again.
Roger Luedecke
@Shadowolf7
What is the difference between Object.getOwnPropertyNames()
and
Object.keys()
They seem functionally the same.
Julian Gonggrijp
@jgonggrijp
@Shadowolf7 getOwnPropertyNames gets you all own properties while keys gets you only the enumerable ones. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties for more details.
Seif Eddine Slimene
@SeifESlimene
Hello,
Can I use fetch instead of $.get ?
Julian Gonggrijp
@jgonggrijp
@SeifESlimene I think the options they accept are slightly different, though I don't know the differences by heart. They also handle responses with a non-2xx status differently ($.get will call the error handler while fetch only considers requests failed if no response comes back at all or if the response seems corrupt). fetch is not as widely supported as $.get (this can be addressed with a polyfill, but in that case you're probably not saving much space compared to just using jQuery). So definitely not exactly a drop-in replacement, but yes, they do serve the same purpose.
Seif Eddine Slimene
@SeifESlimene
@jgonggrijp I have a React project where I want to eliminate JQuery by using React JS instead.
Julian Gonggrijp
@jgonggrijp
@SeifESlimene Well fetch is certainly one of your options in that case.
Seif Eddine Slimene
@SeifESlimene

@jgonggrijp
I did

window.fetch(url).then(res => res.json()).then(callback)

Instead of

$.get(url, callback)

and now I can remove Jquery from the project as It represents a huge performance issue for the project.

Julian Gonggrijp
@jgonggrijp

@SeifESlimene Congratulations on eliminating a dependency from your project.

Out of curiosity, how was jQuery causing performance issues in your project?

Seif Eddine Slimene
@SeifESlimene
@jgonggrijp in my webpack bundle named "vendor" there was "jquery", when I analyse the bundle using a plugin called "webpack bundle analyser", I notice that this library took almost 300kb of my vendor bundle so minimizing the bundle size will speed up the loading time of my website.
I already using fetch in all my project but 300kb of code for just $.get isn't a good idea at all...
Julian Gonggrijp
@jgonggrijp
@SeifESlimene That sounds like webpack is picking up the non-minified version of jQuery. The minified version is only 90 kB. Add gzip compression to that and you'll be transferring only 30 kB. Then again, if you're already using fetch everywhere, I agree it doesn't make much sense to keep jQuery around just for $.get.
Nitin
@thenm
I am trying to implement typeahead on formly form refering this https://stackblitz.com/edit/angular-ngx-formly-ngselect-material-2bj3sf
It was working with static data.
But my code has a http call and not working anyone pls help
pushTypeaheadSearchFormatField(element: any, index: any) {
    this.formFields.push({
      'key': element[index].name,
      'wrappers': ['labelWrapper'],
      'type': 'typeahead',
      'defaultValue': element[index].defaultValue,
      'templateOptions': {
        'type': 'typeahead',
        'key': element[index].name,
        'label': element[index].displayName,
        'required': element[index].isRequired && element[index].isRegulatoryRequirement ? false : element[index].isRequired,
        'isRegulatoryRequirement': element[index].isRegulatoryRequirement,
        'dependencyRules': element[index].dependencyRules,
        'showLookupNotice': element[index].isOptionRequired,
        'optionsUrl': element[index].optionsUrl,
        'changeExpr': 'this.getData($event, field)',
        'isregularatoryProduct': this.isregularatoryProducts(element[index].name),
        'placeholder': 'Typeahead States',
        'search$': (term) => {
          if (term && term.length > 2) {
            this._http.get<any>(AppConstants.wkApiUrl.producerCode).subscribe(result => {
              const product = result.paginationData.map(key => key['name']);
              const filteredProduct = product.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
              return of(filteredProduct);
            })
          } else {
            return of([]);
          }

          // const states = this.states.map(key => key['name']);

          // if ((!term || term === '')) {
          //   return of(states);
          // }

          // return of(states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1));

        },
      },
    });
  }


  filterData(result, term) {
    const product = result.paginationData.map(key => key['name']);
    const filteredProduct = product.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
    return of(filteredProduct);
  }
Rohit Yadav
@rohyadav

anyone help me about javascript with styling . here is my code snippet

https://stackblitz.com/edit/js-dirxdg?file=index.js

i want when complete the bar percentage from the html means it get the percentage from an html and apply it using js dynamically

Julian Gonggrijp
@jgonggrijp
@rohyadav I don't really understand what you're trying to achieve yet. Could you explain a bit more?
Rohit Yadav
@rohyadav

ok, if you check the code snippet UI that have a percentage bar which is completed bar in percentage based on percentage written in html or above in every line. So as of now that is working fine with css. But i am trying to achieve that using javascript .
and remove css when it's coming from javascript

.skills__html {
  width: 60%;
}
.skills__css {
  width: 70%;
}
.skills__js {
  width: 75%;
}
.skills__react {
  width: 90%;
}

@jgonggrijp

Julian Gonggrijp
@jgonggrijp
@rohyadav I see. You can just assign the CSS width as a string to anElement.style.width. For example:
const htmlBar = document.querySelector('.skills__percentage.skills__html');
htmlBar.style.width = '60%';
Rohit Yadav
@rohyadav
@jgonggrijp Yes, but also we have grab percentage from an <span class="skills__number">20%</span>
If you see the JS code in it. so means whatever inside the html grab it and update the style
Julian Gonggrijp
@jgonggrijp
@rohyadav You can obtain the content from the html with anElement.textContent.
Mahdi3989
@Mahdi3989
hey , how i can get better in js?
Julian Gonggrijp
@jgonggrijp
Hey @Mahdi3989 :wave: Mostly by doing! Otherwise, it helps to get familiar with a couple of libraries that you feel are widely useful and that you feel are well designed. Also, practice all the good habits such as version control, testing and debugging.
svimanet
@svimanet:matrix.rongepaadl.com
[m]

:point_up: Edit: Hi, having a bit of a conundrum.
Material-UI/pickers.datepicker has been deprecated (mui-org/material-ui-pickers#2157), and I'm currently at work with a task to do some style changes to and existing picker based on this datepicker. But the style changes would require me to migrate to the new version for a specific override feature (for popover dynamic styling based on props).

Now the question is, should I migrate to @mui/lab and mui v5 in the future, or just avoid mui altogheter and include a vanilla js datepicker (https://github.com/qodesmith/datepicker) to customize. I have to rewrite the component regardless.

What are your toughts on MUI in general? Is it worth the hassle when we have to customize with company styles anyway? I've been on the fence for a while, but am considering to drop it altoghether

Edit: concluded with fuck MUI

svimanet
@svimanet:matrix.rongepaadl.com
[m]

:point_up: Edit: Hi, having a bit of a conundrum.
Material-UI/pickers.datepicker has been deprecated (mui-org/material-ui-pickers#2157), and I'm currently at work with a task to do some style changes to and existing picker based on this datepicker. But the style changes would require me to migrate to the new version for a specific override feature (for popover dynamic styling based on props).

Now the question is, should I migrate to @mui/lab and mui v5 in the future, or just avoid mui altogheter and include a vanilla js datepicker (https://github.com/qodesmith/datepicker) to customize. I have to rewrite the component regardless.

What are your toughts on MUI in general? Is it worth the hassle when we have to customize with company styles anyway? I've been on the fence for a while, but am considering to drop it altoghether

Edit: concluded with fuck MUI
Edit 2: when with this one if anyone cares; https://github.com/wwilsman/Datepicker.js

:point_up: Edit: Hi, having a bit of a conundrum.
Material-UI/pickers.datepicker has been deprecated (mui-org/material-ui-pickers#2157), and I'm currently at work with a task to do some style changes to and existing picker based on this datepicker. But the style changes would require me to migrate to the new version for a specific override feature (for popover dynamic styling based on props).

Now the question is, should I migrate to @mui/lab and mui v5 in the future, or just avoid mui altogheter and include a vanilla js datepicker (https://github.com/qodesmith/datepicker) to customize. I have to rewrite the component regardless.

What are your toughts on MUI in general? Is it worth the hassle when we have to customize with company styles anyway? I've been on the fence for a while, but am considering to drop it altoghether

Edit: concluded with fuck MUI
Edit 2: wentwith this one if anyone cares; https://github.com/wwilsman/Datepicker.js

Roger Luedecke
@Shadowolf7
Why does [...new Set(numbers)] return a clean array with the spread operator, while removing it returns Set(x) { }?
Julian Gonggrijp
@jgonggrijp
@Shadowolf7 What does "it" refer to? And what do you mean by Set(x) { } as a return value?
Roger Luedecke
@Shadowolf7
@jgonggrijp I figured it out. I was trying to understand the different outputs I got when using a spread operator or not as it related to a new Set object.
Marco Colia
@justoverclockl
guys, need a little help from you expert

 extend(DiscussionHero.prototype, 'oninit', function () {

    const GameApi = fetch('https://api.rawg.io/api/games/call-of-duty-modern-warfare?page_size=1&page=1&key=myapi')
      .then(response => response.json())
      .then(data => {
        this.gameDet = data;
        console.log(data)
        console.log(this.gameDet.name)
        console.log(this.gameDet.description_raw)
        console.log(this.gameDet.metacritic)
      })
  })
  extend(DiscussionHero.prototype, 'items', function (items) {
    items.add(
      'aaaa',
      <div className="myclass">
              <div class="myclass">
              // <------------------------------------------------ I WANT TO DISPLAY this.gameDet.name HERE
              </div>
      </div>
    );
  });
3 replies
but i can't access the json from there, console.log shows details correctly
Chris
@Valadone
Hey, someone using knexJS here ?
I can't find how I can retrieve my data from my DB
How I can retrieve everything from my database first
  knexClient.schema.createTable("events", (table) => {
    table.increments();
    table.dateTime("starts_at").notNullable();
    table.dateTime("ends_at").notNullable();
    table.enum("kind", ["appointment", "opening"]).notNullable();
    table.boolean("weekly_recurring");
  });
Marco Colia
@justoverclockl

guys, i have no experience with this, so i need help from an expert developer. i'm currently fetching an api, that return a string. i have this string into a div like:


<p class="card-text" id="google_translate_element">{this.gameDet.description_raw}</p>

there's a way to auto translate this string into navitator.language of the user?

1 reply
Dominic Watson
@intellix
iOS14 - scrollTo(0, 1) keeps Safari Browser UI collapsed
iOS15 - scrollTo(0, 1) causes Safari Browser UI to expand (URL bar etc)
anyone found a way around the new behaviour in iOS15?
cyberquarks
@cyberquarks

Hi I have a quick question

Given this code:

de = () => {
           ce(),
           r.ipcMain.handle("someIPCFunction", (async () => !!oe().someValue))
         }

How can I make it so I can window.alert the value returned by the r.ipcMain.handle("someIPCFunction", (async () => !!oe().someValue))

As such I can see the value returned by r.ipcMain.handle... as it is getting applied.

Just to know what's the response data of the IPC function
Julian Gonggrijp
@jgonggrijp
@cyberquarks if you mean you want to see what's inside oe().someValue, put the alert inside the same callback.
cyberquarks
@cyberquarks
Hi @jgonggrijp I figured it out,
de = () => {
           ce(),
             () => { 
                  let value = r.ipcMain.handle("someIPCFunction", (async () => !!oe().someValue)); 
                  window.alert('something');
                  return value; 
             }
         }
cyberquarks
@cyberquarks
Julian Gonggrijp
@jgonggrijp
@cyberquarks Not on my own, but I've used plyr which worked quite well.
Anurag Vohra
@anuragvohraec
Hi do any one know how to "setTimeout to break an "for await ...of" loop, if loop do not complete within a given time?"
https://stackoverflow.com/questions/69541047/javascript-settimeout-to-break-an-for-await-of-loop-if-loop-do-not-comple
Marco Colia
@justoverclockl
guys anyone know why i can't access my json data into the div?

 extend(CommentPost.prototype, 'oncreate', function () {

    let AmILoggedIn = app.session.user;
    if (AmILoggedIn) {

      const ipApi = fetch('https://ipinfo.io/json?token=MYAPIKEY')
        .then((response) => response.json())
        .then((data) => {
          this.ipData = data;
          console.log(data)
        })
        .catch((error) => console.log('Something went wrong...'));
    }
  })
  extend(CommentPost.prototype, 'headerItems', function (items) {
    items.add(
      "ipinfo",
      <div className="ipinfo" id="countryCode">{ipData.country}</div>
    )
  })
ipData is not defined
Julian Gonggrijp
@jgonggrijp
@justoverclockl Probably because headerInfo is being invoked before the response arrives. Bit difficult to be sure, though, because I'm not familiar with this coding style. Is this some flavor of React?