New tutorial

Author: MateuSai

TODO.txt

@@ -0,0 +1,3 @@
+Put a limit to the article width.
+Make table of contents width constant (currently when expanded it can change size)
+References do not appear at the table of contents

_layouts/post.html

@@ -21,7 +21,7 @@ <h2>Table of Contents</h2>
                     {% if post_id != page_id %}
                     <a href="{{ post.url }}">{{ post.title }}</a>
                     {% else %}
-                    {{ post.title }}
+                    <b>{{ post.title }}</b>
                     {% endif %}
                 </li>
                 {% endfor %}
@@ -45,7 +45,7 @@ <h1>{{ page.title }}</h1>
         {{ content }}
 
         {% if page.references %}
-            <h2>References</h2>
+            <h2 id="references">References</h2>
             <ul>
                 {% for reference in page.references %}
                     <li><a href="{{ reference }}">{{ reference }}</a></li>

_sass/_post.scss

@@ -63,6 +63,7 @@ blockquote {
 #tags-list {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     padding-left: 0;
     gap: 10px;
 

_sass/main.scss

@@ -56,7 +56,7 @@ h1 {
 
 h2 {
     margin-top: 55px;
-    font-size: 1.6em;
+    font-size: 1.7em;
 }
 
 h3 {

assets/images/other/calamars_amazon_photos.jpg

@@ -8,7 +8,7 @@ <h2>Tags</h2>
 
 <ul id="tags-list">
   {% for tag in site.tags %}
-      <li><a href="/tag/{{tag[0]}}">{{ tag[0] }}</a></li>
+      <li><a href="/tag/{{tag[0]}}">{{ tag[0] }}: {{ tag[1] | size }}</a></li>
   {% endfor %}
 </ul>
 

index.html

@@ -0,0 +1,97 @@
+---
+tags: [Web, JavaScript, Browser]
+references: ["https://developer.mozilla.org/es/docs/Web/API/Window/setTimeout", "https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists"]
+thumbnail: "/assets/images/other/calamars_amazon_photos.jpg"
+---
+
+The pieces of shit from Amazon do not allow to download at once all the images from Amazon Photos. Below I will show a little js code i wrote to automatize the process.
+
+<!--more-->
+
+Open Amazon Photos in a browser and select the image or video you want to start from. Then, press F12 to open the development tools, go to the console tab and paste the js code:
+
+![Calamars](/assets/images/other/calamars_amazon_photos.jpg)
+
+```js
+const MS_TRANSITION_DELAY = 600;
+const MS_BETWEEN_DOWNLOADS = 100;
+
+var nextArrow;
+downloadImageAndNext();
+
+
+function next() {
+    if (!next) {
+        return;
+    }
+
+    nextArrow.click();
+
+    setTimeout(downloadImageAndNext, MS_TRANSITION_DELAY);
+}
+
+function downloadImageAndNext() {
+    waitForElm(".download").then((downloadButton) => {
+        downloadButton.click();
+
+        nextArrow = getNextArrow();
+
+        setTimeout(next, MS_BETWEEN_DOWNLOADS);
+    });
+
+    var toggle = document.getElementsByClassName("toggle")[4];
+    toggle.click();
+}
+
+function getNextArrow() {
+    return document.getElementsByClassName("next")[0];
+}
+
+
+// From https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists
+function waitForElm(selector) {
+    return new Promise(resolve => {
+        if (document.querySelector(selector)) {
+            return resolve(document.querySelector(selector));
+        }
+
+        const observer = new MutationObserver(mutations => {
+            if (document.querySelector(selector)) {
+                observer.disconnect();
+                resolve(document.querySelector(selector));
+            }
+        });
+
+        // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    });
+}
+```
+
+Press enter to execute the code. It will download simulate a click to the top-right toggle, click the download button and then the next arrow to transition to the next image. This process will continue until it reaches the last image or fails for some reason[^1]. If it does not start moving automatically, press the top-right toggle manually and after that it should continue on its own.
+
+## Constants
+
+There are 2 constants you should adapt to your needs.
+
+### MS_TRANSITION_DELAY
+
+The milliseconds to wait between the next arrow press and the start of the download of the next image. The lower the better, but beware not to make it to small, it should be enough for the transition to take place.
+
+### MS_BETWEEN_DOWNLOADS
+
+The milliseconds to wait between the start of the download and the transition to the next image. The purpose of this delay is to avoid accumulating a large number of simultaneous downloads. You should adjust it according to your internet speed and the size of the media.
+
+I recommend downloading the images and the videos separately because of their size difference. There is a filter in the left that allows this.
+
+- You can download all the images with a `MS_BETWEEN_DOWNLOADS` of approximately 0.
+
+- In the case of the videos, since they take a lot more space, you can set `MS_BETWEEN_DOWNLOADS` to 2000, 5000, 20000... or whatever milliseconds are necessary to avoid ending with >5 videos downloading at the same time. As I said, it depends on your internet speed.
+
+
+## Footnotes
+
+[^1]: Don't worry if it fails after some images, the process can be started over again from any image.