« first day (2753 days earlier)      last day (2195 days later) » 

10:00 PM
@DavidKamer No, it just means that the distribution is not even or normal.
 
It's more of a skewed bell curve
 
I thought we were saying a nice bell curve of people who use javascript, not the "do you know everything there is to know about every minute detail of js"
 
programming skill is not an IQ test where the average Joe is automatically at 50%
 
so percentile?
 
10:00 PM
We're letting this go correct?
 
because then you would have to say what percentile?
 
Shall I start binning messages?
 
@Loktar Yes, we are.
 
@DavidKamer I wonder what that would look like :)
 
because I would say 71
 
10:01 PM
I mean, where 90 percentile is positioned on an objective scale
 
probably
 
I would like an answer from the room to my question above those :)
 
It's 1am here, good night everyone.
 
night
 
good night
 
10:01 PM
@MadaraUchiha o, window, undefined
 
// We have components on the page, and we want to restrict them to paying users. The component remains visible on the page, but all interaction with it is blocked and, for the sake of simplicity, gives off an `alert()` with something like "Pay us!".

// The trick is that I want a general abstraction that's able to take in any component and wrap it with "Restricted"

// i.e. something like this if we're doing JSX:

<Restricted>
  <button onClick={() => console.log('Only paying users should see this')}>Click me!</button>
@Cereal Not this one
 
I don't remember the questions - How'd I do?
 
This one ^
 
@MadaraUchiha We actually do this at my work, we have a component that takes in permissions that the user needs in order to display its contents
 
The idea in this case is that Restricted doesn't know what's being passed to it beforehand
 
10:02 PM
You need to use props.children
 
@david Right, but in this case it is still displayed
Only the onClick shouldn't work
 
So you want to modify the passed in components?
 
does an event have to finish propagating before it actually does anything
 
Our version at work also has the access level and an optional replacement, but for the sake of simplicity, I've omitted those.
 
There is a set of react helpers for dealing with children, have you looked into those?
 
10:03 PM
@david That's an option, if you can manage it, but consider this
 
pointer-events: none on Restricted :D?
 
<Restricted>
  <div>
    <button onClick={() => console.log('Only paying users should see this')}>Click me!</button>
  </div>
</Restricted>
 
(brushing teeth)
 
Ah, you want it to work arbitrarily nested? That's more challenging
 
What are trying to do?
 
10:04 PM
@BenjaminGruenbaum That's possible, although not supported in older Safari IIRC
@DavidKamer Scroll up a tiny bit, the piece of code with commented instructions
 
Tunneling event handler?
 
@BenjaminGruenbaum You're not the target audience for this question
Go to sleep :P
 
Why wouldn't you just suppress the children based on permissions?
 
@MadaraUchiha gnight
 
@Loktar What do you mean?
 
10:05 PM
regardless of what you want to show nested
 
How do react events interact with stopPropagation? It's messy, but the Restricted component could attach a click handler in the capture phase and stop it propagating
 
@david Exactly the same as they would with DOM
 
{access && this.props.children}
or you want to show it all?
 
@Loktar I do
@david 10 points for Gryffindor!
 
He wants to still show it, but stop any child click handlers from firing
 
10:05 PM
could you pass in a prop to Restricted that holds a token?
 
like even non paying users should see the button, however only paying see the log
 
how do you plan to track who's paid?
 
@DavidKamer I can pass to Restricted anything I want
But the children are arbitrary
@DavidKamer Yes, it was left out for brevity, but for simplicity's sake imagine there's a global variable with a boolean value that says whether or not a user had paid
 
@MadaraUchiha yay points, but maybe check to make sure it works first :S
 
The question is about stopping the events.
@david React offers onClickCapture and the likes.
That's indeed how we've implemented it.
 
10:07 PM
eh that seems like a poor way to do it tbh. I wouldn't have an unclickable button
poor ux if it's not "disabled"
 
@Loktar grits teeth not our decision
 
Oh, you've already done it? I thought i was helping :(
 
haha alright I understand then @MadaraUchiha 😋
 
What stops a person from setting the bool manually? shouldn't you use a token in what ever statemanagment or local storage and pass it to that component, or better yet implement a router?
 
@DavidKamer Again, that is not important for the sake of the question
 
10:08 PM
I'm pretty sure they validate it on the backend too, this is purely for UI behaviour
 
@DavidKamer well, the BE should cover any real checks and balances
 
The question is about being able to stop events of children
 
I almost made a very unprofessional joke
 
Ok, last one, override onClick on React's component prototype at the top of the render of Restricted to noop and restore it in the finally block.
gnight :D
 
@BenjaminGruenbaum Doubt it would work
Doubly so when async rendering becomes an actual thing
@Loktar We do have an optional replacement={} prop in the actual implementation that allows us to do stuff, and also the actual element <Restricted> renders itself has classes that help us style things differently in CSS should we need it.
 
10:10 PM
That's good at least
I was just imagining a user clicking a button that does nothing is all
 
@Loktar Nah, they generally get a popup like "Oh, you want this feature? We're sorry, that's a premium feature!"
There's generally an indication for that before the user attempts to click too.,
 
that's good
 
What still kind of grinds my gears though is that you can't add events to React Fragments
 
they'd have to render as "something" though at that point right?
 
@Loktar Nope
React, behind the scenes, registers all events on document anyway, and handles propagation and stuff itself. It's all synthetic events
 
10:12 PM
@MadaraUchiha you could also wrap the handler
 
@Mosho I can't, I don't have access to the handler from Restricted
 
but how would the synthetic events tell the difference?
 
That's why portals propagate based on the JSX tree, and not the DOM tree
 
there would need to be a distinct dom element
 
^
 
10:13 PM
even with event delegation
 
@MadaraUchiha I mean not wrapping the component
 
@Luggage React knows all of the elements inside of the frament
 
Rather the handler
 
@Mosho That's the requirement though, a general Restricted component that works on any given child./
I want this knowledge encapsulated
 
It would be, in the wrapper
 
10:15 PM
And I know where you're coming from, after all, that's how the code used to look like... with restricted checks in the handlers scattered everywhere.
 
Not saying one way is better than the other, just another option
 
But react's behavior must be describable at the real DOM level, and I don't see how it could distinguish an event for a fragment, still.
 
@Mosho What about a group of interactive elements?
 
>.>
 
10:15 PM
@MadaraUchiha maybe a stupid quesiton, but what are the advantages of doing it with a wrapping component over using state directly since state is needed regardless?
 
@MadaraUchiha did it? I remember I did it like you are describing
 
@DavidKamer Now only the Restricted component holds the knowledge of when and how to restrict an element
The parent component and the component itself need not concern themselves with it.
 
@MadaraUchiha you would do it for each one in that case
 
@Mosho Or, I could wrap the parent with a restrictable, and it captures everything.
That's how the restrictions on the table's filters work here: tipranks.com/stocks/aapl/price-target
 
Then a user could still click it with a little DOM manipulation
I always do that on the fly
But a component works too, has other advantages
 
10:19 PM
I've never seen this pattern before, is it in the React docs somewhere?
 
I'll take silence as a "good job cereal. Well done"
 
@Mosho BTW, in the Angular version of this page, you simple replaced the entire filters container with a screenshot of it, and made that clickable
 
@MadaraUchiha that was the spec
Gershon made that capture
 
That wasn't in the spec!
 
10:21 PM
@Mosho You pulled the equivalent of a "let's take a screenshot of the desktop and make all the icons disappear" prank :D
 
Or wait, that was something else
 
reactjs.org/docs/forwarding-refs.html is this what you guys are talking about? I figure if I'm as much of a tard as previously stated I better stick around to learn from you gents
 
I'm talking about the exact same filter component, on the Angular version of that page.
@DavidKamer No, we're talking about event capturing
 
You are assuming I was the one who did it
 
@Mosho It was a general "you"
DOM events always bubble from the document down to the element that triggered the event, then back up all the way up to document
By default, when you register an event with addEventListener(), you get the event on the second phase, called bubbling
You can pass a third parameter to addEventListener() and register the event on the first phase, called capturing
stopPropagation() will works as expected in both phases (i.e. stop propagating upwards in bubbling phase, and stop propagating downwards in capturing phase)
 
10:24 PM
Are you guys sure that isn't an anti pattern? blog.cloudboost.io/…
 
>:((
I didn't know this was a method
You learn something new every day
 
In React, every event handler prop (onClick, onKeyDown) etc has a capturing equivalent onClickCapture, onKeyDownCapture etc
 
18
Q: Example for Bubbling and Capturing in React.js

SocratesI am looking for an example in handling Bubbling and Capturing in React.js. I found one with JavaScript, but I am having trouble finding the equivalent for React.js. How would I have to create an example for Bubbling and Capturing in React.js?

SO is so helpful
 
Listening to Madara
 
10:26 PM
I thought the whole point of React use state and props to limit confusion around scope and event handling.
 
@DavidKamer No, that's not the point of React.
The point of React is that you don't do DOM manipulation
 
@MadaraUchiha You use React?
 
React's promise is "Tell me, given props and state, how your DOM should look, and I'll make it so"
@Allenph I do.
 
React is meant to implement a functional pattern?
 
@DavidKamer In a sense
 
10:28 PM
I'm beginning to think madara wrote react
 
lol
 
@MadaraUchiha That surprises me. Aren't you one of the big "no framework proponents" in PHP? I was thinking of getting back into JS, but I couldn't find a similar opinion or similar patterns.
 
In an ideal world, React says that your view is a pure function of your model
 
once @MadaraUchiha writes a dropdown library or tooltip library maybe I'll think that 😉
 
@Allenph React is a view layer
 
10:29 PM
@MadaraUchiha So?
 
You can (but usually don't) implement your model around it.
It's not a framework, it's a library.
 
Seems like it does a lot of stuff for a library.
 
Our state is kept in classes and an object graph we wrote, sprinkled with mobx annotations to make React aware of changes.
 
@DavidKamer You're misunderstanding the anti-pattern I think. That article is about using the propagating event to send data between components
 
I use redux for what you're trying to do and pass down from a container. The lower component knows about it, but what's the point of it not knowing about it when the dom clearly reflects it?
 
10:30 PM
@Allenph It's actually very simple and you can implement a very naive version of it in under 300 LoC
 
@MadaraUchiha So you're not really doing anything like the patterns we're doing in PHP though right?
 
The tricky bit is doing it without butchering performance
 
I almost never see anything with React without also seeing Redux or something similar.
 
many of us have been using react since before redux even existed
 
10:32 PM
I like how mobx moved like 90% of my logic out of the jsx file
I don't like how my Stores object has a 40 line constructor instantiating stores
 
and into a tsx file, i hope. :)
 
Facebook introduced the FLUX pattern the same time as react to explain how data should flow
 
@Luggage Every day I wish I staaarted this project in typescript
 
@Cereal We have a poor man's DI implemented
 
@MadaraUchiha Indeed
 
10:32 PM
@cereal It didn't belong there in the first place :p
 
Learning as I go here
 
I just never see any kind of DIC or anything called a data mapper or repository in JS.
 
@Cereal what do you mean? What's so complex in your stores?
and what @Mosho said
 
When it seems like the concepts could apply just as well.
 
Nothing. It's literally just
this.configUIStore = new ConfigUIStore(this);
for every store
 
10:33 PM
before mobx there were a ton of other good implementations to use to make sure that crap was never in components :p
 
and I pass down the stores object with inject
 
We have a master store that does all the instantiation of every single injectable store in the system, and does the wiring
It instantiates the whole object graph at the initialization of the app, close to the entry point
 
Dude, I hated Redux, but it seems to work will and I've heard it's industry standard
 
@MadaraUchiha Is there anything between your view layer and your model layer?
 
it's an industry standard as much as Angular is, people are stuck using it.
 
10:34 PM
That store is then being spread into the main component
 
There is no such thing as an industry standard. :)
 
Some day I'll learn how to do it properly. I always get confused between domain stores and model stores
 
@Allenph It's quite a bit different from the way it's normally done and abstracted in PHP
Mainly because you have a persistent view and events
 
Each application in a unique snowflake.
 
It's not a "return a view, you're done"
 
10:35 PM
I liked 'reflux' when i read about it, but it never seemed to get any traction so i'm assuming there was something wrong with it
 
@Cereal Coming back to that one
 
@Luggage I didn't mean it like that. I meant it's industry standard to say it's industry standard
 
@david yea we used that for a couple of years here
 
Why are you passing this (which I'm guessing is the component) to your store?
 
@MadaraUchiha The model layer can stay largely the same though, can't it?
 
10:35 PM
dev just started to slow on it, so I decided to move to mobx
reflux imo was one of the nicer first flux implementations
 
Repository, mapper and services as infrastructure to an aggregate?
 
We do have services, but dependency injection in React is..... tough.
The main problem is that you don't have access to your components' constructors
 
@Loktar I'm put off mobx by the extensive use of decorators
 
@david man I love decorators haha
 
@david That's actually not what hurt us
The decorators are transparent in a test without reactions
 
10:37 PM
@MadaraUchiha That sounds really nasty.
 
It's not that they're bad, it's just weird that they went full ham on them
 
Fulham?
 
What hurt us bad is interacting with 3rd party libraries, especially react-table
As well as server-side rendering, and hydrating the stores with data from the server.
 
hah react-table was junk for what I needed :/
I had to write my own, that was fun.
 
react-table is shite
 
10:38 PM
One thing about react is there are usually a few fall back libraries to pick from
 
We're using so many 3rd party libraries... and they all hurt us. I feel like react is so good at building components we should probably just be building stuff like tables in house :S
 
someone usually has something that works for what you want to do
 
The one I ended up writing, they wanted stuck columns
 
@DavidKamer That really depends on what you want to do
And how convinced your product managers/clients are that you are able to perform miracles.
 
the headings needed to scroll too, idk so many specific reqs
 
10:39 PM
@MadaraUchiha that's true. I meant like flux and routers
 
@Loktar did you use react-virtualized at all?
 
@Loktar position absolute + padding/margin for the rest of the table?
 
@Luggage no, not familiar with that?
@MadaraUchiha 2 real tables actually
 
@Loktar Yeah, figured
With react-table at least, it's all divs
 
lol comment from my file
       // Simplified vs of grid markup structure.
       // 4 tables working together.
       //
       // -Loading Pane/ Grid Container--------------------------------
       // |  -Grid-Header-------------------------------------------- |
       // | |                          |                            | |
       // | | Locked Grid Header       | Scrolling Grid Header      | |
       // | |                          |                            | |
       // |  -------------------------------------------------------- |
 
10:41 PM
So you're not bound to a table structure and layout
 
well then it needed to do this later..
 
Do you guys ever hesitate using a library because of security concerns and do you read through every library you use?
 
@Loktar coinwatch.com shrink your browser to under 1000px or so
 
It's a HOC for virtualization lists and tables (adding removing items from the DOM for what is in view to handle long lists and infinite scroll). I have never used it in production code.
 
We implemented the same thing over react-table
 
10:42 PM
nice looking table, btw. the pinned column is always useful.
 
ah nice @MadaraUchiha
you mean mine @Luggage or @MadaraUchiha?
 
yea, yours
 
I didn't design it though can't take full credit, just made it
 
@Luggage The correct answer would have been "Yes"
 
lol
 
10:42 PM
Missed opportunity there 😃
 
your's reloads the data eh @MadaraUchiha?
 
@Loktar Data is live, and comes in two parts
List of all coins as well as most data arrives at first batch
Heavier data (like the price history) arrives on a per-coin basis
We make a batched request for all the coins that are visible on the table at any given time
It's worth noting that the performance of that page isn't too amazing... for now...
Next version we deploy should improve on that.
 
are you using fetch or something like axios?
 
@DavidKamer fetch
With a polyfill
 
that was my next question lol
 
10:45 PM
Let me tell you, getting react-table to tell us when the coins change on the table was a real treat.
 
Over a remote connection
so a bit choppy, but yeah just a few random bits of it
wish I could just show it live :/
heh makes it annoying during interviews but I have a login for those lol
 
When you change the sort or change the page, that's easy, the coins change
But react-table's sorting is live
So if I sort by price, and the price changes (because it's live data) the order of the rows changes
And sometimes new coins are added from the page below or above, because the order changed
And react-table doesn't expose when that happens
 
are you using your own api or are making requests on the backend and then forwarding them through your own api?
 
Yeah the more I looked into it I just opted not to use it, there was another decent one though
 
@DavidKamer We have a mix of both
 
10:47 PM
but even then, meh
 
Right
Now it's 2AM here!
I'll retire as well
 
oh jeeze
lol see ya man
 
@MadaraUchiha are you using http2 to update live data?
 
Cheers
@DavidKamer Websocket, in this particular case.
 
cheers
 
10:48 PM
We've looked into server push but Azure doesn't support it very well
 
ok, yeah that's one I'm looking into learning
 
user1596138
Can I get a song back that I had thunbed up in play Music but accidentally thunbed down? Multiple days ago :(
 
nope
 
user1596138
At least my typos are consistent.
 
:thunb_down:
Right, gn
 
user1596138
10:49 PM
Damn. It was some obscure Indy without real words too... There's no way I will find it.
 
websockets are fairly complicated from what I gather. How long do you think it would take to learn it?
 
they're not all that bad
 
user1596138
Websockets are simple af
 
@forresthopkinsa Welcome to the JavaScript chat! Please review the room rules. Please don't ask if you can ask or if anyone's around; just ask your question, and if anyone's free and interested they'll help.
 
10:50 PM
yeah websockets aren't bad, definitely check them out!
 
are they? even on nodejs?
 
You'll be pleasantly surprised I bet
I think nodejs makes them the easiest personally
 
I came here with a question about http2 like 4 hours ago, fell into a whole of "would you rather" regarding my javascript ability, and I've climbed out knowing websockets are the way to go lol
@Loktar Ever use it alongside express?
 
yeah, but nothing that I really needed express much for
this was a few years ago too
 
I just have an express app that I don't want to redo
 
10:52 PM
besides making a multiplayer game forever ago, I made a script that tracked users pointers and you could watch all the users on your site
generated heatmaps on the fly too
also saved the data for heatmap generation between times, etc.
fun random project
 
the thing about Websockets is that they're very low-level by themselves, you need to decide on some sort of messaging protocol for it
e.g. Stomp chat.stackoverflow.com
stomp.github.io
wow impressively wrong link lol
 
I probably won't use express again. That sounds like a fun project. You did with express and websockets?
 
if you're gonna do a websocket project for fun, I'd 11/10 recommend Socket.io
 
user1596138
There are libraries that make them more complicated (and powerful) but at the core it's a never ending TCP con that both ends can send frames over
 
Speaking of web sockets, is there any reason to not use a single web socket connection for a react app
 
10:54 PM
@DavidKamer yeah this was in like 2014-ish I want to say
 
Other than the fact you wouldn’t have an api
 
I run my own business and everrything I do isn't for fun but something that will keep food in my mouth
 
@Cereal compatibility is sketchy
Socket.io is good for production stuff too, I just think it's fun hahaha
 
@Loktar do you think express is dieing/dead?
 
What about just normal sockets
 
10:55 PM
no clue, I haven't kept up honestly
 
you mean, just TCP sockets?
 
No library wrapper I mean
 
@forresthopkinsa fair enough lol. Doesn't hurt to have fun, no matter what people say about scope and how important it is lol
 
haha for sure
 
@forresthopkinsa yeah, just message updates
 
10:56 PM
@Cereal I don't understand, are you talking about raw, lowest-level Websockets, or are you talking about TCP sockets?
 
I can't find words for how much it pisses me on that even the smallest of small css-animation/transition uses at least 10%, more likely up to 15% cpu/gpu time
really talking about TINY animations, dots and pixels
 
@DavidKamer socket.io has some fun Google Docs-ish quickstart examples
 
right now I'm just spamming get requests, and it will probably work ok for what I'm doing, but eventually I'll need to update.
 
fun yeah but also immensely valuable
 
@jAndy how about "preposterous"?
 
10:57 PM
Thanks mate.. helping a non-native english speaker out
it is PREPOSTEROUS!!!
 
yeah @DavidKamer I used to just spam requests
 
@jAndy are you using a framework/library?
 
but my work got moved to wearables and requests aren't cheap on those
 
of course not
 
Nice. that word is supposed to be in all caps to convey meaning. You picked up on that.
 
10:58 PM
@jAndy The Game
3
 
@forresthopkinsa Honestly, it might even be less overhead until I get 1000 users
 
0.05% my ass
 
what?
 
I don't know man, websockets are not chatty at all unless you make them so
 
10:58 PM
is there a 0.05% chance of caprica saying the game every time you speak?
 
don't tell me you didn't know about that already
 
@Neoares something like that
 
@jAndy no
 
but in fact its more like 50%
 
@forresthopkinsa ok, what about security? is it a safe?
 
10:59 PM
I think you should do more stats
 
yeah you can have secured websocket
" wss:// "
 

« first day (2753 days earlier)      last day (2195 days later) »