 Okay, so that was a very good talk. It's good. So the next talk we have actually a Marcin will be with us. Hello. Do I pronounce your name correctly? Marcin? Margin, exactly. Yes, that's good. So where are you calling in from? From Poland, Warsaw. Wow, good, good. So yeah. Actually, yeah, we want to know more about your talk. So when you're ready, you can start sharing your screen. So yeah, hyper tag is very, very interesting. I've never heard about that. I want to learn more about it. So yeah. Right. Okay, I see that you're ready to go. So I'll let you take us away. Thank you. Thank you for this introduction and hello everyone. I want to talk about hyper tag. It's a new language for web templating and document generation. I'm sure all of you know very well what web templating is. I want to show you possibly a better way to do web templating and document generation. In the beginning, I would like to tell you a few words about myself, about the motivation behind developing the new language for web templating. And then I present hyper tags taking into account two most important aspects. One is how to write clean code for document generation for HTML generation. And the other key aspect is how to make this code as modular as possible, which is very important for building large complex web applications. And I will conclude with some final remarks. I will not be able to present all the details of the language because there are too many of them. But I invite you to see the website hyper tag.io where all the information is very horribly documented. So let's go. I'm a Python programmer. I've been programming Python for many years. My profession is data science. I'm a data scientist. I've been working in this area for 20 years. So I'm not really a professional web developer. However, I built over time two large web applications on our website. One was tuned IT in 2009. And the other one, which exists today, Stakearity, which I built in 2014. And these two complex web applications came in some insights and experiences regarding of web templating and HTML documentation generation. Also, I designed and implemented a few other languages before, related to my work. Data science and web scripting. So hyper tag, which is designed and implemented in Python for it's not the first language that I developed. And I can say that hyper tag is a result of many years of experience in both web development and language design and part of implementation. So here is a screenshot of the paper website. And now what was the goal? There are mainly two goals when designing this new language. I couldn't satisfy existing templating languages. And I needed something that satisfies two goals. One is to have clean templating code as clean as possible. Easy to read, easy to maintain. And another thing is to have modular code where you can have code reuse and you don't have to repeat yourself. So let's start with the first thing, how to achieve clean code in web templating. If we take a look at existing most popular templating languages for Python, which is Jinja and Django template engine, template language, they are both quite similar. We can see in a simple example that this code is very convoluted. It contains a lot of boiler plate codes, a lot of special symbols. It's hard to read. This example prints a list of fewer names. It's not any complex things to do. This example is taken from Jinja documentation. And you can see here that less than half of this code does anything useful. And the rest is just a special symbol. And with words, this code is intermediate. Actually, you can see here two different languages. One is HTML and the other one is the template syntax. And these two different languages are mixed together. Such that when you read this code, you have to switch between analyzing HTML code and analyzing template code, template syntax, every few characters. I call it spaghetti code, which is not very helpful for readability of this code, and not very helpful for reducing the amount of code that has type. It doesn't work very well. And if we think for a while, we will discover that this approach to web templating actually is very old. It has origins in the days of HP. HP was the first language that took a similar approach, namely injecting of some foreign template syntax into the raw HTML document and mixing these two languages together. So we all know that HP somehow outdated of today. And Python template languages are still using this not very good approach to write templates. The question is, of course, can we do something better? Here is the same example written in HP. You can see this code is much cleaner, it's much much less code to write, and much easier to read. The question is how to achieve this kind of readability. And the idea is to use indentation for structuring your template code. Actually, three different ideas that have to combine together. The first one is to come up with single language for both the templating structure and for the contents of the document. So instead of using these two original languages, as before, we also have just one language that covers the entire document, including the templating logic. And when we do this, we can also use the idea of using indentation instead of closing tags, so that we can avoid closing tags and get shorter, more readable code. In Python world, we know very well how indentation helps, how much it helps in achieving more readable code. And it's kind of ironic that this idea of using indentation for web development, for web templating, it was first applied in the world of Ruby in some template languages for Ruby, while in Python world, we still use mainly the templating languages based on the idea derived from the base PHP. And the third thing which is important here is a different way of using special symbols in the language, because as you can see here, it's a comparison of the same code written in HTML, in raw HTML, and in type text. Here you can see that HTML uses special symbols, the angled brackets very intensely, which decreases the ability and is quite annoying for programmers to type these angled brackets every single character, but we can switch and change this instead of using special characters to mark tags inside text. We can assume that our document is a tree of tags, and only in some places we have text nodes, and we use special characters to delimit these text nodes inside a larger tree of different tags and different types of blocks. So this is the idea, and as you can see, by forgetting about closing tags, using indentation instead, you can achieve much more redability, much more redability. Okay, so this was that, that was a very simple example. Now I'd like to show you a few more examples of hypertext syntax. So the first one is in a syntax, we can we can say space, we can write more concise code if you want, by putting several tags on the same line, if we separate them by special simple column, and we can also put the text or contents on the same line as the tags. We can write multi-text, like here, put these vertical bars that indicate text blocks, and put them on each subsequent line, or we can just use this special simple on the first line, and drop, drop the subsequent one, this vertical bar section one is optional here, we can omit it. We also have auto-escaping, so there are actually three types of text blocks. A plain text block is, it starts with a vertical bar, and this text block is automatically escaped, htno escaped. So sometimes it's converted to an htno entity automatically, you don't have to care about it, but if you want to embed, inject some raw htno inside your text, you can overdo it if you put a slash at the beginning of this text block instead of a vertical bar, which signifies a raw htno text text block. There's also a third type of text block, which avoids the evaluation of expressions. Here in this block, expressions can be embedded and for the third type of text block, if you don't want to run the expression evaluation. Now the next thing is tags and attributes of tags, you can write attributes similar to what you would do in raw htno, but can also embed expressions both on the on the attribute list and inside text blocks. And here's one of the ways to embed expressions by using single braces, heavy braces. There's also an automated syntax to be used of all the dollar time. And here expressions can take arbitrary form, so the text block is very flexible in how you can write your expressions, you can use actually all operators and all the syntax that you know from Python, which is quite rare thing for completing languages. And of course we can have different control structures. Here's an example of a loop and here we can see conditional blocks and trial blocks, loops, for loops, while loops, and conditional blocks, they work similar to what they do in Python, although of course syntax is a little bit different here. Here we have some content, some body, can be text contents or you can just provide any structure content that you want. And regarding the trial block, it works a little bit different than in Python case. We don't really care about the exact type, the exact class of exception that is raised during renderings of again piece of document. Usually there's only one reason why, why a given piece of code fails and we just want to provide some alternative path of execution rendering. So here we assume that cars is a dictionary of cars and their prices, but not every maker is present in the dictionary. So if there is a price for a given car, we want to print it, but if a given name is missing, we want to provide an alternative message and we try blocks and do it very easily and in a clean way. I maybe will add one more thing, previous slide, as you can see here, with the use of this syntax where we use indentation and where we use the Vestal bars for marking text blocks, it in many cases is possible to maintain a vertical separation between text and text content, which is very, very useful and enhances the readability of the code even in a farther, because you can put text on the left and text on the right and when you take a look at the code, you instantly see which parts of the code provide styling and provide HTML structure at which parts of the code are just role tags that will be tied to the user. And I will show also comparison at the end of this part of the talk. We have some example template code written in hyper tags compared to the same code written in Django and Jinja template languages. So you can notice how much difference there is between these languages. In Django, Jinja, we have to use a lot of boilerplate codes, we have to use closing tags, we have to use closing statements for console statements, and we have to use double braces in multiple places. All these things reduce the readability of the code. Hyper tag is just five special symbols that need to be added to the actual contents of the document. And also, we can notice one thing in Django and Jinja, we cannot write a length of items. This is a very simple thing to do that we may want to do. And in Python, we would just write length of items. In Django and Jinja, it's more confusing because you have to use a filter and not just apply the standard length function, which also adds to the complexity and of the language and difficulty of using it. I have to mention also that this idea of using intentation to enhance the readability of templating code, it's not so new. It was already used in the Warp of Ruby in languages like CREAM and Khamo, and it's also present in Pooks in Django. Hyper tag was inspired by these languages and I tried to take the best things from these languages in terms of syntax, in terms of readability. I think hyper tag is somehow maybe even cleaner and more useful than these original approaches. And now I want to go to the second part of the talk and present you the more advanced features of hyper tag that are related to building modular codes. It's when you build a large application and you write a lot of codes, it's very important to be able to somehow split these codes into pieces and be able to reuse these different pieces in different combinations with each other. That's what modularity means. Modularity means that you can create such small pieces of your code in a typical programming language that we talk about functions and classes, but in weapon-pating it's a different story. We need some other kinds of tools of language structures to allow us to separate components and to build these reusable pieces of code. After that, when it has separation, it can reuse our code and this is something compared to code duplication. So whenever we see code duplication, it means that we miss code reuse. When we start with raw HTML, we can see that HTML is very notorious for code duplication. There are no means in HTML to deduplicate code. So here, the majority of the code is duplicated. If we go to hyper tag, this example is a little bit shorter and a little bit more readable, but we still have duplicate codes. These elements are duplicated. And the question is how to deal with that. The idea, could we, for example, define our own custom tags, just like we have table as a standard tag? Could we have table raw, our custom tags, to replace all these repetitions for these duplicated codes? And we could just provide the values of attributes to this custom tag and this tag would do the rest to generate the HTML that we need. We could do even better if we allow for positional attributes in this custom tag, which is very similar to how arguments in functions, in Python functions, work. We can have keyword arguments or positional arguments. So if, in such case, if we had such support in the language, we could make this code a lot shorter and more readable. And in hyper tag, we can do this. We can define custom tags. The way to do this is to use a so-called hyper tag definition tag. As this custom tag, we call here just hyper tag with lowercase h. And we can define such custom tags by using the special symbol custom, custom character, which introduces a new name, a new tag, and defines its attributes and attributes can have a default value like function in Python. And it has this body that will be substituted for this hyper tag name in every place of operas. So we just reduce the duplication. We just have one copy of this part of code and we insert attributes, which are variable. We inject them in appropriate places in the HTML code in the body. So that's the way to do this in hyper tag. And now we can reduce this initial code that we saw in HTML can be used just to be for lines of hyper tag code. And now the question is, because standard tags can have a body in the place of operas. And the question is, can we also provide body to this custom tag? And the answer is, yes, we can do this. We can do this. However, we have to change the definition of our hyper tag to be able to recognize that a body was provided. So here we want to extend this initial example. We printed a table with two columns, one of the car name, the second column of the price. And now we want to add the third column to the table, which contains rich text, which contains structured information, not just a single value, a comic value. But we want to put some funny quotes, we want to add styling to this funny quote, we want to put images, add images to this information. So we end up with rich text that cannot be passed by a single attribute. So that's the place where the ability to provide body to a custom tag plays a role. And to handle that, we need to define a special body attribute, which is done with a symbol as the S sign, which marks that the first attribute is a so-called body attribute. It will carry the document tree of the actual body that was passed to the hyper tag in the place of occurrence. And typically, we would just want to inject the place of the body in some place in our formal body. However, this is not the only thing you can do. Because hyper tag is somehow special compared to our translating languages, because it allows here a display. This body is represented as a DOM tree, a document object model tree, and this body can be manipulated. So we can not only paste it on chains, but we can also analyze it, modify it before pasting. And here's an example how this can be done. This is somehow exceptional, I think, and not possible in any other translating engine, I know. This example is about building a table of contents for documents. A typical use case when writing especially static documents. Maybe not so common for web pages, but when you build and you write static HTML documents, you often want to have a table of contents at the beginning, and so you can do it manually. But in such case, it is very hard to maintain these documents, if you add headings, if you add chapters, it's more difficult to remember to change the CLC at the beginning of the document up the field tree. In hyper tag, you can write a very short code that will build this CLC automatically. And here you can see how to do this. We need to define a hyper tag called CLC here that takes any body, any document as its actual body, and then we assume that all H2 headings are the headings that we are looking for want to put in the table of contents. So we are looking in this document for H2 headings, and we print each of these headings inside a list item, HTML, R9. We take text of these headings, and we wrap it up with a hyperlink that points to this heading inside the document. So we have to pull the ID attribute of its heading and paste into the HTML tag. So this is enough to build a list of headings in the document with hyperlink. We may need one more tag because usually we won't have both the CLC and the original document. So we need one more tag to concatenate these two things together, like here. And now after defining this tag, we can take any document, just an arbitrary document and target it with add the CLC, and it's enough to get the table of contents automatically. Here you can see the output of this example. After rendering, we have table of contents and we have the original document, and you can see that headings are copied from here to here, and we have correct hyperlink that points to these headings in the document A. I have to mention that these kind of add-ons functionalities some extent also available in other languages. So if you're interested, you can compare, you can check how these things work in macro-ginger pool. These are languages that provide all of some language features, some language structures that allow it to build these reusable pieces of code. It's only available in more advanced test-making engines. I think the simple ones don't provide that. However, even if you go to macro-ginger pool, you'll see that the syntax we provide is quite convoluted. It doesn't often, it doesn't fit very well in the syntax of other elements of the language. In hyper-tags, these custom tags behave exactly the same as standard tags. So we can use them in all the same context, in all the same places where you can use standard tags. There's no difference in syntax. And the most important difference is that hyper-tags implement two-stage rendering. So when you define this hyper-tags which takes body attributes, here this body is not rendered yet. It's partially rendered. It's only partially rendered. All the expressions here in this actual body are evaluated and all contra blocks have been executed. But otherwise, this body still preserves its tree structure. You can analyze the tag structure of this body and you can analyze it and it can manipulate it, which is not really possible in any other templating language. So this is something very unique for hyper-tags. And of course, we should add these aspects related to readable and clean code. So in macro and in JINJA, this code is not readable as much as it is in hyper-tags. And macro and JINJA use this traditional approach of ingesting foreign syntax into HTML documents. The last thing I mentioned is about importing things. It's when you can define custom tags. Of course, you'd like to reuse this hyper-tags in different files, different documents. And it's possible with the import syntax. In fact, the import syntax is similar to what we have in Python. You can use the same keyword from import. Here the import path has the same structure as the Python import path. You can import from other packages, from other modules. You can use absolute import and related import like here. You can use the renaming like in Python with your F. And what's important is this. So thank you so much, Masen. It's a really good talk, but I think it's very informative and we are running out of time. So what I suggest happening is that you can carry on in the breakout room, which you can run the GC there to continue the talk and maybe answers some questions. There are already some questions in the chat, which you can go and answer as well. Thank you so much. Thank you very much.