« first day (3756 days earlier)      last day (1414 days later) » 

04:41
Can someone please explain this if condition if (item[keys[i]].toString().toLowerCase().indexOf(val) !== -1 || !val)
@Jellyoo Welcome to the JavaScript chat! Please review the room rules. If you have a question, just post it, and if anyone's free and interested they'll help. If you want to report an abusive user or a problem in this room, visit our meta.
My understanding so far is keys[i] is the word with the index of i inside keys (which is an array) and then .toLowerCase converts the word lower case letters.
I am confused about the rest...or is the code wrong?
 
4 hours later…
08:29
Anybody able to give me some advice I finally have it so error is going from one component to the other and it is handlking the call asynchronously and the errors are logged into state, but how can I get this to finally wait onchange to render until the asynchronous function has returned thus displaying the errors
the code is here:
function AsyncFormField () {

    const [value, setValue] = useState('');
    const [dirty, setDirty] = useState(false);
    const [errors, setErrors] = useState([]);

    const HasChanged = e => {
        e.preventDefault();
        const { label, required = false, validator = (f) => f, onStateChanged = (f) => f } = this.props;
        const value = e.target.value;
        const isEmpty = value.length === 0;
        const requiredMissing = dirty && required && isEmpty;

        let error = [];
Hi there, I am making http call using npm request module, this API downloads a tar file. So I would like to validate its fileName and contents(i.e number of files and name of the file) in jasmine spec. How can I do this?
@AkshayIjantkar Welcome to the JavaScript chat! Please review the room rules. If you have a question, just post it, and if anyone's free and interested they'll help. If you want to report an abusive user or a problem in this room, visit our meta.
08:46
@Kwsswart you don't, async/await is not meant to synchronize anything or wait inside an event handler until something finishes (what do you expect? the UI to be blocked until your fetch call returns maybe after a 60second timeout?), it's more syntactic sugar to make things look like synchronous code
@makadev What I am attempting is example say you are typing the username in and there is a replica I am sending a ajax call to the server on every change to check for used usernames and then if used to display the error. right now the error is being saved in the state but only after rendering the input field
how would i get this behaviour
there are different solutions, a simple one might be to debounce API check
Hmmm what exactly does debounce mean
ah sry.. I was thinking ahead.. debouncing is just a method to slow down the rate of API checks, like f.e. you are typing 8 characters but the fetch call will only be fired every 500ms max. (so fast typing maybe 2-3 times)
you can try without debouncing first but it will fire 8 fetches then
every onchange event
for your problem
makes sence may look into that but at the same time that doesnt help with the rendering prior to the return of the ajax no?
Because the return is coming as expected and when logging the errors I am noting the change in errors but also with the log in the render i am noticing the render log coming before the ajax call log
My original code before changing it to functional component was
class AsyncFormField extends Component {

    state = { value: '', dirty: false, errors: [] }

    hasChanged = e => {
        e.preventDefault();
        const { label, required = false, validator = (f) => f, onStateChanged = (f) => f } = this.props;
        const value = e.target.value;
        const isEmpty = value.length === 0;
        const requiredMissing = this.state.dirty && required && isEmpty;

        let errors = [];

        if (requiredMissing) {
            errors = [ ...errors, `${label} is required` ];
09:01
you should realy read about Promises / async/await
your validator function uses fetch right? it's the async operation
@makadev yeah ok so the validator function is passed from this component:
typicaly you would both update your state in onChange (reset) and update the errors/dirty state when the validator returns
const UsernameField = (props) => {
    const { type, validator, ...restProps} = props;

    // look into having separate function to throw error or look into implementing the error display from form field manually
    // look in js chat
    const validateUsername = async (value) => {
        var isValid = true;
        var error;
        await fetch('/api/check_username', {
            method: 'POST',
            headers: {'Content-type': 'application/json',},
            body: JSON.stringify(value)})
So essentially I am using the UsernameField component to handle the api call while it is returning the AsyncFormField, all of which is rendered within the main form with
<UsernameField fieldId="username" label="Username" onStateChanged={this.usernameChanged} required />
ye
use setState in validate AND in onchange
the problem with async await is that it looks synchronous but isn't
@makadev You mean within the AsyncFormField Component?
09:12
ye, when you call validate() it will kick of an asynchronous operation which does not finish until fetch returns (exception on fetch errors), so this.setState(({ dirty = false }) => is most likely run before errors is set
you can put a console.log there
so the easy solution is to call this.setState each in onChange to reset the current state and in validate with the actual error/valid state
that is perfect its showing up perfectly as expected now.... now just to look into how to do the debouncing you were talking about
so that it isnt firing many calls
probably not throttling, I think it might suppress the wrong calls
sigh.. I remember implementing it like 1 year ago but ffs I can't remember which I used
Thanks guys I appreciate it will take a look into them and see if I can do it
09:36
@VLAZ ah I see, so if I understand stackoverflow.com/a/40550771/3828957 correctly API call throttling should rather be done with debounce and not throttle (due to the last call, which was exactly a problem I hit in one project)
I think I was reading this medium article about debounce/throttle leading/trailing at that time: medium.com/@ellenaua/…
and it simply looks like the last call will always be done, thought it kind of doesn't fit the description... meh
anyway, time for work
@makadev sorry, I haven't followed the discussion here. I saw you linked to debounce/throttle and wanted to link to the explanation about the difference. I personally found it quite useful for understanding how they work.
Which one you choose tends to depend on your use case. Most of the times I've seen debouncing being used. E.g., if you have a user typing and you want to search after they "finish typing" rather than fire a request on every keystroke.
But throttling is still something you can use and has value. I can't think of examples off the top of my head but it's still something you might want to do.
10:02
@VLAZ this one has a nice visual example: redd.one/blog/debounce-vs-throttle
better to understand.. and it brings back the memories.. Throttle reduces the rate of actains but it will call it at least once in the specified time window (so, f.e. for visual updates where something should happen, but not too often)
and Debounce.. uhm.. debounces, meaning it will wait until the rate/frequency of debounced actions is lower than the specified time... (so this f.e. API calls / Input Validation and other Action after Event stuff)
well.. see how long it takes to forget that again ._.
 
3 hours later…
12:38
let start = Math.max(...weights)
what do the ... mean here?
weigths is most likely an array, ... is the spread operator or in that case argument unpacking like: Math.max(...[1,2,3]) is same as Math.max(1,2,3)
so it gets the Max value of weigths array as start
hmmm why can you just do Math.max([1,2,3]) in js?
Math.max is not defined that way, it takes 0 or more arguments and returns the heighest or NaN/Infinity on error/missing arguments
python abstracts this away
no, you need to unpack arrays too
12:48
max(array) would work in python, whereas in js you are saying you need to do max(...array)
you are mixing apples and oranges
python max allows either N arguments or an iterable (like an array)
yes i agree which is an abstraction
but you can unpack too like: max(*array)
where is js you need to use this ... to unpack
hmm after minimizing and tree shaking I notice the javascript source is still 1.8 mb
Of which 1.4 Mb need to be loaded during intial load - is this a major problem, and any suggestions? :/
13:05
show some css spinner until the JS is loaded?
Chunking if possible? A CDN to speed up delivery?
hmm I could use react's dynamic loading for "everything" - but that would still bundle react with the very initial load (though that's still dubious).
react itself should be more around 300kb AFAIR
1.8Mb sounds like quite alot, Icons/UI Framework, alot of library code?
I've tried "chunking" however an analyzer showed why it didn't result in good things: majority of the code (about 30-40% are libraries, react - mobx - moment - material ui components) used everywhere. And the second is that we use a MVC system - where nearly all logic is in the models.
the models themselves are about 300kb in code size
ah I see.. and react+mobx+moment+material ui should be around 1+ MB too
it's 900kb XD
13:11
:o
The bigger problem is that material ui components are huge - and webpack doesn't seem to bundle the components with the bundles where they are used.
but instead groups them together, and then have a lot of very small "view" modules.
If I anlayze why the controllers have become so large I notice it is mainly due to me decoupling pageloads from dataloading. And using a "custom" system where the frontend keep track of changes and uploads/tries again later. Combined with a merge algorithm if changes happened at multiple places at once.
13:28
@paul23 that doesn't sound like something you could "just rewrite" to be a bit smaller thought
Yeah but seeing this makes me have second thoughts on the process. Hardly ever is the merge behaviour used anyways, since it would require a persona who started enrollment for an event to stop enrolling (so it is stored midway on server). Then reopen it on two devices where one device disconnects but keeps updating on the disconnected device, while simultaneously doing something on the other.
Problem is: it's now very much ingrained in the system.
srsly, I think having second thoughts and think about what would have been better is part of the process
if you have time/money you can rewrite it and hope that it's sliiightly better, otherwise just fix it on the next project ;)
@makadev yeah this isnt' an easy change, if I would take a rought guess it would take about 300-500 developer work hours to fix.
How would you suggest me to reset my div(which has event listeners)? I have a tictactoe game and I want to reset the game-board whenever user clicks the button "Play" . I went through the answer on SO that recommended cloning the div. Is that the best way for me to proceed too?
btw. I have a react/redux/material-ui project from a year ago or so, first time I used react hooks and material UI... it basically just loads and represents Data like schedules, events, some news posts with a few back channels like feedback/contact boxes, yet it still ends up with 1.4MB
only good thing is it was for an embedded system so no loading involed
13:42
Well to be frank I/we started 3 years ago without much knowledge in practical javascript (though I had a lot of trial personal projects and theoretical knowledge - never created a big project from scratch before). We've now grown with that codebase, so the bigger question is: would we add new modules using the "old style with merge behaviour" - or more a "per page" style where each page loads its own stuff.
Since the old way does work very smoothly once it has loaded.. And if the person has a reasonable pc that can run js easily.
Where we can slightly predict data before a user clicks on a page and thus load pages seemingly instantaneous.. After the first 4-5 second initial load.
Do you see any benefit in rewriting it beside that first loading hit?
300-500 work hours is like a small to small-medium size project alone, that would need quite some return/benefit.. a slow load on the other hand can be downplayed with a nice Landing Page or Loading Animation for only a few hours work
thats basically the mobile app approach, show a Splashscreen (or in that case a loading Screen/Landing Page)
13:57
@paul23 shouldn't it be cached after first load?
when calling an item with a space in the name through REST, do I use %20 or _
@JBis apart from that we use fast deployment with weekly new releases
@bigchungus depends, if its a route name i'd use _
Thanks
Actually for seo use '-'
14:06
^ i take it back, that's better
frontend i'd use -, backend/api _
google indexes 'example.com/great-site' under great and site while it indexes great_site only under great site (as full search). It punishes %20 with lower rankings for hard-to-decipher urls.
Take that knowledge with a bit of salt: I read that in a blog about 5 years ago by a former employee - but things might change in 5 years XD.
Anyone familiar with https://momentjs.com/

Doing some research on it rn, just need to format a Date field I am pulling through my Fetch. Its getting returned as "2021-01-18T05:00:00Z"
moment is deprecated btw
lulwut?
14:13
Is there anything in place of it?
yes, many alts. Moment team suggests some.
I know an easy fix would be to change the Date field I am pulling to a text field instead of a Date&Time lookup but trying to keep it more favorable in the user interface
So they don't have to type it in, then it would be a mess having people input dates differently
hmm problem is that once again it "fragmentizes" - haven't found one that has the ability to both support locales as well as works with data sending.
-.-
This issue I have been having with trying to format my HTML, I said screw it and went with DataTables even though the data isn't necessarily "Tabular" per say. It still works in the end and has cool built in print/pdf functions and querys
@JBis oh.. good to know lol
14:22
Well time to put "move away from moment" on the backlog
will prob reduce your bundle size as well
"meh" momentjs itself is 40 kb in size - and I managed to load locales dynamically (which moment had its own tools for, older than tree shaking).
Day.js with 2kb looks interesting ;)
2
Not sure about Luxon, first time I see that one. date-fns looks promising.. brrrr
14:40
why is the internet down
nothings working
sends message over the internet
14:59
🚽
15:58
Days.js " designed to work both in the browser and in Node.js" so aside from browser side, it only works in Node which I am completely unfamiliar with.
<script>dayjs().format()</script>

After initializing the script, is there anywhere I need to specify "WeekOf" is the item I am trying to format?
what are you trying to do? don't use a lib if you don't have to
JS date is fine more many situations
16:13
So this is how my date is getting called through the AJAX

2021-01-18T05:00:00Z

It is ordered correctly (YYYY-MM-DD)
but it is pulling through T05:00:00Z
Not sure what that is or where it came from
hello
||> (new Date()).toISOString()
@JBis "2021-01-27T16:16:14.585Z" Logged: `` Took: 0ms
@bigchungus ^
Thats the thing, I don't want it formatted in ISO
16:17
||> new Date(Date.parse('2021-01-27T16:16:14.585Z')).toLocaleString();
@JBis "1/27/2021, 11:16:14 AM" Logged: `` Took: 760ms
Just parse it and get the format you want
Ok. So if the variable I am calling in my AJAX is WeekOf that holds the date I am pulling. How would I parse WeekOf?
new Date(Date.parse(WeekOf)).toLocaleDateString();
?
(new Date(Date.parse(WeekOf))).toLocaleDateString();
yes
So no library is necessary that is nice.
16:21
I just saved you 70kb. You owe me data.
Would this be correct to call at the end of my loadData(); function?
Before table populates but after ajax call
Anyone know where I would start if I wanted to go about coding something similar to onworks.net or lambdatest.com? it seems like a really cool project but i just don' know where to start.
for starters, how do they work
Uncaught ReferenceError: WeekOf is not defined at loadData

and tells me it isn't defined on the page I am posting the WeekOf to

It tells me this
17:00
hello
hello
I was thinking about maybe coding something similar to onworks.net or lambdatest.com, it seems like a fun project but I don't really know how to start, for starters, how do they work?
they basically run a browser in your browser
excellent for getting past school firewalls, but they are all either blocked or freemium
17:15
if you want to save time just download a vpn
If all you are trying to do is bypass a firewall
tor is blocked and im on chromebook and it wont let me turn on linux
also i kinda wanna codee it
17:46
how would you get the current word at x position in a string ? just find the nearest white space boundaries surrounding x ?
18:00
@makadev We've tried date-fns but the problem there is a lot of implementation leaking when you use it; it's not really self-contained and you need to understand a lot of the implementation details to add some utilities.
js date is terrible if you plan to do any internationalization
Especially considering cross platform capabilities it becomes painful.
18:21
@SuperUberDuper find the word boundary. Whitespace doesn't necessarily mean that's where the word ends, for example with "foo bar! baz" you'd get "bar!" as the word that starts at index 4, however, the word doesn't contain an exclamation mark.
I guess a more apt example would be "Hello, Fred! How are you?". The word starting at index 7 is "Fred", not "Fred!"
18:39
yeah great point
19:03
@paul23 Ok, good to know. I think I'll still try it but using a small abstraction layer to be able to replace it if things go wrong. ^
date-fns is the fastest from the major players though, it's really fast in manipulating dates.
19:52
How is that an illegal date value
20:39
I had to loop through the data returned from SharePoint in my success function and transformed all my date strings to that specific format before appending to the datatable
21:37
posted on January 27, 2021 by Bindu Suvarna

Hi, everyone! We've released Chrome Beta 89 (89.0.4389.16) for iOS: it'll become available on App Store in next few days. You can see a partial list of the changes in the Git log. If you find a new issue, please let us know by filing a bug. Bindu Suvarna Google Chrome

22:25
posted on January 27, 2021 by Prudhvikumar Bommana

The Dev channel has been updated to 89.0.4389.23 for Windows,Mac and Linux. A partial list of changes is available in the log. Interested in switching release channels? Find out how. If you find a new issue, please let us know by filing a bug. The community help forum is also a great place to reach out for help or learn about common issues. Google Chrome  Prudhvikumar Bommana

How come I can't use the item as a param for my onClick?
@Shamaran Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq. You have 25 seconds to edit and format your message properly before it will be removed. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it.
{navigationLinks.map((item, index) => {
          return (
            <li key={index} onClick={() => handleClick(item)}>
              {item}
            </li>
          );
        })}
Cannot read property of undefined

« first day (3756 days earlier)      last day (1414 days later) »