11 ms·
Experimenting a new syntax to write SVG
- nielsbot 4y agoAnyone making a new syntax for writing HTML/XML should at least look at HAML. I really wish I could use HAML for my Typescript React projects.
- BMc2020 4y agoSeems easy enough: HAML structure is really easy to understand. It attempts to strip out as much of the annoying HTML repetition as possible. For example to write paragraph tag you could use: %p This is HTML paragraph. HAML will convert that to: <p>This is HTML paragraph</p> You can also pass more attributes to the tag you want: .banners(id="top-banner", title="Your ad here") Your text here Will be rendered like this: <div id="top-banner" class="banners" title="Your ad here">Your text here</div>
- vbezhenar 4y agoYou don't need to close <p> tag, it closes automatically. Also supporting something as simple as </> (close current tag) would significantly reduce HTML boilerplate without inventing new language. I agree that shortcuts for id and class are nice too. My proposal: <div.content> <form#login> <input name=username> <input name=password> </> </>
- tannhaeuser 4y agoThat's almost SGML, except for the short form syntax for IDs: <div content> <form id=login> <input name=username> <input name=password> </> </> Note though that including markup declarations for enumerating custom class names and for the input element having declared content EMPTY is required (the latter declaration actually part of HTML DTDs [1]): <!attlist div class (content) #implied> <!element input - - empty> Moreover, in SGML you can have tag omission/inference, like on the p element or the html element itself. Your "</>" Close current tag syntax is actually part of SGML (as is "<>" which is treated as start element tag for the most recently closed element), known as FEATURES MINIMIZE SHORTTAG ENDTAG EMPTY and FEATURES MINIMIZE SHORTTAG STARTTAG EMPTY features, resp. ([2]). [1]: http://sgmljs.net/docs/w3c-html52-dtd.html http://sgmljs.net/docs/w3c-html52-dtd.html [2]: http://sgmljs.net/docs/sgmlrefman.html http://sgmljs.net/docs/sgmlrefman.html
- pilaf 4y ago.banners(id="top-banner", title="Your ad here") Minor correction: the comma there isn't valid Haml syntax, when you use parenthesis for attributes it expects the same format as inside a regular HTML tag (i.e. attributes separated by whitespace). But you can also rewrite that as: #top-banner.banners(title="Your ad here")
- abathur 4y agoIDK how closely HAML hews to valid HTML elements/attrs/etc., but DMark (https://denisdefreyne.github.io/d-mark/ https://denisdefreyne.github.io/d-mark/) is syntactically similar and very extensible.
- Yahivin 4y agoTake a look at Jadelet. It also supports SVG. https://github.com/STRd6/jadelet https://github.com/STRd6/jadelet
- FractalHQ 4y agoI use Pug for markup in my Svelte + TS projects and I adore it: https://github.com/pugjs/pug https://github.com/pugjs/pug
- Timon3 4y agoI love Pug for Vue projects, especially when writing SVG components. Way cleaner markup, feels more like the other languages in my stack, and integrates perfectly with modern frameworks!
- kmeisthax 4y agoYeah, that was my first thought. The author thinks they are extending CSS, but actually reinvented HAML with CSS syntax. CSS as a language is supposed to apply to an existing DOM tree, not synthesize an entirely new one. The selector syntax alone is too ambiguous to actually do that, because it is a search lookup, not a tree structure (even though SASS/LESS can make it look like one). If you specify, say, three `svg path` selectors with rules in them, you aren't asking for three separate paths in an SVG node. You're asking for all paths in all SVG elements, including grandchildren and great-grandchildren, to be handed all of the rules in all matching selectors. If we wanted to make this idea work while not redefining CSS selectors, we'd have to ban the descendent combinator (because it would create infinite node hierarchies), and use the child combinator and nth-child everywhere exclusively. So instead of `svg path` you'd have `svg > path:nth-child(1)`. And probably a `::synthesize()` selector for saying, "yes I want this CSS rule to create a DOM node".
- melony 4y agoQml cough
- corytheboyd 4y ago> Nowadays, though, it's still possible for HTML to grow in two dimensions if using tools like Tailwind, where the long predefined class names are kind of extended attributes to HTML elements. It's so infuriating when people say this against Tailwind. Nothing is forcing you to leave giant lists of class names directly on the HTML tags, the documentation very clearly states you can use the provided @apply function to move things into CSS. Throwing giant lists of class names down to prototype then refactoring is incredibly efficient, but it's not like you just shit out your first idea to production in any other context.
- anderskaseorg 4y agoThe post expresses no opinion on whether placing Tailwind class names directly on the HTML tags is better or worse than placing them in CSS. It’s merely saying that the mini-language of Tailwind class names themselves (regardless of where they are placed) is a new syntactic dimension compared to unstyled HTML—in the same way that CSS is a new syntactic dimension compared to unstyled HTML.
- eyelidlessness 4y agoMy god it’s full of ~~JSX~~ s-exprs. Every time I see a declarative expression syntax exploration I’m delighted to see the lisp in it, every single time.
- masklinn 4y agoThe worst part is the entire thing could just be using hiccup and a few helper functions.
- tiffanyh 4y agoOff topic: I love the simplicity of the blog design.
- beachy 4y agoAnd with such speed. I don't think I've ever seen a web page render in 150ms to here over my wireless internet connection. Even a full load of this HN page takes 800ms+, and I think of HN as the benchmark for fast loading.
- stuartd 4y ago+1 for `rebeccapurple` - https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/ https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/
- tobyhinloopen 4y agoI feel like there’s a part missing of that story
- tasty_freeze 4y agoI wasn't close to the story, but I'll try to summarize, as nobody else has posted a reply. Eric Meyer was very active in the html standards community and blogged and promoted html css and firefox extensively, wrote books, etc, and was very well known in the community, perhaps the most well known. At some point his five year old daughter was found to have a terminal illness. He wrote some wrenching blog posts about his struggle knowing she was soon to die, trying to help maintain her innocence of that fact as she continued to get worse, to enjoy the remaining days without getting overwhelmed with grief. Then she died. In honor of Eric's loss and in recognition of his efforts to promote modern web design, they added a name to the css spec of his daughter's favorite color.
- unwind 4y agoThanks! These kinds of details are just awesome to learn, what a great community! Also: am a dad, and there seems to be something wrong with my eyes.
- chrismorgan 4y agoI honestly wonder if it wasn’t also influenced at least a tiny bit by people wanting a decent purple named colour. I know it had always grated with me that pretty much all the other colours were fairly well-represented, but there just wasn’t a good purple, and I regularly use rebeccapurple as a temporary colour, because of its value, not its history. (I’m not suggesting this was a conscious factor in any way, but at the same time it wouldn’t surprise me if in an alternate history where Becca’s favourite colour was green or blue that the entire thing wouldn’t have come to fruition.)
- exabrial 4y agoIf you're going to replace SVG xml, whatever you replace it with is going to need a schema.
- wtetzner 4y agoAs long as the new syntax generates an XML DOM, you should still be able apply any existing schemas to it.
- userbinator 4y agoI agree with the author that SVG is bloated, but why not use something like PostScript, or even the PDF language?
- melony 4y agoForth family languages are too often write-only
- eyelidlessness 4y agoI’m not at all qualified to say whether what they’ve explored is objectively better, but there’s a ton of opportunity to explore the benefits and possibilities of declarative DSLs. New syntax and exploration is awesome. Cross-compiling is pretty common across many ecosystems at this point, so if the underlying tech is superior using it is still an option with whatever expressiveness a new DSL brings. My question (mostly to myself) is why haven’t we embrace this more?
- breck 4y agoHave been watching this for a bit. I feel like this is a few tweaks away from a breakthrough. Excited to follow the progress
- hmcamp 4y agoThank you for sharing.
- deleted 4y ago[deleted]
- abathur 4y agoA bit aside, but while working on a kind of CSS for a different purpose this past year I realized that there's no real distinction* between CSS-the-syntax and CSS-the-spec/rules/properties/selectors/etc. Perpetually blows my mind that there's no great way to describe other lovely uses of its concepts. * I couldn't find one after hours of reading old specs, searching, cold-calling a small number of people involved with the specs, working groups, CSS parsers, etc. Doesn't mean it doesn't exist--but I gave the tree the best shake I could.
- c-smile 4y agoYes, CSS is not a strict "language" unfortunately. prop: a b c / d e f; can be treated in some properties as list: prop: a b (c / d) e f; and some others as prop: (a b c) / (d e f); Same thing for ',' prop: a b c , d; Can be as prop: (a b c) , (d); as: prop: a b (c , d); // e.g. in font property definition. In that sense CSS syntax is a Christmas tree: each member of the family (feature author) adds its own stuff as she sees it. No moderation on that historically.
- travisgriggs 4y agoAhh, CSS. The only thing to come along in my career with computer science and make me feel less guilty about how I abuse the C Preprocessor.
- danielvaughn 4y agoI love this. It's very similar to something I've been working on for a while - a programming language for UI designers. The syntax he's arrived at is quite similar to mine.
- sonicgear1 4y agoLooking forward to it. I also see this as potential syntax that could be translated into html.
- danielvaughn 4y agoYes exactly. My approach was to make everything a component. In each component, you'd define your props (called "variants" in my language), elements, and styles. Something like this: component Square variants color bg: red elements shape square style square width: 100px height: 100px fill: $bg
- nwienert 4y agohttps://youtu.be/HHTYHm6qLFY https://youtu.be/HHTYHm6qLFY Fwiw I don’t think a new language is the right level of abstraction that will gain popularity.
- ognarb 4y agoSounds like QML but without brackets: https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-qml-syntax https://www.qt.io/product/qt6/qml-book/ch04-qmlstart-qml-syn...
- specialist 4y agoAgreed. With a few tweaks, and adding a define & use (simple class prototyping), it's basically VRML-97. Before the X3D goons ganked it with all their XML and XSchema nonsense.
- throwaway4good 4y agoI understand the desire for it but I think this design creates problems of understandability and affordness, concentrating the syntax as much as it is done here. ('Affordness' meaning the language ability to show the programmer exactly what can be constructed.) For example, this piece of code is very short and packs a lot of functionality: path*3 { fill: none; d: @pn(M 5 10 Q 5 5 8 1, M 5 10 Q 4 5 2 4, M 5 10 Q 6 6 8 4); } circle*3 { fill: @pn(yellow, blueviolet, deeppink); cx, cy: @pn(8 1, 2 4, 8 4); r: .5; } But unless you know it by hand. The constructs @pn(...), *3, the codes 8 1, 2 4 ... or M 5 10 Q 5 5 8 1. Are not remotely obvious or intuitive. And it is not obvious what M and Q means? And what can I as programmer write instead? I realize that some of these problems comes from SVG however they are problems none the less.
- aidos 4y agoM (MoveTo) and Q (Quadratic Bézier Curve) are part of the svg spec. They’re drawing commands. I’d agree that pn seems a little obtuse, but I guess I can see what it’s doing. Having worked with svg a lot (we build something sort of in the cad space) I can definitely see the desire for something less terse when you’re defining svgs. We end up generating svg fragments using react, for the most part, which works fairly well.
- throwaway4good 4y agoYes. Those codes are from the SVG spec as is the space vs. comma syntax. But it is really good way to program? Or is something that is done as a compromise between being able to program by hand, and have a format for drawing programs to save their files in without them being silly big.
- aidos 4y agoWell, like it or not that stuff is a) here to stay and b) familiar for people working with this tooling. Personally I find that graphics part pretty easy to read. For comparison here's a sample of a graphics stream from a PDF: Q 9469 1441 m 9549 1433 l 9549 1433 9549 1483 9469 1441 c S q In this context Q means push/save the graphics state and q is pop, but again, it's all very similar.
- yread 4y agoHmm how about going the other way? Making CSS look a bit more like XML
- jwilk 4y agoWhy?
- b3orn 4y agoJust bring back Postscript.
- Noe2097 4y agoWhy going for CSS as a syntactical starting point, if it is to change it so fundamentally that no IDE or existing tools will be able to handle it, and if it is to move away from its "theoretical" purpose of describing style independently from content? Going that way, there are so many (existing) possibilities. Want something that looks like CSS but that has more structure? Use YAML. Preferring braces over spaces to delimit blocks, but don't fancy quotes everywhere? Use Groovy -- you will even be able to write a DSL to generate SVG in an afternoon, with the entire power of the JVM. Don't want anything executable? Forbid it. Refrain from picking a syntax that are not fitting your needs and for a language whose intent is different, you will just call for confusion
- falcor84 4y agoI respectfully disagree. I think it's really nice when a new language reuses existing syntax and allows me to make use of my existing mental structures. As an example, I love it that json is like js, and that js is a bit like C. Even when there are inevitable "false friends" in any new language, it's so nice to have that starting advantage.
- alehlopeh 4y agoFrom the second section of the article, appropriately titled CSS Syntax: > What I love about CSS is its readability. There are no unnecessary quotes around property values even when separated by spaces. And the CSS code always expands from top to bottom if following best practices.
- franciscop 4y agoI just thought about doing this exactly, but for react-three-fiber! In my previous company we did an interesting experiment that worked pretty well internally: https://www.npmjs.com/package/@standard/view https://www.npmjs.com/package/@standard/view
- petecooper 4y ago>I need to make some notes before I forget the details. It's really heartening to read this. As someone who does a lot of troubleshooting by reading, I thank you.
- ognarb 4y agoIt almost feel like QML :)
- stuaxo 4y agoThe restructuring is good, I think it would be good if it could use commas on the right hand side, in the same way as python can do assignment.
- jansan 4y agoNice. Also there is a video where Cassie Evans proposes to write path data in table form, which makes is so much more readable. https://www.youtube.com/watch?v=9qen5CKjUe8 https://www.youtube.com/watch?v=9qen5CKjUe8 For example m78.463 298.38c-17.4 8.1-31.8 21.7-40.8 38.6l75.2 34.9z would become m 78.463 298.38 c -17.4 8.1-31.8 21.7 -40.8 38.6l75.2 34.9 z
- djedr 4y agoNice experiment. I wonder how often do people write SVG by hand? If often then it's definietly a good idea to simplify SVG/XML for writing. I once experimented with some extremely minimal formats[1] built on Jevko[2] (I am its father) particularly aimed at compacting SVG. For example: svg width[391] height[391] viewBox[-70.5 -70.5 391 391] xmlns[http://www.w3.org/2000/svg] xmlns:xlink[http://www.w3.org/1999/xlink][ rect fill[#fff] stroke[#000] x[-70] y[-70] width[390] height[390] g opacity[0.8][ rect x[25] y[25] width[200] height[200] fill[lime] stroke-width[4] stroke[pink] circle cx[125] cy[125] r[75] fill[orange] polyline points[50,150 50,200 200,200 200,100] stroke[red] stroke-width[4] fill[none] line x1[50] y1[50] x2[200] y2[200] stroke[blue] stroke-width[4] ] ] Compared to CSS-like syntax like in the post, the advantage of this is that it is extremely simple and generic, as it works for XML in general (especially the more minimal flavors, e.g. [3]). There are no specialized features here but also not many parsing challenges or edge cases. Clearly, there are ways to simplify these things, but not many people seem to be really interested in that. [1] https://github.com/jevko/markup-experiments#asttoxml7 https://github.com/jevko/markup-experiments#asttoxml7 [2] https://jevko.org/ https://jevko.org/ [3] https://github.com/jevko/markup-experiments#asttoxml5 https://github.com/jevko/markup-experiments#asttoxml5
- doomrobo 4y ago> I wonder how often do people write SVG by hand? A data point: The New York Public Library just did their fourth SVG study group earlier this month. The description was "This group is studying Scalable Vector Graphics, images which can be composed in text editors like Notepad, as a way for Blind and low-vision people to create our own drawings or work with existing images. Feel free to join us if you're interested in drawing with code."
- cpach 4y agoFascinating. Is there any more info online about the study group?
- doomrobo 4y agoUnfortunately that was all the info I have. It was through the workshop newsletter that the library maintains. More info on workshops and how to subscribe: https://www.nypl.org/about/locations/heiskell/news https://www.nypl.org/about/locations/heiskell/news
- chrisoverzero 4y ago> Colon-separated attributes I admit that this section threw me a little bit for a loop. I mean, I can't assume the author doesn't know this, but this article and the repo give no indication that these are being used properly as rebindable prefixes mapping to namespace declarations. They're not just names-with-colons-in. In fact, CSS already has syntax for namespaces[0]: @namespace prefix url(XML-namespace-URL); /* or */ @namespace prefix "XML-namespace-URL"; /* which is then referenced as */ prefix|element { } …so I imagine it would have been a smaller innovation to continue to use the pipe as the delimiter. @namespace url(http://www.w3.org/2000/svg); @namespace xlink url(http://www.w3.org/1999/xlink); use { xlink|href: #circle; } (But rebindable prefixes have turned out to be bad on the open web[1], so maybe not.) [0]: https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace [1]: https://wiki.whatwg.org/wiki/Change_Proposal_for_ISSUE-120#Why_arbitrary_prefix_mechanisms_are_bad https://wiki.whatwg.org/wiki/Change_Proposal_for_ISSUE-120#W...
- fatih-erikli 4y agoIt looks pretty neat. React render-to-string also helps a lot if you need to genereate an svg string renderToString(<svg>${circles.map(circle=><circle key={circle.id} cx={circle.x} cy={circle.y} r={5} />)}</svg>)> something like this
- gorkish 4y agoI do something related; I extend sass with a few custom functions which allow a convenient way to build svg from specifications written directly into the sass. Specifically I use it to build svg filters which are intimately related to the css rules which apply them. It's very useful to have both the css and svg produced in the same pass by the same tool. I haven't done it, but this system would probably also be useful for using CSS to animate SVG
- franciscop 4y agoLove the article and these kind of experiments! The only thing I don't like about this, is that CSS has traditionally been used to style the html components, so when doing this: rect { x: 8; y: 8; width: 1; height: 1; fill: yellow; style transform-box: fill-box; transform-origin: center; transform: rotate(45) } For me it's confusing since I read it as "all the rects have that x and y" while in this experiment it's actually defining a single instance of a rect. I'd rather prefer the styled components way (in fact I've done few experiments around it) like this: const Diamond = styled.rect` width: 1; height: 1; fill: yellow; style transform-box: fill-box; transform-origin: center; transform: rotate(45) `; <svg> <Diamond x={8} y={8} /> </svg>