« first day (1860 days earlier)      last day (3094 days later) » 

12:00 AM
yeah that's true
 
.normal.normal:hover {
 
trying to raise the specificity?
 
better than important imo
 
how to you distinguish between .normal and .normal.normal, though?
 
but still not good
oh you can't haha it is just making it more specific
good point in this case that isn't the answer
quick explanation on how Radium handles hovers with inline styles/js
> Add handlers to props if interactive styles are specified, e.g. onMouseEnter for :hover, wrapping existing handlers if necessary
was wondering myself how they implemented :hover
 
12:03 AM
I think a style attribute should overwrite it as long as the original class doesn't have !important
 
try it
put your fiddle where your mouth is
 
Slightly better version: jsfiddle.net/ga3Lff42/1
 
You faked that.
:)
 
how so?
 
just kidding.
hence the :)
 
12:05 AM
@Loktar it's pretty nice
you have access to the state of an element in JS
Radium.getState(this)
 
oh wth never tried that
 
like hover
 
nice
my last project I just used Radium, really enjoyed using it
love passing an array of styles to an element and conditionally styling
so much easier.
 
but after using Radium for a while I grew apart for inline styles
 
whys that?
in my case I'm in a huge app so I have a ton of other styles/class to consider, we were always having styling conflicts
so in that instance inline styles were the perfect use case
 
12:07 AM
yeah, no doubt that is a huge (and the main) benefit
fear of changing stylesheets syndrome is practically gone
 
yeah, also makes components more isolated
 
but, it makes components feel cluttered
 
hello, anyone experienced with IIS in here?
 
with style attributes everywhere, make up more than half the JSX code in components
 
@Mosho yeah I was noticing that on some of mine, but would just break it out and include in the styles seperately
I defined most of my styles up front at the top of the component
 
12:09 AM
another downside that was pointed out to me by another dev trying it out is that you can't edit rules in dev tools to see results
 
for a larger project I'm considering having a base set of styles and including them mostly for colors
 
you have to edit each element separately
 
well you can, just on a per element basis lol ^ right which I suppose could be tedius
 
what if you have a list of 20 lis and you want to add padding to them all
 
I keep getting 406 errors
 
12:10 AM
better than 407
 
@Mosho I would just do it in the code and have it refresh on build
 
I use hot reloading so it doesn't matter, but it takes time to get used to
 
haha, not much, it means AngularJs cannot load XHR resources
 
yeah exactly @Mosho its so fast it's better to just do it in the code imo
 
and if you need to show it to someone else (designer, CEO etc.) on his machine
 
12:11 AM
did you enable options for xhr on server?
 
you basically can't
 
we have dev/test servers
so our dev builds are out there to test immediatly
on commit
we also do screen sharing if need be
 
no, I did not actually. How to do it?
 
I mean this scenario: the CEO called the other dev to his office to ask him about some changes
usually it's done by changing the stylesheets in dev tools
 
why is the CEO concerned with style changes?
that should be something that trickles down
 
12:13 AM
I agree, but it happens
 
business analyst should be the buffer
 
especially in featured he is particularly interested in
 
@Washery suppose depends on server, basically you respond to the options query, what server do you have?
 
yeah idk that seems more of an edge case, not a reason to change the focus of technology
 
and when he (the dev) couldn't it made him look bad
 
12:14 AM
@jumpstracks here you can find the web.config stackoverflow.com/questions/33718861/angularjs-on-iis-406-error
 
@Loktar I agree, that's exactly what I said
 
I am using Azure Web Apps, which run under IIS
 
but it's me trying to convince others to switch
and I have to justify any regressions
 
I mean.. you can't just edit a DB on the fly to show some different data if the CEO wants it
 
but he could, in the past
 
the point is that it's a regression
another case against inline styles and radium in particular is that you don't have :before and :after
 
why do you need them?
just do it in JS
same with :first-child, ect.
 
@jumpstracks thanks, already tried but it did not work. I guess it is some HTTP header I am missing
 
but people like their pseudo elements
 
@Washery single CORS rule, specified via a Set Service Properties operation:
 
12:16 AM
again, a regression you have to justify
 
I don't consider them regressions, more along the lines of people stuck in their ways :p
do we not minify JS on production builds?
makes it a pita to edit on the fly
 
he pointed out today that he selected some text with a border-line (which was an element and not a pseudo element) and it was copied as well
 
ah, well in cases like that you can use the style component
 
I know, this is what I say all the time
 
I had to do that for a list
 
12:17 AM
@Washery did you enable in angular?
 
idk I mean there are pros and cons of all approaches for sure
these examples though are more of it affecting someones workflow, or what they're used to
besides the last example
 
which is the worst kind of problems
 
that is legitimate
 
@jumpstracks it should work without configuration (at least it worked when running on centOS)
 
because you get the flak for introducing the new stuff
 
12:18 AM
yeah I 100% understand
 
people usually just see the cons
 
I'm introducing es2015, react, ect. ect. ect. in applications that only have jquery and 100 plugins
definitely some growing pains.
 
especially if they are fine with css/preprocessors in the first place
@Loktar I'm in the exact same boat
exact
maybe I like to complicate things
 
1 message moved to Trash can
@jumpstracks Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq. For posting large code blocks, use a paste site like gist.github.com, hastebin.com or pastie.org
 
it can be frustrating when you go to edit someone elses code and it's alien
 
12:19 AM
yeah I mean I just got on the inline style bandwagon with my most recent project
yeah I agree
but man.. it alleviates the need to use BEM and all these long classes
 
which is why I rolled my own
wanna tell me what you think?
 
plus it really helps with regression testing over all, you know there is 0% chance you affected something 20 pages deep
yeah definitely
 
yes, to me the pros heavily outweigh the cons
 
also happy bday man!
 
1 message moved to Trash can
@jumpstracks Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq.
 
12:22 AM
lol damn @CapricaSix, on the ball tonight
 
@Loktar thanks :D
 
@CapricaSix ctrl k aint doing it, ctrl-k tabs the message over, and still showed unformatted
 
tag names or class selectors work, stylesheets are generated on the fly and attached to the head (or a big one with server rendering)
 
@Washery check $httpProvider.defaults.useXDomain = true;
 
Hello..
 
12:24 AM
@Anonymous Welcome to the JavaScript chat! Please review the room pseudo-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.
 
you have media queries and pseudo selectors
 
oooh interesting
you use classnames still as well
 
and unique className are generated and added to the right elements
 
nice, was just going to ask that
 
so there won't ever be any conflics
 
12:25 AM
@jumpstracks tried but nothing changed
 
That isn't a bad idea at all actually, almost seems like the best of both worlds
 
you can check it yourself here washery.it/user/#/login
 
yes! that's what I think
 
damn this is pretty nice
 
there's also an API to edit the rules themselves, but I've read that the reflow costs are high
there's a downside that since CSSStylesheet API is used, the classes can't be edited in dev tools
in chrome at least, for some reason
 
12:28 AM
you would just need to add vendor prefixes if you haven't already
that was one thing I liked that radium took care of
 
it is run through autoprefixer
 
ah nice
 
same as radium
 
ah, wasn't sure if they used autoprefixer or just rolled their own
 
code js....
 
12:28 AM
man @Mosho this is really cool sounding
 
good to hear, I'm hoping to publish it when it's polished enough
 
what about something like className={[styles.someClass, styles.activeClass]}
 
ug... sorry, not sure how to format as code.
 
would that work at all?
@jumpstracks y ou had it right the first edit
 
enclosing code in backward ticks?
 
12:30 AM
@Loktar not needed, strings will work
 
yeah, or ctrl+k or start with 4 spaces
 
className="someClass activeClass"
or template strings
 
oh damn nice ok
 
            responseContext.getHeaders().putSingle("Access-Control-Allow-Origin",
                "*");
        responseContext.getHeaders().putSingle("Access-Control-Allow-Methods",
                "GET, POST, PUT, DELETE, OPTIONS");

        String reqHead = requestContext
                .getHeaderString("Access-Control-Request-Headers");
        if (null != reqHead && !reqHead.equals("")) {
            //LOG.info("ContainerResponse Access-Control-Allow-Headers " + reqHead + " " + requestContext.getUriInfo().getPath());
 
hit up, then ctrl+k
 
12:31 AM
@Washery java filter to allow all cors
 
I use the classnames module
recommended by the React team
<main ref="panel"
	className={classnames('slideoutPanel', {slideoutPanelOpen: slideout})}>
	<HeaderMenu msg={this.getMsg()} onOpenMenu={this.onOpenMenu} route={route}/>
	{this.props.children}
</main>
 
yea
 
shit
 
hmm took 8 spaces?
 
damn man, you should definitely publish when you're done
I really think this is the best approach
 
12:32 AM
that is so great to hear :D
 
I liked the mangling of classnames that webpack provides, but I didn't like that you seemed to lose inheritance with it
seemed really localized idk
 
not familiar with that
 
css namespacing
I think, or its css modules
 
I did something like that at first
 
yeah css modules was it
 
12:33 AM
with this elements end up with classes like 'c56-4'
 
that was the article on it that made me interested.
 
yeah I know CSS modules
 
yeah man I think your approach is great personally
my frustration is I've used CSS forever.. but having to rethink how to style was a bit annoying
 
and in dev you get the selectors in the class, like 'c65-4-list'
 
when it came to first-child, just stuff like that
 
12:35 AM
which I think is also a nice touch that lets you debug better
I liked rethinking that huge pile of shit
I've always hated CSS
even after moving to SCSS
 
I had 15 items, 5 per row, and the first and last needed their right/left margin to be at 0, it was just ugly to do it with JS imo
the css was so much clearer to understand. So I used a style component in that case
with yours I could do that pretty easily and still keep the css inline
 
I thought so too, so whatever I made, pseudo selectors would have made it in
    div: {
    	fontSize: px(18),
    	':last-child': {
    		paddingTop: px(10)
    	}
},
 
what is that syntax?
 
javascript
see room title
 
oh
looked like CSS for some reason
 
12:37 AM
whats the reason behind ` px(18)`
 
idk why...
 
rather than 18px
 
@Loktar outputs em or rem or whatever I want
another nifty trick I liked with the JS approach
though I guess there would be ways to do that easily with CSS too
 
yeah I just see that as you would have to go and change it to em() anyway
but I get your point
 
no, the px function returns Xrem
px(16) outputs 1rem
 
12:39 AM
OOOOh I see
ok that makes much more sense
 
turns px into rem?
 
Save 1 byte
 
yeah
 
I think you could get a lot of traction with this
 
12:41 AM
@rlemon ^^
 
it really addresses most of the concerns with something like radium
 
@KendallFrey rlemon is afk: my ass hurts
 
please let me know when you're done :p
 
I really hope so, I tried all of the CSS in JS options on GH I think
 
I'll use it at work
 
12:41 AM
and all of them are lacking
@Loktar awesome :D
another issue I had with radium, is that just having it as a decorator (just to use array styles, for example) triples the execution time of renders
though that might fall into premature optimisation and not be a real problem
 
Yeah I personally didn't notice a difference, but made a point not to use the decorator or include it if I had no need for it in the specific component
I must say though I do like the decorator pattern. Used pureRenderMixin the same way
 
decorators are awesome
a shame they are broken in babel 6
I still use class inheritance for pure render
some pretty intense CSS there
// This element will be moved into the glossary-bucket...
.def-a { move-to: bucket-a; }
.def-b { move-to: bucket-b; }

// ... and dumped out into this area in the order added.
.area-a { content: pending(bucket-a); }
.area-b { content: pending(bucket-b); }
 
1:28 AM
@shanselman @Nick_Craver Thanks! Added to our collection.
 
1:47 AM
in react how do I update the state of a child object? e.g. this.state.abc.xyz. This is the closest I've gotten but xyz needs to be a variable e.g. this.state.abc[chosen]
var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});
 
your child objects get's it's properties in render(). if you are passing in your state to another component as props, it'll update
<Child abc={this.state.abc} />
 
perhaps this isn't the best way to do it but I'm attempting to save the state of an input
 
there are a few ways to do that. Is it the iinput stat you really care about or the state of some parent 'form' or other structure?
which the input happens to be part of
 
the input state. Essentially I'm saving all the values of the input inside this.state.abc and then sending this.state.abc to the parent component once the form is "saved".
so currently on my inputs I have something like this: onChange={e => this.handleChange(e, 'name')}
 
ok, you say 'save state of input', but then describe something else. I don't think you are really trying to save the react state of the input, which is good. You are just storing all the values FROM inputs in a parent component state, which is normal and proper.
 
2:01 AM
hello plebians
Has anyone ever received information regarding specifics about the details of their employment contract (between the intermediate recruitment company and the employer/client)? Is it common for them to disclose this information?
 
> specifics about the details
 
like how much the company is going to get from your paycheck.
if you decide to "go perm" are there any fees
those types of things
 
I see. I'm not sure, actually, even though I've used recruiters in the past.
as in hired through them.
 
gotcha
 
I remember thr recruietr getting some percentage, but I can't recall if that info was shared with the contractor or if they just knew their part of the componsation
But I'm pretty sure any 'buy out' amounts were NOT shared.
 
2:05 AM
from what i know, i don't know if any contractor knows those details.
 
Hmm isn't saving the state of the input what this example is doing?
getInitialState: function() {
    return {value: 'Hello!'};
},
handleChange: function(event) {
    this.setState({value: event.target.value});
},
render: function() {
    var value = this.state.value;
    return <input type="text" value={value} onChange={this.handleChange} />;
}
 
@culturalanomoly I've known that from before
i.e. I knew company charged X% of my salary, and I knew my salary
 
@SomeKittens good to know
 
@joshhunt yes, but I was thinking you meant the 'this.state' of the input (asuming it was another component).
a terminology issue.
 
@SomeKittens what about other details? i'd expect a document from them stating those details along with "rules" ...
 
2:06 AM
ah my mistake
 
like, contractor can't solicit client directly for x number of years ...
 
@culturalanomoly what's your situation? Contractor?
@culturalanomoly that doesn't stop anyone
 
another gig is on the table. but i want to know the specifics. yeah, it's contract ...
 
so.. yes, the onChange thing can get tedious. There is a LinkedState thinsg that wraps that up that may be of use: facebook.github.io/react/docs/two-way-binding-helpers.html
it's just a bit of sugar around passing in a value property and a handleChange.
 
Interesting gmail bug that's been around for months
 
2:11 AM
pretty sure Randall just really wants to talk to you.
 
hmm looks good but I'm a bit cautious of going too deep without understanding the basics
 
read the part "ReactLink Without LinkedStateMixin". You'll see it's really just the handleChange handler liek you are using
so it just lets you turn:
<input value={xxx} onChange={xxx} />
into
<input valueLink={xxx} />
 
@KendallFrey WHY WON'T YOU ANSWER ME
 
how would I get that to work with multiple inputs?
 
linkFormFieldState(key) {
        return {
            value: this.state.formFields[key],
            requestChange: (value) => this.setState(React.addons.update(this.state, { formFields: { [key]: { $set: value } } }))
        };
    }
linkFormFieldState('name')
which is basically what you were doing, only parameterizing the property name
<input type="text" placeholder="First Name" valueLink={this.linkFormFieldState('firstName')} />
the 'valueLink' is a nice extension point for more code, too.
Disclaimer: I'm a react noob and might be missing some better way, too.
but one small block of code (that could be useful elsewhere) and one funciton call linking each input is not too much hassle
 
2:23 AM
ohhhhhhh... I did not know that you could do [key]: { $set: value }. Ugh I'm such a noob :/
 
ohh, that's ES6.
or.. is it? shit, now i'mnot sure
 
well I just tried it in chrome dev console and it seemed to work
 
yes, it's es6, so you'll need a transpiler if you plan to us it in odler browsers
or IE
but, you can use a slightly longer syntax
my only react project, a landing page (this is a faq/signup form component): gist.github.com/luggage66/53c2374b6959bd85afc8
 
out of curiosity how would you do it otherwise? I have a transpiler so its not an issue for me though
 
i used it as an opportunity to learn react.
 
2:27 AM
var formFields = {}:
formFields[key] = { $set: value };
 
you'd needs to do it in two statemetns
x = {}, x[key] = ...
right
 
will that work with setState? I assumed that formFields would get overwritten
gonna test it
 
that's what React.addons.update() solves
 
yeah it overwrites it. can you show how you would write it with update?
 
i did. that was my example above
also you were already using update() in YOUR sample..
 
2:34 AM
yeah I couldn't figure out how to have a variable as the key though
var abc = update(this.state.abc, {
    [xyz]: {$set: 'foo'}
});
for example how would you write that ^ without the es6 notation?
 
var x = {};
x[xyz] = {$set: 'foo'};
update(this.state.abc, x);
as I and phenomnomnominal recently answered.. :)
 
oh sorry, I see now. Wasn't sure how update fitted into that
thanks for your help, really appreciate it
 
np
 
if you ever need design / html / css help I might be of some use
 
3:08 AM
Hi Guys, can I ask question about sinon.js here ?
 
I am trying to stub a function which has a callback similar to below code
 
1 message moved to Trash can
@MiladRezazadeh Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq. For posting large code blocks, use a paste site like gist.github.com, hastebin.com or pastie.org
 
sorry sure
module.exports = function(req, res, next) {
     authController.handle(req, res, function(apiMethod) {

        if (apiMethod !== undefined || apiMethod !== null) {
             apiMethod(next);
        } else {
             next();
        }
     });
 };
the apiMethod can be any method , from different api controllers
 
3:18 AM
when I stub the controller , it is not working
 
Show me how you're stubbing it
 
I forced to create a method that returns the apiMethod , called findApiMethod() and then stub findApiMethod()
var controllerStub = sinon.stub(controller, "methodname", function() {
        // stub implementation here
    });
 
That's not the actual code though right?
 
I just make it short , actual code is also the same
just controller name and method name is different
 
in order to help you I need to see what you're actually doing so I don't just have to guess what you're doing wrong.
I have to go now, so I can't help you.
 
 
1 hour later…
4:37 AM
how to set interval of kendotimepicker
 
@RajeshChoudhary Welcome to the JavaScript chat! Please review the room pseudo-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.
 
4:47 AM
@rlemon That was surprisingly good! I should check that sub out more often
Also, came across a new (to me) xkcd through it. Huzzah! xkcd.com/505
 
@SomeGuy rlemon is afk: my ass hurts
 
5:04 AM
Codeschool launched course for ES2015
2
 
 
1 hour later…
m59
6:10 AM
That does what I set out to do. I don't know if I did it right.
I think the way I clean out the input with the subscribe is wrong, not sure how else to pull it off
 
what is the best compression technique for videos to be used in Websites?
 
6:23 AM
@m59 kinda weird
why the skip?
 
m59
@SomeKittens It was just something that I thought of randomly and wanted to do it to sharpen my ability.
 
the reset should be in .do
 
m59
ah, that again
thanks fran!
 
github.com/SomeKittens/gustav <- also check that out
are you trying to get every other thing typed in?
currently it's only allowing me to type in odd numbers
 
m59
Yeah, it's every other odd number
 
6:31 AM
nope, so long as I'm punching in an odd number, it's cool with it.
 
m59
oh snerp. No, it doesn't do what I wanted.
oops.
 
yup
 
m59
6:47 AM
@SomeKittens I think this works. Gotta be a smoother way jsbin.com/dumudejeqe/3/edit?html,js,output
 
I like Debug in VSCode
 

« first day (1860 days earlier)      last day (3094 days later) »