A New Module for Juliar that allows simple HTML

HTML & CSS
1

Hey guys,
Do you write a lot of HTML code and do you hate the fact that the code is unreadable and huge?
If so, let me introduce you a new way to write HTML. I just released SHTML.
Here is basic syntax:
h1 > h3{hello} > h5 <p p
This will lively generate:
<h1><h3>Hello<h5></h5></h3><p></p><p></p></h1>
If you are interested, or would like to try it go and download the module at:
https://github.com/juliarLang/Juliar_shtml

You will need to have juliar installed in order to use this:
You can go to https://github.com/juliarLang/ to download the language core.

2

HI Rattar I’m guesing you are too young to remember when shtml was more of a thing?

Are you sure this won’t cause confusion, or even worse conflict for some? eg

Apache httpd.conf

    #
    # Filters allow you to process content before it is sent to the client.
    #
    # To parse .shtml files for server-side includes (SSI):
    # (You will also need to add "Includes" to the "Options" directive.)
    #
    #AddType text/html .shtml
    #AddOutputFilter INCLUDES .shtml
3

Why on earth would I want to write something like that? Why all the empty elements? Why not simply write <h3>Hello</h3>?

3 Likes
4

@Mittineague I edit Apache httpd.conf all the time. I never noticed that pieces of code. SSL HTML interesting…This won’t cause the problem as this is a juliar module and all juliar modules are saved with an extension of .juliar. The way you run it is placing this text *shtml *.

@TechnoBear The main issue that this module solves is closing tag issue. A lot of people write very long code and miss a div tag for example…you would have to debug long code and find the issue. Sometimes you don’t even notice this issue. With this software, you can write code into more compressed and more readable syntax.

5

But this isn’t valid HTML. You can’t have an h3 inside an h1 etc.

4 Likes
6

I can’t help thinking a validation service will do a better job of picking up HTML syntax errors, than writing in this form - ultimately it has to validate as HTML anyway, so I’m a little lost at to why use the intermediary form.

2 Likes
7

My editor automatically inserts tags in pairs, which eliminates this issue. I was under the impression that most editors behave this way.

But I still don’t understand your example. What, exactly, is h1 > h3{hello} > h5 supposed to mean, and why does it produce the strange nested code you showed, with extra <p> tags included?

8

You might have a code like:

<div id="real">
         <table>
              <thead>
                      <th><div>First Column</div></th>
                      <th><div>Second Column</div></th>
                      <th><div>Third Column</div></th>
             </thead>
             <tbody>
                      <td><div>1</div></th>
                      <th><div>2</div></th>
                      <th><div>3</div></th>
             </tbody>
</table>
</div>

This will cause issue…Do you see the problem here?
With Juliar SHTML module, you can do:

<thead>
                      <th><div>First Column</div></th>
                      <th><div>Second Column</div></th>
                      <th><div>Third Column</div></th>
             </thead>
div#real >table > thead > th > div{First Column} <
                                         th > div{Second Column} <
                                         th > div{Third Column} <
                                         <
                         tbody > th > div{1} <
                                   > th > div{2} <
                                   > th > div{3} <

You can’t make an error with closing tags, as all tags will be closed automatically.

9

The tags follow XML syntax. This code may not be valid in HTML, but it is valid in XML. Since, it is a SHTML, I need to update this. Do you mind submitting an issue report on github?

10

The Chances are, you are not using just HTML, but a lot of other languages, like javascript for example. The validation service may not be able to pickup some parts of code. With this module, you don’t have to validate, each time you make changes as the code gets generated at run time.

11

That looks exactly like Emmet syntax.

12

Many editors do have this feature. However, if you are writing many lines of code, you might delete a closing tag. Although, this module doesn’t prevent any grammar checking (maybe it should?) It does, make sure that closing tags are placed correctly. Also, the code size will be much smaller than the normal html code. So it will be faster to read.

13

It is based on Emmet script as stated in the module.There are few differences.

Emmet only works as a plugin and only generates the code in the editor, while with this, you can save files in this syntax and they will run.

Emmet script doesn’t allow spaces while this module forces the use of spaces to separate each tag, child symbol, and parent symbol. In Emmet, ^ is used to go to parent, while in this module < is used for parent and ^ is used to go to the “root” or first Node. Emmet uses + symbols for siblings, while in this module you just use space. If you know Emmet, you will definitely know how to code with this.

^ : root
> : Child
< : Parent
#: id
. : class
{}:input
[]: attributes
1 Like
14

But it’s still perfectly possible to create invalid code, as your first post demonstrated. It may prevent closing tags from being missed, but it doesn’t negate the need for code validation.

15

That’s true. But this is a lifesaver for me at least. I constantly have problems with closing tags as I write applications several pages long.

16

I can see a benefit in providing closing tags, but I can see none whatsoever in putting them in the wrong place!

17

SHTML includes both HTML tags and additional tags such as

<!--#include file="footer.html" -->

<!--#exec cgi="/cgi-bin/foo.cgi" -->

<!--#echo var="REMOTE_ADDR" -->

and a whole lot of others as described on many web sites including https://en.wikipedia.org/wiki/Server_Side_Includes

Your code looks nothing like SHTML.

18

This seems completely useless.

2 Likes
19

Aww, whilst I agree that the syntax does seem cryptic there’s room in the world for projects like this Haml and Jade. The examples were confusing but it doesn’t have to look so weird.

table >
  thead >
    tr > th{First Column} th{Second Column} th{Third Column} <
  <
  tbody >
    tr > td{Content 1}    td{Content 2}     td{Content 3} <
    tr > td{Content 4}    td{Content 5}     td{Content 6} <
  <
<

You can’t make an error with closing tags, as all tags will be closed automatically.

It seems like you do need to close tags with the < character, is that correct?

If you go to this extent I prefer Jade’s significant white-space rules for closing rather than <

table
  thead
    tr
      th First Column
      th Second Column
      th Third Column
  tbody
    tr
      td Content 1
      td Content 2
      td Content 3
    tr
      td Content 4
      td Content 5
      td Content 6

I do agree that smart closing rules like significant white space can really tidy up the place and add a lot of clarity. Only someone with a heavy bias would argue this is clearer and easier to work with.

<table>
  <thead>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    <tr>
      <td>Content 4</td>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
  </tbody>
</table>
1 Like
20

I use Emmet Package for Sublime Text 3.

For e.g

div.class-one#id-one>div.row>h3{This is text}*5

Output would be:

	<div class="class-one" id="id-one">
		<div class="row">
			<h3>This is text</h3>
			<h3>This is text</h3>
			<h3>This is text</h3>
			<h3>This is text</h3>
			<h3>This is text</h3>
		</div>
	</div>