## Where communities thrive

• Join over 1.5M+ people
• Join over 100K+ communities
• Free without limits
##### Activity
• Dec 21 2018 17:11
• Jun 05 2018 23:13
• May 25 2018 16:50
Seif Eddine Slimene
@SeifESlimene
@jgonggrijp I'm not sure if I understand you correctly or not, could you explain, please?
Thanks!
Julian Gonggrijp
@jgonggrijp
@SeifESlimene What do you already know about currying? Probably best if I start from there.
Seif Eddine Slimene
@SeifESlimene
@jgonggrijp Well, what I just can say about currying is that it's basically a function that returns another.
But I still can't figure out its real use case, that's why I seek your help folks :D
Julian Gonggrijp
@jgonggrijp

@SeifESlimene Not every function that returns another function is a curried function, though. Suppose you call a "normal" (i.e., non-curried) function that takes three arguments.

foo(a, b, c)

If foo was curried, you'd be calling it like this intead:

foo(a)(b)(c)

So basically, every curried function takes only one argument at a time. As long as you haven't provided all the arguments that are required, you just get another function that takes one argument. So foo is a function that takes one argument, foo(a) is a function that takes one argument, foo(a)(b) is a function that takes one argument, and finally foo(a)(b)(c) is the same value that the uncurried foo(a, b, c) would return.

Now, the use case mostly comes in with partial application. Suppose I already know which a and b I want to pass to foo, but I want to leave the choice of a c to some other function bar. Naievely, in the uncurried case, I might just pass a and b as additional arguments to bar and have it make the final call to foo:

-- definition of bar
function bar(a, b)
return foo(a, b, c)
end bar

-- later, calling bar
bar(a, b)

However, that requires that bar already knows that I want to call foo. What if bar is a more generic function, which just expects any single-argument function and then passes c to it? How do I ensure that it will invoke foo with a and b already passed? In the uncurried case, I can write a wrapper function for this purpose:

-- definition of bar
function bar(func)
return func(c)
end bar

-- wrapping foo
function wrapFoo(a, b)
return function(c)
foo(a, b, c)
end
end wrapFoo

-- finally, calling bar
bar(wrapFoo(a, b))

Libraries for uncurried programming languages often provide a helper function so you don't have to write wrapFoo yourself. For example _.partial in Underscore for JavaScript. With such a helper function, we can do the same as above in less code:

-- definition of bar
function bar(func)
return func(c)
end bar

-- calling bar
bar(partial(foo, a, b))

In curried programming languages, however, you don't even need a helper function like partial:

-- definition of bar
function bar(func)
return func(c)
end bar

-- calling bar
bar(foo(a)(b))

I hope the added value of currying is clearer this way. Let me know if you still have questions.

As a final remark, while some programming languages are curried by default and others are not, you can have both flavors in either type of programming language. In uncurried languages, you can write a curry helper function that turns any function taking multiple arguments into a function that takes one argument at a time. In curried languages, you can write a function that accepts a tuple of values in order to simulate an uncurried function.

Seif Eddine Slimene
@SeifESlimene
@jgonggrijp Great stuff Thank you.
I should digest these things more carefully now!
Roger Luedecke
My editor keeps complaining of a missing semi-colon and I cannot figure out the problem. Here is the code. var filteredList = watchList.map(el =>
{
title: el['Title'],
rating: el['imdbRating']
}
).filter(movie => movie.rating >= 8.0);
var code = 'var filteredList = watchList.map(el =>
{
title: el['Title'],
rating: el['imdbRating']
}
).filter(movie => movie.rating >= 8.0);'
Julian Gonggrijp
@jgonggrijp
@Shadowolf7 Your editor (and anything that parses JavaScript) is thrown off by the opening brace after the arrow. It expects a function body but your intention is to write object notation. You can disambiguate it by putting parentheses around the braces like this:
var filteredList = watchList.map(el =>
({
title: el['Title'],
rating: el['imdbRating']
})
).filter(movie => movie.rating >= 8.0);
By the way, you can make code look more readable like this by placing it between code fences like so:
js

Roger Luedecke
@jgonggrijp thank you! It's always some little thing while learning it seems. are you saying that to get the nice black boxes to use that backtick thing?
Julian Gonggrijp
@jgonggrijp
and welcome.
Roger Luedecke
@jgonggrijp how do I get it to send after?
Julian Gonggrijp
@jgonggrijp
send after? what do you mean by that?
Roger Luedecke
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
GOtcha, thanks again.
Roger Luedecke
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'],
'defaultValue': element[index].defaultValue,
'templateOptions': {
'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);
}
Nitin
@thenm

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?

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%';
@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
[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
[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
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
@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) {
'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
  knexClient.schema.createTable("events", (table) => {
});