Forem: michaelb

Learn for-loop template tags and data types building a train schedule web component (Learn Modulo.js - Part 7 of 10)

michaelb — Wed, 16 Oct 2024 14:49:44 +0000

👋 Hey all, welcome back this week! Each tutorial is self-contained, so feel free to start at the beginning, or just plunge in here.

Introducing: The TrainSchedule Component

Our task in this tutorial will be to build a data table TrainSchedule component that can loop through an array of JavaScript data. We want it to be re-usable, so we can, in the future, simply "plug in" a new data set (e.g., a JSON file, or even a CSV). In doing so, we'll learn about the different data types available, and how to attach them to State and other Modulo Component Parts. We'll also learn the "for loop" template tag. Let's begin!

Starting snippet

In this tutorial, we will start with a bunch of "flat" State variables that only contains text. See below:

As with previous tutorials, you can simply copy and paste this code into any HTML file to start:

<template Modulo>
    <Component name="TrainSchedule">
        <Template>
            <h3>Station</h3> <h3>Line</h3>  <h3>Arrival (Departure)</h3>
            <div>{{ state.station }}</div>
            <div>{{ state.line }}</div>
            <div style="{% if state.late %}background: #ffaaaa{% endif %}">{{ state.minutes }} min ({{ state.minutes|add:1 }} min)</div>
        </Template>
        <State
            line="Red Line"
            station="Embarcadero"
            minutes="5"
            late="false"
        ></State>
        <Style>
            :host {
                display: block;
                text-align: center;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
            }
            div {
                background: #ffffffaa;
            }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-TrainSchedule></x-TrainSchedule>

Introducing Part 7: Data Types

As of right now, there are several glaring issues with our code: The first bug is that it shows the train as late (highlighted in red), yet it should not be. The second bug is that it says it will depart in "51 min", instead of "6 min", when it's supposed to have 1 minute for boarding. In both these cases, it's because of the wrong data type: We are only dealing with Strings, when we want to be using Numbers and Booleans.

The final omission is that there is only one station showing. Not a very useful data table!

We'll learn one more syntax next: The Data Prop, or := syntax. Typically, when we add attributes to anything, whether it is a Component Part or even just in regular HTML, the attribute value can only be a string. This means when we did <State minutes="5" ... > previously, we made a mistake: The minutes variable didn't get assigned to 5 the Number, but rather "5" the String. Similarly, when we did late="false", we once again were creating a string with the word "false", instead of the Boolean value of false. Also, for one word values, quotes are optional.

Why don't we use "strings" for numbers? Using strings of digits (i.e. in quotes) instead of the numbers themselves means that things like arithmetic won't work as intended. Example: If state variable count="1", then state.count + 10 will result in "110" instead of the desired 11, since it's a string of digits, so "1" + "10" = "110"

Arrays

Continuing on our tour of data types, let's examine "container types" (ones that contain other data). In our case, container types are also "iterable types" (ones you can "loop on", e.g. with a for loop, as we'll learn later).

Arrays are the most important type of "container type" or "iterable type" in JavaScript. This means, a type that can contain other types. This means you can say it's an "Array of Numbers" (to refer to a certain collection of numbers, e.g. data you want to chart or graph), or an "Array of Strings" (to
refer to a collection of items of text, e.g. the usernames of people who are present in a chat room).

Objects

Objects are like arrays in that they contain other data, but instead of having an ordered sequence of items, they have them behind "keys", which are strings designations or labels for values, which can be any other type. The format for objects is like: { "key": "value", "key2": "another value" }

Arrays of Objects

When we access real-world data, whether those are blog articles in a publishing site, or a data items in a dashboard, they often "arrive formatted" as what's called a JSON array of objects. Here's an example:

<State
    stations:='[
        {
            "name": "Embarcadero Station - San Francisco",
            "trafficRating": 1353
        },
        {
            "name": "19th Street Station - Oakland",
            "trafficRating": 732
        }
    ]'
></State>

Summary: JSON type list

To summarize this, look at this list of JSON types, and see if you can
understand the examples given of each type of data:

String - "Hello!", "how are you", "f$J^&m$j", or the empty ""
Number - 42 or 32.5
Array - [ ] or [ 1, "a", true ] (can contain other data)
Object - { } or { "a": 123, "b": "XYZ" } (can contain other data)
Boolean - true and false (no other possible values)
Other: null

Step 1: Fixing with Data Props

To fix it, we do the following:

<State
    line="Red Line"
    station="Embarcadero"
    minutes:=5
    late:=false
></State>

Data type? If you are new to coding, you might be confused by this term. It's a little like a file format for variables: Instead of JPG, DOCX, and ZIP, we have Numbers, Strings, Arrays, Objects, Booleans, etc. This collection of types is what makes up the "JSON" format, which Modulo uses.

This is called a data prop directive. You can identify a data prop directive (:=), by spotting an attribute name that is suffixed with a colon right before the equal sign, like this: attributeName:=value.

Step 2: Adding More Trains with Arrays and Objects

Array syntax summary: '[ (opening), ]' (closing), and contents seperated with comma: ,. Object syntax summary: '{ (opening), }' (closing), : (seperates the key from the value) and , (seperates each entry)

Now, let's transform our State into having only a single state variable, an Array of Objects:

<State
    trains:='[
        {
            "line": "Red Line",
            "station": "Embarcadero",
            "minutes": 5,
            "late": false
        },
        {
            "line": "Blue Line",
            "station": "Embarcadero",
            "minutes": 7,
            "late": true
        },
        {
            "line": "Red Line",
            "station": "West Oakland",
            "minutes": 1,
            "late": false
        }
    ]'
></State>

Step 3: Using a for-loop to show all trains

We looked at the {% if %} template tag previously. Now we'll practice the {% for %} template tag.

The "for-tag" is for when we want to duplicate a bit of template over and over for a repetitive bit of data. For example, if we want to template "for every article", or "for every pin in a world map", or "for every post in an article comment section". Each of these "for" statements refers to some plural thing that we want to have a similar style duplicated across, using the same HTML template for each item in that collection.

The for-tag syntax

For example, imagine showing a paragraph for every student in a class's roster
(assuming data like in the students:= State data example above):

{% for name in state.students %}
    <p>Name on roster: {{ name }}</p>
{% endfor %}

A for loop can also loop through other types of data, such as the very popular Array of Objects mentioned previously, formatting it in a reasonable way (assuming data like in the trains:= State data example above):

    {% for train in state.trains %}
        <p>{{ train.station }} | {{ train.minutes }}</p>
    {% endfor %}

In this example, the {{ train.station }} and {{ train.minutes }} refer to templating the individual values within the station object in the array of stations.

Like the "if", for has an "endfor", which it uses to designate the portion of the temlpate it will repeat. Unlike "if", it can use the template it 0 times, 1 time, or 2+ times (if-tags can use the template only 0 times or 1 time, but can never "duplicate" the template and use it 2+ times).

Step 3: Using a for-loop to show all trains

Let's apply our for-loop knowledge below:

{% for train in state.trains %}
    <div>{{ train.station }}</div>
    <div>{{ train.line }}</div>
    <div style="{% if train.late %}background: #ffaaaa{% endif %}">{{ train.minutes }} min ({{ train.minutes|add:1 }} min)</div>
{% endfor %}

`<x-TrainSchedule>` - Complete Example

Finally, we put everything together, add in some font and sizing adjustments and a background, and we end up with the final results. Feel free to copy and paste the following to try it out:

<template Modulo>
    <Component name="TrainSchedule">
        <Template>
            <h3>Station</h3> <h3>Line</h3>  <h3>Arrival (Departure)</h3>
            {% for train in state.trains %}
                <div>{{ train.station }}</div>
                <div>{{ train.line }}</div>
                <div style="{% if train.late %}background: #ffaaaa{% endif %}">{{ train.minutes }} min ({{ train.minutes|add:1 }} min)</div>
            {% endfor %}
        </Template>
        <State
            trains:='[
                {
                    "line": "Red Line",
                    "station": "Embarcadero",
                    "minutes": 5,
                    "late": false
                },
                {
                    "line": "Blue Line",
                    "station": "Embarcadero",
                    "minutes": 7,
                    "late": true
                },
                {
                    "line": "Red Line",
                    "station": "West Oakland",
                    "minutes": 1,
                    "late": false
                }
            ]'
        ></State>
        <Style>
            :host {
                background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/BART_train_from_Farallones_Street_footbridge_%281%29%2C_July_2023.JPG/800px-BART_train_from_Farallones_Street_footbridge_%281%29%2C_July_2023.JPG");
                display: block;
                font-size: 1.1rem;
                font-family: sans-serif;
                text-align: center;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                min-height: 380px;
            }
            div {
                background: #ffffffaa;
                padding: 10px;
                margin: 10px;
            }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-TrainSchedule></x-TrainSchedule>

Conclusion

In this section, we practiced using := data props to use different types of data in our component, and learned how we can use how to go deeper with Template and use a combo of {% for %}, {% if %} and other control-flow template-tags. Next tutorial will really ramp it up, and show how to import data from online sources or APIs using the StaticData Component Part. Definitely follow and watch out for the next tutorial, since with that technique you can import your data and build data tables quicker than ever! As always, let me know if there is something you'd like covered in the comments.

Learn template-tags while creating interactive forms in a web component (Learn Modulo.js - Part 6 of 10)

michaelb — Thu, 03 Oct 2024 18:17:00 +0000

👋 Hey all, welcome back this week! Each tutorial is self-contained, so feel free to start at the beginning, or just plunge in here.

Note: Due to a bug with Dev.To, I'm unable to publish this tutorial normally. The fenced code blocks do not support template syntax, causing the markdown parser to crash.

Introducing: The NewsletterSubscribe Component

In Part 6, we'll be creating a custom, interactive sign-up form that only shows the newsletters to subscribe when the user chooses. This will give us practice with some very useful techniques, while building up our knowledge of template-tags, a core concept in templating.

Starting snippet

In this tutorial, we will start with Props, just like with the PictureFrame component in Part 2.

As with previous tutorials, you can simply copy and paste this code into any HTML file to start:

<template Modulo>
    <Component name="NewsletterSubscribe">
        <Template>
            <form method="POST">
                <h2>Learn Modulo.js - Sign-Up Component</h2>
                <label><strong>Email:</strong><input [state.bind] name="email" /></label>
                <label>
                    <input [state.bind] name="subscribe" type="checkbox" />
                    I want to subscribe to receive news and special offers
                </label>
                <label>
                    <input [state.bind] name="newsletters.kombucha" type="checkbox" />
                    Kombucha Enthusiast Newsletter
                </label>
                <button>Submit</button>
            </form>
        </Template>
        <State
            email=""
            subscribe:=false
            newsletters:={}
            newsletters.kombucha:=true
            newsletters.soda:=false
            newsletters.wine:=true
            newsletters.beer:=false
        ></State>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-NewsletterSubscribe></x-NewsletterSubscribe>

Important things to note: Look at how "State" is set-up. Do you see how newsletters:={} assigns to a JavaScript Object (designated with {}), and how then kombucha, soda, wine, and beer are all assigned with the syntax newsletters.kombucha, etc? This creates an Object that ends up looking like: { "kombucha": true, "soda": false ... }. This is a short-hand in Modulo for creating such objects. Also, note how name="newsletters.kombucha" must specify the full name, including the dot (.), to access that true/false value.

Introducing Part 6: Template Tags

In addition to filters, the Modulo templating language also support powerful "template tags", which allow for more complicated custom behavior. This includes the next two topics in this tutorial: "if" template-tag, which allows for conditional rendering (e.g. "only show the submit button if a form is filled correctly", or "only show the modal if the user has clicked the button"), and the "for" template-tag, which allows for HTML to be repeated for each item of some given data (e.g. "every blog post gets it's own <li> element", or "every field of data gets it's own form field").

Syntax

Unlike template variables or filters, they use {% and %} (instead of {{ and }}) to designate where they are in the Template code. Template tags are in the format of {% tag %}. They allow for more complicated transformations to the HTML code generated. For example, here are a few: {% include other_template %} {% comment %} ... {% endcomment %}

The if-tag

One of the most useful template tags you will use is the if tag, written like this: {% if %}. The if-tag allows for conditional rendering of HTML code based on the condition supplied.

See below for two examples of using the "if" tag:

{% if state.expanded %}
<p>Details: {{ props.details }}</p></div>
{% endif %}
{% if props.link %}
<a href="{{ props.link }}">Read more...</a>
{% else %}
<em>(No link provided)</em>
{% endif %}

Note that there are two other tags in the mix. These a related to the if tag, and will only show up after the if tag. The first is the {% endif %} tag. This is required, since it shows Modulo what you want the if tag to conditionally include. The second is the {% else %} tag. The {% else %} is optional, as evidenced by the first example: You don't need it for all uses of the if tag.

Step 1: Optionally show the Kombucha checkbox

Let's start with an if-statement based on state.subscribe. The logic is that if the user doesn't want to subscribe at all, we shouldn't even show the extra newsletter options. We can accomplish this with the following:

{% if state.subscribe %}
<label>
<input [state.bind] name="newsletters.kombucha" type="checkbox" />
Kombucha Enthusiast Newsletter
</label>
{% endif %}

This will now only show the option to choose which newsletter when you click "subscribe".

Step 2: Use "else" to show a hint about filling in the email

Now, let's get practice using a more complex if statement to show a hint instead of the "subscribe" form button, until they start typing a few characters. Emails should (probably) never be shorter than 4 characters, so let's use that as the thresh-hold. We can use the lt (less-than, a.k.a. <) operator to compare. See below:

{% if state.email|length lt 4 %}
<p><em>Hint: Start by entering your email</em></p>
{% else %}
(... subscribe form goes here ...)
{% endif %}

Step 3: Use for loop to list the newsletters

Let's start with a simple for-loop "test", and then we'll expand on it in the next step:

{% for key, value in state.newsletters %}
<label style="{% if value %}background-color: #11991133;{% endif %}">
{{ key }}
</label>
{% endfor %}

Important Note: Always put your template tags inside your HTML values! Do not do something like {% if value %}style="color: blue"{% endif %}, instead do style="{% if value %}color: blue{% endif %}". Otherwise, the {% and such could get interpretted as value-less attributes, your code to get littered with {%="".

Step 4: Adding back in the input

This will loop through each newsletter, and render it as green if "value" is true. However, it won't create toggle inputs. We'll need to use the {{ key }} property inside of the name= attribute. Examine the following tweak to the input:

<input [state.bind] name="newsletters.{{ key }}" type="checkbox" />

Put this inside the for-loop, and it will auto-generate checkboxes, no matter how many newsletters you might have!

`<x-NewsletterSubscribe>` - Complete Example

Finally, we put everything together, add a |capfirst for formatting, and toss in a Style part with some very basic styling, to make the form look a little better, and we end up with the final results. Feel free to copy and paste the following to try it out:

Due to a bug with Dev.To, I cannot include the source code. However, you can see it in the following Gist:

https://gist.github.com/michaelpb/9bac99ba0985859742961c3d1e1f310a

Conclusion

In this section, we practice using template-tags to make more user-friendly forms. In the next tutorial we'll start digging into some of Modulo's strengths, with data-types, StaticData and API integration, so be sure to follow to learn how to write declarative code to hook up APIs in just a few lines!

Learn how to isolate CSS with Shadow DOM and Slots in a gallery web component (Learn Modulo.js - Part 5 of 10)

michaelb — Fri, 27 Sep 2024 18:00:00 +0000

👋 Hey all, welcome back this week! Each tutorial is self-contained, so feel free to start at the beginning, or just plunge in here.

Introducing: The PhotoGallery Component

Our task in this tutorial will be to build a Photo Gallery component, that can take any number of image tags and display them. Our goal is to make this convenient: HTML developers should be able to immediately know how to use it and use it effectively.

Starting snippet

In this tutorial, we will start with Props, just like with the PictureFrame component in Part 2.

As with previous tutorials, you can simply copy and paste this code into any HTML file to start:

<template Modulo>
    <Component name="PhotoGallery">
        <Props
             image1
             image2
        ></Props>
        <Template>
           <div class="flex-gallery">
               {{ props.image1|safe }}
               {{ props.image2|safe }}
           </div>
        </Template>
        <Style>
            .flex-gallery {
                border: 2px ridge gray;
                padding: 10px;
                display: flex;
                flex-wrap: wrap;
            }
            img {
                border: 2px ridge goldenrod;
                margin: 10px;
                border-radius: 10px;
            }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-PhotoGallery
    image1="<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Helen_KellerA.jpg/193px-Helen_KellerA.jpg' title='Hellen Keller' />"
    image2="<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Mark_Twain_1907.jpg/187px-Mark_Twain_1907.jpg' title='Mark Twain' />"
></x-PhotoGallery>

One important new filter we added is the |safe filter. This tells Modulo to interpret the variable as HTML (not text), and thus correctly render the image. Otherwise, the user would see the code for the images, not the image itself.

Introducing Part 5: slots

As of right now, there are two glaring issues with our code:

We only support 2 images. If we wanted more images, we'd have to manually define them in Props. If we wanted dozens (or even hundreds) of images, it would become very quickly unmanageable.
Putting HTML into quotes as HTML attributes (Props) is really messy. We need to watch out for quotations, and the code quickly becomes hard to manage.

The <slot></slot> tag solves both of this. It allows you to use the content of the HTML tag, allowing you to write HTML much more naturally. In Part 5, we'll get practice with Slots, but also learn about the related ShadowDOM, and about CSS isolation in general.

Slots allow there to be "empty spots" in your HTML that proceed to get filled by arbitrary content supplied when your component is used. Adding a slot is as simple as including a <slot></slot> HTML element in your component's Template definition. To fill up a slot with HTML content, add the content between the opening and closing tags of your HTML element.

Step 1: Adding a slot

The quickest thing to do is just replacing the div tag with the special slot tag:

<Component name="PhotoGallery">
    <Template>
       <slot class="flex-gallery"></slot>
    </Template>
    <Style>/* ... */</Style>
</Component>

Then, to use it, we do the following:

<x-PhotoGallery>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Helen_KellerA.jpg/193px-Helen_KellerA.jpg' title='Hellen Keller' />
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Mark_Twain_1907.jpg/187px-Mark_Twain_1907.jpg' title='Mark Twain' />
</x-PhotoGallery>

Step 2: Adding a default

To make our PhotoGallery a bit more useful to whoever might use it, let's add a default appearance, so "empty" photo galleries have a message:

<Template>
   <slot class="flex-gallery">
       <p><em>No photos found.</em></p>
   </slot>
</Template>

To test an empty gallery, write the tag without any space between the opening and closing: <x-PhotoGallery></x-PhotoGallery>

Aside: Named slots

While not used here, it's good to know you can have multiple slots by giving them names (with name=), and specifying the name with the special slot= attribute. For example: <slot name="sidebar-photos"></slot>, and <img slot="sidebar-photos" /> would create a new, separate slot from the default, nameless slot, which can have it's own default and it's own content.

CSS Isolation: Enter the Shadow

Our <x-PhotoGallery> component is complete at this point, for certain purposes. However, let's imagine this is in a larger page, and that existing CSS in that page is interfering with our styling. This is the use for CSS isolation. Let's start with practicing "shadow", set on the Component itself, as such: <Component mode="shadow">

When shadowDOM is activated, then the component switches to
using a somewhat new feature of HTML: the Shadow DOM. This dramatically named feature -- sounds kind of like a super villain -- allows a Web Component to create a protected or hidden DOM fragment (e.g. portion of an HTML page) that can be manipulated, while "protecting it" from outside CSS. This will dramatically change how the component renders, since the browser will treat it quite differently, and all of it's children will be "removed" from the DOM in the hidden Shadow DOM, making it appear "empty" when you right click and do Inspect (but with more clicking, you can find the "shadow root" where the hidden content is).

When a component is in shadow mode, and you launch your site or build your site, it's CSS will NOT be put into the main CSS file. That means that it will be stored in the JavaScript file and only added whenever that component appears on the screen. Furthermore, due to the what the browser works, the CSS will be fully isolated in both directions: Outside CSS won't affect your component's children, and inner CSS is incapable of affecting anything else, and won't even be added until the component gets on the screen. Since it's fully isolated, there is no need to prefix, so CSS will be inserted as is.

Step 3: Entering the Shadow DOM

Examine the image above. Do you see how it shows a "shadow-root"? That's what we want. Let's "switch on" Shadow mode for our component:

<Component name="PhotoGallery" mode="shadow">

Check out what happens. The first thing you will notice is the images no longer get the border. This is intentional: The Component's CSS will not affect it's slots, since they are "protected" by the shadow DOM. This means we'll need to move the img CSS to be global, regular / global CSS:

<x-PhotoGallery>...</x-PhotoGallery>
<style>
    img {
        border: 2px ridge goldenrod;
        margin: 10px;
        border-radius: 10px;
    }
</style>

However, if we have an image in the template itself (that is, not using slots), then it will get the internal style. Let's add a decorative camera that floats to the right:

<Template>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Studijskifotoaparat.JPG/312px-Studijskifotoaparat.JPG" />
    <slot class="flex-gallery"><p><em>No photos found.</em></p></slot>
</Template>
<Style>
    img { float: right }
</Style>

Note that this does not get the global style, but does get the component style.

Step 4: Vanishing act

Finally, let's practice one more component mode: vanish. Note the image at the top of this tutorial doesn't show any <x-PhotoGallery> component. That's because it vanished!

This will not use the ShadowDOM, but still provide partial isolation: Outer CSS will influence inside the component, but the component's CSS will remain isolated and not influence slots. More importantly, the component will "vanish" -- that is, it will remove itself when it is displayed, leaving no trace of the web component, and a simpler / potentially more performant DOM structure.

This is done just like mode="shadow":

<Component name="PhotoGallery" mode="vanish">

`<x-PhotoGallery>` - Complete Example

Finally, we put everything together, and we end up with the final results. Feel free to copy and paste the following to try it out:

<template Modulo>
    <Component name="PhotoGallery" mode="vanish">
        <Template>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Studijskifotoaparat.JPG/312px-Studijskifotoaparat.JPG" />
            <slot class="flex-gallery"><p><em>No photos found.</em></p></slot>
        </Template>
        <Style>
            .flex-gallery {
                border: 2px ridge gray;
                padding: 10px;
                display: flex;
                flex-wrap: wrap;
            }
            img {
                float: right;
            }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<style>
    img {
        border: 2px ridge goldenrod;
        margin: 10px;
        border-radius: 10px;
    }
</style>
<x-PhotoGallery>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Helen_KellerA.jpg/193px-Helen_KellerA.jpg" title="Hellen Keller" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Mark_Twain_1907.jpg/187px-Mark_Twain_1907.jpg" title="Mark Twain" />
</x-PhotoGallery>

Conclusion

In this section, we practice using slots to make more user-friendly components, and learned how we can use shadow and vanish rendering modes to isolate our components in different ways. Consider these all to be "tools" for your web component "toolbox", and very handy when dealing with conflicting CSS. In the next tutorial we'll be going deeper with Template, so be sure to follow to catch how to use {% for %}, {% if %} and other control-flow template-tags!

Learn template filters and state binding to quickly build a button designer tool (Learn Modulo.js - Part 4 of 10)

michaelb — Mon, 23 Sep 2024 18:33:00 +0000

👋 Hey all, welcome back this week! Each tutorial is self-contained, so feel free to start at the beginning, or just plunge in here.

Introducing: The ButtonDesigner Component

This time, our task is super useful and practical. Our task in this tutorial will be to build a button customizer component. You could use this to try out different CSS styles, or create a tool like this for your team customized for particular parameters to enable them to generate new CSS ideas quickly. These types of little CSS design tools are very popular to make, and thanks to Modulo and the power of State, we can create one with less than 40 lines of code.

Filtering it up

Today we'll introduce an important new concept: Template filters. This enables us to modify state values slightly before displaying them (think "photo / Instagram filter for your data").

Last time we ended with a snippet a little like the one below. However, in this tutorial, we've changed the "Template" to show a button with inline styles. We've changed the State variables to now mostly be CSS values that are templated in the style= attribute (Style component parts don't support this, fyi). To begin this tutorial, copy and paste the following into a new file, and open in your browser:

<template Modulo>
    <Component name="ButtonDesigner">
        <Template>
            <p><label>Label</label>
            <input [state.bind] name="text" /></p>
            <button style="
                    color: white;
                    background: {{ state.color }};
                    border: {{ state.size }}px {{ state.border }} #88888888;
                    padding: 4px;
                    font-size: 14px;
                    border-radius: 5px;
                ">
                {{ state.text }}
            </button>
        </Template>
        <State
            size="10"
            border="solid"
            color="#E66100"
            text="click me"
        ></State>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-ButtonDesigner></x-ButtonDesigner>

Why style attributes? Note we can't template Style tags, fyi, as those are get bundled into static CSS.

Introducing Part 4

Why not change DOM directly? Our previous tutorial ended with some musings on the importance to state. If you are a JavaScript veteran, you may know that earlier jQuery-style JS frameworks were more concerned with manipulating the DOM directly. Now, the modern approach is to combine templating and/or DOM building tools (e.g. JSX, virtual DOM) with "state management" (e.g. Redux, useState, context, refs, etc). Modulo takes the modern approach: The "moving parts" of the application are put into state, and then by changing state, the component re-displays itself, showing the new data. This "detangles" the spaghetti mess of DOM manipulation: Instead of one button inserting stuff over here, and one input reaching in and sending data over there, the "state" creates a single "choke-point" that keeps data "flowing" in
one direction. No matter what you want changed, you do one thing: Change state and rerender!

State also allows binding of different inputs for different data types. For example, you can use type="color" for a color picker, type="range" for a range slider. There's also checkboxes, selects, number pickers, date pickers, and more! For starters, check out the following:

<textarea [state.bind] name="body"></textarea>
<input [state.bind] name="color" type="color" />
<input [state.bind] name="size"
        type="range" min="12" max="28" step="2" />

Clarification: These are all just HTML5, built-in input types. To peruse a full selection of input types, consider MDN's "The HTML5 input types" Guide in their Learn Web Development series. The State CPart will look at the type attribute in order to use the right data types.

Step 1: Adding select and color picker

We can bind select tags and color picker inputs the same way we bind anything else:

<p><label>Border</label>
<select [state.bind] name="border">
    <option value="solid">Solid</option>
    <option value="outset">Outset</option>
    <option value="groove">Groove</option>
    <option value="dashed">Dashed</option>
</select></p>
<p><label>Color</label>
<input [state.bind] name="color" type="color" /></p>

Step 2: Adding "range" slider and

Note that sliders require specifying min, max, and step (e.g. distance between "snaps"):

<p><label>Size</label>
<input [state.bind] name="size" type="range" min="0" max="20" step="1" /></p>

Introducing: Template filters

The Modulo templating language has two core features: filters (for formatting values), and template-tags (for control-flow). We will learn the first of these now.

"No-filter", no longer!

Template filters "format" or otherwise transform template variables. The template filter syntax consists of taking a template variable and adding a vertical bar followed the name of a filter (e.g. varName|filterName). The following example will transform the text contained in the props.name template variable to make it all uppercase:

Hello {{ props.name|upper }}

Filters can be combined together, one after the other. Think of them like a "transformation pipeline". For example:

Hello {{ props.name|upper|reversed }}

No argument from me

Some filters can also take extra modifiers or options. This is called the template filter argument. In this next snippet, see how the |allow template filter ensures that only "circle" or "square" are permitted values for "shape":

<strong>Shape:</strong> {{ state.shape|allow:"circle,square" }}

Note how the argument is separated from the filter with a colon: The general syntax is varName|filterName:"argument".

Built-in Filters and Custom Filters - Modulo comes with many filters pre-installed: Read Templating Reference - Built-In Filters for examples of all filters available. Utilizing JavaScript, you can also define custom filters. Read Templating - Filters for more information.

Steps to add

Let's get back at our component and spice it up with some filters:

Step 3: Using filters - `|add`

Recall that the slider specied as 0-20 by the range allowed. Using the |add filter lets us quickly do some math to add numbers, allowing for the padding to track at 2px bigger than state.size (and thus be 2-22px range), while font-size will be 14px bigger (and thus 14-34px range):

padding: {{ state.size|add:2 }}px;
font-size: {{ state.size|add:14 }}px;

Step 4: Multiple filters - `|add|multiply`

As mentioned previously, we can also combine filters. For example, we may want border-radius to "grow" even faster than anything else. We can do that with the |multiply: filter:

border-radius: {{ state.size|multiply:2|add:5 }}px;

`<x-ButtonDesigner>` - Complete Example

Finally, we put everything together and slap on a Style to make the labels line up, along with "for" attributes to make the labels correctly correspond to their inputs for accessibility, and we end up with the final results. Feel free to copy and paste the following to try it out:

<template Modulo>
    <Component name="ButtonDesigner">
        <Template>
            <p><label for="text">Label</label>
            <input [state.bind] name="text" /></p>
            <p><label for="border">Border</label>
            <select [state.bind] name="border">
                <option value="solid">Solid</option>
                <option value="outset">Outset</option>
                <option value="groove">Groove</option>
                <option value="dashed">Dashed</option>
            </select></p>
            <p><label for="color">Color</label>
            <input [state.bind] name="color" type="color" /></p>
            <p><label for="size">Size</label>
            <input [state.bind] name="size" type="range" min="0" max="20" step="1" /></p>
            <button style="
                    background: {{ state.color }};
                    color: white;
                    padding: {{ state.size|add:2 }}px;
                    font-size: {{ state.size|add:14 }}px;
                    border-radius: {{ state.size|multiply:2|add:5 }}px;
                    border: {{ state.size }}px {{ state.border }} #88888888;
                ">
                {{ state.text|capfirst }}
            </button>
        </Template>
        <State
            size:=10
            border="solid"
            color="#E66100"
            text="click me"
        ></State>
        <Style>
            label {
                min-width: 100px;
                display: inline-block;
            }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-ButtonDesigner></x-ButtonDesigner>

Conclusion

In this section, we learned how to use [state.bind] directive to all types of inputs. We learned how to use Modulo's templating language to include variables and format values using filters. At this point, you've learned enough to be dangerous! In the next step, you'll learn more about more component render and CSS options, along with the first template tags, which will let you make useful, simple interactive widgets for websites. We're almost half way there, but have A LOT more ground to cover! Be sure to follow for more tutorials like this, and, as always, feel free to ask questions or suggestions in the comments.

Learn state management by making a (silly) story generator (Learn Modulo.js - Part 3 of 10)

michaelb — Tue, 17 Sep 2024 23:35:00 +0000

👋 Welcome back! Didn't catch Part 1? No worries, you can start at the beginning, or just plunge in here!

Introducing: The SillyStory Web Component

Our task in this tutorial will be to build a story generating component. This will give us lots of practice with using State. Last time we ended with a snippet a little like the one below. However, in this tutorial, we've changed the "Template" to show a silly story, generated by words given as Props. This allows the component to be "re-used" with different silly words. To begin this tutorial, copy and paste the following into a new file, and open in your browser:

<template Modulo>
    <Component name="SillyStory">
        <Props
            name
            count
            verb
            animal
            noun
        ></Props>
        <Template>
            <p>Professor {{ props.name }} had over {{ props.count }} degrees in {{ props.noun }}-{{ props.verb }}ing from {{ props.name }} University. One day, the Professor decided to travel to {{ props.name }} City, a magical land filled with talking {{ props.animal }}s.</p>
            <p>The quest was bold: The Professor was to teach {{ props.count }} {{ props.animal }}s how to {{ props.verb }} a {{ props.noun }}.</p>
        </Template>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-SillyStory name="Nonsense" count="one million" verb="toot" animal="duck" noun="kazoo"></x-SillyStory>

Introducing Part 3

This tutorial introduces one of the central concepts of not just Modulo, but many popular modern web frameworks, including React.js, Vue.js and others. This is the concept of State.

So far, our components have been static and unchanging. They can't do a lot. They might be useful for refactoring HTML into more D.R.Y. ("Don't Repeat Yourself"), reusable components, but not much more than that. They can't validate form data, use APIs, or be used in complete applications. In fact, they can't have any sort of interaction whatsoever, or any dynamic or changing content. We want reactivity in our components.

You can think of the concept of these state variables as being like "buckets for data", or "blanks that can be filled in". They allow us to "give a name" to refer to data, allowing for more generic code and templates to be written. That way, your component can have changing content: Change the state, see the result!

Step 1: Adding a State part

State Component Parts are defined much like Props, except that instead of just listing the attribute names, initial values must be provided as defaults. We can "transform" our Props into State like this:

<State
    name="Nonsense"
    verb="toot"
    noun="kazoo"
    count="one hundred"
    animal="duck"
></State>

Step 2: Include State in your template

State can be inserted into your Template just like Props. In fact, all we need to do to get the previous example working again with our new-fangled State part is to just change props to state, as follows:

<Template>
    <p>Professor {{ state.name }} had over {{ state.count }} degrees in {{ state.noun }}-{{ state.verb }}ing from {{ state.name }} University. One day, the Professor decided to travel to {{ state.name }} City, a magical land filled with talking {{ state.animal }}s.</p>
    <p>The quest was bold: The Professor was to teach {{ state.count }} {{ state.animal }}s how to {{ state.verb }} a {{ state.noun }}.</p>
</Template>

If you perform these two steps correctly, your story generator will still work, except it won't need the attributes any more, since the data will come from "state". This means you should remember to delete them from the use of the component at the bottom, so it looks like: <x-SillyStory></x-SillyStory>

Introducing: The `state.bind` directive

So far, we can manually change state in the source code, but our app is still not interactive, since the actual users (that is, non-coders) cannot change the state. This is where "binding" comes into play, where user input is "bound" to state, such that users of your app can also modify state variables while using your app.

To "bind", we'll need to use a directive. A directive is a type of HTML attribute. You can recognize directive by spotting certain special characters in the attribute name. There are other directives, but for now, we'll only care about one directive: [state.bind].

What does this mean? It will "sync up" the input with the state after every keystroke. The binding is "two-way": Modifying state modifies the input, and modifying the input modifies state. For example, <input [state.bind] name="animal" /> is an input HTML tag with a [state.bind] directive. In this case, it will "bind" the input to the "animal" state variable.

Step 3: Bind our first input to state

In our case, to add an labelled input that's bound to our State variable "animal", we can do this:

<Template>
    <p><label>Animal: <input [state.bind] name="animal" /></label></p>
    <!-- story goes here... -->
</Template>
<State
    animal="ducks"
></State>

Step 4: Finishing up and testing it out

Now, "rinse and repeat" for all the remaining inputs:

<p><label>Name: <input [state.bind] name="name" /></label></p>
<p><label>Verb: <input [state.bind] name="verb" /></label></p>
<p><label>Noun: <input [state.bind] name="noun" /></label></p>
<p><label>Count: <input [state.bind] name="count" /></label></p>
<p><label>Animal: <input [state.bind] name="animal" /></label></p>

Here's how to test it out: First, make sure all the inputs start filled in (if you had a typo in a name, it could cause this to not show -- check the Dev Tools for errors!). Then, try editing each of your different inputs. Do you see how it "reacts" to your typing, automatically re-rendering each story as you type new silly words?

`<x-SillyStory>` - Complete Example

Combining it all, we get the following (silly) results:

<template Modulo>
    <Component name="SillyStory">
        <Template>
            <p><label>Name: <input [state.bind] name="name" /></label></p>
            <p><label>Verb: <input [state.bind] name="verb" /></label></p>
            <p><label>Noun: <input [state.bind] name="noun" /></label></p>
            <p><label>Count: <input [state.bind] name="count" /></label></p>
            <p><label>Animal: <input [state.bind] name="animal" /></label></p>
            <p>Professor {{ state.name }} had over {{ state.count }} degrees in {{ state.noun }}-{{ state.verb }}ing from {{ state.name }} University. One day, the Professor decided to travel to {{ state.name }} City, a magical land filled with talking {{ state.animal }}s.</p>
            <p>The quest was bold: The Professor was to teach {{ state.count }} {{ state.animal }}s how to {{ state.verb }} a {{ state.noun }}.</p>
        </Template>
        <State
            name="Nonsense"
            verb="toot"
            noun="kazoo"
            count="one hundred"
            animal="duck"
        ></State>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-SillyStory></x-SillyStory>

State & beyond

Some food for thought: How can this be used in UI development? Think about State in every day web applications: Forms, tabs, modal pop-up interfaces... Really, anything that is dynamic or reactive. All of these are State changing. State can hold CSS classes, CSS values, be bound to sliders and other types of inputs, and so much more! In other words, we have a lot more to cover on State, but we'll save that for Part 4. Be sure to follow for more tutorials like this, and, as always, feel free to ask questions or suggestions in the comments.

Learn how to make a styled picture frame web component with props (Learn Modulo.js - Part 2 of 10)

michaelb — Wed, 11 Sep 2024 17:36:00 +0000

👋 Welcome back! Didn't catch Part 1? No worries, you can start at the beginning, or just plunge in here!

Introducing: The PictureFrame Component

Our task in this tutorial will be to build a picture frame component, for styling photographs on a web app. Last time we ended with a snippet a little like the one below. However, in this tutorial, we've changed the "Template" to show instead a pink/salmon "picture frame" of a hippo with a caption below it. To begin this tutorial, copy and paste the following into a new file, and open in your browser:

<template Modulo>
    <Component name="PictureFrame">
        <Template>
            <div style="display: inline-block; border: 10px inset salmon; padding: 10px; margin: 10px; width: 100px; background: pink;">
                <img
                    style="width: 50px;"
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
                />
                <p>Photograph: <em>The Return of the Hippo</em></p>
            </div>
        </Template>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-PictureFrame></x-PictureFrame>

Introducing Part 2

In this tutorial, we'll add a Style to plain HTML components, along with a discussion on the first core concept in the Modulo framework: Component Parts, before finally peeking at one more important component part: Props.

First, you might notice something messy about the above code. All the style is rammed into a style= attribute! When coding CSS, placing all our styles in inline style= attributes is often hard to maintain. Modulo supports the "Style" Component Part to let us write CSS code more naturally. What's a Component Part? Well, we'll get to that as well. First, let's get stylish!

Step 1: Creating a Style Component Part

<Template>
    <div class="salmon-frame">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" />
        <p>Photograph: <em>The Return of the Hippo</em></p>
    </div>
</Template>
<Style>
    img {
        width: 50px;
    }
    .salmon-frame {
        display: inline-block;
        border: 10px inset salmon;
        padding: 10px;
        margin: 10px;
        width: 100px;
        background: pink;
    }
</Style>

Much better! This will look and behave much like a "Style" tag in HTML, allowing you to create classes and selectors to your heart's content.

Step 2: Styling the host component itself

Often, you'll want to style the Web Component itself (in this case, the <x-PictureFrame> tag). We can use the special :host selector for this:

<Style>
    :host {
        text-align: center;
    }
    /* ... etc ... */
</Style>

Introducing Component Parts

The central concept to Modulo is that of Component Parts. All component definitions consist of some number of Component Parts. Thus, a component definition is really just a collection of Component Part definitions. "Under the hood" of your component, each Component Part will have a different role to contribute to the functionality of your component.

We've already learned the two most basic Component Part:

Template - <Template> - Templates are where you put any arbitrary HTML code that you want your component to contain. For now, we'll just include some unchanging HTML. In the next tutorial, we'll learn how to use "templating language" to control what HTML is produced in what circumstance.
Style - <Style> - Just like the <style> tag in HTML. However, it has one one import distinction: The styles contained will be limited to your component. This is because CSS written here will be automatically prefixed so that it will only apply to your component and any HTML generated by the Template Component Part. This is quite useful: It allows us to write isolated CSS for each component without even thinking about it. Keeping our CSS separate means fewer unexpected interactions.

Keep in mind both Style and Template have a lot of configurable options, but for our usage, the default is good enough.

Introducing Props

Now, let's introduce a third important Component Part: Props

In the previous section, we were mostly concerned with defining components. Recall that components are defined once, but can be used many times. The purpose of Props is to allow more flexibility in that second step: Props Component Part defines the properties that can be customized about a component each time it is reused.

Props to us!

Right now, our picture frame doesn't have a way to be re-used for different photos or captions. We can't just all be chased by hippos forever! 🦛🦛🦛

We want to eventually be able to do something like this:

<x-PictureFrame
    image="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
    caption="Hippopotamus out of water"
    photographer="Lee R. Berger"
></x-PictureFrame>

Then, it'd feel like a "real" HTML tag -- that is, configurable via attributes. Let's "peel back the layers" and examine out how this can be accomplished using Props.

Step 3: Adding Props

In order for a component to be able to "receive" props when it is reused, we must define Props. Props definitions are like previous definitions, except they have no contents and are just an opening tag with attributes, followed by a closing tag. See the following:

<Props
    image
    caption
    photographer
></Props>

Note: A common mistake is to forget to include Props. Every attribute you expect your component to receive must be listed in Props to be available for the next step.

Step 4: Using Props in Template

Now, we'll get our first sneak peak at the true power of Templates: Adding in data and values into your HTML. You can use the following syntax to get your "props" and inject them into the generated HTML:

<div class="salmon-frame">
    <img src="{{ props.image }}" />
    <p>Photograph: <em>{{ props.caption }}</em></p>
    <p>Photographer: <em>{{ props.photographer }}</em></p>
</div>

Note the {{ and }}: This the templating syntax that indicates where the "props" values get inserted.

`<x-PictureFrame>` - Complete Example

Combining it all, we get the following results. Note how our custom Web Component can be re-used with different attributes:

<template Modulo>
    <Component name="PictureFrame">
        <Props
            image
            caption
            photographer
        ></Props>
        <Template>
            <div class="salmon-frame">
                <img src="{{ props.image }}" />
                <p>Photograph: <em>{{ props.caption }}</em></p>
                <p>Photographer: <em>{{ props.photographer }}</em></p>
            </div>
        </Template>
        <Style>
            :host {
                text-align: center;
            }
            img {
                width: 130px;
            }
            .salmon-frame {
                display: inline-block;
                border: 10px inset salmon;
                padding: 10px;
                margin: 10px;
                width: 200px;
                background: pink;
            }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<h1>Learn Modulo.js: Part 2</h1>
<h2>Style and Props</h2>
<x-PictureFrame
    image="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
    caption="Hippopotamus out of water"
    photographer="Lee R. Berger"
></x-PictureFrame>

Conclusion

That's all for Part 2! Be sure to follow to catch the rest, and, as always, feel free to ask questions or suggestions in the comments.

Writing your first web component (Learn Modulo.js - Part 1 of 10)

michaelb — Thu, 05 Sep 2024 17:37:00 +0000

👋 Welcome, all new subscribers and returning component coders! I'm kicking off a new 10 part tutorial series. While my other tutorials have used Modulo.js to build specific, fun little apps like pokemon dance parties, retro extruded text editors, or video game galleries, this tutorial series will build up on basic principals, starting from square one: What is a Web Component?

The Next Step After HTML and CSS

Have you just learned the basics of HTML and CSS, and are curious about going taking the next step, and want to build bigger and more complete web applications? Or, are you already a web developer or JavaScript pro, and just want to build quick and light web apps without too much bloat, tooling, or excess dependencies?

If so, Web Components are for you! They let you create reusable portions of code. By taking this tutorial, you'll learn how to fix repetitive, difficult-to-maintain HTML and CSS. It also uses only minimal tools and libraries, meaning you won't need Node.js, NPM, or a massive node_modules. It also lets you hone your skills in modern frontend web development: In the future tutorials in this series, you'll learn concepts like slots, shadowDOM, props, templating, state management, and more! These are concepts that are transferable to use other popular frameworks, and Modulo's simple, declarative approach could be a more inviting way to learn the core concepts without getting bogged down in complex setup.

Introducing the Modulo Framework

What is Modulo? Modulo is a free software / open source, small-but-mighty web framework written in JavaScript. It has no dependencies, and uses HTML syntax so it can set itself up on page load, with no need for Node.js or compilation. You can use it in a plain HTML "static site" (e.g. when you assemble HTML, CSS, and other static assets in a directory to launch on a static web host), or any other existing web app. This tutorial is about using Modulo as a tool to build Web Components.

Introducing Part 1

In Part 1, we'll learn how to build a simple "Hello World" component. In future parts, we'll learn how to add in Style, Props, State, reactive forms, slots, APIs, and so much more, but for now, we'll start with the basics: Going beyond basic HTML and CSS by creating and re-using a Web Component with Modulo.

Step 1: Including Modulo

Before we can use Modulo, we'll have to include the framework. The entire framework is contained in "Modulo.js", a file containing 2000-lines of JavaScript. This means that starting a Modulo project requires literally no dependencies beyond your browser and editor. So, just open up a blank HTML file and get going with the following very simple starter code:

<template Modulo>
    <!-- our stuff will go here eventually... -->
</template>
<script src="https://unpkg.com/mdu.js"></script>

Step 2: Defining your first component

Now that we have included it, we can start writing Modulo definitions and use the framework in general. We define our first component by creating a Modulo <Component ...> definition, and putting inside of it a <Template> definition, as below:

<Component name="HelloWorld">
    <Template>
        Hello <strong>Modulo</strong> World!
    </Template>
</Component>

This "Template" thus becomes the "template" for our component: Every time our component shows up on the page, it will render the given template inside of it.

Step 3: Using your first component

Once defined, you can use a component by referring to it's name as though it were a plain HTML tag:

<x-HelloWorld></x-HelloWorld>

This will cause the following to show on the screen:

Hello Modulo World!

Note that once registered, components can go anywhere that plain HTML tags can go, and can be styled with CSS the same way as well. In other words, creating a component is like creating a brand-new type of HTML tag that can be used anywhere, just like the original HTML tags of <div>, <a>, etc. For example, we can put our component into other tags like this:

<p>One time: <x-HelloWorld></x-HelloWorld></p>
<div>Another time: <x-HelloWorld></x-HelloWorld></div>

Step 4: Enhancing your first component

The "Template" can have more advanced code if we want. We can mix in CSS and classes. For example:

<Component name="HelloWorld">
    <Template>
        Hello <strong style="color: goldenrod">Modulo</strong> World!
        <p class="neat">Any HTML can be here!</p>
    </Template>
</Component>

Note that if you use the .neat selector in your CSS, this will apply to that span element, just like normal.

`<x-HelloWorld>` - Complete Example

Combining it all, we get the following results. Note how our custom Web Component can be used and re-used as though it were a normal, HTML tag:

<template Modulo>
    <Component name="HelloWorld">
        <Template>
            Hello <strong style="color: goldenrod">Modulo</strong> World!
            <p class="neat">Any HTML can be here!</p>
        </Template>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<h1>Learning Modulo Part 1</h1>
<h2>Your first Web Component</h2>
<main style="border: 3px solid violet; padding: 10px; margin: 10px; border-radius: 3px">
    <section>One time: <x-HelloWorld></x-HelloWorld></section>
    <div>Another time: <x-HelloWorld></x-HelloWorld></div>
</main>

Conclusion

That's all for Part 1! There's another 9 parts to go, so follow for more tutorials like this, and, as always, feel free to ask questions or suggestions in the comments. Next time... we're getting stylish!

Learn how to create a API-backed Zelda BOTW monster gallery web component in <40 lines (Modulo.js)

michaelb — Mon, 02 Sep 2024 20:12:12 +0000

Modulo tutorials are back!

Hey all! I'm back with Modulo tutorials after a summer hiatus. I've got a bunch more tutorials in the works -- so stay tuned. That said, if you have any particular ideas for my next topic, be sure to let me know in the comments!

My last tutorial was a super quick and fun "HTML-only, no-JS" tutorial on API-driven Pokémon Dance Party component in less than 30 lines of HTML Web Component code. Some of my previous tutorials were a bit more serious, such as this more advanced tutorial on managing private and public state. If that sounds a little dry, then you're in luck, because today's tutorial is another fun one, and about yet another beloved video game... Zelda: Breath of the Wild!

Of course, as always, the techniques learned in this tutorial are applicable to any API, so keep on reading to learn more about an API-driven gallery!

How to use the Hyrule Compendium API

This tutorial is 100% thanks to the wonderful Aarav Borthakur's free, MIT-licensed, and generously hosted Hyrule Compendium API, which is a fun, fan-maintained database and API for retrieval of Zelda: Breath of the Wild franchise information and media. We will be using the "Monsters" endpoint, available here: https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters

Screenshot

Try it out now, in less than 30 seconds: 🚀🚀🚀 Wanna skip ahead? Scroll to the end and copy the 39 lines of HTML code into any local HTML file, and then open it in your browser. Modulo has no dependencies and even runs embedded in local HTML files, so it's really that easy!

Start with the data

Let's start with just 6 lines of code, with a StaticData and a Template to display it:

<Template>
   <pre>API DATA: {{ staticdata|json:2 }}</pre>
</Template>
<StaticData
  -src="https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters"
></StaticData>

In this snippet, we have a very simple, one-line <Template> that dumps the staticdata.data property of the returned Hyrule Compendium API. We apply the |json:2 filter to display it in a more readable format. The StaticData supports JSON (among other formats) out of the box, you just give it the URL to the API and you can then start using the data. Is StaticData confusing? Try this tutorial on integrating the GitHub API, or the play around with the interactive examples in the "StaticData" section of the tutorial of the Modulo.js tutorial.

Try running that snippet. See the resulting data? We'll need to loop through that with a for loop.

Creating an image gallery

Now that we can see that an attribute .data contains an Array of Objects, let's loop through it and generate a gallery:

<Template>
    {% for monster in staticdata.data %}
        <img src="{{ monster.image }}" style="width: 200px;" />
    {% endfor %}
</Template>

This will generate many img tags, each with a src= assigned to the "image" properties of the Objects in the original JSON Array, and the {% for %} template-tag is the syntax to duplicate a bit of HTML for every item in the array (not to mention each index, e.g. a number counting up from 0). For further practice, the for-loop has lots of interactive examples in part 4 of the Modulo.js tutorial.

Creating State and Script

The next most important thing to do is create a new Script tag, which we can use to write a simple, one-line JavaScript function:

<State
    selected:=null
></State>
<Script>
    function select(payload) {
        state.selected = payload;
    }
</Script>

This is a core technique for scripting while using Modulo: Create functions that let you modify state using JavaScript. In this case, it does a very simple operation: "Save this monster for later". More precisely, it assigns the state variable "selected" to the given payload. This way, the state variable "selected" becomes a sort of "stash" for whatever monster was just picked from the API.

Attaching the click event

Now, let's add another piece of the puzzle: Attaching the click event. See below:

<img @click:=script.select payload:="{{ monster|json }}" />

This was done with the event attachment syntax (@click:=, in this
case), and a payload attribute, that lets us pass along the monster we are choosing by clicking this image. Events and Script tags can be a confusing topics if you are new to JavaScript (and even if you aren't!), so peruse the examples on this page for more examples of using Script component parts and attaching events.

Attaching the click event

Finally, let's conditionally render the monster info when a monster is selected:

{% if state.selected %}
    <h1>{{ state.selected.name|capfirst }}</h1>
    <p><img src="{{ state.selected.image }}" /></p>
    <p>{{ state.selected.description }}</p>
{% else %}
    <h1>Welcome to Hyrule Monster Guide!</h1>
    <p><em>&larr; Select a monster to learn more</em></p>
{% endif %}

This will initially show the "Welcome" message (since state.selected begins as null). Then, as soon as someone clicks on a monster image, the state.selected variable will no longer be null, and
instead the contents will displayed formatted with h1 and p tags, with some tweaks applied (|capfirst makes the first letter capital).

`<x-MonsterGuide>` - Embeddable snippet

Combining it all, we then wrap everything in a display: grid to make the side-by-side layout, and a overflow: auto to the left div the scrollbar. Finally, we can add a few final CSS tweaks to the second div (padding, margin, and a linear-gradient), and we get the following results that can be embedded anywhere:

<!DOCTYPE html>
<template Modulo>
    <Component name="MonsterGuide">
        <Template>
            <main style="display: grid; grid-template-columns: 2fr 1fr">
                <div style="overflow: auto; height: 95vh;">
                    {% for monster in staticdata.data %}
                        <img src="{{ monster.image }}"
                            @click:=script.select payload:="{{ monster|json }}"
                            style="width: 200px;" />
                    {% endfor %}
                </div>
                <div style="padding: 10px; margin: 10px; background: linear-gradient(to bottom, lightyellow, goldenrod);">
                    {% if state.selected %}
                        <h1>{{ state.selected.name|capfirst }}</h1>
                        <p><img src="{{ state.selected.image }}" /></p>
                        <p>{{ state.selected.description }}</p>
                    {% else %}
                        <h1>Welcome to Hyrule Monster Guide!</h1>
                        <p><em>&larr; Select a monster to learn more</em></p>
                    {% endif %}
                </div>
            </main>
        </Template>
        <State
            selected:=null
        ></State>
        <StaticData
            -src="https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters"
        ></StaticData>
        <Script>
            function select(payload) {
                state.selected = payload;
            }
        </Script>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-MonsterGuide></x-MonsterGuide>

I hope you enjoyed this tutorial, if so, follow for more like this!

How to build an API-driven Pokémon Dance Party component in less than 30 lines of HTML Web Component template code (+ Modulo.js)

michaelb — Sat, 23 Mar 2024 02:42:38 +0000

Hey everyone! Are you excited about anything this beautiful Spring Friday? I am excited to be back to writing another tutorial after a month-long hiatus... and also excited to make it about one of my favorite video games of all time: Pokémon! As always, if you have an idea for a next topic, be sure to let me know in the comments!

"HTML-only, no JS!" ✨🪄

In previous tutorials, I focused more on design: I showed how to make a simple gradient picker, or a more flashy 3D extruded text art effect, all written in pure HTML and templating, leaving the JS heavy-lifting to the framework.

Today's tutorial takes a very different approach: It shows how you can quickly display public "web APIs" (that is, public data sets or web services) with just a few lines of code.

How to use the PokéAPI

This tutorial is 100% thanks to PokéAPI, which is a fun, fan-maintained database and API for retrieval of Pokémon franchise information and media. For example, this link provides info in JSON format for my favorite pink puff: https://pokeapi.co/api/v2/pokemon/jigglypuff

The final result

Try it out now, in less than 30 seconds: 🚀🚀🚀 Wanna skip ahead? Scroll to the end and copy the ~30 lines of HTML code into any local HTML file, and then open it in your browser. Modulo is a single-file framework with no dependencies and even runs embedded in local HTML files, so it's really that easy!

Starting with a basic H1 and StaticData

Let's start with something super basic: Let's get info from the API. We can start with <Template> and <StaticData>:

<Template>
   <h1>{{ staticdata.name|capfirst }} Party!</h1>
</Template>
<StaticData
  -src="https://pokeapi.co/api/v2/pokemon/jigglypuff"
></StaticData>

In this snippet, we have a very simple, one-line <Template> that shows the name property of the returned PokéAPI. We apply the |capfirst filter to capitalize it (it is all-lowercase by default). The StaticData supports JSON (among other formats) out of the box, which means all it needs is the URL to the API and it will integrate it into your component. If the StaticData concept is giving you conceptual trouble, try this tutorial on integrating the GitHub API, or the play around with the interactive examples in Part 4 of the Modulo.js tutorial.

Looping through generations and the games

We have to write 2 for loops now: One for the generations, and one for the games.

How did I figure this out? I clicked through the results of the API, and deduced that .sprites, and specifically .sprites.versions has all the "generations" of games in the JSON Object data structure. This is where the data gets tricky, since it's not accessible "at the top level" (like .name). We'll need to "drill down" to the right data.

So, nesting the two for-loops, we get:

{% for generation, games in staticdata.sprites.versions %}
    {% for game, images in games %}

Showing the `front_default` image in the loop

Finally, we'll need to reference the front_default image in an <img> tag to display it. See below:

{% for generation, games in staticdata.sprites.versions %}
    {% for game, images in games %}
        <img src="{{ images.front_default }}" class="dancing-image" />
    {% endfor %}
{% endfor %}

The {% for %} loop repeats the HTML code contained within. This is how it "duplicates" the <img src="..."> over and over to show all the images. For more practice on {% for %} loops, play around with the interactive examples in the documentation.

Adding the CSS animation

Finally, to wrap this up, we'll need to make 'em dance! I made a "PokeDance" animation, which rocks back and forth, notably making the transform-origin: bottom center to make it look like their "center of gravity" is at the bottom (at their feet), as such:

.dancing-image {
    transform-origin: bottom center;
    animation: PokeDance 3s ease-in-out infinite alternate;
    width: 200px;
}
@keyframes PokeDance {
   20% { transform: rotate(15deg); }    
   40% { transform: rotate(-10deg); }
   60% { transform: rotate(5deg); } 
   80% { transform: rotate(-5deg); }    
  100% { transform: rotate(10deg); }
}

`<x-PokeParty>` - Embeddable snippet

Combining it all, and adding a few final tweaks (the title on the image, and a tweak of adding -auto-isolate:=false to prevent PokeDance animation from being modified), we get the following:

<template Modulo>
    <Component name="PokeParty">
        <Template>
            <h1>{{ staticdata.name|capfirst }} Party!</h1>
            {% for generation, games in staticdata.sprites.versions %}
                {% for game, images in games %}
                    <img class="dancing-image"
                        title="{{ generation }}: {{ game }}"
                        src="{{ images.front_default }}" />
                {% endfor %}
            {% endfor %}
        </Template>
        <StaticData
            -src="https://pokeapi.co/api/v2/pokemon/bellsprout"
        ></StaticData>
        <Style -auto-isolate:=false>
            .dancing-image {
                transform-origin: bottom center;
                  animation: PokeDance 3s ease-in-out infinite alternate;
                  width: 200px;
            }
            @keyframes PokeDance {
                 20% { transform: rotate(15deg); }  
                 40% { transform: rotate(-10deg); }
                 60% { transform: rotate(5deg); }   
                 80% { transform: rotate(-5deg); }  
                100% { transform: rotate(10deg); }
            }
        </Style>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-PokeParty></x-PokeParty>

Creating a 3D extruded text Word Art picker in only ~30 lines of pure HTML web component code + 1 extra file

michaelb — Sat, 27 Jan 2024 15:09:12 +0000

"HTML-only, no JS!" ✨🪄

Hey all! Today's Modulo.js tutorial will be another "HTML-only, no JS" tutorial. The 2000-line, small-but-mighty Modulo framework adds just enough JS magic that we can build these cool design tools in pure HTML. Have an idea for a next topic? Be sure to let me know in the comments!

In previous tutorials, I covered topics like adding an API or JSON/CSV file in a few lines of HTML, and more recently, I showed how to make word art skew adjusters or a word art shadow throw and range picker tool. Today's tutorial will be similar to these last two, and could even be combined (lemme know if you try this!). However, today we're focused on generating a more advanced 3D effect from a palette of colors using the power of Modulo's {% for %} loop template tag. Before we begin, a warning: Text-shadows are intensive and can slow down pages (especially on mobile), so use this technique cautiously on any public-facing pages!

The final result

Animated GIF

Screenshot

Try it out now, in less than 30 seconds: 🚀🚀🚀 Wanna skip ahead? Scroll to the end and copy the ~30 lines of HTML code into any local HTML file, and then open it in your browser. Modulo has no dependencies and even runs embedded in local HTML files, so it's really that easy!

Starting with H1 and a text input

As with previous tutorials, we'll start with <Template> and <State>:

<Template>
  <label>Text: <input [state.bind] name="text" /></label>
  <h1 style="text-shadow: 0 0 3px #fff
      ,1px 1px 0    red
      ,1px 1px 10px #00000033;">{{ state.text }}</h1>
</Template>
<State
  text="Modulo 3D Text Generator!"
></State>

In this snippet, we have a <input> element that's bound to State using [state.bind], followed by an H1 element with a hard-coded (red) text-shadow effect: The 0 0 3px #fff creates a 3PX white glow around the top, the 1px 1px 0 #B90183 creates the "solid"-looking 3D extrusion effect, and finally the 1px 1px 10px #00000033 creates a 10px blurred shadow at about ~20% opacity. If the State concept is giving you conceptual trouble, try this tutorial on a font-picker, or the play around with the interactive examples in Part 2 of the Modulo.js tutorial.

Generating a shadow from State

Our next step is to make the shadow get auto-generated from state. Let's start by hard-coding 6 shadows (3 red, 3 green):

<State
    text="Modulo 3D Text Generator!"
    shadows:='[ "red",  "red", "red", "green", "green", "green" ]'
></State>

Next, we'll use a {% for %} for loop that uses the index as the shadow distance. This creates the "3D" effect. This replaces the hard-coded "red" values with for-loop generated shadows:

<h1 style="
  text-shadow: 0 0 3px #fff
  {% for index, shadow in state.shadows %}
    ,{{ index }}px {{ index }}px 0 {{ shadow }}
    ,{{ index }}px {{ index }}px 10px #00000033
  {% endfor %};
"> ...

This generates a total of 13 shadows (1 extra "white glow" shadow, plus each item in the "shadows" array gets 2 shadows each, so 2 * 6 + 1 = 13). The :='[ and ]' syntax is the syntax for creating Arrays, and the {% for %} template-tag is the syntax to duplicate a bit of HTML for every item in the array (not to mention each index, e.g. a number counting up from 0). For further practice, both of these concepts have lots of interactive examples in part 4 of the Modulo.js tutorial.

Adding a palette and shadow add button

Right now, our 3D text generator is sort of working, but it can't be adjusted. Let's make it customizable: First we clear hard-coded values from shadows:= array, and then create a new array for our color palette:

<State
    text="Modulo 3D Text Generator!"
    shadows:='[ ]'
    colors:='[ "#B90183", "#A2E4B8", "#FFE45A" ]'
></State>

Now, in a similar procedure my last tutorial, let's write a for loop that generates an input for each color in our palette, using the {{ index }} variable to "bind" each input to each element in the colors:= Array:

{% for index, color in state.colors %}
  <div style="background: {{ color }}">
    <button @click:=state.shadows.push
         payload="{{ color }}">+</button>
    <label>Palette #{{ index }}
      <input [state.bind] name="colors.{{ index }}"
         type="color" /></label>
  </div>
{% endfor %}

Here we loop through each color in our color palette, creating "divs" with the background color to preview it, along with buttons that, when clicked, invoke the state.shadows.push function to push the "payload" (in this case, the {{ color }} itself) onto the shadow array. Thus, every time you click the button, another shadow gets added! If the @click event concept is giving you trouble, there are many interactive examples in part 5 of the Modulo.js tutorial.

`<x-WordArt3DTool>` - Embeddable snippet

Combining it all, and adding a few final CSS tweaks to the H1 (font-size, color, and transform), and we get the following results that can be embedded anywhere:

<!DOCTYPE html>
<template Modulo>
  <Component name="WordArt3DTool">
    <Template>
      <label>Text: <input [state.bind] name="text" /></label>
      {% for index, color in state.colors %}
        <div style="background: {{ color }}">
          <button @click:=state.shadows.push payload="{{ color }}">+</button>
          <label>Palette #{{ index }} <input [state.bind] name="colors.{{ index }}" type="color" /></label>
        </div>
      {% endfor %}
      <h1 style="
        font-size: 64px;
        transform: skew(-10deg, -3deg);
        color: white;
        text-shadow: 0 0 3px #fff
        {% for index, shadow in state.shadows %}
          ,{{ index }}px {{ index }}px 0 {{ shadow }}
          ,{{ index }}px {{ index }}px 10px #00000033
        {% endfor %};
      ">{{ state.text }}</h1>
    </Template>
    <State
      text="Modulo 3D Text Generator!"
      colors:='[ "#B90183", "#A2E4B8", "#FFE45A" ]'
      shadows:=[]
    ></State>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-WordArt3DTool></x-WordArt3DTool>

I hope you enjoyed this tutorial, if so, follow for more like this!

Creating a Word Art text-curving design picker in only 30 lines of pure HTML web component code + 1 extra file (no node or JS!)

michaelb — Mon, 22 Jan 2024 19:58:41 +0000

Hey all -- as I'm back to Modulo.js tutorial writing, I am always looking for more content ideas. Have an idea? Be sure to let me know in the comments!

Previously, I showed how to use the -store= processor to make a reactive shared State store between components, a deep dive into Modulo's Markdown-HTML file format, or, last week, how to make a circular text-art tool. Today, let's make another SVG text design tool, except using <path> instead of <circle>. While slightly more complex, using <path> elements for Text allows for fun and arbitrary text arrangements -- and, most importantly, is supported by Chrome!

The final result

Try it out now, in less than 30 seconds: 🚀🚀🚀 Want to skip ahead? Scroll to the end and copy the ~30 lines of HTML code into any local HTML file, and then open it in your browser. Modulo has no dependencies and even runs embedded in local HTML files, so it's really that easy!

Starting with SVG and text input

Let's add an SVG along with a text input, bound to the text. Let's use a <Template> and a <State> component parts, as follows:

<Template>
  <section>
    <p><input [state.bind] name="text" title="Text" maxlength="15" /></p>
  </section>
  <svg viewBox="0 0 200 100" style="width: 55%; margin-top: 100px">
      <path id="curve" fill="transparent" d="M 10,50 C 20,40 40,10 60,40 80,70 100,65 120,90" />
      <text><textPath href="#curve">{{ state.text }}</textPath></text>
  </svg>
</Template>
<State
    text="Modulo Text FX!"
></State>

In this snippet, we have a <input> element that's bound to State using [state.bind]. If the State concept is giving you conceptual trouble, consider warming up with this tutorial on creating a font design tool, or the the corresponding section in the interactive Modulo tutorial. If SVG <textPath> elements are confusing you, check out MDN's documentation. After that, we have an <svg> element, containing <path> and <textPath> elements. These are linked together with id="curve", and href="#curve" respectively. The {{ state.text }} links the state to the <textPath> -- also in previous tutorial. But unlike the previous tutorial, we'll use a <path> element that takes a d= attribute, which consist of a series of x,y coordinate points for each point (dot) on the curve itself (documented here).

Okay, I realize that's dense code, but bare with me -- it's only a few more steps to get the tool working!

Moving the points to State

We currently only have state.text. We need to also store the points themselves, so we can adjust them with sliders. Let's move to state the Array of points:

<State
    text="Modulo Text FX!"
    points:='[ [ 20,40 ], [40,10], [60,40], [80,70], [100,65], [120,90] ]'
></State>

The :='[ and ]' syntax is the syntax for creating Arrays in Modulo: If this concept is new to you, consider reading the section on Container types in part 4 of the Modulo.js interactive tutorial. Next, we need to put the points back into our SVG. We can use the |join:' ' filter to combine the points with spaces:

<path id="curve" fill="transparent" d="M 10,50 C {{ state.points|join:' ' }}" />
<text><textPath href="#curve">{{ state.text }}</textPath></text>

Creating a hard-coded, rotated range input

At this point, we have moved the points into the State variable, but we still don't have range sliders for them! Let's do that next. We'll use a "for-loop" for this, so we can repeat the same range-slider code for every point in our point Array. But before we do that, let's start with a "hardcoded" range-slider, which will only control "Point #2", just to make sure we can at least control one of them successfully:

<label style="display: inline-block; width: 5%">
  <strong>2</strong>
  <input [state.bind] name="points.2.1"
      style="position: relative; transform: rotate(90deg); left: -60px; top: 60px"
      type="range" max="100" min="0" />
</label>

Let's decipher this: The label and input have style= attributes to space it by 5% width of the page, rotate the input 90 degrees, and move it 60x60 pixels. The name="points.2.1" (equivalent to points[2][1] in other languages) causes the input to control one specific value in the State variable.

Duplicating the input with a for-loop

We've successfully gotten an input to work with a single point (points.2). We could copy and paste this name="points.2.1" code 6 times (once for each point), altering each copy to name="points.3.1", name="points.4.1" etc. This would allow us to control every point. Or, we could save ourselves time, and use the Modulo Template for loop. Let's see how that looks:

{% for index, point in state.points %}
    {# ... #} <strong>{{ index }}</strong>
    <input [state.bind] name="points.{{ index }}.1" {# ... #}
{% endfor %}

Note the only difference here is the 2 is replaced with {{ index }} -- the "index" of the current point we are looping through.

`<x-CurvedTextArtTool>` - Embeddable results

Add the range smooth-rendering ="input" tweak, explained in this tutorial, and we get the following results. Hope you enjoy this tutorial -- follow for more like this!

<!DOCTYPE html>
<template Modulo>
  <Component name="CurvedTextArtTool">
    <Template>
      <section>
        <p><input [state.bind] name="text" title="Text" maxlength="15" /></p>
        {% for index, point in state.points %}
          <label style="display: inline-block; width: 5%">
            <strong>{{ index }}</strong>
            <input [state.bind]="input" name="points.{{ index }}.1"
                style="position: relative; transform: rotate(90deg); left: -60px; top: 60px"
                type="range" max="100" min="0" />
          </label>
        {% endfor %}
      </section>
      <svg viewBox="0 0 200 100" style="width: 55%; margin-top: 100px">
          <path id="curve" fill="transparent" d="M 10,50 C {{ state.points|join:' ' }}" />
          <text><textPath href="#curve">{{ state.text }}</textPath></text>
      </svg>
    </Template>
    <State
        text="Modulo Text FX!"
        points:='[ [ 20,40 ], [40,10], [60,40], [80,70], [100,65], [120,90] ]'
    ></State>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-CurvedTextArtTool></x-CurvedTextArtTool>

Making a text art and SVG circle picker design tool in 34 lines of pure HTML web component code + 1 extra file (no node or JS!)

michaelb — Sat, 20 Jan 2024 17:50:01 +0000

Hey all, I'm back to writing my Modulo.js tutorial series, and am always looking for more content ideas. If you want to see a certain type of tutorial in the future, be sure let me know in the comments -- and follow, if you haven't already!

In my previous tutorials, I showed how to use the single-file, 2000-line, small-but-mighty Modulo.js framework to make a gradient picker component in 13 lines, quickly embed APIs, or even how to build an animated text-shadow "wave" effect text picker. This time, we'll be making something like the last one, except instead of using pure HTML and CSS, we'll be employing the full power of SVG. This lets us really get wild with our text art designer tool! Ready for some creative and exciting shapes in SVG Text Art?

The final result

Try it out now, in less than 30 seconds: 🚀🚀🚀 Want to skip ahead? Scroll to the end and copy the ~40 lines of HTML code into any local HTML file, and then open it in *Firefox. Modulo has no dependencies and even runs embedded in local HTML files, so it's really that easy!

Template and SVG

Including SVG in Modulo is as simple as adding it to a Template:



<Template>
  <svg viewBox="0 0 600 600" style="width: 600px; float: right">
    <circle id="circle" cx="60" cy="100" r="40"
      stroke="{{ state.stroke }}" fill="{{ state.color }}"
      stroke-width="10" />
    <text width="2000">
        <textPath
            xlink:href="#circle"
            startOffset="10"
        >Modulo.js: Text FX!</textPath>
    </text>
  </svg>
</Template>
<State
    color="#B90183"
    stroke="#A2E4B8"
></State>

In this snippet, we build a 600x600 SVG image (<svg viewBox="0 0 600 600" ...>), put a 4-radius circle in it at 60x100, and use state.stroke and state.color state variables to assign it's color scheme. We then add a text element that "follows" the shape of the circle referring to it by it's ID: <textPath xlink:href="#circle">.

Binding color inputs

We have our colors in our state, but the user has no way of adjusting them. Let's add to our Template two bound color inputs:



<label><input [state.bind] name="color" type="color"> Fill Color</label><br/>
<label><input [state.bind] name="stroke" type="color"> Border Color</label><br/>

The [state.bind] name="..." binds each of these to those state variables, so the component will rerender with the new state when a new color is picked. If you are new to Modulo.js, and state and binding is confusing you, consider warming up with this tutorial on creating a font design tool, or the Modulo JS - Ramping Up Part 2: State. If SVG <textPath> elements are confusing you, check out MDN's documentation.

Finishing up the other inputs: Offset, Border, Radius, and Text

Start with three new state variables, like the initial color and stroke ones, except using the data-prop := syntax for the numbers:



<State
    text="Modulo.js: Text FX!"
    radius:=40
    width:=20
    offset:=20
    color="#B90183"
    stroke="#A2E4B8"
></State>

And, just like before, add in inputs:



<input [state.bind] name="text" />
<input [state.bind]="input" name="offset" type="range" min="0" max="300" />
<input [state.bind]="input" name="width" type="range" min="0" max="40" />
<input [state.bind]="input" name="radius" type="range" min="10" max="80" />

The first input controls the text (default type), and the other three input tags with [state.bind]="input" control numbers using type="range" (the ="input" tweak explained in this tutorial).

Adding in the new state variables back to the SVG

Let's go back to the SVG to assign the new state variables to cx=, cy=, r=, and stroke-width= attributes on the <circle>, and the startOffset and content of the <textPath> itself:



<circle id="circle"
    cx="{{ state.radius|add:20 }}" cy="100"
    r="{{ state.radius }}"
    stroke="{{ state.stroke }}" fill="{{ state.color }}"
    stroke-width="{{ state.width }}" />
<text width="2000">
    <textPath xlink:href="#circle" startOffset="{{ state.offset }}">
       {{ state.text }}
    </textPath>
</text>

Note the |add:20 for the cx=: This |add filter gives an offset of 20 to the circle so it doesn't overflow on the left.

Firefox Footnotes

This tutorial requires the SVG feature of circular text, which Chrome hasn't yet implemented. My next tutorial will talk about SVG paths, which is supported by Chrome. The images generated can still be used cross-platform, however.

`<x-TextArtCircleTool>` - Embeddable results

Combine everything, and we get the following results. Hope you enjoy this tutorial -- follow for more like this!



<!DOCTYPE html>
<template Modulo>
  <Component name="TextArtCircleTool">
    <Template>
      <svg viewBox="0 0 600 600" style="width: 600px; float: right">
          <circle id="circle"
            cx="{{ state.radius|add:20 }}" cy="100"
            r="{{ state.radius }}"
            stroke="{{ state.stroke }}" fill="{{ state.color }}"
            stroke-width="{{ state.width }}" />
          <text width="2000">
              <textPath
                  xlink:href="#circle"
                  startOffset="{{ state.offset }}"
              >{{ state.text }}</textPath>
          </text>
      </svg>
      <label><input [state.bind] name="text" /></label><br/>
      <label><input [state.bind]="input" name="offset"
        type="range" min="0" max="300" /> Offset</label><br/>   
      <label><input [state.bind]="input" name="width"
        type="range" min="0" max="40" /> Border</label><br/>
      <label><input [state.bind]="input" name="radius"
        type="range" min="10" max="80" /> Radius</label><br/>
      <label><input [state.bind] name="color" type="color"> Fill Color</label><br/>
      <label><input [state.bind] name="stroke" type="color"> Border Color</label><br/>
    </Template>
    <State
        text="Modulo.js: Text FX!"
        radius:=40
        width:=20
        offset:=20
        color="#B90183"
        stroke="#A2E4B8"
    ></State>
  </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-TextArtCircleTool></x-TextArtCircleTool>

Forem: michaelb

Learn for-loop template tags and data types building a train schedule web component (Learn Modulo.js - Part 7 of 10)

Introducing: The TrainSchedule Component

Starting snippet

Introducing Part 7: Data Types

Arrays

Objects

Arrays of Objects

Summary: JSON type list

Step 1: Fixing with Data Props

Step 2: Adding More Trains with Arrays and Objects

Step 3: Using a for-loop to show all trains

The for-tag syntax

Step 3: Using a for-loop to show all trains

<x-TrainSchedule> - Complete Example

Conclusion

Learn template-tags while creating interactive forms in a web component (Learn Modulo.js - Part 6 of 10)

Introducing: The NewsletterSubscribe Component

Starting snippet

Introducing Part 6: Template Tags

Syntax

The if-tag

Step 1: Optionally show the Kombucha checkbox

Step 2: Use "else" to show a hint about filling in the email

Step 3: Use for loop to list the newsletters

Step 4: Adding back in the input

<x-NewsletterSubscribe> - Complete Example

Conclusion

Learn how to isolate CSS with Shadow DOM and Slots in a gallery web component (Learn Modulo.js - Part 5 of 10)

Introducing: The PhotoGallery Component

Starting snippet

Introducing Part 5: slots

Step 1: Adding a slot

Step 2: Adding a default

Aside: Named slots

CSS Isolation: Enter the Shadow

Step 3: Entering the Shadow DOM

Step 4: Vanishing act

<x-PhotoGallery> - Complete Example

Conclusion

Learn template filters and state binding to quickly build a button designer tool (Learn Modulo.js - Part 4 of 10)

Introducing: The ButtonDesigner Component

Filtering it up

Introducing Part 4

Step 1: Adding select and color picker

Step 2: Adding "range" slider and

Introducing: Template filters

"No-filter", no longer!

No argument from me

Steps to add

Step 3: Using filters - |add

Step 4: Multiple filters - |add|multiply

<x-ButtonDesigner> - Complete Example

Conclusion

Learn state management by making a (silly) story generator (Learn Modulo.js - Part 3 of 10)

Introducing: The SillyStory Web Component

Introducing Part 3

Step 1: Adding a State part

Step 2: Include State in your template

Introducing: The state.bind directive

Step 3: Bind our first input to state

Step 4: Finishing up and testing it out

<x-SillyStory> - Complete Example

State & beyond

Learn how to make a styled picture frame web component with props (Learn Modulo.js - Part 2 of 10)

Introducing: The PictureFrame Component

Introducing Part 2

Step 1: Creating a Style Component Part

Step 2: Styling the host component itself

Introducing Component Parts

Introducing Props

Props to us!

Step 3: Adding Props

Step 4: Using Props in Template

<x-PictureFrame> - Complete Example

Conclusion

Writing your first web component (Learn Modulo.js - Part 1 of 10)

The Next Step After HTML and CSS

Introducing the Modulo Framework

Introducing Part 1

`<x-TrainSchedule>` - Complete Example

`<x-NewsletterSubscribe>` - Complete Example

`<x-PhotoGallery>` - Complete Example

Step 3: Using filters - `|add`

Step 4: Multiple filters - `|add|multiply`

`<x-ButtonDesigner>` - Complete Example

Introducing: The `state.bind` directive

`<x-SillyStory>` - Complete Example

`<x-PictureFrame>` - Complete Example

`<x-HelloWorld>` - Complete Example

`<x-MonsterGuide>` - Embeddable snippet

Showing the `front_default` image in the loop

`<x-PokeParty>` - Embeddable snippet

`<x-WordArt3DTool>` - Embeddable snippet

`<x-CurvedTextArtTool>` - Embeddable results

`<x-TextArtCircleTool>` - Embeddable results