7 ms·
Show HN: Preprocessor I've been working 4 years now
Hey there,
I'm here today to share with you a software I've been working on for 4 years now. I'm not full time dedicated to it, as I need to make a living.
My inspiration to develop it came when I started using Sass for real in production. I really appreciated the hierarchy of nesting rules instead of the way CSS vanilla used to do.
The obvious nesting rules was easy to read and understand just by looking at. That was something I personally admirated very much.
I wondered why there was no HTML preprocessors as revolutionary as there is for CSS and JavaScript.
All popular preprocessors for HTML have one thing in common. All replace the angle brackets by something else (usually identation) and then add some functionalities on top of it.
If the symbols for markups are a problem to the experience of developing a visual structure, just replacing it for something else doesn't fix the problem. You are just changing the character of marcation for another.
With that in mind, I started Pretty Markup. Not just replacing the clutter of angle brackets by something else, but removing it completely. Very much inspired by Sass. No special characters needed, except by the quotes. The project still in its early stage, but its already useable.
I reached a point where it has a stable base to work. Now, I'm plannig the layer of features that will make it usefull and revolutionary as Sass and TypeScript. Its important to note that I didn't started directly in Pretty Markup. I had a previous package called htmlpp-com-github-mopires. Yes, terrible name, but it was a start. Later a decided to make it more professional and with a friendly name.
You can give it a shot by having NodeJS and installing it with:
npm install pretty-markup
I created a syntax hightlighter for VS Code to attract more devs to it. You can use it by searching "pretty markup" on the extensions tab. Now, it's the first one. The next step will be a package to create a basic starter project. Something like the good old create-react-app.
Any feedback, suggestion or even a contribution about anything is very welcome.
Thank you very much for your attention,
Matheus
PS: The package available in runkit is very old(and I don't know how to update it there), I do not recommend you to test there.
- Denvercoder9 2y agoI suggest putting a code sample of a page written in Pretty Markup that shows off its features in the README. The documentation is currently somewhat devoid of information about the language itself.
- Trufa 2y agoI second this, I have basically no feeling for it other than zooming in a the README gif
- junon 2y agoWhich is super slow. The first 10 seconds or so are just slowly traversing an auto complete menu.
- mopires 2y agoThank you for the suggestion, I've done something like this in early versions. But removed thinking the gif would be enough.
- mopires 2y agoI'm currently building the documentation
- doublerebel 2y agoIf you use indentation for nesting, the closing tags are superfluous. That’s just one of the reasons so many html/xml template langs have chosen that format.
- amelius 2y agoI came here to say this. Get rid of those closing tags.
- retorquere 2y agoBut then it would just be pugjs from the looks of it.
- mopires 2y agoIt's not identation based. Removing the closing tags would just not close anything. Everything would be immediately nested hehe
- mopires 2y agoRight... It's not identation based. Why remove the close tags?
- lolinder 2y agoHaving used Jade and YAML and Python extensively, I disagree. Natural languages have redundancy because they're often used in cases where transmission is imperfect. The redundancy provides enough information to piece the meaning back together even if the distortion is high. A similar example of redundancy is the check digit on a credit card number. You could save some space by eliminating it, but then simple human error can cost people a lot of time and money. The same principle applies to programming languages. They most commonly get distorted through copy/paste and through modification in adjacent code. Sometimes those distortions create a result that is syntactically invalid, which is the best case scenario and gives you a chance to piece it back together. But the more flexible your syntax is and the less redundancy it has, the harder it is to recover from errors. The distorted code can look correct. Closing tags and curly braces give extra redundancy to a language which can allow for better error recovery in the case of distortion. They're the check digits of programming: they're not exciting or flashy, but they provide a layer of safety to sharing and modification.
- sethherr 2y agoWhat is the difference between this and Haml or slim?
- leyka 2y ago+1 really curious about the diff. Remind me slim and pugjs
- mopires 2y ago[flagged]
- mopires 2y agoThis is a snippet of a article I'll post about it: "[...] popular preprocessors for HTML out there, have one thing in common. They replace the angle brackets, then add some functionalities on top of it. If the symbols of a tag are problems to the experience of developing a frontend, replacing it for something else doesn't fix the problem. Just change the symbol. Pug, Haml, slim, and some others change the angle brackets by indentation or something else. So now, you have to be careful with indentation and not the angle brackets. Please, don’t get me wrong, those are very well developed preprocessors that are also very well maintained by very skilled people. They deliver what they propose. [...]"
- sethherr 2y agoBut this still doesn't explain what pretty markup does that's different, just that it doesn't use indentation. Seems like maybe all that's different vs. normal HTML is that it doesn't have angle brackets.
- mopires 2y agoYes. But it truly doesn't have angle brackets. At the moment, the features that make it different from pure html are its feature tags and config tags. For example !doctype, meta viewport are built in. Stylesheets and javascripts can be attached with feature tags. Such as style and javascript, respectvely. It may seem that is not that much for now, but as more features are added it will be handy and rubust. One of the goals are to deliver a better development experience.
- deleted 2y ago[deleted]
- highmastdon 2y agoI’ve used something similar quite a long time ago called Jade. Seems to be renamed to Pug. Here’s a nice writeup with some examples (not mine, found the webpage missing examples): https://www.sitepoint.com/jade-tutorial-for-beginners/ https://www.sitepoint.com/jade-tutorial-for-beginners/
- retorquere 2y agoEven has highlighting in vscode, and there's a plugin for pugjs snippets.
- __jonas 2y agoPug syntax is whitespace-sensitive though, while this doesn't seem to be, it has closing tags which I prefer. Also Pug is more of a templating engine, while this doesn't appear to have any interpolation / templating logic stuff.
- h0l0cube 2y agoOverall, it's much less noisy than pug, just by removing the parentheses and commas. But if the objective of this kind of markup is trying to minimize visual noise, removing redundant closing tags (which have inconsistent rules) would be an improvement. The shorthand for classes/IDs seems like a good idea too, if there's a way to do it that improves readability (and seems less magical to the unfamiliar coder)
- mopires 2y agoShorthand definitions would be a good feature to be added, but it needs refinement. We need to think carefully about how to implement in a way that would fit gracefully with the syntax and with the developer experience.
- mopires 2y agoAlso, if we remove closing markup, the only way to understand if a markup is closed woud be by checking if a new markup is open. That doesn`t seem efficient.
- 29athrowaway 2y agoHow does it differ from pug (jade), which has existed for about 14 years?
- mopires 2y agoI have answered this in a previous comment. I'll past here for your convinience. It's a snippet for the post I'll make about this very point. https://news.ycombinator.com/item?id=41119414 https://news.ycombinator.com/item?id=41119414
- 29athrowaway 2y agoIt was flagged
- remram 2y agoLiterally how would anyone get started? No docs or even usage examples, for a new language?
- mopires 2y agoAbout that... I think I got ahead of myself and forgot about this detail. I'm working on this. And will comment on this post when it's public.
- efilife 2y agoI don't need it, but upvoting just because of your dedication to the project. It also looks very nice, and the extension is a cherry on top
- mopires 2y agoThank you for you appreciation! I'm very proud of this project. Thank you for the upvote.
- reconvene1290 2y agoI like the closing tags (others don’t seem to) as they help with visual scanning and auto formatting. Nice project, well done!
- mopires 2y agoThank you sir. Closing tags are a very good feedback about the domains of a tag.
- throw156754228 2y agoHonestly I always had a soft spot for haml. If someone wrote a haml plugin for React I would be in heaven. It's JSX that is an ugly hot mess in mature codebases, not html.