« first day (2231 days earlier)      last day (2733 days later) » 

9:05 PM
it's easier if you write everything as React components and have a single root
 
is it tho?
because some of these layouts are pretty large
just seems like I'm relying on React at that point to do shit I don't need it to do
but having to do the multiple calls seems kinda weird. why can't I just say "start looking at this element, convert everything you see"
 
Morning
 
@KendallFrey sexy i.imgur.com/uugl9nv.gifv
 
Happy Thanksgiving to all my American friends!
 
😢
 
9:08 PM
And Happy belated Thanksgiving to all my Canadian friends!
 
@rlemon Errr, and happy Lemon [something something] for all my Lemon [something something]
 
would anyone know how to combine x and y into one chart ?
$.ajax({
			'url' : 'csvfile.csv',
			'method' : 'get',
			'success' : function(response){
				var response = Papa.parse(response,{
					header: true
				});

				for(var i in response.data){
					chartData.x.push([step * i, response.data[i]['rot_x']]);
					chartData.y.push([step * i, response.data[i]['rot_y']]);
					chartData.z.push([step * i, response.data[i]['rot_z']]);
				}


				var plotX = $.plot($("#x-chart"),[ {
					data: chartData.x,
					label: 'ROT-X'
				}],plotConfig);

				var plotY = $.plot($("#y-chart"),[ {
can't seem to get it to work
 
@rlemon unless the different parts of the document are truly independent, you'll eventually have to share something via the context API among the roots to have them coordinate and there'll probably be cases where it would have been easier to rely on lifecycle methods
 
9:20 PM
many parts of the UI are independent
 
but rendering still blocks the main thread, it's not like you'll get a lot of advantage if you separate things
 
except the entire layout isn't in a React Component
I'm Brand new to react
and that concept, that everything should be in the component, even if it doesn't need to be, is a huge red flag
 
there's not much overhead to it (root component.render() returning the entire DOM tree) and it's there to reason about the lifecycle; componentDidMount becomes newspeak for $(() =>{})
 
$(() =>{}) was stupid to begin with
 
are you doing something for fun? trying doing everything with React components (even the parts that have no visual presentation in the document)
 
9:30 PM
@monners for some reason i read it as cardassian
 
lol
 
9:46 PM
how can I refactor this to arrow notation:
`let thing = myArray.map(function() { return { x: 0, y: 0 } });`
I try this but to no avail:
`let thing = myArray.map(() => { x:0, y:0 });`
it tells me that the `:` is an unexpected token
 
() => ({x, y}) if you want to return an object
 
and what if I want to assign default values like x:0 etc.
 
it'll parse it as a block otherwise
 
how come my backticks aren't rendering as code
 
multi line
 
9:51 PM
triple backtick then?
 
markdown doesn't apply to multiline messages
 
hard multiline
 
oh :( lame
 
natural linebreaks are fine
 
you mean
like this?
 
9:52 PM
if you overflow to the next line, it's fine. if you enter a new line yourself it breaks it
 
I see
 
can you use const myArray = ['a', 'b']; myArray.push('c') or are const arrays not mutable? I am still trying to understand when to use const vs let
 
the reference never changes
you can alter the array tho
 
so it's a memory address/pointer thing is what you're telling me??
 
9:54 PM
const myarr = [];
myarr = []; // throws
myarr.push/pop/shit/unshift/etc are fine
the array is still the original array
the reference never changes
 
so assignment via equals operator is illegal then? But otherwise mutable?
 
yes
 
@NicAguirre const implies an immutable variable, not an immutable object
 
@KendallFrey not sure I totally understand the difference as seemingly everything is an object :\
 
bioluminescent plankton are cool
@NicAguirre is "a" an object?
 
9:55 PM
Anyone knows if you can do a load average check cross servers ?
in unix
 
"a" is a string literal
 
which is not an object
 
so... I don't know?
 
@NicAguirre An immutable variable means you can't assign a new value. An immutable object means you can't change the object after it's created.
 
thanks kendall
 
9:56 PM
They're two completely different things that literally everyone gets mixed up.
 
<- suffering from serious impostor syndrome and probably has no business teaching web design
 
=> <- arrow notation
 
fat arrow, or lambda expression
 
@KarmaDoe any limitations on the tool of choice?
ansible all -a uptime would be my fav
 
10:06 PM
@rlemon Yeah, stupid that it was passed under everybodies noses.
 
  |
  v
=> <- fart notation
  ^
  |
 
@FilipDupanović Lemme check
Python, i know nothing about it
 
you don't need to know Python, but Ansible will help you specify all your remotes and how to access them and then to run a command on all the servers and give you all the outputs before exiting
you'll get something like:

foohost >>
$(uptime)

barhost >>
$(uptime)
 
The thing is, i tried
ssh user@host | cat proc/loadavg | awk '{print $1}'
but somehow it manages to crash the terminal prompt
Ill go check Ansible tho, thanks for the tips.
 
oh, try ssh user@host "cat /proc/loadavg | awk '{print $1}'"
 
10:20 PM
lemme check on that
pipe doesn't work
prints whole line
ssh user@host "cat /proc/loadavg" | awk '{print $1}'
Works as it should tho
Thanks.
 
np, but if you have multiple hosts I'd recommend Ansible
 
There's like 40+ hosts
But im not the unix resource manager
 
then Ansible, definitely, because it can parallelize the requests
 
Can it be injected into node as child_process?
 
Why does Heroku use git?
Is it just because it needs a place to pull files from?
 
10:26 PM
yeah, you can spawn it and wait until it exits with the output fro all the servers
 
@rlemon there is absolutely no "rule" that says you need one root element
and for it to be all of the page
React doesn't come with that opinion, I don't see why you can't have a more widgety design
moreover, it doesn't say anywhere those widgets can't share the same state
 
Ill ask for it then
 
that said, I don't see what you would lose by having react do plain, static markup
and I would prefer to make explicit calls to each element I want react to take over
 
so , everyones
what do we use for unit testing?
 
github.com/avajs/ava is the new hot stuff
 
10:39 PM
@Mosho so would I. The idea of cramming unrelated shit into react doesn't sit well.
BUT, I'm so green with react I doubt everything
 
@rlemon only the representation for the outer component is managed
 
I mean what you said about parsing HTML and taking over as it sees something that should be taken over
maybe I got that wrong
 
Well I'm more so commenting on how I see my two options. Everything is a component, or I make a bit load of ReactDOM.render calls
Buttload*
 
I would personally go with everything is a component
code > markup
 
But like 90% of the markup is layout bs.
 
10:41 PM
so what
 
Just seems silly.
 
if it's code it can be organized much more efficiently
why does it seem silly?
 
@rlemon why?
 
Because say the only interaction is like ten elements on the page, why would I run the rest of the code through react when I can make ten render calls.
Seriously. Why ?
 
why not
react code can be a lot more organized and maintainable than markup
 
10:42 PM
That isnt a valid answer to why
 
SSR and maintainability are good reasons for me
 
How is it more maintainable? They are components vs view files.
I'm not arguing. I want info.
 
because you start from the root component and follow the cookie path
 
one reason, for me, would be css modules
 
here, I have to conflate your React element and DOM element representations and all the poor choices you made doing it
 
10:44 PM
there are many reasons
but ever since I started using them, I decided I will never go back to regular css
you never know when you need more than just "layout bs"
you can customize formatting, localization, etc.
and have everything be modular, testable etc.
 
And I don't see how not having everything on one root component will hinder that.
It's describing html which I'm not touching.
 
you static markup doesn't have any of it
 
In an ejs file vs .js file.. I don't see a difference
 
it's text vs code
 
I'm totally on board for components. Don't mistake me. I just don't know how I feel about making my CMS one giant component.
 
10:49 PM
homogeneity
you have rendering tech you already use
why use ejs
which is also inferior regardless
 
None of these reasons are very compelling imo.
 
you remember those moments when you tried a new framework and then forced your old habits onto it... you're doing it now :P
 
Not saying your way is wrong. I just don't buy it with these reasons for me.
 
what do you gain by using ejs?
 
@FilipDupanović is there a "everything must be from a root component" rule I didn't read?
Because I'd love to see it.
 
10:51 PM
there's really nothing wrong with it
but if I was starting something from scratch
 
@Mosho static Templating on the server. The client side interactions and bindings is what I want components for.
 
react can do static templating on the server
better than ejs
 
there is no rule against mixing apples and oranges if that's your thing
 
And I may one day get to that. Right now I'm not.
@FilipDupanović my point was how is using html with react wrong?
 
I've successfully used react to render complete landing pages that have no react running in the client at all
just for fun
and it was fun
 
10:52 PM
@rlemon because DOM elements and React elements have different lifecyles
 
@FilipDupanović what does that mean
 
and DOM elements which I don't have to mutate or change don't care
 
and if you go down that path you're going to go out of bounds syncing them up, for no good reason except for not having a better reason
 
I don't see why you would need to sync them up
or what it even means
 
and the next person is going to end up conflating the components and EJS templates and all the bad choices you made
 
10:53 PM
that is probably true
 
<header><h1>static title, never changes</h1></header>  <!-- this never changes. ever. not even read from. there is no point imo to run this through ReactDOM -->
if someone has compelling reasons to do so, pleaase share
 
@Mosho say you add Google Maps API via a <script /> tag and then you use a React element to interact with it
 
@FilipDupanović I wouldn't call them bad choices until I get reasons to believe they are bad
right now I hear a bunch of very nice personal opinions. which I'm not bashing
just not "reasons to do X always instead of Y"
 
I guess there is no compelling reason
just lots of very good ones
 
well, at least for SSR you'll have to render every root element and inject it back into the template... meh
 
10:56 PM
lets take a shitty example: I have ONE react component. only one. it does those votes that I spoke about. if I have a handful of those on a page and nothing else that requires react... why would I jam the other 99% of my markup through ReactDOM ??
 
@FilipDupanović don't see an issue with that
 
it's not some huge SPA
 
there it helps just to render once and you can keep expanding without having to go back to the server code when the layout shuffles
 
@rlemon why even use react
 
@Mosho "shitty example"
 
10:57 PM
@FilipDupanović that's a good reason
unless you never plan to do SSR
 
I'm trying to understand React right now. I just started with it today. building components seems well and fine. building your entire CMS with nothing but components seems overkill for a lot of things
 
in stuff that doesn't need SEO for example
 
unless there are things I'm not understanding about what ReactDOM does
 
I think the problem is that you think it's overkill
like it's some kind of complicated technology that should only be used for complicated things
 
no, I just don't think I need to take my car to get from the fridge to the sofa
and I'm not seeing why I should.
 
10:58 PM
it's not a car
 
you are terrible at reading analogies
 
indeed
but that is a bad one
react is a set of bionic legs
it will help you get to the sofa better
 
A toast sandwich is a sandwich made by putting a thin slice of toast between two thin slices of bread with a layer of butter, and adding salt and pepper to taste. Its origins can be traced to the Victorian years. A recipe for making it is included in the 1861 Book of Household Management by Isabella Beeton. == Nutritional information == According to the Royal Society of Chemistry, the average toast sandwich contains 330 Calories. == Public recognition == In November 2011 the toast sandwich was recreated by the Royal Society of Chemistry in a tasting almost 150 years after the release of Beeton...
 
@BenjaminGruenbaum I've definitely done this before, it's great with lots of butter
 
anything is great with lots of butter
 
11:00 PM
I've made ramen sandwiches before
uncooked ofc.
crunchy and soft. best combo
 
uncooked, ehhhhhhhh
 
I've eaten 3 stacked slices of bread
@rlemon I take it my analogy with the bionic legs made you see the light
 
secret to great food: add lots of butter; when you think it's too much and a bit more et voila, bon appetite o/
 
nope
 
*et viola
 
11:02 PM
if butter doesn't work, use sugar; add lots of sugar and then some more :P
 
I'm going to make two small projects. do them both the two ways I described as my only options, and decide which is better
because none of this has been enlightening 😃 no offence.
 
Every November I'm briefly glad I'm half American, so I get two Thanksgiving dinners per year.
@FilipDupanović toast + cinnamon + sugar
 
so does anyone know how i might combine x and y into one chart ? currently they are seperate
for(var i in response.data){
					chartData.x.push([step * i, response.data[i]['rot_x']]);
					chartData.y.push([step * i, response.data[i]['rot_y']]);
					chartData.z.push([step * i, response.data[i]['rot_z']]);
				}


				var plotX = $.plot($("#x-chart"),[ {
					data: chartData.x,
					label: 'ROT-X'
				}],plotConfig);

				var plotY = $.plot($("#y-chart"),[ {
					data: chartData.y,
					label: 'ROT-Y'
				}],plotConfig);
 
@KendallFrey (y) and a jug of milk
 
i believe it might be to add chartdata.x (which is chart 1) to contain rot_x and rot_y but that didnt seem to work
something like this chartData.x.push([step * i, response.data[i]['rot_x, rot_y']]);
rot_x and rot_y are csv column titles
noone has been able to work this one out either
not on here , just in general
and this just seems to output one and not both
chartData.x.push([step * i, response.data[i]['rot_x','rot_y']]);
hah
 
11:16 PM
you want to combine two linegraph datasets to make one graph with two lines?
 
@rlemon yes
> "still down for React help?"
 
user2620028
@rlemon in your answer to why use react.... if you are wanting to make a simple website then obviously you wouldn't want to use it
 
@rlemon
@rlemon hi
 
@rlemon Hi!
 
@Luggage ohh that I fixed. but then there was a conversation above you might wanna chime in on about whether or not everything should be from one root component or if you have little interaction you just call ReactDOM.render on all individuals.
 
11:19 PM
I disagree. You certainly don't NEED react for a simple website (or any website), but that doesn't mean it's not well suited.
 
user2620028
but if you are wanting to make a spa or something a bit more complicated and have fancy state based css changes and whatnot then its really nice for that
 
@rlemon yes thats right , i want rot_x and rot_y to be displayed in one chart that in this instance is called x-chart
 
@HatterisMad I was never arguing that
I think you missed the point of my questioning
 
user2620028
i didn't read all of the conversation, just the last bit i guess
 
@rlemon this code is just below also
 
11:20 PM
I don't need your code
 
oh
so whats your thinking ?
 
flotcharts.org/flot/examples/axes-multiple you want something like this?
 
yes
 
so read the docs.
 
Using react for loose components OR wrapping them all in a super-component are both valid. It's a matter of taste, really.
 
11:21 PM
almost every example shows how to do that
 
not in the way im doing it
 
then change how you're doing it
 
The advantage of a single root component is that you can use react to know when to re-render the child components instead of mixing react and non-react lifecycles
 
rot_x and rot_y are columns in a csv file that ajax is using to being the data in
 
so loop the data and build your dataset
 
11:22 PM
your example looks similar but isnt
no
has to stay in the same colum
 
then you're shit outta luck
 
and even if you dont mean that then that is why i am asking
 
> My code isn't exactly like the example so I can't do it
 
stack overflow.... where ya just shit outta luck
make stack overflow great again
i want the baseball cap
:)
 
you asked a question. I gave an answer, you said that's not how you want to do it. that's how the library wants you to do it. I don't know what you want us to do.
 
user2620028
11:23 PM
he wants you to do his job
 
user2620028
and he is going to have you pay him for it
 
@Luggage maybe I'm too ignorant of lifecycles of elements. why would my title <h1> ever need to be in that if it never changes?
 
@rlemon I have my static marking in react, too, because, I find it more hassle to include some html file
 
(as an example)
@Luggage so it basically boils down to how the team wants to deal with the markup vs react components?
 
11:24 PM
it doesn't need to be, but if your <h1> is inside a react component, why deal with importing external html as a string? JSX already looks like a string.
 
how would i write it correctly to include both , in this instance i did not get it to work
chartData.x.push([step * i, response.data[i]['rot_x','rot_y']]);
 
Also, by sticking with react/jsx you can use the same react properties (e.g. className) and never need to remember which one to use.
 
user2620028
does react re render a component that did not change since its last render?
 
Did you fix your infinite loop issue from earler?
 
true. and again, I hope no one gets me wrong, I'm not arguing against it. I'm just trying to understand the point of it
outside of the obvious
@Luggage yea I got that
 
11:26 PM
You are right that using static markup in react is overkill, but if you are using react anyay.. welp.. why not?
 
"why not" seems to be the leading answer
 
user2620028
only answer
 
I guess I was just hoping for something more
anyway, here is where I stopped jsfiddle.net/rlemon/2p3opggz
 
@HatterisMad if something triggers an update, maybe, but you can control that.
 
user2620028
other than maybe... cause its harder not to when you are using react haha
 
11:27 PM
one sec, i'll get a relevant link
<SomeReactComponent>
    <div dangerouslySetInnerHTML={loadExternalhtmlFile()} /> //will still re-render, potentiall, so you STILL need to optimize that out
</SomeReactComponent>
 
it just feels like "Just use Jquery" all over again. from what I see React is nice and all, but I am always weary of a 'one size fits all' solution
 
@Luggage just implement a shouldComponentUpdate
 
1. Inherit form React.PureComponent and it'll only ever re-render if the props change (which they won't for static html
2. shouldComponentUpdate(nextProps, nextState) { return true/false to control re-rendering }
@BenjaminGruenbaum I was getting there.
 
@rlemon it's just a really nice component model. It's a way to define reusable components and control when they rerender. I recommend using it with MobX for more simplicity.
 
:)
 
11:30 PM
that was a bad comparison. moreso using jQuery to do things you don't need jQuery for. like $(this).prop('id')
@BenjaminGruenbaum did you get the earlier discussion? it's not about React vs not React. it's about ALL React vs rendering components in your static layout without one giant root component
 
Yea, using react for static html is 'overkill'. But, in that case, you ca think of it more like EJS or Mustache. It's jsut a templating language.
I would make one root component for yor children, but not need to re-write the html outside of that.
 
user2620028
im not entirely understanding the phrasing you are asking your question with but i guess ill just let it go
 
but client side. which I'm not against. but they are not the same (Mosho mentioned server side...)
@Luggage that's my thinking. take the robogist store for example. the titles, etc would all be in the ejs file and the 'widgets' like gist cards would be components
but all examples I see online of React are super simple spas and everything is on one root component
 
Yes. and maybe the direct parent container for the gist cards, but no more.
 
so I'm questioning what to do
 
11:33 PM
your root can be anywhere, or have multiple.
You should see the crazyness I do.
 
okay, that's what I thought I wanted to do
 
user2620028
Personally i have only ever used react for one of my personal projects and each page had like 30+ components
 
but then people said I should do the entire thing with one root
 
No. I would push you toward making the parent of the cards a react component, but that's all.
 
cool. but in the long run that isn't a wrong approach is it?
 
11:34 PM
No.
 
okay. that was really all I was asking earlier.
 
You can use react for a little or as much as you like.
 
@rlemon do you need to update on the client? One of the strengths of a component system is that it'll seamlessly handle events and updates.
 
^ if anyone disagrees with @Luggage please chime in. I'm trying to absorb as much as possible.
 
It's not just a templating engine, it does binding.
You get the full benefit when going all React
It's like a better composable DOM
You get properties where they need seamlessly and can create reuable dynamic components easily.
 
11:36 PM
@BenjaminGruenbaum he's just avoiding re-doing the whole app in react to start using it for the main interactive piece.
 
If it's just render-once it loses a part of the abstraction.
 
@BenjaminGruenbaum people keep saying this, but how does it benefit my static layouts vs small components.
like, I'm 100% on board with components. I can't stress that enough
 
And while I lean toward all-react-all-the-time, You certainly don't need to go all in.
 
@rlemon if your components are not interactive at all it's no big deal but if you use components that do meaningful things and interact it's important.
@rlemon that's the important part.
 
right now it seems like I should just make the components I want with a sane root for them and call render on those and keep my static layouts as is
I'm willing to do both tho. and test the waters
doesn't stop the discussion 😀 we're talking about js for a change 😃
 
11:38 PM
I just joined MobX today as an org member
2
 
<body>
    <header>...</header>

    //lots of static html
    <MyReactRoot>
        <Card />
        <Card />
        <Card />
    </MyReactRoot>
    //static html
</body>
I suggest starting at that level.
 
^ exactly what I was going to do. but that other static HTML I will move into React to try as well.
 
And also use css components - it's great.
 
By putting your cards in a react-based container, you can get experience with using react to update children and all, but no need to do the whole app right away
@BenjaminGruenbaum congrats. Do you get a cool hat? :)
 
11:39 PM
@BenjaminGruenbaum on the list, one step at a time. for now I'll avoid writing css and use a css framework :)
 
@rlemon it's just automatically scoped CSS
 
it's something else new
 
Nothing new to learn + component scoped CSS
 
it's not a priority while learning React
😀
 
It'll make you appreciate react more - but sure
 
11:41 PM
historically my problem is getting overwhelmed and giving up
so I'm focusing at one thing at a time now
 
Yup. just bite off what you think you can chew.
You can always take another bite.
I don't see you on that list, @BenjaminGruenbaum
 
Need to make it public 1 sec
refrehs
 
Yarp.
Do you use anything for routing/fetching, btw?
 
Routing - the express router, fetching I don't know what you mean, fetch?
 
My old home-grown thing I used with knockout is no good for react.
client-side, i mean. Something that fetches data for the route so that each page doesnt' need to do that itself.
 
11:46 PM
Yes, the express router on the client side
Something like the routes package
 
I like the way Relay lets you compose your queries, but I don't use graphql.
So I just started toying with react-transmit. It's flawed, but I may use some ideas from it.
 
^ I hope to understand this shit come January 😃
 
hey
 
ho
LETS GO!
 
11:54 PM
I'm adding a feature to a ReactJS app to save a user's selection from a dash. The selections could range anywhere from 1 to n.
I'm wondering if I should store this state, i.e the user's profile selections to a DB or store them in a local store?
 
I had no idea they could do this in WW1 gfycat.com/JoyousMagnificentJackal
so much history we never knew
 
Depends if you can afford to lose them when they change PCs
 
storing the JSON string in an SQL db is proving a bit of a mess at the moment...needing to break up the Json object to insert each part in their respective tables
 
JSON is a string, so that should be easy.
 
I guess I need to define the exact form of the Json that will be sent first. Then I can break it down and do an insert off that
 

« first day (2231 days earlier)      last day (2733 days later) »