Flash of unstyled content about glamor HOT 9 CLOSED

DOWN WITH NAMING EVERYTHING THAT DOESNT DESERVE A NAME!!!!
✌🏼️👀👨🏽👩‍👩‍👧‍👦👕🎩
On Sun, Oct 16, 2016 at 6:54 AM Sunil Pai [email protected] wrote:

Closed #33 #33.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#33 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAGHaPED2HWPmdtkH5CnQrTJIO8lavXIks5q0iyhgaJpZM4JuzTV
.

from glamor.

The next release will bring back the speedy flag. I'll bring a dev build for npmcdn too. Will close this once that's done. Thanks for the feedback, and do let me know if the issue pops up again.

from glamor.

Thanks for asking, I always have opinions 😊

So I really like the approach. I remember when I first heard about this library it was in Twitter code screenshots that had been retweeted a couple of times and I was intrigued, then when I actually wanted to learn more about the library, I couldn't find it 😖, luckily I dug through my Twitter feed and arrived here.

Recently I started building a React project with aphrodite and I was running into some limitations. When I hovered over a button element I wanted to change the color of a child icon. Simple, right? In aphrodite, not so much. It was still early in the project and partly inspired by @ryanflorence's recent video on actual inline styles I switched the code base to glamor to take advantage of the select function. I was also using style-loader/css-loader, in the future I now want to replace them with insertRule from glamor. So the reasons I enjoy the switch are as follows:

1. No class names. I think this is an undersold benefit of this approach, I'd definitely recommend throwing that benefit in the README. "Forget about naming styles!". Not having to give every div a name is awesome! And it takes so long to write className…
2. Closeness to CSS. This one is definitely glamor specific. There's definitely a big move to try and make style interfaces common across all platforms. This approach intentionally shortcuts some of the power of CSS. I might be in the minority, but I still believe CSS has a very elegant design although I would never use it directly in a large app. So the escape hatches are critical.
3. The code just looks good. It really does 😊. Note I'm using the {...style()} syntax, I think the other styles just aren't as good. I've also barely looked at the tools outside of index.js, so I haven't touched react.js.
4. All the reasons @ryanflorence gave for liking inline styles, he was right…(although I think the jsxstyle approach leaves much to be desired. It's much harder to build in the CSS escape hatches, or to write semantic HTML).

I haven't been using it for long (about a week now) so I can't comment on any severe architectural limitations, but there are some gotchas I've found. Specificity issues with pseudo-classes is one. So :active must always be more specific then :hover and so they must be ordered appropriately in the style sheet. Also there was some wierdness with auto-prefixing when I tried writing something like: top: ['50%', 'calc(50% - 10px)'] (because I wanted a fallback for browsers that didn't support calc. It's nothing an !important won't fix though.

One thing a will note which probably should be warned about is animations. I haven't tested this, but I assume if you want 60fps you shouldn't be updating your style object super frequently, correct? At that point I tend to fallback to the native style attribute. As a side not I'm using @chenglou's react-motion.

I also want to say, bravo on the implementation! It's really pretty neat how the software works. I saw you had a TODO item for static optimizations, it would be sweet to see a Babel transform or something 😊

Now it's your turn, why did you make this framework, what use cases of yours does it solve, what's your vision for its future?

from glamor.

This is greeeeeat feedback, thank you much!

• the :active / :hover issue; this is something glamor should be able to help with (and perhaps automatically fix?), opened #36 for the same
• can you give me a small input/expected/actual testcase for the fallback value problem? I want fallbacks to work in glamor, maybe I got my implementation wrong :|
• and yes, you don't want to use this for animations. I did some earlier work to see if it's possible, but came to the same conclusion as you; directly targeting style prop makes more sense/is faster/better. glamor for the rest!

I recommend you try out the /react shim. specifically the css prop via the createElement patch is a lot of fun/ saves typing.

• it accepts raw styles, so this is valid : <div css={{ color: 'red' }}/>
• it accepts arrays, so this is valid <div css={[ { color: 'red' }, hover({ color: 'blue' })]} />

So I've recently started building my own thing, and wasn't happy with 1-2 things with every library. aphrodite came closest, but the lack of escape hatches/ async behavior made it hard to use. really wanted a library with no compromises, so I went ahead and built it :) That's all really, no crazy grand vision.

It's pretty close to "feature complete", I plan on getting some enhancements in and then polishing it as time goes on. Happy to hear ideas :)

from glamor.

@calebmer @threepointone OMG I wish we were seeing more dialogs like this. You're both awesome ✨

༼ つ ◕_◕ ༽つ✨✨✨

from glamor.

Thanks, very nice of you to say!

It shouldn't do the flash... do you have a sample to reproduce this?

from glamor.

I seem to have lost the speedy toggle in the refactor. I'll get that back in; it'll speed up rule insertion a lot and should make this less of an issue. Another ugly workaround is to compile with NODE_ENV=production to trigger speedy.

Lemme know if you have a sample though, cheers.

from glamor.

Yep, I can confirm that when NODE_ENV=production there is no flash 👍. Unfortunately though I don’t have enough time to put together a sample 😖. Especially since there’s no development build I could import into a codepen.

Thanks though, it seems like you know what’s going on 👍

Feel free to close this whenever you’re comfortable.

from glamor.

do you have any feedback you'd like to share? anything I could make better? what is your usecase? please and thanks :)

from glamor.