Re: [web-devel] statically compiled css

On Thu, Aug 5, 2010 at 11:33 PM, Mark Bradley
I have often wondered "OK haml implemented now what about sass". Michael Snoyman what is your opinions on sass? Would a sass inspired syntax like you did with the haml->hamlet fit in well and if so, as it often best to keep styles separate, could a quasi quoted language live in in a separate haskell module and then at run time it recreates the separate css files on first launch? Thanks Tim Matthews

On Thu, Aug 5, 2010 at 9:41 AM, Tim Matthews
I have often wondered "OK haml implemented now what about sass". Michael Snoyman what is your opinions on sass? Would a sass inspired syntax like you did with the haml->hamlet fit in well and if so, as it often best to keep styles separate, could a quasi quoted language live in in a separate haskell module and then at run time it recreates the separate css files on first launch?
A wholly statically-verified-by-the-compiler Web framework?! We are going to avoid success at all costs even more, I'd say. ;-) Cheers! -- Felipe.

On Thu, Aug 5, 2010 at 3:51 PM, Felipe Lessa
On Thu, Aug 5, 2010 at 9:41 AM, Tim Matthews
wrote: I have often wondered "OK haml implemented now what about sass". Michael Snoyman what is your opinions on sass? Would a sass inspired syntax like you did with the haml->hamlet fit in well and if so, as it often best to keep styles separate, could a quasi quoted language live in in a separate haskell module and then at run time it recreates the separate css files on first launch?
A wholly statically-verified-by-the-compiler Web framework?! We are going to avoid success at all costs even more, I'd say. ;-)
I hope you mean *fail* to avoid success at all costs ;)
Michael

On Thu, Aug 5, 2010 at 3:41 PM, Tim Matthews
On Thu, Aug 5, 2010 at 11:33 PM, Mark Bradley
wrote: but CSS type checking might be possible within hamlet.
I have often wondered "OK haml implemented now what about sass". Michael Snoyman what is your opinions on sass? Would a sass inspired syntax like you did with the haml->hamlet fit in well and if so, as it often best to keep styles separate, could a quasi quoted language live in in a separate haskell module and then at run time it recreates the separate css files on first launch?
Tim and Mark, Firstly, let me come clean about something: I got really lucky with Hamlet ;). I'd never used Haml before, and was planning on writing a templating system. I saw the Haml syntax, thought it might be easy to implement, and everything turned out for the best. (Actually, first I thought of the name Hamlet and then decided I *had* to base my templating system on a Haml syntax, but that's beside the point ;)). Anyway, regarding sass: I have no idea. I've never used it, and have looked at it even less than I had looked at Haml. It has always seemed like it didn't give enough bang-for-the-buck versus plain CSS, but if we can get static typing out of it, that it's *definitely* worth it. So the real question: how can we get static typing for CSS? And more importantly, what would that mean? It seems that it really applies to specifically two issues: ids and class names. Perhaps the right approach here is to allow Yesod to generate these names automatically; given the Widget framework, something along the lines of: myWidget = do className <- newIdent -- yes, addStyle currently uses Hamlet templates, with the release of blaze-builder, that will probably change addStyle [$hamlet|p.$className${color:red}|] addBody [$hamlet|%p.$className$ Red Text|] There's also the approach of having a datatype for the CSS classes: data MyClassNames = Red myWidget = do addStyle [$hamlet|p.$Red${color:red}|] addBody [$hamlet|%p.$Red$ Red Text|] Or if we decide to create a sass quasi-quoter: data MyClassNames = Red myWidget = do addStyle [$sass| .... whatever this looks like |] addBody [$hamlet|%p.$Red$ Red Text|] This is really just a random collection of thoughts I have on the topic, I haven't really thought anything out fully. Michael

On Thu, Aug 5, 2010 at 3:41 PM, Tim Matthews
On Thu, Aug 5, 2010 at 11:33 PM, Mark Bradley
wrote: but CSS type checking might be possible within hamlet.
I have often wondered "OK haml implemented now what about sass". Michael Snoyman what is your opinions on sass? Would a sass inspired syntax like you did with the haml->hamlet fit in well and if so, as it often best to keep styles separate, could a quasi quoted language live in in a separate haskell module and then at run time it recreates the separate css files on first launch?
After looking into sass a little bit, I've decided I like it ;). I see the following benefits of implementing something sass-like in Haskell via quasi-quotation:
* Compile-time guarantee of well-formedness. * The speed benefits of blaze-builder. Of course, this will still be slower than serving a static file. * Ability to use the same Haskell variables for both Hamlet and CSS. I've started a new repo on Github[1]; I'm tentatively calling the project "stylish". So far, I've gotten a quasi-quoter that handles nesting working, and it's all built on top of blaze-builder. Here's some design decisions that are up for grabs: * I think the older sass syntax (whitespace sensitive) is a better call than the newer scss syntax (a superset of CSS). It fits in better with Hamlet and looks more like Haskell code. * I'm not planning on implementing variable declarations within a Stylish template; instead, it will use Haskell variables like Hamlet. * I think mixins could be an awesome feature, but I think they'll be implemented much closer to how embedding of templates works in Hamlet. I'm thinking there will be a separate stylishMixin quasi-quoter. * Sass has special support for colors and unit measurements. I think we could provide the same thing with Haskell datatypes. Another thing to consider is just throwing this in with Hamlet; once blaze-html 0.2 is released and is based on blaze-builder, Stylish won't be adding any extra dependencies to Hamlet. I also think that the three forms of interpolation in Hamlet ($$, @@ and ^^) make equals sense in Stylish: just imagine using url(@myUrl@) and not having to guess how many parent directories to ascend. Michael [1] http://github.com/snoyberg/stylish

On 6 August 2010 09:19, Michael Snoyman
After looking into sass a little bit, I've decided I like it ;). I see the following benefits of implementing something sass-like in Haskell via quasi-quotation:
* Compile-time guarantee of well-formedness. * The speed benefits of blaze-builder. Of course, this will still be slower than serving a static file. * Ability to use the same Haskell variables for both Hamlet and CSS.
I've started a new repo on Github[1]; I'm tentatively calling the project "stylish".
This sounds pretty interesting. I wrote a Ruby tool called Stylish [1] a couple of years ago to solve a similar set of problems, and have occasionally wondered about rewriting it in Haskell. I look forward to seeing what you come up with. One potentially useful feature is generating code that requires browser prefixes (-webkit-border-radius etc.). There's also potential for generating minified versions of the code, concatenating multiple stylesheets etc.—it's a lot easier to do this stuff if you can programmatically manipulate the stylesheet at run-time. Embedding assets (graphics) as data URIs is another thing; have a look at how something like Jammit [3] does this. There's also a Firefox and Thunderbird extension [2] called Stylish. Obviously you're free to call your project whatever you wish; I just thought I should let you know. Benedict. [1] http://ionfish.github.com/stylish [2] http://userstyles.org/stylish [3] http://documentcloud.github.com/jammit/#embedding

On Fri, Aug 6, 2010 at 12:28 PM, Benedict Eastaugh
On 6 August 2010 09:19, Michael Snoyman
wrote: After looking into sass a little bit, I've decided I like it ;). I see the following benefits of implementing something sass-like in Haskell via quasi-quotation:
* Compile-time guarantee of well-formedness. * The speed benefits of blaze-builder. Of course, this will still be slower than serving a static file. * Ability to use the same Haskell variables for both Hamlet and CSS.
I've started a new repo on Github[1]; I'm tentatively calling the project "stylish".
This sounds pretty interesting. I wrote a Ruby tool called Stylish [1] a couple of years ago to solve a similar set of problems, and have occasionally wondered about rewriting it in Haskell. I look forward to seeing what you come up with.
One potentially useful feature is generating code that requires browser prefixes (-webkit-border-radius etc.). There's also potential for generating minified versions of the code, concatenating multiple stylesheets etc.—it's a lot easier to do this stuff if you can programmatically manipulate the stylesheet at run-time. Embedding assets (graphics) as data URIs is another thing; have a look at how something like Jammit [3] does this.
As far as the border-radius kind of stuff: the approach I'm taking to mixins should make it possible to write a plain old Haskell function to output multiple border-radius statements. I might even include such a mixin in the main package.
Regarding concatenating stylesheets: I believe that would have to be handled at the level *above* Stylish; Yesod, for example, automatically concatenates all style statements added via the addStyle function. There's also a Firefox and Thunderbird extension [2] called Stylish.
Obviously you're free to call your project whatever you wish; I just thought I should let you know.
I'm open to naming suggestions. Here's a few other ideas I'd had:
* sasslet: I don't really like too much, but makes clear the connection to Hamlet and Sass. * csser/cssar: pronounced "Caesar," might give Shakespeare fans something to chuckle at. As it stands, I'm leaning fairly strongly towards including Stylish in the Hamlet package. Michael

Quick update: I'm including the "Stylish" code in the hamlet package now,
and renaming it to "Camlet" (CSS-hamlet). I'm also including something
called "Jamlet", which doesn't do much besides variable interpolation. As
you might guess, it's for Javascript. I mention it at the end of my most
recent blog post[1].
Michael
[1] http://www.snoyman.com/blog/entry/typesafe-runtime-hamlet/
On Fri, Aug 6, 2010 at 1:25 PM, Michael Snoyman
On Fri, Aug 6, 2010 at 12:28 PM, Benedict Eastaugh
wrote: On 6 August 2010 09:19, Michael Snoyman
wrote: After looking into sass a little bit, I've decided I like it ;). I see the following benefits of implementing something sass-like in Haskell via quasi-quotation:
* Compile-time guarantee of well-formedness. * The speed benefits of blaze-builder. Of course, this will still be slower than serving a static file. * Ability to use the same Haskell variables for both Hamlet and CSS.
I've started a new repo on Github[1]; I'm tentatively calling the project "stylish".
This sounds pretty interesting. I wrote a Ruby tool called Stylish [1] a couple of years ago to solve a similar set of problems, and have occasionally wondered about rewriting it in Haskell. I look forward to seeing what you come up with.
One potentially useful feature is generating code that requires browser prefixes (-webkit-border-radius etc.). There's also potential for generating minified versions of the code, concatenating multiple stylesheets etc.—it's a lot easier to do this stuff if you can programmatically manipulate the stylesheet at run-time. Embedding assets (graphics) as data URIs is another thing; have a look at how something like Jammit [3] does this.
As far as the border-radius kind of stuff: the approach I'm taking to mixins should make it possible to write a plain old Haskell function to output multiple border-radius statements. I might even include such a mixin in the main package.
Regarding concatenating stylesheets: I believe that would have to be handled at the level *above* Stylish; Yesod, for example, automatically concatenates all style statements added via the addStyle function.
There's also a Firefox and Thunderbird extension [2] called Stylish.
Obviously you're free to call your project whatever you wish; I just thought I should let you know.
I'm open to naming suggestions. Here's a few other ideas I'd had:
* sasslet: I don't really like too much, but makes clear the connection to Hamlet and Sass. * csser/cssar: pronounced "Caesar," might give Shakespeare fans something to chuckle at.
As it stands, I'm leaning fairly strongly towards including Stylish in the Hamlet package.
Michael

On Sun, Aug 8, 2010 at 9:20 PM, Michael Snoyman
Quick update: I'm including the "Stylish" code in the hamlet package now, and renaming it to "Camlet" (CSS-hamlet). I'm also including something called "Jamlet", which doesn't do much besides variable interpolation. As you might guess, it's for Javascript. I mention it at the end of my most recent blog post[1].
Michael
While It's just a name and not really important: hamlet was haml so I first imagined sasset, sasslet or another name from one of the works of Shakespeare but I then really liked stylish as I thought it would tell that something with solid foundations and theory could still appear, hip and pretty. What is important though is the code. This is absolutely great and success just keeps getting harder to avoid. Thanks a lot, Tim Matthews

On Sun, Aug 8, 2010 at 1:03 PM, Tim Matthews
On Sun, Aug 8, 2010 at 9:20 PM, Michael Snoyman
wrote: Quick update: I'm including the "Stylish" code in the hamlet package now, and renaming it to "Camlet" (CSS-hamlet). I'm also including something called "Jamlet", which doesn't do much besides variable interpolation. As you might guess, it's for Javascript. I mention it at the end of my most recent blog post[1].
Michael
While It's just a name and not really important: hamlet was haml so I first imagined sasset, sasslet or another name from one of the works of Shakespeare but I then really liked stylish as I thought it would tell that something with solid foundations and theory could still appear, hip and pretty.
What is important though is the code. This is absolutely great and success just keeps getting harder to avoid.
This is by no means a final decision; I'm open to being convinced that other names are better. But I'll point out the main reason for the Camlet/Jamlet name choice: easy to remember and type. I found "stylish" to be much harder to get out than "camlet"; that might just be because I'm so used to hamlet already, but that's exactly my goal here: make these three templating systems work together nicely to make the developers life a little bit easier.
Michael

On Sun, Aug 8, 2010 at 4:00 AM, Michael Snoyman
On Sun, Aug 8, 2010 at 1:03 PM, Tim Matthews
wrote: On Sun, Aug 8, 2010 at 9:20 PM, Michael Snoyman
wrote: Quick update: I'm including the "Stylish" code in the hamlet package now, and renaming it to "Camlet" (CSS-hamlet). I'm also including something called "Jamlet", which doesn't do much besides variable interpolation. As you might guess, it's for Javascript. I mention it at the end of my most recent blog post[1]. Michael
While It's just a name and not really important: hamlet was haml so I first imagined sasset, sasslet or another name from one of the works of Shakespeare but I then really liked stylish as I thought it would tell that something with solid foundations and theory could still appear, hip and pretty.
What is important though is the code. This is absolutely great and success just keeps getting harder to avoid.
This is by no means a final decision; I'm open to being convinced that other names are better. But I'll point out the main reason for the Camlet/Jamlet name choice: easy to remember and type. I found "stylish" to be much harder to get out than "camlet"; that might just be because I'm so used to hamlet already, but that's exactly my goal here: make these three templating systems work together nicely to make the developers life a little bit easier. Michael _______________________________________________ Haskell-Cafe mailing list Haskell-Cafe@haskell.org http://www.haskell.org/mailman/listinfo/haskell-cafe
CaSSius and JSaesar? Alex

On Sun, Aug 8, 2010 at 3:15 PM, Alexander Dunlap
On Sun, Aug 8, 2010 at 4:00 AM, Michael Snoyman
wrote: On Sun, Aug 8, 2010 at 1:03 PM, Tim Matthews
wrote: On Sun, Aug 8, 2010 at 9:20 PM, Michael Snoyman
wrote: Quick update: I'm including the "Stylish" code in the hamlet package now, and renaming it to "Camlet" (CSS-hamlet). I'm also including something called "Jamlet", which doesn't do much besides variable interpolation. As you might guess, it's for Javascript. I mention it at the end of my most recent blog post[1]. Michael
While It's just a name and not really important: hamlet was haml so I first imagined sasset, sasslet or another name from one of the works of Shakespeare but I then really liked stylish as I thought it would tell that something with solid foundations and theory could still appear, hip and pretty.
What is important though is the code. This is absolutely great and success just keeps getting harder to avoid.
This is by no means a final decision; I'm open to being convinced that other names are better. But I'll point out the main reason for the Camlet/Jamlet name choice: easy to remember and type. I found "stylish" to be much harder to get out than "camlet"; that might just be because I'm so used to hamlet already, but that's exactly my goal here: make these three templating systems work together nicely to make the developers life a little bit easier. Michael _______________________________________________ Haskell-Cafe mailing list Haskell-Cafe@haskell.org http://www.haskell.org/mailman/listinfo/haskell-cafe
CaSSius and JSaesar?
I'd rather go with Julius at that point.
Alex _______________________________________________ Haskell-Cafe mailing list Haskell-Cafe@haskell.org http://www.haskell.org/mailman/listinfo/haskell-cafe
-- Work is punishment for failing to procrastinate effectively.

OK, I declare myself officially unable to make a decision on this one:
there's just too many good options ;). I beseech the community to aid me in
my plight, by taking a survey on the names available[1].
Michael
[1]
https://spreadsheets.google.com/viewform?formkey=dHVOU2p6OVRkcWVQVG10d01OWk8...
On Mon, Aug 9, 2010 at 8:19 AM, wren ng thornton
Alexander Dunlap wrote:
CaSSius and JSaesar?
+1 for Cassius.
-- Live well, ~wren
_______________________________________________ Haskell-Cafe mailing list Haskell-Cafe@haskell.org http://www.haskell.org/mailman/listinfo/haskell-cafe

@Michael: Have you seen the JSMacro package on hackage? I think it might be
a better fit as it adds some nice syntactic goodies to JS in addition to
variable interpolation.
Cheers.
~Liam
On 9 August 2010 22:59, Michael Snoyman
OK, I declare myself officially unable to make a decision on this one: there's just too many good options ;). I beseech the community to aid me in my plight, by taking a survey on the names available[1].
Michael
[1] https://spreadsheets.google.com/viewform?formkey=dHVOU2p6OVRkcWVQVG10d01OWk8...
On Mon, Aug 9, 2010 at 8:19 AM, wren ng thornton
wrote: Alexander Dunlap wrote:
CaSSius and JSaesar?
+1 for Cassius.
-- Live well, ~wren
_______________________________________________ Haskell-Cafe mailing list Haskell-Cafe@haskell.org http://www.haskell.org/mailman/listinfo/haskell-cafe
_______________________________________________ Haskell-Cafe mailing list Haskell-Cafe@haskell.org http://www.haskell.org/mailman/listinfo/haskell-cafe

On Mon, Aug 9, 2010 at 4:14 PM, Liam O'Connor
@Michael: Have you seen the JSMacro package on hackage? I think it might be a better fit as it adds some nice syntactic goodies to JS in addition to variable interpolation.
I assume you're referring to JMacro, correct? I wasn't able to get it to build at the moment, and even if it *did* build, it has a lot of dependencies, which isn't something I'd like to subject Hamlet users to. Also, probably the most important feature for me in the Javascript templating will be type-safe URLs, which I don't think JMacro supports. Also, I thought I'd publish the results of the naming survey[1]. Summary: overwhelming support for Cassius, Julius and Mustard. I thought I'd also publish some of the best comments here, please feel free to claim them: Thank you for replacing some layers of brittle duck tape with good static duct type :) I hope you don't end up with a mismatch like Camlet and Jsaesar; that would be awkward. Also, I just noticed this, but Camlet might lead to some confusion with the Caml family of languages. I bathe in the blood of my enemies; eating it would be disgusting! I'm just running a few compiles to make sure everything went fine, and will then be pushing to github. Michael [1] http://spreadsheets.google.com/pub?key=0Aj9dwvcPwQ9ldHVOU2p6OVRkcWVQVG10d01OWk8yU2c&hl=en&output=html
participants (9)
-
Alexander Dunlap
-
Benedict Eastaugh
-
Felipe Lessa
-
Gábor Lehel
-
Liam O'Connor
-
Lyndon Maydwell
-
Michael Snoyman
-
Tim Matthews
-
wren ng thornton