From d4728e6972882e09ead61214367a35c5c6feafef Mon Sep 17 00:00:00 2001
From: Mitja Felicijan <mitja.felicijan@gmail.com>
Date: Tue, 29 Dec 2020 00:44:19 +0100
Subject: Added newsletter

---
 Makefile                                |   4 +-
 content/2020-12-25-weekly-links.md      |   9 -
 content/2020-12-25-weekly-newsletter.md |  10 +
 emailing/.editorconfig                  |  16 --
 emailing/.gitignore                     |   1 -
 emailing/campaigns/2020-52.json         |  75 --------
 emailing/campaigns/2020-53.json         | 122 ------------
 emailing/campaigns/template.json        |  15 --
 emailing/generated/2020-52.html         |  87 ---------
 emailing/generated/2020-53.html         | 326 --------------------------------
 emailing/generated/index.html           |  36 ----
 emailing/package.json                   |  20 --
 emailing/send                           | 129 -------------
 emailing/templates/index.hbs            |  37 ----
 emailing/templates/mailing.hbs          |  42 ----
 newsletter/.editorconfig                |  16 ++
 newsletter/.gitignore                   |   1 +
 newsletter/campaigns/2020-52.json       |  75 ++++++++
 newsletter/campaigns/2020-53.json       | 122 ++++++++++++
 newsletter/campaigns/template.json      |  15 ++
 newsletter/generated/2020-52.html       |  88 +++++++++
 newsletter/generated/2020-53.html       | 326 ++++++++++++++++++++++++++++++++
 newsletter/generated/index.html         |  36 ++++
 newsletter/package.json                 |  20 ++
 newsletter/send                         | 129 +++++++++++++
 newsletter/templates/index.hbs          |  37 ++++
 newsletter/templates/mailing.hbs        |  42 ++++
 templates/partials/navigation.twig      |   2 +-
 28 files changed, 920 insertions(+), 918 deletions(-)
 delete mode 100644 content/2020-12-25-weekly-links.md
 create mode 100644 content/2020-12-25-weekly-newsletter.md
 delete mode 100644 emailing/.editorconfig
 delete mode 100644 emailing/.gitignore
 delete mode 100644 emailing/campaigns/2020-52.json
 delete mode 100644 emailing/campaigns/2020-53.json
 delete mode 100644 emailing/campaigns/template.json
 delete mode 100644 emailing/generated/2020-52.html
 delete mode 100644 emailing/generated/2020-53.html
 delete mode 100644 emailing/generated/index.html
 delete mode 100644 emailing/package.json
 delete mode 100755 emailing/send
 delete mode 100644 emailing/templates/index.hbs
 delete mode 100644 emailing/templates/mailing.hbs
 create mode 100644 newsletter/.editorconfig
 create mode 100644 newsletter/.gitignore
 create mode 100644 newsletter/campaigns/2020-52.json
 create mode 100644 newsletter/campaigns/2020-53.json
 create mode 100644 newsletter/campaigns/template.json
 create mode 100644 newsletter/generated/2020-52.html
 create mode 100644 newsletter/generated/2020-53.html
 create mode 100644 newsletter/generated/index.html
 create mode 100644 newsletter/package.json
 create mode 100755 newsletter/send
 create mode 100644 newsletter/templates/index.hbs
 create mode 100644 newsletter/templates/mailing.hbs

diff --git a/Makefile b/Makefile
index d81f82d..220378e 100644
--- a/Makefile
+++ b/Makefile
@@ -18,5 +18,5 @@ deploy: clean generate copy-weekly-links
 	firebase deploy
 
 copy-weekly-links:
-	mkdir -p public/weekly-links-archive
-	cp -rf emailing/generated/* public/weekly-links-archive/
+	mkdir -p public/weekly-newsletter-archive
+	cp -rf newsletter/generated/* public/weekly-newsletter-archive/
diff --git a/content/2020-12-25-weekly-links.md b/content/2020-12-25-weekly-links.md
deleted file mode 100644
index 876c2f2..0000000
--- a/content/2020-12-25-weekly-links.md
+++ /dev/null
@@ -1,9 +0,0 @@
-~ title: Weekly links
-~ slug: /weekly-links.html
-~ date: 2020-12-25
-~ template: page
-~ hide: true
-
-🕵🏼 [You can check old emailing archive sent here.](/weekly-links-archive/)
-
-<iframe src="https://cdn.forms-content.sg-form.com/b9a1dea3-465a-11eb-af61-0e1900a266f8" width="610px" height="700" frameborder="0" scrolling="no"></iframe>
diff --git a/content/2020-12-25-weekly-newsletter.md b/content/2020-12-25-weekly-newsletter.md
new file mode 100644
index 0000000..7f6e873
--- /dev/null
+++ b/content/2020-12-25-weekly-newsletter.md
@@ -0,0 +1,10 @@
+~ title: Weekly newsletter
+~ slug: /weekly-newsletter.html
+~ date: 2020-12-25
+~ template: page
+~ hide: true
+
+🕵🏼 [You can check old emailing archive sent here.](/weekly-newsletter-archive/)
+
+
+<iframe src="https://cdn.forms-content.sg-form.com/b9a1dea3-465a-11eb-af61-0e1900a266f8" width="610px" height="700" frameborder="0" scrolling="no"></iframe>
diff --git a/emailing/.editorconfig b/emailing/.editorconfig
deleted file mode 100644
index 29a570e..0000000
--- a/emailing/.editorconfig
+++ /dev/null
@@ -1,16 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.sh]
-indent_style = tab
-indent_size = 4
diff --git a/emailing/.gitignore b/emailing/.gitignore
deleted file mode 100644
index d5a0f97..0000000
--- a/emailing/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-sendgrid.env
diff --git a/emailing/campaigns/2020-52.json b/emailing/campaigns/2020-52.json
deleted file mode 100644
index 5990b8d..0000000
--- a/emailing/campaigns/2020-52.json
+++ /dev/null
@@ -1,75 +0,0 @@
-{
-  "categories": [
-    {
-      "name": "General",
-      "links": [
-        {
-          "title": "3x3 SEO tips for JavaScript web apps",
-          "url": "https://www.youtube.com/watch?v=y1UzfahXfao&ab_channel=GoogleChromeDevelopers",
-          "excerpt": "Learn three basic SEO tips for Angular, React, and Vue.js web apps.",
-          "source": "Youtube"
-        },
-        {
-          "title": "Machine Learning & Text Analysis",
-          "url": "https://www.youtube.com/watch?v=y1UzfahXfao&ab_channel=GoogleChromeDevelopers",
-          "excerpt": "Text analysis is the process of obtaining valuable insights from texts. ML can work with different types of textual information such as social media posts, messages, and emails. Special software helps to preprocess and analyze this data.",
-          "source": "Blog"
-        },
-        {
-          "title": "Break a forEach Loop with JavaScript",
-          "url": "https://davidwalsh.name/javascript-array-tricks-3",
-          "excerpt": "He recently ran into another JavaScript trick that blew my mind: how to break a forEach loop, shared by Andrea Giammarchi!",
-          "source": "Blog"
-        },
-        {
-          "title": "Flappy Bird in JavaScript with 25 Lines of Code",
-          "url": "https://www.youtube.com/watch?v=M45iFPVdtj0&ab_channel=CodingTech",
-          "excerpt": "In this tutorial he takes you on the callenge to code a flappy bird clone in a few lines of code as possible.The starting point is an empty HTML canvas and you can follow along all the way to a complete game.",
-          "source": "Youtube"
-        },
-        {
-          "title": "What's new in DevTools",
-          "url": "https://www.youtube.com/watch?v=QsOF9SJJdAA&ab_channel=GoogleChromeDevelopers",
-          "excerpt": "An overview of the latest and greatest features in Chrome DevTools.",
-          "source": "Youtube"
-        },
-        {
-          "title": "Canvas2D is getting an update",
-          "url": "https://www.youtube.com/watch?v=dfOKFSDG7IM&ab_channel=GoogleChromeDevelopers",
-          "excerpt": "Your good, old friend the Canvas2D API has been improving and is worth another look. Hear about all the new features that have been added to the spec.",
-          "source": "Youtube"
-        },
-        {
-          "title": "A web framework for building 3D/AR/VR experiences",
-          "url": "https://aframe.io/",
-          "excerpt": "Make 3D worlds with HTML and Entity-Component For Quest, Rift, WMR, SteamVR, mobile, desktop.",
-          "source": "Product"
-        },
-        {
-          "title": "Introduction to Erlang",
-          "url": "https://serokell.io/blog/introduction-to-erlang",
-          "excerpt": "While Erlang is not as popular as some modern programming languages, it quietly runs applications like WhatsApp and WeChat that serve massive amounts of users every day.",
-          "source": "Blog"
-        },
-        {
-          "title": "Why is processing a sorted array faster than processing an unsorted array?",
-          "url": "https://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-processing-an-unsorted-array",
-          "excerpt": "Here is a piece of C++ code that shows some very peculiar behavior. For some strange reason, sorting the data miraculously makes the code almost six times faster.",
-          "source": "Nugget"
-        },
-        {
-          "title": "30-Second Maths: The 50 Most Mind-Expanding Theories in Mathematics, Each Explained in Half a Minute",
-          "url": "https://www.bookdepository.com/30-Second-Maths-Richard-J-Brown/9781785782886?ref=pd_gw_1_pd_gateway_1_1",
-          "excerpt": "30 Second Maths takes the top 50 most engaging mathematical theories, and explains them to the general reader in half a minute, using nothing more than two pages, 200 words and one picture. Read at your own pace, and discover that maths can be more fascinating than you ever imagined.",
-          "source": "Book"
-        },
-        {
-          "title": "Pomodoro Technique",
-          "url": "https://en.wikipedia.org/wiki/Pomodoro_Technique",
-          "excerpt": "The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s.",
-          "source": "Nugget"
-        }
-      ]
-    }
-  ]
-}
diff --git a/emailing/campaigns/2020-53.json b/emailing/campaigns/2020-53.json
deleted file mode 100644
index de44449..0000000
--- a/emailing/campaigns/2020-53.json
+++ /dev/null
@@ -1,122 +0,0 @@
-{
-  "categories": [
-    {
-      "name": "General",
-      "links": [
-        {
-          "title": "Transitioning to modern JavaScript",
-          "excerpt": "Over 90% of web traffic comes from browsers that support modern JavaScript, yet most websites ship legacy syntax in order to support a small number of very old browsers.",
-          "url": "https://youtu.be/cLxNdLK--yI",
-          "tags": [
-            "Video",
-            "JavaScript"
-          ]
-        },
-        {
-          "title": "Sign-up form best practices",
-          "excerpt": "Help your users sign up, sign in, and manage their account details with a minimum of fuss.",
-          "url": "https://youtu.be/Ev2mCzJZLtY",
-          "tags": [
-            "Video",
-            "Accessibility"
-          ]
-        },
-        {
-          "title": "AutoKeras",
-          "excerpt": "AutoKeras: An AutoML system based on Keras. It is developed by DATA Lab at Texas A&M University. The goal of AutoKeras is to make machine learning accessible for everyone.",
-          "url": "https://autokeras.com/",
-          "tags": [
-            "Product",
-            "Machine learning"
-          ]
-        },
-        {
-          "title": "Arduino Weather Station",
-          "excerpt": "This Is An Project To Help View Us The Current Temperature And Humidity In Time.",
-          "url": "https://www.hackster.io/m1cr0s0ft/arduino-weather-station-8ec09e",
-          "tags": [
-            "Blog",
-            "Hardware",
-            "Arduino"
-          ]
-        },
-        {
-          "title": "Beyond fast with new performance features",
-          "excerpt": "A whirlwind tour of new features and proposals to improve the performance of your pages.",
-          "url": "https://youtu.be/Z6wjUOSh9Tk",
-          "tags": [
-            "Video",
-            "Web optimization"
-          ]
-        },
-        {
-          "title": "How digital identity protects your software",
-          "excerpt": "Digital identity is the online representation of a person, organization, or a machine, and it is what gives us access to the data we use daily. Here’s a brief overview of identity, why it's vital to information security, and why you should know more about it.",
-          "url": "https://stackoverflow.blog/2020/12/21/how-digital-identity-protects-your-software/",
-          "tags": [
-            "Blog",
-            "Single sign on",
-            "Social login"
-          ]
-        },
-        {
-          "title": "Podcast 295: Diving into headless automation, active monitoring, Playwright and Puppeteer",
-          "excerpt": "This week we chat with Tim Nolet, whose commentary appeared in a previous episode after he complained about Amazon forking his OS service and presenting it as new product without so much as a thanks. Since then the two parties have worked things out, and Tim came on the show to explain what happened, what he builds in the open source world, and the company he runs.",
-          "url": "https://stackoverflow.blog/2020/12/15/podcast-295-diving-into-headless-automation-active-monitoring-playwright-and-puppeteer/",
-          "tags": [
-            "Podcast",
-            "Automation",
-            "DevOps"
-          ]
-        },
-        {
-          "title": "2020 Web Design Year in Review",
-          "excerpt": "A year “like no other” is about to come to a close. 2020 was certainly unique for everyone – web designers included. And it challenged us on several levels.",
-          "url": "https://speckyboy.com/2020-web-design-year-in-review/",
-          "tags": [
-            "Blog",
-            "Looking back"
-          ]
-        },
-        {
-          "title": "The 15 Commandments of Front-End Performance",
-          "excerpt": "This list is the product of many years of experience in the front-end web development field. I maintain this list as a reminder to myself to always follow best practices, and to not compromise on performance, even if I’m in a time crunch.",
-          "url": "https://alexsexton.com/blog/2015/02/the-15-commandments-of-front-end-performance/",
-          "tags": [
-            "Blog",
-            "Front-end",
-            "Best practices"
-          ]
-        },
-        {
-          "title": "Finding Critical Open Source Projects",
-          "excerpt": "Criticality of an open source project is difficult to define; what might be a critical dependency for one consumer of open source software may be entirely absent for another. However, arriving at a shared understanding and framework allows us to have productive conversations about our dependencies. Simply put, we define criticality to be the influence and importance of a project.",
-          "url": "https://opensource.googleblog.com/2020/12/finding-critical-open-source-projects.html",
-          "tags": [
-            "Blog",
-            "Open source"
-          ]
-        },
-        {
-          "title": "HTTP Archive's 10th Anniversary",
-          "excerpt": "Rick meets with Steve Souders, who created the HTTP Archive project 10 years ago this month, to talk about its origins and reflect on it's growth.",
-          "url": "https://www.stitcher.com/show/the-state-of-the-web/episode/http-archives-10th-anniversary-79556890",
-          "tags": [
-            "Podcast",
-            "Performance"
-          ]
-        },
-        {
-          "title": "Cosmic Queries – Medieval Science and History",
-          "excerpt": "When you think Middle Ages, does scientific advancement pop into your head? On this episode of StarTalk Radio, we’re exploring the science and history of medieval times as Neil deGrasse Tyson and comic co-host Matt Kirshen answer fan-submitted Cosmic Queries with Seb Falk, Cambridge Historian of Science and author of The Light Ages: The Surprising Story of Medieval Science.",
-          "url": "https://www.startalkradio.net/show/cosmic-queries-medieval-science-and-history/",
-          "tags": [
-            "Podcast",
-            "Science",
-            "History"
-          ]
-        }
-      ]
-    }
-  ]
-}
diff --git a/emailing/campaigns/template.json b/emailing/campaigns/template.json
deleted file mode 100644
index 56b33c9..0000000
--- a/emailing/campaigns/template.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "categories": [
-    {
-      "name": "General",
-      "links": [
-        {
-          "title": "",
-          "url": "",
-          "excerpt": "",
-          "source": ""
-        }
-      ]
-    }
-  ]
-}
diff --git a/emailing/generated/2020-52.html b/emailing/generated/2020-52.html
deleted file mode 100644
index a20531a..0000000
--- a/emailing/generated/2020-52.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<html>
-
-  <head>
-    <title>2020: Week #52 Links</title>
-  </head>
-
-  <body style="background: #f2f2f2; padding: 60px; color: #222222; line-height: 22px; font-family: sans-serif, system-ui, -apple-system; font-size: 16px;">
-
-    <div style="width: 650px; background: #ffffff; text-align: left; padding: 40px; margin: 0 auto; border-radius: 10px;">
-
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.youtube.com/watch?v&#x3D;y1UzfahXfao&amp;ab_channel&#x3D;GoogleChromeDevelopers" style="color: #3252a8; font-weight: bold;">3x3 SEO tips for JavaScript web apps</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Learn three basic SEO tips for Angular, React, and Vue.js web apps.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.youtube.com/watch?v&#x3D;y1UzfahXfao&amp;ab_channel&#x3D;GoogleChromeDevelopers" style="color: #3252a8; font-weight: bold;">Machine Learning &amp; Text Analysis</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Text analysis is the process of obtaining valuable insights from texts. ML can work with different types of textual information such as social media posts, messages, and emails. Special software helps to preprocess and analyze this data.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://davidwalsh.name/javascript-array-tricks-3" style="color: #3252a8; font-weight: bold;">Break a forEach Loop with JavaScript</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">He recently ran into another JavaScript trick that blew my mind: how to break a forEach loop, shared by Andrea Giammarchi!</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.youtube.com/watch?v&#x3D;M45iFPVdtj0&amp;ab_channel&#x3D;CodingTech" style="color: #3252a8; font-weight: bold;">Flappy Bird in JavaScript with 25 Lines of Code</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">In this tutorial he takes you on the callenge to code a flappy bird clone in a few lines of code as possible.The starting point is an empty HTML canvas and you can follow along all the way to a complete game.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.youtube.com/watch?v&#x3D;QsOF9SJJdAA&amp;ab_channel&#x3D;GoogleChromeDevelopers" style="color: #3252a8; font-weight: bold;">What&#x27;s new in DevTools</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">An overview of the latest and greatest features in Chrome DevTools.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.youtube.com/watch?v&#x3D;dfOKFSDG7IM&amp;ab_channel&#x3D;GoogleChromeDevelopers" style="color: #3252a8; font-weight: bold;">Canvas2D is getting an update</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Your good, old friend the Canvas2D API has been improving and is worth another look. Hear about all the new features that have been added to the spec.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://aframe.io/" style="color: #3252a8; font-weight: bold;">A web framework for building 3D/AR/VR experiences</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Make 3D worlds with HTML and Entity-Component For Quest, Rift, WMR, SteamVR, mobile, desktop.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://serokell.io/blog/introduction-to-erlang" style="color: #3252a8; font-weight: bold;">Introduction to Erlang</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">While Erlang is not as popular as some modern programming languages, it quietly runs applications like WhatsApp and WeChat that serve massive amounts of users every day.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-processing-an-unsorted-array" style="color: #3252a8; font-weight: bold;">Why is processing a sorted array faster than processing an unsorted array?</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Here is a piece of C++ code that shows some very peculiar behavior. For some strange reason, sorting the data miraculously makes the code almost six times faster.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.bookdepository.com/30-Second-Maths-Richard-J-Brown/9781785782886?ref&#x3D;pd_gw_1_pd_gateway_1_1" style="color: #3252a8; font-weight: bold;">30-Second Maths: The 50 Most Mind-Expanding Theories in Mathematics, Each Explained in Half a Minute</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">30 Second Maths takes the top 50 most engaging mathematical theories, and explains them to the general reader in half a minute, using nothing more than two pages, 200 words and one picture. Read at your own pace, and discover that maths can be more fascinating than you ever imagined.</div>
-            <div>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://en.wikipedia.org/wiki/Pomodoro_Technique" style="color: #3252a8; font-weight: bold;">Pomodoro Technique</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s.</div>
-            <div>
-            </div>
-          </div>
-
-    </div>
-
-    <div style="text-align: center; font-size: 80%; margin-top: 20px;">
-      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com">mitjafelicijan.com</a>
-      <a style="color: #666; margin: auto 10px" href="https://github.com/mitjafelicijan">github.com/mitjafelicijan</a>
-    </div>
-
-  </body>
-
-</html>
diff --git a/emailing/generated/2020-53.html b/emailing/generated/2020-53.html
deleted file mode 100644
index d306ef7..0000000
--- a/emailing/generated/2020-53.html
+++ /dev/null
@@ -1,326 +0,0 @@
-<html>
-
-  <head>
-    <title>2020: Week #53 Links</title>
-  </head>
-
-  <body style="background: #f2f2f2; padding: 60px; color: #222222; line-height: 22px; font-family: sans-serif, system-ui, -apple-system; font-size: 16px;">
-
-    <div style="width: 650px; background: #ffffff; text-align: left; padding: 40px; margin: 0 auto; border-radius: 10px;">
-
-          <div style="margin-bottom: 30px;">
-            <a href="https://youtu.be/cLxNdLK--yI" style="color: #3252a8; font-weight: bold;">Transitioning to modern JavaScript</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Over 90% of web traffic comes from browsers that support modern JavaScript, yet most websites ship legacy syntax in order to support a small number of very old browsers.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Video</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">JavaScript</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://youtu.be/Ev2mCzJZLtY" style="color: #3252a8; font-weight: bold;">Sign-up form best practices</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Help your users sign up, sign in, and manage their account details with a minimum of fuss.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Video</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Accessibility</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://autokeras.com/" style="color: #3252a8; font-weight: bold;">AutoKeras</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">AutoKeras: An AutoML system based on Keras. It is developed by DATA Lab at Texas A&amp;M University. The goal of AutoKeras is to make machine learning accessible for everyone.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Product</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Machine learning</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.hackster.io/m1cr0s0ft/arduino-weather-station-8ec09e" style="color: #3252a8; font-weight: bold;">Arduino Weather Station</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">This Is An Project To Help View Us The Current Temperature And Humidity In Time.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Blog</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Hardware</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Arduino</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://youtu.be/Z6wjUOSh9Tk" style="color: #3252a8; font-weight: bold;">Beyond fast with new performance features</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">A whirlwind tour of new features and proposals to improve the performance of your pages.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Video</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Web optimization</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://stackoverflow.blog/2020/12/21/how-digital-identity-protects-your-software/" style="color: #3252a8; font-weight: bold;">How digital identity protects your software</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Digital identity is the online representation of a person, organization, or a machine, and it is what gives us access to the data we use daily. Here’s a brief overview of identity, why it&#x27;s vital to information security, and why you should know more about it.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Blog</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Single sign on</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Social login</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://stackoverflow.blog/2020/12/15/podcast-295-diving-into-headless-automation-active-monitoring-playwright-and-puppeteer/" style="color: #3252a8; font-weight: bold;">Podcast 295: Diving into headless automation, active monitoring, Playwright and Puppeteer</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">This week we chat with Tim Nolet, whose commentary appeared in a previous episode after he complained about Amazon forking his OS service and presenting it as new product without so much as a thanks. Since then the two parties have worked things out, and Tim came on the show to explain what happened, what he builds in the open source world, and the company he runs.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Podcast</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Automation</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">DevOps</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://speckyboy.com/2020-web-design-year-in-review/" style="color: #3252a8; font-weight: bold;">2020 Web Design Year in Review</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">A year “like no other” is about to come to a close. 2020 was certainly unique for everyone – web designers included. And it challenged us on several levels.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Blog</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Looking back</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://alexsexton.com/blog/2015/02/the-15-commandments-of-front-end-performance/" style="color: #3252a8; font-weight: bold;">The 15 Commandments of Front-End Performance</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">This list is the product of many years of experience in the front-end web development field. I maintain this list as a reminder to myself to always follow best practices, and to not compromise on performance, even if I’m in a time crunch.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Blog</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Front-end</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Best practices</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://opensource.googleblog.com/2020/12/finding-critical-open-source-projects.html" style="color: #3252a8; font-weight: bold;">Finding Critical Open Source Projects</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Criticality of an open source project is difficult to define; what might be a critical dependency for one consumer of open source software may be entirely absent for another. However, arriving at a shared understanding and framework allows us to have productive conversations about our dependencies. Simply put, we define criticality to be the influence and importance of a project.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Blog</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Open source</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.stitcher.com/show/the-state-of-the-web/episode/http-archives-10th-anniversary-79556890" style="color: #3252a8; font-weight: bold;">HTTP Archive&#x27;s 10th Anniversary</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">Rick meets with Steve Souders, who created the HTTP Archive project 10 years ago this month, to talk about its origins and reflect on it&#x27;s growth.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Podcast</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Performance</span>
-            </div>
-          </div>
-          <div style="margin-bottom: 30px;">
-            <a href="https://www.startalkradio.net/show/cosmic-queries-medieval-science-and-history/" style="color: #3252a8; font-weight: bold;">Cosmic Queries – Medieval Science and History</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">When you think Middle Ages, does scientific advancement pop into your head? On this episode of StarTalk Radio, we’re exploring the science and history of medieval times as Neil deGrasse Tyson and comic co-host Matt Kirshen answer fan-submitted Cosmic Queries with Seb Falk, Cambridge Historian of Science and author of The Light Ages: The Surprising Story of Medieval Science.</div>
-            <div>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Podcast</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">Science</span>
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">History</span>
-            </div>
-          </div>
-
-    </div>
-
-    <div style="text-align: center; font-size: 80%; margin-top: 20px;">
-      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com/weekly-links-archive/">weekly links archive</a>
-      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com">mitjafelicijan.com</a>
-      <a style="color: #666; margin: auto 10px" href="https://github.com/mitjafelicijan">github.com/mitjafelicijan</a>
-    </div>
-
-  </body>
-
-</html>
diff --git a/emailing/generated/index.html b/emailing/generated/index.html
deleted file mode 100644
index 1e83d9f..0000000
--- a/emailing/generated/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-  <head>
-
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-    <meta name="theme-color" content="#ffffff">
-    <meta name="generator" content="https://github.com/mitjafelicijan/staticgen">
-
-    <title>Mitja Felicijan - Weekly links archive</title>
-
-    <link rel="stylesheet" href="https://mitjafelicijan.com/static/style.css">
-    <link rel="icon" type="image/png" href="https://mitjafelicijan.com/static/avatar-64x64.png">
-
-  </head>
-
-  <body>
-
-    <main>
-
-      <a href="/">⬅ Back home</a>
-
-      <h2>Weekly links archive</h2>
-      <ul class="article-list">
-          <li><a href="/weekly-links/2020-53.html">2020, 53</a></li>
-          <li><a href="/weekly-links/2020-52.html">2020, 52</a></li>
-      </ul>
-
-    </main>
-
-  </body>
-
-</html>
diff --git a/emailing/package.json b/emailing/package.json
deleted file mode 100644
index c4c5bc3..0000000
--- a/emailing/package.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "weekly-mailing",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@sendgrid/mail": "^7.4.0",
-    "axios": "^0.21.1",
-    "dayjs": "^1.9.7",
-    "handlebars": "^4.7.6",
-    "meow": "^8.1.0",
-    "yesno": "^0.3.1"
-  }
-}
diff --git a/emailing/send b/emailing/send
deleted file mode 100755
index 66bdeb9..0000000
--- a/emailing/send
+++ /dev/null
@@ -1,129 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const axios = require('axios');
-const dayjs = require('dayjs');
-const weekOfYear = require('dayjs/plugin/weekOfYear');
-const handlebars = require('handlebars');
-const yesno = require('yesno');
-const meow = require('meow');
-const { reverse } = require('dns');
-
-dayjs.extend(weekOfYear);
-
-(async function () {
-
-  const cli = meow(`
-	Usage
-	  $ ./send <input>
-
-	Options
-	  --production, -p      Uses production mailing list
-
-	Examples
-    $ ./send campaigns/2020-51.json --production
-  `, {
-    flags: {
-      production: {
-        type: 'boolean',
-        alias: 'p'
-      }
-    }
-  });
-
-  if (cli.input.length === 0) {
-    console.log('You must provide campagin JSON file.');
-    process.exit(1);
-  }
-
-  const campaignJSONFile = cli.input[0];
-  const year = path.basename(cli.input[0]).split('.')[0].split('-')[0];
-  const week = path.basename(cli.input[0]).split('.')[0].split('-')[1];
-  const from = { name: 'Mitja Felicijan', email: 'weekly@mitjafelicijan.com' };
-  const mailingList = cli.flags.production
-    ? { env: 'production', id: 'b03de6fc-ff95-40a0-8707-c0706b3c0b31' }
-    : { env: 'testing', id: '2bbcdedb-49d8-48f3-9f33-df6e04c9e5bf' };
-
-  const headers = {
-    'Authorization': 'Bearer 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',
-    'Content-Type': 'application/json',
-  };
-
-  // gets current week
-  let campaign = null;
-  try {
-    campaign = require(`./${campaignJSONFile}`);
-  } catch (err) {
-    console.error(err);
-    process.exit(1);
-  }
-
-  // gets list subscribers
-  const personalizations = [];
-  const contacts = await axios.get('https://api.sendgrid.com/v3/marketing/contacts', { headers: headers }).catch(error => { console.log(error) });
-  if (contacts) {
-    for (const contact of contacts.data.result) {
-      if (contact.list_ids.includes(mailingList.id)) {
-        personalizations.push({ to: [{ email: contact.email }] });
-      }
-    }
-  }
-
-  // gets handlebars template contents
-  let template = null;
-  try {
-    template = handlebars.compile(fs.readFileSync('templates/mailing.hbs', 'utf8'));
-    template = template({ title: `${year}: Week #${week} Links`, campaign });
-  } catch (e) {
-    console.error(err);
-    process.exit(1);
-  }
-
-  fs.writeFileSync(`generated/${year}-${week}.html`, template);
-
-  // asks for user input to allow sending emails
-  console.log(`\nWill send to ${personalizations.length} subscribers from list "${mailingList.env}":`)
-  for (const subscriber of personalizations) {
-    console.log(' - ', subscriber.to[0].email)
-  }
-
-  const consent = await yesno({
-    question: '\nAre you sure you want to continue?'
-  });
-
-  if (consent) {
-    // send actual emails
-    await axios.post('https://api.sendgrid.com/v3/mail/send', {
-      from,
-      subject: `Week #${week} Links`,
-      personalizations,
-      content: [{
-        type: 'text/html',
-        value: template
-      }]
-    }, { headers: headers }).catch(error => { console.log(error) });
-  }
-
-  console.log('\nAnd we are done.\n');
-
-  // generates index file
-
-  const HTMLFiles = fs.readdirSync('./generated/');
-  const indexFile = HTMLFiles.indexOf('index.html');
-  if (indexFile > -1) HTMLFiles.splice(indexFile, 1);
-
-  HTMLFiles.forEach((item, idx) => {
-    const parts = item.split('.')[0].split('-');
-    HTMLFiles[idx] = {
-      year: parts[0],
-      week: parts[1],
-      file: item,
-    }
-  });
-
-  let indexTemplate = handlebars.compile(fs.readFileSync('templates/index.hbs', 'utf8'));
-  indexTemplate = indexTemplate({ files: HTMLFiles.reverse() });
-  fs.writeFileSync(`generated/index.html`, indexTemplate);
-
-}());
diff --git a/emailing/templates/index.hbs b/emailing/templates/index.hbs
deleted file mode 100644
index 50b7bdd..0000000
--- a/emailing/templates/index.hbs
+++ /dev/null
@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-  <head>
-
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-    <meta name="theme-color" content="#ffffff">
-    <meta name="generator" content="https://github.com/mitjafelicijan/staticgen">
-
-    <title>Mitja Felicijan - Weekly links archive</title>
-
-    <link rel="stylesheet" href="https://mitjafelicijan.com/static/style.css">
-    <link rel="icon" type="image/png" href="https://mitjafelicijan.com/static/avatar-64x64.png">
-
-  </head>
-
-  <body>
-
-    <main>
-
-      <a href="/">⬅ Back home</a>
-
-      <h2>Weekly links archive</h2>
-      <ul class="article-list">
-        {{#each files}}
-          <li><a href="/weekly-links/{{ this.file }}">{{ this.year }}, {{ this.week }}</a></li>
-        {{/each}}
-      </ul>
-
-    </main>
-
-  </body>
-
-</html>
diff --git a/emailing/templates/mailing.hbs b/emailing/templates/mailing.hbs
deleted file mode 100644
index 42b464d..0000000
--- a/emailing/templates/mailing.hbs
+++ /dev/null
@@ -1,42 +0,0 @@
-<html>
-
-  <head>
-    <title>{{ title }}</title>
-  </head>
-
-  <body style="background: #f2f2f2; padding: 60px; color: #222222; line-height: 22px; font-family: sans-serif, system-ui, -apple-system; font-size: 16px;">
-
-    <div style="width: 650px; background: #ffffff; text-align: left; padding: 40px; margin: 0 auto; border-radius: 10px;">
-
-      {{#each campaign.categories}}
-        {{#each this.links}}
-          <div style="margin-bottom: 30px;">
-            <a href="{{this.url}}" style="color: #3252a8; font-weight: bold;">{{this.title}}</a>
-            <div style="margin-block-start: 5px; font-size: 90%;">{{this.excerpt}}</div>
-            <div>
-              {{#each this.tags}}
-                <span style="background: #e6e6e6;
-                  color: #777;
-                  border-radius: 3px;
-                  padding: 0px 10px;
-                  font-size: 70%;
-                  display: inline-block;
-                  margin-top: 5px;
-                  font-weight: 600;">{{.}}</span>
-              {{/each}}
-            </div>
-          </div>
-        {{/each}}
-      {{/each}}
-
-    </div>
-
-    <div style="text-align: center; font-size: 80%; margin-top: 20px;">
-      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com/weekly-links-archive/">weekly links archive</a>
-      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com">mitjafelicijan.com</a>
-      <a style="color: #666; margin: auto 10px" href="https://github.com/mitjafelicijan">github.com/mitjafelicijan</a>
-    </div>
-
-  </body>
-
-</html>
diff --git a/newsletter/.editorconfig b/newsletter/.editorconfig
new file mode 100644
index 0000000..29a570e
--- /dev/null
+++ b/newsletter/.editorconfig
@@ -0,0 +1,16 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.sh]
+indent_style = tab
+indent_size = 4
diff --git a/newsletter/.gitignore b/newsletter/.gitignore
new file mode 100644
index 0000000..d5a0f97
--- /dev/null
+++ b/newsletter/.gitignore
@@ -0,0 +1 @@
+sendgrid.env
diff --git a/newsletter/campaigns/2020-52.json b/newsletter/campaigns/2020-52.json
new file mode 100644
index 0000000..5990b8d
--- /dev/null
+++ b/newsletter/campaigns/2020-52.json
@@ -0,0 +1,75 @@
+{
+  "categories": [
+    {
+      "name": "General",
+      "links": [
+        {
+          "title": "3x3 SEO tips for JavaScript web apps",
+          "url": "https://www.youtube.com/watch?v=y1UzfahXfao&ab_channel=GoogleChromeDevelopers",
+          "excerpt": "Learn three basic SEO tips for Angular, React, and Vue.js web apps.",
+          "source": "Youtube"
+        },
+        {
+          "title": "Machine Learning & Text Analysis",
+          "url": "https://www.youtube.com/watch?v=y1UzfahXfao&ab_channel=GoogleChromeDevelopers",
+          "excerpt": "Text analysis is the process of obtaining valuable insights from texts. ML can work with different types of textual information such as social media posts, messages, and emails. Special software helps to preprocess and analyze this data.",
+          "source": "Blog"
+        },
+        {
+          "title": "Break a forEach Loop with JavaScript",
+          "url": "https://davidwalsh.name/javascript-array-tricks-3",
+          "excerpt": "He recently ran into another JavaScript trick that blew my mind: how to break a forEach loop, shared by Andrea Giammarchi!",
+          "source": "Blog"
+        },
+        {
+          "title": "Flappy Bird in JavaScript with 25 Lines of Code",
+          "url": "https://www.youtube.com/watch?v=M45iFPVdtj0&ab_channel=CodingTech",
+          "excerpt": "In this tutorial he takes you on the callenge to code a flappy bird clone in a few lines of code as possible.The starting point is an empty HTML canvas and you can follow along all the way to a complete game.",
+          "source": "Youtube"
+        },
+        {
+          "title": "What's new in DevTools",
+          "url": "https://www.youtube.com/watch?v=QsOF9SJJdAA&ab_channel=GoogleChromeDevelopers",
+          "excerpt": "An overview of the latest and greatest features in Chrome DevTools.",
+          "source": "Youtube"
+        },
+        {
+          "title": "Canvas2D is getting an update",
+          "url": "https://www.youtube.com/watch?v=dfOKFSDG7IM&ab_channel=GoogleChromeDevelopers",
+          "excerpt": "Your good, old friend the Canvas2D API has been improving and is worth another look. Hear about all the new features that have been added to the spec.",
+          "source": "Youtube"
+        },
+        {
+          "title": "A web framework for building 3D/AR/VR experiences",
+          "url": "https://aframe.io/",
+          "excerpt": "Make 3D worlds with HTML and Entity-Component For Quest, Rift, WMR, SteamVR, mobile, desktop.",
+          "source": "Product"
+        },
+        {
+          "title": "Introduction to Erlang",
+          "url": "https://serokell.io/blog/introduction-to-erlang",
+          "excerpt": "While Erlang is not as popular as some modern programming languages, it quietly runs applications like WhatsApp and WeChat that serve massive amounts of users every day.",
+          "source": "Blog"
+        },
+        {
+          "title": "Why is processing a sorted array faster than processing an unsorted array?",
+          "url": "https://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-processing-an-unsorted-array",
+          "excerpt": "Here is a piece of C++ code that shows some very peculiar behavior. For some strange reason, sorting the data miraculously makes the code almost six times faster.",
+          "source": "Nugget"
+        },
+        {
+          "title": "30-Second Maths: The 50 Most Mind-Expanding Theories in Mathematics, Each Explained in Half a Minute",
+          "url": "https://www.bookdepository.com/30-Second-Maths-Richard-J-Brown/9781785782886?ref=pd_gw_1_pd_gateway_1_1",
+          "excerpt": "30 Second Maths takes the top 50 most engaging mathematical theories, and explains them to the general reader in half a minute, using nothing more than two pages, 200 words and one picture. Read at your own pace, and discover that maths can be more fascinating than you ever imagined.",
+          "source": "Book"
+        },
+        {
+          "title": "Pomodoro Technique",
+          "url": "https://en.wikipedia.org/wiki/Pomodoro_Technique",
+          "excerpt": "The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s.",
+          "source": "Nugget"
+        }
+      ]
+    }
+  ]
+}
diff --git a/newsletter/campaigns/2020-53.json b/newsletter/campaigns/2020-53.json
new file mode 100644
index 0000000..de44449
--- /dev/null
+++ b/newsletter/campaigns/2020-53.json
@@ -0,0 +1,122 @@
+{
+  "categories": [
+    {
+      "name": "General",
+      "links": [
+        {
+          "title": "Transitioning to modern JavaScript",
+          "excerpt": "Over 90% of web traffic comes from browsers that support modern JavaScript, yet most websites ship legacy syntax in order to support a small number of very old browsers.",
+          "url": "https://youtu.be/cLxNdLK--yI",
+          "tags": [
+            "Video",
+            "JavaScript"
+          ]
+        },
+        {
+          "title": "Sign-up form best practices",
+          "excerpt": "Help your users sign up, sign in, and manage their account details with a minimum of fuss.",
+          "url": "https://youtu.be/Ev2mCzJZLtY",
+          "tags": [
+            "Video",
+            "Accessibility"
+          ]
+        },
+        {
+          "title": "AutoKeras",
+          "excerpt": "AutoKeras: An AutoML system based on Keras. It is developed by DATA Lab at Texas A&M University. The goal of AutoKeras is to make machine learning accessible for everyone.",
+          "url": "https://autokeras.com/",
+          "tags": [
+            "Product",
+            "Machine learning"
+          ]
+        },
+        {
+          "title": "Arduino Weather Station",
+          "excerpt": "This Is An Project To Help View Us The Current Temperature And Humidity In Time.",
+          "url": "https://www.hackster.io/m1cr0s0ft/arduino-weather-station-8ec09e",
+          "tags": [
+            "Blog",
+            "Hardware",
+            "Arduino"
+          ]
+        },
+        {
+          "title": "Beyond fast with new performance features",
+          "excerpt": "A whirlwind tour of new features and proposals to improve the performance of your pages.",
+          "url": "https://youtu.be/Z6wjUOSh9Tk",
+          "tags": [
+            "Video",
+            "Web optimization"
+          ]
+        },
+        {
+          "title": "How digital identity protects your software",
+          "excerpt": "Digital identity is the online representation of a person, organization, or a machine, and it is what gives us access to the data we use daily. Here’s a brief overview of identity, why it's vital to information security, and why you should know more about it.",
+          "url": "https://stackoverflow.blog/2020/12/21/how-digital-identity-protects-your-software/",
+          "tags": [
+            "Blog",
+            "Single sign on",
+            "Social login"
+          ]
+        },
+        {
+          "title": "Podcast 295: Diving into headless automation, active monitoring, Playwright and Puppeteer",
+          "excerpt": "This week we chat with Tim Nolet, whose commentary appeared in a previous episode after he complained about Amazon forking his OS service and presenting it as new product without so much as a thanks. Since then the two parties have worked things out, and Tim came on the show to explain what happened, what he builds in the open source world, and the company he runs.",
+          "url": "https://stackoverflow.blog/2020/12/15/podcast-295-diving-into-headless-automation-active-monitoring-playwright-and-puppeteer/",
+          "tags": [
+            "Podcast",
+            "Automation",
+            "DevOps"
+          ]
+        },
+        {
+          "title": "2020 Web Design Year in Review",
+          "excerpt": "A year “like no other” is about to come to a close. 2020 was certainly unique for everyone – web designers included. And it challenged us on several levels.",
+          "url": "https://speckyboy.com/2020-web-design-year-in-review/",
+          "tags": [
+            "Blog",
+            "Looking back"
+          ]
+        },
+        {
+          "title": "The 15 Commandments of Front-End Performance",
+          "excerpt": "This list is the product of many years of experience in the front-end web development field. I maintain this list as a reminder to myself to always follow best practices, and to not compromise on performance, even if I’m in a time crunch.",
+          "url": "https://alexsexton.com/blog/2015/02/the-15-commandments-of-front-end-performance/",
+          "tags": [
+            "Blog",
+            "Front-end",
+            "Best practices"
+          ]
+        },
+        {
+          "title": "Finding Critical Open Source Projects",
+          "excerpt": "Criticality of an open source project is difficult to define; what might be a critical dependency for one consumer of open source software may be entirely absent for another. However, arriving at a shared understanding and framework allows us to have productive conversations about our dependencies. Simply put, we define criticality to be the influence and importance of a project.",
+          "url": "https://opensource.googleblog.com/2020/12/finding-critical-open-source-projects.html",
+          "tags": [
+            "Blog",
+            "Open source"
+          ]
+        },
+        {
+          "title": "HTTP Archive's 10th Anniversary",
+          "excerpt": "Rick meets with Steve Souders, who created the HTTP Archive project 10 years ago this month, to talk about its origins and reflect on it's growth.",
+          "url": "https://www.stitcher.com/show/the-state-of-the-web/episode/http-archives-10th-anniversary-79556890",
+          "tags": [
+            "Podcast",
+            "Performance"
+          ]
+        },
+        {
+          "title": "Cosmic Queries – Medieval Science and History",
+          "excerpt": "When you think Middle Ages, does scientific advancement pop into your head? On this episode of StarTalk Radio, we’re exploring the science and history of medieval times as Neil deGrasse Tyson and comic co-host Matt Kirshen answer fan-submitted Cosmic Queries with Seb Falk, Cambridge Historian of Science and author of The Light Ages: The Surprising Story of Medieval Science.",
+          "url": "https://www.startalkradio.net/show/cosmic-queries-medieval-science-and-history/",
+          "tags": [
+            "Podcast",
+            "Science",
+            "History"
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/newsletter/campaigns/template.json b/newsletter/campaigns/template.json
new file mode 100644
index 0000000..56b33c9
--- /dev/null
+++ b/newsletter/campaigns/template.json
@@ -0,0 +1,15 @@
+{
+  "categories": [
+    {
+      "name": "General",
+      "links": [
+        {
+          "title": "",
+          "url": "",
+          "excerpt": "",
+          "source": ""
+        }
+      ]
+    }
+  ]
+}
diff --git a/newsletter/generated/2020-52.html b/newsletter/generated/2020-52.html
new file mode 100644
index 0000000..73f79da
--- /dev/null
+++ b/newsletter/generated/2020-52.html
@@ -0,0 +1,88 @@
+<html>
+
+  <head>
+    <title>2020: Week #52 Links</title>
+  </head>
+
+  <body style="background: #f2f2f2; padding: 60px; color: #222222; line-height: 22px; font-family: sans-serif, system-ui, -apple-system; font-size: 16px;">
+
+    <div style="width: 650px; background: #ffffff; text-align: left; padding: 40px; margin: 0 auto; border-radius: 10px;">
+
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.youtube.com/watch?v&#x3D;y1UzfahXfao&amp;ab_channel&#x3D;GoogleChromeDevelopers" style="color: #3252a8; font-weight: bold;">3x3 SEO tips for JavaScript web apps</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Learn three basic SEO tips for Angular, React, and Vue.js web apps.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.youtube.com/watch?v&#x3D;y1UzfahXfao&amp;ab_channel&#x3D;GoogleChromeDevelopers" style="color: #3252a8; font-weight: bold;">Machine Learning &amp; Text Analysis</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Text analysis is the process of obtaining valuable insights from texts. ML can work with different types of textual information such as social media posts, messages, and emails. Special software helps to preprocess and analyze this data.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://davidwalsh.name/javascript-array-tricks-3" style="color: #3252a8; font-weight: bold;">Break a forEach Loop with JavaScript</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">He recently ran into another JavaScript trick that blew my mind: how to break a forEach loop, shared by Andrea Giammarchi!</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.youtube.com/watch?v&#x3D;M45iFPVdtj0&amp;ab_channel&#x3D;CodingTech" style="color: #3252a8; font-weight: bold;">Flappy Bird in JavaScript with 25 Lines of Code</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">In this tutorial he takes you on the callenge to code a flappy bird clone in a few lines of code as possible.The starting point is an empty HTML canvas and you can follow along all the way to a complete game.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.youtube.com/watch?v&#x3D;QsOF9SJJdAA&amp;ab_channel&#x3D;GoogleChromeDevelopers" style="color: #3252a8; font-weight: bold;">What&#x27;s new in DevTools</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">An overview of the latest and greatest features in Chrome DevTools.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.youtube.com/watch?v&#x3D;dfOKFSDG7IM&amp;ab_channel&#x3D;GoogleChromeDevelopers" style="color: #3252a8; font-weight: bold;">Canvas2D is getting an update</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Your good, old friend the Canvas2D API has been improving and is worth another look. Hear about all the new features that have been added to the spec.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://aframe.io/" style="color: #3252a8; font-weight: bold;">A web framework for building 3D/AR/VR experiences</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Make 3D worlds with HTML and Entity-Component For Quest, Rift, WMR, SteamVR, mobile, desktop.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://serokell.io/blog/introduction-to-erlang" style="color: #3252a8; font-weight: bold;">Introduction to Erlang</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">While Erlang is not as popular as some modern programming languages, it quietly runs applications like WhatsApp and WeChat that serve massive amounts of users every day.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-processing-an-unsorted-array" style="color: #3252a8; font-weight: bold;">Why is processing a sorted array faster than processing an unsorted array?</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Here is a piece of C++ code that shows some very peculiar behavior. For some strange reason, sorting the data miraculously makes the code almost six times faster.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.bookdepository.com/30-Second-Maths-Richard-J-Brown/9781785782886?ref&#x3D;pd_gw_1_pd_gateway_1_1" style="color: #3252a8; font-weight: bold;">30-Second Maths: The 50 Most Mind-Expanding Theories in Mathematics, Each Explained in Half a Minute</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">30 Second Maths takes the top 50 most engaging mathematical theories, and explains them to the general reader in half a minute, using nothing more than two pages, 200 words and one picture. Read at your own pace, and discover that maths can be more fascinating than you ever imagined.</div>
+            <div>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://en.wikipedia.org/wiki/Pomodoro_Technique" style="color: #3252a8; font-weight: bold;">Pomodoro Technique</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s.</div>
+            <div>
+            </div>
+          </div>
+
+    </div>
+
+    <div style="text-align: center; font-size: 80%; margin-top: 20px;">
+      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com/weekly-newsletter-archive/">weekly links archive</a>
+      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com">mitjafelicijan.com</a>
+      <a style="color: #666; margin: auto 10px" href="https://github.com/mitjafelicijan">github.com/mitjafelicijan</a>
+    </div>
+
+  </body>
+
+</html>
diff --git a/newsletter/generated/2020-53.html b/newsletter/generated/2020-53.html
new file mode 100644
index 0000000..60c6cef
--- /dev/null
+++ b/newsletter/generated/2020-53.html
@@ -0,0 +1,326 @@
+<html>
+
+  <head>
+    <title>2020: Week #53 Links</title>
+  </head>
+
+  <body style="background: #f2f2f2; padding: 60px; color: #222222; line-height: 22px; font-family: sans-serif, system-ui, -apple-system; font-size: 16px;">
+
+    <div style="width: 650px; background: #ffffff; text-align: left; padding: 40px; margin: 0 auto; border-radius: 10px;">
+
+          <div style="margin-bottom: 30px;">
+            <a href="https://youtu.be/cLxNdLK--yI" style="color: #3252a8; font-weight: bold;">Transitioning to modern JavaScript</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Over 90% of web traffic comes from browsers that support modern JavaScript, yet most websites ship legacy syntax in order to support a small number of very old browsers.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Video</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">JavaScript</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://youtu.be/Ev2mCzJZLtY" style="color: #3252a8; font-weight: bold;">Sign-up form best practices</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Help your users sign up, sign in, and manage their account details with a minimum of fuss.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Video</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Accessibility</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://autokeras.com/" style="color: #3252a8; font-weight: bold;">AutoKeras</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">AutoKeras: An AutoML system based on Keras. It is developed by DATA Lab at Texas A&amp;M University. The goal of AutoKeras is to make machine learning accessible for everyone.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Product</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Machine learning</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.hackster.io/m1cr0s0ft/arduino-weather-station-8ec09e" style="color: #3252a8; font-weight: bold;">Arduino Weather Station</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">This Is An Project To Help View Us The Current Temperature And Humidity In Time.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Blog</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Hardware</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Arduino</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://youtu.be/Z6wjUOSh9Tk" style="color: #3252a8; font-weight: bold;">Beyond fast with new performance features</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">A whirlwind tour of new features and proposals to improve the performance of your pages.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Video</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Web optimization</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://stackoverflow.blog/2020/12/21/how-digital-identity-protects-your-software/" style="color: #3252a8; font-weight: bold;">How digital identity protects your software</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Digital identity is the online representation of a person, organization, or a machine, and it is what gives us access to the data we use daily. Here’s a brief overview of identity, why it&#x27;s vital to information security, and why you should know more about it.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Blog</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Single sign on</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Social login</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://stackoverflow.blog/2020/12/15/podcast-295-diving-into-headless-automation-active-monitoring-playwright-and-puppeteer/" style="color: #3252a8; font-weight: bold;">Podcast 295: Diving into headless automation, active monitoring, Playwright and Puppeteer</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">This week we chat with Tim Nolet, whose commentary appeared in a previous episode after he complained about Amazon forking his OS service and presenting it as new product without so much as a thanks. Since then the two parties have worked things out, and Tim came on the show to explain what happened, what he builds in the open source world, and the company he runs.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Podcast</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Automation</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">DevOps</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://speckyboy.com/2020-web-design-year-in-review/" style="color: #3252a8; font-weight: bold;">2020 Web Design Year in Review</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">A year “like no other” is about to come to a close. 2020 was certainly unique for everyone – web designers included. And it challenged us on several levels.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Blog</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Looking back</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://alexsexton.com/blog/2015/02/the-15-commandments-of-front-end-performance/" style="color: #3252a8; font-weight: bold;">The 15 Commandments of Front-End Performance</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">This list is the product of many years of experience in the front-end web development field. I maintain this list as a reminder to myself to always follow best practices, and to not compromise on performance, even if I’m in a time crunch.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Blog</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Front-end</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Best practices</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://opensource.googleblog.com/2020/12/finding-critical-open-source-projects.html" style="color: #3252a8; font-weight: bold;">Finding Critical Open Source Projects</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Criticality of an open source project is difficult to define; what might be a critical dependency for one consumer of open source software may be entirely absent for another. However, arriving at a shared understanding and framework allows us to have productive conversations about our dependencies. Simply put, we define criticality to be the influence and importance of a project.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Blog</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Open source</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.stitcher.com/show/the-state-of-the-web/episode/http-archives-10th-anniversary-79556890" style="color: #3252a8; font-weight: bold;">HTTP Archive&#x27;s 10th Anniversary</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">Rick meets with Steve Souders, who created the HTTP Archive project 10 years ago this month, to talk about its origins and reflect on it&#x27;s growth.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Podcast</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Performance</span>
+            </div>
+          </div>
+          <div style="margin-bottom: 30px;">
+            <a href="https://www.startalkradio.net/show/cosmic-queries-medieval-science-and-history/" style="color: #3252a8; font-weight: bold;">Cosmic Queries – Medieval Science and History</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">When you think Middle Ages, does scientific advancement pop into your head? On this episode of StarTalk Radio, we’re exploring the science and history of medieval times as Neil deGrasse Tyson and comic co-host Matt Kirshen answer fan-submitted Cosmic Queries with Seb Falk, Cambridge Historian of Science and author of The Light Ages: The Surprising Story of Medieval Science.</div>
+            <div>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Podcast</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">Science</span>
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">History</span>
+            </div>
+          </div>
+
+    </div>
+
+    <div style="text-align: center; font-size: 80%; margin-top: 20px;">
+      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com/weekly-newsletter-archive/">weekly links archive</a>
+      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com">mitjafelicijan.com</a>
+      <a style="color: #666; margin: auto 10px" href="https://github.com/mitjafelicijan">github.com/mitjafelicijan</a>
+    </div>
+
+  </body>
+
+</html>
diff --git a/newsletter/generated/index.html b/newsletter/generated/index.html
new file mode 100644
index 0000000..7d27ecb
--- /dev/null
+++ b/newsletter/generated/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <meta name="theme-color" content="#ffffff">
+    <meta name="generator" content="https://github.com/mitjafelicijan/staticgen">
+
+    <title>Mitja Felicijan - Weekly links archive</title>
+
+    <link rel="stylesheet" href="https://mitjafelicijan.com/static/style.css">
+    <link rel="icon" type="image/png" href="https://mitjafelicijan.com/static/avatar-64x64.png">
+
+  </head>
+
+  <body>
+
+    <main>
+
+      <a href="/">⬅ Back home</a>
+
+      <h2>Weekly links archive</h2>
+      <ul class="article-list">
+          <li><a href="/weekly-newsletter-archive/2020-53.html">2020, 53</a></li>
+          <li><a href="/weekly-newsletter-archive/2020-52.html">2020, 52</a></li>
+      </ul>
+
+    </main>
+
+  </body>
+
+</html>
diff --git a/newsletter/package.json b/newsletter/package.json
new file mode 100644
index 0000000..c4c5bc3
--- /dev/null
+++ b/newsletter/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "weekly-mailing",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@sendgrid/mail": "^7.4.0",
+    "axios": "^0.21.1",
+    "dayjs": "^1.9.7",
+    "handlebars": "^4.7.6",
+    "meow": "^8.1.0",
+    "yesno": "^0.3.1"
+  }
+}
diff --git a/newsletter/send b/newsletter/send
new file mode 100755
index 0000000..66bdeb9
--- /dev/null
+++ b/newsletter/send
@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const axios = require('axios');
+const dayjs = require('dayjs');
+const weekOfYear = require('dayjs/plugin/weekOfYear');
+const handlebars = require('handlebars');
+const yesno = require('yesno');
+const meow = require('meow');
+const { reverse } = require('dns');
+
+dayjs.extend(weekOfYear);
+
+(async function () {
+
+  const cli = meow(`
+	Usage
+	  $ ./send <input>
+
+	Options
+	  --production, -p      Uses production mailing list
+
+	Examples
+    $ ./send campaigns/2020-51.json --production
+  `, {
+    flags: {
+      production: {
+        type: 'boolean',
+        alias: 'p'
+      }
+    }
+  });
+
+  if (cli.input.length === 0) {
+    console.log('You must provide campagin JSON file.');
+    process.exit(1);
+  }
+
+  const campaignJSONFile = cli.input[0];
+  const year = path.basename(cli.input[0]).split('.')[0].split('-')[0];
+  const week = path.basename(cli.input[0]).split('.')[0].split('-')[1];
+  const from = { name: 'Mitja Felicijan', email: 'weekly@mitjafelicijan.com' };
+  const mailingList = cli.flags.production
+    ? { env: 'production', id: 'b03de6fc-ff95-40a0-8707-c0706b3c0b31' }
+    : { env: 'testing', id: '2bbcdedb-49d8-48f3-9f33-df6e04c9e5bf' };
+
+  const headers = {
+    'Authorization': 'Bearer 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',
+    'Content-Type': 'application/json',
+  };
+
+  // gets current week
+  let campaign = null;
+  try {
+    campaign = require(`./${campaignJSONFile}`);
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+
+  // gets list subscribers
+  const personalizations = [];
+  const contacts = await axios.get('https://api.sendgrid.com/v3/marketing/contacts', { headers: headers }).catch(error => { console.log(error) });
+  if (contacts) {
+    for (const contact of contacts.data.result) {
+      if (contact.list_ids.includes(mailingList.id)) {
+        personalizations.push({ to: [{ email: contact.email }] });
+      }
+    }
+  }
+
+  // gets handlebars template contents
+  let template = null;
+  try {
+    template = handlebars.compile(fs.readFileSync('templates/mailing.hbs', 'utf8'));
+    template = template({ title: `${year}: Week #${week} Links`, campaign });
+  } catch (e) {
+    console.error(err);
+    process.exit(1);
+  }
+
+  fs.writeFileSync(`generated/${year}-${week}.html`, template);
+
+  // asks for user input to allow sending emails
+  console.log(`\nWill send to ${personalizations.length} subscribers from list "${mailingList.env}":`)
+  for (const subscriber of personalizations) {
+    console.log(' - ', subscriber.to[0].email)
+  }
+
+  const consent = await yesno({
+    question: '\nAre you sure you want to continue?'
+  });
+
+  if (consent) {
+    // send actual emails
+    await axios.post('https://api.sendgrid.com/v3/mail/send', {
+      from,
+      subject: `Week #${week} Links`,
+      personalizations,
+      content: [{
+        type: 'text/html',
+        value: template
+      }]
+    }, { headers: headers }).catch(error => { console.log(error) });
+  }
+
+  console.log('\nAnd we are done.\n');
+
+  // generates index file
+
+  const HTMLFiles = fs.readdirSync('./generated/');
+  const indexFile = HTMLFiles.indexOf('index.html');
+  if (indexFile > -1) HTMLFiles.splice(indexFile, 1);
+
+  HTMLFiles.forEach((item, idx) => {
+    const parts = item.split('.')[0].split('-');
+    HTMLFiles[idx] = {
+      year: parts[0],
+      week: parts[1],
+      file: item,
+    }
+  });
+
+  let indexTemplate = handlebars.compile(fs.readFileSync('templates/index.hbs', 'utf8'));
+  indexTemplate = indexTemplate({ files: HTMLFiles.reverse() });
+  fs.writeFileSync(`generated/index.html`, indexTemplate);
+
+}());
diff --git a/newsletter/templates/index.hbs b/newsletter/templates/index.hbs
new file mode 100644
index 0000000..8a96125
--- /dev/null
+++ b/newsletter/templates/index.hbs
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <meta name="theme-color" content="#ffffff">
+    <meta name="generator" content="https://github.com/mitjafelicijan/staticgen">
+
+    <title>Mitja Felicijan - Weekly links archive</title>
+
+    <link rel="stylesheet" href="https://mitjafelicijan.com/static/style.css">
+    <link rel="icon" type="image/png" href="https://mitjafelicijan.com/static/avatar-64x64.png">
+
+  </head>
+
+  <body>
+
+    <main>
+
+      <a href="/">⬅ Back home</a>
+
+      <h2>Weekly links archive</h2>
+      <ul class="article-list">
+        {{#each files}}
+          <li><a href="/weekly-newsletter-archive/{{ this.file }}">{{ this.year }}, {{ this.week }}</a></li>
+        {{/each}}
+      </ul>
+
+    </main>
+
+  </body>
+
+</html>
diff --git a/newsletter/templates/mailing.hbs b/newsletter/templates/mailing.hbs
new file mode 100644
index 0000000..d1c8cf4
--- /dev/null
+++ b/newsletter/templates/mailing.hbs
@@ -0,0 +1,42 @@
+<html>
+
+  <head>
+    <title>{{ title }}</title>
+  </head>
+
+  <body style="background: #f2f2f2; padding: 60px; color: #222222; line-height: 22px; font-family: sans-serif, system-ui, -apple-system; font-size: 16px;">
+
+    <div style="width: 650px; background: #ffffff; text-align: left; padding: 40px; margin: 0 auto; border-radius: 10px;">
+
+      {{#each campaign.categories}}
+        {{#each this.links}}
+          <div style="margin-bottom: 30px;">
+            <a href="{{this.url}}" style="color: #3252a8; font-weight: bold;">{{this.title}}</a>
+            <div style="margin-block-start: 5px; font-size: 90%;">{{this.excerpt}}</div>
+            <div>
+              {{#each this.tags}}
+                <span style="background: #e6e6e6;
+                  color: #777;
+                  border-radius: 3px;
+                  padding: 0px 10px;
+                  font-size: 70%;
+                  display: inline-block;
+                  margin-top: 5px;
+                  font-weight: 600;">{{.}}</span>
+              {{/each}}
+            </div>
+          </div>
+        {{/each}}
+      {{/each}}
+
+    </div>
+
+    <div style="text-align: center; font-size: 80%; margin-top: 20px;">
+      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com/weekly-newsletter-archive/">weekly links archive</a>
+      <a style="color: #666; margin: auto 10px" href="https://mitjafelicijan.com">mitjafelicijan.com</a>
+      <a style="color: #666; margin: auto 10px" href="https://github.com/mitjafelicijan">github.com/mitjafelicijan</a>
+    </div>
+
+  </body>
+
+</html>
diff --git a/templates/partials/navigation.twig b/templates/partials/navigation.twig
index 56e0ef1..32a3814 100644
--- a/templates/partials/navigation.twig
+++ b/templates/partials/navigation.twig
@@ -3,5 +3,5 @@
   <a href="/curriculum-vitae.html">CV</a>
   <a href="https://twitter.com/mitjafelicijan" target="_blank" rel="noopener nofollow">Twitter</a>
   <a href="https://github.com/mitjafelicijan" target="_blank" rel="noopener nofollow">Github</a>
-  <a href="/weekly-links.html">Weekly links</a>
+  <a href="/weekly-newsletter.html">Weekly newsletter</a>
 </nav>
-- 
cgit v1.2.3