22.0 RTW

[index]
- fix socials hover style
- fix sections event listeners in all platforms

[projects]
- add missing techs to some projects

[til]
- new entry: ios-event-bubbling
- minor fixes and style changes

Author: miermontoto

assets/icons/tech/json.svg

@@ -2,6 +2,6 @@
 title: dotfiles
 desc: "personal themes, configs and tweaks for my linux setups"
 source: https://github.com/miermontoto/dotfiles
-icons: [fedora]
+icons: [fedora, linux]
 emoji: 🐧
 ---

package.json

@@ -2,15 +2,11 @@
 title: mier.info
 desc: my personal portfolio, the very website you are looking at right now.
 source: https://github.com/miermontoto/mier.info
-icons: [eleventy, firebase, sass, markdown, nunjucks, js]
-# links: [{icon: "β", url: "https://mier-f6277--beta-ms6exjco.web.app/", name: "beta"}]
+icons: [eleventy, firebase, sass, markdown, nunjucks, js, json]
 star: star
 permalink: /this/
 redirect_from: [/mier.info/, /self/]
 emoji: 🌐
-# buttons: [
-# 	{img: "β ", url: "https://mier-f6277--beta-ms6exjco.web.app/", text: "beta"}
-# ]
 eleventyNavigation:
   key: this
   title: mier.info

src/content/collections/projects/dotfiles.md

@@ -3,7 +3,7 @@ title: quizzes
 emoji: 📝
 permalink: /quizzes/
 lang: es
-icons: [eleventy, js]
+icons: [eleventy, js, json]
 desc: quizzes for different uni courses.
 eleventyNavigation:
   key: quizzes

src/content/collections/projects/mier.info.md

@@ -3,14 +3,16 @@ title: til
 emoji: ❔
 desc: collection of general questions I've asked myself over time
 subtitle: inspired by <a href="https://til.simonwillison.net/" target="_blank">Simon Willison's TIL</a>
-icons: [eleventy, markdown]
+icons: [eleventy, markdown, js]
 permalink: /til/
 eleventyNavigation:
   key: til
 ---
 
 {% addStyle 'til' %}
 
+{# TODO: search bar #}
+
 <div id="til-tags">
 	<h2>tags</h2>
 	{% tilTags collections.til %}

src/content/collections/projects/quizzes.njk

@@ -6,19 +6,19 @@ eleventyNavigation:
 keywords: ["eleventy", "package.json", "shortcodes", "package", "json"]
 ---
 
-For a long time now, I've been using a custom shortcode in Eleventy through the
+for a long time now, I've been using a custom shortcode in Eleventy through the
 configuration file (`.eleventy.js`) to access the `package.json` file. This is
 useful for various reasons, such as displaying the version number of the package
 or the using the package's keywords in the metadata of the website.
 
-Because I was directly accessing the `package.json` file, I had to import it
-using `require`:
+because I was directly accessing the `package.json` file, I had to import it
+using `require` like so:
 
 ```js
 let json = require('./package.json');
 ```
 
-This works fine, but restricts the definition of the shortcode to the config
+this works fine, but restricts the definition of the shortcode to the config
 file itself, which is not ideal. I wanted to separate the shortcode from the
 config file so that it's easier to manage and maintain.
 
@@ -31,7 +31,7 @@ eleventyConfig.addShortcode("version", () => {
 });
 ```
 
-While browsing the Eleventy documentation, I came across the
+while browsing the Eleventy documentation, I came across the
 *Eleventy Supplied Data*. In it, I found that the content of the `package.json`
 file is available through the `pkg` data value in the template files. This
 means that I can access the `package.json` file directly in the template files
@@ -41,7 +41,7 @@ without having to import it in the configuration file:
 {% raw %}{% pkg.version %}{% endraw %}
 ```
 
-This is a much cleaner way to access the version number of the package, and as
+this is a much cleaner way to access the version number of the package, and as
 such I can migrate the function for the shortcode to a separate script file:
 
 ```js

src/content/collections/projects/til.njk

@@ -0,0 +1,59 @@
+---
+title: "why click events do not work on iOS"
+tags: ["ios", "html", "javascript"]
+eleventyNavigation:
+  key: "ios-event-bubbling"
+keywords: ["ios", "html", "javascript", "event bubbling", "event delegation", "event propagation", "event handling"]
+---
+
+recently, while preparing the 22.0 release of this website, I noticed that the
+click events on the index page were not working on Apple devices, and as
+such the navigation flow was completely broken. This issue was not present on
+any other platform that I tested, including other mobile devices and desktop
+browsers.
+
+after some quick searches and tests, I found out that the issue was related to
+the way iOS handles click events, and it is a known "bug" that has been around
+for a while. The problem is that iOS does not handle click events as expected,
+and as such, the event delegation mechanism that works on other platforms does
+not work on iOS.
+
+the issue is related to the way iOS handles the `click` event, and it is
+documented in the [Apple Developer Documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html).
+
+here is the *"offending"* code that was causing the issue:
+
+```javascript
+sections.forEach(({ button, section }) => {
+    window.addEventListener('click', (event) => { /* ... */ });
+});
+```
+
+after some investigation (and Claude's help), I found out that the issue was
+related to [*event bubbling*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture). By simply moving the event listener from the
+`window` object to the `document` object and flipping the loop to iterate over
+the sections last, the issue was fixed.
+
+here is the updated code that works on all platforms:
+
+```javascript
+document.addEventListener('click', (event) => {
+    sections.forEach(({ button, section }) => { /* ... */ });
+});
+```
+
+Claude also suggested some other changes to the code, such as introducing
+`preventDefault()` for certain events, using `touchend` along with `click` for
+better compatibility, and the mentioned change of the loop order, avoiding the
+addition of separate event listeners.
+
+*Thanks, Claude!*
+
+<br>
+
+### references
+
+- [Apple Developer Documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)
+- [MDN: Event Bubbling and Capture](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)
+- [QuircksMode: Click event delegation on iOS](https://www.quirksmode.org/blog/archives/2010/09/click_event_delegation.html)
+- [SitePoint: Handling .click() in the Safari browser](https://www.sitepoint.com/community/t/handling-click-in-the-safari-browser/417837)

src/content/collections/til/eleventy-package.md

@@ -6,7 +6,7 @@ eleventyNavigation:
 keywords: ["puppeteer", "pdf", "page count", "number of pages", "chromium", "wkhtmltopdf"]
 ---
 
-In Okticket, we are building a serverless service that generates PDF from HTML.
+in Okticket, we are building a serverless service that generates PDF from HTML.
 This feature was previously implemented using `wkhtmltopdf`,
 but we are migrating to Puppeteer for better performance and stability, as
 the previous engine is severely outdated and clogs up the API when under heavy
@@ -17,7 +17,7 @@ HTML content generated by the API using Blade templates. In this process, some
 specific features are required, such as the ability to get the number of pages
 in the generated PDF.
 
-[After a quick search](https://github.com/puppeteer/puppeteer/issues/9550),
+[after a quick search](https://github.com/puppeteer/puppeteer/issues/9550),
 the seemingly most straightforward way to get the number of pages in a PDF
 generated by Puppeteer is to use a pdf library to read the file and count the
 pages. However, this approach is far from ideal, as we would need to render the
@@ -32,7 +32,7 @@ const pageCount = pdfDoc.getPages().length;
 this.logger.debug(`PDF has ${pageCount} pages`);
 ```
 
-However, [Puppeteer has built-in style classes](https://github.com/puppeteer/puppeteer/issues/5345)
+however, [Puppeteer has built-in style classes](https://github.com/puppeteer/puppeteer/issues/5345)
 that inject certain information in the PDF, including the page count:
 
 - <b><code>pageNumber</code></b>: current page number.
@@ -41,6 +41,6 @@ that inject certain information in the PDF, including the page count:
 - <code>title</code>: title of the document.
 - <code>url</code>: URL of the document.
 
-Replacing the built-in classes of `wkhtmltopdf` with Puppeteer's classes in the
+replacing the built-in classes of `wkhtmltopdf` with Puppeteer's classes in the
 blade templates allows us to get the page count directly from the PDF without
 the need to render it twice, cutting the processing time in half!

src/content/collections/til/ios-event-bubbling.md

@@ -15,3 +15,6 @@
 	font-size: 0.9em
 	font-style: italic
 	color: lightgray
+
+.til-card
+	margin: 1em 0