« first day (2243 days earlier)      last day (2699 days later) » 

8:02 PM
@Luggage uhh 😛 maybe I should use other peoples components 😃
 
What am I looking at?
 
my new menu
 
What's so wrong with it?
 
idk, that code looks atrocious imo
 
start with renaming the file in the gist so it colorizes :)
 
8:05 PM
I need to pull all the logic out of renders return
 
you have a class for each link?
 
I hate the short circuit evaluation
 
You can just make an array.. (e.g.):
 
yea I know
 
ok.
 
8:06 PM
it's half me being stupid, half every fucking tutorial I read does it this way
because, simple.
 
{this.props.loggedIn && [
    <Link />
    <Link />
]}
 
user2620028
that one doesn't need explained ^
 
for the classnames, I like the 'classnames' package.
 
user2620028
what is that syntax?
 
8:09 PM
it would have been more useful if I could get the <Link> inside of the getClassName
 
@HatterisMad JSX
 
then I wouldn't have to pass back the key myself
 
I don't get the 'get the link inside className' thing you speak of.
 
I think It's time I updated my resume
 
user2620028
but the jsx gets translated into html elements...
so why the conditions in front of it
 
8:10 PM
ohhh.. i get it.
 
@HatterisMad so that sometimes it doesn't turn into elements
 
jsut make your own <Link> that wraps that one and adds your own funcitonality
 
user2620028
so it evaluates the left and side and short circuits or goes on to output the html elements?
 
yep
it's a hacky way to conditionally output elements
 
!!> 1 === 2 && "something"
 
8:11 PM
@Luggage false
 
user2620028
did not know that
 
I refuse to put logic inline with my JSX, so I don't use that pattern ever. It's kind of bad.
 
and react ignores any undefined, null and false values in children.
 
but if you don't like methods or think method calls within the same object are expensive, plenty of people use it
it's also popular with the ruby-esque terseness above functionality crowd
 
that 'logic' is part of render, but you can put it in another function you call.
 
user2620028
8:12 PM
well i know about short circuiting... but i didn't know that jsx would allow you to output like that
 
user2620028
cool to know
 
I think it's react, not JSX. React ignores those empty children.
in any level of nesting.
 
somebody should optimize them out before it calls createElement
 
JSX just makes the array to pass to 'children'
It can't.
it happens inside of createchildren.
 
the way it handles children is kind of odd, writing a createElement made that very clear
 
8:14 PM
or even later, during reconcilation
 
@Luggage what do you mean by empty children?
 
children = [ someElemment, false, someElement];
[1] will silently get excluded
 
I love silently excluding children
 
children should be silent and exclude themselves
 
same as:
<div>
    <Child />
    {1 === 2 && <Child />}
    <Child />
</div>
 
8:15 PM
does it just filter for children who are truthy?
 
no, just false, undefined, and I think, null.
0 renders.
I think.. ?
 
0 or "0"?
 
"0" definately does. I am speaking of 0
 
I thought it turned everything in elements or strings
 
yea, but not a boolean, for example, due to the behavior above
and a Date.. I think it'll bitch.
testing.
 
8:17 PM
despite having written a working implementation of React, I'm still unclear on how it works 😛
 
Then you don't have a working implementation. You have something similar :)
 
meh, looks like a duck, renders like a react
I do have a much better understanding of how components vs elements works and why they had to do that, as well as the lifecycle.
 
@Luggage okay, thought about it for a second and came up with this gist.github.com/rlemon/9086014fc69fe16c4fc8dde16cf3acde
 
Does anyone have a better way of conditionally excluding children? I also dislike the short circuited evaluation with magical ignoring of false/undefined
 
mostly it's just that their docs are worthless for anything but the surface info, they intentionally keep React as a black box
 
8:18 PM
I think it's better
 
@david filter
 
This behavior we are discussing is documented, though.
 
@ssube that makes sense if you're dumping in an array of children, but if it's just a section you want to hide then you lose the 'benefit' of being able to structure it with jsx
you'd have to build up your structure using arrays first
 
oh, you just want a single element?
 
yeah
like we have a profile section, and one of the sections is only valid if the logged in user is a higher role
 
8:21 PM
<Foo>{this.renderChildThing()}</Foo> with renderChildThing() { if (this.props.x) { return <div>Hello!</div>; } }
is what I use
 
hmm, yeah that's quite nice
 
stirngs, numbers and components render. booleans don't. dates fail
 
if you don't like having something inline, make it a method, then you can just call (and test) it
 
arrays get collapsed. objects fail (unless a fragment)
yea, using renderFoo() is a good practice.
 
8:22 PM
@ssube actually now that i think about it, i tried that, but the linter started treating renderChildThing() as a component (because it basically is, it returns nodes) and complained about something
 
@david that's very odd
having methods to render partials/children is pretty common in the code I've seen
 
I didn't set up the linting rules, and i was still 'new' so i couldn't get them changed
 
Depends how you use it. {this.renderFoo()} shouldn't, but <this.renderFoo /> will be treated as a componnet
I can't speak for your linter*, but I speak for react.
 
I think the linter didn't care how it was used, it just picked up that it was a pure function that returned nodes and wanted me to annotate it
 
@david pure in what sense?
 
8:24 PM
and it would probably be just <renderFoo />
 
in that case it IS a component
by all definitions.
except that is lowercase, so it'll be a raw elment
 
AH, that could have been what it was complaining about
wanting me to capitalise it
 
that would output html: <renderfoo>
 
either way it bitched at me, and i think if it comes up again i'll just silence those rules
 
<this.renderFoo /> won't, because the . makes it a reference to a component
 
8:25 PM
or you could not confuse the linter
 
because having functions that handle the conditional display is a nicer approach i think
 
cause that is definitely not correct jsx
 
there is nothing wrong with using a function, but if you call it like a component, then it will be.
 
I wasn't doing it like that, i was using {}
 
using the right syntax makes the linter happy
 
8:26 PM
No it doesn't
 
oh, ok.
 
because the linter wasn't complaining about how it was used, it was complaining about how it was defined
 
I do stuff like <MyComponent.SomeStaticPropertyComponent/> all the time
 
@ndugger me too, that's fine.
and the HLC I am working on right now: <this.currentView.reactComponentConstructor />
 
<Toolbar.Separator/>
 
8:27 PM
(it handles showing the old component while the new one is loading, etc)
 
user1596138
Components can totally be properties of objects instead of top level references...
 
// commence vomiting
<KnockoutContainer id="viewRoot" root="views/" mountedPage={this.currentView.mountedView} />
{this.currentView.pageType === 'react' && (
    <this.currentView.reactComponentConstructor
        ref={this.updateReactComponentRef}
        params={this.currentView.params}
        {...this.currentView.data}
    />
)}
 
user1596138
They pretty much have to be if you prefer lookup tables to big if blocks or switches
 
Does this look like a good place to learn JS mvc architecture ? codeproject.com/articles/753724/…
 
{ do {
    if (yourMum === 'so fat') {
        <YourMumJoke/>
    }
    else {
        <YouWinThisTimePal/>
    }
} }
 
8:32 PM
they dont seem to use anything inside pl.model or pl.ctrl
 
you forgot return.
 
user1596138
lol JSX statements
 
@Luggage you don't use return inside of a do statement
 
oh?
 
it just uses the first statement
 
8:32 PM
ew
 
ew if you don't know what it does
awesome if you keep it clean and concise
 
@ndugger you shouldn't use do statements
 
@ssube make me
 
but it's inconsistent.
 
user1596138
@ndugger some of us don't still dev for netscape
 
8:33 PM
Say for instance I went down the route of learning ember.js very well and answering a lot of questions for it on SO, Do you reckon it'd 1) improve my overall ember.js knowlegde or are projects better? 2) improve my chances of getting a neat job
 
user1596138
So we have forgotten do
 
@Jhawins do is new
 
user1596138
There's a new do?
 
well, the new semantics of do are new
yes
 
user1596138
It's hard to find on MDN.
 
8:34 PM
I'll see if I can find it. I've known of it for about a year now
 
{function() {
    if (yourMum === 'so fat') {
        return <YourMumJoke/>;
    }
    else {
        return <YouWinThisTimePal/>;
    }
}() }
 
don't fight the do
 
user1596138
@ndugger So it's just a function wrapper
 
the new do is so you can write ifs backward
 
user1596138
That returns without a return
 
8:36 PM
@Jhawins essentially
 
user1596138
Just use an arrow function lol
 
no
 
it's the last part, the returns without a return, that I find inconsistent.
 
ONLY USE DO
 
user1596138
Also is this actually anywhere other than a proposal?
 
user1596138
8:36 PM
:P
 
it reminds me of coffeescript.
 
@Jhawins no
but babel/jsx already included it
 
user1596138
There's a separate plugin for it from Babel
 
user1596138
2 of them lol
 
do do
 
user1596138
8:37 PM
1 to parse 1 to transform
 
it comes automatically with one of the presets. I don't recall which
 
'stage -1'
 
lol
 
user1596138
Nutty. Since it's not going anywhere lol
 
user1596138
Stupid Babel
 
8:39 PM
@Jhawins the entire feature is just a hack to avoid using functions
 
user1596138
@ssube That's what it looked like to me
 
user1596138
Like... This isn't something you couldn't just do lol
 
user1596138
^ pun
 
but so are classes.
 
Don't you guys know that functions are bad?
 
8:40 PM
it's sugar and not all sugar is bad.
 
Get real.
 
except if we are talking about dietary sugar. that's all bad.
 
> tall bad
!!giphy guy fieri
 
user1596138
> JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance
 
user1596138
8:41 PM
That's what classes do for us. What does do do? ;P
 
it does things
literally
 
if lets you put multiple statments when you are only allowed to put an expression
without an IIFE
 
it lets your write code that will be impossible to read, lint, or test
for when you're too lazy to \n if
 
If you can't read that, you're a bad developer
 
I don't think it's that bad, but I'm in no rush to include it in my .babelrc.
 
8:42 PM
it just doesn't solve any problems
 
does object-rest-spread?
 
> pls help my fragile baby eyes i can only read jquery scripts and c++
 
you can debate object spread for a while
 
Ohh, I plan to.
 
it has only a few really unique uses, which I think is a smell
 
8:43 PM
But it does nothing you can't do with Object.assign()
 
Sometimes you need an Object.assign vs a spread
 
yet.. I like it. It fills in the missing gaps in the destructuring
 
the whole assign/object spread chunk of es6 seems like they half assed it
 
I like the convenience of object spread, but it's not a full replacement for anything
 
the behavior of assign is a little weird
 
8:44 PM
the object spread wasn't in es6 originally was it? i thought they added it later
 
they also only covered the surface use cases and still don't have any kind of clone outside of structure clone
 
it would be better if they used it inside of a do
 
@david it will never be in es6, it's 7 or later
 
do { ...yourMom }
 
not sure if it's become a real feature yet, there are a couple sitting in stage 0 or 1
 
8:45 PM
I spread her first.
 
right, that's what i thought
 
Object spread is in ES6...
 
there are a fair glut of features that hopefully will stay stage 0 forever
 
not object-rest-spread
 
8:47 PM
you gave me an idea when you mentioned array
 
ah, that's arguments spread
 
@rlemon nice.
 
Object rest/spread is in Stage 3
I find it funny that realms is stage 0, but frozen realms is stage 1
 
what stage is frozen realms with sprinkles?
 
I don't like Realms... it's just another with statement, masked by classes
 
8:49 PM
do with {}
 
do with {} is the es3 version, now it's {} with do
 
@Luggage lol idk. I used generators so I could
I could very easily return the array itself.
 
@rlemon yea.. but why not.
 
and probably will
@Luggage because then I wonder why I did in six months
 
yes, jsut .filter() it
 
8:52 PM
!!afk ☕️ ⛅️
 
coffee and lsd
 
@rlemon I've been banned from spreading holiday cheer ever since
 
@Zirak rlemon is afk: ☕️ ⛅️
 
@rlemon a truncated example of what I do: gist.github.com/luggage66/5675a3911d26c66188253e5ac5b1b026
it's messy and started pre-react, so don't judge it
but it uses the array method, then I map over it. Much like yours.
 
@Luggage I can't decide if that {thing, ...otherProps} pattern you're using is something I like or not. I was using it pretty heavily, then got rid of object spread by just passing the entire props object up to super/down to the child. That was the only place I was spreading objects.
 
8:58 PM
I use it a lot for the same reason I use it here. I want to pluck some props I care about or want to manipulate, then pass the rest.
 
constructor(options) {
  super(options);
  const {foo, bar} = options;
  this._foo = foo(bar);
}
see, I switched to plucking in a non-destructive way and passing everything, instead. So far it's been working well.
 

« first day (2243 days earlier)      last day (2699 days later) »