« first day (4274 days earlier)      last day (657 days later) » 

6:13 AM
0
Q: React Pin Input with React Simple Keyboard not working

Sus HillI was trying if there is any way to give a built in Numeric keyboard for Ipad view. React Pin Input doesn't seams to take the input field values. I tried to add a different class for input field so that i can add the values manually. But even adding values manually doesn't seems to work. Length i...

 
 
2 hours later…
8:20 AM
Seems to me that the first rule of react hooks (Only Call Hooks at the Top Level) is impossible to meet... no hook within a loop?
Or what do they mean with top level? is that top level of a react app, or is it top level of a component?
 
just discovered there's a new sorting type: "trending sort", of which is based on recent votes.
intriguing... it might be an useful one if used right. It helps to find a more up to date answer on an old question with lots of answers
 
@KarelG Yep, it's very new. They launched it last week, I think.
Not a huge fan of it but mostly because I don't like any of the "smart sorting" that websites have done. Like Reddit's "hottest" or whatever they call it.
Still, it's probably overall better to have it here. It would help out a bit with newer answers that are better than something posted in 2010 and has a score of 5000
5.2k score. However, the next highest only has 1.3k yet it's better - it tackles all semantics, not just ^ and ~
But has no actual chance of beating that score, ever
 
trending sort does category the 1500 one as 2nd :D
 
@Markus it's mandatory, react hooks need to be called in the same order and from withing a react function (Functional Component) hence it's always a bad decisision to mix it with control flow like loops, conditions, or nested functions.
 
So they mean on a component level right, well then it's not as bad.
 
8:36 AM
@VLAZ that may be true, the OP is really asking for difference between ~ and ^ in semvers. That answer is somewhat out of scope. Complete, but ... difficult :)
 
I mean it must be rather usual to have a list of objects, and where these objects needs state
 
Assume that I have two types of votes: a +1 vote that I can do on multiple answers and a super vote (+3) on a single answer, then I would only class a vote on both answers.
however, I won't cast a super vote. Both answers aren't so good. It helps a bit, but does not show a true understanding of these semvers.
A good answer is one with explanation/examples.
the 5k vote one somewhat provides it
 
@Markus ye, it's a bit annoying here and there but in general manageable
 
@KarelG True, it's out of scope. But it's still better. There aren't that many modifiers to a version number, so maybe you land on the page because you've only seen ~ and ^ but perhaps you leave knowing that you need neither but another modifier entirely.
 
that is true
Just went through new questions. Been a while ago. Things never changes :D
 
8:42 AM
@KarelG Yep, they are still terrible
 
So lets say I have a list foo that I want to filter, but I want to filter by using a hook: const list = foo.filter(item => useSelector(item.reduxPath)) how is that to be done?
 
@Markus That doesn't seem right. I've not done React but shouldn't you have a hook that then defines the filter? Not run a filter that calls a hook?
 
@Markus what is in foo ? elements?
 
just data
 
and you're using hooks to filter your data?!?
 
8:46 AM
I get that I according to the rule shouldn't do that, but how would I do it otherwise?
 
wait ... plain data or Reacts data... there's some nuance at both IIRC
 
plain data
(straight from a json)
won't be changed during runtime
should it in some way be done in a useEffect or something?
 
I believe @makadev can be more helpful here, don't have much familiarity with React
if ('close' in HTMLElement.dataset) {
  ...
}
just saw an answer with this. It works but ... dangerous (prone to bugs)
 
@KarelG was this for me?
 
no, just speaking to the world :)
 
9:00 AM
@KarelG Ewww. Why would anybody be checking HTMLElement. Unless they meant that as a placeholder for the element you're looking at.
 
9:13 AM
he was looking for a specific data-attribute (data-close) in a element to do something.
It just came in mind that MDN suggests to use it. It was one of the things that I kept in mind because MDN is ofc not perfect
!! mdn HtmlElement.dataset
 
Invalid command! Did you mean: mdn, d, dum? Try help for a list of available commands..‍.‍.‍.‍.‍
 
> The in operator can check if a given attribute exists: 'keyname' in element.dataset.
 
@KarelG I get that. And it's sort of OK, if HTMLElement is an actual element. Not the global thing. It's probably the easiest way to check it for a data-attribute.
Although, in practice I've never needed to check if specific data attribute exists. Since I usually end up selecting all the matching ones anyway document.querySelectorAll("[data-close]") and then I know that the attribute is present, so I can use it directly.
Or el.matches("[data-close]") can also be used, e.g., in a delegated event handler.
 
> in a delegated event handler.
that's the context yeah
I would've used the .matches instead.
 
9:40 AM
@Markus typically you would filter by either state/global state or some kinds of props, data that will either be an input or dependency for another hook or used in JSX
// f.e. from props, useState ...
const unfilteredList = foo;
// f.e. from props, state, non local state hook like useSelector / useContext
const myFilter = useMyFilter(...);
// filter f.e. with memoization so it will only be recalculatet on filter/list changes
const filteredList = useMemo(() => unfilteredList.filter(item => item.path === myFilter), [myFilter, unfilteredList]);
something like that
 
could you go a little deeper in const myFilter please?
 
depends on what you do
useSelector looks like react-redux, do you get a filterstring from an App state or something?
so for example getting a filterstring from redux using useSelector would be something like const myFilter = useSelector((state) => state.where.that.thing.is.stored.filterstring);
 
9:56 AM
yes that's it, only that it's one filter per entry in the loop
the filterstring depends on the object
 
@Markus hmm do you have an example?
In any case you need to get everything together, so get all the data you need for filtering and then filter the list.
const unfilteredList = foo;
const filterData = useSelector((state) => state.config.filterData)
const myFilter = useCallback((item) => /* more complex per item filter logic */, [filterData]);
const filteredList = useMemo(() => unfilteredList.filter(item => myFilter(item)), [myFilter, unfilteredList]);
 
 
1 hour later…
11:39 AM
well... my system gets external data delivered to the redux store, at the same time I have users configuring the system based on these data, now I have no idea what external data the user want to use, that's a thing he configures with a special string (which is a path to the external data). So lets say I get an external data `{ valuesA: { bankA: { visible: false, val: 2 }, bankB: {....` so the user can configure what to set visibility on (`"values.bankA.visible"`).
There can be many banks, and many other `values<X>` so I would have to look at the full data structure, which would mean a rere
 
 
2 hours later…
1:20 PM
Can anyone point me to a good online resource for learning beginner to intermediate level UNIT Testing with Angular/Typescript?
 
 
2 hours later…
3:04 PM
These extensions for VSCode help: Test Explorer UI, Angular/Karma Test Explorer, Jasmine Test Explorer
 
 
2 hours later…
5:17 PM
hey y'all! I'm having an interesting conversation with a colleague about event listeners, and wonder if any of you have insight about that: basically, there is a possibility that having a click event on the whole document (then process whether or not we clicked on the desired element in the listener) would be more memory-efficient than having several listeners directly on the elements that concern us
it does kinda make sense that the memory imprint would be bigger if there are more listeners (maybe!?) but does it matter? can it have a noticeable impact?
can JS know we're registering the same listener on many elements and not duplicate it?
on a cpu impact way however, having the listener fire on every single click ever sounds like a net downside
 
it depends on how it is done
for example
lets say, you're binding, as a rule, all of your event handlers on document and reusing where you can
if you do this the jQuery way, where jQuery binds a single event handler on document, and then within that handler goes down the list of elements and determines which handler to fire, that gets inefficient pretty quickly
it can even add a noticable delay to action -> result
but, if you took a more sensable approach and bound the elements within the dom at points that make sense, such as on a table for events within the table, that problem never becomes a problem
(and it cleans itself up when the table is removed)
 
right, that makes sense. in that table element, if we were to register several listeners on table headers (for sorting I guess) and specific table cells (for one-click edit or something) or even icons (for various actions), would that create a memory impact? I've been doing that, registering several listeners directly on every elements, and never noticed action -> result delays, but also I haven't profiled to see if I was using up more memory than I should
 
I don't think there's actually a case to be made, outside of scenarios that shouldn't exist anyway such as a 100k different elements that each have an event handler, where having individual event handlers instead would have a noticable impact
 
alright, that sounds sensible. thanks :)
 
in my experience, the slowdown is in the management of the events moreso than the events existing
for example, creating/binding 100 event handlers is obviously going to have a bigger impact than binding one
in terms of how long it'll take for that dom fragment to be built
 
5:28 PM
but like is that noticeable? I've registered literal hundreds of listeners on tree-like structures and stuff in the past, and I don't recall it having a negative impact on experience
maybe it did and I just don't remember / didn't want to care
 
depends on the client, 😋 on this 1core cpu (2 virtual) i can notice the difference, but thi sis most certainly not the normal computing power now days
 
i think my phone has more processing power
 
well, that is Quite Interesting. I'll need to review my "let's register listeners everywhere" position but also maybe we could actually look at what devices we aim to support before going into severely limitating the number of listeners for the sake of it :)
 
5:35 PM
In practice, I'd expect binding separate listeners to not be THAT much of an issue. Unless it's thousands. However, a delegated listener still has many other advantages in terms of maintenance. If you ever decide to add more elements (e.g., you move on to have dynamically loaded "infinite" page) you don't have to also add the event listenters to each element. A delegated listener gives you that functionality essentially for free.
In general, changing the structure of the page is less likely to require a change to the delegated listener, too.
If you're smart at writing them, then you might never need to change the listener and you're free to restructure the DOM as you see fit.
 
less set up, less clean up
 
that implies that upon firing, the listener still needs to examine the event target, and potentially its ancestors, to understand exactly what we're trying to do?
 
kinda, but that can be as simple as if x === y
depending on scenario
 
also, I find that sometimes, when listeners need some specific information to act, passing them as a parameter to the listener is easier than adding data-* attributes on dom elements
 
and modern dom methods make it easier
 
5:37 PM
Let's say you have some fancy button that you want to do stuff. You can give it a data-my-config="hello" attribute and in the delegated listener match [data-my-config]. This has multiple benefits: 1. It directly allows you to know that this is the fancy button 2. you can change it from a button to a link or even to a clickable span or whatever as long as you keep the attribute 3. since the attribute is the config, you just pull that and you can fire the fancy action. E.g., show "hello"
 
You could also simply rely on index
if it's row 5, pull row 5 from your collection.
 
Oh and 4. You don't need to examine the ancestry, either. It's just the element itself. Which frees you to change the DOM structure
 
there is some ancestry needed, if you have elements within your clickable element
but, there's an easy tool for that now
!!mdn closest
 
5:40 PM
i say now, like it's relatively new,
but it's new from my 10 years ago mindset
lol
 
@KevinB Well, yes some. Depends. I was describing a button. But at any rate, you don't need to address specifically "a button element inside an element with certain class" which is brittle and doesn't allow you to change the class or the type of element without also changing the selector.
 
even buttons have icons, but .closest('button') would ensure you're on the button and not the icon
could even use the selector you're targeting there rather than just button, doing the filtering in 1 step
 
Also possible el.matches("button")
 
so .closest('button.edit-row') etc
if it's null, go next
 
5:44 PM
i more think of things in terms of react now days
hence the... get the row index and find the data that way
no need to make it actually part of the element if the dom is rigid
 
posted on June 29, 2022 by Release Managers

 Hello Folks, The Beta channel is being updated to 104.0.5112.23 (Platform version: 14909.26.0) for most ChromeOS devices. If you find new issues, please let us know one of the following ways File a bugVisit our Chrome OS communitiesGeneral: Chromebook Help CommunityBeta Specific: ChromeOS Beta Help CommunityReport an issue or send feedback on ChromeInterested in switching channe

 
6:14 PM
posted on June 29, 2022 by Srinivas Sista

The Beta channel has been updated to 104.0.5112.29 for Windows,Mac and Linux. A full list of changes in this build is available in the log. Interested in switching release channels? Find out how here. If you find a new issues, 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. Srinivas Sista Google Chrome

 
 
2 hours later…
8:32 PM
Hello
How to convert date '1985-03-03T23:00:00.000Z' to format '1985-03-03'
without time
 
!!magic
 
(∩ ͡° ͜ʖ ͡°)⊃━☆゚. * ・ 。 ᵀᴴᴱ ᴳᴬᴹᴱ
 
or, in your case, just split on T
or use other string method to grab the first n chars, since you know exactly how many characters you want
 
Thank you
:)
 
what about time zones tho?
UTC 23:00:00, converted to a local time zone, can change what day is selected
not important?
 
8:37 PM
It's not important
Thanks
Or yes
I selected 03/04/1985
but returned 03/03/1985
hmm
 
;)
then you'll need to convert it to a localised version before you grab the value
!!mdn date
 
Ok, thanks
 
9:02 PM
posted on June 29, 2022 by Krishna Govind

Hi, everyone! We've just released Chrome 103 (103.0.5060.70) for Android: it'll become available on Google Play over the next few days. This release includes stability and performance improvements. You can see a full list of the changes in the Git log. If you find a new issue, please let us know by filing a bug. Krishna Govind Google Chrome

 
9:32 PM
 
10:02 PM
posted on June 29, 2022 by Matt

The Dev channel is being updated to 105.0.5140.0 (Platform version: 14943.0.0) for most ChromeOS devices. If you find new issues, please let us know one of the following ways File a bugVisit our ChromeOS communitiesGeneral: Chromebook Help CommunityBeta Specific: ChromeOS Beta Help CommunityReport an issue or send feedback on ChromeInterested in switching channels? Find out

 
10:44 PM
posted on June 29, 2022 by Ben Mason

Hi everyone! We've just released Chrome Beta 104 (104.0.5112.29) for Android. It's now available on Google Play. You can see a partial list of the changes in the Git log. For details on new features, check out the Chromium blog, and for details on web platform updates, check here. If you find a new issue, please let us know by filing a bug. Erhu Akpobaro Google Chrome

 

« first day (4274 days earlier)      last day (657 days later) »