Adventures in Tech Land. Season 4. Episode 3

Lots of elisp again

2024/02/23, 50th day

freeCodeCampe reboot 3/n

The reboot is really happening. If only because I need a stimulating way to procrastinate and something to do to avoid being stuck all day on the horrors happening in Palestine at the moment.

I managed to write some code that automatically updates a number of items in my templates.

the page of the day before now has an automatic link to today's page

;; update the previous page
the main index page also automatically links to the "last day"
it also automatically updates the total number of days, the episode number in the season and the episode list

;; update the root index
the "tommorrow" page also has an automatic update for the "last day" link

;; update the tomorrow file with the new "last day"

Besides for the fact that the code, the variable names and the whole process is a bit messy, I'm at a place where I don't have to manually do much any more. I can focus on actual practice in freeCodeCamp and other places.

On the freeCodeCamp side, this time there are two things that I never used before. The <figure> tag that can have plenty of types of contents, but content should be self-contained so that it can be moved to a different position in the document. The <figure> can have a caption in a <figcaption> tag. The <figcaption> can contain the accessible description of the <figure>.

https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description

The second thing is the <form> element, that's used to send information to a process somewhere else. It comes with an action attribute that does something to the data and can contain <input> elements to actually gather data. <input> elements can have various attributes, including type, that describes the type of input, placeholder that gives a default value, name that names the input for processing in the target process, etc.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Unlike the previous days, I'll just put small code blocks to emphasize the step content. I also added the real HTML so that it shows how it renders on the page.

Step 19, `<h3>` heading

Heading number shows hierarchy.

<section>
  <h2>This movie is really good</h2>
  <h3>List of represented days</h3>
</section>

---

This movie is really good

List of represented days

---

Step 20, `<ul>` unordered list

List (empty for now) where items are not ordered.

<section>
  <h2>This movie is really good</h2>
  <h3>List of represented days</h3>
  <ul></ul>
</section>

Step 21, `<li>` list item

The list contains list items

<h3>List of represented days</h3>
<ul>
  <li>First day</li>
  <li>Second day</li>
  <li>Third day</li>
</ul>

---

List of represented days

First day
Second day
Third day

---

Step 22, Another image, under the list

<h3>List of represented days</h3>
<ul>
  <li>First day</li>
  <li>Second day</li>
  <li>Third day</li>
</ul>
<img alt="All the days of the year" src="https://helios-i.mashable.com/imagery/articles/03LkUHbeYe9Gf8qlIT9ock6/hero-image.fill.size_1248x702.v1612299679.jpg">

Step 23, `<figure>`

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

"The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit."

<figure>
  <imgg alt="All the days of the year" src="https://helios-i.mashable.com/imagery/articles/03LkUHbeYe9Gf8qlIT9ock6/hero-image.fill.size_1248x702.v1612299679.jpg">
  <figcaption>I can't see the image, so I can't tell</figcaption>
</figure>

---

All the days of the year — I can't see the image, so I can't tell

---

Step 24, `<figcaption>`

I'm not doing it again.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

"The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element, providing the <figure> an accessible description."

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

Step 25, `<em>` phasis

Emphasizing blindness. It is possible to inline-stype <figcaption>.

<figuree>
  <img alt="All the days of the year" src="https://helios-i.mashable.com/imagery/articles/03LkUHbeYe9Gf8qlIT9ock6/hero-image.fill.size_1248x702.v1612299679.jpg">
  <figcaption>I <em>can't see</em> the image, so I can't tell</figcaption>
</figure>

Step 26, A `<h3>` under the `<figure>`

Starting another subsection.

<sectionon>
  <h2>This movie is really good</h2>
  <h3>List of represented days</h3>
  <ul>
    <li>First day</li>
    <li>Second day</li>
    <li>Third day</li>
  </ul>
  <figure>
    <img alt="All the days of the year" src="https://helios-i.mashable.com/imagery/articles/03LkUHbeYe9Gf8qlIT9ock6/hero-image.fill.size_1248x702.v1612299679.jpg">
    <figcaption>I <em>can't see</em> the image, so I can't tell</figcaption>
  </figure>
  <h3>List of misrepresented days</h3>
</section>

Step 27, `<ol>` ordered lists

Some days are more important than others.

<h3>List of misrepresented days</h3>
<ol>
  <li>Day A</li>
  <li>Day A’</li>
  <li>Day A’’</li>
</ol>

Step 28, another figure under the list

Another figure under the list.

<h3>List of misrepresented days</h3>
<ol>
  <li>Day A</li>
  <li>Day A’</li>
  <li>Day A’’</li>
</ol>
<figure>
  <img alt="Today, again?" src="https://i.insider.com/52de8d076da8113b6da3dcf7">
  <figcaption>Déjà vu.</figcaption>
</figure>

---

List of misrepresented days

Day A
Day A’
Day A’’

---

Step 29, new `<img>`

Image added, above.

Step 30, new `alt`

alt added, above.

Step 31, new `<figcaption>`

<figcaption> added, above.

Step 32, `<strong>`

A strongly different way to emphasize.

<figure>
  <img alt="Today, again?" src="https://i.insider.com/52de8d076da8113b6da3dcf7">
  <figcaption>Dejà <strong>vu</strong>.</figcaption>
</figure>

Step 33, last `<section>`

<section>
</section>

Step 34, new `<h2>` inside the new section

<section>
<h2>To know more about your potential days</h2>
</section>

Step 35 `<form>`

At last, something new and exciting.

<section>
<h2>To know more about your potential days</h2>
<form></form>
</section>

Step 36, `action` attribute

<section>
<h2>To know more about your potential days</h2>
<form action="someplace.on.the.web/get.your.GD.calendar"></form>
</section>

Step 37, `<input>` element, to send data

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<section>
<h2>To know more about your potential days</h2>
<form action="someplace.on.the.web/get.your.GD.calendar">
  <input/>
</form>
</section>

Step 38, `type` attribute

The input element can have lots of types. One is text, to send text.

<section>
<h2>To know more about your potential days</h2>
<form action="someplace.on.the.web/get.your.GD.calendar">
  <input type="text"/>
</form>
</section>

Step 39, name your input to access it later

In order for a form's data to be accessed by the location specified in the action attribute, you must give the text field a name attribute and assign it a value to represent the data being submitted.

<section>
<h2>To know more about your potential days</h2>
<form action="someplace.on.the.web/get.your.GD.calendar">
  <input type="text" name="yourEmail"/>
</form>
</section>

Step 40, placeholding hints

<section>
<h2>To know more about your potential days</h2>
<form action="someplace.on.the.web/get.your.GD.calendar">
  <input type="text" name="yourEmail" placeholder="myName@myserver.stuff"/>
</form>
</section>

---

To know more about your potential days

---

Et voilà !

Lots of elisp again

freeCodeCampe reboot 3/n

Step 19, <h3> heading

This movie is really good

List of represented days

Step 20, <ul> unordered list

Step 21, <li> list item

List of represented days

Step 22, Another image, under the list

Step 23, <figure>

Step 24, <figcaption>

Step 25, <em> phasis

Step 26, A <h3> under the <figure>

Step 27, <ol> ordered lists

Step 28, another figure under the list

List of misrepresented days

Step 29, new <img>

Step 30, new alt

Step 31, new <figcaption>

Step 32, <strong>

Step 33, last <section>

Step 34, new <h2> inside the new section

Step 35 <form>

Step 36, action attribute

Step 37, <input> element, to send data

Step 38, type attribute

Step 39, name your input to access it later

Step 40, placeholding hints

To know more about your potential days

Step 19, `<h3>` heading

Step 20, `<ul>` unordered list

Step 21, `<li>` list item

Step 23, `<figure>`

Step 24, `<figcaption>`

Step 25, `<em>` phasis

Step 26, A `<h3>` under the `<figure>`

Step 27, `<ol>` ordered lists

Step 29, new `<img>`

Step 30, new `alt`

Step 31, new `<figcaption>`

Step 32, `<strong>`

Step 33, last `<section>`

Step 34, new `<h2>` inside the new section

Step 35 `<form>`

Step 36, `action` attribute

Step 37, `<input>` element, to send data

Step 38, `type` attribute