These are chat archives for ractivejs/ractive

9th
Feb 2018
Paul Maly
@PaulMaly_twitter
Feb 09 2018 07:29

@simonlayfield I guess, that even this one looks weird and unlogic:

template: `${slider.sliderComponent}`

So, template or component after all? It confuses. Why do you suppose that the component is only about its template? Perhaps, if re-name components folder to templates it'll be more clear for understanding. Further, multiple components definition in one file main.js breaks all modular approach. It's impossible to reuse or import in other place.

So, I think we able to re-write your code like this:
/src/
      /components/
     /templates/
     main.js
// /src/components/Slider.js

import Ractive from 'ractive';
import template from '../templates/slider';

export default Ractive.extend({
        template: template
});
Paul Maly
@PaulMaly_twitter
Feb 09 2018 07:35
// /src/main.js

import Ractive from 'ractive';

import Slider from './components/Slider';
import Button from './components/Button';

import template from './templates/apptemplate';

const ractive = new Ractive({
    el: '#app',
    template: template,
    data: {
        label: 'This totally works',
        message: 'Change me!'
    },
    components: {
        uiSlider: Slider,
        uiButton: Button
  }
});
Joseph
@fskreuz
Feb 09 2018 13:07
import Ractive from 'ractive';

export default Ractive.extend({
  template: `
    <!-- slider's template -->
  `,
  css: `
    /* slider's css */
  `
});
If the template is small enough (which it should be anyways, for a component), you can just inline the template.
This basically turns your component into vanilla ESM, letting you get things up and running without additional tooling overhead (throws away webpack loaders, ractive-plugin-ractive, etc.).
The disadvantage is that you'll lose pre-processing abilities (the template is no longer a separate file which you can parse and optimize), which you probably don't need if you're just learning.
Juan C. Andreu
@andreujuanc
Feb 09 2018 13:13
I do both approeaches
I do "pages" with separate template files
and also do components, which depends on the context they might be page components (think of usercontrols) or app components (think of superamazingbutton)
Joseph
@fskreuz
Feb 09 2018 13:37
iirc, Safari/Chrome have ESM support. You can write components in this format immediately run it on the browser, no tools required.
However, you'll need to serve modules in the right MIME type or else the browser treats ESMs as text, ignores them, and fail silently (not even a parse error, last I checked).
The disadvantage is multiple HTTP requests (a request per module). But again, not an issue if you're just playing around... or using an HTTP2 server :wink:
And while Ractive ship's as an ESM, most libs don't. You might need to load them the old-school way: a bunch of script tags before you load your app.
Juan C. Andreu
@andreujuanc
Feb 09 2018 13:46
True
maybe in 2 years xD
Im currently visiting a customer, and some of their users still use ie11 xD
Juan C. Andreu
@andreujuanc
Feb 09 2018 13:57
IE8
IE8 is no longer supported. If you still need to support IE8, well, we're very, very sorry...
so good xD
Joseph
@fskreuz
Feb 09 2018 14:05
:joy:
If you find that funny, wait until you see the unit test comments. :grin: It's a gold mine.
kouts
@kouts
Feb 09 2018 14:11
IE 11 is still valid in business - corporate environment :worried:
half of my bug reports are IE11 for that reason :smile:
Joseph
@fskreuz
Feb 09 2018 14:24
Yep. Despite MS's effort on W10 and Edge, IE just won't go away. :smile:
Even when they have W10 installed, people just use IE out of habit/because manual says so/because internal site says so/internal sites were written for it/because IT dept :smile:
Juan C. Andreu
@andreujuanc
Feb 09 2018 16:27
IT
IT => bunch of potatoes xD
Paul Maly
@PaulMaly_twitter
Feb 09 2018 18:14
More thoughts about #3160 ? So, maybe we should move forward with it?
Chris Reeves
@evs-chris
Feb 09 2018 18:55
this is still my favorite
I especially like the color, but I've always liked blues
regarding modularization, yeah, I'm stuck with bundling for the foreseeable future because I've still got customers hanging onto XP for dear life
the good news is, the bundling scene has improved tremendously over the last year
I've still yet to try rollups splitting, but if it works as well as it looks, I'd say that's probably as close as I'll get to frontend deployment nirvana until native esm in browser and node has been available for a couple of years
Joseph
@fskreuz
Feb 09 2018 19:23
Anglebars! :joy:
But in all seriousness, the "sticker" variant gives a fresh perspective on Ractive. Somehow reminds me of Slack.
1448207005slackbot.jpeg
Yep. square, rounded corners, bright color. Slackbot.
Paul Maly
@PaulMaly_twitter
Feb 09 2018 19:30
I like a color of this variant, but definitely don't like "modular R" and font. Also seems this variant has a poll result lower than current logo. So, I don't think that less popular variant will improve Ractive's brand.

Yep. square, rounded corners, bright color. Slackbot.

So, it only does that variant less unique

Paul Maly
@PaulMaly_twitter
Feb 09 2018 19:39
blue-ractive-logo.png
Chris Reeves
@evs-chris
Feb 09 2018 19:43
Oooooh, we could hit the trifecta! Reactangularbars.js
to be read as rectangular bars
Paul Maly
@PaulMaly_twitter
Feb 09 2018 19:45
What do you mean?
Chris Reeves
@evs-chris
Feb 09 2018 19:46
just kidding around anglebars
Paul Maly
@PaulMaly_twitter
Feb 09 2018 19:46
anglebars ?
Chris Reeves
@evs-chris
Feb 09 2018 19:46
and the fact that almost everyone immediately jumps from ractive to reactive or react
Joseph
@fskreuz
Feb 09 2018 19:46

Reactangularbars.js

:joy:

Chris Reeves
@evs-chris
Feb 09 2018 19:47
the original name for the ractive project, complete with jaunty logo
Joseph
@fskreuz
Feb 09 2018 19:47
Technically a square is a rectangle so... yeah. Name's legit :joy:
Paul Maly
@PaulMaly_twitter
Feb 09 2018 19:48
jaunty?
Chris Reeves
@evs-chris
Feb 09 2018 19:50
this guy is what I'd consider to be jaunty
Paul Maly
@PaulMaly_twitter
Feb 09 2018 19:50
you talking about white border around logo or what? (this border was transparent background before upload)
yep, it's funny logo. I don't even heard about this project before.
Chris Reeves
@evs-chris
Feb 09 2018 19:54
only kidding
Paul Maly
@PaulMaly_twitter
Feb 09 2018 20:26
and so?
Juan C. Andreu
@andreujuanc
Feb 09 2018 20:43

Reactangularbars.js

I kek'd

New name proposal: DefinitelyNotReact
Paul Maly
@PaulMaly_twitter
Feb 09 2018 20:46
Don't get me wrong, please. I force this question mostly because I need to create logo for Ractive RealWorld example app. So, seems our first poll regarding this issue shows us that community wants to change the logo: poll 1
The second poll shows us which logo idea seems more popular: poll 2
So, I suppose that doesn't make sense for me to make RealWorld logo based on current Ractive's logo.
Juan C. Andreu
@andreujuanc
Feb 09 2018 21:00
36%, 32%, 25% top 3 logos. So IMHO there should be a better consensus here, becase 32%+25% =57% of voters didnt like the first logo :)
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:02
democracy )))
you not in Russia ))
First poll also have more than 50% against winner option and so?
Chris Reeves
@evs-chris
Feb 09 2018 21:08
I added a few more thoughts to the issue - I say we take pieces of the top 5 and merge them.
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:09
final design and the winner - drop the 'a', center the 'R', use the blue for the background, round off the edges, and maybe drop the white inner border?
if we'll doing all these things it would be a Frankenstein )))
I believe each variant have an ideas in its background.
We can't just stick all of them together
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:14

drop the 'a', center the 'R',

too boringly and usually, it isn't unique

the idea of a periodic element gives us the chance to organically use "Ra" in a logo. it's unusual and interesting. draws attention
"a" little bit mutted by color, to make "R" more important

round off the edges,

seems, rounded edges is old school and also too usual

Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:19

maybe drop the white inner border

maybe, but why?

Chris Reeves
@evs-chris
Feb 09 2018 21:27
mostly to simplify things/reduce visual clutter and ambiguity at smaller sizes
but again, I'm certainly not a designer
Frankenstein's monster is really not a bad metaphor for frontend frameworks if you think about it
bits of various technologies stitched together
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:30
maybe white border is not so important and doesn't corrupt the main idea
Chris Reeves
@evs-chris
Feb 09 2018 21:30
with a few things bolted on (at the neck) to give it all a kickstart jolt
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:32
I don't feel it, but I usually try to don't look in the source code)))
Maybe that Frankenstein could looks like this:
Снимок экрана 2018-02-10 в 0.35.32.png
:smile:
Joseph
@fskreuz
Feb 09 2018 21:37
oooh, interesting.
If you can just turn that into a square, then the grey area being a triangle at the top right, JS in grey...
Even a rectangular one looks good. Looks like the badges from shields.io
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:39
so, why we definitely need to turn a logo into a square?
Joseph
@fskreuz
Feb 09 2018 21:39
favicons
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:39
actually, it's already a square
but with transparent parts
Chris Reeves
@evs-chris
Feb 09 2018 21:40
that is interesting
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:40
image size 100х100
Joseph
@fskreuz
Feb 09 2018 21:42
Even this one would do it. "Fold it the way you want it" - boom! new slogan.
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:42
Снимок экрана 2018-02-10 в 0.png
@fskreuz lol )))
Joseph
@fskreuz
Feb 09 2018 21:44
This would be a fun experiment: When you scale the logo up, it unfolds to that. Scale the logo down... the blue part shifts downward (and a bit to the right), like as if the paper was pressed down.
Makes for a good animated logo, like webpack.
Chris Reeves
@evs-chris
Feb 09 2018 21:45
ractivegami
Joseph
@fskreuz
Feb 09 2018 21:47
me thinks we need a component that does this animation. :D
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:50
compare.jpg
blue looks like react
Joseph
@fskreuz
Feb 09 2018 21:53
Before that, can the "JS" be the same font as "R"?
As for color... Hmm...
purple :D
oh wait :facepalm: purple is very... material design.
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:55

Before that, can the "JS" be the same font as "R"?

actually, it's the same font as used on current logo

;)
Joseph
@fskreuz
Feb 09 2018 21:55
yeah, it's very thin tho.
and for lulz, do a "TS" version too :D
because we'll never know. :joy:
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:56
compare2.jpg
Joseph
@fskreuz
Feb 09 2018 21:57
yeah, that version is less graphic-y compared to the rest. I like the ractivegami, paper-foldy thingy. (the one above)
Paul Maly
@PaulMaly_twitter
Feb 09 2018 21:58
periodic version is more accurate and serious
vue, react and angular logos looks like hipsters near Ractive
Chris Reeves
@evs-chris
Feb 09 2018 22:01
Ooooh... R with a beard and skinny jeans eating kale
Joseph
@fskreuz
Feb 09 2018 22:02
:joy:
"kalebars"
kinda goes with the current color scheme we have, green.
Chris Reeves
@evs-chris
Feb 09 2018 22:04
that's probably already a thing, though 😂
Paul Maly
@PaulMaly_twitter
Feb 09 2018 22:05
Joseph
@fskreuz
Feb 09 2018 22:08
greens - vue, blues - windows/react, purples - discord/twitch/viber, pink - aurelia/ampersand, oranges - codeigniter/laravel, yellow - the JS logo.
Paul Maly
@PaulMaly_twitter
Feb 09 2018 22:09
pink ? )))
oh, I see
Joseph
@fskreuz
Feb 09 2018 22:11
i'm looking at the US palette
Paul Maly
@PaulMaly_twitter
Feb 09 2018 22:11
ractive-logojs-4-100.png
Joseph
@fskreuz
Feb 09 2018 22:12
The "JS" is washed out. Try the same font so it's thicker, and color it black.
Paul Maly
@PaulMaly_twitter
Feb 09 2018 22:13
maybe we don't need JS at all ?
Joseph
@fskreuz
Feb 09 2018 22:15
But what goes on the grey fold? That's unless you turn the logo into a (wait for iiiit)... purple square, with round corners. :joy:
Paul Maly
@PaulMaly_twitter
Feb 09 2018 22:16
And "R" at center ?
Great! It's awesome idea! Best logo ever!
:+1:
Joseph
@fskreuz
Feb 09 2018 22:19
One thing to take into account: Firefox and Opera can theme their tab bar black. You wouldn't want a favicon that drowns in that black. Currently... Github's and Gitter's do. :D
Screen Shot 2018-02-09 at 5.20.50 PM.png
Mac's traffic light buttons stand out greatly tho :grin: