These are chat archives for japgolly/scalacss

9th
Mar 2015
David Barri
@japgolly
Mar 09 2015 00:38
Awesome thanks @cwitty , I'll take a look at that tonight.
David Barri
@japgolly
Mar 09 2015 00:44

Holy shit!! FR-01 is solvable with perfect type-safety!
experiment/named_children.scala#L33-L42

Note you won't have to use this feature (the same will be accomplishable in more mundane ways) but if you want to, you will have significantly safer styles. It will use the compiler to ensure that

  1. A style that needs to style children does so and isn't partially applied, (at least in ignorance or mistakenly).
  2. You don't apply the wrong style to the wrong child (eg. giving <label> the checkbox's style and vica-versa)
  3. You don't add a new child style later and forget to apply it.
This is something I've never seen possible with any other CSS library. Some will make sure your CSS keys are ok, but this feature can prevent high-level visual bugs. This is going to be awesome!
Otto Chrons
@ochrons
Mar 09 2015 08:06
as long as you don't get carried away with all the shapeless and scalaz features :stuck_out_tongue_winking_eye:
David Barri
@japgolly
Mar 09 2015 08:09
Don't worry, I won't use either just for the sake of it if that's what you mean. :)
Status update: Spent about 75% of my day on this today and it's come along very well. All the requirements are satisfied except the composition ones. It's messy but if you're interested you can get a feel for it in experiment/main.scala.
Otto Chrons
@ochrons
Mar 09 2015 08:10
are the CSS defs going to be very scalatags-like or something else?
David Barri
@japgolly
Mar 09 2015 08:10
This could be finished and usage next week!
Not sure what you mean Otto. But if you're asking about syntax or style that will come last. I have no answers yet.
Also I would be interested to here people's opinions and needs on composition, specifically this bit here.
Otto Chrons
@ochrons
Mar 09 2015 08:14
just a random example, what would this style definition look like in ScalaCSS,
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
David Barri
@japgolly
Mar 09 2015 08:14
Those ideas might not be the clearest. Funny story: I haven't eaten in 23 hours and I did an hour's exercise in the hot sun at lunch today. Yeah, I'm stupid.
Otto Chrons
@ochrons
Mar 09 2015 08:15
luckily in Finland we are protected from this concept of "hot sun" all year around :)
David Barri
@japgolly
Mar 09 2015 08:15
"protected" <-- hehe
Um, Otto, Otts! Like I said if you're asking about syntax or style that will come last. I have no answers yet. :)
Otto Chrons
@ochrons
Mar 09 2015 08:16
most of the year it can be generalized to "sun" :)
David Barri
@japgolly
Mar 09 2015 08:17
Oh I can answer one aspect now,
that whole thing you posted will be considered one "style".
Otto Chrons
@ochrons
Mar 09 2015 08:18
as it happens, the font-smoothing provides a good example of browser specific definition that's not only the name of the CSS rule but also the contents
David Barri
@japgolly
Mar 09 2015 08:18
So you would have val glyphIcon = ... and you will eventually apply it in scalajs-react with <.div(style := Styles.glyphIcon or similar.
not only the name of the CSS rule but also the contents ← what do you mean by that?
Otto Chrons
@ochrons
Mar 09 2015 08:19
antialiased vs grayscale
David Barri
@japgolly
Mar 09 2015 08:20
It seems like just a normal CSS key to me.
CSS value type-safety is out-of-scope for now (possibly later).
Otto Chrons
@ochrons
Mar 09 2015 08:20
yea, but if we would have a style rule font-smoothing that would expand to one of these depending on the underlying browser, it would have to use different value in addition to rule name
David Barri
@japgolly
Mar 09 2015 08:22
At the moment, keys are not keys; they are Environment => List[String], we could do a similar thing for values...
What would be simplest would be to have two separate keys for your case.
Like the auto-expansion thing will be there when you need it, but you don't have to use it all the time.
Environment => List[(String, String)] could provide different key-value pairs for a logical attribute depending on the platform.
Otto Chrons
@ochrons
Mar 09 2015 08:32
this is a pretty common pattern in many CSSes, so it would be nice to have a support for it,
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}
basically being able to define only the "standard" rule, which would then expand on-demand to browser specific
which would mean that the transition rule would have to parse its content and produce the webkit variant when needed
this is probably one of the most extreme cases, where IE requires a totally different approach
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
  background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  background-repeat: repeat-x;
}
David Barri
@japgolly
Mar 09 2015 09:01
Wow, that's crazy!
It's awesome that you're sharing this, thanks! I wouldn't come across this kind of stuff normally. Now that it's early stages I'll bake in support for these cases.
Otto Chrons
@ochrons
Mar 09 2015 09:03
these were all collected from bootstrap.css https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css :)
David Barri
@japgolly
Mar 09 2015 09:03
Oh that's from bootstrap...
Does it need to be specified 4 times? Can you not all put those values together?
Like background-image: -webkit-linear-gradient(...) -o-linear-gradient(...) etc;
Otto Chrons
@ochrons
Mar 09 2015 09:04
no, the CSS takes the last valid one
David Barri
@japgolly
Mar 09 2015 09:04
Interesting. Ok, I'll revisit those 2 examples specifically tomorrow!
Otto Chrons
@ochrons
Mar 09 2015 09:07
I suppose bootstrap's CSS is a good source for all kinds of typical usage patterns
although hopefully in a smart inline CSS, you don't need definitions like this anymore :)
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}
Per Wiklander
@PerWiklander
Mar 09 2015 10:58
@ochrons i think you should at least look at bootstrap's less source. No one wants to write the css that comes out the other end.
David Barri
@japgolly
Mar 09 2015 20:37
@PerWiklander Great idea
So the examples by @ochrons are like this in the LESS source:
modal.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}

.carousel-control.left {
  #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
}

> .table-bordered,
  > .table-responsive > .table-bordered {
    border: 0;
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th:first-child,
        > td:first-child {
          border-left: 0;
        }
        > th:last-child,
        > td:last-child {
          border-right: 0;
        }
      }
    }
Otto Chrons
@ochrons
Mar 09 2015 20:41
bit LESS repetitive :)
David Barri
@japgolly
Mar 09 2015 20:44
That SASS true a statement as I've ever heard :D
Otto Chrons
@ochrons
Mar 09 2015 20:56
but yea, that's a good benchmark on what the input should look like and what the system should output
k3d3
@k3d3
Mar 09 2015 20:58
oh jeez, the css puns
Matt Hughes
@matthughes
Mar 09 2015 21:07
it borders on insanity
k3d3
@k3d3
Mar 09 2015 21:10
it's almost diSCSSting
David Barri
@japgolly
Mar 09 2015 21:28

it borders on insanity

:laughing:

Matt Hughes
@matthughes
Mar 09 2015 21:29
anybody going to scaladays next week?
David Barri
@japgolly
Mar 09 2015 21:29
@ochrons Yeah, it will be similarly easy
Not I. I live on exiled half of the world.
Otto Chrons
@ochrons
Mar 09 2015 21:30
ofcozz LESS is concerned with a global CSS, and inline styles are by definition more local
David Barri
@japgolly
Mar 09 2015 21:30
Let's see if this work... 5a88c10082eecb0a1fd78408eb99a6d174ee5883
Matt Hughes
@matthughes
Mar 09 2015 21:30
you do have long flights to most places
David Barri
@japgolly
Mar 09 2015 21:32
Ok, well I've changed CSS keys to be Environment => Value => List[CssAttr]. They will have a lot of power to generate all kinds of crazy crap if they need to, and any similarly crazy end-user will to. japgolly/scalacss@5a88c10
@matthughes Asia and NZ are the only places I can go in less than 10 hours of flight :(
Matt Hughes
@matthughes
Mar 09 2015 21:33
well if there's ever a scala conf in australia and I can convince my boss to pay, i'm there
David Barri
@japgolly
Mar 09 2015 21:33
Going mostly north, it takes about 5 hours just to get out of Australia.
Sweeet
Matt Hughes
@matthughes
Mar 09 2015 21:34
lots of ifs though :)
David Barri
@japgolly
Mar 09 2015 21:34
I'd probably meet you outside in the shadows though. Conferences are expensive and I'm self-employed and not even trying to make money at the moment.
Otto Chrons
@ochrons
Mar 09 2015 21:34
so, what did your ancestors do to get sent there? :stuck_out_tongue_winking_eye:
David Barri
@japgolly
Mar 09 2015 21:35
hehe, I guess everyone knows the story with UK using AU as a big jail
Otto Chrons
@ochrons
Mar 09 2015 21:36
you know, we've been processing some Australian genealogy records recently, any names I should check out? :)
David Barri
@japgolly
Mar 09 2015 21:36
Really? You have that stuff?
Alberto Paro
@aparo
Mar 09 2015 21:36
I made an Australian Tour during my honeymoon
Otto Chrons
@ochrons
Mar 09 2015 21:37
current dataset is Northern Territory and Western Australia
so any relatives in Perth? :)
David Barri
@japgolly
Mar 09 2015 21:38
My dad's side is easy, he illegally ran away from his ship back in the 70's lol. My mum's side... parts of that are at least 4th gen Aussie (which is amazing over here - we're very hetrogenious)
LOL! NT!
NT = desert. WA = desert and mines.
Otto Chrons
@ochrons
Mar 09 2015 21:38
the NT set is very small :)
David Barri
@japgolly
Mar 09 2015 21:39
No, no relatives on that side of the country. NT has a lot of Aborigines. I doubt they'd be in the data set.
Lots of tribes still exist I think.
Otto Chrons
@ochrons
Mar 09 2015 21:40
dunno, quite a lot of strange names
David Barri
@japgolly
Mar 09 2015 21:40
@aparo When was that?
Alberto Paro
@aparo
Mar 09 2015 21:40
I remember that NT is also partially “undiscovered”.
Otto Chrons
@ochrons
Mar 09 2015 21:40
last year we did a bit of Queensland as well
and probably also NSW, cannot remember for sure
Alberto Paro
@aparo
Mar 09 2015 21:41
Wonderful, I was in Melbourne, Adelaide, Kangoroo Island, Sydney, Ayers Rock and Cains
David Barri
@japgolly
Mar 09 2015 21:41
Oh cool. My local family tree would be QLD,NSW,VIC. Maybe some SA too.
@aparo Wow! You've seen more of this place than I have! : D I hope you had fun. Coffee in Melbourne is very nice.
Alberto Paro
@aparo
Mar 09 2015 21:45
Yes, my wife never went out from Italy. When we were in Melbourne at the morning, she entered in a Bar and ordered the breakfast in speaking in Italian. I was smiling, but the barman was Italian too and he understood the order!!
Otto Chrons
@ochrons
Mar 09 2015 21:45
:)
@aparo you know Fausto Giunchiglia right? I was in an EU project for 3 years with him and lot of other Italians :)
Otto Chrons
@ochrons
Mar 09 2015 21:50
and probably also Piero?
Alberto Paro
@aparo
Mar 09 2015 21:52
Yes I know very well, Fausto Giunchiglia. I helped and discussed with it some projects
I don’t know Piero
Otto Chrons
@ochrons
Mar 09 2015 21:53
small world :)
Alberto Paro
@aparo
Mar 09 2015 21:54
I saw Fausto in November. He was collecting funds to make a project for a new start-up
Otto Chrons
@ochrons
Mar 09 2015 21:54
I was in Como end of Nov for the final project meeting :)
Alberto Paro
@aparo
Mar 09 2015 21:55
Good, I’m in Solaro, North Milan, 20km from Como. I studied at Politecnico of Milan in Como.
Do you means Piero Fraternali?
Otto Chrons
@ochrons
Mar 09 2015 21:56
yea
Alberto Paro
@aparo
Mar 09 2015 21:57
It was my professor. He tries to sell Webratio a good tool to prototype. But it lacks a strong grip on more complex solution. Also I love NoSQL solution.
I’m not against SQL. But the database must consider mutable and immutable data :-)
Otto Chrons
@ochrons
Mar 09 2015 21:59
been running on Cassandra for the past 3-4 years and now looking into graph DBs
@japgolly have you considered making the CSS stuff compatible with non-web stuff, like native mobile platforms?
that is, to express styling for UI components in general
many frameworks use CSS-like styling already (like Qt)
or something like http://nativecss.com/
android themes are also CSSish,
<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>
I have a bit of a hidden agenda here, working on an OpenGL based UI for mobile apps :)
David Barri
@japgolly
Mar 09 2015 23:37
@ochrons I have too much to do on my main project (which I've paused for this) so I'm just going to focus on CSS (platform-agnostically) then get back to it. If you wanted to add a layer of abstraction such that non-CSS styling were possible, I'd probably be happy to help, merge, maintain, but I wouldn't want the CSS side to suffer. And that would be a later conversation :)
Step 1) Create the safest CSS library in the world! Should be done by next week :D
Step 2) Maybe get compile-time key conflict handling when composing/merging styles. Maybe.
FYI experimentation/design is done. I'm going to start on this properly now. You can see what the low-level data structures will look like in experiment/main.scala. There will be a high-level interface on top to make usage as nice, easy and concise as LESS/SASS is.