All into off-side rule (indentation syntax): Html/Css/JavaScript

nabbisen - May 29 '21 - - Dev Community

This short post is about writing code with Pug/Stylus/PureScript to generate Html/Css/JavaScript.

Component Source Compiled into
View Pug HTML
Style Stylus CSS
Script CoffeeScript JavaScript

Off-side rule, indentation syntax, style uses column positions instead of curly brackets (curly braces) "{}" to detect code blocks and understand scopes. It possibly makes source code visually clear with fewer symbols. (Of course, curly brackets style is not bad. Editors are great today.)

I built front-end development environment with them, which reminded me of Python and Haskell🙂

Here is an example.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .